{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "Dropdown select with grouped options and a cascading open.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/select.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\nimport { enterChildren, motionScale, popIn, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nconst triggerVariants = cva(\n  \"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-card px-3 text-sm whitespace-nowrap shadow-control outline-none transition-[border-color,box-shadow] duration-150 ease-cue hover:border-ring/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: { size: { sm: \"h-ctl-sm text-[0.8125rem]\", md: \"h-ctl-md\", lg: \"h-ctl-lg\" } },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nfunction SelectTrigger({ className, size = \"md\", children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & VariantProps<typeof triggerVariants>) {\n  return (\n    <SelectPrimitive.Trigger data-slot=\"select-trigger\" data-size={size} className={cn(triggerVariants({ size }), \"group/select\", className)} {...props}>\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 text-muted-foreground transition-transform duration-200 ease-cue group-data-[state=open]/select:rotate-180\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\n/** Opens with a spring from the trigger, then the first options cascade in. */\nfunction enter(node: HTMLElement | null) {\n  if (!node || node.dataset.entered !== undefined) return;\n  popIn(node);\n  node.dataset.entered = \"\";\n  const scale = motionScale(node);\n  if (!scale) return;\n  const items = Array.from(node.querySelectorAll('[data-slot=\"select-item\"]')).slice(0, 8);\n  enterChildren(items, { opacity: 0, y: -4 * scale }, { duration: 0.25, stagger: 0.02, delay: 0.03 });\n}\n\nfunction SelectContent({ className, children, position = \"popper\", sideOffset = 4, ref, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  const mergedRef = useMergedRef(enter, ref);\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={mergedRef}\n        data-slot=\"select-content\"\n        position={position}\n        sideOffset={position === \"popper\" ? sideOffset : undefined}\n        className={cn(\n          \"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl bg-popover ring-1 ring-foreground/10 text-popover-foreground shadow-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          position === \"popper\" && \"w-full min-w-(--radix-select-trigger-width)\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return <SelectPrimitive.Label data-slot=\"select-label\" className={cn(\"cue-label px-2 pt-2 pb-1\", className)} {...props} />;\n}\n\nfunction SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute end-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4 text-primary\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return <SelectPrimitive.Separator data-slot=\"select-separator\" className={cn(\"cue-dash-b pointer-events-none -mx-1 my-1 h-px\", className)} {...props} />;\n}\n\nfunction SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton data-slot=\"select-scroll-up-button\" className={cn(\"flex cursor-default items-center justify-center py-1\", className)} {...props}>\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton data-slot=\"select-scroll-down-button\" className={cn(\"flex cursor-default items-center justify-center py-1\", className)} {...props}>\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/select",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}