{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "A hand-drawn range slider with a sketchy track and circle thumb.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/slider.tsx",
      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n} from \"react\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport {\n  resolveRoughVars,\n  stableSeed,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SliderProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\">,\n    CrumbleColorProps {\n  formatValue?: (value: number) => string;\n  label?: string;\n  showValue?: boolean;\n  theme?: CrumbleTheme;\n}\n\nconst TRACK_HEIGHT = 6;\nconst THUMB_SIZE = 20;\n\nexport function Slider({\n  className,\n  defaultValue,\n  fill,\n  formatValue,\n  id,\n  label,\n  max = 100,\n  min = 0,\n  onChange,\n  showValue = true,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n  value,\n  ...props\n}: SliderProps) {\n  const [current, setCurrent] = useState(Number(value ?? defaultValue ?? min));\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const trackSvgRef = useRef<SVGSVGElement>(null);\n  const thumbSvgRef = useRef<SVGSVGElement>(null);\n  const sliderId =\n    id ?? `slider-${label?.toLowerCase().replace(/\\s+/g, \"-\") ?? \"field\"}`;\n  const pct = (current - Number(min)) / (Number(max) - Number(min));\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n  const { drawLine, theme } = useRough({\n    stableId: sliderId,\n    svgRef: trackSvgRef,\n    theme: themeProp,\n    variant: \"border\",\n  });\n  const { drawCircle } = useRough({\n    stableId: `${sliderId}-thumb`,\n    svgRef: thumbSvgRef,\n    theme: themeProp,\n    variant: \"interactive\",\n  });\n\n  const drawAll = useCallback(() => {\n    const thumbSvg = thumbSvgRef.current;\n    const trackSvg = trackSvgRef.current;\n    const wrapper = wrapperRef.current;\n\n    if (!thumbSvg || !trackSvg || !wrapper) return;\n\n    const width = wrapper.offsetWidth;\n    const trackHeight = TRACK_HEIGHT + 4;\n\n    trackSvg.replaceChildren();\n    trackSvg.setAttribute(\"width\", String(width));\n    trackSvg.setAttribute(\"height\", String(trackHeight));\n    trackSvg.setAttribute(\"viewBox\", `0 0 ${width} ${trackHeight}`);\n\n    const baseStrokeWidth = TRACK_HEIGHT;\n    const track = drawLine(0, TRACK_HEIGHT / 2 + 2, width, TRACK_HEIGHT / 2 + 2, {\n      seed: stableSeed(`${sliderId}-track`),\n      stroke: \"hsl(var(--border))\",\n      strokeWidth: baseStrokeWidth,\n    });\n    if (track) trackSvg.appendChild(track);\n\n    if (pct > 0) {\n      const fillLine = drawLine(\n        0,\n        TRACK_HEIGHT / 2 + 2,\n        width * pct,\n        TRACK_HEIGHT / 2 + 2,\n        {\n          seed: stableSeed(`${sliderId}-fill`),\n          stroke: \"var(--cr-stroke)\",\n          strokeWidth: baseStrokeWidth,\n        },\n      );\n      if (fillLine) trackSvg.appendChild(fillLine);\n    }\n\n    thumbSvg.replaceChildren();\n    const thumb = drawCircle(THUMB_SIZE / 2, THUMB_SIZE / 2, THUMB_SIZE - 2, {\n      fill: \"hsl(var(--background))\",\n      fillStyle: \"solid\",\n      stroke: \"var(--cr-stroke)\",\n    });\n    if (thumb) thumbSvg.appendChild(thumb);\n  }, [drawCircle, drawLine, pct, sliderId]);\n\n  useEffect(() => {\n    drawAll();\n  }, [drawAll]);\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    const observer = new ResizeObserver(() => drawAll());\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, [drawAll]);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCurrent(Number(event.target.value));\n    onChange?.(event);\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-2\", className)} style={roughStyle}>\n      {label || showValue ? (\n        <div className=\"flex justify-between\">\n          {label ? (\n            <label\n              htmlFor={sliderId}\n              className=\"text-[11px] font-medium uppercase tracking-wider text-muted-foreground\"\n            >\n              {label}\n            </label>\n          ) : null}\n          {showValue ? (\n            <span className=\"text-[13px] tabular-nums text-muted-foreground\">\n              {formatValue ? formatValue(current) : String(current)}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      <div ref={wrapperRef} className=\"relative flex h-6 items-center\">\n        <svg\n          ref={trackSvgRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-0 overflow-visible\"\n        />\n        <svg\n          ref={thumbSvgRef}\n          aria-hidden=\"true\"\n          height={THUMB_SIZE}\n          width={THUMB_SIZE}\n          className=\"pointer-events-none absolute overflow-visible\"\n          style={{ left: `calc(${pct * 100}% - ${THUMB_SIZE / 2}px)` }}\n        />\n        <input\n          id={sliderId}\n          max={max}\n          min={min}\n          onChange={handleChange}\n          className=\"absolute inset-0 m-0 w-full cursor-pointer opacity-0\"\n          type=\"range\"\n          value={current}\n          {...props}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/slider.tsx"
    }
  ],
  "type": "registry:ui"
}