@yamada-ui/number-input 0.1.11 → 0.2.0

package/dist/{chunk-L2FQDPVY.mjs → chunk-BQMXCZW3.mjs}

@@ -416,10 +416,10 @@ var NumberInput = forwardRef((props, ref) => {
   const {
     className,
     isStepper = true,
-    container,
-    addon,
-    increment,
-    decrement,
+    containerProps,
+    addonProps,
+    incrementProps,
+    decrementProps,
     onChange,
     ...rest
   } = omitThemeProps(mergedProps);
@@ -436,11 +436,11 @@ var NumberInput = forwardRef((props, ref) => {
     NumberInputContextProvider,
     {
       value: { getInputProps, getIncrementProps, getDecrementProps, styles },
-      children: /* @__PURE__ */ jsxs(ui.div, { className: cx("ui-number-input", className), __css: css, ...container, children: [
+      children: /* @__PURE__ */ jsxs(ui.div, { className: cx("ui-number-input", className), __css: css, ...containerProps, children: [
         /* @__PURE__ */ jsx(NumberInputField, { ...getInputProps(rest, ref) }),
-        isStepper ? /* @__PURE__ */ jsxs(NumberInputAddon, { ...addon, children: [
-          /* @__PURE__ */ jsx(NumberIncrementStepper, { ...increment }),
-          /* @__PURE__ */ jsx(NumberDecrementStepper, { ...decrement })
+        isStepper ? /* @__PURE__ */ jsxs(NumberInputAddon, { ...addonProps, children: [
+          /* @__PURE__ */ jsx(NumberIncrementStepper, { ...incrementProps }),
+          /* @__PURE__ */ jsx(NumberDecrementStepper, { ...decrementProps })
         ] }) : null
       ] })
     }

package/dist/index.d.ts

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

package/dist/index.js

@@ -419,10 +419,10 @@ var NumberInput = (0, import_core.forwardRef)((props, ref) => {
   const {
     className,
     isStepper = true,
-    container,
-    addon,
-    increment,
-    decrement,
+    containerProps,
+    addonProps,
+    incrementProps,
+    decrementProps,
     onChange,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
@@ -439,11 +439,11 @@ var NumberInput = (0, import_core.forwardRef)((props, ref) => {
     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: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { className: (0, import_utils.cx)("ui-number-input", className), __css: css, ...containerProps, 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 })
+        isStepper ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(NumberInputAddon, { ...addonProps, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberIncrementStepper, { ...incrementProps }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberDecrementStepper, { ...decrementProps })
         ] }) : null
       ] })
     }

package/dist/index.mjs

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

package/dist/number-input.d.ts

@@ -7,16 +7,64 @@ import { InputHTMLAttributes } from 'react';
 
 type ValidityState = 'rangeUnderflow' | 'rangeOverflow';
 type UseNumberInputProps = UseFormControlProps<HTMLInputElement> & UseCounterProps & {
+    /**
+     * The HTML `name` attribute used for forms.
+     */
     name?: string;
+    /**
+     * Hints at the type of data that might be entered by the user.
+     * It also determines the type of keyboard shown to the user on mobile devices.
+     *
+     * @default 'decimal'
+     */
     inputMode?: InputHTMLAttributes<any>['inputMode'];
+    /**
+     * The pattern used to check the <input> element's value against on form submission.
+     *
+     * @default '[0-9]*(.[0-9]+)?'
+     */
     pattern?: InputHTMLAttributes<any>['pattern'];
+    /**
+     * If `true`, the input will be focused as you increment or decrement the value with the stepper.
+     *
+     * @default true
+     */
     focusInputOnChange?: boolean;
+    /**
+     * This controls the value update when you blur out of the input.
+     * - If `true` and the value is greater than `max`, the value will be reset to `max`.
+     * - Else, the value remains the same.
+     *
+     * @default true
+     */
     clampValueOnBlur?: boolean;
+    /**
+     * If `true`, the input's value will change based on mouse wheel.
+     */
     allowMouseWheel?: boolean;
+    /**
+     * The callback invoked when invalid number is entered.
+     */
     onInvalid?: (message: ValidityState, value: string, valueAsNumber: number) => void;
+    /**
+     * This is used to format the value so that screen readers
+     * can speak out a more human-friendly value.
+     *
+     * It is used to set the `aria-valuetext` property of the input.
+     */
     getAriaValueText?: (value: string | number) => string;
+    /**
+     * Whether the pressed key should be allowed in the input.
+     * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/.
+     */
     isValidCharacter?: (value: string) => boolean;
+    /**
+     * If using a custom display format, this converts the custom format to a format `parseFloat` understands.
+     */
     parse?: (value: string) => string;
+    /**
+     * If using a custom display format, this converts the default format to the custom format.
+     */
     format?: (value: string | number) => string | number;
 };
 declare const useNumberInput: (props?: UseNumberInputProps) => {
@@ -30,13 +78,35 @@ declare const useNumberInput: (props?: UseNumberInputProps) => {
     getIncrementProps: PropGetter;
     getDecrementProps: PropGetter;
 };
+type UseNumberInputReturn = ReturnType<typeof useNumberInput>;
 type NumberInputOptions = {
+    /**
+     * If `true`, display the addon for the number input.
+     */
     isStepper?: boolean;
-    container?: HTMLUIProps<'div'>;
-    addon?: HTMLUIProps<'div'>;
-    increment?: NumberIncrementStepperProps;
-    decrement?: NumberDecrementStepperProps;
+    /**
+     * Props for container element.
+     */
+    containerProps?: HTMLUIProps<'div'>;
+    /**
+     * Props for addon component.
+     */
+    addonProps?: HTMLUIProps<'div'>;
+    /**
+     * Props for increment component.
+     */
+    incrementProps?: NumberIncrementStepperProps;
+    /**
+     * Props for decrement component.
+     */
+    decrementProps?: NumberDecrementStepperProps;
+    /**
+     * The border color when the input is focused.
+     */
     focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    /**
+     * The border color when the input is invalid.
+     */
     errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
 };
 type NumberInputProps = Omit<HTMLUIProps<'input'>, 'disabled' | 'required' | 'readOnly' | 'size' | 'onChange'> & ThemeProps<'NumberInput'> & Omit<UseNumberInputProps, 'disabled' | 'required' | 'readOnly'> & NumberInputOptions;
@@ -44,4 +114,4 @@ declare const NumberInput: _yamada_ui_core.Component<"input", NumberInputProps>;
 type NumberIncrementStepperProps = HTMLUIProps<'div'>;
 type NumberDecrementStepperProps = HTMLUIProps<'div'>;
 
-export { NumberInput, NumberInputProps, UseNumberInputProps, useNumberInput };
+export { NumberInput, NumberInputProps, UseNumberInputProps, UseNumberInputReturn, useNumberInput };

package/dist/number-input.js

@@ -417,10 +417,10 @@ var NumberInput = (0, import_core.forwardRef)((props, ref) => {
   const {
     className,
     isStepper = true,
-    container,
-    addon,
-    increment,
-    decrement,
+    containerProps,
+    addonProps,
+    incrementProps,
+    decrementProps,
     onChange,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
@@ -437,11 +437,11 @@ var NumberInput = (0, import_core.forwardRef)((props, ref) => {
     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: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { className: (0, import_utils.cx)("ui-number-input", className), __css: css, ...containerProps, 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 })
+        isStepper ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(NumberInputAddon, { ...addonProps, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberIncrementStepper, { ...incrementProps }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberDecrementStepper, { ...decrementProps })
         ] }) : null
       ] })
     }

package/dist/number-input.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/number-input",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "Yamada UI number input component",
   "keywords": [
     "yamada",
@@ -35,11 +35,11 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.2.3",
+    "@yamada-ui/core": "0.3.1",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/form-control": "0.1.10",
-    "@yamada-ui/icon": "0.1.10",
-    "@yamada-ui/use-counter": "0.1.1",
+    "@yamada-ui/form-control": "0.2.0",
+    "@yamada-ui/icon": "0.2.0",
+    "@yamada-ui/use-counter": "0.2.0",
     "@yamada-ui/use-interval": "0.1.2",
     "@yamada-ui/use-event-listener": "0.1.1"
   },