@bspk/ui 1.3.2 → 1.3.4

package/src/components/Input/InputExample.tsx

@@ -0,0 +1,57 @@
+import { InputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+type InputExampleProps = InputProps & { label: string; description?: string };
+
+export const InputExample: ComponentExample<InputExampleProps> = {
+    defaultState: {
+        label: 'Property Description',
+        description: 'This is a description of the property.',
+        placeholder: 'Waterfront condo with great views',
+    },
+    render: ({ props, Component }) => <Component {...props} />,
+    presets: [
+        {
+            label: 'Currency',
+            propState: {
+                value: '',
+                type: 'number',
+                leading: '$',
+                trailing: undefined,
+                placeholder: '0.00',
+                name: 'currency',
+                label: 'Balance',
+                description: 'Enter the current balance',
+            },
+        },
+        {
+            label: 'Percent',
+            propState: {
+                value: '',
+                type: 'number',
+                leading: undefined,
+                trailing: '%',
+                placeholder: '0',
+                name: 'percent',
+                label: 'Growth Rate',
+                description: 'Enter the expected growth rate',
+            },
+        },
+        {
+            label: 'Dimension',
+            propState: {
+                value: '',
+                type: 'number',
+                leading: undefined,
+                placeholder: '0',
+                trailing: 'Acre(s)',
+                name: 'dimension',
+                label: 'Land Size',
+                description: 'Enter the size of the land',
+            },
+        },
+    ],
+    variants: {
+        type: false,
+    },
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,2 @@
+export * from './Input';
+export * from './InputElement';

package/src/components/{TextInput/text-input.scss → Input/input.scss}

@@ -1,4 +1,4 @@
-[data-bspk='text-input'] {
+[data-bspk='input'] {
     --border-color: var(--stroke-neutral-base);
 
     display: flex;
@@ -62,6 +62,12 @@
         --border-color: var(--status-error);
     }
 
+    &:focus-within {
+        --border-color: var(--stroke-neutral-focus);
+
+        outline: 1px solid var(--stroke-neutral-focus);
+    }
+
     &[data-size='small'] {
         --field-padding: var(--spacing-sizing-02);
         --field-height: var(--spacing-sizing-08);
@@ -114,12 +120,6 @@
             display: none;
         }
     }
-
-    &: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/src/components/InputField/InputField.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { InputField } from '.';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <InputField label="Example field label" name="example-field-name" onChange={() => {}} value="" />;
+
+describe('InputField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getAllByLabelText } = render(<TestBed />);
+
+        expect(getAllByLabelText('Example field label')[0]).toBeInTheDocument();
+    });
+});

package/src/components/InputField/InputField.tsx

@@ -0,0 +1,24 @@
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Input, 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 function InputField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: InputFieldProps) {
+    return (
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <Input {...controlProps} />
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/InputField/index.tsx

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

package/src/components/{TextField/TextField.rtl.test.tsx → InputNumber/InputNumber.rtl.test.tsx}

@@ -1,19 +1,10 @@
-import { TextField } from './TextField';
+import { InputNumber } from './';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => (
-    <TextField
-        aria-label="Example label"
-        controlId="1"
-        label="Example label"
-        name="Example name"
-        onChange={() => {}}
-        value="text value"
-    />
-);
+const TestBed = () => <InputNumber aria-label="Example label" name="example-name" onChange={() => {}} value={24} />;
 
-describe('TextField (RTL)', () => {
+describe('InputNumber (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {

package/src/components/{NumberInput/NumberInput.tsx → InputNumber/InputNumber.tsx}

@@ -1,8 +1,9 @@
-import './number-input.scss';
-import { useCallback, useState } from 'react';
+import './input-number.scss';
+import { useMemo } from 'react';
 import { IncrementButton } from './IncrementButton';
+import { useFieldInit } from '-/components/Field';
 import { useId } from '-/hooks/useId';
-import { CommonProps, FormFieldControlProps } from '-/types/common';
+import { CommonProps, FieldControlProps } from '-/types/common';
 
 function isNumber(value: unknown, fallbackValue: number | undefined = undefined): number | undefined {
     if (typeof value === 'number') return value;
@@ -11,18 +12,8 @@ function isNumber(value: unknown, fallbackValue: number | undefined = undefined)
     return isNaN(num) ? fallbackValue : num;
 }
 
-export type NumberInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
-> &
-    FormFieldControlProps & {
-        /** The value of the control. */
-        value?: number | string;
-        /**
-         * Callback when the value changes.
-         *
-         * @required
-         */
-        onChange: (value: number | string | undefined) => void;
+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.
          *
@@ -55,70 +46,81 @@ export type NumberInputProps = CommonProps<
  *
  * 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,
+export function InputNumber({
+    value: valueProp,
     onChange,
     align = 'center',
     size = 'medium',
     disabled = false,
     readOnly = false,
     name,
-    id: inputIdProp,
-    'aria-label': ariaLabel,
+    id: idProp,
+    'aria-label': ariaLabel = 'Input number',
     max: maxProp,
     min = 0,
-    invalid,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
+    invalid: invalidProp = false,
     step = 1,
+    required = false,
     ...inputElementProps
-}: NumberInputProps) {
+}: InputNumberProps) {
+    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 valueNumber = isNumber(value) || 0;
-
-    const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
+    const inputId = useId(id);
+    const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
 
     const handleIncrement = (increment: -1 | 1) => {
-        if (!inputElement) return;
-        const nextValue = (isNumber(inputElement.value) || 0) + increment * step;
-        handleUpdate(nextValue);
+        onChange(value + increment * step);
     };
 
-    const handleUpdate = useCallback(
-        (nextValue: number | undefined) => {
-            if (!inputElement) return;
-            let nextVal = isNumber(nextValue);
-            if (nextVal !== undefined) nextVal = Math.min(Math.max(nextVal, min), max);
-            onChange(nextVal);
-            inputElement.value = nextVal?.toString() || '';
-        },
-        [inputElement, min, max, onChange],
-    );
-
     return (
         <div
-            data-bspk="number-input"
+            data-bspk="input-number"
             data-centered={centered || undefined}
             data-disabled={disabled || undefined}
             data-invalid={invalid || undefined}
@@ -128,7 +130,7 @@ export function NumberInput({
         >
             {!!centered && (
                 <IncrementButton
-                    disabled={disabled ? true : valueNumber + -1 < min}
+                    disabled={disabled ? true : value + -1 < min}
                     increment={-1}
                     inputId={inputId}
                     onIncrement={handleIncrement}
@@ -141,25 +143,28 @@ export function NumberInput({
                 aria-invalid={invalid}
                 aria-label={ariaLabel}
                 autoComplete="off"
-                defaultValue={String(valueNumber)}
+                data-input
+                data-stepper-input-element
                 disabled={disabled}
                 id={inputId}
+                inputMode="numeric"
                 max={max}
                 min={min}
                 name={name}
-                onBlur={() => {
-                    handleUpdate(isNumber(inputElement?.value));
+                onChange={(e) => {
+                    onChange(isNumber(e.target.value));
                 }}
                 readOnly={readOnly}
-                ref={(node) => node && setInputElement(node)}
+                required={required}
                 step={step}
                 type="number"
+                value={value}
             />
             {!centered && (
                 <>
                     <div aria-hidden data-divider />
                     <IncrementButton
-                        disabled={disabled ? true : valueNumber + -1 < min}
+                        disabled={!!disabled || value + -1 < min}
                         increment={-1}
                         inputId={inputId}
                         onIncrement={handleIncrement}
@@ -167,7 +172,7 @@ export function NumberInput({
                 </>
             )}
             <IncrementButton
-                disabled={disabled ? true : valueNumber + 1 > max}
+                disabled={!!disabled || value + 1 > max}
                 increment={1}
                 inputId={inputId}
                 onIncrement={handleIncrement}

package/src/components/{NumberInput/NumberInputExample.tsx → InputNumber/InputNumberExample.tsx}

@@ -1,6 +1,6 @@
-import { NumberInputProps } from './NumberInput';
+import { InputNumberProps } from './InputNumber';
 import { ComponentExample } from '-/utils/demo';
 
-export const NumberInputExample: ComponentExample<NumberInputProps> = {
+export const InputNumberExample: ComponentExample<InputNumberProps> = {
     render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/InputNumber/index.tsx

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

package/src/components/{NumberInput/number-input.scss → InputNumber/input-number.scss}

@@ -1,4 +1,4 @@
-[data-bspk='number-input'] {
+[data-bspk='input-number'] {
     // medium is the default size
     --font: var(--body-base);
     --height: var(--spacing-sizing-10);

package/src/components/InputNumberField/InputNumberField.rtl.test.tsx

@@ -0,0 +1,17 @@
+import { InputNumberField } from '.';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <InputNumberField label="Example field label" name="example-field-name" onChange={() => {}} value={0} />
+);
+
+describe('InputNumberField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getAllByLabelText } = render(<TestBed />);
+
+        expect(getAllByLabelText('Example field label')[0]).toBeInTheDocument();
+    });
+});

package/src/components/InputNumberField/InputNumberField.tsx

@@ -0,0 +1,30 @@
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { InputNumber, InputNumberProps } from '-/components/InputNumber';
+
+export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
+
+/**
+ * A field wrapper for the InputNumber component.
+ *
+ * This component takes properties from the FormField and InputNumber components.
+ *
+ * @name InputNumberField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputNumberField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    ...controlProps
+}: InputNumberFieldProps) {
+    return (
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <InputNumber {...controlProps} />
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/InputNumberField/index.tsx

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

package/src/components/InputPhone/InputPhone.rtl.test.tsx

@@ -0,0 +1,17 @@
+import { InputPhone } from './';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <InputPhone aria-label="Phone number input" name="example-name" onChange={() => {}} value="9375551060" />
+);
+
+describe('InputPhone (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getAllByLabelText } = render(<TestBed />);
+
+        expect(getAllByLabelText('Phone number input')[0]).toBeInTheDocument();
+    });
+});