@yamada-ui/number-input 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/number-input
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/number-input
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/number-input
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/number-input
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-L2FQDPVY.mjs

@@ -0,0 +1,538 @@
+// src/number-input.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import {
+  useFormControlProps,
+  formControlProperties
+} from "@yamada-ui/form-control";
+import { ChevronIcon } from "@yamada-ui/icon";
+import { useCounter } from "@yamada-ui/use-counter";
+import { useEventListener } from "@yamada-ui/use-event-listener";
+import { useInterval } from "@yamada-ui/use-interval";
+import {
+  ariaAttr,
+  createContext,
+  cx,
+  handlerAll,
+  mergeRefs,
+  omitObject,
+  pickObject,
+  useCallbackRef,
+  useSafeLayoutEffect,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "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
+  } = useFormControlProps(props);
+  const isRequired = required;
+  const isReadOnly = readOnly;
+  const isDisabled = disabled;
+  const [isFocused, setFocused] = useState(false);
+  const isInteractive = !(readOnly || disabled);
+  const inputRef = useRef(null);
+  const inputSelectionRef = useRef(null);
+  const incrementRef = useRef(null);
+  const decrementRef = useRef(null);
+  const onFocus = useCallbackRef(
+    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 = useCallbackRef(
+    handlerAll(rest.onBlur, () => {
+      setFocused(false);
+      if (clampValueOnBlur)
+        validateAndClamp();
+    })
+  );
+  const onInvalid = useCallbackRef(rest.onInvalid);
+  const isValidCharacter = useCallbackRef((_a = rest.isValidCharacter) != null ? _a : isDefaultValidCharacter);
+  const { isMin, isMax, isOut, value, valueAsNumber, setValue, update, cast, ...counter } = useCounter({
+    min,
+    max,
+    precision,
+    keepWithinRange,
+    ...rest
+  });
+  const sanitize = useCallback(
+    (value2) => value2.split("").filter(isValidCharacter).join(""),
+    [isValidCharacter]
+  );
+  const parse = useCallback((value2) => {
+    var _a2, _b;
+    return (_b = (_a2 = rest.parse) == null ? void 0 : _a2.call(rest, value2)) != null ? _b : value2;
+  }, [rest]);
+  const format = useCallback(
+    (value2) => {
+      var _a2, _b;
+      return ((_b = (_a2 = rest.format) == null ? void 0 : _a2.call(rest, value2)) != null ? _b : value2).toString();
+    },
+    [rest]
+  );
+  const increment = useCallback(
+    (step = ((_b) => (_b = rest.step) != null ? _b : 1)()) => {
+      if (isInteractive)
+        counter.increment(step);
+    },
+    [isInteractive, counter, rest.step]
+  );
+  const decrement = useCallback(
+    (step = ((_c) => (_c = rest.step) != null ? _c : 1)()) => {
+      if (isInteractive)
+        counter.decrement(step);
+    },
+    [isInteractive, counter, rest.step]
+  );
+  const validateAndClamp = 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 = 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 = 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 = useCallback(() => {
+    if (focusInputOnChange)
+      requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      });
+  }, [focusInputOnChange]);
+  const eventUp = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      up();
+      focusInput();
+    },
+    [focusInput, up]
+  );
+  const eventDown = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      down();
+      focusInput();
+    },
+    [focusInput, down]
+  );
+  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]);
+  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]);
+  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 = useCallback(
+    (props2 = {}, ref = null) => ({
+      id,
+      name,
+      type: "text",
+      inputMode,
+      pattern,
+      required,
+      disabled,
+      readOnly,
+      ...pickObject(rest, formControlProperties),
+      ...omitObject(props2, ["defaultValue"]),
+      ref: mergeRefs(inputRef, ref),
+      value: format(value),
+      "aria-invalid": ariaAttr(isInvalid != null ? isInvalid : isOut),
+      autoComplete: "off",
+      autoCorrect: "off",
+      onChange: handlerAll(props2.onChange, onChange),
+      onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
+      onFocus: handlerAll(props2.onFocus, onFocus),
+      onBlur: handlerAll(props2.onBlur, onBlur)
+    }),
+    [
+      id,
+      name,
+      inputMode,
+      pattern,
+      required,
+      disabled,
+      readOnly,
+      rest,
+      format,
+      value,
+      isInvalid,
+      isOut,
+      onChange,
+      onKeyDown,
+      onFocus,
+      onBlur
+    ]
+  );
+  const getIncrementProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const disabled2 = props2.disabled || keepWithinRange && isMax;
+      return {
+        required,
+        readOnly,
+        disabled: disabled2,
+        ...pickObject(rest, formControlProperties),
+        ...props2,
+        ref: mergeRefs(ref, incrementRef),
+        role: "button",
+        tabIndex: -1,
+        cursor: readOnly ? "not-allowed" : props2.cursor,
+        onPointerDown: handlerAll(props2.onPointerDown, (ev) => {
+          if (ev.button === 0 && !disabled2)
+            eventUp(ev);
+        }),
+        onPointerLeave: handlerAll(props2.onPointerLeave, stop),
+        onPointerUp: handlerAll(props2.onPointerUp, stop)
+      };
+    },
+    [keepWithinRange, isMax, required, readOnly, rest, stop, eventUp]
+  );
+  const getDecrementProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const disabled2 = props2.disabled || keepWithinRange && isMin;
+      return {
+        required,
+        readOnly,
+        disabled: disabled2,
+        ...pickObject(rest, formControlProperties),
+        ...props2,
+        ref: mergeRefs(ref, decrementRef),
+        role: "button",
+        tabIndex: -1,
+        cursor: readOnly ? "not-allowed" : props2.cursor,
+        onPointerDown: handlerAll(props2.onPointerDown, (ev) => {
+          if (ev.button === 0 && !disabled2)
+            eventDown(ev);
+        }),
+        onPointerLeave: handlerAll(props2.onPointerLeave, stop),
+        onPointerUp: 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] = useState(false);
+  const [action, setAction] = useState(null);
+  const [isOnce, setIsOnce] = useState(true);
+  const timeoutRef = useRef(null);
+  const removeTimeout = () => clearTimeout(timeoutRef.current);
+  useInterval(
+    () => {
+      if (action === "increment")
+        increment();
+      if (action === "decrement")
+        decrement();
+    },
+    isSpinning ? INTERVAL : null
+  );
+  const up = useCallback(() => {
+    if (isOnce)
+      increment();
+    timeoutRef.current = setTimeout(() => {
+      setIsOnce(false);
+      setIsSpinning(true);
+      setAction("increment");
+    }, DELAY);
+  }, [increment, isOnce]);
+  const down = useCallback(() => {
+    if (isOnce)
+      decrement();
+    timeoutRef.current = setTimeout(() => {
+      setIsOnce(false);
+      setIsSpinning(true);
+      setAction("decrement");
+    }, DELAY);
+  }, [decrement, isOnce]);
+  const stop = useCallback(() => {
+    setIsOnce(true);
+    setIsSpinning(false);
+    removeTimeout();
+  }, []);
+  useEffect(() => {
+    return () => removeTimeout();
+  }, []);
+  return { up, down, stop, isSpinning };
+};
+var useAttributeObserver = (ref, attributeFilter, enabled, func) => {
+  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] = createContext({
+  strict: false,
+  name: "NumberInputContext"
+});
+var NumberInput = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("NumberInput", props);
+  const {
+    className,
+    isStepper = true,
+    container,
+    addon,
+    increment,
+    decrement,
+    onChange,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const { getInputProps, getIncrementProps, getDecrementProps } = useNumberInput({
+    onChange,
+    ...rest
+  });
+  const css = {
+    position: "relative",
+    zIndex: 0,
+    ...styles.container
+  };
+  return /* @__PURE__ */ jsx(
+    NumberInputContextProvider,
+    {
+      value: { getInputProps, getIncrementProps, getDecrementProps, styles },
+      children: /* @__PURE__ */ jsxs(ui.div, { className: cx("ui-number-input", className), __css: css, ...container, children: [
+        /* @__PURE__ */ jsx(NumberInputField, { ...getInputProps(rest, ref) }),
+        isStepper ? /* @__PURE__ */ jsxs(NumberInputAddon, { ...addon, children: [
+          /* @__PURE__ */ jsx(NumberIncrementStepper, { ...increment }),
+          /* @__PURE__ */ jsx(NumberDecrementStepper, { ...decrement })
+        ] }) : null
+      ] })
+    }
+  );
+});
+var NumberInputField = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useNumberInputContext();
+    const css = {
+      width: "100%",
+      ...styles.field
+    };
+    return /* @__PURE__ */ jsx(
+      ui.input,
+      {
+        ref,
+        className: cx("ui-number-input-field", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var NumberInputAddon = 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__ */ jsx(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-number-input-addon", className),
+      "aria-hidden": true,
+      __css: css,
+      ...rest
+    }
+  );
+});
+var Stepper = ui("div", {
+  baseStyle: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 1,
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    userSelect: "none",
+    cursor: "pointer",
+    lineHeight: "normal"
+  }
+});
+var NumberIncrementStepper = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const { getIncrementProps, styles } = useNumberInputContext();
+    const css = { ...styles.stepper };
+    return /* @__PURE__ */ jsx(
+      Stepper,
+      {
+        className: cx("ui-number-input-stepper", className),
+        ...getIncrementProps(rest, ref),
+        __css: css,
+        children: children != null ? children : /* @__PURE__ */ jsx(ChevronIcon, { __css: { transform: "rotate(180deg)" } })
+      }
+    );
+  }
+);
+var NumberDecrementStepper = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const { getDecrementProps, styles } = useNumberInputContext();
+    const css = { ...styles.stepper };
+    return /* @__PURE__ */ jsx(
+      Stepper,
+      {
+        className: cx("ui-number-input-stepper", className),
+        ...getDecrementProps(rest, ref),
+        __css: css,
+        children: children != null ? children : /* @__PURE__ */ jsx(ChevronIcon, {})
+      }
+    );
+  }
+);
+
+export {
+  useNumberInput,
+  NumberInput
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { NumberInput, NumberInputProps, UseNumberInputProps, useNumberInput } from './number-input.js';
+import '@yamada-ui/core';
+import '@yamada-ui/utils';
+import '@yamada-ui/form-control';
+import '@yamada-ui/use-counter';
+import 'react';