{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "title": "Search Field",
  "description": "A capsule search field with a magnifying glass, in content, Liquid Glass toolbar and sidebar styles, and a filter field.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/search-field.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ListFilterIcon, SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// A macOS search field: a capsule with a magnifying glass.\n// `default` sits in content, `glass` matches toolbar capsules and `filled`\n// is the sidebar search field of System Settings. FilterField has the same\n// styles with a filter symbol, for narrowing a list in place.\nconst searchFieldVariants = cva(\n  \"group/search-field relative flex min-w-0 shrink-0 items-center gap-0.5 rounded-full text-mac-body text-mac-label has-[input:focus-visible]:mac-focus-ring has-[input:disabled]:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-mac-field shadow-[0_0_0_1px_var(--mac-field-border)]\",\n        glass: \"mac-glass\",\n        filled:\n          \"bg-mac-fill-primary shadow-[0_0_0_1px_rgb(0_0_0/0.04)] dark:bg-white/13 dark:shadow-[0_0_0_1px_rgb(0_0_0/0.5)]\",\n      },\n      size: {\n        sm: \"h-5 pl-1.5 text-mac-subheadline [&_[data-slot=search-field-icon]]:size-3\",\n        default: \"h-6 pl-2 [&_[data-slot=search-field-icon]]:size-3.5\",\n        lg: \"h-7 pl-[9px] [&_[data-slot=search-field-icon]]:size-[15px]\",\n        xl: \"h-9 pl-3 [&_[data-slot=search-field-icon]]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\ntype SearchFieldProps = Omit<React.ComponentProps<\"input\">, \"size\"> &\n  VariantProps<typeof searchFieldVariants>\n\nfunction Field({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  icon: Icon,\n  ...props\n}: SearchFieldProps & { icon: typeof SearchIcon }) {\n  return (\n    <div\n      data-slot=\"search-field\"\n      data-size={size}\n      className={cn(searchFieldVariants({ variant, size }), className)}\n    >\n      <Icon\n        data-slot=\"search-field-icon\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none shrink-0 text-mac-label-secondary\"\n        strokeWidth={2.25}\n      />\n      <input\n        type=\"search\"\n        data-slot=\"search-field-input\"\n        className=\"h-full w-full min-w-0 bg-transparent pr-2 pl-1 text-[1em] font-medium text-mac-label outline-none placeholder:text-mac-label-secondary dark:placeholder:text-white/50 [&::-webkit-search-cancel-button]:hidden\"\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction SearchField({ placeholder = \"Search\", ...props }: SearchFieldProps) {\n  return <Field icon={SearchIcon} placeholder={placeholder} {...props} />\n}\n\n// Narrows what a list shows as you type, like the field under Xcode's\n// navigator or Mail's mailbox list.\nfunction FilterField({ placeholder = \"Filter\", ...props }: SearchFieldProps) {\n  return <Field icon={ListFilterIcon} placeholder={placeholder} {...props} />\n}\n\nexport { FilterField, SearchField, searchFieldVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}