{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown",
  "type": "registry:ui",
  "title": "Dropdown",
  "description": "A dropdown component that can be used to display a list of options.",
  "registryDependencies": [
    "@tra-kit/popover"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/dropdown.tsx",
      "content": "import React, { useEffect, useRef, useState } from 'react';\r\nimport { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';\r\nimport { cn } from '@/lib/utils';\r\nimport { Popover, PopoverTrigger, PopoverContent } from './popover';\r\n\r\ninterface IDropdownItem {\r\n  label: string | React.ReactNode;\r\n  value: string | number | boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\ninterface IDropdownProps {\r\n  label?: string;\r\n  options: IDropdownItem[];\r\n  value?: string | number | boolean;\r\n  defaultValue?: string | number | boolean;\r\n  onChange?: (value: string | number | boolean) => void;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  triggerClassName?: string;\r\n  contentClassName?: string;\r\n  itemClassName?: string;\r\n  placeholder?: string;\r\n  dropdownAlign?: 'left' | 'right';\r\n  id?: string;\r\n  iconClassName?: string;\r\n  forceTriggerWidth?: boolean;\r\n}\r\n\r\nconst Dropdown: React.FC<IDropdownProps> = ({\r\n  label,\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  disabled = false,\r\n  className = '',\r\n  triggerClassName = '',\r\n  contentClassName = '',\r\n  itemClassName = '',\r\n  placeholder = 'Select...',\r\n  dropdownAlign = 'left',\r\n  id,\r\n  iconClassName,\r\n  forceTriggerWidth = false,\r\n}) => {\r\n  const [open, setOpen] = useState(false);\r\n  const [selected, setSelected] = useState<IDropdownItem | null>(null);\r\n  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\r\n  const listRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (defaultValue !== undefined) {\r\n      const def = options.find((o) => o.value === defaultValue) || null;\r\n      setSelected(def);\r\n    }\r\n  }, [defaultValue, options]);\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      const val = options.find((o) => o.value === value) || null;\r\n      setSelected(val);\r\n    }\r\n  }, [value, options]);\r\n\r\n  useEffect(() => {\r\n    if (!open) {\r\n      setHighlightedIndex(-1);\r\n    }\r\n  }, [open]);\r\n\r\n  const onItemSelect = (item: IDropdownItem) => {\r\n    if (item.disabled) return;\r\n    setSelected(item);\r\n    onChange?.(item.value);\r\n    setOpen(false);\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (!open) return;\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n        e.preventDefault();\r\n        setHighlightedIndex((prev) => {\r\n          const next = Math.min(prev + 1, options.length - 1);\r\n          scrollIntoView(next);\r\n          return next;\r\n        });\r\n        break;\r\n      case 'ArrowUp':\r\n        e.preventDefault();\r\n        setHighlightedIndex((prev) => {\r\n          const next = Math.max(prev - 1, 0);\r\n          scrollIntoView(next);\r\n          return next;\r\n        });\r\n        break;\r\n      case 'Enter':\r\n        e.preventDefault();\r\n        if (highlightedIndex >= 0 && highlightedIndex < options.length) {\r\n          onItemSelect(options[highlightedIndex]);\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        setOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  const scrollIntoView = (index: number) => {\r\n    const node = listRef.current?.children[index] as HTMLElement | undefined;\r\n    if (node) node.scrollIntoView({ block: 'nearest' });\r\n  };\r\n\r\n  return (\r\n    <Popover\r\n      open={open}\r\n      onOpenChange={setOpen}\r\n      disabled={disabled}\r\n      dropdownAlign={dropdownAlign}\r\n      forceTriggerWidth={forceTriggerWidth}\r\n    >\r\n      <div\r\n        className={cn('TraDropdown relative', className)}\r\n        id={id}\r\n      >\r\n        {label && <div className=\"text-neutral mb-2 text-sm font-medium\">{label}</div>}\r\n        <PopoverTrigger\r\n          className={cn(\r\n            'flex w-full items-center justify-between rounded-md border px-4 py-3 text-left',\r\n            disabled\r\n              ? 'border-input-light bg-input-light text-neutral-disabled-text cursor-not-allowed'\r\n              : 'border-neutral',\r\n            triggerClassName,\r\n          )}\r\n          data-disabled={disabled}\r\n        >\r\n          <div className=\"truncate\">\r\n            {selected ? selected.label : <span className=\"text-neutral-grey\">{placeholder}</span>}\r\n          </div>\r\n          <CaretDownIcon className={cn('ml-4', iconClassName)} />\r\n        </PopoverTrigger>\r\n\r\n        <PopoverContent\r\n          className={cn(\r\n            'rounded-md border bg-background shadow-md overflow-auto',\r\n            contentClassName,\r\n          )}\r\n        >\r\n          <div\r\n            ref={listRef}\r\n            role=\"listbox\"\r\n            tabIndex={0}\r\n            onKeyDown={handleKeyDown}\r\n            className=\"max-h-80 w-full\"\r\n          >\r\n            {options.map((opt, idx) => (\r\n              <div\r\n                key={`${String(opt.value)}-${idx}`}\r\n                role=\"option\"\r\n                aria-selected={selected?.value === opt.value}\r\n                data-disabled={opt.disabled}\r\n                onClick={() => onItemSelect(opt)}\r\n                onMouseEnter={() => setHighlightedIndex(idx)}\r\n                className={cn(\r\n                  'flex items-center justify-between px-4 py-2 text-sm cursor-pointer',\r\n                  highlightedIndex === idx && 'bg-neutral-light',\r\n                  opt.disabled && 'opacity-50 cursor-not-allowed',\r\n                  itemClassName,\r\n                )}\r\n              >\r\n                <div className=\"truncate\">{opt.label}</div>\r\n                {selected?.value === opt.value && <CheckIcon className=\"ml-2\" />}\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </PopoverContent>\r\n      </div>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport default Dropdown;\r\n",
      "type": "registry:ui"
    }
  ]
}