{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "title": "Search Field",
  "description": "A capsule of glass with a magnifying glass and a clear button.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "motion@^13.4.4"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json"
  ],
  "files": [
    {
      "path": "src/search-field.tsx",
      "content": "\"use client\";\n\nimport { Input } from \"@base-ui/react/input\";\nimport { animate, useMotionValue, useReducedMotion } from \"motion/react\";\nimport { type CSSProperties, useRef, useState } from \"react\";\nimport { CLOSE, GlassPane, type GlassRefraction, OPEN } from \"./glass\";\nimport { cx, type GlassOptions } from \"./types\";\nimport \"./liquikit.css\";\n\nconst FOCUSED = 0.35;\n\nexport type SearchFieldProps = Omit<\n\tInput.Props,\n\t\"className\" | \"style\" | \"type\" | \"render\"\n> &\n\tGlassOptions & {\n\t\trefraction?: GlassRefraction;\n\t\tclassName?: string;\n\t\tstyle?: CSSProperties;\n\t};\n\nfunction setValueAsTyped(input: HTMLInputElement, value: string) {\n\tconst setter = Object.getOwnPropertyDescriptor(\n\t\tHTMLInputElement.prototype,\n\t\t\"value\",\n\t)?.set;\n\tsetter?.call(input, value);\n\tinput.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}\n\nexport function SearchField({\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tplaceholder = \"Search\",\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tclassName,\n\tstyle,\n\tonFocus,\n\tonBlur,\n\t...inputProps\n}: SearchFieldProps) {\n\tconst reduceMotion = useReducedMotion() ?? false;\n\tconst press = useMotionValue(0);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst [typed, setTyped] = useState(String(defaultValue ?? \"\"));\n\tconst text = value === undefined ? typed : String(value);\n\n\tconst lift = (to: number) => {\n\t\tif (reduceMotion) press.set(to);\n\t\telse animate(press, to, to > press.get() ? OPEN : CLOSE);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"glass-ui-search\", className)}\n\t\t\tstyle={style}\n\t\t\tdata-filled={text ? \"\" : undefined}\n\t\t>\n\t\t\t<GlassPane\n\t\t\t\tradius=\"capsule\"\n\t\t\t\tstyle={{ display: \"block\" }}\n\t\t\t\tpress={press}\n\t\t\t\ttheme={theme}\n\t\t\t\tlens={lens}\n\t\t\t\tliquid={liquid}\n\t\t\t\trefraction={refraction}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"glass-ui-search__row\"\n\t\t\t\t\tonPointerDown={(event) => {\n\t\t\t\t\t\tif (event.target !== inputRef.current) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tinputRef.current?.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclassName=\"glass-ui-search__icon\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<circle cx=\"11\" cy=\"11\" r=\"6.5\" />\n\t\t\t\t\t\t<path d=\"m16 16 4.5 4.5\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<Input\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tclassName=\"glass-ui-search__input\"\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tvalue={text}\n\t\t\t\t\t\tonValueChange={(next, eventDetails) => {\n\t\t\t\t\t\t\tif (value === undefined) setTyped(next);\n\t\t\t\t\t\t\tonValueChange?.(next, eventDetails);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\tonFocus?.(event);\n\t\t\t\t\t\t\tlift(FOCUSED);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\tonBlur?.(event);\n\t\t\t\t\t\t\tlift(0);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"glass-ui-search__clear\"\n\t\t\t\t\t\taria-label=\"Clear\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tconst input = inputRef.current;\n\t\t\t\t\t\t\tif (!input) return;\n\t\t\t\t\t\t\tsetValueAsTyped(input, \"\");\n\t\t\t\t\t\t\tinput.focus();\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"m5.5 5.5 5 5m0-5-5 5\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</GlassPane>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/search-field.tsx"
    }
  ],
  "type": "registry:ui"
}