@yamada-ui/number-input 0.2.4 → 0.2.5

package/dist/index.d.mts

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

package/dist/number-input.d.mts

@@ -0,0 +1,117 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+import { UseFormControlProps } from '@yamada-ui/form-control';
+import { UseCounterProps } from '@yamada-ui/use-counter';
+import { PropGetter } from '@yamada-ui/utils';
+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) => {
+    value: string;
+    valueAsNumber: number;
+    isFocused: boolean;
+    isRequired: boolean | undefined;
+    isReadOnly: boolean | undefined;
+    isDisabled: boolean | undefined;
+    getInputProps: PropGetter;
+    getIncrementProps: PropGetter;
+    getDecrementProps: PropGetter;
+};
+type UseNumberInputReturn = ReturnType<typeof useNumberInput>;
+type NumberInputOptions = {
+    /**
+     * If `true`, display the addon for the number input.
+     */
+    isStepper?: boolean;
+    /**
+     * 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;
+declare const NumberInput: _yamada_ui_core.Component<"input", NumberInputProps>;
+type NumberIncrementStepperProps = HTMLUIProps<'div'>;
+type NumberDecrementStepperProps = HTMLUIProps<'div'>;
+
+export { NumberInput, NumberInputProps, UseNumberInputProps, UseNumberInputReturn, useNumberInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/number-input",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Yamada UI number input component",
   "keywords": [
     "yamada",
@@ -35,13 +35,13 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.4.3",
-    "@yamada-ui/utils": "0.1.2",
-    "@yamada-ui/form-control": "0.2.4",
-    "@yamada-ui/icon": "0.2.4",
-    "@yamada-ui/use-counter": "0.2.1",
-    "@yamada-ui/use-interval": "0.1.3",
-    "@yamada-ui/use-event-listener": "0.1.2"
+    "@yamada-ui/core": "0.5.0",
+    "@yamada-ui/utils": "0.1.3",
+    "@yamada-ui/form-control": "0.2.5",
+    "@yamada-ui/icon": "0.2.5",
+    "@yamada-ui/use-counter": "0.2.2",
+    "@yamada-ui/use-interval": "0.1.4",
+    "@yamada-ui/use-event-listener": "0.1.3"
   },
   "devDependencies": {
     "react": "^18.0.0",