{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search",
  "title": "Search",
  "description": "Search input with icon, sizes, and optional clear button.",
  "dependencies": ["class-variance-authority", "lucide-react"],
  "registryDependencies": ["https://indiacn.in/r/theme.json"],
  "files": [
    {
      "path": "components/ui/search.tsx",
      "content": "'use client';\n/* eslint-disable eslint-frontend-rules/no-focusable-non-interactive-elements */\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { SearchIcon, X } from 'lucide-react';\nimport { ComponentProps, useCallback, useRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst SEARCH_VARIANTS = cva(\n  'flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-0 transition-[color,background-color,border-color,box-shadow] duration-150 focus-within:border-primary focus-within:shadow-focus-primary',\n  {\n    variants: {\n      size: {\n        sm: 'h-8 px-2.5 text-xs',\n        md: 'h-10 px-3 text-sm',\n        lg: 'h-12 px-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\ninterface ISearchProps\n  extends Omit<ComponentProps<'input'>, 'size'>,\n    VariantProps<typeof SEARCH_VARIANTS> {\n  onClear?: () => void;\n  containerClassName?: string;\n}\n\n/** Search input field with icon and optional clear button. */\nfunction Search({ className, size, onClear, containerClassName, value, ...props }: ISearchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleContainerClick = useCallback(() => inputRef.current?.focus(), []);\n\n  return (\n    <div\n      className={cn(SEARCH_VARIANTS({ size, className: containerClassName }))}\n      onClick={handleContainerClick}\n    >\n      <SearchIcon className='size-4 shrink-0 text-neutral-500' />\n      <input\n        ref={inputRef}\n        type='search'\n        className={cn(\n          'flex-1 bg-transparent outline-none placeholder:text-neutral-500',\n          // Hide the browser's native \"x\" clear control on type=search inputs.\n          // We render our own button so we don't want two of them.\n          '[&::-ms-clear]:hidden [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',\n          className,\n        )}\n        value={value}\n        {...props}\n      />\n      {value && onClear && (\n        <button\n          type='button'\n          onClick={onClear}\n          className='shrink-0 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none'\n          aria-label='Clear search'\n        >\n          <X className='size-3.5' />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { Search, SEARCH_VARIANTS };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}