@flanksource/clicky-ui 0.3.55 → 0.3.56

package/dist/components/RangeSlider.cjs

@@ -1,7 +1,7 @@
 const require_utils = require("../lib/utils.cjs");
+const require_slider_shared = require("./slider-shared.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/components/RangeSlider.tsx
-var thumbClassName = "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm";
 function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Minimum value", ariaLabelMax = "Maximum value", editable = false, className, trackClassName, rangeClassName, thumbClassName: thumbOverrideClassName }) {
 	const [lower, upper] = normalizeRangeValue(value, min, max);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -13,8 +13,8 @@ function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Mini
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: require_utils.cn("absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70", rangeClassName),
 					style: {
-						left: `${valueToPercent(lower, min, max)}%`,
-						right: `${100 - valueToPercent(upper, min, max)}%`
+						left: `${require_slider_shared.valueToPercent(lower, min, max)}%`,
+						right: `${100 - require_slider_shared.valueToPercent(upper, min, max)}%`
 					}
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -24,10 +24,10 @@ function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Mini
 					max,
 					step,
 					value: lower,
-					className: require_utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+					className: require_utils.cn(require_slider_shared.sliderBaseClassName, require_slider_shared.sliderThumbClassName, thumbOverrideClassName),
 					style: { zIndex: lower >= max ? 30 : 20 },
 					onChange: (event) => {
-						const nextLower = clampNumber(Number(event.target.value), min, max);
+						const nextLower = require_slider_shared.clampNumber(Number(event.target.value), min, max);
 						onChange([Math.min(nextLower, upper), upper]);
 					}
 				}),
@@ -38,9 +38,9 @@ function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Mini
 					max,
 					step,
 					value: upper,
-					className: require_utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+					className: require_utils.cn(require_slider_shared.sliderBaseClassName, require_slider_shared.sliderThumbClassName, thumbOverrideClassName),
 					onChange: (event) => {
-						const nextUpper = clampNumber(Number(event.target.value), min, max);
+						const nextUpper = require_slider_shared.clampNumber(Number(event.target.value), min, max);
 						onChange([lower, Math.max(nextUpper, lower)]);
 					}
 				})
@@ -74,7 +74,7 @@ function EditableBound({ label, ariaLabel, min, max, step, stepBase, value, onCh
 		className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			"aria-label": ariaLabel,
-			className: "h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			className: require_slider_shared.sliderNumberInputClassName,
 			max,
 			min,
 			step,
@@ -84,7 +84,7 @@ function EditableBound({ label, ariaLabel, min, max, step, stepBase, value, onCh
 				if (event.currentTarget.value === "") return;
 				const next = Number(event.currentTarget.value);
 				if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);
-				onChange(snapToStep(next, {
+				onChange(require_slider_shared.snapToStep(next, {
 					base: stepBase,
 					step,
 					min,
@@ -94,28 +94,8 @@ function EditableBound({ label, ariaLabel, min, max, step, stepBase, value, onCh
 		})]
 	});
 }
-var baseSliderClassName = "pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent";
 function normalizeRangeValue(value, min, max) {
-	return [clampNumber(Math.min(value[0], value[1]), min, max), clampNumber(Math.max(value[0], value[1]), min, max)];
-}
-function clampNumber(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
-/**
-* Nearest `step`-aligned value measured from `base`, kept inside `[min, max]`.
-* Mirrors what the range inputs enforce, so typed entry cannot produce a value
-* the thumbs could never reach.
-*/
-function snapToStep(value, { base, step, min, max }) {
-	if (!(step > 0)) return clampNumber(value, min, max);
-	const aligned = base + Math.round((value - base) / step) * step;
-	if (aligned < min) return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);
-	if (aligned > max) return clampNumber(base + Math.floor((max - base) / step) * step, min, max);
-	return aligned;
-}
-function valueToPercent(value, min, max) {
-	if (max <= min) return 0;
-	return (value - min) / (max - min) * 100;
+	return [require_slider_shared.clampNumber(Math.min(value[0], value[1]), min, max), require_slider_shared.clampNumber(Math.max(value[0], value[1]), min, max)];
 }
 function lowercaseFirst(value) {
 	return value.charAt(0).toLowerCase() + value.slice(1);

package/dist/components/RangeSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.cjs","names":["cn"],"sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            stepBase={min}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            stepBase={min}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  stepBase,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  /** Origin the `step` grid is measured from — the slider's own `min`. */\n  stepBase: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className=\"h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(snapToStep(next, { base: stepBase, step, min, max }));\n        }}\n      />\n    </label>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Nearest `step`-aligned value measured from `base`, kept inside `[min, max]`.\n * Mirrors what the range inputs enforce, so typed entry cannot produce a value\n * the thumbs could never reach.\n */\nfunction snapToStep(\n  value: number,\n  { base, step, min, max }: { base: number; step: number; min: number; max: number },\n): number {\n  if (!(step > 0)) return clampNumber(value, min, max);\n  const aligned = base + Math.round((value - base) / step) * step;\n  if (aligned < min) {\n    return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);\n  }\n  if (aligned > max) {\n    return clampNumber(base + Math.floor((max - base) / step) * step, min, max);\n  }\n  return aligned;\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.cjs","names":["cn","valueToPercent","baseSliderClassName","thumbClassName","clampNumber","sliderNumberInputClassName","snapToStep"],"sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport {\n  clampNumber,\n  sliderBaseClassName as baseSliderClassName,\n  sliderNumberInputClassName,\n  sliderThumbClassName as thumbClassName,\n  snapToStep,\n  valueToPercent,\n} from \"./slider-shared\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            stepBase={min}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            stepBase={min}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  stepBase,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  /** Origin the `step` grid is measured from — the slider's own `min`. */\n  stepBase: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className={sliderNumberInputClassName}\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(snapToStep(next, { base: stepBase, step, min, max }));\n        }}\n      />\n    </label>\n  );\n}\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"mappings":"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"}

package/dist/components/RangeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAKF,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,YAA8B,EAC9B,YAA8B,EAC9B,QAAgB,EAChB,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EAAE,sBAAsB,GACvC,EAAE,gBAAgB,+BA4ElB"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,YAA8B,EAC9B,YAA8B,EAC9B,QAAgB,EAChB,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EAAE,sBAAsB,GACvC,EAAE,gBAAgB,+BA4ElB"}

package/dist/components/RangeSlider.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
+import { clampNumber, sliderBaseClassName, sliderNumberInputClassName, sliderThumbClassName, snapToStep, valueToPercent } from "./slider-shared.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/RangeSlider.tsx
-var thumbClassName = "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm";
 function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Minimum value", ariaLabelMax = "Maximum value", editable = false, className, trackClassName, rangeClassName, thumbClassName: thumbOverrideClassName }) {
 	const [lower, upper] = normalizeRangeValue(value, min, max);
 	return /* @__PURE__ */ jsxs("div", {
@@ -24,7 +24,7 @@ function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Mini
 					max,
 					step,
 					value: lower,
-					className: cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+					className: cn(sliderBaseClassName, sliderThumbClassName, thumbOverrideClassName),
 					style: { zIndex: lower >= max ? 30 : 20 },
 					onChange: (event) => {
 						const nextLower = clampNumber(Number(event.target.value), min, max);
@@ -38,7 +38,7 @@ function RangeSlider({ min, max, value, onChange, step = 1, ariaLabelMin = "Mini
 					max,
 					step,
 					value: upper,
-					className: cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+					className: cn(sliderBaseClassName, sliderThumbClassName, thumbOverrideClassName),
 					onChange: (event) => {
 						const nextUpper = clampNumber(Number(event.target.value), min, max);
 						onChange([lower, Math.max(nextUpper, lower)]);
@@ -74,7 +74,7 @@ function EditableBound({ label, ariaLabel, min, max, step, stepBase, value, onCh
 		className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground",
 		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("input", {
 			"aria-label": ariaLabel,
-			className: "h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			className: sliderNumberInputClassName,
 			max,
 			min,
 			step,
@@ -94,29 +94,9 @@ function EditableBound({ label, ariaLabel, min, max, step, stepBase, value, onCh
 		})]
 	});
 }
-var baseSliderClassName = "pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent";
 function normalizeRangeValue(value, min, max) {
 	return [clampNumber(Math.min(value[0], value[1]), min, max), clampNumber(Math.max(value[0], value[1]), min, max)];
 }
-function clampNumber(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
-/**
-* Nearest `step`-aligned value measured from `base`, kept inside `[min, max]`.
-* Mirrors what the range inputs enforce, so typed entry cannot produce a value
-* the thumbs could never reach.
-*/
-function snapToStep(value, { base, step, min, max }) {
-	if (!(step > 0)) return clampNumber(value, min, max);
-	const aligned = base + Math.round((value - base) / step) * step;
-	if (aligned < min) return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);
-	if (aligned > max) return clampNumber(base + Math.floor((max - base) / step) * step, min, max);
-	return aligned;
-}
-function valueToPercent(value, min, max) {
-	if (max <= min) return 0;
-	return (value - min) / (max - min) * 100;
-}
 function lowercaseFirst(value) {
 	return value.charAt(0).toLowerCase() + value.slice(1);
 }

package/dist/components/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":[],"sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            stepBase={min}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            stepBase={min}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  stepBase,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  /** Origin the `step` grid is measured from — the slider's own `min`. */\n  stepBase: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className=\"h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(snapToStep(next, { base: stepBase, step, min, max }));\n        }}\n      />\n    </label>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Nearest `step`-aligned value measured from `base`, kept inside `[min, max]`.\n * Mirrors what the range inputs enforce, so typed entry cannot produce a value\n * the thumbs could never reach.\n */\nfunction snapToStep(\n  value: number,\n  { base, step, min, max }: { base: number; step: number; min: number; max: number },\n): number {\n  if (!(step > 0)) return clampNumber(value, min, max);\n  const aligned = base + Math.round((value - base) / step) * step;\n  if (aligned < min) {\n    return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);\n  }\n  if (aligned > max) {\n    return clampNumber(base + Math.floor((max - base) / step) * step, min, max);\n  }\n  return aligned;\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","names":["baseSliderClassName","thumbClassName"],"sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport {\n  clampNumber,\n  sliderBaseClassName as baseSliderClassName,\n  sliderNumberInputClassName,\n  sliderThumbClassName as thumbClassName,\n  snapToStep,\n  valueToPercent,\n} from \"./slider-shared\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            stepBase={min}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            stepBase={min}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  stepBase,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  /** Origin the `step` grid is measured from — the slider's own `min`. */\n  stepBase: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className={sliderNumberInputClassName}\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(snapToStep(next, { base: stepBase, step, min, max }));\n        }}\n      />\n    </label>\n  );\n}\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"mappings":"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"}

package/dist/components/Slider.cjs

@@ -0,0 +1,79 @@
+const require_utils = require("../lib/utils.cjs");
+const require_slider_shared = require("./slider-shared.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/Slider.tsx
+/**
+* Single-value slider built from a native `<input type="range">`, sharing its
+* track and thumb styling with `RangeSlider`. Fully controlled. With `editable`
+* the exact value can also be typed into a number field beside the track;
+* typed values are snapped to the step grid and clamped to `[min, max]`.
+*/
+function Slider({ min, max, value, onChange, step = 1, ariaLabel = "Value", editable = false, className, trackClassName, fillClassName, thumbClassName }) {
+	const current = require_slider_shared.clampNumber(value, min, max);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slider-row": true,
+		className: require_utils.cn("flex items-center gap-3", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative h-6 min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_utils.cn("absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border", trackClassName) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_utils.cn("absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70", fillClassName),
+					style: { right: `${100 - require_slider_shared.valueToPercent(current, min, max)}%` }
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "range",
+					"aria-label": ariaLabel,
+					min,
+					max,
+					step,
+					value: current,
+					className: require_utils.cn(require_slider_shared.sliderBaseClassName, "pointer-events-auto cursor-pointer", require_slider_shared.sliderThumbClassName, thumbClassName),
+					onChange: (event) => onChange(require_slider_shared.clampNumber(Number(event.target.value), min, max))
+				})
+			]
+		}), editable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderNumberField, {
+			ariaLabel: `Edit ${ariaLabel.charAt(0).toLowerCase()}${ariaLabel.slice(1)}`,
+			min,
+			max,
+			step,
+			value: current,
+			onChange
+		}) : null]
+	});
+}
+/**
+* Number field that commits every valid keystroke (snapped and clamped) but keeps
+* what the user typed on screen until blur, so entering "15" into a field whose
+* minimum is 10 is not rewritten to "10" after the first digit.
+*/
+function SliderNumberField({ ariaLabel, min, max, step, value, onChange }) {
+	const [draft, setDraft] = (0, react.useState)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		"aria-label": ariaLabel,
+		className: require_utils.cn(require_slider_shared.sliderNumberInputClassName, "w-16 shrink-0"),
+		max,
+		min,
+		step,
+		type: "number",
+		value: draft ?? value,
+		onBlur: () => setDraft(null),
+		onChange: (event) => {
+			const raw = event.currentTarget.value;
+			setDraft(raw);
+			if (raw === "") return;
+			const next = Number(raw);
+			if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);
+			onChange(require_slider_shared.snapToStep(next, {
+				base: min,
+				step,
+				min,
+				max
+			}));
+		}
+	});
+}
+exports.Slider = Slider;
+
+//# sourceMappingURL=Slider.cjs.map

package/dist/components/Slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.cjs","names":["clampNumber","cn","valueToPercent","sliderBaseClassName","sliderThumbClassName","useState","sliderNumberInputClassName","snapToStep"],"sources":["../../src/components/Slider.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport {\n  clampNumber,\n  sliderBaseClassName,\n  sliderNumberInputClassName,\n  sliderThumbClassName,\n  snapToStep,\n  valueToPercent,\n} from \"./slider-shared\";\n\nexport type SliderProps = {\n  min: number;\n  max: number;\n  value: number;\n  onChange: (value: number) => void;\n  step?: number;\n  /** Accessible name of the slider thumb. The number field is named `Edit <lowercased label>`. */\n  ariaLabel?: string;\n  /** Shows a number field on the same row as the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  thumbClassName?: string;\n};\n\n/**\n * Single-value slider built from a native `<input type=\"range\">`, sharing its\n * track and thumb styling with `RangeSlider`. Fully controlled. With `editable`\n * the exact value can also be typed into a number field beside the track;\n * typed values are snapped to the step grid and clamped to `[min, max]`.\n */\nexport function Slider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabel = \"Value\",\n  editable = false,\n  className,\n  trackClassName,\n  fillClassName,\n  thumbClassName,\n}: SliderProps) {\n  const current = clampNumber(value, min, max);\n\n  return (\n    <div data-slider-row className={cn(\"flex items-center gap-3\", className)}>\n      <div className=\"relative h-6 min-w-0 flex-1\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            fillClassName,\n          )}\n          style={{ right: `${100 - valueToPercent(current, min, max)}%` }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabel}\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          className={cn(\n            sliderBaseClassName,\n            \"pointer-events-auto cursor-pointer\",\n            sliderThumbClassName,\n            thumbClassName,\n          )}\n          onChange={(event) => onChange(clampNumber(Number(event.target.value), min, max))}\n        />\n      </div>\n      {editable ? (\n        <SliderNumberField\n          ariaLabel={`Edit ${ariaLabel.charAt(0).toLowerCase()}${ariaLabel.slice(1)}`}\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          onChange={onChange}\n        />\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Number field that commits every valid keystroke (snapped and clamped) but keeps\n * what the user typed on screen until blur, so entering \"15\" into a field whose\n * minimum is 10 is not rewritten to \"10\" after the first digit.\n */\nfunction SliderNumberField({\n  ariaLabel,\n  min,\n  max,\n  step,\n  value,\n  onChange,\n}: {\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n\n  return (\n    <input\n      aria-label={ariaLabel}\n      className={cn(sliderNumberInputClassName, \"w-16 shrink-0\")}\n      max={max}\n      min={min}\n      step={step}\n      type=\"number\"\n      value={draft ?? value}\n      onBlur={() => setDraft(null)}\n      onChange={(event) => {\n        const raw = event.currentTarget.value;\n        setDraft(raw);\n        if (raw === \"\") return;\n        const next = Number(raw);\n        if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n        onChange(snapToStep(next, { base: min, step, min, max }));\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAiCA,SAAgB,OAAO,EACrB,KACA,KACA,OACA,UACA,OAAO,GACP,YAAY,SACZ,WAAW,OACX,WACA,gBACA,eACA,kBACc;CACd,MAAM,UAAUA,sBAAAA,YAAY,OAAO,KAAK,GAAG;CAE3C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,mBAAA;EAAgB,WAAWC,cAAAA,GAAG,2BAA2B,SAAS;EAAvE,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EACE,WAAWA,cAAAA,GACT,+EACA,cACF,EACD,CAAA;IACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,WAAWA,cAAAA,GACT,2EACA,aACF;KACA,OAAO,EAAE,OAAO,GAAG,MAAMC,sBAAAA,eAAe,SAAS,KAAK,GAAG,EAAE,GAAG;IAC/D,CAAA;IACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACE,MAAK;KACL,cAAY;KACP;KACA;KACC;KACN,OAAO;KACP,WAAWD,cAAAA,GACTE,sBAAAA,qBACA,sCACAC,sBAAAA,sBACA,cACF;KACA,WAAW,UAAU,SAASJ,sBAAAA,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG,CAAC;IAChF,CAAA;GACE;EACJ,CAAA,GAAA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;GACE,WAAW,QAAQ,UAAU,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,UAAU,MAAM,CAAC;GACnE;GACA;GACC;GACN,OAAO;GACG;EACX,CAAA,IACC,IACD;;AAET;;;;;;AAOA,SAAS,kBAAkB,EACzB,WACA,KACA,KACA,MACA,OACA,YAQC;CACD,MAAM,CAAC,OAAO,aAAA,GAAYK,MAAAA,SAAAA,CAAwB,IAAI;CAEtD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,cAAY;EACZ,WAAWJ,cAAAA,GAAGK,sBAAAA,4BAA4B,eAAe;EACpD;EACA;EACC;EACN,MAAK;EACL,OAAO,SAAS;EAChB,cAAc,SAAS,IAAI;EAC3B,WAAW,UAAU;GACnB,MAAM,MAAM,MAAM,cAAc;GAChC,SAAS,GAAG;GACZ,IAAI,QAAQ,IAAI;GAChB,MAAM,OAAO,OAAO,GAAG;GACvB,IAAI,CAAC,OAAO,SAAS,IAAI,GAAG,MAAM,IAAI,MAAM,GAAG,UAAU,yBAAyB;GAClF,SAASC,sBAAAA,WAAW,MAAM;IAAE,MAAM;IAAK;IAAM;IAAK;GAAI,CAAC,CAAC;EAC1D;CACD,CAAA;AAEL"}

package/dist/components/Slider.d.ts

@@ -0,0 +1,23 @@
+export type SliderProps = {
+    min: number;
+    max: number;
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    /** Accessible name of the slider thumb. The number field is named `Edit <lowercased label>`. */
+    ariaLabel?: string;
+    /** Shows a number field on the same row as the track for exact keyboard entry. */
+    editable?: boolean;
+    className?: string;
+    trackClassName?: string;
+    fillClassName?: string;
+    thumbClassName?: string;
+};
+/**
+ * Single-value slider built from a native `<input type="range">`, sharing its
+ * track and thumb styling with `RangeSlider`. Fully controlled. With `editable`
+ * the exact value can also be typed into a number field beside the track;
+ * typed values are snapped to the step grid and clamped to `[min, max]`.
+ */
+export declare function Slider({ min, max, value, onChange, step, ariaLabel, editable, className, trackClassName, fillClassName, thumbClassName, }: SliderProps): import("react").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,SAAmB,EACnB,QAAgB,EAChB,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,WAAW,+BA+Cb"}

package/dist/components/Slider.js

@@ -0,0 +1,79 @@
+import { cn } from "../lib/utils.js";
+import { clampNumber, sliderBaseClassName, sliderNumberInputClassName, sliderThumbClassName, snapToStep, valueToPercent } from "./slider-shared.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Slider.tsx
+/**
+* Single-value slider built from a native `<input type="range">`, sharing its
+* track and thumb styling with `RangeSlider`. Fully controlled. With `editable`
+* the exact value can also be typed into a number field beside the track;
+* typed values are snapped to the step grid and clamped to `[min, max]`.
+*/
+function Slider({ min, max, value, onChange, step = 1, ariaLabel = "Value", editable = false, className, trackClassName, fillClassName, thumbClassName }) {
+	const current = clampNumber(value, min, max);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slider-row": true,
+		className: cn("flex items-center gap-3", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative h-6 min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border", trackClassName) }),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70", fillClassName),
+					style: { right: `${100 - valueToPercent(current, min, max)}%` }
+				}),
+				/* @__PURE__ */ jsx("input", {
+					type: "range",
+					"aria-label": ariaLabel,
+					min,
+					max,
+					step,
+					value: current,
+					className: cn(sliderBaseClassName, "pointer-events-auto cursor-pointer", sliderThumbClassName, thumbClassName),
+					onChange: (event) => onChange(clampNumber(Number(event.target.value), min, max))
+				})
+			]
+		}), editable ? /* @__PURE__ */ jsx(SliderNumberField, {
+			ariaLabel: `Edit ${ariaLabel.charAt(0).toLowerCase()}${ariaLabel.slice(1)}`,
+			min,
+			max,
+			step,
+			value: current,
+			onChange
+		}) : null]
+	});
+}
+/**
+* Number field that commits every valid keystroke (snapped and clamped) but keeps
+* what the user typed on screen until blur, so entering "15" into a field whose
+* minimum is 10 is not rewritten to "10" after the first digit.
+*/
+function SliderNumberField({ ariaLabel, min, max, step, value, onChange }) {
+	const [draft, setDraft] = useState(null);
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": ariaLabel,
+		className: cn(sliderNumberInputClassName, "w-16 shrink-0"),
+		max,
+		min,
+		step,
+		type: "number",
+		value: draft ?? value,
+		onBlur: () => setDraft(null),
+		onChange: (event) => {
+			const raw = event.currentTarget.value;
+			setDraft(raw);
+			if (raw === "") return;
+			const next = Number(raw);
+			if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);
+			onChange(snapToStep(next, {
+				base: min,
+				step,
+				min,
+				max
+			}));
+		}
+	});
+}
+export { Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"sources":["../../src/components/Slider.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport {\n  clampNumber,\n  sliderBaseClassName,\n  sliderNumberInputClassName,\n  sliderThumbClassName,\n  snapToStep,\n  valueToPercent,\n} from \"./slider-shared\";\n\nexport type SliderProps = {\n  min: number;\n  max: number;\n  value: number;\n  onChange: (value: number) => void;\n  step?: number;\n  /** Accessible name of the slider thumb. The number field is named `Edit <lowercased label>`. */\n  ariaLabel?: string;\n  /** Shows a number field on the same row as the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  thumbClassName?: string;\n};\n\n/**\n * Single-value slider built from a native `<input type=\"range\">`, sharing its\n * track and thumb styling with `RangeSlider`. Fully controlled. With `editable`\n * the exact value can also be typed into a number field beside the track;\n * typed values are snapped to the step grid and clamped to `[min, max]`.\n */\nexport function Slider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabel = \"Value\",\n  editable = false,\n  className,\n  trackClassName,\n  fillClassName,\n  thumbClassName,\n}: SliderProps) {\n  const current = clampNumber(value, min, max);\n\n  return (\n    <div data-slider-row className={cn(\"flex items-center gap-3\", className)}>\n      <div className=\"relative h-6 min-w-0 flex-1\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            fillClassName,\n          )}\n          style={{ right: `${100 - valueToPercent(current, min, max)}%` }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabel}\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          className={cn(\n            sliderBaseClassName,\n            \"pointer-events-auto cursor-pointer\",\n            sliderThumbClassName,\n            thumbClassName,\n          )}\n          onChange={(event) => onChange(clampNumber(Number(event.target.value), min, max))}\n        />\n      </div>\n      {editable ? (\n        <SliderNumberField\n          ariaLabel={`Edit ${ariaLabel.charAt(0).toLowerCase()}${ariaLabel.slice(1)}`}\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          onChange={onChange}\n        />\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Number field that commits every valid keystroke (snapped and clamped) but keeps\n * what the user typed on screen until blur, so entering \"15\" into a field whose\n * minimum is 10 is not rewritten to \"10\" after the first digit.\n */\nfunction SliderNumberField({\n  ariaLabel,\n  min,\n  max,\n  step,\n  value,\n  onChange,\n}: {\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n\n  return (\n    <input\n      aria-label={ariaLabel}\n      className={cn(sliderNumberInputClassName, \"w-16 shrink-0\")}\n      max={max}\n      min={min}\n      step={step}\n      type=\"number\"\n      value={draft ?? value}\n      onBlur={() => setDraft(null)}\n      onChange={(event) => {\n        const raw = event.currentTarget.value;\n        setDraft(raw);\n        if (raw === \"\") return;\n        const next = Number(raw);\n        if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n        onChange(snapToStep(next, { base: min, step, min, max }));\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAiCA,SAAgB,OAAO,EACrB,KACA,KACA,OACA,UACA,OAAO,GACP,YAAY,SACZ,WAAW,OACX,WACA,gBACA,eACA,kBACc;CACd,MAAM,UAAU,YAAY,OAAO,KAAK,GAAG;CAE3C,OACE,qBAAC,OAAD;EAAK,mBAAA;EAAgB,WAAW,GAAG,2BAA2B,SAAS;EAAvE,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,OAAD,EACE,WAAW,GACT,+EACA,cACF,EACD,CAAA;IACD,oBAAC,OAAD;KACE,WAAW,GACT,2EACA,aACF;KACA,OAAO,EAAE,OAAO,GAAG,MAAM,eAAe,SAAS,KAAK,GAAG,EAAE,GAAG;IAC/D,CAAA;IACD,oBAAC,SAAD;KACE,MAAK;KACL,cAAY;KACP;KACA;KACC;KACN,OAAO;KACP,WAAW,GACT,qBACA,sCACA,sBACA,cACF;KACA,WAAW,UAAU,SAAS,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG,CAAC;IAChF,CAAA;GACE;EACJ,CAAA,GAAA,WACC,oBAAC,mBAAD;GACE,WAAW,QAAQ,UAAU,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,UAAU,MAAM,CAAC;GACnE;GACA;GACC;GACN,OAAO;GACG;EACX,CAAA,IACC,IACD;;AAET;;;;;;AAOA,SAAS,kBAAkB,EACzB,WACA,KACA,KACA,MACA,OACA,YAQC;CACD,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CAEtD,OACE,oBAAC,SAAD;EACE,cAAY;EACZ,WAAW,GAAG,4BAA4B,eAAe;EACpD;EACA;EACC;EACN,MAAK;EACL,OAAO,SAAS;EAChB,cAAc,SAAS,IAAI;EAC3B,WAAW,UAAU;GACnB,MAAM,MAAM,MAAM,cAAc;GAChC,SAAS,GAAG;GACZ,IAAI,QAAQ,IAAI;GAChB,MAAM,OAAO,OAAO,GAAG;GACvB,IAAI,CAAC,OAAO,SAAS,IAAI,GAAG,MAAM,IAAI,MAAM,GAAG,UAAU,yBAAyB;GAClF,SAAS,WAAW,MAAM;IAAE,MAAM;IAAK;IAAM;IAAK;GAAI,CAAC,CAAC;EAC1D;CACD,CAAA;AAEL"}

package/dist/components/combobox-types.d.ts

@@ -9,11 +9,14 @@ export type ComboboxOption = {
     description?: string;
     /** Places metadata beside the label on a single line rather than below it. */
     descriptionLayout?: "stacked" | "inline";
+    /** Wraps long labels and stacks metadata in narrow menus, with inline rows when space permits. */
+    layout?: "responsive";
     /**
      * Node pinned to the right edge of the option row — a rendered preview of
      * what the choice produces, a count, a badge. Keeps the row single-line, so
      * prefer it over `description` when the secondary content is a value rather
-     * than a sentence. Not searchable (use `label`, `description` or `title` for
+     * than a sentence. With `layout: "responsive"`, moves below the label in narrow menus.
+     * Not searchable (use `label`, `description` or `title` for
      * anything that must match a query), and ignored in tristate mode, whose row
      * is a full-width pill.
      */

package/dist/components/combobox-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-types.d.ts","sourceRoot":"","sources":["../../src/components/combobox-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox-types.d.ts","sourceRoot":"","sources":["../../src/components/combobox-types.ts"],"names":[],"mappings":"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"}

package/dist/components/filter-bar-field-utils.cjs

@@ -37,14 +37,12 @@ function useDebouncedMultiDraft(value, onChange) {
 		latestOnChange.current = onChange;
 	}, [onChange]);
 	(0, react.useEffect)(() => {
-		if (!sameMultiFilterValue(latestValue.current, value)) {
-			latestValue.current = value;
+		const externalChange = !sameMultiFilterValue(latestValue.current, value);
+		latestValue.current = value;
+		if (externalChange) {
 			setDraft(value);
 			return;
 		}
-		latestValue.current = value;
-	}, [valueKey, value]);
-	(0, react.useEffect)(() => {
 		if (sameMultiFilterValue(draft, value)) return;
 		if (!autoSubmit) {
 			latestOnChange.current(draft);

package/dist/components/filter-bar-field-utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar-field-utils.cjs","names":["useContext","FilterBarContext","useState","useRef","isValidElement","cloneElement","LabelIcon"],"sources":["../../src/components/filter-bar-field-utils.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport type { FilterMode } from \"../data/FilterPill\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { FILTER_INPUT_DEBOUNCE_MS, FilterBarContext } from \"./filter-bar-context\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type FilterBarMultiFilterMode = Extract<FilterMode, \"include\" | \"exclude\">;\n\n// mergeMultiSelectOptions concatenates two option lists, deduping by value with\n// the first list (the head) taking precedence on ordering and label.\nexport function mergeMultiSelectOptions(\n  head: MultiSelectOption[],\n  extra: MultiSelectOption[],\n): MultiSelectOption[] {\n  if (extra.length === 0) return head;\n  const seen = new Set(head.map((o) => o.value));\n  const merged = [...head];\n  for (const option of extra) {\n    if (!seen.has(option.value)) {\n      seen.add(option.value);\n      merged.push(option);\n    }\n  }\n  return merged;\n}\n\nexport function multiSelectOptionText(option: MultiSelectOption) {\n  const label = typeof option.label === \"string\" ? option.label : \"\";\n  return [option.value, label, option.title ?? \"\"].filter(Boolean).join(\" \");\n}\n\nexport function summarizeMultiFilter(\n  label: string,\n  value: Record<string, FilterBarMultiFilterMode>,\n): string {\n  const includeCount = Object.values(value).filter((mode) => mode === \"include\").length;\n  const excludeCount = Object.values(value).filter((mode) => mode === \"exclude\").length;\n\n  if (includeCount === 0 && excludeCount === 0) {\n    return label;\n  }\n\n  const counts = [\n    includeCount > 0 ? `+${includeCount}` : null,\n    excludeCount > 0 ? `-${excludeCount}` : null,\n  ].filter(Boolean);\n\n  return `${label} ${counts.join(\" \")}`;\n}\n\nexport function useDebouncedMultiDraft(\n  value: Record<string, FilterBarMultiFilterMode>,\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void,\n) {\n  const { autoSubmit } = useContext(FilterBarContext);\n  const [draft, setDraft] = useState(value);\n  const latestOnChange = useRef(onChange);\n  const latestValue = useRef(value);\n  const valueKey = multiFilterValueKey(value);\n\n  useEffect(() => {\n    latestOnChange.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    if (!sameMultiFilterValue(latestValue.current, value)) {\n      latestValue.current = value;\n      setDraft(value);\n      return;\n    }\n    latestValue.current = value;\n  }, [valueKey, value]);\n\n  useEffect(() => {\n    if (sameMultiFilterValue(draft, value)) return;\n\n    if (!autoSubmit) {\n      latestOnChange.current(draft);\n      return;\n    }\n\n    const timeoutId = window.setTimeout(() => {\n      latestOnChange.current(draft);\n    }, FILTER_INPUT_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timeoutId);\n  }, [autoSubmit, draft, valueKey]);\n\n  return [draft, setDraft] as const;\n}\n\nfunction multiFilterValueKey(value: Record<string, FilterBarMultiFilterMode>): string {\n  return Object.keys(value)\n    .sort()\n    .map((key) => `${key}:${value[key]}`)\n    .join(\"\\u0000\");\n}\n\nfunction sameMultiFilterValue(\n  a: Record<string, FilterBarMultiFilterMode>,\n  b: Record<string, FilterBarMultiFilterMode>,\n) {\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (a[key] !== b[key]) return false;\n  }\n  return true;\n}\n\nexport function updateMultiFilterValue(\n  current: Record<string, FilterBarMultiFilterMode>,\n  optionValue: string,\n  nextMode: FilterMode,\n): Record<string, FilterBarMultiFilterMode> {\n  const next = { ...current };\n\n  if (nextMode === \"neutral\") {\n    delete next[optionValue];\n    return next;\n  }\n\n  if (nextMode === \"include\" || nextMode === \"exclude\") {\n    next[optionValue] = nextMode;\n  }\n\n  return next;\n}\n\nexport function nextFilterMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\n// sizedIcon constrains a filter icon to `px`. A node icon (e.g. a lucide\n// component, which otherwise renders at its own default 24px) is cloned with an\n// explicit inline width/height — done in clicky-ui via a real style so it never\n// depends on a Tailwind arbitrary class being generated in the consumer's build.\n// A string (runtime/iconify) icon is returned as-is and sized by the wrapper's\n// font-size. An existing inline size on the node wins (consumer override).\nexport function sizedIcon(icon: LabelIconSpec | undefined, px: number): LabelIconSpec | undefined {\n  if (!isValidElement(icon)) return icon;\n  const el = icon as ReactElement<{ style?: CSSProperties }>;\n  return cloneElement(el, {\n    style: { width: `${px}px`, height: `${px}px`, ...el.props.style },\n  });\n}\n\n// comboboxLabelProps maps a filter to the Combobox `label`/`ariaLabel`: when the\n// filter carries an `icon`, the icon replaces the inline text label (with the\n// field name kept as tooltip + accessible name); otherwise the text label shows.\n// clicky-ui owns the size (10px default) — the consumer supplies only the icon\n// and its colour.\nexport function comboboxLabelProps(filter: { icon?: LabelIconSpec; label: string }): {\n  label: ReactNode;\n  ariaLabel?: string;\n} {\n  if (filter.icon == null) return { label: filter.label };\n  return {\n    label: (\n      <span title={filter.label} className=\"inline-flex items-center text-[10px]\">\n        <LabelIcon icon={sizedIcon(filter.icon, 10)} className=\"normal-case\" />\n      </span>\n    ),\n    ariaLabel: filter.label,\n  };\n}\n\nexport function lookupFieldWidthClass(grow: boolean) {\n  return grow ? \"min-w-[12rem] max-w-[18rem] flex-1\" : \"min-w-[11rem] max-w-[15rem] shrink-0\";\n}\n"],"mappings":"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"}
+{"version":3,"file":"filter-bar-field-utils.cjs","names":["useContext","FilterBarContext","useState","useRef","isValidElement","cloneElement","LabelIcon"],"sources":["../../src/components/filter-bar-field-utils.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport type { FilterMode } from \"../data/FilterPill\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { FILTER_INPUT_DEBOUNCE_MS, FilterBarContext } from \"./filter-bar-context\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type FilterBarMultiFilterMode = Extract<FilterMode, \"include\" | \"exclude\">;\n\n// mergeMultiSelectOptions concatenates two option lists, deduping by value with\n// the first list (the head) taking precedence on ordering and label.\nexport function mergeMultiSelectOptions(\n  head: MultiSelectOption[],\n  extra: MultiSelectOption[],\n): MultiSelectOption[] {\n  if (extra.length === 0) return head;\n  const seen = new Set(head.map((o) => o.value));\n  const merged = [...head];\n  for (const option of extra) {\n    if (!seen.has(option.value)) {\n      seen.add(option.value);\n      merged.push(option);\n    }\n  }\n  return merged;\n}\n\nexport function multiSelectOptionText(option: MultiSelectOption) {\n  const label = typeof option.label === \"string\" ? option.label : \"\";\n  return [option.value, label, option.title ?? \"\"].filter(Boolean).join(\" \");\n}\n\nexport function summarizeMultiFilter(\n  label: string,\n  value: Record<string, FilterBarMultiFilterMode>,\n): string {\n  const includeCount = Object.values(value).filter((mode) => mode === \"include\").length;\n  const excludeCount = Object.values(value).filter((mode) => mode === \"exclude\").length;\n\n  if (includeCount === 0 && excludeCount === 0) {\n    return label;\n  }\n\n  const counts = [\n    includeCount > 0 ? `+${includeCount}` : null,\n    excludeCount > 0 ? `-${excludeCount}` : null,\n  ].filter(Boolean);\n\n  return `${label} ${counts.join(\" \")}`;\n}\n\nexport function useDebouncedMultiDraft(\n  value: Record<string, FilterBarMultiFilterMode>,\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void,\n) {\n  const { autoSubmit } = useContext(FilterBarContext);\n  const [draft, setDraft] = useState(value);\n  const latestOnChange = useRef(onChange);\n  const latestValue = useRef(value);\n  const valueKey = multiFilterValueKey(value);\n\n  useEffect(() => {\n    latestOnChange.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    const externalChange = !sameMultiFilterValue(latestValue.current, value);\n    latestValue.current = value;\n    if (externalChange) {\n      setDraft(value);\n      return;\n    }\n    if (sameMultiFilterValue(draft, value)) return;\n\n    if (!autoSubmit) {\n      latestOnChange.current(draft);\n      return;\n    }\n\n    const timeoutId = window.setTimeout(() => {\n      latestOnChange.current(draft);\n    }, FILTER_INPUT_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timeoutId);\n  }, [autoSubmit, draft, valueKey]);\n\n  return [draft, setDraft] as const;\n}\n\nfunction multiFilterValueKey(value: Record<string, FilterBarMultiFilterMode>): string {\n  return Object.keys(value)\n    .sort()\n    .map((key) => `${key}:${value[key]}`)\n    .join(\"\\u0000\");\n}\n\nfunction sameMultiFilterValue(\n  a: Record<string, FilterBarMultiFilterMode>,\n  b: Record<string, FilterBarMultiFilterMode>,\n) {\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (a[key] !== b[key]) return false;\n  }\n  return true;\n}\n\nexport function updateMultiFilterValue(\n  current: Record<string, FilterBarMultiFilterMode>,\n  optionValue: string,\n  nextMode: FilterMode,\n): Record<string, FilterBarMultiFilterMode> {\n  const next = { ...current };\n\n  if (nextMode === \"neutral\") {\n    delete next[optionValue];\n    return next;\n  }\n\n  if (nextMode === \"include\" || nextMode === \"exclude\") {\n    next[optionValue] = nextMode;\n  }\n\n  return next;\n}\n\nexport function nextFilterMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\n// sizedIcon constrains a filter icon to `px`. A node icon (e.g. a lucide\n// component, which otherwise renders at its own default 24px) is cloned with an\n// explicit inline width/height — done in clicky-ui via a real style so it never\n// depends on a Tailwind arbitrary class being generated in the consumer's build.\n// A string (runtime/iconify) icon is returned as-is and sized by the wrapper's\n// font-size. An existing inline size on the node wins (consumer override).\nexport function sizedIcon(icon: LabelIconSpec | undefined, px: number): LabelIconSpec | undefined {\n  if (!isValidElement(icon)) return icon;\n  const el = icon as ReactElement<{ style?: CSSProperties }>;\n  return cloneElement(el, {\n    style: { width: `${px}px`, height: `${px}px`, ...el.props.style },\n  });\n}\n\n// comboboxLabelProps maps a filter to the Combobox `label`/`ariaLabel`: when the\n// filter carries an `icon`, the icon replaces the inline text label (with the\n// field name kept as tooltip + accessible name); otherwise the text label shows.\n// clicky-ui owns the size (10px default) — the consumer supplies only the icon\n// and its colour.\nexport function comboboxLabelProps(filter: { icon?: LabelIconSpec; label: string }): {\n  label: ReactNode;\n  ariaLabel?: string;\n} {\n  if (filter.icon == null) return { label: filter.label };\n  return {\n    label: (\n      <span title={filter.label} className=\"inline-flex items-center text-[10px]\">\n        <LabelIcon icon={sizedIcon(filter.icon, 10)} className=\"normal-case\" />\n      </span>\n    ),\n    ariaLabel: filter.label,\n  };\n}\n\nexport function lookupFieldWidthClass(grow: boolean) {\n  return grow ? \"min-w-[12rem] max-w-[18rem] flex-1\" : \"min-w-[11rem] max-w-[15rem] shrink-0\";\n}\n"],"mappings":"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"}

package/dist/components/filter-bar-field-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar-field-utils.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-field-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAIlF,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,iBAAiB,EAAE,EACzB,KAAK,EAAE,iBAAiB,EAAE,GACzB,iBAAiB,EAAE,CAWrB;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,UAG9D;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,GAC9C,MAAM,CAcR;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,EAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,2JAqCpE;AAsBD,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,EACjD,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,UAAU,GACnB,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAa1C;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,CAI3D;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAMhG;AAOD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IAAE,IAAI,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IACnF,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAUA;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,OAAO,iFAElD"}
+{"version":3,"file":"filter-bar-field-utils.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-field-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAIlF,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,iBAAiB,EAAE,EACzB,KAAK,EAAE,iBAAiB,EAAE,GACzB,iBAAiB,EAAE,CAWrB;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,UAG9D;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,GAC9C,MAAM,CAcR;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,EAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,2JAkCpE;AAsBD,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,EACjD,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,UAAU,GACnB,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAa1C;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,CAI3D;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAMhG;AAOD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IAAE,IAAI,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IACnF,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAUA;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,OAAO,iFAElD"}

package/dist/components/filter-bar-field-utils.js

@@ -37,14 +37,12 @@ function useDebouncedMultiDraft(value, onChange) {
 		latestOnChange.current = onChange;
 	}, [onChange]);
 	useEffect(() => {
-		if (!sameMultiFilterValue(latestValue.current, value)) {
-			latestValue.current = value;
+		const externalChange = !sameMultiFilterValue(latestValue.current, value);
+		latestValue.current = value;
+		if (externalChange) {
 			setDraft(value);
 			return;
 		}
-		latestValue.current = value;
-	}, [valueKey, value]);
-	useEffect(() => {
 		if (sameMultiFilterValue(draft, value)) return;
 		if (!autoSubmit) {
 			latestOnChange.current(draft);