@bspk/ui 1.1.13 → 1.1.15

package/src/TabGroup.tsx

@@ -1,11 +1,19 @@
 import './tab-group.scss';
 import { ReactNode } from 'react';
 
-import { Badge } from './Badge';
-import { useNavOptions } from './hooks/useNavOptions';
+import { Badge, BadgeProps } from './Badge';
+import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 
 import { ElementProps } from './';
 
+export type TabGroupSize = 'large' | 'medium' | 'small';
+
+const TAB_BADGE_SIZES: Record<TabGroupSize, BadgeProps['size']> = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+};
+
 export type TabGroupOption = {
     /**
      * The label of the tab. This is the text that will be displayed on the tab.
@@ -19,7 +27,11 @@ export type TabGroupOption = {
      * @default false
      */
     disabled?: boolean;
-    /** The value of the tab. If not provided, the label will be used as the value. */
+    /**
+     * The value of the tab sent to onChange when selected.
+     *
+     * If not provided, the label will be used as the value.
+     */
     value?: string;
     /** The icon to display on the left side of the tab. */
     icon?: ReactNode;
@@ -37,20 +49,24 @@ export type TabGroupProps = {
      * @required
      */
     options: TabGroupOption[];
-    /** The id of the selected tab. */
-    value?: TabGroupOption['value'];
+    /**
+     * The id of the selected tab.
+     *
+     * @required
+     */
+    value: TabGroupOption['value'];
     /**
      * The function to call when the tab is clicked.
      *
      * @required
      */
-    onChange: (tabId: TabGroupOption['value']) => void;
+    onChange: (tabValue: string, index: number) => void;
     /**
      * The size of the tabs.
      *
      * @default medium
      */
-    size?: 'large' | 'medium' | 'small';
+    size?: TabGroupSize;
     /**
      * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
      * content.
@@ -77,12 +93,13 @@ function TabGroup({
     onChange: onTabChange,
     value,
     size = 'medium',
-    options,
+    options: optionsProp,
     width = 'hug',
     showTrail = false,
     ...containerProps
 }: ElementProps<TabGroupProps, 'div'>) {
-    const items = useNavOptions(options);
+    const options = Array.isArray(optionsProp) ? optionsProp : [];
+    useOptionIconsInvalid(options);
 
     return (
         <div
@@ -92,7 +109,7 @@ function TabGroup({
             data-size={size}
             data-width={width}
         >
-            {items.map((item) => {
+            {options.map((item, itemIndex) => {
                 const isActive = item.value === value;
 
                 return (
@@ -100,12 +117,16 @@ function TabGroup({
                         data-active={isActive || undefined}
                         disabled={item.disabled || undefined}
                         key={item.value}
-                        onClick={() => onTabChange(item.value)}
+                        onClick={() => {
+                            onTabChange(item.value || item.label, itemIndex);
+                        }}
                     >
                         <span>
                             {(isActive && item.iconActive) || item.icon}
                             {item.label}
-                            {item.badge && <Badge count={item.badge} size="x-small" />}
+                            {item.badge && !item.disabled && !isActive && (
+                                <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
+                            )}
                         </span>
                     </button>
                 );

package/src/TextField.tsx

@@ -1,23 +1,25 @@
 import { FormFieldProps, FormField } from './FormField';
 import { TextInputProps, TextInput } from './TextInput';
 
-export type TextFieldProps = Pick<
-    TextInputProps,
-    | 'autoComplete'
-    | 'disabled'
-    | 'inputRef'
-    | 'invalid'
-    | 'leading'
-    | 'name'
-    | 'onChange'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'trailing'
-    | 'type'
-    | 'value'
-> &
+import { InvalidPropsLibrary } from '.';
+
+export type TextFieldProps = InvalidPropsLibrary &
+    Pick<
+        TextInputProps,
+        | 'autoComplete'
+        | 'disabled'
+        | 'inputRef'
+        | 'leading'
+        | 'name'
+        | 'onChange'
+        | 'placeholder'
+        | 'readOnly'
+        | 'required'
+        | 'size'
+        | 'trailing'
+        | 'type'
+        | 'value'
+    > &
     Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
 
 /**

package/src/TextInput.tsx

@@ -4,38 +4,39 @@ import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, Re
 
 import { useId } from './hooks/useId';
 
-import { ElementProps, CommonProps } from '.';
+import { ElementProps, CommonProps, InvalidPropsLibrary } from '.';
 
 export type TextInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
-> & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    /** The ref of the container. */
-    containerRef?: (node: HTMLElement | null) => void;
-    /** The ref of the input. */
-    inputRef?: (node: HTMLElement | null) => void;
-    /** The trailing element to display in the field. */
-    trailing?: ReactNode;
-    /** The leading element to display in the field. */
-    leading?: ReactNode;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /** The type of the input. */
-    type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
-    /**
-     * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-     *
-     * @default off
-     */
-    autoComplete?: HTMLInputAutoCompleteAttribute;
-};
+    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
+> &
+    InvalidPropsLibrary & {
+        /**
+         * Callback when the value of the field changes.
+         *
+         * @type (next: String, Event) => void
+         * @required
+         */
+        onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+        /** The ref of the container. */
+        containerRef?: (node: HTMLElement | null) => void;
+        /** The ref of the input. */
+        inputRef?: (node: HTMLElement | null) => void;
+        /** The trailing element to display in the field. */
+        trailing?: ReactNode;
+        /** The leading element to display in the field. */
+        leading?: ReactNode;
+        /** The placeholder of the field. */
+        placeholder?: string;
+        /** The type of the input. */
+        type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
+        /**
+         * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+         *
+         * @default off
+         */
+        autoComplete?: HTMLInputAutoCompleteAttribute;
+    };
 
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
@@ -63,6 +64,7 @@ function TextInput({
     disabled,
     autoComplete = 'off',
     containerRef,
+    errorMessage,
     ...otherProps
 }: ElementProps<TextInputProps, 'div'>) {
     const id = useId(idProp);
@@ -82,6 +84,7 @@ function TextInput({
         >
             {leading && <span data-leading>{leading}</span>}
             <input
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 autoComplete={autoComplete}

package/src/Textarea.tsx

@@ -3,62 +3,76 @@ import { ChangeEvent, CSSProperties, Ref } from 'react';
 
 import { useId } from './hooks/useId';
 
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly' | 'required'> & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The size of the field.
-     *
-     * @default medium
-     */
-    size?: 'large' | 'medium' | 'small';
-    /** The value of the field. */
-    value?: string;
-    /**
-     * The textarea control name of the field.
-     *
-     * @required
-     */
-    name: string;
-    /** The ref of the field. */
-    innerRef?: Ref<HTMLTextAreaElement>;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /**
-     * The maximum number of characters that the field will accept.
-     *
-     * @minimum 1
-     */
-    maxLength?: number;
-    /**
-     * The minimum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
-     * to fit the content.
-     *
-     * @minimum 3
-     */
-    minRows?: number;
-    /**
-     * The maximum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
-     * to fit the content.
-     *
-     * @maximum 10
-     */
-    maxRows?: number;
-};
+const DEFAULT = {
+    minRows: 3,
+    maxRows: 10,
+    textSize: 'medium',
+} as const;
 
-const MIN_ROWS = 3;
-const MAX_ROWS = 10;
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> &
+    InvalidPropsLibrary & {
+        /**
+         * Callback when the value of the field changes.
+         *
+         * @type (next: String, Event) => void
+         * @required
+         */
+        onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+        /**
+         * The text size of the field.
+         *
+         * @default medium
+         */
+        textSize?: 'large' | 'medium' | 'small';
+        /**
+         * The value of the field.
+         *
+         * @type multiline
+         */
+        value?: string;
+        /**
+         * The textarea control name of the field.
+         *
+         * @required
+         */
+        name: string;
+        /** The ref of the field. */
+        innerRef?: Ref<HTMLTextAreaElement>;
+        /** The placeholder of the field. */
+        placeholder?: string;
+        /**
+         * The maximum number of characters that the field will accept.
+         *
+         * @minimum 1
+         */
+        maxLength?: number;
+        /**
+         * The minimum number of rows that the textarea will show.
+         *
+         * @default 3
+         * @minimum 3
+         * @maximum 10
+         */
+        minRows?: number;
+        /**
+         * The maximum number of rows that the textarea will show.
+         *
+         * @default 10
+         * @minimum 3
+         * @maximum 10
+         */
+        maxRows?: number;
+    };
 
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
+ * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
+ * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
+ * remaining below the limit.
+ *
  * @element
  *
  * @name Textarea
@@ -66,27 +80,28 @@ const MAX_ROWS = 10;
 function Textarea({
     invalid: invalidProp,
     onChange,
-    size = 'medium',
+    textSize = DEFAULT.textSize,
     value = '',
     name,
     'aria-label': ariaLabel,
     innerRef,
     placeholder,
     id: idProp,
-    minRows: minRowsProp = MIN_ROWS,
-    maxRows: maxRowsProp = MAX_ROWS,
+    minRows: minRowsProp = DEFAULT.minRows,
+    maxRows: maxRowsProp = DEFAULT.maxRows,
+    errorMessage,
     ...otherProps
 }: TextareaProps) {
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
     // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(MAX_ROWS, Math.max(minRowsProp, MIN_ROWS));
-    const maxRows = Math.max(MIN_ROWS, Math.min(maxRowsProp, MAX_ROWS));
+    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
+    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
 
     return (
         <div
             data-bspk="textarea"
-            data-size={size}
+            data-size={textSize}
             style={
                 {
                     '--min-rows': minRows,
@@ -96,6 +111,7 @@ function Textarea({
         >
             <textarea
                 {...otherProps}
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 id={id}

package/src/base.scss

@@ -51,16 +51,17 @@ body {
 a {
     color: var(--foreground-link-text-default);
 
-    &:hover {
+    &:not([disabled]):hover {
         color: var(--foreground-link-text-default-hovered);
     }
 
-    &:visited {
+    &:not([disabled]):visited {
         color: var(--foreground-link-text-default-visited);
     }
 
-    &:disabled {
+    &[disabled] {
         pointer-events: none;
+        cursor: text;
         color: var(--foreground-link-text-default-disabled);
     }
 }

package/src/form-field.scss

@@ -1,6 +1,7 @@
 [data-bspk='form-field'] {
     box-sizing: border-box;
-    width: 100%;
+    max-width: 100%;
+    width: fit-content;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sizing-01);

package/src/hooks/useFloatingMenu.ts

@@ -1,6 +1,6 @@
 import { AriaAttributes, useId, useState } from 'react';
 
-import { CommonProps } from '..';
+import { CommonProps, InvalidPropsLibrary } from '..';
 import { EVENT_KEY } from '../utils/keyboard';
 
 import { Placement, useFloating } from './useFloating';
@@ -9,7 +9,7 @@ import { useOutsideClick } from './useOutsideClick';
 
 export type UseFloatingMenuProps = {
     placement: Placement;
-    triggerProps?: CommonProps<'disabled' | 'invalid' | 'readOnly'>;
+    triggerProps?: CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary;
 };
 
 export type UseFloatingMenuReturn = {
@@ -30,6 +30,7 @@ export type UseFloatingMenuReturn = {
         'aria-invalid': boolean | undefined;
         'aria-owns': string;
         'aria-readonly': boolean | undefined;
+        'aria-errormessage': string | undefined;
         role: 'combobox';
         tabIndex: number;
         ref: (node: HTMLElement | null) => void;
@@ -75,6 +76,7 @@ export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProp
             tabIndex: -1,
         },
         triggerProps: {
+            'aria-errormessage': triggerProps?.errorMessage || undefined,
             'aria-activedescendant': selectedId || undefined,
             'aria-controls': menuId,
             'aria-expanded': show,

package/src/hooks/useOptionIconsInvalid.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+
+import { isValidIcon } from '../utils/children';
+import { useErrorLogger } from '../utils/errors';
+
+/**
+ * A utility hook used within navigation components. Returns true if the icons are invalid.
+ *
+ * @param options [NavOption[]] The options to display. Each option has an optional leading icon.
+ * @returns {boolean} True if the icons are invalid.
+ */
+export function useOptionIconsInvalid<T extends NavOption>(options: T[] | undefined): boolean {
+    const { logError } = useErrorLogger();
+
+    return useMemo(() => {
+        if (!options || !Array.isArray(options)) return true;
+
+        const iconsInvalid = options.some((o) => o.icon) && !options.every((option) => isValidIcon(option.icon));
+
+        logError(
+            iconsInvalid,
+            'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.',
+        );
+
+        return iconsInvalid;
+    }, [logError, options]);
+}
+
+export type NavOption = {
+    /**
+     * The label of the option. This is the text that will be displayed on the option.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** The value of the option. If not provided, the label will be used as the value. */
+    value?: string;
+    /** The the icon to display before the label. */
+    icon?: React.ReactNode;
+    iconActive?: React.ReactNode;
+};
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/index.ts

@@ -34,7 +34,8 @@ export type CallToActionButton = {
     size?: ButtonSize;
 };
 
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name', T> &
+export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> &
+    InvalidPropsLibrary &
     Required<CommonProps<'value'>> & {
         /**
          * Marks the control as checked.
@@ -56,6 +57,28 @@ export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElemen
     K
 >;
 
+/**
+ * The props that are common to input elements.
+ *
+ * If an element is invalid it must have an errorMessage.
+ */
+export type InvalidPropsLibrary = {
+    /**
+     * Marks the element as invalid and displays error state theme.
+     *
+     * If the errorMessage is empty the error state theme will not appear.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the element as invalid and displays error message.
+     *
+     * When an element is invalid it must display an error message explaining why it is invalid.
+     */
+    errorMessage?: string;
+};
+
 export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
@@ -89,12 +112,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Marks the element as invalid and displays error state theme.
-     *
-     * @default false
-     */
-    invalid?: boolean;
     /**
      * Determines if the element is [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).
      *
@@ -107,12 +124,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     name: string;
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * When an element is invalid it must display an error message explaining why it is invalid.
-     */
-    errorMessage?: string;
     /**
      * The value of the control.
      *

package/src/inline-alert.scss

@@ -1,7 +1,7 @@
 [data-bspk='inline-alert'] {
     display: flex;
     align-items: start;
-    justify-content: center;
+    justify-content: start;
     flex-direction: row;
     gap: var(--spacing-sizing-02);
 

package/src/number-input.scss

@@ -1,5 +1,5 @@
 [data-bspk='number-input'] {
-    // medium
+    // medium is the default size
     --font: var(--body-base);
     --height: var(--spacing-sizing-10);
     --svg-width: var(--spacing-sizing-05);
@@ -13,10 +13,10 @@
     border: 1px solid var(--stroke-neutral-base);
     border-radius: var(--radius-small);
     background: var(--surface-neutral-t1-base);
+    max-width: 280px;
 
     &:focus-within {
         border-color: var(--stroke-brand-primary);
-        outline: 1px solid var(--stroke-brand-primary);
     }
 
     [data-divider] {
@@ -29,11 +29,13 @@
     }
 
     button {
-        min-width: var(--height);
+        width: var(--height);
+        height: var(--height);
         background: none;
         border: none;
         cursor: pointer;
         font: var(--font);
+        flex-shrink: 0;
 
         svg {
             width: var(--svg-width);
@@ -59,6 +61,7 @@
         padding: 0 var(--spacing-sizing-03);
         background: transparent;
         border: none;
+        flex-grow: 1;
 
         &:focus {
             outline: none;

package/src/textarea.scss

@@ -43,7 +43,11 @@
     textarea {
         --border-color: var(--stroke-neutral-base);
 
-        resize: vertical;
+        &::placeholder {
+            color: var(--foreground-neutral-on-surface-variant-03);
+        }
+
+        resize: none;
         color: var(--foreground-neutral-on-surface);
         background-color: var(--surface-neutral-t1-base);
         border-radius: var(--radius-small);
@@ -71,7 +75,6 @@
 
                 linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
                 linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-            color: var(--foreground-neutral-on-surface-variant-02);
             cursor: not-allowed;
         }