@flanksource/clicky-ui 0.3.32 → 0.3.34

package/dist/components/RangeSlider.cjs

@@ -11,65 +11,128 @@ function RangeSlider({
   step = 1,
   ariaLabelMin = "Minimum value",
   ariaLabelMax = "Maximum value",
+  editable = false,
   className,
   trackClassName,
   rangeClassName,
   thumbClassName: thumbOverrideClassName
 }) {
   const [lower, upper] = normalizeRangeValue(value, min, max);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative h-6", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: utils.cn(
-          "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border",
-          trackClassName
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: 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)}%`
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(editable && "space-y-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: utils.cn(
+            "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border",
+            trackClassName
+          )
         }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "range",
-        "aria-label": ariaLabelMin,
-        min,
-        max,
-        step,
-        value: lower,
-        className: utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
-        style: { zIndex: lower >= max ? 30 : 20 },
-        onChange: (event) => {
-          const nextLower = clampNumber(Number(event.target.value), min, max);
-          onChange([Math.min(nextLower, upper), upper]);
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: 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)}%`
+          }
         }
-      }
-    ),
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "range",
+          "aria-label": ariaLabelMin,
+          min,
+          max,
+          step,
+          value: lower,
+          className: utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+          style: { zIndex: lower >= max ? 30 : 20 },
+          onChange: (event) => {
+            const nextLower = clampNumber(Number(event.target.value), min, max);
+            onChange([Math.min(nextLower, upper), upper]);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "range",
+          "aria-label": ariaLabelMax,
+          min,
+          max,
+          step,
+          value: upper,
+          className: utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+          onChange: (event) => {
+            const nextUpper = clampNumber(Number(event.target.value), min, max);
+            onChange([lower, Math.max(nextUpper, lower)]);
+          }
+        }
+      )
+    ] }),
+    editable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EditableBound,
+        {
+          label: "Min",
+          ariaLabel: `Edit ${lowercaseFirst(ariaLabelMin)}`,
+          min,
+          max: upper,
+          step,
+          stepBase: min,
+          value: lower,
+          onChange: (next) => onChange([next, upper])
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EditableBound,
+        {
+          label: "Max",
+          ariaLabel: `Edit ${lowercaseFirst(ariaLabelMax)}`,
+          min: lower,
+          max,
+          step,
+          stepBase: min,
+          value: upper,
+          onChange: (next) => onChange([lower, next])
+        }
+      )
+    ] }) : null
+  ] });
+}
+function EditableBound({
+  label,
+  ariaLabel,
+  min,
+  max,
+  step,
+  stepBase,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
-        type: "range",
-        "aria-label": ariaLabelMax,
-        min,
+        "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",
         max,
+        min,
         step,
-        value: upper,
-        className: utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+        type: "number",
+        value,
         onChange: (event) => {
-          const nextUpper = clampNumber(Number(event.target.value), min, max);
-          onChange([lower, Math.max(nextUpper, lower)]);
+          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, { base: stepBase, step, min, max }));
         }
       }
     )
@@ -84,9 +147,23 @@ function normalizeRangeValue(value, min, max) {
 function clampNumber(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
+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);
+}
 exports.RangeSlider = RangeSlider;
 //# sourceMappingURL=RangeSlider.cjs.map

package/dist/components/RangeSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.cjs","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  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  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(\"relative h-6\", className)}>\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  );\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\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n"],"names":["cn","jsx"],"mappings":";;;;AAkBA,MAAM,iBACJ;AAEK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAqB;AACnB,QAAM,CAAC,OAAO,KAAK,IAAI,oBAAoB,OAAO,KAAK,GAAG;AAE1D,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,gBAAgB,SAAS,GAC1C,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEFC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,MAAM,GAAG,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,UACxC,OAAO,GAAG,MAAM,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,QAAA;AAAA,MACjD;AAAA,IAAA;AAAA,IAEFC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,WAAWD,MAAAA,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,QACzE,OAAO,EAAE,QAAQ,SAAS,MAAM,KAAK,GAAA;AAAA,QACrC,UAAU,CAAC,UAAU;AACnB,gBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,mBAAS,CAAC,KAAK,IAAI,WAAW,KAAK,GAAG,KAAK,CAAC;AAAA,QAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,WAAWD,MAAAA,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,QACzE,UAAU,CAAC,UAAU;AACnB,gBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,mBAAS,CAAC,OAAO,KAAK,IAAI,WAAW,KAAK,CAAC,CAAC;AAAA,QAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,sBACJ;AAEF,SAAS,oBAAoB,OAAyB,KAAa,KAA+B;AAChG,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,SAAO,CAAC,OAAO,KAAK;AACtB;AAEA,SAAS,YAAY,OAAe,KAAa,KAAa;AAC5D,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,eAAe,OAAe,KAAa,KAAa;AAC/D,MAAI,OAAO,IAAK,QAAO;AACvB,UAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;;"}
+{"version":3,"file":"RangeSlider.cjs","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"],"names":["cn","jsxs","jsx"],"mappings":"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"}

package/dist/components/RangeSlider.d.ts

@@ -7,10 +7,12 @@ export type RangeSliderProps = {
     step?: number;
     ariaLabelMin?: string;
     ariaLabelMax?: string;
+    /** Shows number fields below the track for exact keyboard entry. */
+    editable?: boolean;
     className?: string;
     trackClassName?: string;
     rangeClassName?: string;
     thumbClassName?: string;
 };
-export declare function RangeSlider({ min, max, value, onChange, step, ariaLabelMin, ariaLabelMax, className, trackClassName, rangeClassName, thumbClassName: thumbOverrideClassName, }: RangeSliderProps): import("react").JSX.Element;
+export declare function RangeSlider({ min, max, value, onChange, step, ariaLabelMin, ariaLabelMax, editable, className, trackClassName, rangeClassName, thumbClassName: thumbOverrideClassName, }: RangeSliderProps): import("react").JSX.Element;
 //# sourceMappingURL=RangeSlider.d.ts.map

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,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,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EAAE,sBAAsB,GACvC,EAAE,gBAAgB,+BAkDlB"}
+{"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"}

package/dist/components/RangeSlider.js

@@ -9,65 +9,128 @@ function RangeSlider({
   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", { className: cn("relative h-6", className), 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 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)}%`
+  return /* @__PURE__ */ jsxs("div", { className: cn(editable && "space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative h-6", 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(
-      "input",
-      {
-        type: "range",
-        "aria-label": ariaLabelMin,
-        min,
-        max,
-        step,
-        value: lower,
-        className: cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
-        style: { zIndex: lower >= max ? 30 : 20 },
-        onChange: (event) => {
-          const nextLower = clampNumber(Number(event.target.value), min, max);
-          onChange([Math.min(nextLower, upper), upper]);
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: 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)}%`
+          }
         }
-      }
-    ),
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          "aria-label": ariaLabelMin,
+          min,
+          max,
+          step,
+          value: lower,
+          className: cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+          style: { zIndex: lower >= max ? 30 : 20 },
+          onChange: (event) => {
+            const nextLower = clampNumber(Number(event.target.value), min, max);
+            onChange([Math.min(nextLower, upper), upper]);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          "aria-label": ariaLabelMax,
+          min,
+          max,
+          step,
+          value: upper,
+          className: cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+          onChange: (event) => {
+            const nextUpper = clampNumber(Number(event.target.value), min, max);
+            onChange([lower, Math.max(nextUpper, lower)]);
+          }
+        }
+      )
+    ] }),
+    editable ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx(
+        EditableBound,
+        {
+          label: "Min",
+          ariaLabel: `Edit ${lowercaseFirst(ariaLabelMin)}`,
+          min,
+          max: upper,
+          step,
+          stepBase: min,
+          value: lower,
+          onChange: (next) => onChange([next, upper])
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableBound,
+        {
+          label: "Max",
+          ariaLabel: `Edit ${lowercaseFirst(ariaLabelMax)}`,
+          min: lower,
+          max,
+          step,
+          stepBase: min,
+          value: upper,
+          onChange: (next) => onChange([lower, next])
+        }
+      )
+    ] }) : null
+  ] });
+}
+function EditableBound({
+  label,
+  ariaLabel,
+  min,
+  max,
+  step,
+  stepBase,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("label", { 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",
       {
-        type: "range",
-        "aria-label": ariaLabelMax,
-        min,
+        "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",
         max,
+        min,
         step,
-        value: upper,
-        className: cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+        type: "number",
+        value,
         onChange: (event) => {
-          const nextUpper = clampNumber(Number(event.target.value), min, max);
-          onChange([lower, Math.max(nextUpper, lower)]);
+          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, { base: stepBase, step, min, max }));
         }
       }
     )
@@ -82,10 +145,24 @@ function normalizeRangeValue(value, min, max) {
 function clampNumber(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
+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);
+}
 export {
   RangeSlider
 };

package/dist/components/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","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  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  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(\"relative h-6\", className)}>\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  );\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\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n"],"names":[],"mappings":";;AAkBA,MAAM,iBACJ;AAEK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAqB;AACnB,QAAM,CAAC,OAAO,KAAK,IAAI,oBAAoB,OAAO,KAAK,GAAG;AAE1D,8BACG,OAAA,EAAI,WAAW,GAAG,gBAAgB,SAAS,GAC1C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,MAAM,GAAG,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,UACxC,OAAO,GAAG,MAAM,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,QAAA;AAAA,MACjD;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,WAAW,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,QACzE,OAAO,EAAE,QAAQ,SAAS,MAAM,KAAK,GAAA;AAAA,QACrC,UAAU,CAAC,UAAU;AACnB,gBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,mBAAS,CAAC,KAAK,IAAI,WAAW,KAAK,GAAG,KAAK,CAAC;AAAA,QAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,WAAW,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,QACzE,UAAU,CAAC,UAAU;AACnB,gBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,mBAAS,CAAC,OAAO,KAAK,IAAI,WAAW,KAAK,CAAC,CAAC;AAAA,QAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,sBACJ;AAEF,SAAS,oBAAoB,OAAyB,KAAa,KAA+B;AAChG,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,SAAO,CAAC,OAAO,KAAK;AACtB;AAEA,SAAS,YAAY,OAAe,KAAa,KAAa;AAC5D,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,eAAe,OAAe,KAAa,KAAa;AAC/D,MAAI,OAAO,IAAK,QAAO;AACvB,UAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;"}
+{"version":3,"file":"RangeSlider.js","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"],"names":[],"mappings":"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"}

package/dist/components/SecretKeySelector.cjs

@@ -11,8 +11,8 @@ const UiEdit = require("../icons/components/UiEdit.cjs");
 const DEFAULT_SOURCES = ["secret", "configmap", "value"];
 const SHRINKABLE_FIELD = "max-w-full min-w-0 shrink";
 const SOURCE_FIELD = `${SHRINKABLE_FIELD} basis-40 grow-0`;
-const RESOURCE_FIELD = `${SHRINKABLE_FIELD} basis-40 grow-0`;
-const KEY_FIELD = `${SHRINKABLE_FIELD} basis-72 grow`;
+const RESOURCE_FIELD = `${SHRINKABLE_FIELD} w-full basis-auto grow-0 @min-[22rem]/secret:basis-40`;
+const KEY_FIELD = `${SHRINKABLE_FIELD} w-full basis-auto grow @min-[22rem]/secret:basis-72`;
 const VALUE_FIELD = `${SHRINKABLE_FIELD} basis-64 grow`;
 function SecretKeySelector({
   value,
@@ -126,7 +126,7 @@ function SecretKeySelector({
     "div",
     {
       "data-slot": "secret-key-selector",
-      className: utils.cn("@container w-full min-w-0", className),
+      className: utils.cn("@container/secret w-full min-w-0", className),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -213,7 +213,7 @@ function SecretKeySelector({
               "div",
               {
                 className: utils.cn(
-                  "flex flex-nowrap items-center gap-2",
+                  "flex flex-col items-center gap-2 @min-[22rem]/secret:flex-row",
                   SHRINKABLE_FIELD,
                   "grow"
                 ),