@bspk/ui 1.1.32 → 1.1.34

package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js

@@ -0,0 +1,14 @@
+import '../../styles/denali-boss.css.js';
+import '../../base.css.js';
+/**
+ * Utility to provide the Denali Boss styles to the application.
+ *
+ * @name StylesProviderDenaliBoss
+ */
+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

@@ -0,0 +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"}

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

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

package/dist/components/StylesProviderDenaliBoss/index.js

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

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

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

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

@@ -0,0 +1,13 @@
+import '@bspk/styles/era.css';
+import '../../base.scss';
+/**
+ * Utility to provide the ERA styles to the application.
+ *
+ * @name StylesProviderEra
+ */
+declare function StylesProviderEra(): JSX.Element | null;
+declare namespace StylesProviderEra {
+    var bspkName: string;
+}
+export { StylesProviderEra };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/StylesProviderEra/StylesProviderEra.js

@@ -0,0 +1,14 @@
+import '../../styles/era.css.js';
+import '../../base.css.js';
+/**
+ * Utility to provide the ERA styles to the application.
+ *
+ * @name StylesProviderEra
+ */
+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

@@ -0,0 +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"}

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

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

package/dist/components/StylesProviderEra/index.js

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

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

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

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

@@ -0,0 +1,13 @@
+import '@bspk/styles/sothebys.css';
+import '../../base.scss';
+/**
+ * Utility to provide the Sotheby's styles to the application.
+ *
+ * @name StylesProviderSothebys
+ */
+declare function StylesProviderSothebys(): JSX.Element | null;
+declare namespace StylesProviderSothebys {
+    var bspkName: string;
+}
+export { StylesProviderSothebys };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/StylesProviderSothebys/StylesProviderSothebys.js

@@ -0,0 +1,14 @@
+import '../../styles/sothebys.css.js';
+import '../../base.css.js';
+/**
+ * Utility to provide the Sotheby's styles to the application.
+ *
+ * @name StylesProviderSothebys
+ */
+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

@@ -0,0 +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"}

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

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

package/dist/components/StylesProviderSothebys/index.js

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

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

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

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

@@ -0,0 +1,57 @@
+import { ChangeEvent } from 'react';
+import { CommonProps } from '../../index.js';
+import './switch.scss';
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
+    /**
+     * Marks the control as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the control is checked or unchecked.
+     *
+     * @type (checked, Event) => void
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Only exists as a alias for `disabled` and to match other input properties.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+};
+/**
+ * A control element that allows users to toggle between two states, typically representing on/off and inherits
+ * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
+ * will more often be used in the SwitchOption component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Switch } from '@bspk/ui/Switch';
+ *
+ *     export function Example() {
+ *         const [isChecked, setIsChecked] = useState<boolean>(false);
+ *
+ *         return (
+ *             <Switch
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setIsChecked}
+ *                 checked={isChecked}
+ *             />
+ *         );
+ *     }
+ *
+ * @element
+ *
+ * @name Switch
+ * @phase DesignReview
+ */
+declare function Switch({ checked, disabled: disabledProp, readOnly, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Switch {
+    var bspkName: string;
+}
+export { Switch };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Switch/Switch.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './switch.css.js';
+/**
+ * A control element that allows users to toggle between two states, typically representing on/off and inherits
+ * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
+ * will more often be used in the SwitchOption component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Switch } from '@bspk/ui/Switch';
+ *
+ *     export function Example() {
+ *         const [isChecked, setIsChecked] = useState<boolean>(false);
+ *
+ *         return (
+ *             <Switch
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setIsChecked}
+ *                 checked={isChecked}
+ *             />
+ *         );
+ *     }
+ *
+ * @element
+ *
+ * @name Switch
+ * @phase DesignReview
+ */
+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

@@ -0,0 +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"}

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

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

package/dist/components/Switch/index.js

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

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

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

package/dist/components/Switch/switch.css

@@ -0,0 +1,54 @@
+[data-bspk=switch] {
+  --track-width: var(--spacing-sizing-09);
+  --toggle-width: var(--spacing-sizing-04);
+  --track-bg: var(--surface-neutral-t4-high);
+  --toggle-bg: var(--foreground-neutral-on-color);
+  display: block;
+  margin: 2px;
+  width: var(--track-width);
+  height: var(--spacing-sizing-05);
+  border-radius: var(--spacing-sizing-05);
+  background-color: var(--track-bg);
+  position: relative;
+  z-index: 1;
+}
+[data-bspk=switch] input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+[data-bspk=switch] span {
+  display: block;
+  width: var(--toggle-width);
+  height: var(--toggle-width);
+  border-radius: var(--radius-circular);
+  background-color: var(--toggle-bg);
+  transition: left 0.2s;
+  box-shadow: var(--drop-shadow-raise);
+  left: 2px;
+  top: 2px;
+  position: absolute;
+}
+[data-bspk=switch]:has(input[type=checkbox]:checked) {
+  --track-bg: var(--foreground-brand-primary);
+}
+[data-bspk=switch]:has(input[type=checkbox]:checked) span {
+  left: calc(var(--track-width) - var(--toggle-width) - 2px);
+}
+[data-bspk=switch]:has(input[type=checkbox]:disabled) {
+  --track-bg: var(--interactions-disabled-opacity);
+  --toggle-bg: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=switch]:has(input[type=checkbox]:disabled) input[type=checkbox] {
+  pointer-events: none;
+}
+[data-bspk=switch]:has(input[type=checkbox]:disabled):has(input[type=checkbox]:checked) span {
+  --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Switch/switch.css.js

@@ -0,0 +1,60 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=switch] {
+  --track-width: var(--spacing-sizing-09);
+  --toggle-width: var(--spacing-sizing-04);
+  --track-bg: var(--surface-neutral-t4-high);
+  --toggle-bg: var(--foreground-neutral-on-color);
+  display: block;
+  margin: 2px;
+  width: var(--track-width);
+  height: var(--spacing-sizing-05);
+  border-radius: var(--spacing-sizing-05);
+  background-color: var(--track-bg);
+  position: relative;
+  z-index: 1;
+}
+[data-bspk=switch] input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+[data-bspk=switch] span {
+  display: block;
+  width: var(--toggle-width);
+  height: var(--toggle-width);
+  border-radius: var(--radius-circular);
+  background-color: var(--toggle-bg);
+  transition: left 0.2s;
+  box-shadow: var(--drop-shadow-raise);
+  left: 2px;
+  top: 2px;
+  position: absolute;
+}
+[data-bspk=switch]:has(input[type=checkbox]:checked) {
+  --track-bg: var(--foreground-brand-primary);
+}
+[data-bspk=switch]:has(input[type=checkbox]:checked) span {
+  left: calc(var(--track-width) - var(--toggle-width) - 2px);
+}
+[data-bspk=switch]:has(input[type=checkbox]:disabled) {
+  --track-bg: var(--interactions-disabled-opacity);
+  --toggle-bg: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=switch]:has(input[type=checkbox]:disabled) input[type=checkbox] {
+  pointer-events: none;
+}
+[data-bspk=switch]:has(input[type=checkbox]:disabled):has(input[type=checkbox]:checked) span {
+  --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1,17 @@
+import { SwitchProps } from '../Switch';
+import { ToggleOptionProps } from '../ToggleOption';
+export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+/**
+ * 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
+ */
+declare function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
+declare namespace SwitchOption {
+    var bspkName: string;
+}
+export { SwitchOption };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SwitchOption/SwitchOption.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch } from '../Switch';
+import { ToggleOption } from '../ToggleOption';
+/**
+ * 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
+ */
+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 }) })));
+}
+SwitchOption.bspkName = 'SwitchOption';
+export { SwitchOption };
+//# sourceMappingURL=SwitchOption.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/SwitchOption/index.js

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

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

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

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

@@ -0,0 +1,123 @@
+import { ReactNode } from 'react';
+import { ElementProps } from '../../index.js';
+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';
+    /**
+     * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
+     * property isn't applicable.
+     *
+     * @default false
+     */
+    showTrail?: boolean;
+};
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabGroup } from '@bspk/ui/TabGroup';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabGroup
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabGroup
+ * @phase DesignReview
+ */
+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 };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabGroup/TabGroup.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../Badge';
+import { useOptionIconsInvalid } from '../../hooks/useOptionIconsInvalid';
+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.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabGroup } from '@bspk/ui/TabGroup';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabGroup
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabGroup
+ * @phase DesignReview
+ */
+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));
+        }) }));
+}
+TabGroup.bspkName = 'TabGroup';
+export { TabGroup };
+//# sourceMappingURL=TabGroup.js.map

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

@@ -0,0 +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"}

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

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