{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "author": "AniBT <https://anibt.net>",
  "description": "AniBT select: a field-material trigger and a floating A panel whose chosen row carries the pink label and tick.",
  "dependencies": [
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "@anibt/theme"
  ],
  "files": [
    {
      "path": "registry/anibt/ui/select.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronDownIcon, ChevronsUpDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Select — the AniBT 「贴纸手账」 picker for a short list (Radix Select).\n *\n * The trigger is the same field as `Input`: 32 high (28 for `size=\"sm\"`) on\n * radius 10, paper under the 1px `--input` ring, pink on hover, the 1.5px\n * `--ring` edge with the halo on focus and while open, red when\n * `aria-invalid`, the sunk well when disabled. The placeholder is muted.\n *\n * The list floats on the `anibt-pop` panel. A row is 32 high on radius 10;\n * the highlighted row is the pink wash under pink ink, and the chosen row is\n * the heavier pink label plus a pink tick at its end — one surface for\n * \"here\", one mark for \"chosen\". Groups take a 12px muted head, and a\n * stitched rule parts them.\n */\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\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"bg-card text-foreground inset-ring-1 inset-ring-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:inset-ring-anibt-wash-line focus-visible:inset-ring-[1.5px] focus-visible:inset-ring-ring focus-visible:ring-4 focus-visible:ring-ring/20 data-[state=open]:inset-ring-[1.5px] data-[state=open]:inset-ring-ring aria-invalid:inset-ring-[1.5px] aria-invalid:inset-ring-anibt-danger-fill aria-invalid:ring-4 aria-invalid:ring-anibt-danger-fill/15 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:inset-ring-border\",\n        \"flex w-fit min-w-0 items-center justify-between gap-2 rounded-[10px] border-0 px-3 py-0 text-[13px] whitespace-nowrap transition-[color,background-color,box-shadow] duration-150 outline-none select-none data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:px-2.5 data-[size=sm]:text-[12px]\",\n        \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *: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        className\n      )}\n      {...props}\n    >\n      {children}\n      {/* No JSX `asChild` in a registry file: shadcn's base-* styles rewrite\n          it to `render` on install. */}\n      <SelectPrimitive.Icon className=\"flex shrink-0 text-muted-foreground\">\n        <ChevronsUpDownIcon className=\"size-4\" aria-hidden=\"true\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position,\n  alignItemWithTrigger = false,\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content> & {\n  /**\n   * Base UI's name for Radix's `position=\"item-aligned\"`: open with the\n   * chosen row over the trigger. A uses the popper (`false`, the default).\n   */\n  alignItemWithTrigger?: boolean\n}) {\n  const placement = position ?? (alignItemWithTrigger ? \"item-aligned\" : \"popper\")\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"anibt-pop 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\",\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 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1\",\n          className\n        )}\n        position={placement}\n        {...(placement === \"popper\" ? { align, side, sideOffset } : {})}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\"p-1\", placement === \"popper\" && \"w-full min-w-(--radix-select-trigger-width) scroll-my-1\")}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 pt-2 pb-1 text-[12px] font-semibold text-muted-foreground\", className)}\n      {...props}\n    />\n  )\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 h-8 w-full cursor-default items-center gap-2 rounded-[10px] py-0 pr-8 pl-2 text-[13px] text-foreground outline-hidden select-none\",\n        \"focus:bg-accent focus:text-accent-foreground data-[state=checked]:font-semibold data-[state=checked]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-anibt-mark\",\n        className\n      )}\n      {...props}\n    >\n      <span data-slot=\"select-item-indicator\" className=\"absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4 text-anibt-mark\" strokeWidth={2.5} aria-hidden=\"true\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>\n        <span className=\"flex min-w-0 items-center gap-2\">{children}</span>\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n/** A stitched rule between groups. */\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"anibt-stitch pointer-events-none mx-2 my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"flex cursor-default items-center justify-center py-1 text-muted-foreground\", className)}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" aria-hidden=\"true\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"flex cursor-default items-center justify-center py-1 text-muted-foreground\", className)}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" aria-hidden=\"true\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}