@bspk/ui 1.1.33 → 1.2.0

package/src/components/Button/Button.tsx

@@ -1,14 +1,13 @@
-import { ElementType, ReactNode, isValidElement } from 'react';
+import { AriaAttributes, ElementType, ReactNode, isValidElement } from 'react';
+
+import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
+import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
-import { ButtonSize, CommonProps, ElementProps, SetRef } from '-';
-import { Tooltip } from '-/components/Tooltip';
-import { isValidIcon } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
 import './button.scss';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -22,11 +21,14 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
      */
     icon?: ReactNode;
     /**
-     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     * When true the button label is hidden and only the icon is shown. When label isn't showing it is used in a tooltip
+     * and as the aria-label prop.
+     *
+     * Ignored if `icon` is not provided.
      *
-     * @default true
+     * @default false
      */
-    showLabel?: boolean;
+    iconOnly?: boolean;
     /**
      * The element type to render as.
      *
@@ -92,9 +94,11 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  *     }
  *
  * @name Button
- * @phase DesignReview
+ * @phase UXReview
  */
-function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element {
+export function Button<As extends ElementType = 'button'>(
+    props: AriaAttributes & ElementProps<ButtonProps<As>, As>,
+): JSX.Element {
     const {
         size = 'medium',
         variant = 'primary',
@@ -104,60 +108,71 @@ function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonPro
         disabled = false,
         label: labelProp,
         icon,
-        // showLabel: showLabelProp = true,
-        showLabel = true,
+        iconOnly: iconOnlyProp = false,
         toolTip: toolTipProp,
         children,
         innerRef,
+        owner,
         ...containerProps
     } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
 
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
+    // ignore iconOnly if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
+    // if toolTip label is not provided and iconOnly is true, toolTip should be label
+    const toolTip = toolTipProp || (iconOnly ? label : undefined);
 
-    const button = (
+    const button = (triggerProps: TooltipTriggerProps) => (
         <As
             {...containerProps}
+            aria-describedby={triggerProps['aria-describedby'] || containerProps['aria-describedby']}
             aria-label={label}
             data-bspk="button"
+            data-bspk-owner={owner || undefined}
             data-destructive={destructive || undefined}
             data-size={size}
             data-touch-target-parent
             data-variant={variant}
             data-width={width}
             disabled={disabled || undefined}
+            onFocus={(e) => {
+                triggerProps.onFocus?.();
+                containerProps.onFocus?.(e);
+            }}
+            onMouseLeave={(e) => {
+                triggerProps.onMouseLeave?.();
+                containerProps.onMouseLeave?.(e);
+            }}
+            onMouseOver={(e) => {
+                triggerProps.onMouseOver?.();
+                containerProps.onMouseOver?.(e);
+            }}
             ref={innerRef}
         >
             {children && typeof children !== 'string' ? (
                 children
             ) : (
                 <>
-                    {!!icon && isValidElement(icon) && <span data-button-icon>{icon}</span>}
-                    {!hideLabel && <span data-button-label>{label}</span>}
+                    {!!icon && isValidElement(icon) && (
+                        <span aria-hidden={true} data-button-icon>
+                            {icon}
+                        </span>
+                    )}
+                    {!iconOnly && <span data-button-label>{label}</span>}
                 </>
             )}
             <span data-touch-target />
         </As>
     );
 
-    if (toolTip) {
+    if (toolTip)
         return (
             <Tooltip label={toolTip} placement="top">
                 {button}
             </Tooltip>
         );
-    }
 
-    return button;
+    return button({});
 }
 
-Button.bspkName = 'Button';
-
-export { Button };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Button/ButtonExample.tsx

@@ -1,6 +1,6 @@
-import { ComponentExample } from '-/utils/demo';
-
+import { SvgPerson } from '@bspk/icons/Person';
 import { ButtonProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const ButtonExample: ComponentExample<ButtonProps> = {
     presets: [
@@ -9,6 +9,7 @@ export const ButtonExample: ComponentExample<ButtonProps> = {
             propState: {
                 icon: 'Add',
                 label: 'Add',
+                iconOnly: false,
             },
         },
         {
@@ -16,15 +17,19 @@ export const ButtonExample: ComponentExample<ButtonProps> = {
             propState: {
                 label: 'Add',
                 icon: undefined,
+                iconOnly: false,
             },
         },
         {
             label: 'Icon only',
             propState: {
-                showLabel: false,
+                iconOnly: true,
                 icon: 'Add',
                 label: 'Add',
             },
         },
     ],
+    variants: {
+        iconOnly: () => ({ icon: <SvgPerson />, label: 'Person' }),
+    },
 };

package/src/components/Button/button.scss

@@ -109,9 +109,9 @@
     &[data-variant='primary'] {
         --primary-background: var(--surface-brand-primary);
 
-        background: linear-gradient(var(--primary-background), var(--primary-background));
+        background-color: var(--primary-background);
         color: var(--foreground-brand-on-primary);
-        border-radius: var(--radius-small);
+        border-radius: var(--radius-sm);
 
         &[disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
@@ -148,7 +148,7 @@
 
     &[data-variant='secondary'] {
         border: solid 1px var(--stroke-neutral-base);
-        border-radius: var(--radius-small);
+        border-radius: var(--radius-sm);
         color: var(--foreground-neutral-on-surface-variant-01);
 
         &[disabled] {

package/src/components/Card/Card.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+
 import './card.scss';
 
 export type CardProps = {
@@ -42,9 +43,9 @@ export type CardProps = {
  *     }
  *
  * @name Card
- * @phase DesignReview
+ * @phase UXReview
  */
-function Card({ children, showPadding, variant = 'elevated' }: CardProps) {
+export function Card({ children, showPadding, variant = 'elevated' }: CardProps) {
     return (
         <div data-bspk="card" data-hide-padding={showPadding === false || undefined} data-variant={variant}>
             {children}
@@ -52,8 +53,4 @@ function Card({ children, showPadding, variant = 'elevated' }: CardProps) {
     );
 }
 
-Card.bspkName = 'Card';
-
-export { Card };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Card/card.scss

@@ -2,7 +2,7 @@
     display: block;
     background: var(--surface-neutral-t1-base);
     padding: var(--spacing-sizing-03);
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-md);
     overflow: hidden;
 
     &[data-hide-padding] {

package/src/components/Checkbox/Checkbox.tsx

@@ -1,16 +1,18 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
 
-import { CommonProps, ElementProps, InvalidPropsLibrary } from '-';
+import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
 
 import './checkbox.scss';
 
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
-    Required<CommonProps<'value'>> & {
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
+    FormFieldControlProps &
+    RequiredCommonProps<'value'> & {
         /**
          * If the checkbox is partially checked or
          * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
          *
+         * This will override the `checked` prop.
+         *
          * @default false
          */
         indeterminate?: boolean;
@@ -57,15 +59,13 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
  * @element
  *
  * @name Checkbox
- * @phase DesignReview
+ * @phase UXReview
  */
-function Checkbox({
+export function Checkbox({
     checked: checkedProp = false,
     indeterminate: indeterminateProp,
     invalid,
     disabled,
-    errorMessage,
-
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
     const indeterminate = !!indeterminateProp;
@@ -85,9 +85,11 @@ function Checkbox({
         >
             <input
                 {...props}
-                aria-errormessage={errorMessage || undefined}
+                aria-describedby={props['aria-describedby'] || undefined}
+                aria-errormessage={props['aria-errormessage'] || undefined}
                 aria-invalid={invalid || undefined}
                 checked={checked}
+                data-indeterminate={indeterminate || undefined}
                 disabled={disabled || undefined}
                 onChange={(event) => props.onChange(!!event.target.checked, event)}
                 ref={(node) => {
@@ -98,25 +100,25 @@ function Checkbox({
                 type="checkbox"
             />
             <span aria-hidden>
-                <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
-                        fill="currentColor"
-                    />
-                </svg>
-                <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
-                        fill="currentColor"
-                    />
-                </svg>
+                {checked && (
+                    <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )}
+                {indeterminate && (
+                    <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )}
             </span>
         </span>
     );
 }
 
-Checkbox.bspkName = 'Checkbox';
-
-export { Checkbox };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Checkbox/checkbox.scss

@@ -36,12 +36,10 @@
 
         svg[data-checked] {
             width: 14px;
-            display: none;
         }
 
         svg[data-indeterminate] {
             width: 12px;
-            display: none;
         }
 
         color: var(--color);
@@ -57,11 +55,6 @@
         }
     }
 
-    input[type='checkbox']:checked + span svg[data-checked],
-    input[type='checkbox']:indeterminate + span svg[data-indeterminate] {
-        display: block;
-    }
-
     input[type='checkbox']:checked + span,
     input[type='checkbox']:indeterminate + span {
         --stroke: var(--stroke-brand-primary);

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,54 +1,56 @@
-import { ElementProps, CommonProps } from '-';
 import { Checkbox } from '-/components/Checkbox';
 import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'> &
+    Required<CommonProps<'value'>>;
 
-export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & {
-    /**
-     * The function to call when the checkboxes are changed.
-     *
-     * @example
-     *     (values) => setState({ values });
-     *
-     * @required
-     */
-    onChange: (values: string[]) => void;
-    /**
-     * The input control name of the checkboxes.
-     *
-     * @required
-     */
-    name: string;
-    /**
-     * The options for the checkboxes.
-     *
-     * @example
-     *     [
-     *         { label: 'Option 1', value: 'option1' },
-     *         { label: 'Option 2', value: 'option2' },
-     *         { label: 'Option 3', value: 'option3' },
-     *     ];
-     *
-     * @type Array<CheckboxGroupOption>
-     * @required
-     */
-    options: CheckboxGroupOption[];
-    /**
-     * The values of the checked checkboxes.
-     *
-     * @type Array<string>
-     */
-    values?: CheckboxGroupProps['options'][number]['value'][];
-    /**
-     * Whether to show a select all checkbox at the top of the list.
-     *
-     * @default false
-     */
-    selectAll?: boolean;
-    /** The props for the select all checkbox. */
-    selectAllProps?: CheckboxGroupOption;
-};
+export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> &
+    FormFieldControlProps & {
+        /**
+         * The function to call when the checkboxes are changed.
+         *
+         * @example
+         *     (values) => setState({ values });
+         *
+         * @required
+         */
+        onChange: (values: string[]) => void;
+        /**
+         * The input control name of the checkboxes.
+         *
+         * @required
+         */
+        name: string;
+        /**
+         * The options for the checkboxes.
+         *
+         * @example
+         *     [
+         *         { label: 'Option 1', value: 'option1' },
+         *         { label: 'Option 2', value: 'option2' },
+         *         { label: 'Option 3', value: 'option3' },
+         *     ];
+         *
+         * @type Array<CheckboxGroupOption>
+         * @required
+         */
+        options: CheckboxGroupOption[];
+        /**
+         * The values of the checked checkboxes.
+         *
+         * @type Array<string>
+         */
+        values?: CheckboxGroupProps['options'][number]['value'][];
+        /**
+         * Whether to show a select all checkbox at the top of the list.
+         *
+         * @default false
+         */
+        selectAll?: boolean;
+        /** The props for the select all checkbox. */
+        selectAllProps?: CheckboxGroupOption;
+    };
 
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
@@ -77,28 +79,36 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  *     }
  *
  * @name CheckboxGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function CheckboxGroup({
+export function CheckboxGroup({
     onChange,
     options = [],
     name,
     values = [],
     selectAll,
     selectAllProps,
-    disabled,
+    disabled: disabledGroup = false,
     readOnly,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<CheckboxGroupProps, 'div'>) {
     return (
-        <div {...props} data-bspk="checkbox-group" role="group">
+        <div
+            {...props}
+            aria-describedby={ariaErrorMessage || ariaDescribedBy || undefined}
+            data-bspk="checkbox-group"
+            role="group"
+        >
             {selectAll && (
                 <>
                     <ToggleOption label={selectAllProps?.label || 'All'}>
                         <Checkbox
                             aria-label={selectAllProps?.label || 'All'}
                             checked={!!values.length && values.length === options.length}
-                            disabled={disabled}
+                            data-testid="selectAll-Checkbox"
+                            disabled={disabledGroup}
                             indeterminate={!!values.length && values.length < options.length}
                             name={name}
                             onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
@@ -108,12 +118,12 @@ function CheckboxGroup({
                     </ToggleOption>
                 </>
             )}
-            {options.map(({ label, description, value }) => (
-                <ToggleOption description={description} key={value} label={label}>
+            {options.map(({ label, description, value, disabled }) => (
+                <ToggleOption description={description} disabled={disabled || disabledGroup} key={value} label={label}>
                     <Checkbox
                         aria-label={label}
                         checked={values.includes(value)}
-                        disabled={disabled}
+                        disabled={disabled || disabledGroup}
                         name={name}
                         onChange={(checked) => {
                             onChange(checked ? [...values, value] : values.filter((v) => v !== value));
@@ -127,8 +137,4 @@ function CheckboxGroup({
     );
 }
 
-CheckboxGroup.bspkName = 'CheckboxGroup';
-
-export { CheckboxGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -1,15 +1,35 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { CheckboxGroupProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
     presets: [
         {
             label: 'With Descriptions',
             propState: {
+                disabled: false,
+                options: [
+                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                    {
+                        label: 'Option 2',
+                        value: 'option2',
+                        description: 'Description for option 2 (disabled)',
+                        disabled: true,
+                    },
+                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+                ],
+            },
+        },
+        {
+            label: 'Group disabled',
+            propState: {
+                disabled: true,
                 options: [
                     { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    { label: 'Option 2', value: 'option2', description: 'Description for option 2' },
+                    {
+                        label: 'Option 2',
+                        value: 'option2',
+                        description: 'Description for option 2 (disabled)',
+                    },
                     { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
                 ],
             },
@@ -17,6 +37,7 @@ export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
         {
             label: 'Long labels',
             propState: {
+                disabled: false,
                 options: [
                     { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
                     { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -1,17 +1,7 @@
-import { InvalidPropsLibrary } from '-';
 import { CheckboxProps, Checkbox } from '-/components/Checkbox';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
 
-export type CheckboxOptionProps = InvalidPropsLibrary &
-    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'> & {
-        /**
-         * The function to call when the checkbox is checked or unchecked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-    };
+export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -39,21 +29,18 @@ export type CheckboxOptionProps = InvalidPropsLibrary &
  *     }
  *
  * @name CheckboxOption
- * @phase DesignReview
+ * @phase UXReview
  */
-function CheckboxOption({ label: labelProp, description, ...checkboxProps }: CheckboxOptionProps) {
+export function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }: CheckboxOptionProps) {
     const label = labelProp || description;
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
     return (
         label && (
-            <ToggleOption data-bspk="checkbox-option" description={description} label={label}>
-                <Checkbox {...checkboxProps} aria-label={label} />
+            <ToggleOption data-bspk="checkbox-option" description={description} disabled={disabled} label={label}>
+                <Checkbox {...checkboxProps} aria-label={ariaLabel} />
             </ToggleOption>
         )
     );
 }
 
-CheckboxOption.bspkName = 'CheckboxOption';
-
-export { CheckboxOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipAssist/ChipAssist.tsx

@@ -20,14 +20,18 @@ export type ChipAssistProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lea
  *     }
  *
  * @name ChipAssist
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps) {
-    return <ChipUtility disabled={disabled} label={label} leadingIcon={leadingIcon} onClick={onClick} />;
+export function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps) {
+    return (
+        <ChipUtility
+            data-bspk="chip-assist"
+            disabled={disabled}
+            label={label}
+            leadingIcon={leadingIcon}
+            onClick={onClick}
+        />
+    );
 }
 
-ChipAssist.bspkName = 'ChipAssist';
-
-export { ChipAssist };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipAssist/ChipAssistExample.tsx

@@ -1,6 +1,5 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { ChipAssistProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 
 export const ChipAssistExample: ComponentExampleFn<ChipAssistProps> = ({ action }) => ({
     containerStyle: { width: '100%' },