{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown",
  "title": "Dropdown",
  "description": "Dropdown menu with items, checkbox/radio items, sub-menus, separators, and shortcuts.",
  "dependencies": ["@radix-ui/react-dropdown-menu", "lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/dropdown.tsx",
      "content": "'use client';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Check, ChevronRight, Circle } from 'lucide-react';\nimport { ComponentProps } from 'react';\n\nimport { Label2 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\n/*\n * UX4G dropdown: min-width 10rem, border-radius 0.5rem, padding-y 0.5rem,\n * border 1px solid neutral-200, item padding 0.25rem 1rem,\n * item hover bg primary-50, active bg primary, header color secondary (neutral-500),\n * divider: border-top 1px neutral-200, margin-y 0.5rem.\n */\n\n/** Dropdown menu root component. */\nfunction Dropdown(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root {...props} />;\n}\n\n/** Dropdown menu trigger button. */\nfunction DropdownTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger {...props} />;\n}\n\n/** Dropdown menu item group. */\nfunction DropdownGroup(props: ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group {...props} />;\n}\n\n/** Dropdown menu portal container. */\nfunction DropdownPortal(props: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal {...props} />;\n}\n\n/** Dropdown submenu root. */\nfunction DropdownSub(props: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub {...props} />;\n}\n\n/** Dropdown radio item group. */\nfunction DropdownRadioGroup(props: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup {...props} />;\n}\n\n/** Dropdown submenu trigger item. */\nfunction DropdownSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      className={cn(\n        'hover:bg-primary-50 focus:bg-primary-50 data-[state=open]:bg-primary-50 flex cursor-default items-center px-4 py-1 outline-none select-none',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    >\n      <Label2 className='text-sm'>{children}</Label2>\n      <ChevronRight className='ml-auto size-4' />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** Dropdown submenu content panel. */\nfunction DropdownSubContent({\n  className,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      className={cn(\n        'bg-neutral-0 text-neutral z-50 min-w-40 overflow-hidden rounded-lg border border-neutral-200 py-2 shadow-lg',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface IDropdownContentProps extends ComponentProps<typeof DropdownMenuPrimitive.Content> {\n  variant?: 'default' | 'dark';\n}\n\n/** Dropdown menu content container. */\nfunction DropdownContent({\n  className,\n  sideOffset = 2,\n  variant = 'default',\n  ...props\n}: IDropdownContentProps) {\n  return (\n    <DropdownPortal>\n      <DropdownMenuPrimitive.Content\n        sideOffset={sideOffset}\n        className={cn(\n          'z-50 min-w-40 overflow-hidden rounded-lg border py-2 shadow-lg',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          variant === 'dark'\n            ? 'text-neutral-0 border-neutral-800 bg-neutral-900'\n            : 'bg-neutral-0 text-neutral border-neutral-200',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownPortal>\n  );\n}\n\n/** Single selectable dropdown menu item. */\nfunction DropdownItem({\n  className,\n  inset,\n  children,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(\n        'focus:bg-primary-50 relative flex w-full cursor-default items-center px-4 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:text-neutral-400',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\n/** Dropdown menu item with a checkbox indicator. */\nfunction DropdownCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      className={cn(\n        'focus:bg-primary-50 relative flex cursor-default items-center py-1.5 pr-4 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:text-neutral-400',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <div className='absolute left-2 flex size-3.5 items-center justify-center'>\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Check className='size-4' />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </div>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Dropdown menu item with a radio indicator. */\nfunction DropdownRadioItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      className={cn(\n        'focus:bg-primary-50 relative flex cursor-default items-center py-1.5 pr-4 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:text-neutral-400',\n        className,\n      )}\n      {...props}\n    >\n      <div className='absolute left-2 flex size-3.5 items-center justify-center'>\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Circle className='size-2 fill-current' />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </div>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** Section label inside a dropdown. UX4G: neutral-500, padding 0.5rem 1rem. */\nfunction DropdownLabel({\n  className,\n  inset,\n  children,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn('px-4 py-2 text-sm text-neutral-500', inset && 'pl-8', className)}\n      {...props}\n    >\n      {children}\n    </DropdownMenuPrimitive.Label>\n  );\n}\n\n/** Divider inside a dropdown. UX4G: margin 0.5rem 0, border-top 1px neutral-200. */\nfunction DropdownSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn('my-2 h-px bg-neutral-200', className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard shortcut hint displayed in a dropdown item. */\nfunction DropdownShortcut({ className, children, ...props }: ComponentProps<'div'>) {\n  return (\n    <Label2 className={cn('ml-auto tracking-widest opacity-60', className)} {...props}>\n      {children}\n    </Label2>\n  );\n}\n\nexport {\n  Dropdown,\n  DropdownTrigger,\n  DropdownContent,\n  DropdownItem,\n  DropdownCheckboxItem,\n  DropdownRadioItem,\n  DropdownLabel,\n  DropdownSeparator,\n  DropdownShortcut,\n  DropdownGroup,\n  DropdownPortal,\n  DropdownSub,\n  DropdownSubContent,\n  DropdownSubTrigger,\n  DropdownRadioGroup,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}