{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-search-demo",
  "type": "registry:component",
  "registryDependencies": [
    "halo-search",
    "button"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-search-demo.tsx",
      "content": "\"use client\"\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n} from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { HaloSearchInput } from \"@/registry/default/ui/halo-search\"\n\n/** How long the demo keeps `isLoading` true; wire your real request the same way. */\nconst MOCK_LOADING_MS = 4800\n\n/** Optional: tune loading line motion from the parent (defaults are already slower than placeholder). */\nconst LOADING_STAGGER_SEC = 0.044\nconst LOADING_CHAR_DURATION_SEC = 0.42\n\nexport default function HaloSearchDemo() {\n  const [searchValue, setSearchValue] = useState(\"\")\n  const [isLoading, setIsLoading] = useState(false)\n  const [blobTranslucent, setBlobTranslucent] = useState(false)\n  /** Browser timer id (`window.setTimeout`); avoid `NodeJS.Timeout` mismatch in tsc with `@types/node`. */\n  const loadTimerRef = useRef<number | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (loadTimerRef.current) {\n        clearTimeout(loadTimerRef.current)\n      }\n    }\n  }, [])\n\n  const clearLoadingTimer = useCallback(() => {\n    if (loadTimerRef.current) {\n      clearTimeout(loadTimerRef.current)\n      loadTimerRef.current = null\n    }\n  }, [])\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key !== \"Enter\" || isLoading) {\n      return\n    }\n    const q = e.currentTarget.value.trim()\n    if (!q) {\n      return\n    }\n    e.preventDefault()\n    clearLoadingTimer()\n    setIsLoading(true)\n    loadTimerRef.current = window.setTimeout(() => {\n      setIsLoading(false)\n      loadTimerRef.current = null\n    }, MOCK_LOADING_MS) as number\n  }\n\n  const handleClear = useCallback(() => {\n    clearLoadingTimer()\n    setIsLoading(false)\n    setSearchValue(\"\")\n  }, [clearLoadingTimer])\n\n  return (\n    <div className=\"mx-auto flex min-h-[min(70vh,520px)] max-w-2xl flex-col justify-center space-y-10 px-4 py-10 sm:px-6 sm:py-14\">\n      <div className=\"text-center\">\n        <p className=\"mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n          Component demo\n        </p>\n        <h1 className=\"mb-3 text-balance font-semibold text-2xl text-foreground sm:text-3xl\">\n          Animated search\n        </h1>\n        <p className=\"mx-auto max-w-md text-balance text-muted-foreground text-sm leading-relaxed sm:text-base\">\n          Press{\" \"}\n          <kbd className=\"rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px]\">\n            Enter\n          </kbd>{\" \"}\n          to run a mock search — loading state matches how you&apos;d gate a\n          real fetch. Clear resets the request timer too. Toggle frosted fill to\n          see the gradient blobs through the field.\n        </p>\n      </div>\n\n      <div className=\"space-y-4\">\n        <HaloSearchInput\n          aria-label=\"Demo search\"\n          autoComplete=\"off\"\n          blobTranslucent={blobTranslucent}\n          isLoading={isLoading}\n          loadingCharDurationSec={LOADING_CHAR_DURATION_SEC}\n          loadingStaggerSec={LOADING_STAGGER_SEC}\n          loadingText=\"Searching…\"\n          onChange={(e) => setSearchValue(e.target.value)}\n          onClear={handleClear}\n          onKeyDown={handleKeyDown}\n          placeholder=\"Search docs, APIs, or ask a question…\"\n          value={searchValue}\n        />\n\n        <div className=\"flex flex-wrap items-center justify-center gap-2 sm:justify-start\">\n          <Button\n            onClick={() => setBlobTranslucent((v) => !v)}\n            size=\"sm\"\n            type=\"button\"\n            variant={blobTranslucent ? \"default\" : \"outline\"}\n          >\n            {blobTranslucent ? \"Solid fill\" : \"Frosted fill\"}\n          </Button>\n        </div>\n\n        <p className=\"text-center text-muted-foreground text-xs sm:text-left\">\n          Clear the field or use the trailing control to see the deletion\n          animation. Prefer reduced motion? Effects shorten or disable\n          automatically.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}