@bspk/ui 1.3.3 → 1.3.5

package/dist/components/{TextInput/text-input.css → Input/input.css}

@@ -1,4 +1,4 @@
-[data-bspk=text-input] {
+[data-bspk=input] {
   --border-color: var(--stroke-neutral-base);
   display: flex;
   flex-flow: row nowrap;
@@ -10,10 +10,10 @@
   gap: var(--spacing-sizing-01);
   width: 100%;
 }
-[data-bspk=text-input][data-show-clear-button] {
+[data-bspk=input][data-show-clear-button] {
   padding-right: 0;
 }
-[data-bspk=text-input] > * {
+[data-bspk=input] > * {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,60 +22,64 @@
   color: var(--foreground-neutral-on-surface);
   min-width: 0;
 }
-[data-bspk=text-input]:hover:not(:focus-within) {
+[data-bspk=input]:hover:not(:focus-within) {
   background: linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input]:active:not(:focus-within) {
+[data-bspk=input]:active:not(:focus-within) {
   background: linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-readonly] {
+[data-bspk=input][data-readonly] {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled], [data-bspk=text-input]:has([data-main-input][disabled]) {
+[data-bspk=input][data-disabled], [data-bspk=input]:has([data-main-input][disabled]) {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled] > *, [data-bspk=text-input]:has([data-main-input][disabled]) > * {
+[data-bspk=input][data-disabled] > *, [data-bspk=input]:has([data-main-input][disabled]) > * {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=text-input][data-invalid] {
+[data-bspk=input][data-invalid] {
   --border-color: var(--status-error);
 }
-[data-bspk=text-input][data-size=small] {
+[data-bspk=input]:focus-within {
+  --border-color: var(--stroke-neutral-focus);
+  outline: 1px solid var(--stroke-neutral-focus);
+}
+[data-bspk=input][data-size=small] {
   --field-padding: var(--spacing-sizing-02);
   --field-height: var(--spacing-sizing-08);
   --field-font: var(--body-small);
   --field-icon-width: var(--spacing-sizing-04);
   --field-clear-width: var(--spacing-sizing-05);
 }
-[data-bspk=text-input][data-size=medium] {
+[data-bspk=input][data-size=medium] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-10);
   --field-font: var(--body-base);
   --field-icon-width: var(--spacing-sizing-05);
   --field-clear-width: var(--spacing-sizing-05);
 }
-[data-bspk=text-input][data-size=large] {
+[data-bspk=input][data-size=large] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-12);
   --field-font: var(--body-large);
   --field-icon-width: var(--spacing-sizing-06);
   --field-clear-width: var(--spacing-sizing-06);
 }
-[data-bspk=text-input] [data-leading],
-[data-bspk=text-input] [data-trailing] {
+[data-bspk=input] [data-leading],
+[data-bspk=input] [data-trailing] {
   position: relative;
 }
-[data-bspk=text-input] [data-leading] svg,
-[data-bspk=text-input] [data-trailing] svg {
+[data-bspk=input] [data-leading] svg,
+[data-bspk=input] [data-trailing] svg {
   width: var(--field-icon-width);
 }
-[data-bspk=text-input] label {
+[data-bspk=input] label {
   font: var(--labels-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=text-input] [data-main-input] {
+[data-bspk=input] [data-main-input] {
   flex: 1;
   background-color: transparent !important;
   border: none;
@@ -84,12 +88,8 @@
   pointer-events: all;
   text-overflow: ellipsis;
 }
-[data-bspk=text-input] [data-main-input][type=number]::-webkit-inner-spin-button, [data-bspk=text-input] [data-main-input][type=number]::-webkit-outer-spin-button {
+[data-bspk=input] [data-main-input][type=number]::-webkit-inner-spin-button, [data-bspk=input] [data-main-input][type=number]::-webkit-outer-spin-button {
   display: none;
 }
-[data-bspk=text-input]:focus-within {
-  --border-color: var(--stroke-neutral-focus);
-  outline: 1px solid var(--stroke-neutral-focus);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/{TextInput/text-input.css.js → Input/input.css.js}

@@ -1,7 +1,7 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=text-input] {
+style.appendChild(document.createTextNode(`[data-bspk=input] {
   --border-color: var(--stroke-neutral-base);
   display: flex;
   flex-flow: row nowrap;
@@ -13,10 +13,10 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   gap: var(--spacing-sizing-01);
   width: 100%;
 }
-[data-bspk=text-input][data-show-clear-button] {
+[data-bspk=input][data-show-clear-button] {
   padding-right: 0;
 }
-[data-bspk=text-input] > * {
+[data-bspk=input] > * {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,60 +25,64 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   color: var(--foreground-neutral-on-surface);
   min-width: 0;
 }
-[data-bspk=text-input]:hover:not(:focus-within) {
+[data-bspk=input]:hover:not(:focus-within) {
   background: linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input]:active:not(:focus-within) {
+[data-bspk=input]:active:not(:focus-within) {
   background: linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-readonly] {
+[data-bspk=input][data-readonly] {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled], [data-bspk=text-input]:has([data-main-input][disabled]) {
+[data-bspk=input][data-disabled], [data-bspk=input]:has([data-main-input][disabled]) {
   --border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=text-input][data-disabled] > *, [data-bspk=text-input]:has([data-main-input][disabled]) > * {
+[data-bspk=input][data-disabled] > *, [data-bspk=input]:has([data-main-input][disabled]) > * {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=text-input][data-invalid] {
+[data-bspk=input][data-invalid] {
   --border-color: var(--status-error);
 }
-[data-bspk=text-input][data-size=small] {
+[data-bspk=input]:focus-within {
+  --border-color: var(--stroke-neutral-focus);
+  outline: 1px solid var(--stroke-neutral-focus);
+}
+[data-bspk=input][data-size=small] {
   --field-padding: var(--spacing-sizing-02);
   --field-height: var(--spacing-sizing-08);
   --field-font: var(--body-small);
   --field-icon-width: var(--spacing-sizing-04);
   --field-clear-width: var(--spacing-sizing-05);
 }
-[data-bspk=text-input][data-size=medium] {
+[data-bspk=input][data-size=medium] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-10);
   --field-font: var(--body-base);
   --field-icon-width: var(--spacing-sizing-05);
   --field-clear-width: var(--spacing-sizing-05);
 }
-[data-bspk=text-input][data-size=large] {
+[data-bspk=input][data-size=large] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-12);
   --field-font: var(--body-large);
   --field-icon-width: var(--spacing-sizing-06);
   --field-clear-width: var(--spacing-sizing-06);
 }
-[data-bspk=text-input] [data-leading],
-[data-bspk=text-input] [data-trailing] {
+[data-bspk=input] [data-leading],
+[data-bspk=input] [data-trailing] {
   position: relative;
 }
-[data-bspk=text-input] [data-leading] svg,
-[data-bspk=text-input] [data-trailing] svg {
+[data-bspk=input] [data-leading] svg,
+[data-bspk=input] [data-trailing] svg {
   width: var(--field-icon-width);
 }
-[data-bspk=text-input] label {
+[data-bspk=input] label {
   font: var(--labels-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=text-input] [data-main-input] {
+[data-bspk=input] [data-main-input] {
   flex: 1;
   background-color: transparent !important;
   border: none;
@@ -87,13 +91,9 @@ style.appendChild(document.createTextNode(`[data-bspk=text-input] {
   pointer-events: all;
   text-overflow: ellipsis;
 }
-[data-bspk=text-input] [data-main-input][type=number]::-webkit-inner-spin-button, [data-bspk=text-input] [data-main-input][type=number]::-webkit-outer-spin-button {
+[data-bspk=input] [data-main-input][type=number]::-webkit-inner-spin-button, [data-bspk=input] [data-main-input][type=number]::-webkit-outer-spin-button {
   display: none;
 }
-[data-bspk=text-input]:focus-within {
-  --border-color: var(--stroke-neutral-focus);
-  outline: 1px solid var(--stroke-neutral-focus);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

package/dist/components/InputField/InputField.d.ts

@@ -0,0 +1,15 @@
+import { FormFieldControlProps } from '-/components/FormField';
+import { InputProps } from '-/components/Input';
+export type InputFieldProps = FormFieldControlProps<InputProps>;
+/**
+ * A field wrapper for the Input component.
+ *
+ * This component takes properties from the FormField and Input components.
+ *
+ * @name InputField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export declare function InputField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputField/InputField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { Input } from '../Input';
+/**
+ * A field wrapper for the Input component.
+ *
+ * This component takes properties from the FormField and Input components.
+ *
+ * @name InputField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(Input, { ...controlProps }) }));
+}
+//# sourceMappingURL=InputField.js.map

package/dist/components/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/components/InputField/InputField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AAIvD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACD;IACd,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,KAAK,OAAK,YAAY,GAAI,GACnB,CACf,CAAC;AACN,CAAC"}

package/dist/components/InputField/index.d.ts

@@ -0,0 +1 @@
+export * from './InputField';

package/dist/components/InputField/index.js

@@ -0,0 +1,2 @@
+export * from './InputField';
+//# sourceMappingURL=index.js.map

package/dist/components/InputField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputField/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/{NumberInput → InputNumber}/IncrementButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IncrementButton.js","sourceRoot":"","sources":["../../../src/components/NumberInput/IncrementButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AASpD,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAwB;IAC/F,MAAM,GAAG,GAAG,SAAS,KAAK,CAAC,CAAC;IAE5B,MAAM,EAAE,iBAAiB,EAAE,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;IAEhG,OAAO,CACH,oBACQ,QAAQ,mBACG,OAAO,iBACV,MAAM,oBACF,SAAS,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,YAEZ,GAAG,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC5B,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"IncrementButton.js","sourceRoot":"","sources":["../../../src/components/InputNumber/IncrementButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AASpD,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAwB;IAC/F,MAAM,GAAG,GAAG,SAAS,KAAK,CAAC,CAAC;IAE5B,MAAM,EAAE,iBAAiB,EAAE,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;IAEhG,OAAO,CACH,oBACQ,QAAQ,mBACG,OAAO,iBACV,MAAM,oBACF,SAAS,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,YAEZ,GAAG,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC5B,CACZ,CAAC;AACN,CAAC"}

package/dist/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,74 @@
+import './input-number.scss';
+import { CommonProps, FieldControlProps } from '-/types/common';
+export type InputNumberProps = CommonProps<'size'> & FieldControlProps<number> & {
+    /**
+     * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
+     *
+     * @default center
+     */
+    align?: 'center' | 'left';
+    /**
+     * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
+     * accepted.
+     */
+    max?: number;
+    /**
+     * Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is
+     * accepted.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The amount to increment or decrement the value by when the (+) or (-) buttons are pressed.
+     *
+     * @default 1
+     */
+    step?: number;
+};
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
+ * For a more complete example with field usage, see the InputNumberField component.
+ *
+ * @example
+ *     import { InputNumber } from '@bspk/ui/InputNumber';
+ *
+ *     function ExampleStandalone() {
+ *         const [state, setState] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <InputNumber
+ *                 aria-label="Example aria-label"
+ *                 name="example-name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [state, setState] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Input Number</FieldLabel>
+ *                 <InputNumber
+ *                     aria-label="Example aria-label"
+ *                     name="example-name"
+ *                     onChange={(nextValue) => setState(nextValue)}
+ *                     value={state}
+ *                 />
+ *                 <FieldDescription>The input number allows you to increment or decrement a value.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name InputNumber
+ * @phase UXReview
+ */
+export declare function InputNumber({ value: valueProp, onChange, align, size, disabled, readOnly, name, id: idProp, 'aria-label': ariaLabel, max: maxProp, min, invalid: invalidProp, step, required, ...inputElementProps }: InputNumberProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/{NumberInput/NumberInput.js → InputNumber/InputNumber.js}

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './number-input.css.js';
+import './input-number.css.js';
 import { useMemo } from 'react';
 import { IncrementButton } from './IncrementButton';
+import { useFieldInit } from '../Field';
 import { useId } from '../../hooks/useId';
 function isNumber(value, fallbackValue = undefined) {
     if (typeof value === 'number')
@@ -17,35 +18,61 @@ function isNumber(value, fallbackValue = undefined) {
  *
  * The value of the input is a number. The value is clamped to the min and max values if they are provided.
  *
+ * For a more complete example with field usage, see the InputNumberField component.
+ *
  * @example
- *     import { NumberInput } from '@bspk/ui/NumberInput';
+ *     import { InputNumber } from '@bspk/ui/InputNumber';
  *
- *     export function Example() {
- *         const [state, setState] = React.useState<number>();
+ *     function ExampleStandalone() {
+ *         const [state, setState] = React.useState<number | undefined>();
  *
  *         return (
- *             <NumberInput
+ *             <InputNumber
  *                 aria-label="Example aria-label"
- *                 name="Example name"
+ *                 name="example-name"
  *                 onChange={(nextValue) => setState(nextValue)}
  *                 value={state}
  *             />
  *         );
  *     }
  *
- * @name NumberInput
- * @phase Utility
+ *     function ExampleWithField() {
+ *         const [state, setState] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Input Number</FieldLabel>
+ *                 <InputNumber
+ *                     aria-label="Example aria-label"
+ *                     name="example-name"
+ *                     onChange={(nextValue) => setState(nextValue)}
+ *                     value={state}
+ *                 />
+ *                 <FieldDescription>The input number allows you to increment or decrement a value.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name InputNumber
+ * @phase UXReview
  */
-export function NumberInput({ value: valueProp, onChange, align = 'center', size = 'medium', disabled = false, readOnly = false, name, id: inputIdProp, 'aria-label': ariaLabel, max: maxProp, min = 0, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, step = 1, ...inputElementProps }) {
+export function InputNumber({ value: valueProp, onChange, align = 'center', size = 'medium', disabled = false, readOnly = false, name, id: idProp, 'aria-label': ariaLabel = 'Input number', max: maxProp, min = 0, invalid: invalidProp = false, step = 1, required = false, ...inputElementProps }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
-    const inputId = useId(inputIdProp);
+    const inputId = useId(id);
     const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
     const handleIncrement = (increment) => {
         onChange(value + increment * step);
     };
-    return (_jsxs("div", { "data-bspk": "number-input", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && (_jsx(IncrementButton, { disabled: disabled ? true : value + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })), _jsx("input", { ...inputElementProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid, "aria-label": ariaLabel, autoComplete: "off", "data-input": true, "data-stepper-input-element": true, disabled: disabled, id: inputId, inputMode: "numeric", max: max, min: min, name: name, onChange: (e) => {
+    return (_jsxs("div", { "data-bspk": "input-number", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && (_jsx(IncrementButton, { disabled: disabled ? true : value + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })), _jsx("input", { ...inputElementProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid, "aria-label": ariaLabel, autoComplete: "off", "data-input": true, "data-stepper-input-element": true, disabled: disabled, id: inputId, inputMode: "numeric", max: max, min: min, name: name, onChange: (e) => {
                     onChange(isNumber(e.target.value));
-                }, readOnly: readOnly, step: step, type: "number", value: value }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { disabled: !!disabled || value + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })] })), _jsx(IncrementButton, { disabled: !!disabled || value + 1 > max, increment: 1, inputId: inputId, onIncrement: handleIncrement })] }));
+                }, readOnly: readOnly, required: required, step: step, type: "number", value: value }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { disabled: !!disabled || value + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })] })), _jsx(IncrementButton, { disabled: !!disabled || value + 1 > max, increment: 1, inputId: inputId, onIncrement: handleIncrement })] }));
 }
-//# sourceMappingURL=NumberInput.js.map
+//# sourceMappingURL=InputNumber.js.map

package/dist/components/InputNumber/InputNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputNumber/InputNumberExample.d.ts

@@ -0,0 +1,3 @@
+import { InputNumberProps } from './InputNumber';
+import { ComponentExample } from '-/utils/demo';
+export declare const InputNumberExample: ComponentExample<InputNumberProps>;

package/dist/components/{NumberInput/NumberInputExample.js → InputNumber/InputNumberExample.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const NumberInputExample = {
+export const InputNumberExample = {
     render: ({ props, Component }) => _jsx(Component, { ...props }),
 };
-//# sourceMappingURL=NumberInputExample.js.map
+//# sourceMappingURL=InputNumberExample.js.map

package/dist/components/InputNumber/InputNumberExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumberExample.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumberExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

package/dist/components/InputNumber/index.d.ts

@@ -0,0 +1 @@
+export * from './InputNumber';

package/dist/components/InputNumber/index.js

@@ -0,0 +1,2 @@
+export * from './InputNumber';
+//# sourceMappingURL=index.js.map

package/dist/components/InputNumber/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputNumber/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/{NumberInput/number-input.css → InputNumber/input-number.css}

@@ -1,4 +1,4 @@
-[data-bspk=number-input] {
+[data-bspk=input-number] {
   --font: var(--body-base);
   --height: var(--spacing-sizing-10);
   --svg-width: var(--spacing-sizing-05);
@@ -12,16 +12,16 @@
   border-radius: var(--radius-sm);
   background: var(--surface-neutral-t1-base);
 }
-[data-bspk=number-input]:focus-within {
+[data-bspk=input-number]:focus-within {
   outline: solid 2px var(--stroke-neutral-focus);
 }
-[data-bspk=number-input] [data-divider] {
+[data-bspk=input-number] [data-divider] {
   width: 1px;
   background: var(--stroke-neutral-base);
   margin: 3px 0;
   height: calc(var(--height) - 8px);
 }
-[data-bspk=number-input] button {
+[data-bspk=input-number] button {
   width: var(--height);
   height: calc(var(--height) - 2px);
   background: none;
@@ -34,17 +34,17 @@
   align-items: center;
   color: var(--color);
 }
-[data-bspk=number-input] button svg {
+[data-bspk=input-number] button svg {
   width: var(--svg-width);
 }
-[data-bspk=number-input] button:focus {
+[data-bspk=input-number] button:focus {
   outline: none;
 }
-[data-bspk=number-input] button:disabled {
+[data-bspk=input-number] button:disabled {
   cursor: not-allowed;
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=number-input] input {
+[data-bspk=input-number] input {
   color: var(--color);
   min-width: 0;
   display: block;
@@ -55,44 +55,44 @@
   border: none;
   flex-grow: 1;
 }
-[data-bspk=number-input] input:focus {
+[data-bspk=input-number] input:focus {
   outline: none;
 }
-[data-bspk=number-input] input::-webkit-outer-spin-button, [data-bspk=number-input] input::-webkit-inner-spin-button {
+[data-bspk=input-number] input::-webkit-outer-spin-button, [data-bspk=input-number] input::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
-[data-bspk=number-input] input[type=number] {
+[data-bspk=input-number] input[type=number] {
   appearance: textfield;
 }
-[data-bspk=number-input]:not([data-disabled], [data-readonly]) input:hover,
-[data-bspk=number-input]:not([data-disabled], [data-readonly]) button:not(:disabled):hover {
+[data-bspk=input-number]:not([data-disabled], [data-readonly]) input:hover,
+[data-bspk=input-number]:not([data-disabled], [data-readonly]) button:not(:disabled):hover {
   background-color: var(--interactions-hover-opacity);
 }
-[data-bspk=number-input]:not([data-disabled], [data-readonly]) input:active,
-[data-bspk=number-input]:not([data-disabled], [data-readonly]) button:not(:disabled):active {
+[data-bspk=input-number]:not([data-disabled], [data-readonly]) input:active,
+[data-bspk=input-number]:not([data-disabled], [data-readonly]) button:not(:disabled):active {
   background-color: var(--interactions-press-opacity);
 }
-[data-bspk=number-input]:not([data-disabled], [data-readonly])[data-invalid] {
+[data-bspk=input-number]:not([data-disabled], [data-readonly])[data-invalid] {
   border-color: var(--status-error);
   outline-color: var(--status-error);
 }
-[data-bspk=number-input][data-disabled], [data-bspk=number-input][data-readonly] {
+[data-bspk=input-number][data-disabled], [data-bspk=input-number][data-readonly] {
   --color: var(--foreground-neutral-disabled-on-surface);
   border-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=number-input][data-disabled] [data-divider], [data-bspk=number-input][data-readonly] [data-divider] {
+[data-bspk=input-number][data-disabled] [data-divider], [data-bspk=input-number][data-readonly] [data-divider] {
   border-color: var(--stroke-neutral-disabled-light);
 }
-[data-bspk=number-input][data-readonly] input {
+[data-bspk=input-number][data-readonly] input {
   color: var(--foreground-neutral-on-surface) !important;
 }
-[data-bspk=number-input][data-size=small] {
+[data-bspk=input-number][data-size=small] {
   --font: var(--body-small);
   --height: var(--spacing-sizing-08);
 }
-[data-bspk=number-input][data-size=large] {
+[data-bspk=input-number][data-size=large] {
   --font: var(--body-large);
   --height: var(--spacing-sizing-12);
   --svg-width: var(--spacing-sizing-06);