{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "type": "registry:block",
  "title": "Search field",
  "description": "A controlled search input with an accessible clear action.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1",
    "cn@^0.2.6",
    "lucide-react@^1.42.0"
  ],
  "files": [
    {
      "path": "components/ui/button.tsx",
      "type": "registry:ui",
      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-[var(--control-height,2rem)] gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
    },
    {
      "path": "components/ui/input-group.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"cn\";\nimport type * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (<div data-slot=\"input-group\" role=\"group\" className={cn(\"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\", className)} {...props}/>);\n}\nconst inputGroupAddonVariants = cva(\"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\", {\n    variants: {\n        align: {\n            \"inline-start\": \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n            \"inline-end\": \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n            \"block-start\": \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n            \"block-end\": \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n        },\n    },\n    defaultVariants: {\n        align: \"inline-start\",\n    },\n});\nfunction InputGroupAddon({ className, align = \"inline-start\", ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n    return (<div role=\"group\" data-slot=\"input-group-addon\" data-align={align} className={cn(inputGroupAddonVariants({ align }), className)} onClick={(e) => {\n            if ((e.target as HTMLElement).closest(\"button\")) {\n                return;\n            }\n            e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n        }} {...props}/>);\n}\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n    variants: {\n        size: {\n            xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n            sm: \"\",\n            \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n            \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n        },\n    },\n    defaultVariants: {\n        size: \"xs\",\n    },\n});\nfunction InputGroupButton({ className, type = \"button\", variant = \"ghost\", size = \"xs\", ...props }: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> & VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\";\n}) {\n    return (<Button type={type} data-size={size} variant={variant} className={cn(inputGroupButtonVariants({ size }), className)} {...props}/>);\n}\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n    return (<span className={cn(\"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\", className)} {...props}/>);\n}\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<\"input\">) {\n    return (<Input data-slot=\"input-group-control\" className={cn(\"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\", className)} {...props}/>);\n}\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n    return (<Textarea data-slot=\"input-group-control\" className={cn(\"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\", className)} {...props}/>);\n}\nexport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };\n"
    },
    {
      "path": "components/ui/input.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\nimport { cn } from \"cn\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
    },
    {
      "path": "components/ui/search-field.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Search, X } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nexport function SearchField({\n  value,\n  onValueChange,\n  placeholder = \"Search projects…\",\n}: {\n  value: string;\n  onValueChange: (value: string) => void;\n  placeholder?: string;\n}) {\n  return (\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput\n        aria-label=\"Search\"\n        value={value}\n        onChange={(e) => onValueChange(e.target.value)}\n        placeholder={placeholder}\n      />\n      {value && (\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            aria-label=\"Clear search\"\n            onClick={() => onValueChange(\"\")}\n          >\n            <X />\n          </InputGroupButton>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n"
    },
    {
      "path": "components/ui/textarea.tsx",
      "type": "registry:ui",
      "content": "import { cn } from \"cn\";\nimport type * as React from \"react\";\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n    return (<textarea data-slot=\"textarea\" className={cn(\"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\", className)} {...props}/>);\n}\nexport { Textarea };\n"
    }
  ],
  "cssVars": {
    "light": {
      "background": "#ffffff",
      "foreground": "#141414",
      "card": "#ffffff",
      "card-foreground": "#141414",
      "popover": "#ffffff",
      "popover-foreground": "#141414",
      "secondary": "#f5f5f5",
      "secondary-foreground": "#141414",
      "muted": "#f5f5f5",
      "muted-foreground": "#6b6b6b",
      "accent": "#f0f0f0",
      "accent-foreground": "#141414",
      "border": "#e6e6e6",
      "input": "#cccccc",
      "destructive": "#b91c1c",
      "syntax-text": "#242424",
      "syntax-keyword": "#754399",
      "syntax-string": "#326348",
      "syntax-function": "#315d89",
      "syntax-number": "#86551f",
      "syntax-comment": "#6b6b6b",
      "syntax-punctuation": "#616161",
      "syntax-type": "#7c464c",
      "syntax-background": "#f8f8f8",
      "sidebar": "#f5f5f5",
      "sidebar-foreground": "#141414",
      "sidebar-primary": "#141414",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#f0f0f0",
      "sidebar-accent-foreground": "#141414",
      "sidebar-border": "#e6e6e6",
      "sidebar-ring": "#141414",
      "chart-1": "#141414",
      "chart-2": "#525252",
      "chart-3": "#737373",
      "chart-4": "#a3a3a3",
      "chart-5": "#d4d4d4",
      "primary": "#141414",
      "primary-foreground": "#ffffff",
      "ring": "#141414",
      "radius": "0rem",
      "font-sans": "ui-sans-serif, system-ui, sans-serif",
      "control-height": "2rem"
    },
    "dark": {
      "background": "#141414",
      "foreground": "#fafafa",
      "card": "#1c1c1c",
      "card-foreground": "#fafafa",
      "popover": "#1c1c1c",
      "popover-foreground": "#fafafa",
      "secondary": "#262626",
      "secondary-foreground": "#fafafa",
      "muted": "#262626",
      "muted-foreground": "#a3a3a3",
      "accent": "#303030",
      "accent-foreground": "#fafafa",
      "border": "#404040",
      "input": "#404040",
      "destructive": "#ff9d9d",
      "syntax-text": "#ededed",
      "syntax-keyword": "#c6a3df",
      "syntax-string": "#98c4a4",
      "syntax-function": "#9cbedf",
      "syntax-number": "#d7b27d",
      "syntax-comment": "#a3a3a3",
      "syntax-punctuation": "#b0b0b0",
      "syntax-type": "#dda2aa",
      "syntax-background": "#1b1b1b",
      "sidebar": "#262626",
      "sidebar-foreground": "#fafafa",
      "sidebar-primary": "#fafafa",
      "sidebar-primary-foreground": "#141414",
      "sidebar-accent": "#303030",
      "sidebar-accent-foreground": "#fafafa",
      "sidebar-border": "#404040",
      "sidebar-ring": "#fafafa",
      "chart-1": "#fafafa",
      "chart-2": "#d4d4d4",
      "chart-3": "#a3a3a3",
      "chart-4": "#737373",
      "chart-5": "#525252",
      "primary": "#fafafa",
      "primary-foreground": "#141414",
      "ring": "#fafafa",
      "radius": "0rem",
      "font-sans": "ui-sans-serif, system-ui, sans-serif",
      "control-height": "2rem"
    }
  }
}