{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "type": "registry:ui",
  "title": "Dropdown Menu",
  "description": "A dropdown menu component",
  "dependencies": [
    "solid-js",
    "@kobalte/core"
  ],
  "files": [
    {
      "path": "src/registry/ui/dropdown-menu.tsx",
      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DropdownMenuPrimitive from \"@kobalte/core/dropdown-menu\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (props) => {\n  return <DropdownMenuPrimitive.Root gutter={4} {...props} />\n}\n\ntype DropdownMenuContentProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {\n    class?: string | undefined\n  }\n\nconst DropdownMenuContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuContentProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuContentProps, [\"class\"])\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        class={cn(\n          \"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-content-show\",\n          props.class\n        )}\n        {...rest}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\ntype DropdownMenuItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {\n    class?: string | undefined\n  }\n\nconst DropdownMenuItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuItemProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuItemProps, [\"class\"])\n  return (\n    <DropdownMenuPrimitive.Item\n      class={cn(\n        \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst DropdownMenuShortcut: Component<ComponentProps<\"span\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <span class={cn(\"ml-auto text-xs tracking-widest opacity-60\", props.class)} {...rest} />\n}\n\nconst DropdownMenuLabel: Component<ComponentProps<\"div\"> & { inset?: boolean }> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"inset\"])\n  return (\n    <div\n      class={cn(\"px-2 py-1.5 text-sm font-semibold\", props.inset && \"pl-8\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DropdownMenuSeparatorProps<T extends ValidComponent = \"hr\"> =\n  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {\n    class?: string | undefined\n  }\n\nconst DropdownMenuSeparator = <T extends ValidComponent = \"hr\">(\n  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuSeparatorProps, [\"class\"])\n  return (\n    <DropdownMenuPrimitive.Separator\n      class={cn(\"-mx-1 my-1 h-px bg-muted\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DropdownMenuSubTriggerProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst DropdownMenuSubTrigger = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, [\"class\", \"children\"])\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      class={cn(\n        \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n        props.class\n      )}\n      {...rest}\n    >\n      {props.children}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"ml-auto size-4\"\n      >\n        <path d=\"M9 6l6 6l-6 6\" />\n      </svg>\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\ntype DropdownMenuSubContentProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {\n    class?: string | undefined\n  }\n\nconst DropdownMenuSubContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuSubContentProps, [\"class\"])\n  return (\n    <DropdownMenuPrimitive.SubContent\n      class={cn(\n        \"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\ntype DropdownMenuCheckboxItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst DropdownMenuCheckboxItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [\"class\", \"children\"])\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        props.class\n      )}\n      {...rest}\n    >\n      <span class=\"absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M5 12l5 5l10 -10\" />\n          </svg>\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {props.children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\ntype DropdownMenuGroupLabelProps<T extends ValidComponent = \"span\"> =\n  DropdownMenuPrimitive.DropdownMenuGroupLabelProps<T> & {\n    class?: string | undefined\n  }\n\nconst DropdownMenuGroupLabel = <T extends ValidComponent = \"span\">(\n  props: PolymorphicProps<T, DropdownMenuGroupLabelProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, [\"class\"])\n  return (\n    <DropdownMenuPrimitive.GroupLabel\n      class={cn(\"px-2 py-1.5 text-sm font-semibold\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DropdownMenuRadioItemProps<T extends ValidComponent = \"div\"> =\n  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst DropdownMenuRadioItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>\n) => {\n  const [, rest] = splitProps(props as DropdownMenuRadioItemProps, [\"class\", \"children\"])\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        props.class\n      )}\n      {...rest}\n    >\n      <span class=\"absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-2 fill-current\"\n          >\n            <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n          </svg>\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {props.children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuShortcut,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem\n}\n",
      "type": "registry:ui"
    }
  ]
}