@nexus-cross/design-system 1.0.4 → 1.0.5

package/dist/chunks/chunk-BJM3NDT2.mjs

@@ -0,0 +1,368 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var numberInputVariants = cva("nexus-number-input", {
+  variants: {
+    variant: {
+      basic: "nexus-number-input--basic",
+      bind: "nexus-number-input--bind"
+    },
+    size: {
+      lg: "nexus-number-input--lg",
+      xl: "nexus-number-input--xl"
+    }
+  },
+  defaultVariants: { variant: "basic", size: "lg" }
+});
+var CHEVRON_PATH = "M3.606.179C3.82-.06 4.18-.06 4.394.179L7.846 4.01C8.18 4.382 7.934 5 7.452 5H.548C.066 5-.18 4.382.154 4.01L3.606.179Z";
+var ChevronUpIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__chevron-icon",
+    viewBox: "0 0 8 5",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: CHEVRON_PATH })
+  }
+);
+var ChevronDownIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__chevron-icon nexus-number-input__chevron-icon--down",
+    viewBox: "0 0 8 5",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: CHEVRON_PATH })
+  }
+);
+var MinusIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__bind-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.33",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M3.333 8h9.334" })
+  }
+);
+var PlusIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__bind-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.33",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M3.333 8h9.334M8 3.333v9.334" })
+  }
+);
+function clampValue(val, min, max) {
+  let result = val;
+  if (min !== void 0) result = Math.max(min, result);
+  if (max !== void 0) result = Math.min(max, result);
+  return result;
+}
+function roundToDigit(val, digit) {
+  const factor = Math.pow(10, digit);
+  return Math.round(val * factor) / factor;
+}
+function numberInputBind(ref, direction) {
+  return {
+    onPointerDown: (e) => {
+      if (direction === "increment") ref.current?.startIncrement(e);
+      else ref.current?.startDecrement(e);
+    },
+    onPointerUp: () => ref.current?.stop(),
+    onPointerLeave: () => ref.current?.stop()
+  };
+}
+var NumberInput = React.forwardRef(
+  ({
+    className,
+    variant = "basic",
+    size,
+    error,
+    value,
+    min,
+    max,
+    step = 1,
+    digit = 0,
+    label,
+    description,
+    showMax,
+    hideButtons = false,
+    disabled,
+    readOnly,
+    onValueChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    const [internalValue, setInternalValue] = React.useState(
+      value?.toString() ?? ""
+    );
+    const internalValueRef = React.useRef(internalValue);
+    const timeoutRef = React.useRef(null);
+    const pressCountRef = React.useRef(0);
+    React.useEffect(() => {
+      internalValueRef.current = internalValue;
+    }, [internalValue]);
+    React.useEffect(() => {
+      setInternalValue(value?.toString() ?? "");
+    }, [value]);
+    const commitValue = React.useCallback(
+      (raw) => {
+        if (raw === "" || raw === "-") {
+          setInternalValue(raw);
+          onValueChange?.(void 0);
+          return;
+        }
+        const parsed = parseFloat(raw);
+        if (isNaN(parsed)) return;
+        const clamped = clampValue(roundToDigit(parsed, digit), min, max);
+        setInternalValue(clamped.toString());
+        onValueChange?.(clamped);
+      },
+      [digit, min, max, onValueChange]
+    );
+    const handleInputChange = React.useCallback(
+      (e) => {
+        const raw = e.target.value;
+        const regex = digit > 0 ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+        if (!regex.test(raw)) return;
+        setInternalValue(raw);
+      },
+      [digit]
+    );
+    const handleBlur = React.useCallback(() => {
+      commitValue(internalValue);
+    }, [internalValue, commitValue]);
+    const adjust = React.useCallback(
+      (delta) => {
+        const current = parseFloat(internalValueRef.current) || 0;
+        const next = clampValue(roundToDigit(current + delta, digit), min, max);
+        const nextStr = next.toString();
+        internalValueRef.current = nextStr;
+        setInternalValue(nextStr);
+        onValueChange?.(next);
+      },
+      [digit, min, max, onValueChange]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Enter") commitValue(internalValue);
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          adjust(step);
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          adjust(-step);
+        }
+      },
+      [internalValue, commitValue, step, adjust]
+    );
+    const stopRepeat = React.useCallback(() => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+      pressCountRef.current = 0;
+    }, []);
+    const startRepeat = React.useCallback(
+      (delta, e) => {
+        e.preventDefault();
+        adjust(delta);
+        pressCountRef.current = 0;
+        timeoutRef.current = setTimeout(() => {
+          const accelerate = () => {
+            adjust(delta);
+            pressCountRef.current += 1;
+            let delay = 100;
+            if (pressCountRef.current > 20) delay = 30;
+            else if (pressCountRef.current > 10) delay = 50;
+            else if (pressCountRef.current > 5) delay = 75;
+            timeoutRef.current = setTimeout(accelerate, delay);
+          };
+          accelerate();
+        }, 400);
+      },
+      [adjust]
+    );
+    React.useEffect(() => () => stopRepeat(), [stopRepeat]);
+    const startRepeatRef = React.useRef(startRepeat);
+    startRepeatRef.current = startRepeat;
+    const stopRepeatRef = React.useRef(stopRepeat);
+    stopRepeatRef.current = stopRepeat;
+    const adjustRef = React.useRef(adjust);
+    adjustRef.current = adjust;
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        get input() {
+          return inputRef.current;
+        },
+        increment: () => adjustRef.current(step),
+        decrement: () => adjustRef.current(-step),
+        startIncrement: (e) => startRepeatRef.current(step, e),
+        startDecrement: (e) => startRepeatRef.current(-step, e),
+        stop: () => stopRepeatRef.current()
+      }),
+      [step]
+    );
+    const handleMaxClick = React.useCallback(() => {
+      if (disabled || readOnly || max === void 0) return;
+      const maxStr = max.toString();
+      internalValueRef.current = maxStr;
+      setInternalValue(maxStr);
+      onValueChange?.(max);
+      inputRef.current?.focus();
+    }, [disabled, readOnly, max, onValueChange]);
+    const numValue = parseFloat(internalValue) || 0;
+    const isMinDisabled = min !== void 0 && numValue <= min;
+    const isMaxDisabled = max !== void 0 && numValue >= max;
+    const isMaxExceeded = max !== void 0 && numValue > max;
+    const displayMax = showMax ?? max !== void 0;
+    const showHeader = !!label || displayMax;
+    const isError = error || isMaxExceeded;
+    const showBtns = !hideButtons && !readOnly;
+    const isBasic = variant !== "bind";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          numberInputVariants({ variant, size }),
+          isError && "nexus-number-input--error",
+          disabled && "nexus-number-input--disabled",
+          className
+        ),
+        children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__header", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "nexus-number-input__label", children: label }),
+            displayMax && max !== void 0 && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "nexus-number-input__max",
+                onClick: handleMaxClick,
+                disabled: disabled || readOnly,
+                tabIndex: -1,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "nexus-number-input__max-text", children: "Max" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "nexus-number-input__max-value",
+                        isMaxExceeded && "nexus-number-input__max-value--exceeded"
+                      ),
+                      children: max
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__container", children: [
+            !isBasic && showBtns && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: disabled || isMinDisabled,
+                className: "nexus-number-input__bind-btn",
+                onPointerDown: (e) => startRepeat(-step, e),
+                onPointerUp: stopRepeat,
+                onPointerLeave: stopRepeat,
+                "aria-label": "Decrease",
+                children: /* @__PURE__ */ jsx(MinusIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                inputMode: "decimal",
+                role: "spinbutton",
+                className: "nexus-number-input__field",
+                value: internalValue,
+                disabled,
+                readOnly,
+                placeholder: placeholder ?? "0",
+                "aria-invalid": isError || void 0,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": internalValue ? parseFloat(internalValue) || void 0 : void 0,
+                onChange: handleInputChange,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                ...props
+              }
+            ),
+            !isBasic && showBtns && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: disabled || isMaxDisabled,
+                className: "nexus-number-input__bind-btn",
+                onPointerDown: (e) => startRepeat(step, e),
+                onPointerUp: stopRepeat,
+                onPointerLeave: stopRepeat,
+                "aria-label": "Increase",
+                children: /* @__PURE__ */ jsx(PlusIcon, {})
+              }
+            ),
+            isBasic && showBtns && /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__buttons", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  disabled: disabled || isMaxDisabled,
+                  className: "nexus-number-input__step nexus-number-input__step--up",
+                  onPointerDown: (e) => startRepeat(step, e),
+                  onPointerUp: stopRepeat,
+                  onPointerLeave: stopRepeat,
+                  "aria-label": "Increase",
+                  children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  disabled: disabled || isMinDisabled,
+                  className: "nexus-number-input__step nexus-number-input__step--down",
+                  onPointerDown: (e) => startRepeat(-step, e),
+                  onPointerUp: stopRepeat,
+                  onPointerLeave: stopRepeat,
+                  "aria-label": "Decrease",
+                  children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+                }
+              )
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "nexus-number-input__description",
+                isError && "nexus-number-input__description--error"
+              ),
+              children: description
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export { NumberInput, numberInputBind, numberInputVariants };