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

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:ui",
  "dependencies": ["@base-ui-components/react"],
  "registryDependencies": ["@coss/input", "@coss/scroll-area"],
  "files": [
    {
      "path": "registry/default/ui/autocomplete.tsx",
      "content": "\"use client\"\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui-components/react/autocomplete\"\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nconst Autocomplete = AutocompletePrimitive.Root\n\nfunction AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  size,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n  size?: \"sm\" | \"default\" | \"lg\" | number\n}) {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number\n\n  return (\n    <div className=\"relative w-full\">\n      <AutocompletePrimitive.Input\n        data-slot=\"autocomplete-input\"\n        className={cn(\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className\n        )}\n        render={<Input size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-7 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 transition-colors outline-none hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\"\n          )}\n        >\n          <ChevronsUpDownIcon />\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-7 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 transition-colors outline-none hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\"\n          )}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </div>\n  )\n}\n\nfunction AutocompletePopup({\n  className,\n  children,\n  sideOffset = 4,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  sideOffset?: number\n}) {\n  return (\n    <AutocompletePrimitive.Portal>\n      <AutocompletePrimitive.Positioner\n        data-slot=\"autocomplete-positioner\"\n        className=\"z-50 select-none\"\n        sideOffset={sideOffset}\n      >\n        <span className=\"relative flex max-h-full origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-lg has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:not-in-data-[slot=group]:bg-clip-border\">\n          <AutocompletePrimitive.Popup\n            data-slot=\"autocomplete-popup\"\n            className={cn(\n              \"flex max-h-[min(var(--available-height),23rem)] w-(--anchor-width) max-w-(--available-width) flex-col\",\n              className\n            )}\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  )\n}\n\nfunction AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"autocomplete-item\"\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1 text-base outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  )\n}\n\nfunction AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props) {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props) {\n  return (\n    <AutocompletePrimitive.Group\n      data-slot=\"autocomplete-group\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props) {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"text-center text-sm text-muted-foreground not-empty:p-2\",\n        className\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props) {\n  return (\n    <AutocompletePrimitive.Row\n      data-slot=\"autocomplete-row\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  )\n}\n\nfunction AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props) {\n  return (\n    <ScrollArea className=\"flex-1\">\n      <AutocompletePrimitive.List\n        data-slot=\"autocomplete-list\"\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  )\n}\n\nfunction AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props) {\n  return (\n    <AutocompletePrimitive.Clear\n      data-slot=\"autocomplete-clear\"\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-7 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 transition-[color,background-color,box-shadow,opacity] outline-none hover:opacity-100 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  )\n}\n\nfunction AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props) {\n  return (\n    <AutocompletePrimitive.Status\n      data-slot=\"autocomplete-status\"\n      className={cn(\n        \"px-3 py-2 text-xs font-medium text-muted-foreground empty:m-0 empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props) {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteTrigger({\n  className,\n  ...props\n}: AutocompletePrimitive.Trigger.Props) {\n  return (\n    <AutocompletePrimitive.Trigger\n      data-slot=\"autocomplete-trigger\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteTrigger,\n  AutocompletePopup,\n  AutocompleteItem,\n  AutocompleteSeparator,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteEmpty,\n  AutocompleteValue,\n  AutocompleteList,\n  AutocompleteClear,\n  AutocompleteStatus,\n  AutocompleteRow,\n  AutocompleteCollection,\n}\n",
      "type": "registry:ui"
    }
  ]
}