{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "dependencies": [
    "lodash",
    "lucide-react",
    "react-aria-components",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/field.json",
    "https://taki-ui.com/r/input.json",
    "https://taki-ui.com/r/input-group.json",
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/search-field.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { isEmpty } from \"lodash\"\nimport { X } from \"lucide-react\"\nimport {\n  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  Button,\n  composeRenderProps,\n  ValidationResult,\n} from \"react-aria-components\"\nimport { tv, VariantProps } from \"tailwind-variants\"\n\nimport { cn } from \"../lib/utils\"\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  fieldVariants,\n} from \"./field\"\nimport { Input } from \"./input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\"\n\nexport interface SearchFieldProps\n  extends AriaSearchFieldProps,\n    VariantProps<typeof fieldVariants> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  placeholder?: string\n}\n\nexport const inputStyles = tv({\n  base: [\n    \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none\",\n  ],\n  variants: {\n    isEmpty: {\n      true: \"[&+div_button]:invisible \",\n    },\n  },\n})\n\nexport function SearchField({\n  label,\n  description,\n  errorMessage,\n  placeholder = \"Search...\",\n  className,\n  orientation = \"vertical\",\n  ...props\n}: SearchFieldProps) {\n  return (\n    <AriaSearchField\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        cn(fieldVariants({ orientation }), className)\n      )}\n    >\n      {(renderProps) => (\n        <>\n          {label && <FieldLabel>{label}</FieldLabel>}\n          <InputGroup>\n            <InputGroupInput\n              placeholder={placeholder}\n              className={inputStyles(renderProps)}\n              {...renderProps}\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <X />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n\n          {description && <FieldDescription>{description}</FieldDescription>}\n          <FieldError>{errorMessage}</FieldError>\n        </>\n      )}\n    </AriaSearchField>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}