@yamada-ui/number-input 0.1.0

package/dist/index.js

@@ -0,0 +1,541 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  NumberInput: () => NumberInput,
+  useNumberInput: () => useNumberInput
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/number-input.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_icon = require("@yamada-ui/icon");
+var import_use_counter = require("@yamada-ui/use-counter");
+var import_use_event_listener = require("@yamada-ui/use-event-listener");
+var import_use_interval = require("@yamada-ui/use-interval");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var isDefaultValidCharacter = (character) => /^[Ee0-9+\-.]$/.test(character);
+var isValidNumericKeyboardEvent = ({ key, ctrlKey, altKey, metaKey }, isValid) => {
+  if (key == null)
+    return true;
+  const isModifierKey = ctrlKey || altKey || metaKey;
+  const isSingleCharacterKey = key.length === 1;
+  if (!isSingleCharacterKey || isModifierKey)
+    return true;
+  return isValid(key);
+};
+var getStep = ({ ctrlKey, shiftKey, metaKey }) => {
+  let ratio = 1;
+  if (metaKey || ctrlKey)
+    ratio = 0.1;
+  if (shiftKey)
+    ratio = 10;
+  return ratio;
+};
+var useNumberInput = (props = {}) => {
+  var _a;
+  const {
+    id,
+    name,
+    inputMode = "decimal",
+    pattern = "[0-9]*(.[0-9]+)?",
+    required,
+    disabled,
+    readOnly,
+    focusInputOnChange = true,
+    clampValueOnBlur = true,
+    keepWithinRange = true,
+    allowMouseWheel,
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER,
+    precision,
+    "aria-invalid": isInvalid,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)(props);
+  const isRequired = required;
+  const isReadOnly = readOnly;
+  const isDisabled = disabled;
+  const [isFocused, setFocused] = (0, import_react.useState)(false);
+  const isInteractive = !(readOnly || disabled);
+  const inputRef = (0, import_react.useRef)(null);
+  const inputSelectionRef = (0, import_react.useRef)(null);
+  const incrementRef = (0, import_react.useRef)(null);
+  const decrementRef = (0, import_react.useRef)(null);
+  const onFocus = (0, import_utils.useCallbackRef)(
+    (0, import_utils.handlerAll)(rest.onFocus, (ev) => {
+      var _a2, _b, _c;
+      setFocused(true);
+      if (!inputSelectionRef.current)
+        return;
+      ev.target.selectionStart = (_b = inputSelectionRef.current.start) != null ? _b : (_a2 = ev.currentTarget.value) == null ? void 0 : _a2.length;
+      ev.currentTarget.selectionEnd = (_c = inputSelectionRef.current.end) != null ? _c : ev.currentTarget.selectionStart;
+    })
+  );
+  const onBlur = (0, import_utils.useCallbackRef)(
+    (0, import_utils.handlerAll)(rest.onBlur, () => {
+      setFocused(false);
+      if (clampValueOnBlur)
+        validateAndClamp();
+    })
+  );
+  const onInvalid = (0, import_utils.useCallbackRef)(rest.onInvalid);
+  const isValidCharacter = (0, import_utils.useCallbackRef)((_a = rest.isValidCharacter) != null ? _a : isDefaultValidCharacter);
+  const { isMin, isMax, isOut, value, valueAsNumber, setValue, update, cast, ...counter } = (0, import_use_counter.useCounter)({
+    min,
+    max,
+    precision,
+    keepWithinRange,
+    ...rest
+  });
+  const sanitize = (0, import_react.useCallback)(
+    (value2) => value2.split("").filter(isValidCharacter).join(""),
+    [isValidCharacter]
+  );
+  const parse = (0, import_react.useCallback)((value2) => {
+    var _a2, _b;
+    return (_b = (_a2 = rest.parse) == null ? void 0 : _a2.call(rest, value2)) != null ? _b : value2;
+  }, [rest]);
+  const format = (0, import_react.useCallback)(
+    (value2) => {
+      var _a2, _b;
+      return ((_b = (_a2 = rest.format) == null ? void 0 : _a2.call(rest, value2)) != null ? _b : value2).toString();
+    },
+    [rest]
+  );
+  const increment = (0, import_react.useCallback)(
+    (step = ((_b) => (_b = rest.step) != null ? _b : 1)()) => {
+      if (isInteractive)
+        counter.increment(step);
+    },
+    [isInteractive, counter, rest.step]
+  );
+  const decrement = (0, import_react.useCallback)(
+    (step = ((_c) => (_c = rest.step) != null ? _c : 1)()) => {
+      if (isInteractive)
+        counter.decrement(step);
+    },
+    [isInteractive, counter, rest.step]
+  );
+  const validateAndClamp = (0, import_react.useCallback)(() => {
+    let next = value;
+    if (value === "")
+      return;
+    const valueStartsWithE = /^[eE]/.test(value.toString());
+    if (valueStartsWithE) {
+      setValue("");
+    } else {
+      if (valueAsNumber < min)
+        next = min;
+      if (valueAsNumber > max)
+        next = max;
+      cast(next);
+    }
+  }, [cast, max, min, setValue, value, valueAsNumber]);
+  const onChange = (0, import_react.useCallback)(
+    (event) => {
+      const evt = event.nativeEvent;
+      if (evt.isComposing)
+        return;
+      const parsedInput = parse(event.currentTarget.value);
+      update(sanitize(parsedInput));
+      inputSelectionRef.current = {
+        start: event.currentTarget.selectionStart,
+        end: event.currentTarget.selectionEnd
+      };
+    },
+    [parse, update, sanitize]
+  );
+  const onKeyDown = (0, import_react.useCallback)(
+    (ev) => {
+      var _a2;
+      if (ev.nativeEvent.isComposing)
+        return;
+      if (!isValidNumericKeyboardEvent(ev, isValidCharacter))
+        ev.preventDefault();
+      const step = getStep(ev) * ((_a2 = rest.step) != null ? _a2 : 1);
+      const keyMap = {
+        ArrowUp: () => increment(step),
+        ArrowDown: () => decrement(step),
+        Home: () => update(min),
+        End: () => update(max)
+      };
+      const action = keyMap[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      action(ev);
+    },
+    [decrement, increment, isValidCharacter, max, min, rest.step, update]
+  );
+  const { up, down, stop, isSpinning } = useSpinner(increment, decrement);
+  useAttributeObserver(incrementRef, ["disabled"], isSpinning, stop);
+  useAttributeObserver(decrementRef, ["disabled"], isSpinning, stop);
+  const focusInput = (0, import_react.useCallback)(() => {
+    if (focusInputOnChange)
+      requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      });
+  }, [focusInputOnChange]);
+  const eventUp = (0, import_react.useCallback)(
+    (ev) => {
+      ev.preventDefault();
+      up();
+      focusInput();
+    },
+    [focusInput, up]
+  );
+  const eventDown = (0, import_react.useCallback)(
+    (ev) => {
+      ev.preventDefault();
+      down();
+      focusInput();
+    },
+    [focusInput, down]
+  );
+  (0, import_utils.useUpdateEffect)(() => {
+    if (valueAsNumber > max) {
+      onInvalid == null ? void 0 : onInvalid("rangeOverflow", format(value), valueAsNumber);
+    } else if (valueAsNumber < min) {
+      onInvalid == null ? void 0 : onInvalid("rangeOverflow", format(value), valueAsNumber);
+    }
+  }, [valueAsNumber, value, format, onInvalid]);
+  (0, import_utils.useSafeLayoutEffect)(() => {
+    if (!inputRef.current)
+      return;
+    const notInSync = inputRef.current.value != value;
+    if (!notInSync)
+      return;
+    const parsedInput = parse(inputRef.current.value);
+    setValue(sanitize(parsedInput));
+  }, [parse, sanitize]);
+  (0, import_use_event_listener.useEventListener)(
+    () => inputRef.current,
+    "wheel",
+    (ev) => {
+      var _a2, _b, _c;
+      const ownerDocument = (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.ownerDocument) != null ? _b : document;
+      const isFocused2 = ownerDocument.activeElement === inputRef.current;
+      if (!allowMouseWheel || !isFocused2)
+        return;
+      ev.preventDefault();
+      const step = getStep(ev) * ((_c = rest.step) != null ? _c : 1);
+      const direction = Math.sign(ev.deltaY);
+      if (direction === -1) {
+        increment(step);
+      } else if (direction === 1) {
+        decrement(step);
+      }
+    },
+    { passive: false }
+  );
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      id,
+      name,
+      type: "text",
+      inputMode,
+      pattern,
+      required,
+      disabled,
+      readOnly,
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...(0, import_utils.omitObject)(props2, ["defaultValue"]),
+      ref: (0, import_utils.mergeRefs)(inputRef, ref),
+      value: format(value),
+      "aria-invalid": (0, import_utils.ariaAttr)(isInvalid != null ? isInvalid : isOut),
+      autoComplete: "off",
+      autoCorrect: "off",
+      onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
+      onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus),
+      onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
+    }),
+    [
+      id,
+      name,
+      inputMode,
+      pattern,
+      required,
+      disabled,
+      readOnly,
+      rest,
+      format,
+      value,
+      isInvalid,
+      isOut,
+      onChange,
+      onKeyDown,
+      onFocus,
+      onBlur
+    ]
+  );
+  const getIncrementProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const disabled2 = props2.disabled || keepWithinRange && isMax;
+      return {
+        required,
+        readOnly,
+        disabled: disabled2,
+        ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+        ...props2,
+        ref: (0, import_utils.mergeRefs)(ref, incrementRef),
+        role: "button",
+        tabIndex: -1,
+        cursor: readOnly ? "not-allowed" : props2.cursor,
+        onPointerDown: (0, import_utils.handlerAll)(props2.onPointerDown, (ev) => {
+          if (ev.button === 0 && !disabled2)
+            eventUp(ev);
+        }),
+        onPointerLeave: (0, import_utils.handlerAll)(props2.onPointerLeave, stop),
+        onPointerUp: (0, import_utils.handlerAll)(props2.onPointerUp, stop)
+      };
+    },
+    [keepWithinRange, isMax, required, readOnly, rest, stop, eventUp]
+  );
+  const getDecrementProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const disabled2 = props2.disabled || keepWithinRange && isMin;
+      return {
+        required,
+        readOnly,
+        disabled: disabled2,
+        ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+        ...props2,
+        ref: (0, import_utils.mergeRefs)(ref, decrementRef),
+        role: "button",
+        tabIndex: -1,
+        cursor: readOnly ? "not-allowed" : props2.cursor,
+        onPointerDown: (0, import_utils.handlerAll)(props2.onPointerDown, (ev) => {
+          if (ev.button === 0 && !disabled2)
+            eventDown(ev);
+        }),
+        onPointerLeave: (0, import_utils.handlerAll)(props2.onPointerLeave, stop),
+        onPointerUp: (0, import_utils.handlerAll)(props2.onPointerUp, stop)
+      };
+    },
+    [keepWithinRange, isMin, required, readOnly, rest, stop, eventDown]
+  );
+  return {
+    value: format(value),
+    valueAsNumber,
+    isFocused,
+    isRequired,
+    isReadOnly,
+    isDisabled,
+    getInputProps,
+    getIncrementProps,
+    getDecrementProps
+  };
+};
+var INTERVAL = 50;
+var DELAY = 300;
+var useSpinner = (increment, decrement) => {
+  const [isSpinning, setIsSpinning] = (0, import_react.useState)(false);
+  const [action, setAction] = (0, import_react.useState)(null);
+  const [isOnce, setIsOnce] = (0, import_react.useState)(true);
+  const timeoutRef = (0, import_react.useRef)(null);
+  const removeTimeout = () => clearTimeout(timeoutRef.current);
+  (0, import_use_interval.useInterval)(
+    () => {
+      if (action === "increment")
+        increment();
+      if (action === "decrement")
+        decrement();
+    },
+    isSpinning ? INTERVAL : null
+  );
+  const up = (0, import_react.useCallback)(() => {
+    if (isOnce)
+      increment();
+    timeoutRef.current = setTimeout(() => {
+      setIsOnce(false);
+      setIsSpinning(true);
+      setAction("increment");
+    }, DELAY);
+  }, [increment, isOnce]);
+  const down = (0, import_react.useCallback)(() => {
+    if (isOnce)
+      decrement();
+    timeoutRef.current = setTimeout(() => {
+      setIsOnce(false);
+      setIsSpinning(true);
+      setAction("decrement");
+    }, DELAY);
+  }, [decrement, isOnce]);
+  const stop = (0, import_react.useCallback)(() => {
+    setIsOnce(true);
+    setIsSpinning(false);
+    removeTimeout();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    return () => removeTimeout();
+  }, []);
+  return { up, down, stop, isSpinning };
+};
+var useAttributeObserver = (ref, attributeFilter, enabled, func) => {
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (!ref.current || !enabled)
+      return;
+    const ownerDocument = (_a = ref.current.ownerDocument.defaultView) != null ? _a : window;
+    const observer = new ownerDocument.MutationObserver((changes) => {
+      for (const { type, attributeName } of changes) {
+        if (type === "attributes" && attributeName && attributeFilter.includes(attributeName))
+          func();
+      }
+    });
+    observer.observe(ref.current, { attributes: true, attributeFilter });
+    return () => observer.disconnect();
+  });
+};
+var [NumberInputContextProvider, useNumberInputContext] = (0, import_utils.createContext)({
+  strict: false,
+  name: "NumberInputContext"
+});
+var NumberInput = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("NumberInput", props);
+  const {
+    className,
+    isStepper = true,
+    container,
+    addon,
+    increment,
+    decrement,
+    onChange,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const { getInputProps, getIncrementProps, getDecrementProps } = useNumberInput({
+    onChange,
+    ...rest
+  });
+  const css = {
+    position: "relative",
+    zIndex: 0,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    NumberInputContextProvider,
+    {
+      value: { getInputProps, getIncrementProps, getDecrementProps, styles },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { className: (0, import_utils.cx)("ui-number-input", className), __css: css, ...container, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberInputField, { ...getInputProps(rest, ref) }),
+        isStepper ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(NumberInputAddon, { ...addon, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberIncrementStepper, { ...increment }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberDecrementStepper, { ...decrement })
+        ] }) : null
+      ] })
+    }
+  );
+});
+var NumberInputField = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useNumberInputContext();
+    const css = {
+      width: "100%",
+      ...styles.field
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.input,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-number-input-field", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var NumberInputAddon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useNumberInputContext();
+  const css = {
+    display: "flex",
+    flexDirection: "column",
+    position: "absolute",
+    top: "0",
+    insetEnd: "0px",
+    margin: "1px",
+    height: "calc(100% - 2px)",
+    zIndex: 1,
+    ...styles.addon
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.div,
+    {
+      ref,
+      className: (0, import_utils.cx)("ui-number-input-addon", className),
+      "aria-hidden": true,
+      __css: css,
+      ...rest
+    }
+  );
+});
+var Stepper = (0, import_core.ui)("div", {
+  baseStyle: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 1,
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    userSelect: "none",
+    cursor: "pointer",
+    lineHeight: "normal"
+  }
+});
+var NumberIncrementStepper = (0, import_core.forwardRef)(
+  ({ className, children, ...rest }, ref) => {
+    const { getIncrementProps, styles } = useNumberInputContext();
+    const css = { ...styles.stepper };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Stepper,
+      {
+        className: (0, import_utils.cx)("ui-number-input-stepper", className),
+        ...getIncrementProps(rest, ref),
+        __css: css,
+        children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, { __css: { transform: "rotate(180deg)" } })
+      }
+    );
+  }
+);
+var NumberDecrementStepper = (0, import_core.forwardRef)(
+  ({ className, children, ...rest }, ref) => {
+    const { getDecrementProps, styles } = useNumberInputContext();
+    const css = { ...styles.stepper };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Stepper,
+      {
+        className: (0, import_utils.cx)("ui-number-input-stepper", className),
+        ...getDecrementProps(rest, ref),
+        __css: css,
+        children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberInput,
+  useNumberInput
+});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import {
+  NumberInput,
+  useNumberInput
+} from "./chunk-L2FQDPVY.mjs";
+export {
+  NumberInput,
+  useNumberInput
+};

package/dist/number-input.d.ts

@@ -0,0 +1,48 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { PropGetter } from '@yamada-ui/utils';
+import { UseFormControlProps } from '@yamada-ui/form-control';
+import { UseCounterProps } from '@yamada-ui/use-counter';
+import { InputHTMLAttributes } from 'react';
+
+type ValidityState = 'rangeUnderflow' | 'rangeOverflow';
+type UseNumberInputProps = UseFormControlProps<HTMLInputElement> & UseCounterProps & {
+    name?: string;
+    inputMode?: InputHTMLAttributes<any>['inputMode'];
+    pattern?: InputHTMLAttributes<any>['pattern'];
+    focusInputOnChange?: boolean;
+    clampValueOnBlur?: boolean;
+    allowMouseWheel?: boolean;
+    onInvalid?: (message: ValidityState, value: string, valueAsNumber: number) => void;
+    getAriaValueText?: (value: string | number) => string;
+    isValidCharacter?: (value: string) => boolean;
+    parse?: (value: string) => string;
+    format?: (value: string | number) => string | number;
+};
+declare const useNumberInput: (props?: UseNumberInputProps) => {
+    value: string;
+    valueAsNumber: number;
+    isFocused: boolean;
+    isRequired: boolean | undefined;
+    isReadOnly: boolean | undefined;
+    isDisabled: boolean | undefined;
+    getInputProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getIncrementProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getDecrementProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type NumberInputOptions = {
+    isStepper?: boolean;
+    container?: HTMLUIProps<'div'>;
+    addon?: HTMLUIProps<'div'>;
+    increment?: NumberIncrementStepperProps;
+    decrement?: NumberDecrementStepperProps;
+    focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+};
+type NumberInputProps = Omit<HTMLUIProps<'input'>, 'disabled' | 'required' | 'readOnly' | 'size' | 'onChange'> & ThemeProps<'NumberInput'> & Omit<UseNumberInputProps, 'disabled' | 'required' | 'readOnly'> & NumberInputOptions;
+declare const NumberInput: _yamada_ui_core.Component<"input", NumberInputProps>;
+type NumberIncrementStepperProps = HTMLUIProps<'div'>;
+type NumberDecrementStepperProps = HTMLUIProps<'div'>;
+
+export { NumberInput, NumberInputProps, UseNumberInputProps, useNumberInput };