{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:item",
  "title": "Autocomplete",
  "description": "An input that suggests options as you type.",
  "registryDependencies": [
    "https://roiui.com/r/input.json"
  ],
  "files": [
    {
      "path": "registry/brook/ui/autocomplete/autocomplete.tsx",
      "content": "\"use client\";\n\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Search, X } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"@/registry/brook/ui/input/input\";\nimport styles from \"./autocomplete.module.css\";\n\nfunction AutocompleteRoot({ ...props }: React.ComponentProps<typeof Autocomplete.Root>) {\n  return <Autocomplete.Root {...props} />;\n}\n\nfunction AutocompleteValue({ ...props }: React.ComponentProps<typeof Autocomplete.Value>) {\n  return <Autocomplete.Value data-slot=\"autocomplete-value\" {...props} />;\n}\n\nfunction AutocompleteInput({ className, ...props }: React.ComponentProps<typeof Autocomplete.Input>) {\n  return <Autocomplete.Input className={cn(styles.inputOverride, className)} render={<Input />} {...props} />;\n}\n\nfunction AutocompleteTrigger({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Trigger>) {\n  return (\n    <Autocomplete.Trigger className={cn(styles.trigger, className)} data-slot=\"autocomplete-trigger\" {...props}>\n      {children || <Search className={styles.icon} size={16} />}\n    </Autocomplete.Trigger>\n  );\n}\n\nfunction AutocompleteIcon({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Icon>) {\n  return (\n    <Autocomplete.Icon className={cn(styles.icon, className)} data-slot=\"autocomplete-icon\" {...props}>\n      {children || <Search size={16} />}\n    </Autocomplete.Icon>\n  );\n}\n\nfunction AutocompleteClear({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Clear>) {\n  return (\n    <Autocomplete.Clear className={cn(styles.clear, className)} data-slot=\"autocomplete-clear\" {...props}>\n      {children || <X size={16} />}\n    </Autocomplete.Clear>\n  );\n}\n\nconst AutocompletePortal = Autocomplete.Portal;\n\nfunction AutocompleteBackdrop({ className, ...props }: React.ComponentProps<typeof Autocomplete.Backdrop>) {\n  return (\n    <Autocomplete.Backdrop className={cn(styles.backdrop, className)} data-slot=\"autocomplete-backdrop\" {...props} />\n  );\n}\n\nfunction AutocompletePositioner({ className, ...props }: React.ComponentProps<typeof Autocomplete.Positioner>) {\n  return (\n    <Autocomplete.Positioner\n      className={cn(styles.positioner, className)}\n      data-slot=\"autocomplete-positioner\"\n      sideOffset={4}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompletePopup({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Popup>) {\n  return (\n    <Autocomplete.Popup className={cn(styles.popup, className)} data-slot=\"autocomplete-popup\" {...props}>\n      <AutocompleteSpacer />\n      {children}\n      <AutocompleteSpacer />\n    </Autocomplete.Popup>\n  );\n}\n\nfunction AutocompleteSpacer() {\n  return <div style={{ height: \"4px\", width: \"100%\", flexShrink: 0 }} />;\n}\n\nfunction AutocompleteArrow({ className, ...props }: React.ComponentProps<typeof Autocomplete.Arrow>) {\n  return <Autocomplete.Arrow className={cn(styles.arrow, className)} data-slot=\"autocomplete-arrow\" {...props} />;\n}\n\nfunction AutocompleteStatus({ className, ...props }: React.ComponentProps<typeof Autocomplete.Status>) {\n  return <Autocomplete.Status className={cn(styles.status, className)} data-slot=\"autocomplete-status\" {...props} />;\n}\n\nfunction AutocompleteList({ className, ...props }: React.ComponentProps<typeof Autocomplete.List>) {\n  return <Autocomplete.List className={cn(styles.list, className)} data-slot=\"autocomplete-list\" {...props} />;\n}\n\nfunction AutocompleteEmpty({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Empty>) {\n  return (\n    <Autocomplete.Empty className={cn(styles.empty, className)} data-slot=\"autocomplete-empty\" {...props}>\n      {children || \"No items found\"}\n    </Autocomplete.Empty>\n  );\n}\n\nfunction AutocompleteCollection({ ...props }: React.ComponentProps<typeof Autocomplete.Collection>) {\n  return <Autocomplete.Collection data-slot=\"autocomplete-collection\" {...props} />;\n}\n\nfunction AutocompleteRow({ className, ...props }: React.ComponentProps<typeof Autocomplete.Row>) {\n  return <Autocomplete.Row className={cn(styles.row, className)} data-slot=\"autocomplete-row\" {...props} />;\n}\n\nfunction AutocompleteItem({ className, ...props }: React.ComponentProps<typeof Autocomplete.Item>) {\n  return <Autocomplete.Item className={cn(styles.item, className)} data-slot=\"autocomplete-item\" {...props} />;\n}\n\nfunction AutocompleteGroup({ className, ...props }: React.ComponentProps<typeof Autocomplete.Group>) {\n  return <Autocomplete.Group className={cn(styles.group, className)} data-slot=\"autocomplete-group\" {...props} />;\n}\n\nfunction AutocompleteGroupLabel({ className, ...props }: React.ComponentProps<typeof Autocomplete.GroupLabel>) {\n  return (\n    <Autocomplete.GroupLabel\n      className={cn(styles.groupLabel, className)}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteSeparator({ className, ...props }: React.ComponentProps<typeof Autocomplete.Separator>) {\n  return (\n    <Autocomplete.Separator className={cn(styles.separator, className)} data-slot=\"autocomplete-separator\" {...props} />\n  );\n}\n\nexport {\n  AutocompleteRoot as Autocomplete,\n  AutocompleteArrow,\n  AutocompleteBackdrop,\n  AutocompleteClear,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteIcon,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompletePortal,\n  AutocompletePositioner,\n  AutocompleteRow,\n  AutocompleteSeparator,\n  AutocompleteSpacer,\n  AutocompleteStatus,\n  AutocompleteTrigger,\n  AutocompleteValue,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/autocomplete/autocomplete.tsx"
    },
    {
      "path": "registry/brook/ui/autocomplete/autocomplete.module.css",
      "content": ".input {\n  display: flex;\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background-color: var(--mix-card-50-bg);\n  padding: 0 0.75rem;\n  font-size: 0.875rem;\n  transition: all 150ms ease-out;\n  color: var(--foreground);\n\n  &::placeholder {\n    color: var(--muted-foreground);\n    font-size: 0.875rem;\n  }\n\n  &[data-focused] {\n    outline: none;\n    border-color: var(--ring);\n    box-shadow: 0 0 0 2px var(--ring) / 0.2;\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  &[data-invalid] {\n    border-color: var(--destructive);\n\n    &:focus,\n    &[data-focused] {\n      border-color: var(--destructive);\n      box-shadow: 0 0 0 2px var(--destructive) / 0.2;\n    }\n  }\n\n  &[data-valid] {\n    border-color: var(--success, var(--primary));\n  }\n\n  @media (max-width: 640px) {\n    height: 2.75rem;\n    font-size: 0.9375rem;\n    padding: 0 1rem;\n\n    &::placeholder {\n      font-size: 0.9375rem;\n    }\n  }\n}\n\n.inputOverride {\n  @media (max-width: 640px) {\n    font-size: 0.9375rem;\n\n    &::placeholder {\n      font-size: 0.9375rem;\n    }\n  }\n}\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--muted-foreground);\n  transition: color 150ms ease;\n\n  &:hover {\n    color: var(--foreground);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  &[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n.icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n.clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.25rem;\n  border-radius: calc(var(--radius) - 2px);\n  cursor: pointer;\n  color: var(--muted-foreground);\n  transition: all 150ms ease;\n\n  &:hover {\n    color: var(--foreground);\n    background: var(--accent);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  &[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 140;\n  background-color: var(--dialog-overlay);\n  opacity: 0;\n  transition: opacity 150ms ease;\n\n  &[data-open] {\n    opacity: 1;\n  }\n}\n\n.positioner {\n  position: absolute;\n  z-index: 150;\n  width: var(--anchor-width);\n  outline: none;\n}\n\n.popup {\n  box-sizing: border-box;\n  border-radius: var(--radius);\n  background-color: var(--popover);\n  color: var(--popover-foreground);\n  width: var(--anchor-width);\n  max-height: min(var(--available-height), 23rem);\n  max-width: var(--available-width);\n  overflow-y: auto;\n  scroll-padding-block: 0.5rem;\n  overscroll-behavior: contain;\n  border: none;\n  box-shadow:\n    0 0 0 0.5px oklch(from var(--border) l c h / 0.8),\n    var(--shadow-border-stack);\n  display: flex;\n  flex-direction: column;\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 250ms var(--ease-out-expo),\n    opacity 250ms var(--ease-out-expo);\n\n  &[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  &[data-ending-style] {\n    transition: none;\n  }\n\n  @media (max-width: 640px) {\n    max-width: calc(100vw - 2rem);\n  }\n}\n\n@keyframes slideDownAndFade {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem) scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.arrow {\n  position: absolute;\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--mix-card-33-bg);\n  border: 1px solid var(--border);\n  transform: rotate(45deg);\n\n  &[data-side=\"top\"] {\n    bottom: -0.25rem;\n    border-right: none;\n    border-bottom: none;\n  }\n\n  &[data-side=\"right\"] {\n    left: -0.25rem;\n    border-bottom: none;\n    border-left: none;\n  }\n\n  &[data-side=\"bottom\"] {\n    top: -0.25rem;\n    border-top: none;\n    border-left: none;\n  }\n\n  &[data-side=\"left\"] {\n    right: -0.25rem;\n    border-top: none;\n    border-right: none;\n  }\n}\n\n.status {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: var(--muted-foreground);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  outline: none;\n}\n\n.empty {\n  box-sizing: border-box;\n  padding: 1rem;\n  font-size: 0.925rem;\n  color: var(--muted-foreground);\n  text-align: center;\n\n  &:empty {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media (max-width: 640px) {\n    padding: 1.25rem;\n    font-size: 0.9375rem;\n  }\n}\n\n.row {\n  display: flex;\n  align-items: center;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding-inline: 12px 6px;\n  font-weight: 400;\n  height: 32px;\n  font-size: 0.875rem;\n  line-height: 1.2;\n  color: var(--foreground);\n  cursor: pointer;\n  justify-content: flex-start;\n  margin: 0rem;\n  position: relative;\n  isolation: isolate;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 4px;\n    border-radius: calc(var(--radius) - 3px);\n    background-color: transparent;\n    z-index: -1;\n  }\n\n  &[data-highlighted]::before,\n  &:hover::before,\n  &:focus::before {\n    background-color: var(--accent);\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  @media (max-width: 640px) {\n    padding: 0.625rem 0.75rem;\n    font-size: 0.9375rem;\n    gap: 0.75rem;\n    min-height: 2.75rem;\n  }\n}\n\n.group {\n  padding: 0.25rem 0;\n}\n\n.groupLabel {\n  padding: 0.5rem 0.75rem 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.025em;\n}\n\n.separator {\n  height: 1px;\n  border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.8);\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/autocomplete/autocomplete.module.css"
    }
  ]
}