@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/numberInput/NumberInput.js

@@ -2,10 +2,15 @@
 import * as React from "react";
 import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronUp, ChevronDown } from "lucide-react";
+import { ChevronUp, ChevronDown, Minus, Plus } from "lucide-react";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { numberInputPropDefs } from "./numberInput.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+function decimalPlaces(nextValue) {
+  if (!Number.isFinite(nextValue)) return 0;
+  const [, fraction = ""] = String(nextValue).split(".");
+  return fraction.length;
+}
 const NumberInput = React.forwardRef((props, forwardedRef) => {
   const {
     asChild,
@@ -15,6 +20,10 @@ const NumberInput = React.forwardRef((props, forwardedRef) => {
     radius,
     size = "md",
     step = 1,
+    largeStep = step * 10,
+    smallStep = step / 10,
+    stepperLayout = "stacked",
+    stepperIcon = "chevrons",
     variant = "surface",
     value: controlledValue,
     defaultValue,
@@ -22,6 +31,8 @@ const NumberInput = React.forwardRef((props, forwardedRef) => {
     ...inputProps
   } = extractProps(props, numberInputPropDefs);
   const Comp = asChild ? Slot : "input";
+  const StepUpIcon = stepperIcon === "minus-plus" ? Plus : ChevronUp;
+  const StepDownIcon = stepperIcon === "minus-plus" ? Minus : ChevronDown;
   const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolledValue;
@@ -31,18 +42,67 @@ const NumberInput = React.forwardRef((props, forwardedRef) => {
     }
     onChange?.(nextValue);
   }, [isControlled, onChange]);
-  const increment = React.useCallback(() => {
+  const roundStep = React.useCallback((nextValue) => {
+    const precision = Math.max(decimalPlaces(step), decimalPlaces(largeStep), decimalPlaces(smallStep));
+    return Number(nextValue.toFixed(Math.min(precision, 12)));
+  }, [step, largeStep, smallStep]);
+  const clampValue = React.useCallback((nextValue) => {
+    if (nextValue === void 0) return nextValue;
+    if (min !== void 0 && nextValue < min) return min;
+    if (max !== void 0 && nextValue > max) return max;
+    return nextValue;
+  }, [min, max]);
+  const increment = React.useCallback((by = step) => {
     const current = value ?? 0;
-    const next = current + step;
-    if (max !== void 0 && next > max) return;
+    const next = roundStep(current + by);
+    if (max !== void 0 && next > max) {
+      setValue(max);
+      return;
+    }
     setValue(next);
-  }, [value, step, max, setValue]);
-  const decrement = React.useCallback(() => {
+  }, [value, step, max, roundStep, setValue]);
+  const decrement = React.useCallback((by = step) => {
     const current = value ?? 0;
-    const next = current - step;
-    if (min !== void 0 && next < min) return;
+    const next = roundStep(current - by);
+    if (min !== void 0 && next < min) {
+      setValue(min);
+      return;
+    }
     setValue(next);
-  }, [value, step, min, setValue]);
+  }, [value, step, min, roundStep, setValue]);
+  const handleBlur = React.useCallback((e) => {
+    setValue(clampValue(value));
+    inputProps.onBlur?.(e);
+  }, [clampValue, setValue, value]);
+  const stepBy = React.useCallback((e, direction) => {
+    const by = e.shiftKey ? largeStep : e.altKey ? smallStep : step;
+    if (direction === "up") {
+      increment(by);
+    } else {
+      decrement(by);
+    }
+  }, [decrement, increment, largeStep, smallStep, step]);
+  const handleKeyDown = React.useCallback((e) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const by = e.shiftKey ? largeStep : e.altKey ? smallStep : step;
+      if (e.key === "ArrowUp") {
+        increment(by);
+      } else {
+        decrement(by);
+      }
+    } else if (e.key === "PageUp" || e.key === "PageDown") {
+      e.preventDefault();
+      if (e.key === "PageUp") {
+        increment(largeStep);
+      } else {
+        decrement(largeStep);
+      }
+    } else if (e.key === "Enter") {
+      setValue(clampValue(value));
+    }
+    inputProps.onKeyDown?.(e);
+  }, [clampValue, decrement, increment, largeStep, setValue, smallStep, step, value]);
   const handleChange = React.useCallback((e) => {
     const raw = e.target.value;
     if (raw === "" || raw === "-") {
@@ -57,11 +117,26 @@ const NumberInput = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "dsx-number-input",
+      className: classNames("dsx-number-input", stepperLayout === "split" && "dsx-number-input--split"),
       "data-radius": radius,
       "data-size": size,
+      "data-stepper-layout": stepperLayout,
       "data-variant": variant,
       children: /* @__PURE__ */ jsxs("div", { className: "dsx-input-shell dsx-number-input__shell", children: [
+        stepperLayout === "split" ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            className: "dsx-number-input__step-down",
+            onClick: (e) => stepBy(e, "down"),
+            "aria-label": "Decrease value",
+            title: `Decrease value (Shift+click: -${largeStep}, Alt+click: -${smallStep})`,
+            disabled: min !== void 0 && value !== void 0 && value <= min,
+            "data-slot": "number-input-step-down",
+            children: /* @__PURE__ */ jsx(StepDownIcon, { size: 16 })
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           Comp,
           {
@@ -71,22 +146,38 @@ const NumberInput = React.forwardRef((props, forwardedRef) => {
             inputMode: "decimal",
             value: value ?? "",
             onChange: handleChange,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
             className: classNames("dsx-number-input__input", className),
             "data-slot": "number-input"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "dsx-number-input__stepper", children: [
+        stepperLayout === "split" ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            className: "dsx-number-input__step-up",
+            onClick: (e) => stepBy(e, "up"),
+            "aria-label": "Increase value",
+            title: `Increase value (Shift+click: +${largeStep}, Alt+click: +${smallStep})`,
+            disabled: max !== void 0 && value !== void 0 && value >= max,
+            "data-slot": "number-input-step-up",
+            children: /* @__PURE__ */ jsx(StepUpIcon, { size: 16 })
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "dsx-number-input__stepper", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               tabIndex: -1,
               className: "dsx-number-input__step-up",
-              onClick: increment,
+              onClick: (e) => stepBy(e, "up"),
               "aria-label": "Increase value",
+              title: `Increase value (Shift+click: +${largeStep}, Alt+click: +${smallStep})`,
               disabled: max !== void 0 && value !== void 0 && value >= max,
               "data-slot": "number-input-step-up",
-              children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 })
+              children: /* @__PURE__ */ jsx(StepUpIcon, { size: 14 })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -95,11 +186,12 @@ const NumberInput = React.forwardRef((props, forwardedRef) => {
               type: "button",
               tabIndex: -1,
               className: "dsx-number-input__step-down",
-              onClick: decrement,
+              onClick: (e) => stepBy(e, "down"),
               "aria-label": "Decrease value",
+              title: `Decrease value (Shift+click: -${largeStep}, Alt+click: -${smallStep})`,
               disabled: min !== void 0 && value !== void 0 && value <= min,
               "data-slot": "number-input-step-down",
-              children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+              children: /* @__PURE__ */ jsx(StepDownIcon, { size: 14 })
             }
           )
         ] })

package/dist/components/numberInput/NumberInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/numberInput/NumberInput.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronUp, ChevronDown } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { numberInputPropDefs } from './numberInput.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NumberInputOwnProps = GetPropDefTypes<typeof numberInputPropDefs> & {\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  onChange?: (value: number | undefined) => void\n}\n\ninterface NumberInputProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step' | 'size'>,\n    NumberInputOwnProps {}\n\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    min,\n    max,\n    radius,\n    size = 'md',\n    step = 1,\n    variant = 'surface',\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    ...inputProps\n  } = extractProps(props, numberInputPropDefs)\n  const Comp = asChild ? Slot : 'input'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<number | undefined>(defaultValue)\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const setValue = React.useCallback((nextValue: number | undefined) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }, [isControlled, onChange])\n\n  const increment = React.useCallback(() => {\n    const current = value ?? 0\n    const next = current + step\n    if (max !== undefined && next > max) return\n    setValue(next)\n  }, [value, step, max, setValue])\n\n  const decrement = React.useCallback(() => {\n    const current = value ?? 0\n    const next = current - step\n    if (min !== undefined && next < min) return\n    setValue(next)\n  }, [value, step, min, setValue])\n\n  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value\n    if (raw === '' || raw === '-') {\n      setValue(undefined)\n      return\n    }\n    const parsed = parseFloat(raw)\n    if (!isNaN(parsed)) {\n      setValue(parsed)\n    }\n  }, [setValue])\n\n  return (\n    <div\n      className=\"dsx-number-input\"\n      data-radius={radius}\n      data-size={size}\n      data-variant={variant}\n    >\n      <div className=\"dsx-input-shell dsx-number-input__shell\">\n        <Comp\n          {...inputProps}\n          ref={forwardedRef}\n          type=\"text\"\n          inputMode=\"decimal\"\n          value={value ?? ''}\n          onChange={handleChange}\n          className={classNames('dsx-number-input__input', className)}\n          data-slot=\"number-input\"\n        />\n        <div className=\"dsx-number-input__stepper\">\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"dsx-number-input__step-up\"\n            onClick={increment}\n            aria-label=\"Increase value\"\n            disabled={max !== undefined && value !== undefined && value >= max}\n            data-slot=\"number-input-step-up\"\n          >\n            <ChevronUp size={14} />\n          </button>\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"dsx-number-input__step-down\"\n            onClick={decrement}\n            aria-label=\"Decrease value\"\n            disabled={min !== undefined && value !== undefined && value <= min}\n            data-slot=\"number-input-step-down\"\n          >\n            <ChevronDown size={14} />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n})\nNumberInput.displayName = 'NumberInput'\n\nexport { NumberInput }\nexport type { NumberInputOwnProps, NumberInputProps }\n"],
-  "mappings": ";AAEA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAS,WAAW,mBAAmB;AAEvC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AA+E5B,cAUA,YAVA;AA9DR,MAAM,cAAc,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAChG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,mBAAmB;AAC3C,QAAM,OAAO,UAAU,OAAO;AAE9B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAA6B,YAAY;AACjG,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAE/C,QAAM,WAAW,MAAM,YAAY,CAAC,cAAkC;AACpE,QAAI,CAAC,cAAc;AACjB,2BAAqB,SAAS;AAAA,IAChC;AACA,eAAW,SAAS;AAAA,EACtB,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,QAAM,YAAY,MAAM,YAAY,MAAM;AACxC,UAAM,UAAU,SAAS;AACzB,UAAM,OAAO,UAAU;AACvB,QAAI,QAAQ,UAAa,OAAO,IAAK;AACrC,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC;AAE/B,QAAM,YAAY,MAAM,YAAY,MAAM;AACxC,UAAM,UAAU,SAAS;AACzB,UAAM,OAAO,UAAU;AACvB,QAAI,QAAQ,UAAa,OAAO,IAAK;AACrC,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC;AAE/B,QAAM,eAAe,MAAM,YAAY,CAAC,MAA2C;AACjF,UAAM,MAAM,EAAE,OAAO;AACrB,QAAI,QAAQ,MAAM,QAAQ,KAAK;AAC7B,eAAS,MAAS;AAClB;AAAA,IACF;AACA,UAAM,SAAS,WAAW,GAAG;AAC7B,QAAI,CAAC,MAAM,MAAM,GAAG;AAClB,eAAS,MAAM;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEd,+BAAC,SAAI,WAAU,2CACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,KAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAO,SAAS;AAAA,YAChB,UAAU;AAAA,YACV,WAAW,WAAW,2BAA2B,SAAS;AAAA,YAC1D,aAAU;AAAA;AAAA,QACZ;AAAA,QACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,WAAU;AAAA,cACV,SAAS;AAAA,cACT,cAAW;AAAA,cACX,UAAU,QAAQ,UAAa,UAAU,UAAa,SAAS;AAAA,cAC/D,aAAU;AAAA,cAEV,8BAAC,aAAU,MAAM,IAAI;AAAA;AAAA,UACvB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,WAAU;AAAA,cACV,SAAS;AAAA,cACT,cAAW;AAAA,cACX,UAAU,QAAQ,UAAa,UAAU,UAAa,SAAS;AAAA,cAC/D,aAAU;AAAA,cAEV,8BAAC,eAAY,MAAM,IAAI;AAAA;AAAA,UACzB;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,YAAY,cAAc;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronUp, ChevronDown, Minus, Plus } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { numberInputPropDefs } from './numberInput.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NumberInputOwnProps = GetPropDefTypes<typeof numberInputPropDefs> & {\n  min?: number\n  max?: number\n  step?: number\n  largeStep?: number\n  smallStep?: number\n  value?: number\n  defaultValue?: number\n  onChange?: (value: number | undefined) => void\n}\n\ninterface NumberInputProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step' | 'size'>,\n    NumberInputOwnProps {}\n\nfunction decimalPlaces(nextValue: number) {\n  if (!Number.isFinite(nextValue)) return 0\n  const [, fraction = ''] = String(nextValue).split('.')\n  return fraction.length\n}\n\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    min,\n    max,\n    radius,\n    size = 'md',\n    step = 1,\n    largeStep = step * 10,\n    smallStep = step / 10,\n    stepperLayout = 'stacked',\n    stepperIcon = 'chevrons',\n    variant = 'surface',\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    ...inputProps\n  } = extractProps(props, numberInputPropDefs)\n  const Comp = asChild ? Slot : 'input'\n\n  const StepUpIcon = stepperIcon === 'minus-plus' ? Plus : ChevronUp\n  const StepDownIcon = stepperIcon === 'minus-plus' ? Minus : ChevronDown\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<number | undefined>(defaultValue)\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const setValue = React.useCallback((nextValue: number | undefined) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }, [isControlled, onChange])\n\n  const roundStep = React.useCallback((nextValue: number) => {\n    const precision = Math.max(decimalPlaces(step), decimalPlaces(largeStep), decimalPlaces(smallStep))\n    return Number(nextValue.toFixed(Math.min(precision, 12)))\n  }, [step, largeStep, smallStep])\n\n  const clampValue = React.useCallback((nextValue: number | undefined) => {\n    if (nextValue === undefined) return nextValue\n    if (min !== undefined && nextValue < min) return min\n    if (max !== undefined && nextValue > max) return max\n    return nextValue\n  }, [min, max])\n\n  const increment = React.useCallback((by: number = step) => {\n    const current = value ?? 0\n    const next = roundStep(current + by)\n    if (max !== undefined && next > max) {\n      setValue(max)\n      return\n    }\n    setValue(next)\n  }, [value, step, max, roundStep, setValue])\n\n  const decrement = React.useCallback((by: number = step) => {\n    const current = value ?? 0\n    const next = roundStep(current - by)\n    if (min !== undefined && next < min) {\n      setValue(min)\n      return\n    }\n    setValue(next)\n  }, [value, step, min, roundStep, setValue])\n\n  const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    setValue(clampValue(value))\n    inputProps.onBlur?.(e)\n  }, [clampValue, setValue, value])\n\n  const stepBy = React.useCallback((e: React.MouseEvent, direction: 'up' | 'down') => {\n    const by = e.shiftKey ? largeStep : e.altKey ? smallStep : step\n    if (direction === 'up') {\n      increment(by)\n    } else {\n      decrement(by)\n    }\n  }, [decrement, increment, largeStep, smallStep, step])\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const by = e.shiftKey ? largeStep : e.altKey ? smallStep : step\n      if (e.key === 'ArrowUp') {\n        increment(by)\n      } else {\n        decrement(by)\n      }\n    } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n      e.preventDefault()\n      if (e.key === 'PageUp') {\n        increment(largeStep)\n      } else {\n        decrement(largeStep)\n      }\n    } else if (e.key === 'Enter') {\n      setValue(clampValue(value))\n    }\n    inputProps.onKeyDown?.(e)\n  }, [clampValue, decrement, increment, largeStep, setValue, smallStep, step, value])\n\n  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value\n    if (raw === '' || raw === '-') {\n      setValue(undefined)\n      return\n    }\n    const parsed = parseFloat(raw)\n    if (!isNaN(parsed)) {\n      setValue(parsed)\n    }\n  }, [setValue])\n\n  return (\n    <div\n      className={classNames('dsx-number-input', stepperLayout === 'split' && 'dsx-number-input--split')}\n      data-radius={radius}\n      data-size={size}\n      data-stepper-layout={stepperLayout}\n      data-variant={variant}\n    >\n      <div className=\"dsx-input-shell dsx-number-input__shell\">\n        {stepperLayout === 'split' ? (\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"dsx-number-input__step-down\"\n            onClick={(e) => stepBy(e, 'down')}\n            aria-label=\"Decrease value\"\n            title={`Decrease value (Shift+click: -${largeStep}, Alt+click: -${smallStep})`}\n            disabled={min !== undefined && value !== undefined && value <= min}\n            data-slot=\"number-input-step-down\"\n          >\n            <StepDownIcon size={16} />\n          </button>\n        ) : null}\n        <Comp\n          {...inputProps}\n          ref={forwardedRef}\n          type=\"text\"\n          inputMode=\"decimal\"\n          value={value ?? ''}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          className={classNames('dsx-number-input__input', className)}\n          data-slot=\"number-input\"\n        />\n        {stepperLayout === 'split' ? (\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"dsx-number-input__step-up\"\n            onClick={(e) => stepBy(e, 'up')}\n            aria-label=\"Increase value\"\n            title={`Increase value (Shift+click: +${largeStep}, Alt+click: +${smallStep})`}\n            disabled={max !== undefined && value !== undefined && value >= max}\n            data-slot=\"number-input-step-up\"\n          >\n            <StepUpIcon size={16} />\n          </button>\n        ) : (\n        <div className=\"dsx-number-input__stepper\">\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"dsx-number-input__step-up\"\n            onClick={(e) => stepBy(e, 'up')}\n            aria-label=\"Increase value\"\n            title={`Increase value (Shift+click: +${largeStep}, Alt+click: +${smallStep})`}\n            disabled={max !== undefined && value !== undefined && value >= max}\n            data-slot=\"number-input-step-up\"\n          >\n            <StepUpIcon size={14} />\n          </button>\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"dsx-number-input__step-down\"\n            onClick={(e) => stepBy(e, 'down')}\n            aria-label=\"Decrease value\"\n            title={`Decrease value (Shift+click: -${largeStep}, Alt+click: -${smallStep})`}\n            disabled={min !== undefined && value !== undefined && value <= min}\n            data-slot=\"number-input-step-down\"\n          >\n            <StepDownIcon size={14} />\n          </button>\n        </div>\n        )}\n      </div>\n    </div>\n  )\n})\nNumberInput.displayName = 'NumberInput'\n\nexport { NumberInput }\nexport type { NumberInputOwnProps, NumberInputProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/numberInput/numberInput.props.cjs

@@ -25,6 +25,8 @@ var import_asChild = require("../../_internal/props/asChild.prop");
 const numberInputVariants = ["surface", "classic", "ghost"];
 const numberInputSizes = ["sm", "md", "lg"];
 const numberInputRadiusValues = ["none", "sm", "md", "lg", "full"];
+const numberInputStepperLayouts = ["stacked", "split"];
+const numberInputStepperIcons = ["chevrons", "minus-plus"];
 const numberInputPropDefs = {
   ...import_asChild.asChildPropDef,
   variant: {
@@ -41,6 +43,24 @@ const numberInputPropDefs = {
     type: "enum",
     values: numberInputRadiusValues,
     default: void 0
+  },
+  stepperLayout: {
+    type: "enum",
+    values: numberInputStepperLayouts,
+    default: "stacked"
+  },
+  stepperIcon: {
+    type: "enum",
+    values: numberInputStepperIcons,
+    default: "chevrons"
+  },
+  largeStep: {
+    type: "number",
+    values: [5, 10, 25]
+  },
+  smallStep: {
+    type: "number",
+    values: [0.1, 0.5]
   }
 };
 //# sourceMappingURL=numberInput.props.cjs.map

package/dist/components/numberInput/numberInput.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/numberInput/numberInput.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst numberInputVariants = ['surface', 'classic', 'ghost'] as const\nconst numberInputSizes = ['sm', 'md', 'lg'] as const\nconst numberInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst numberInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: numberInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: numberInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: numberInputRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof numberInputVariants)[number]>\n  size: PropDef<(typeof numberInputSizes)[number]>\n  radius: PropDef<(typeof numberInputRadiusValues)[number]>\n}\n\nexport { numberInputPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,sBAAsB,CAAC,WAAW,WAAW,OAAO;AAC1D,MAAM,mBAAmB,CAAC,MAAM,MAAM,IAAI;AAC1C,MAAM,0BAA0B,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAEjE,MAAM,sBAAsB;AAAA,EAC1B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst numberInputVariants = ['surface', 'classic', 'ghost'] as const\nconst numberInputSizes = ['sm', 'md', 'lg'] as const\nconst numberInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\nconst numberInputStepperLayouts = ['stacked', 'split'] as const\nconst numberInputStepperIcons = ['chevrons', 'minus-plus'] as const\n\nconst numberInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: numberInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: numberInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: numberInputRadiusValues,\n    default: undefined,\n  },\n  stepperLayout: {\n    type: 'enum',\n    values: numberInputStepperLayouts,\n    default: 'stacked',\n  },\n  stepperIcon: {\n    type: 'enum',\n    values: numberInputStepperIcons,\n    default: 'chevrons',\n  },\n  largeStep: {\n    type: 'number',\n    values: [5, 10, 25],\n  },\n  smallStep: {\n    type: 'number',\n    values: [0.1, 0.5],\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof numberInputVariants)[number]>\n  size: PropDef<(typeof numberInputSizes)[number]>\n  radius: PropDef<(typeof numberInputRadiusValues)[number]>\n  stepperLayout: PropDef<(typeof numberInputStepperLayouts)[number]>\n  stepperIcon: PropDef<(typeof numberInputStepperIcons)[number]>\n  largeStep: PropDef\n  smallStep: PropDef\n}\n\nexport { numberInputPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,sBAAsB,CAAC,WAAW,WAAW,OAAO;AAC1D,MAAM,mBAAmB,CAAC,MAAM,MAAM,IAAI;AAC1C,MAAM,0BAA0B,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AACjE,MAAM,4BAA4B,CAAC,WAAW,OAAO;AACrD,MAAM,0BAA0B,CAAC,YAAY,YAAY;AAEzD,MAAM,sBAAsB;AAAA,EAC1B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,QAAQ,CAAC,GAAG,IAAI,EAAE;AAAA,EACpB;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,QAAQ,CAAC,KAAK,GAAG;AAAA,EACnB;AACF;",
   "names": []
 }

package/dist/components/numberInput/numberInput.props.d.cts

@@ -14,6 +14,24 @@ declare const numberInputPropDefs: {
         values: readonly ["none", "sm", "md", "lg", "full"];
         default: undefined;
     };
+    stepperLayout: {
+        type: "enum";
+        values: readonly ["stacked", "split"];
+        default: "stacked";
+    };
+    stepperIcon: {
+        type: "enum";
+        values: readonly ["chevrons", "minus-plus"];
+        default: "chevrons";
+    };
+    largeStep: {
+        type: "number";
+        values: number[];
+    };
+    smallStep: {
+        type: "number";
+        values: number[];
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/numberInput/numberInput.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"numberInput.props.d.cts","sourceRoot":"","sources":["../../../src/components/numberInput/numberInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"numberInput.props.d.cts","sourceRoot":"","sources":["../../../src/components/numberInput/numberInput.props.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/numberInput/numberInput.props.d.mts

@@ -14,6 +14,24 @@ declare const numberInputPropDefs: {
         values: readonly ["none", "sm", "md", "lg", "full"];
         default: undefined;
     };
+    stepperLayout: {
+        type: "enum";
+        values: readonly ["stacked", "split"];
+        default: "stacked";
+    };
+    stepperIcon: {
+        type: "enum";
+        values: readonly ["chevrons", "minus-plus"];
+        default: "chevrons";
+    };
+    largeStep: {
+        type: "number";
+        values: number[];
+    };
+    smallStep: {
+        type: "number";
+        values: number[];
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/numberInput/numberInput.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"numberInput.props.d.mts","sourceRoot":"","sources":["../../../src/components/numberInput/numberInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"numberInput.props.d.mts","sourceRoot":"","sources":["../../../src/components/numberInput/numberInput.props.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/numberInput/numberInput.props.d.ts

@@ -14,6 +14,24 @@ declare const numberInputPropDefs: {
         values: readonly ["none", "sm", "md", "lg", "full"];
         default: undefined;
     };
+    stepperLayout: {
+        type: "enum";
+        values: readonly ["stacked", "split"];
+        default: "stacked";
+    };
+    stepperIcon: {
+        type: "enum";
+        values: readonly ["chevrons", "minus-plus"];
+        default: "chevrons";
+    };
+    largeStep: {
+        type: "number";
+        values: number[];
+    };
+    smallStep: {
+        type: "number";
+        values: number[];
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/numberInput/numberInput.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numberInput.props.d.ts","sourceRoot":"","sources":["../../../src/components/numberInput/numberInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"numberInput.props.d.ts","sourceRoot":"","sources":["../../../src/components/numberInput/numberInput.props.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/numberInput/numberInput.props.js

@@ -2,6 +2,8 @@ import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
 const numberInputVariants = ["surface", "classic", "ghost"];
 const numberInputSizes = ["sm", "md", "lg"];
 const numberInputRadiusValues = ["none", "sm", "md", "lg", "full"];
+const numberInputStepperLayouts = ["stacked", "split"];
+const numberInputStepperIcons = ["chevrons", "minus-plus"];
 const numberInputPropDefs = {
   ...asChildPropDef,
   variant: {
@@ -18,6 +20,24 @@ const numberInputPropDefs = {
     type: "enum",
     values: numberInputRadiusValues,
     default: void 0
+  },
+  stepperLayout: {
+    type: "enum",
+    values: numberInputStepperLayouts,
+    default: "stacked"
+  },
+  stepperIcon: {
+    type: "enum",
+    values: numberInputStepperIcons,
+    default: "chevrons"
+  },
+  largeStep: {
+    type: "number",
+    values: [5, 10, 25]
+  },
+  smallStep: {
+    type: "number",
+    values: [0.1, 0.5]
   }
 };
 export {

package/dist/components/numberInput/numberInput.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/numberInput/numberInput.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst numberInputVariants = ['surface', 'classic', 'ghost'] as const\nconst numberInputSizes = ['sm', 'md', 'lg'] as const\nconst numberInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst numberInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: numberInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: numberInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: numberInputRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof numberInputVariants)[number]>\n  size: PropDef<(typeof numberInputSizes)[number]>\n  radius: PropDef<(typeof numberInputRadiusValues)[number]>\n}\n\nexport { numberInputPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,sBAAsB,CAAC,WAAW,WAAW,OAAO;AAC1D,MAAM,mBAAmB,CAAC,MAAM,MAAM,IAAI;AAC1C,MAAM,0BAA0B,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAEjE,MAAM,sBAAsB;AAAA,EAC1B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst numberInputVariants = ['surface', 'classic', 'ghost'] as const\nconst numberInputSizes = ['sm', 'md', 'lg'] as const\nconst numberInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\nconst numberInputStepperLayouts = ['stacked', 'split'] as const\nconst numberInputStepperIcons = ['chevrons', 'minus-plus'] as const\n\nconst numberInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: numberInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: numberInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: numberInputRadiusValues,\n    default: undefined,\n  },\n  stepperLayout: {\n    type: 'enum',\n    values: numberInputStepperLayouts,\n    default: 'stacked',\n  },\n  stepperIcon: {\n    type: 'enum',\n    values: numberInputStepperIcons,\n    default: 'chevrons',\n  },\n  largeStep: {\n    type: 'number',\n    values: [5, 10, 25],\n  },\n  smallStep: {\n    type: 'number',\n    values: [0.1, 0.5],\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof numberInputVariants)[number]>\n  size: PropDef<(typeof numberInputSizes)[number]>\n  radius: PropDef<(typeof numberInputRadiusValues)[number]>\n  stepperLayout: PropDef<(typeof numberInputStepperLayouts)[number]>\n  stepperIcon: PropDef<(typeof numberInputStepperIcons)[number]>\n  largeStep: PropDef\n  smallStep: PropDef\n}\n\nexport { numberInputPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,sBAAsB,CAAC,WAAW,WAAW,OAAO;AAC1D,MAAM,mBAAmB,CAAC,MAAM,MAAM,IAAI;AAC1C,MAAM,0BAA0B,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AACjE,MAAM,4BAA4B,CAAC,WAAW,OAAO;AACrD,MAAM,0BAA0B,CAAC,YAAY,YAAY;AAEzD,MAAM,sBAAsB;AAAA,EAC1B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,QAAQ,CAAC,GAAG,IAAI,EAAE;AAAA,EACpB;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,QAAQ,CAAC,KAAK,GAAG;AAAA,EACnB;AACF;",
   "names": []
 }

package/dist/components/password-input.css

@@ -34,9 +34,11 @@
   padding-block: var(--dsx-density-control-padding-block-lg, var(--dsx-space-md));
 }
 
-/* Variant — classic: elevated shadow over default surface border */
+/* Variant — classic: raised fill + elevation over the default surface shell, so it
+   reads distinct from the default surface shell on both themes. */
 .dsx-password-input[data-variant='classic'] .dsx-password-input__shell {
-  box-shadow: var(--dsx-effect-shadow-1);
+  background: var(--dsx-color-surface-raised);
+  box-shadow: var(--dsx-shadow-elevation-2);
 }
 
 /* Variant — ghost: no border or background until focused */