@bspk/ui 1.3.9 → 1.3.11

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

@@ -1,6 +1,5 @@
 import { ChipGroup } from './ChipGroup';
 import { presets } from './ChipGroupExample';
-import { Chip } from '-/components/Chip';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
@@ -9,22 +8,28 @@ describe('ChipGroup (RTL)', () => {
         it(
             `has no basic a11y issues - ${preset.label}`,
             hasNoBasicA11yIssues(
-                <ChipGroup {...preset.propState}>
-                    <Chip label="suggestion 1" onClick={() => {}} />
-                    <Chip label="suggestion 2" onClick={() => {}} />
-                    <Chip label="suggestion 3" onClick={() => {}} />
-                </ChipGroup>,
+                <ChipGroup
+                    {...preset.propState}
+                    items={[
+                        { label: 'suggestion 1', onClick: () => {} },
+                        { label: 'suggestion 2', onClick: () => {} },
+                        { label: 'suggestion 3', onClick: () => {} },
+                    ]}
+                />,
             ),
         );
     });
 
     it('renders', () => {
         const { getByText } = render(
-            <ChipGroup {...presets[1].propState}>
-                <Chip label="suggestion 1" onClick={() => {}} />
-                <Chip label="suggestion 2" onClick={() => {}} />
-                <Chip label="suggestion 3" onClick={() => {}} />
-            </ChipGroup>,
+            <ChipGroup
+                {...presets[1].propState}
+                items={[
+                    { label: 'suggestion 1', onClick: () => {} },
+                    { label: 'suggestion 2', onClick: () => {} },
+                    { label: 'suggestion 3', onClick: () => {} },
+                ]}
+            />,
         );
 
         expect(getByText('suggestion 1')).toBeInTheDocument();

package/src/components/ChipGroup/ChipGroup.tsx

@@ -1,23 +1,17 @@
 import './chip-group.scss';
 
-import { ReactNode } from 'react';
-
-import { ChipProps } from '-/components/Chip';
-
-export type ChipGroupItem = Pick<
-    ChipProps,
-    'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'
->;
+import { Chip, ChipProps } from '-/components/Chip';
 
 export type ChipGroupProps = {
     /**
-     * To allow chips to wrap. If set to false chips will scroll.
+     * Controls the overflow behavior of the chip group. If set to `scroll`, the chip group will be scrollable
+     * horizontally. If set to `wrap`, the chip group will wrap to multiple lines as needed.
      *
-     * @default true
+     * @default wrap
      */
-    wrap?: boolean;
-    /** Only Chip components should be used as children. */
-    children?: ReactNode;
+    overflow?: 'scroll' | 'wrap';
+    /** Only Chip components should be used as items. */
+    items?: ChipProps[];
 };
 /**
  * A component that manages the layout of a group of chips.
@@ -26,34 +20,22 @@ export type ChipGroupProps = {
  *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     <ChipGroup wrap={false}>
- *         <Chip
- *             label="chip 1"
- *             leadingIcon={<SvgLightbulb />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 2"
- *             leadingIcon={<SvgIcecream />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 3"
- *             leadingIcon={<SvgSignLanguage />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgClose />}
- *         />
- *     </ChipGroup>;
+ *     <ChipGroup
+ *         overflow="scroll"
+ *         items={[
+ *             { label: 'chip 1', leadingIcon: <SvgLightbulb />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 2', leadingIcon: <SvgIcecream />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 3', leadingIcon: <SvgSignLanguage />, onClick: () => {}, trailingIcon: <SvgClose /> },
+ *         ]}
+ *     />;
  *
  * @name ChipGroup
  * @phase UXReview
  */
-export function ChipGroup({ children, wrap = true }: ChipGroupProps) {
+export function ChipGroup({ overflow = 'wrap', items }: ChipGroupProps) {
     return (
-        <div data-bspk="chip-group" data-wrap={wrap || undefined}>
-            {children}
+        <div data-bspk="chip-group" data-scroll={overflow === 'scroll' || undefined}>
+            {items?.length ? items.map((item, idx) => <Chip {...item} key={item.label ?? idx} />) : null}
         </div>
     );
 }

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,53 +7,81 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
-import { Chip } from '-/components/Chip';
+// import { Chip } from '-/components/Chip';
 import { ChipGroupProps } from '-/components/ChipGroup';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<ChipGroupProps>[] = [
-    { label: 'scroll', propState: { wrap: false } },
-    { label: 'wrap', propState: { wrap: true } },
+    {
+        label: 'Scroll',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                { label: 'chip 1', leadingIcon: <SvgLightbulb />, trailingIcon: <SvgChevronRight /> },
+                { label: 'chip 2', leadingIcon: <SvgIcecream />, trailingIcon: <SvgChevronRight /> },
+                { label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+                { label: 'chip 4', leadingIcon: <SvgOpportunities />, trailingIcon: <SvgClose /> },
+                { label: 'chip 5', leadingIcon: <SvgCloud />, trailingIcon: <SvgKeyboardArrowDown /> },
+            ],
+        },
+    },
+    {
+        label: 'Scroll: Flat chips',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                {
+                    flat: true,
+                    label: 'chip 1',
+                    leadingIcon: <SvgLightbulb />,
+                    trailingBadge: { count: 9, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 2',
+                    leadingIcon: <SvgIcecream />,
+                    trailingBadge: { count: 2, size: 'x-small' },
+                },
+                { flat: true, label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+                {
+                    flat: true,
+                    label: 'chip 4',
+                    leadingIcon: <SvgOpportunities />,
+                    trailingBadge: { count: 5, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 5',
+                    leadingIcon: <SvgCloud />,
+                    trailingBadge: { count: 3, size: 'x-small' },
+                },
+            ],
+        },
+    },
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
     containerStyle: { width: '600px' },
     presets,
+    defaultState: {
+        overflow: 'wrap',
+        items: [
+            { label: 'chip 1', leadingIcon: <SvgLightbulb />, trailingIcon: <SvgChevronRight /> },
+            { label: 'chip 2', leadingIcon: <SvgIcecream />, trailingIcon: <SvgChevronRight /> },
+            { label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+            { label: 'chip 4', leadingIcon: <SvgOpportunities />, trailingIcon: <SvgClose /> },
+            { label: 'chip 5', leadingIcon: <SvgCloud />, trailingIcon: <SvgKeyboardArrowDown /> },
+        ],
+    },
     render: ({ props, Component }) => {
-        const handleChipInputClick = () => action('Chip clicked!');
         return (
-            <Component {...props}>
-                <Chip
-                    label="chip 1"
-                    leadingIcon={<SvgLightbulb />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgChevronRight />}
-                />
-                <Chip
-                    label="chip 2"
-                    leadingIcon={<SvgIcecream />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgChevronRight />}
-                />
-                <Chip
-                    label="chip 3"
-                    leadingIcon={<SvgSignLanguage />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgClose />}
-                />
-                <Chip
-                    label="chip 4"
-                    leadingIcon={<SvgOpportunities />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgClose />}
-                />
-                <Chip
-                    label="chip 5"
-                    leadingIcon={<SvgCloud />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgKeyboardArrowDown />}
-                />
-            </Component>
+            <Component
+                {...props}
+                items={props.items?.map((item) => ({
+                    ...item,
+                    onClick: () => action('Chip clicked!'),
+                }))}
+            />
         );
     },
 });

package/src/components/ChipGroup/chip-group.scss

@@ -2,10 +2,12 @@
     display: flex;
     gap: var(--spacing-sizing-02);
     width: 100%;
-    overflow: auto;
+    flex-flow: row wrap;
+    padding-bottom: var(--spacing-sizing-01);
 
-    &[data-wrap] {
-        flex-flow: row wrap;
+    &[data-scroll] {
+        overflow: auto;
+        flex-wrap: nowrap;
     }
 }
 

package/src/components/Drawer/Drawer.tsx

@@ -76,7 +76,6 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  * @name Drawer
  * @phase UXReview
  */
-
 export function Drawer({
     header,
     children,

package/src/components/Field/FieldDescription.tsx

@@ -1,6 +1,12 @@
 import { useFieldContext, describedById } from './utils';
 
-function FieldDescription({ children }: { children?: string }) {
+/**
+ * FieldDescription component displays a description associated with a form field.
+ *
+ * @name FieldDescription
+ * @parent Field
+ */
+export function FieldDescription({ children }: { children?: string }) {
     const { id } = useFieldContext();
 
     return children ? (
@@ -9,7 +15,3 @@ function FieldDescription({ children }: { children?: string }) {
         </p>
     ) : null;
 }
-
-FieldDescription.displayName = 'FieldDescription';
-
-export { FieldDescription };

package/src/components/Field/FieldError.tsx

@@ -6,6 +6,12 @@ export type FieldErrorProps = {
     children?: string;
 };
 
+/**
+ * FieldError component displays an error message associated with a form field.
+ *
+ * @name FieldError
+ * @parent Field
+ */
 export function FieldError({ children }: FieldErrorProps) {
     const { id } = useFieldContext();
 

package/src/components/Field/FieldLabel.tsx

@@ -14,6 +14,12 @@ export type FieldLabelProps<As extends ElementType = ElementType> = Pick<FieldCo
     as?: As;
 };
 
+/**
+ * FieldLabel component displays a label associated with a form field.
+ *
+ * @name FieldLabel
+ * @parent Field
+ */
 export function FieldLabel<As extends ElementType = ElementType>({
     children,
     labelTrailing,

package/src/components/Field/utils.ts

@@ -28,6 +28,11 @@ export type FieldContext = FieldContextProps & {
 
 export const fieldContext = createContext<FieldContext | null>(null);
 
+/**
+ * Retrieves the current Field context.
+ *
+ * Will return a default context if used outside of a Field component.
+ */
 export function useFieldContext(): FieldContext {
     return (
         useContext(fieldContext) || {

package/src/components/InlineAlert/SvgWarningTwoTone.tsx

@@ -1,3 +1,9 @@
+/**
+ * SvgWarningTwoTone component renders a two-tone warning SVG icon.
+ *
+ * @name SvgWarningTwoTone
+ * @parent InlineAlert
+ */
 export function SvgWarningTwoTone() {
     return (
         <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

package/src/components/InputNumber/IncrementButton.tsx

@@ -3,29 +3,39 @@ import { SvgRemove } from '@bspk/icons/Remove';
 import { useLongPress } from '-/hooks/useLongPress';
 
 export type IncrementButtonProps = {
+    /** Whether the button is disabled. */
     disabled: boolean;
-    increment: -1 | 1;
-    onIncrement: (increment: -1 | 1) => void;
+    /** The kind of increment button, either 'add' or 'remove'. */
+    kind: 'add' | 'remove';
+    /** The ID of the associated input element. */
     inputId: string;
+    /** Function to trigger the increment action. */
+    triggerIncrement: (kind: 'add' | 'remove') => boolean;
 };
 
-export function IncrementButton({ increment, disabled, onIncrement, inputId }: IncrementButtonProps) {
-    const add = increment === 1;
-
-    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
+/**
+ * A button component for incrementing or decrementing the InputNumber.
+ *
+ * @name IncrementButton
+ * @parent InputNumber
+ */
+export function IncrementButton({ inputId, kind, disabled, triggerIncrement }: IncrementButtonProps) {
+    const { ...pressHandlers } = useLongPress({
+        callback: () => triggerIncrement(kind),
+    });
 
     return (
         <button
-            {...handlers}
+            {...pressHandlers}
             aria-controls={inputId}
-            aria-hidden="true"
-            data-increment={increment}
+            aria-label={kind === 'add' ? 'Increase value' : 'Decrease value'}
+            data-bspk="input-number--increment-button"
+            data-kind={kind}
             disabled={disabled}
-            ref={setTriggerElement}
             tabIndex={-1}
             type="button"
         >
-            {add ? <SvgAdd /> : <SvgRemove />}
+            {kind === 'add' ? <SvgAdd aria-hidden /> : <SvgRemove aria-hidden />}
         </button>
     );
 }

package/src/components/InputNumber/InputNumber.tsx

@@ -1,14 +1,16 @@
 import './input-number.scss';
-import { useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { IncrementButton } from './IncrementButton';
 import { useFieldInit } from '-/components/Field';
 import { useId } from '-/hooks/useId';
 import { CommonProps, FieldControlProps } from '-/types/common';
 
-function isNumber(value: unknown, fallbackValue: number | undefined = undefined): number | undefined {
+function isNumber(value: unknown): number | undefined;
+function isNumber(value: unknown, fallbackValue: number): number;
+function isNumber(value: unknown, fallbackValue?: number): number | undefined {
     if (typeof value === 'number') return value;
     if (typeof value !== 'string') return fallbackValue;
-    const num = Number(value);
+    const num = parseFloat(value);
     return isNaN(num) ? fallbackValue : num;
 }
 
@@ -108,14 +110,25 @@ export function InputNumber({
         readOnly,
         invalidProp,
     });
-
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
     const inputId = useId(id);
-    const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
+    const value = isNumber(valueProp, min);
+    const removeDisabled = disabled || value + step * -1 < min;
+    const addDisabled = disabled || value + step > max;
+
+    const valueRef = useRef(value);
 
-    const handleIncrement = (increment: -1 | 1) => {
-        onChange(value + increment * step);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+
+    const incrementHandler = (kind: 'add' | 'remove') => {
+        const increment = kind === 'add' ? step : step * -1;
+        const next = valueRef.current + increment;
+        if (next < min || next > max) return false;
+        onChange(next);
+        return true;
     };
 
     return (
@@ -128,14 +141,6 @@ export function InputNumber({
             data-size={size}
             data-stepper-input
         >
-            {!!centered && (
-                <IncrementButton
-                    disabled={disabled ? true : value + -1 < min}
-                    increment={-1}
-                    inputId={inputId}
-                    onIncrement={handleIncrement}
-                />
-            )}
             <input
                 {...inputElementProps}
                 aria-describedby={ariaDescribedBy || undefined}
@@ -151,32 +156,29 @@ export function InputNumber({
                 max={max}
                 min={min}
                 name={name}
+                onBlur={(e) => {
+                    const next = isNumber(e.target.value, min);
+                    e.target.value = next?.toString() || '';
+                    onChange(next);
+                }}
                 onChange={(e) => {
-                    onChange(isNumber(e.target.value));
+                    const next = isNumber(e.target.value, min);
+                    onChange(next);
                 }}
                 readOnly={readOnly}
                 required={required}
                 step={step}
                 type="number"
-                value={value}
+                value={value !== undefined ? value : ''}
             />
-            {!centered && (
-                <>
-                    <div aria-hidden data-divider />
-                    <IncrementButton
-                        disabled={!!disabled || value + -1 < min}
-                        increment={-1}
-                        inputId={inputId}
-                        onIncrement={handleIncrement}
-                    />
-                </>
-            )}
+            <div aria-hidden data-divider />
             <IncrementButton
-                disabled={!!disabled || value + 1 > max}
-                increment={1}
+                disabled={removeDisabled}
                 inputId={inputId}
-                onIncrement={handleIncrement}
+                kind="remove"
+                triggerIncrement={incrementHandler}
             />
+            <IncrementButton disabled={addDisabled} inputId={inputId} kind="add" triggerIncrement={incrementHandler} />
         </div>
     );
 }

package/src/components/InputNumber/InputNumberExample.tsx

@@ -6,4 +6,5 @@ export const InputNumberExample: ComponentExample<InputNumberProps> = {
         'aria-label': 'input number aria-label',
     },
     render: ({ props, Component }) => <Component {...props} />,
+    variants: false,
 };

package/src/components/InputNumber/input-number.scss

@@ -129,6 +129,16 @@
         --height: var(--spacing-sizing-12);
         --svg-width: var(--spacing-sizing-06);
     }
+
+    &[data-centered] {
+        button:first-of-type {
+            order: -1;
+        }
+
+        [data-divider] {
+            display: none;
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Link/Link.tsx

@@ -46,7 +46,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
+ *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
  * @phase UXReview

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

@@ -12,8 +12,10 @@ describe('OTPInput (RTL)', () => {
     });
 
     it('renders', () => {
-        const { getByLabelText } = render(<OTPInput onChange={() => {}} {...presets[0].propState} />);
+        const { getByLabelText } = render(
+            <OTPInput aria-label="OTP input" onChange={() => {}} {...presets[0].propState} />,
+        );
 
-        expect(getByLabelText('OTP digit 1')).toBeInTheDocument();
+        expect(getByLabelText('OTP input')).toBeInTheDocument();
     });
 });