{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select",
  "description": "A dropdown for picking one option from a list, with keyboard type-ahead and a check on the chosen item.",
  "dependencies": [
    "@radix-ui/react-select@^2.4.1",
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/field.json",
    "https://junco.madebytobi.com/r/icons.json",
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/select.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"@/lib/junco/icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { useFieldControl } from \"@/components/ui/field\";\n\n/**\n * A dropdown for picking one option from a list, with keyboard type-ahead and a check on the chosen item.\n *\n *   <Select defaultValue=\"weekly\">\n *     <SelectTrigger aria-label=\"Frequency\"><SelectValue placeholder=\"Pick one\" /></SelectTrigger>\n *     <SelectContent>\n *       <SelectItem value=\"daily\">Daily</SelectItem>\n *       <SelectItem value=\"weekly\">Weekly</SelectItem>\n *     </SelectContent>\n *   </Select>\n */\nexport const Select = SelectPrimitive.Root;\nexport const SelectValue = SelectPrimitive.Value;\nexport const SelectGroup = SelectPrimitive.Group;\n\nexport const selectTriggerVariants = tv({\n  base: [\n    \"flex w-full items-center justify-between gap-2 border border-input bg-surface text-left text-foreground\",\n    \"transition-[border-color,box-shadow] duration-fast ease-standard\",\n    \"focus-visible:border-transparent focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"aria-invalid:border-destructive\",\n    \"data-[placeholder]:text-muted-foreground [&>span]:truncate\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-8 rounded-control px-2.5 text-[13px]\",\n      md: \"h-9 rounded-card px-3 text-sm\",\n      lg: \"h-11 rounded-card px-3.5 text-base\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface SelectTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n    VariantProps<typeof selectTriggerVariants> {\n  isInvalid?: boolean;\n}\n\nexport const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n  ({ className, size, isInvalid, children, ...rest }, ref) => {\n    const props = useFieldControl({ ...rest, \"aria-invalid\": isInvalid || rest[\"aria-invalid\"] || undefined });\n    return (\n      <SelectPrimitive.Trigger ref={ref} className={cn(selectTriggerVariants({ size }), className)} {...props}>\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <ChevronDownIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nexport const SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", sideOffset = 4, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      className={cn(\n        \"relative z-dropdown max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden\",\n        \"rounded-card border border-border bg-popover text-popover-foreground shadow-float\",\n        \"origin-(--radix-select-content-transform-origin) data-[state=open]:animate-pop-in data-[state=closed]:animate-pop-out\",\n        position === \"popper\" && \"w-(--radix-select-trigger-width)\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ScrollUpButton className=\"flex h-6 items-center justify-center text-muted-foreground\">\n        <ChevronUpIcon className=\"size-4\" />\n      </SelectPrimitive.ScrollUpButton>\n      <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n      <SelectPrimitive.ScrollDownButton className=\"flex h-6 items-center justify-center text-muted-foreground\">\n        <ChevronDownIcon className=\"size-4\" />\n      </SelectPrimitive.ScrollDownButton>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = \"SelectContent\";\n\nexport const SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex h-8 cursor-default items-center rounded-control pr-8 pl-2 text-sm outline-none select-none\",\n      \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"absolute right-2 grid place-items-center\">\n      <CheckIcon className=\"size-4\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\nexport const SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label ref={ref} className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)} {...props} />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\nexport const SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator ref={ref} className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props} />\n));\nSelectSeparator.displayName = \"SelectSeparator\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/select",
  "meta": {
    "hash": "531f02bc5bfbb0a8",
    "source": "packages/react/src/components/select.tsx",
    "exports": [
      "Select",
      "SelectValue",
      "SelectGroup",
      "selectTriggerVariants",
      "SelectTriggerProps",
      "SelectTrigger",
      "SelectContent",
      "SelectItem",
      "SelectLabel",
      "SelectSeparator"
    ],
    "props": {
      "SelectTrigger": {
        "extends": "React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants>",
        "props": [
          {
            "name": "isInvalid",
            "optional": true,
            "type": "boolean"
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "size": [
          "sm",
          "md",
          "lg"
        ]
      },
      "defaultVariants": {
        "size": "md"
      }
    },
    "usage": "<Select defaultValue=\"weekly\">\n  <SelectTrigger aria-label=\"Frequency\"><SelectValue placeholder=\"Pick one\" /></SelectTrigger>\n  <SelectContent>\n    <SelectItem value=\"daily\">Daily</SelectItem>\n    <SelectItem value=\"weekly\">Weekly</SelectItem>\n  </SelectContent>\n</Select>",
    "docsUrl": "https://junco.madebytobi.com/docs/components/select"
  }
}