@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-UMJIDEXI.mjs

@@ -0,0 +1,261 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Stepper.tsx
+import { useEffect, useRef, useState, forwardRef } from "react";
+import {
+  stepperBaseClasses,
+  getStepperInputClasses,
+  getStepperButtonClasses,
+  minusPathD,
+  plusPathD,
+  stepperIconViewBox,
+  clampStepperValue,
+  classNames,
+  createRafRepeatActionController,
+  stepValue,
+  isAtMin,
+  isAtMax,
+  formatInputNumberEditingDisplay,
+  parseInputNumberValue,
+  commitInputNumberValue,
+  getInputNumberKeyboardNextValue,
+  mergeAriaDescribedBy,
+  runShakeAnimation,
+  getStepperLabels
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Stepper = forwardRef(function Stepper2({
+  value,
+  defaultValue,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  disabled = false,
+  size = "md",
+  precision,
+  className,
+  incrementAriaLabel,
+  decrementAriaLabel,
+  status: statusProp,
+  onChange,
+  id,
+  onBlur,
+  ...rest
+}, ref) {
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const labels = getStepperLabels(config.locale, {
+    incrementAriaLabel,
+    decrementAriaLabel
+  });
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const describedBy = mergeAriaDescribedBy(
+    typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const groupLabel = typeof rest["aria-label"] === "string" && rest["aria-label"].trim() ? rest["aria-label"] : labelledby ? void 0 : labels.ariaLabel;
+  const [currentValue, setCurrentValue] = useControlledState({
+    value,
+    defaultValue: defaultValue ?? 0,
+    onChange: (next) => {
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const [focused, setFocused] = useState(false);
+  const [displayValue, setDisplayValue] = useState(
+    formatInputNumberEditingDisplay(defaultValue ?? value ?? 0, precision)
+  );
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  const repeatControllerRef = useRef(createRafRepeatActionController());
+  const repeatValueRef = useRef(currentValue);
+  const suppressNextClickRef = useRef(false);
+  const setInputRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  useEffect(() => () => repeatControllerRef.current.stop(), []);
+  useEffect(() => {
+    if (!focused) {
+      setDisplayValue(formatInputNumberEditingDisplay(currentValue, precision));
+    }
+  }, [currentValue, focused, precision]);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  const commit = (raw) => {
+    const { value: next, changed } = commitInputNumberValue(raw, currentValue, {
+      min,
+      max,
+      precision
+    });
+    const clamped = clampStepperValue(next ?? currentValue, min, max, precision, step);
+    if (changed || clamped !== currentValue) {
+      setCurrentValue(clamped);
+    }
+    setDisplayValue(formatInputNumberEditingDisplay(clamped, precision));
+    return clamped;
+  };
+  const handleStep = (direction, baseValue = currentValue) => {
+    if (effectiveDisabled) return baseValue;
+    const next = stepValue(baseValue, step, direction, min, max, precision);
+    if (next === baseValue) return baseValue;
+    setCurrentValue(next);
+    setDisplayValue(formatInputNumberEditingDisplay(next, precision));
+    return next;
+  };
+  const handleStepClick = (direction) => {
+    if (suppressNextClickRef.current) {
+      suppressNextClickRef.current = false;
+      return;
+    }
+    handleStep(direction);
+  };
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const startStepRepeat = (direction) => {
+    return (event) => {
+      event.preventDefault();
+      if (effectiveDisabled) return;
+      if (direction === "down" && isAtMin(currentValue, min)) return;
+      if (direction === "up" && isAtMax(currentValue, max)) return;
+      suppressNextClickRef.current = true;
+      repeatValueRef.current = currentValue;
+      repeatControllerRef.current.start(() => {
+        const baseValue = repeatValueRef.current;
+        const nextValue = handleStep(direction, baseValue);
+        repeatValueRef.current = nextValue;
+        if (nextValue === baseValue) repeatControllerRef.current.stop();
+      });
+      focusInput();
+    };
+  };
+  const stopStepRepeat = () => {
+    repeatControllerRef.current.stop();
+  };
+  const atMin = isAtMin(currentValue, min);
+  const atMax = isAtMax(currentValue, max);
+  const {
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledby,
+    "aria-describedby": _ariaDescribedby,
+    ...groupRest
+  } = rest;
+  const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...groupRest,
+      ref: rootRef,
+      className: classNames(stepperBaseClasses, className),
+      role: "group",
+      "aria-label": groupLabel,
+      "aria-labelledby": labelledby,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getStepperButtonClasses(size, effectiveDisabled || atMin, "start"),
+            disabled: effectiveDisabled || atMin,
+            tabIndex: -1,
+            "aria-label": labels.decrementAriaLabel,
+            onPointerDown: startStepRepeat("down"),
+            onPointerUp: stopStepRepeat,
+            onPointerLeave: stopStepRepeat,
+            onPointerCancel: stopStepRepeat,
+            onClick: () => handleStepClick("down"),
+            children: icon(minusPathD)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: setInputRefs,
+            type: "text",
+            inputMode: "decimal",
+            role: "spinbutton",
+            className: getStepperInputClasses(size, effectiveDisabled, status),
+            value: focused ? displayValue : formatInputNumberEditingDisplay(currentValue, precision),
+            disabled: effectiveDisabled,
+            id: effectiveId,
+            "aria-label": labels.valueAriaLabel,
+            "aria-valuenow": currentValue,
+            "aria-valuemin": Number.isFinite(min) ? min : void 0,
+            "aria-valuemax": Number.isFinite(max) ? max : void 0,
+            "aria-valuetext": Number.isFinite(currentValue) ? String(currentValue) : labels.valueAriaLabel,
+            "aria-invalid": status === "error" ? true : void 0,
+            "aria-describedby": describedBy,
+            onFocus: () => {
+              setFocused(true);
+              setDisplayValue(formatInputNumberEditingDisplay(currentValue, precision));
+            },
+            onBlur: (event) => {
+              const parsed = parseInputNumberValue(displayValue);
+              commit(parsed);
+              setFocused(false);
+              formItemControl?.onBlur?.();
+              onBlur?.(event);
+            },
+            onChange: (e) => {
+              setDisplayValue(e.target.value);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                commit(parseInputNumberValue(displayValue));
+                return;
+              }
+              const next = getInputNumberKeyboardNextValue(e.key, currentValue, {
+                min,
+                max,
+                step,
+                precision
+              });
+              if (next === void 0) return;
+              e.preventDefault();
+              if (next === currentValue) return;
+              setCurrentValue(next);
+              setDisplayValue(formatInputNumberEditingDisplay(next, precision));
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getStepperButtonClasses(size, effectiveDisabled || atMax, "end"),
+            disabled: effectiveDisabled || atMax,
+            tabIndex: -1,
+            "aria-label": labels.incrementAriaLabel,
+            onPointerDown: startStepRepeat("up"),
+            onPointerUp: stopStepRepeat,
+            onPointerLeave: stopStepRepeat,
+            onPointerCancel: stopStepRepeat,
+            onClick: () => handleStepClick("up"),
+            children: icon(plusPathD)
+          }
+        )
+      ]
+    }
+  );
+});
+Stepper.displayName = "Stepper";
+
+export {
+  Stepper
+};