@bspk/ui 1.1.33 → 1.2.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.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 
-import { CommonProps } from '-';
+import { CommonProps } from '-/types/common';
 
 import './switch.scss';
 
@@ -51,9 +51,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 +71,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.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.tsx

@@ -1,99 +1,11 @@
-import { ReactNode } from 'react';
-
-import { ElementProps } from '-';
-import { Badge, BadgeProps } from '-/components/Badge';
-import { useOptionIconsInvalid } from '-/hooks/useOptionIconsInvalid';
+import { TabList, TabListProps, TabOption } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
 
 import './tab-group.scss';
 
 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 +39,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,104 @@ import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
 
+import { TabGroupProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 
-import { TabGroupProps } from '.';
+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 TabGroupExample: ComponentExample<TabGroupProps> = {
     containerStyle: { width: '100%' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
     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,
-                    },
-                ],
+                value: '1',
+                options: PRESET_OPTIONS.map((option, index) => ({
+                    ...option,
+                    icon: OPTION_ICONS[index].icon,
+                    iconSelected: OPTION_ICONS[index].iconSelected,
+                })),
             },
         },
         {
             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,
-                    },
-                ],
+                value: '1',
+                options: PRESET_OPTIONS.map((option, index) => ({
+                    ...option,
+                    badge: Math.round((index + 1) * 2.6),
+                })),
             },
         },
         {
             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,
-                    },
-                ],
+                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: '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`,
+                })),
             },
         },
     ],
+
+    variants: {
+        showTrail: {
+            width: 'hug',
+        },
+    },
 };

package/src/components/TabGroup/tab-group.scss

@@ -1,101 +1,55 @@
-[data-bspk='tab-group'] {
-    display: flex;
-    flex-direction: row;
+ul[data-bspk='tab-group'] {
+    border-bottom: none;
 
-    --btn-flex-grow: 0;
-
-    border-bottom: 1px solid var(--stroke-neutral-low);
-    width: 100%;
-
-    &[data-width='fill'] {
-        align-items: stretch;
-        width: 100%;
-
-        --btn-flex-grow: 1;
-    }
-
-    --font: var(--labels-base);
-    --height: var(--spacing-sizing-10);
-
-    &[data-size='small'] {
-        --font: var(--labels-small);
-        --height: var(--spacing-sizing-08);
-    }
-
-    &[data-size='large'] {
-        --font: var(--labels-large);
-        --height: var(--spacing-sizing-12);
-    }
-
-    button {
+    li {
         border: 0;
-        cursor: pointer;
         color: var(--foreground-neutral-on-surface-variant-02);
         background: none;
-        flex-grow: var(--btn-flex-grow);
-        font: var(--font);
-        white-space: nowrap;
+        border-bottom: 1px solid var(--stroke-neutral-low);
+        position: relative;
+        padding: 0 var(--spacing-sizing-04);
 
-        &:hover {
-            background: var(--interactions-neutral-hover-opacity);
-        }
+        &:not([aria-disabled]) {
+            &[data-active] {
+                background: var(--interactions-neutral-hover-opacity);
+            }
 
-        &:active {
-            background: var(--interactions-neutral-press-opacity);
+            &:active {
+                background: var(--interactions-neutral-press-opacity);
+            }
         }
 
-        &:disabled {
-            pointer-events: none;
+        &[aria-disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
         }
 
-        &:focus-visible {
-            outline: solid 2px var(--stroke-neutral-focus);
-        }
-
-        span {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            margin: 0 var(--spacing-sizing-04);
-            height: var(--height);
-            justify-content: center;
-            position: relative;
-            gap: var(--spacing-sizing-02);
-
-            svg {
-                width: var(--spacing-sizing-05);
-            }
-        }
-
-        &[data-active] {
+        &[aria-selected] {
             color: var(--foreground-brand-primary);
 
-            span {
-                &::after {
-                    content: '';
-                    display: block;
-                    width: 100%;
-                    height: 2px;
-                    background-color: var(--stroke-brand-primary);
-                    bottom: -1px;
-                    position: absolute;
-                    border-top-right-radius: 2px;
-                    border-top-left-radius: 2px;
-                }
+            &::after {
+                content: '';
+                display: block;
+                width: calc(100% - var(--spacing-sizing-04) * 2);
+                height: 2px;
+                background-color: var(--stroke-brand-primary);
+                bottom: -1px;
+                position: absolute;
+                border-top-right-radius: 2px;
+                border-top-left-radius: 2px;
+            }
 
-                svg {
-                    color: var(--surface-brand-primary);
-                }
+            svg {
+                color: var(--surface-brand-primary);
             }
         }
     }
 
-    &[data-hide-trail] {
-        border-bottom: none;
+    &[data-show-trail][data-width='hug'] {
+        width: 100%;
+        border-bottom: 1px solid var(--stroke-neutral-low);
 
-        button {
-            border-bottom: 1px solid var(--stroke-neutral-low);
+        li {
+            border-bottom: none;
         }
     }
 }