{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "A searchable hand-drawn select with filtered dropdown and keyboard navigation.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "utils",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n} from \"react\";\nimport rough from \"roughjs\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  CrumbleContext,\n  getRoughOptions,\n  randomSeed,\n  resolveRoughVars,\n  stableSeed,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\n\nexport interface ComboboxOption {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps extends CrumbleColorProps {\n  className?: string;\n  defaultValue?: string;\n  disabled?: boolean;\n  error?: string;\n  id?: string;\n  label?: string;\n  onBlur?: () => void;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  options: ComboboxOption[];\n  placeholder?: string;\n  theme?: CrumbleTheme;\n  value?: string;\n}\n\nconst TRIGGER_HEIGHT = 40;\nconst OPTION_HEIGHT = 36;\n\nexport function Combobox({\n  className,\n  defaultValue = \"\",\n  disabled = false,\n  error,\n  fill,\n  id,\n  label,\n  onBlur,\n  onChange,\n  onFocus,\n  options,\n  placeholder = \"Search...\",\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n  value: controlledValue,\n}: ComboboxProps) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [focused, setFocused] = useState(false);\n\n  const value = controlledValue ?? internalValue;\n  const selectedOption = options.find((option) => option.value === value);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerSvgRef = useRef<SVGSVGElement>(null);\n  const optionSvgRefs = useRef<Map<string, SVGSVGElement>>(new Map());\n  const dropdownSvgRef = useRef<SVGSVGElement>(null);\n  const comboId =\n    id ?? `combobox-${label?.toLowerCase().replace(/\\s+/g, \"-\") ?? \"field\"}`;\n  const filtered = query.trim()\n    ? options.filter((option) =>\n        option.label.toLowerCase().includes(query.toLowerCase()),\n      )\n    : options;\n  const { theme: contextTheme } = useContext(CrumbleContext);\n  const theme = themeProp ?? contextTheme;\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n  const { drawRect: drawTriggerRect } = useRough({\n    stableId: comboId,\n    svgRef: triggerSvgRef,\n    theme: themeProp,\n    variant: \"border\",\n  });\n  const { drawRect: drawDropdownRect } = useRough({\n    stableId: `${comboId}-dropdown`,\n    svgRef: dropdownSvgRef,\n    theme: themeProp,\n    variant: \"border\",\n  });\n\n  const drawTrigger = useCallback(\n    (reseed = false) => {\n      const svg = triggerSvgRef.current;\n      const wrapper = wrapperRef.current;\n      if (!svg || !wrapper) return;\n\n      svg.replaceChildren();\n      const width = wrapper.offsetWidth;\n      svg.setAttribute(\"width\", String(width));\n      svg.setAttribute(\"height\", String(TRIGGER_HEIGHT));\n      svg.setAttribute(\"viewBox\", `0 0 ${width} ${TRIGGER_HEIGHT}`);\n\n      const currentStroke = error\n        ? \"var(--cr-stroke-error)\"\n        : focused || open\n          ? \"var(--cr-stroke)\"\n          : \"var(--cr-stroke-muted)\";\n\n      const rect = drawTriggerRect(1, 1, width - 2, TRIGGER_HEIGHT - 2, {\n        fill: \"none\",\n        seed: reseed ? randomSeed() : undefined,\n        stroke: currentStroke,\n      });\n      if (rect) svg.appendChild(rect);\n    },\n    [drawTriggerRect, error, focused, open],\n  );\n\n  const drawDropdown = useCallback(() => {\n    const svg = dropdownSvgRef.current;\n    if (!svg) return;\n\n    const width = svg.parentElement?.offsetWidth ?? 200;\n    const height = Math.max(filtered.length * OPTION_HEIGHT, OPTION_HEIGHT);\n    svg.replaceChildren();\n    svg.setAttribute(\"width\", String(width));\n    svg.setAttribute(\"height\", String(height));\n    svg.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n\n    const rect = drawDropdownRect(1, 1, width - 2, height - 2, {\n      fill: \"none\",\n      stroke: \"var(--cr-stroke)\",\n    });\n    if (rect) svg.appendChild(rect);\n  }, [drawDropdownRect, filtered.length]);\n\n  const drawOption = useCallback(\n    (svg: SVGSVGElement, width: number, highlighted: boolean) => {\n      svg.replaceChildren();\n      svg.setAttribute(\"width\", String(width));\n      svg.setAttribute(\"height\", String(OPTION_HEIGHT));\n      svg.setAttribute(\"viewBox\", `0 0 ${width} ${OPTION_HEIGHT}`);\n      if (!highlighted) return;\n\n      const renderer = rough.svg(svg);\n      svg.appendChild(\n        renderer.rectangle(\n          2,\n          2,\n          width - 4,\n          OPTION_HEIGHT - 4,\n          getRoughOptions(theme, \"fill\", {\n            fill: \"currentColor\",\n            fillStyle: \"hachure\",\n            seed: stableSeed(\"opt-hl\"),\n            stroke: \"none\",\n            strokeWidth: 0,\n          }),\n        ),\n      );\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    drawTrigger();\n  }, [drawTrigger]);\n\n  useEffect(() => {\n    if (!open) return;\n    const id = requestAnimationFrame(() => drawDropdown());\n    return () => cancelAnimationFrame(id);\n  }, [drawDropdown, open]);\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const observer = new ResizeObserver(() => {\n      drawTrigger();\n      if (open) drawDropdown();\n    });\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, [drawDropdown, drawTrigger, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (event: MouseEvent) => {\n      if (\n        wrapperRef.current &&\n        !wrapperRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n        setFocused(false);\n        setQuery(\"\");\n        onBlur?.();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [onBlur, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n        inputRef.current?.blur();\n      }\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [open]);\n\n  const handleSelect = (option: ComboboxOption) => {\n    if (option.disabled) return;\n    setInternalValue(option.value);\n    onChange?.(option.value);\n    setOpen(false);\n    setQuery(\"\");\n    setFocused(false);\n    onBlur?.();\n  };\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value);\n    if (!open) setOpen(true);\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)} style={roughStyle}>\n      {label ? (\n        <label\n          htmlFor={comboId}\n          className=\"text-[11px] font-medium uppercase tracking-wider text-muted-foreground\"\n        >\n          {label}\n        </label>\n      ) : null}\n\n      <div ref={wrapperRef} className=\"relative\">\n        <div className=\"relative\" style={{ height: TRIGGER_HEIGHT }}>\n          <svg\n            ref={triggerSvgRef}\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 overflow-visible\"\n          />\n          <input\n            ref={inputRef}\n            id={comboId}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-autocomplete=\"list\"\n            disabled={disabled}\n            placeholder={open ? placeholder : selectedOption?.label ?? placeholder}\n            value={open ? query : selectedOption?.label ?? \"\"}\n            onFocus={() => {\n              setFocused(true);\n              setOpen(true);\n              onFocus?.();\n            }}\n            onBlur={() => {\n              if (!open) {\n                setFocused(false);\n                onBlur?.();\n              }\n            }}\n            onChange={handleInputChange}\n            className={cn(\n              \"absolute inset-0 h-full w-full border-none bg-transparent px-3 pr-9 text-sm text-foreground outline-none\",\n              disabled && \"cursor-not-allowed opacity-40\",\n            )}\n          />\n          <svg\n            aria-hidden=\"true\"\n            width=\"16\"\n            height=\"14\"\n            viewBox=\"0 0 16 14\"\n            className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n          >\n            <line x1=\"2\" y1={open ? 10 : 4} x2=\"8\" y2={open ? 4 : 10} stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n            <line x1=\"8\" y1={open ? 4 : 10} x2=\"14\" y2={open ? 10 : 4} stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n          </svg>\n        </div>\n\n        {open ? (\n          <div\n            className=\"absolute left-0 right-0 top-[calc(100%+4px)] z-50 bg-background\"\n            style={{ minWidth: \"100%\" }}\n          >\n            <svg\n              ref={dropdownSvgRef}\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 overflow-visible\"\n            />\n            {filtered.length === 0 ? (\n              <div\n                className=\"flex items-center px-3 text-sm text-muted-foreground\"\n                style={{ height: OPTION_HEIGHT }}\n              >\n                No results\n              </div>\n            ) : (\n              filtered.map((option) => {\n                const isSelected = option.value === value;\n                return (\n                  <div\n                    key={option.value}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    className={cn(\n                      \"relative flex cursor-pointer items-center px-3 text-sm\",\n                      \"hover:text-foreground\",\n                      option.disabled && \"cursor-not-allowed opacity-40\",\n                      isSelected && \"font-medium\",\n                    )}\n                    style={{ height: OPTION_HEIGHT }}\n                    onClick={() => handleSelect(option)}\n                    onMouseEnter={(event) => {\n                      const svg = optionSvgRefs.current.get(option.value);\n                      if (svg) {\n                        drawOption(svg, event.currentTarget.offsetWidth, true);\n                      }\n                    }}\n                    onMouseLeave={(event) => {\n                      const svg = optionSvgRefs.current.get(option.value);\n                      if (svg) {\n                        drawOption(svg, event.currentTarget.offsetWidth, false);\n                      }\n                    }}\n                  >\n                    <svg\n                      aria-hidden=\"true\"\n                      className=\"pointer-events-none absolute inset-0 overflow-visible\"\n                      ref={(element) => {\n                        if (element) {\n                          optionSvgRefs.current.set(option.value, element);\n                        } else {\n                          optionSvgRefs.current.delete(option.value);\n                        }\n                      }}\n                    />\n                    <span className=\"relative z-10\">{option.label}</span>\n                  </div>\n                );\n              })\n            )}\n          </div>\n        ) : null}\n      </div>\n\n      {error ? <span className=\"text-xs text-destructive\">{error}</span> : null}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/combobox.tsx"
    }
  ],
  "type": "registry:ui"
}