cosscom__coss/apps/ui/public/r/select.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "dependencies": ["@base-ui-components/react"],
  "files": [
    {
      "path": "registry/default/ui/select.tsx",
      "content": "\"use client\"\n\nimport { Select as SelectPrimitive } from \"@base-ui-components/react/select\"\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\" | \"lg\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        \"relative inline-flex w-full min-w-36 items-center justify-between gap-2 rounded-lg border border-input bg-background bg-clip-padding px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-base/5 shadow-xs ring-ring/24 transition-shadow outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:border-ring focus-visible:ring-[3px] in-data-[slot=field]:not-data-filled:text-muted-foreground aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] dark:aria-invalid:ring-destructive/24 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:opacity-72 [&_svg:not([class*='size-'])]:size-4 [&:is([data-disabled],:focus-visible,[aria-invalid],[data-pressed])]:shadow-none\",\n        size === \"sm\" &&\n          \"gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]\",\n        size === \"lg\" && \"py-[calc(--spacing(2)-1px)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className=\"-me-1 size-4 opacity-72\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex-1 truncate\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  sideOffset = 4,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"]\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"]\n}) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        data-slot=\"select-positioner\"\n        className=\"z-50 select-none\"\n        sideOffset={sideOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-popup\"\n          className=\"origin-(--transform-origin) transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-gradient-to-b before:from-popover before:from-50%\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <span className=\"relative block h-full rounded-lg border bg-popover bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-lg dark:not-in-data-[slot=group]:bg-clip-border\">\n            <SelectPrimitive.List\n              data-slot=\"select-list\"\n              className={cn(\n                \"max-h-(--available-height) min-w-(--anchor-width) overflow-y-auto p-1\",\n                className\n              )}\n            >\n              {children}\n            </SelectPrimitive.List>\n          </span>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-gradient-to-t before:from-popover before:from-50%\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          xmlns=\"http://www.w3.org/1500/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  )\n}\n\nfunction SelectGroup(props: SelectPrimitive.Group.Props) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectPopup,\n  SelectPopup as SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectGroup,\n  SelectGroupLabel,\n}\n",
      "type": "registry:ui"
    }
  ]
}