@bspk/ui 1.1.33 → 1.2.0

package/dist/components/StylesProviderDemo/brandsCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brandsCss.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/brandsCss.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAA0B;IAC7C,QAAQ,EACJ,u1nGAAu1nG;IAC31nG,sBAAsB,EAClB,45vGAA45vG;IACh6vG,MAAM,EAAE,s6mGAAs6mG;IAC96mG,YAAY,EACR,26oGAA26oG;IAC/6oG,iBAAiB,EACb,4rsGAA4rsG;IAChssG,QAAQ,EACJ,+pnGAA+pnG;IACnqnG,aAAa,EACT,i/pGAAi/pG;IACr/pG,GAAG,EAAE,g3kGAAg3kG;IACr3kG,QAAQ,EACJ,+nnGAA+nnG;CACtonG,CAAC"}

package/dist/components/StylesProviderDemo/index.d.ts

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

package/dist/components/StylesProviderDemo/index.js

@@ -0,0 +1,2 @@
+export * from './StylesProviderDemo';
+//# sourceMappingURL=index.js.map

package/dist/components/StylesProviderDemo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.d.ts

@@ -1,13 +1,11 @@
 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
  */
-declare function StylesProviderDenaliBoss(): JSX.Element | null;
-declare namespace StylesProviderDenaliBoss {
-    var bspkName: string;
-}
-export { StylesProviderDenaliBoss };
+export declare function StylesProviderDenaliBoss(): JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js

@@ -1,14 +1,14 @@
 import '../../styles/denali-boss.css.js';
-import '../../base.css.js';
+import '../../styles/base.css.js';
 /**
  * Utility to provide the Denali Boss styles to the application.
  *
  * @name StylesProviderDenaliBoss
+ * @phase Utility
+ * @generated
  */
-function StylesProviderDenaliBoss() {
+export function StylesProviderDenaliBoss() {
     return null;
 }
-StylesProviderDenaliBoss.bspkName = 'StylesProviderDenaliBoss';
-export { StylesProviderDenaliBoss };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=StylesProviderDenaliBoss.js.map

package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderDenaliBoss.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AACtC,OAAO,iBAAiB,CAAC;AAEzB;;;;GAIG;AACH,SAAS,wBAAwB;IAC7B,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,wBAAwB,CAAC,QAAQ,GAAG,0BAA0B,CAAC;AAE/D,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAEpC,sDAAsD"}
+{"version":3,"file":"StylesProviderDenaliBoss.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AACtC,OAAO,oBAAoB,CAAC;AAE5B;;;;;;GAMG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

package/dist/components/StylesProviderEra/StylesProviderEra.d.ts

@@ -1,13 +1,11 @@
 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
  */
-declare function StylesProviderEra(): JSX.Element | null;
-declare namespace StylesProviderEra {
-    var bspkName: string;
-}
-export { StylesProviderEra };
+export declare function StylesProviderEra(): JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/StylesProviderEra/StylesProviderEra.js

@@ -1,14 +1,14 @@
 import '../../styles/era.css.js';
-import '../../base.css.js';
+import '../../styles/base.css.js';
 /**
  * Utility to provide the ERA styles to the application.
  *
  * @name StylesProviderEra
+ * @phase Utility
+ * @generated
  */
-function StylesProviderEra() {
+export function StylesProviderEra() {
     return null;
 }
-StylesProviderEra.bspkName = 'StylesProviderEra';
-export { StylesProviderEra };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=StylesProviderEra.js.map

package/dist/components/StylesProviderEra/StylesProviderEra.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderEra.js","sourceRoot":"","sources":["../../../src/components/StylesProviderEra/StylesProviderEra.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,iBAAiB,CAAC;AAEzB;;;;GAIG;AACH,SAAS,iBAAiB;IACtB,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,iBAAiB,CAAC,QAAQ,GAAG,mBAAmB,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,sDAAsD"}
+{"version":3,"file":"StylesProviderEra.js","sourceRoot":"","sources":["../../../src/components/StylesProviderEra/StylesProviderEra.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAE5B;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB;IAC7B,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

package/dist/components/StylesProviderSothebys/StylesProviderSothebys.d.ts

@@ -1,13 +1,11 @@
 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
  */
-declare function StylesProviderSothebys(): JSX.Element | null;
-declare namespace StylesProviderSothebys {
-    var bspkName: string;
-}
-export { StylesProviderSothebys };
+export declare function StylesProviderSothebys(): JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/StylesProviderSothebys/StylesProviderSothebys.js

@@ -1,14 +1,14 @@
 import '../../styles/sothebys.css.js';
-import '../../base.css.js';
+import '../../styles/base.css.js';
 /**
  * Utility to provide the Sotheby's styles to the application.
  *
  * @name StylesProviderSothebys
+ * @phase Utility
+ * @generated
  */
-function StylesProviderSothebys() {
+export function StylesProviderSothebys() {
     return null;
 }
-StylesProviderSothebys.bspkName = 'StylesProviderSothebys';
-export { StylesProviderSothebys };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=StylesProviderSothebys.js.map

package/dist/components/StylesProviderSothebys/StylesProviderSothebys.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderSothebys.js","sourceRoot":"","sources":["../../../src/components/StylesProviderSothebys/StylesProviderSothebys.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,iBAAiB,CAAC;AAEzB;;;;GAIG;AACH,SAAS,sBAAsB;IAC3B,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sBAAsB,CAAC,QAAQ,GAAG,wBAAwB,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAElC,sDAAsD"}
+{"version":3,"file":"StylesProviderSothebys.js","sourceRoot":"","sources":["../../../src/components/StylesProviderSothebys/StylesProviderSothebys.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAE5B;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB;IAClC,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

package/dist/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { CommonProps } from '../../index.js';
+import { CommonProps } from '-/types/common';
 import './switch.scss';
 export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
     /**
@@ -47,11 +47,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
  * @element
  *
  * @name Switch
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Switch({ checked, disabled: disabledProp, readOnly, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Switch {
-    var bspkName: string;
-}
-export { Switch };
+export declare function Switch({ checked, disabled: disabledProp, readOnly, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Switch/Switch.js

@@ -25,12 +25,10 @@ import './switch.css.js';
  * @element
  *
  * @name Switch
- * @phase DesignReview
+ * @phase UXReview
  */
-function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...props }) {
+export function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...props }) {
     const disabled = readOnly || disabledProp;
     return (_jsxs("span", { "data-bspk": "switch", children: [_jsx("input", { ...props, "aria-disabled": disabled || undefined, checked: !!checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), type: "checkbox" }), _jsx("span", { "aria-hidden": true })] }));
 }
-Switch.bspkName = 'Switch';
-export { Switch };
 //# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAwBvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IAChG,MAAM,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC;IAE1C,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAwBvB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACvG,MAAM,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC;IAE1C,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,KAAK,mBACM,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}

package/dist/components/Switch/switch.css

@@ -26,7 +26,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/dist/components/Switch/switch.css.js

@@ -29,7 +29,7 @@ style.appendChild(document.createTextNode(`[data-bspk=switch] {
   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);
@@ -57,4 +57,3 @@ style.appendChild(document.createTextNode(`[data-bspk=switch] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/SwitchOption/SwitchOption.d.ts

@@ -1,17 +1,13 @@
-import { SwitchProps } from '../Switch';
-import { ToggleOptionProps } from '../ToggleOption';
-export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+import { SwitchProps } from '-/components/Switch';
+import { ToggleOptionControlProps } from '-/components/ToggleOption';
+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.
  *
  * If only a switch is needed, consider using the Switch component directly.
  *
  * @name SwitchOption
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace SwitchOption {
-    var bspkName: string;
-}
-export { SwitchOption };
+export declare function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SwitchOption/SwitchOption.js

@@ -7,12 +7,11 @@ import { ToggleOption } from '../ToggleOption';
  * If only a switch is needed, consider using the Switch component directly.
  *
  * @name SwitchOption
- * @phase DesignReview
+ * @phase UXReview
  */
-function SwitchOption({ label: labelProp, description, ...checkboxProps }) {
+export function SwitchOption({ label: labelProp, description, ...checkboxProps }) {
     const label = labelProp || description;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "switch-option", description: description, label: label, children: _jsx(Switch, { ...checkboxProps, "aria-label": label }) })));
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "switch-option", description: description, label: label, children: _jsx(Switch, { ...checkboxProps, "aria-label": ariaLabel }) })));
 }
-SwitchOption.bspkName = 'SwitchOption';
-export { SwitchOption };
 //# sourceMappingURL=SwitchOption.js.map

package/dist/components/SwitchOption/SwitchOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../../../src/components/SwitchOption/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI5E;;;;;;;GAOG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAqB;IACxF,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IAEvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,eAAe,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC1E,KAAC,MAAM,OAAK,aAAa,gBAAc,KAAK,GAAI,GACrC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../../../src/components/SwitchOption/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAqB;IAC/F,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,eAAe,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC1E,KAAC,MAAM,OAAK,aAAa,gBAAc,SAAS,GAAI,GACzC,CAClB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/TabGroup/TabGroup.d.ts

@@ -1,86 +1,8 @@
-import { ReactNode } from 'react';
-import { ElementProps } from '../../index.js';
+import { TabListProps, TabOption } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
 import './tab-group.scss';
 export type TabGroupSize = 'large' | 'medium' | '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.
@@ -113,11 +35,7 @@ export type TabGroupProps = {
  *     }
  *
  * @name TabGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function TabGroup({ onChange: onTabChange, value, size, options: optionsProp, width, showTrail, ...containerProps }: ElementProps<TabGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace TabGroup {
-    var bspkName: string;
-}
-export { TabGroup };
+export declare function TabGroup({ onChange: onTabChange, value, size, options, width, showTrail, ...containerProps }: ElementProps<TabGroupProps, 'ul'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabGroup/TabGroup.js

@@ -1,12 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from '../Badge';
-import { useOptionIconsInvalid } from '../../hooks/useOptionIconsInvalid';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { TabList } from '../TabList';
 import './tab-group.css.js';
-const TAB_BADGE_SIZES = {
-    large: 'small',
-    medium: 'x-small',
-    small: 'x-small',
-};
 /**
  * Navigation tool that organizes content across different screens and views.
  *
@@ -31,20 +25,11 @@ const TAB_BADGE_SIZES = {
  *     }
  *
  * @name TabGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function TabGroup({ 
-//
-onChange: onTabChange, value, size = 'medium', options: optionsProp, width = 'hug', showTrail = false, ...containerProps }) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-    return (_jsx("div", { ...containerProps, "data-bspk": "tab-group", "data-hide-trail": (width === 'hug' && !showTrail) || undefined, "data-size": size, "data-width": width, children: options.map((item, itemIndex) => {
-            const isActive = item.value === value;
-            return (_jsx("button", { "data-active": isActive || undefined, disabled: item.disabled || undefined, onClick: () => {
-                    onTabChange(item.value || item.label, itemIndex);
-                }, children: _jsxs("span", { children: [(isActive && item.iconActive) || item.icon, item.label, item.badge && !item.disabled && _jsx(Badge, { count: item.badge, size: TAB_BADGE_SIZES[size] })] }) }, item.value));
-        }) }));
+export function TabGroup({ onChange: onTabChange, value, size = 'medium', options, width = 'hug', showTrail = false, ...containerProps }) {
+    if (!Array.isArray(options) || options.length < 2)
+        return _jsx(_Fragment, {});
+    return (_jsx(TabList, { "data-bspk": "tab-group", "data-show-trail": showTrail || undefined, onChange: onTabChange, options: options, size: size, value: value, width: width, ...containerProps }));
 }
-TabGroup.bspkName = 'TabGroup';
-export { TabGroup };
 //# sourceMappingURL=TabGroup.js.map

package/dist/components/TabGroup/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroup.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,kBAAkB,CAAC;AAI1B,MAAM,eAAe,GAA6C;IAC9D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACnB,CAAC;AA2FF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,QAAQ,CAAC;AACd,EAAE;AACF,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACgB;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,OAAO,CACH,iBACQ,cAAc,eACR,WAAW,qBACJ,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,eAClD,IAAI,gBACH,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YAEtC,OAAO,CACH,gCACiB,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEpC,OAAO,EAAE,GAAG,EAAE;oBACV,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACrD,CAAC,YAED,2BACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAAI,IACvF,IATF,IAAI,CAAC,KAAK,CAUV,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,sBAAsB,CAAC;AAGxE,OAAO,kBAAkB,CAAC;AAc1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACe;IAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,mBAAK,CAAC;IAChE,OAAO,CACH,KAAC,OAAO,iBACM,WAAW,qBACJ,SAAS,IAAI,SAAS,EACvC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KACR,cAAc,GACpB,CACL,CAAC;AACN,CAAC"}

package/dist/components/TabGroup/TabGroupExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { TabGroupProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const TabGroupExample: ComponentExample<TabGroupProps>;

package/dist/components/TabGroup/TabGroupExample.js

@@ -4,94 +4,98 @@ import { SvgDiamond } from '@bspk/icons/Diamond';
 import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
+const PRESET_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: _jsx(SvgDiamond, {}),
+        iconSelected: _jsx(SvgDiamondFill, {}),
+    },
+    {
+        icon: _jsx(SvgCircle, {}),
+        iconSelected: undefined,
+    },
+    {
+        icon: _jsx(SvgSquare, {}),
+        iconSelected: _jsx(SvgSquareFill, {}),
+    },
+];
 export const TabGroupExample = {
     containerStyle: { width: '100%' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
     presets: [
         {
             label: 'With icons',
             propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: _jsx(SvgDiamond, {}),
-                        iconActive: _jsx(SvgDiamondFill, {}),
-                        badge: undefined,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: _jsx(SvgCircle, {}),
-                        badge: undefined,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: _jsx(SvgSquare, {}),
-                        iconActive: _jsx(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: _jsx(SvgDiamond, {}),
-                        iconActive: _jsx(SvgDiamondFill, {}),
-                        badge: 1,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: _jsx(SvgCircle, {}),
-                        badge: 2,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: _jsx(SvgSquare, {}),
-                        iconActive: _jsx(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',
+        },
+    },
 };
 //# sourceMappingURL=TabGroupExample.js.map

package/dist/components/TabGroup/TabGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMvD,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;wBAC9B,KAAK,EAAE,SAAS;qBACnB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,KAAK,EAAE,SAAS;qBACnB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;wBAC7B,KAAK,EAAE,SAAS;qBACnB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAS;wBACf,UAAU,EAAE,SAAS;wBACrB,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,SAAS;wBACf,UAAU,EAAE,SAAS;wBACrB,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAS;wBACf,UAAU,EAAE,SAAS;wBACrB,KAAK,EAAE,CAAC;qBACX;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;wBAC9B,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,KAAK,EAAE,CAAC;qBACX;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;wBAC7B,KAAK,EAAE,CAAC;qBACX;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"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"}