{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "duck-slider",
  "title": "Duck Slider",
  "description": "The waterline: the filled track is water, the thumb floats on it, and letting go leaves a wake. A real input type=range, so arrows, PageUp/PageDown, Home/End, touch and RTL are the browser's job. curve=log owns the geometric mapping a font-size or zoom slider needs, and keeps aria-valuetext honest; label, valuePosition=row and action put the readout and a reset on the label row instead of above the track. Single value.",
  "registryDependencies": [
    "@duck/theme"
  ],
  "files": [
    {
      "path": "registry/duck/ui/duck-slider.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * DuckSlider — the waterline.\n *\n * The filled track is water, the thumb is the duck floating on it, and letting\n * go leaves a wake that spreads and dies. No foil here: an iridescent track\n * would be decoration pretending to be metaphor, and sliders come in sixes.\n *\n * It is a real <input type=\"range\">, which is the whole point. Arrow keys,\n * PageUp/PageDown, Home/End, touch dragging without stealing the page scroll,\n * and RTL where Left increases — all of it is browser behaviour that a div\n * with role=\"slider\" would have to reimplement and would get wrong.\n *\n * Single value only. A two-thumb range needs a different control; this is not\n * that control pretending.\n */\n\nconst LOG_STEPS = 1000;\n\n/** How many decimals the grain has, so quantising cannot leak 0.30000000000004. */\nfunction decimalsOf(step: number) {\n  const text = String(step);\n  const dot = text.indexOf(\".\");\n  return dot === -1 ? 0 : text.length - dot - 1;\n}\n\nexport interface DuckSliderProps\n  extends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\" | \"defaultValue\"> {\n  value?: number;\n  defaultValue?: number;\n  /**\n   * Turns the raw number into something a screen reader can read out —\n   * \"120 ms\", \"Large\". Without it the user hears a bare integer.\n   */\n  formatValue?: (value: number) => string;\n  /** Show the formatted value. */\n  showValue?: boolean;\n  /**\n   * Where that value goes. `above` is a line of its own over the track; `row`\n   * puts it at the end of the label row, right-aligned in tabular mono, which is\n   * what a control rail wants — a dragging slider never reflows the row it sits\n   * in, and 40 of them stay a fixed height.\n   */\n  valuePosition?: \"above\" | \"row\";\n  /**\n   * The control's name, rendered as a real <label> tied to the input. Pass it\n   * and the readout, the label and `action` share one row.\n   */\n  label?: React.ReactNode;\n  /** Trailing affordance on the label row — a reset button, a lock, a menu. */\n  action?: React.ReactNode;\n  /**\n   * How position maps to value. A font size running 12→400 or a scale running\n   * 0.05→8 is unusable linear: the useful half of the range is the first 15% of\n   * the track, which is why every editor writes the geometric mapping by hand,\n   * drives the slider in fake integer positions, and then has to lie in\n   * `min`/`max`/`step` and patch the screen-reader text back up.\n   *\n   * `log` owns that mapping. The track is uniform in log space, `step` stays the\n   * grain of the *reported* value, and `aria-valuetext` reports the real number\n   * rather than the position. Needs `min > 0` — a logarithm has nowhere to put\n   * zero — and falls back to linear if it does not get one.\n   */\n  curve?: \"linear\" | \"log\";\n  /**\n   * The value, already mapped. This is the channel to wire on a log slider: the\n   * input's own `valueAsNumber` is a track position there, so `onChange` still\n   * fires but carries the position, not the value.\n   */\n  onValueChange?: (value: number) => void;\n}\n\nfunction DuckSlider({\n  className,\n  id,\n  value,\n  defaultValue = 0,\n  min = 0,\n  max = 100,\n  step = 1,\n  formatValue,\n  showValue = false,\n  valuePosition = \"above\",\n  label,\n  action,\n  curve = \"linear\",\n  onChange,\n  onValueChange,\n  onPointerUp,\n  ...props\n}: DuckSliderProps) {\n  const controlled = value !== undefined;\n  const [internal, setInternal] = React.useState(defaultValue);\n  const current = controlled ? value : internal;\n  const wakeRef = React.useRef<HTMLDivElement>(null);\n  const generatedId = React.useId();\n  const inputId = id ?? (label ? generatedId : undefined);\n\n  const lower = Number(min);\n  const upper = Number(max);\n  const grain = Number(step);\n\n  /**\n   * A log track needs a positive, ordered domain. Rather than render something\n   * that silently misplaces the thumb, it degrades to the linear track it would\n   * have been — and says so, once, where a developer will see it.\n   */\n  const logUsable = lower > 0 && upper > lower;\n  const log = curve === \"log\" && logUsable;\n  if (process.env.NODE_ENV !== \"production\" && curve === \"log\" && !logUsable) {\n    console.warn(\n      `DuckSlider: curve=\"log\" needs min > 0 and max > min, got min=${min} max=${max}. Falling back to linear.`\n    );\n  }\n\n  const toPosition = React.useCallback(\n    (real: number) => {\n      const clamped = Math.min(Math.max(real, lower), upper);\n      return Math.round(\n        (Math.log(clamped / lower) / Math.log(upper / lower)) * LOG_STEPS\n      );\n    },\n    [lower, upper]\n  );\n\n  const fromPosition = React.useCallback(\n    (position: number) => {\n      const real =\n        lower * Math.pow(upper / lower, position / LOG_STEPS);\n      const bounded = Math.min(Math.max(real, lower), upper);\n      // `step` keeps its meaning — the grain of the value the caller receives —\n      // even though the input's own step is one track position.\n      if (!Number.isFinite(grain) || grain <= 0) return bounded;\n      const snapped = Math.round(bounded / grain) * grain;\n      return Number(\n        Math.min(Math.max(snapped, lower), upper).toFixed(decimalsOf(grain))\n      );\n    },\n    [grain, lower, upper]\n  );\n\n  const position = log ? toPosition(current) : current;\n  const fill = log\n    ? (position / LOG_STEPS) * 100\n    : upper === lower\n      ? 0\n      : ((current - lower) / (upper - lower)) * 100;\n  // A log track's value is a position, so the bare number a screen reader would\n  // otherwise read out is meaningless. It always gets text.\n  const readable = formatValue?.(current) ?? (log ? String(current) : undefined);\n\n  /**\n   * A native range insets the thumb by half its width at both ends, so a plain\n   * percentage would leave the water short of the duck at 0 and past it at 100.\n   * This is the same percentage, corrected back onto the thumb's centre.\n   */\n  const THUMB = 18;\n  const waterline = `calc(${fill}% + ${((0.5 - fill / 100) * THUMB).toFixed(2)}px)`;\n\n  /**\n   * A log track has 1000 positions and a value grain of its own, and the two do\n   * not line up: on a 12→400 range one position is 0.04px at the bottom and\n   * 1.4px at the top, so 24 arrow presses down there used to quantise back to\n   * the value the slider already had — the input is controlled, so the thumb\n   * snapped home and the key looked broken. Walking on in the direction of\n   * travel until the value actually changes makes one press worth one `step`,\n   * which is what the key promises.\n   */\n  const nextLogValue = React.useCallback(\n    (raw: number) => {\n      const candidate = fromPosition(raw);\n      if (candidate !== current || raw === position) return candidate;\n      const direction = raw > position ? 1 : -1;\n      let probe = raw;\n      let walked = candidate;\n      while (walked === current && probe > 0 && probe < LOG_STEPS) {\n        probe += direction;\n        walked = fromPosition(probe);\n      }\n      return walked;\n    },\n    [current, fromPosition, position]\n  );\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = event.currentTarget.valueAsNumber;\n      const next = log ? nextLogValue(raw) : raw;\n      if (!controlled) setInternal(next);\n      onValueChange?.(next);\n      onChange?.(event);\n    },\n    [controlled, log, nextLogValue, onChange, onValueChange]\n  );\n\n  const handlePointerUp = React.useCallback(\n    (event: React.PointerEvent<HTMLInputElement>) => {\n      onPointerUp?.(event);\n      const host = wakeRef.current;\n      if (!host) return;\n      const drop = document.createElement(\"span\");\n      // duck-ripple animates transform, so the placement has to be in px —\n      // a centring translate utility would be overwritten on the first frame.\n      const size = 28;\n      drop.className =\n        \"pointer-events-none absolute top-1/2 rounded-full bg-primary [animation:duck-ripple_0.45s_ease-out_forwards]\";\n      drop.style.width = drop.style.height = `${size}px`;\n      drop.style.marginTop = `${-size / 2}px`;\n      drop.style.left = `calc(${waterline} - ${size / 2}px)`;\n      drop.addEventListener(\"animationend\", () => drop.remove(), { once: true });\n      host.appendChild(drop);\n    },\n    [onPointerUp, waterline]\n  );\n\n  const readout = showValue && (\n    <span\n      data-slot=\"duck-slider-value\"\n      className=\"font-mono text-xs tabular-nums text-muted-foreground\"\n    >\n      {readable ?? current}\n    </span>\n  );\n  const inRow = valuePosition === \"row\";\n  const hasRow = Boolean(label) || Boolean(action) || (showValue && inRow);\n\n  return (\n    <div\n      data-slot=\"duck-slider\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      {hasRow && (\n        <div className=\"flex min-h-6 items-center justify-between gap-2\">\n          {label ? (\n            <label\n              htmlFor={inputId}\n              data-slot=\"duck-slider-label\"\n              className=\"truncate text-xs font-medium text-foreground\"\n            >\n              {label}\n            </label>\n          ) : (\n            <span />\n          )}\n          <span className=\"flex shrink-0 items-center gap-1\">\n            {inRow && readout}\n            {action}\n          </span>\n        </div>\n      )}\n      {!inRow && readout}\n      <div ref={wakeRef} className=\"relative flex h-5 items-center\">\n        <input\n          type=\"range\"\n          id={inputId}\n          // On a log track these three describe the track, not the value. The\n          // value is what aria-valuetext says.\n          min={log ? 0 : min}\n          max={log ? LOG_STEPS : max}\n          step={log ? 1 : step}\n          value={position}\n          aria-valuetext={readable}\n          onChange={handleChange}\n          onPointerUp={handlePointerUp}\n          style={{ \"--fill\": waterline } as React.CSSProperties}\n          className={cn(\n            \"peer h-1.5 w-full cursor-pointer appearance-none rounded-full bg-secondary outline-none\",\n            \"bg-[linear-gradient(to_right,var(--primary)_var(--fill),var(--secondary)_var(--fill))]\",\n            \"rtl:bg-[linear-gradient(to_left,var(--primary)_var(--fill),var(--secondary)_var(--fill))]\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            // The thumb is the duck. It is drawn at 18px and given a 24px grab\n            // area by the invisible border, so the tap target clears WCAG 2.5.8\n            // without the duck growing.\n            \"[&::-webkit-slider-thumb]:size-[18px] [&::-webkit-slider-thumb]:appearance-none\",\n            \"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-vinyl\",\n            \"[&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-primary\",\n            \"[&::-webkit-slider-thumb]:shadow-[0_1px_3px_oklch(0_0_0/0.35)]\",\n            \"[&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:duration-150\",\n            \"active:[&::-webkit-slider-thumb]:scale-115\",\n            \"[&::-moz-range-thumb]:size-[18px] [&::-moz-range-thumb]:rounded-full\",\n            \"[&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-primary\",\n            \"[&::-moz-range-thumb]:bg-vinyl\",\n            \"[&::-moz-range-track]:bg-transparent\",\n            \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background\"\n          )}\n          {...props}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport { DuckSlider };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}