@bspk/ui 1.1.34 → 1.3.0

package/src/components/StylesProviderDemo/index.tsx

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

package/src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/denali-boss.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Denali Boss styles to the application.
  *
  * @name StylesProviderDenaliBoss
+ * @phase Utility
+ * @generated
  */
-function StylesProviderDenaliBoss(): JSX.Element | null {
+export function StylesProviderDenaliBoss(): JSX.Element | null {
     return null;
 }
 
-StylesProviderDenaliBoss.bspkName = 'StylesProviderDenaliBoss';
-
-export { StylesProviderDenaliBoss };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderEra/StylesProviderEra.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/era.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the ERA styles to the application.
  *
  * @name StylesProviderEra
+ * @phase Utility
+ * @generated
  */
-function StylesProviderEra(): JSX.Element | null {
+export function StylesProviderEra(): JSX.Element | null {
     return null;
 }
 
-StylesProviderEra.bspkName = 'StylesProviderEra';
-
-export { StylesProviderEra };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderSothebys/StylesProviderSothebys.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/sothebys.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Sotheby's styles to the application.
  *
  * @name StylesProviderSothebys
+ * @phase Utility
+ * @generated
  */
-function StylesProviderSothebys(): JSX.Element | null {
+export function StylesProviderSothebys(): JSX.Element | null {
     return null;
 }
 
-StylesProviderSothebys.bspkName = 'StylesProviderSothebys';
-
-export { StylesProviderSothebys };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,15 @@
+import { Switch } from './Switch';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Switch aria-label="Example aria-label" checked name="Example name" onChange={() => {}} />;
+
+describe('Switch (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example aria-label')).toBeInTheDocument();
+    });
+});

package/src/components/Switch/Switch.tsx

@@ -1,8 +1,6 @@
-import { ChangeEvent } from 'react';
-
-import { CommonProps } from '-';
-
 import './switch.scss';
+import { ChangeEvent } from 'react';
+import { CommonProps } from '-/types/common';
 
 export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
     /**
@@ -51,9 +49,9 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
  * @element
  *
  * @name Switch
- * @phase DesignReview
+ * @phase UXReview
  */
-function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...props }: SwitchProps) {
+export function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...props }: SwitchProps) {
     const disabled = readOnly || disabledProp;
 
     return (
@@ -71,8 +69,4 @@ function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...
     );
 }
 
-Switch.bspkName = 'Switch';
-
-export { Switch };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Switch/switch.scss

@@ -29,7 +29,7 @@
         display: block;
         width: var(--toggle-width);
         height: var(--toggle-width);
-        border-radius: var(--radius-circular);
+        border-radius: var(--radius-full);
         background-color: var(--toggle-bg);
         transition: left 0.2s;
         box-shadow: var(--drop-shadow-raise);

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

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

package/src/components/SwitchOption/SwitchOption.tsx

@@ -1,7 +1,7 @@
 import { SwitchProps, Switch } from '-/components/Switch';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
 
-export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+export type SwitchOptionProps = ToggleOptionControlProps<SwitchProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -9,22 +9,19 @@ export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOpt
  * If only a switch is needed, consider using the Switch component directly.
  *
  * @name SwitchOption
- * @phase DesignReview
+ * @phase UXReview
  */
-function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps) {
+export function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps) {
     const label = labelProp || description;
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
 
     return (
         label && (
             <ToggleOption data-bspk="switch-option" description={description} label={label}>
-                <Switch {...checkboxProps} aria-label={label} />
+                <Switch {...checkboxProps} aria-label={ariaLabel} />
             </ToggleOption>
         )
     );
 }
 
-SwitchOption.bspkName = 'SwitchOption';
-
-export { SwitchOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,19 @@
+import { TabGroup } from './TabGroup';
+import { presets } from './TabGroupExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('TabGroup (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<TabGroup onChange={() => {}} {...preset.propState} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TabGroup onChange={() => {}} {...presets[0].propState} />);
+
+        expect(getByLabelText(presets[0].propState.label)).toBeInTheDocument();
+    });
+});

package/src/components/TabGroup/TabGroup.tsx

@@ -1,99 +1,10 @@
-import { ReactNode } from 'react';
-
-import { ElementProps } from '-';
-import { Badge, BadgeProps } from '-/components/Badge';
-import { useOptionIconsInvalid } from '-/hooks/useOptionIconsInvalid';
-
 import './tab-group.scss';
+import { TabList, TabListProps, TabOption } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
 
 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.
-     *
-     * @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 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.
-     *
-     * @type BspkIcon
-     */
-    icon?: ReactNode;
-    /**
-     * The icon to display on the left side of the tab when the tab is active.
-     *
-     * @type BspkIcon
-     */
-    iconActive?: ReactNode;
-    /** The badge count to display on the tab */
-    badge?: number;
-};
-
-export type TabGroupProps = {
-    /**
-     * The tabs to display. Each tab has a label and an optional leading icon.
-     *
-     * Minimum of two tab options are required. Maximum of seven tab options are ideal.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Disabled 2 ', disabled: true },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<TabGroupOption>
-     * @required
-     */
-    options: TabGroupOption[];
-    /**
-     * The value of the selected tab.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: TabGroupOption['value'];
-    /**
-     * The function to call when the tab is clicked.
-     *
-     * @required
-     */
-    onChange: (tabValue: string, index: number) => void;
-    /**
-     * The size of the tabs.
-     *
-     * @default medium
-     */
-    size?: TabGroupSize;
-    /**
-     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
-     * content.
-     *
-     * @default hug
-     */
-    width?: 'fill' | 'hug';
+export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
     /**
      * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
      * property isn't applicable.
@@ -127,55 +38,30 @@ export type TabGroupProps = {
  *     }
  *
  * @name TabGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function TabGroup({
-    //
+export function TabGroup({
     onChange: onTabChange,
     value,
     size = 'medium',
-    options: optionsProp,
+    options,
     width = 'hug',
     showTrail = false,
     ...containerProps
-}: ElementProps<TabGroupProps, 'div'>) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-
+}: ElementProps<TabGroupProps, 'ul'>) {
+    if (!Array.isArray(options) || options.length < 2) return <></>;
     return (
-        <div
-            {...containerProps}
+        <TabList
             data-bspk="tab-group"
-            data-hide-trail={(width === 'hug' && !showTrail) || undefined}
-            data-size={size}
-            data-width={width}
-        >
-            {options.map((item, itemIndex) => {
-                const isActive = item.value === value;
-
-                return (
-                    <button
-                        data-active={isActive || undefined}
-                        disabled={item.disabled || undefined}
-                        key={item.value}
-                        onClick={() => {
-                            onTabChange(item.value || item.label, itemIndex);
-                        }}
-                    >
-                        <span>
-                            {(isActive && item.iconActive) || item.icon}
-                            {item.label}
-                            {item.badge && !item.disabled && <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />}
-                        </span>
-                    </button>
-                );
-            })}
-        </div>
+            data-show-trail={showTrail || undefined}
+            onChange={onTabChange}
+            options={options}
+            size={size}
+            value={value}
+            width={width}
+            {...containerProps}
+        />
     );
 }
 
-TabGroup.bspkName = 'TabGroup';
-
-export { TabGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TabGroup/TabGroupExample.tsx

@@ -4,97 +4,110 @@ import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
 
-import { ComponentExample } from '-/utils/demo';
-
 import { TabGroupProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const TabGroupExample: ComponentExample<TabGroupProps> = {
-    containerStyle: { width: '100%' },
-    presets: [
-        {
-            label: 'With icons',
-            propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: <SvgDiamond />,
-                        iconActive: <SvgDiamondFill />,
-                        badge: undefined,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: <SvgCircle />,
-                        badge: undefined,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: <SvgSquare />,
-                        iconActive: <SvgSquareFill />,
-                        badge: undefined,
-                    },
-                ],
-            },
+const PRESET_OPTIONS: TabGroupProps['options'] = [
+    {
+        value: '1',
+        label: 'Option 1',
+        icon: undefined,
+        iconSelected: undefined,
+        badge: undefined,
+    },
+    {
+        value: '2',
+        label: 'Disabled 2',
+        icon: undefined,
+        iconSelected: undefined,
+        badge: undefined,
+        disabled: true,
+    },
+    {
+        value: '3',
+        label: 'Option 3',
+        icon: undefined,
+        iconSelected: undefined,
+        badge: undefined,
+    },
+];
+
+const OPTION_ICONS = [
+    {
+        icon: <SvgDiamond />,
+        iconSelected: <SvgDiamondFill />,
+    },
+
+    {
+        icon: <SvgCircle />,
+        iconSelected: undefined,
+    },
+    {
+        icon: <SvgSquare />,
+        iconSelected: <SvgSquareFill />,
+    },
+];
+
+export const presets: Preset<TabGroupProps>[] = [
+    {
+        label: 'With icons',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                icon: OPTION_ICONS[index].icon,
+                iconSelected: OPTION_ICONS[index].iconSelected,
+            })),
+            label: 'Tabs with icons',
         },
-        {
-            label: 'With badges',
-            propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: undefined,
-                        iconActive: undefined,
-                        badge: 1,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: undefined,
-                        iconActive: undefined,
-                        badge: 2,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: undefined,
-                        iconActive: undefined,
-                        badge: 3,
-                    },
-                ],
-            },
+    },
+    {
+        label: 'With badges',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                badge: Math.round((index + 1) * 2.6),
+            })),
+            label: 'Tabs with badges',
         },
-        {
-            label: 'With icons & badges',
-            propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: <SvgDiamond />,
-                        iconActive: <SvgDiamondFill />,
-                        badge: 1,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: <SvgCircle />,
-                        badge: 2,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: <SvgSquare />,
-                        iconActive: <SvgSquareFill />,
-                        badge: 3,
-                    },
-                ],
-            },
+    },
+    {
+        label: 'With icons & badges',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option, index) => ({
+                ...option,
+                icon: OPTION_ICONS[index].icon,
+                iconSelected: OPTION_ICONS[index].iconSelected,
+                badge: Math.round((index + 1) * 2.6),
+            })),
+            label: 'Tabs with icons & badges',
+        },
+    },
+    {
+        label: 'Long Text only',
+        propState: {
+            value: '1',
+            options: PRESET_OPTIONS.map((option) => ({
+                ...option,
+                label: `${option.label} with a very long label that never seems to end and goes on forever`,
+            })),
+            label: 'Tabs with long text',
+        },
+    },
+];
+
+export const TabGroupExample: ComponentExample<TabGroupProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
+    presets,
+
+    variants: {
+        showTrail: {
+            width: 'hug',
         },
-    ],
+    },
 };