{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-async-options",
  "title": "useAsyncOptions",
  "description": "Debounced typeahead loader for brand/category suggestions, delegating to an injected server-side fetcher.",
  "dependencies": [
    "@tanstack/react-query"
  ],
  "files": [
    {
      "path": "registry/default/hooks/use-async-options.ts",
      "content": "import * as React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\n\nexport type OptionFetcher<T> = (query: string) => Promise<T[]>;\n\nexport interface UseAsyncOptionsOptions<T> {\n  fetch: OptionFetcher<T>;\n  debounceMs?: number;\n  minLength?: number;\n}\n\nexport interface UseAsyncOptionsResult<T> {\n  query: string;\n  setQuery: (query: string) => void;\n  options: T[];\n  isLoading: boolean;\n  error: unknown;\n}\n\nfunction useDebouncedValue<T>(value: T, ms: number): T {\n  const [debounced, setDebounced] = React.useState(value);\n  React.useEffect(() => {\n    const timer = setTimeout(() => setDebounced(value), ms);\n    return () => clearTimeout(timer);\n  }, [value, ms]);\n  return debounced;\n}\n\nexport function useAsyncOptions<T>({\n  fetch,\n  debounceMs = 250,\n  minLength = 1,\n}: UseAsyncOptionsOptions<T>): UseAsyncOptionsResult<T> {\n  const [query, setQueryState] = React.useState(\"\");\n  const scope = React.useId();\n  const debounced = useDebouncedValue(query.trim(), debounceMs);\n  const enabled = debounced.length >= minLength;\n\n  const result = useQuery({\n    queryKey: [\"channel3-async-options\", scope, debounced],\n    queryFn: () => fetch(debounced),\n    enabled,\n  });\n\n  const setQuery = React.useCallback((next: string) => setQueryState(next), []);\n\n  return {\n    query,\n    setQuery,\n    options: enabled ? (result.data ?? []) : [],\n    isLoading: result.isFetching,\n    error: result.error,\n  };\n}\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}