@bspk/ui 1.1.16 → 1.1.18

package/dist/demo/examples.js

@@ -0,0 +1,472 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgCircle } from '@bspk/icons/Circle';
+import { SvgContentCopy } from '@bspk/icons/ContentCopy';
+import { SvgDiamond } from '@bspk/icons/Diamond';
+import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
+import { SvgSquare } from '@bspk/icons/Square';
+import { SvgSquareFill } from '@bspk/icons/SquareFill';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { Img } from '../Img';
+import { LEADING_COMPONENTS, TRAILING_COMPONENTS, ListItem } from '../ListItem';
+import { Popover } from '../Popover';
+import { Radio } from '../Radio';
+import { Switch } from '../Switch';
+import { Tag } from '../Tag';
+import { Txt } from '../Txt';
+import { ExampleModalRender } from './ExampleModalRender';
+import { ExamplePlaceholder } from './ExamplePlaceholder';
+export function createUid(prefix = 'uid') {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+}
+export const asProps = (p) => p;
+export const setPresets = (p) => typeof p === 'function' ? p() : p;
+const buttonExamplePresets = setPresets([
+    {
+        label: 'Icon & Text',
+        state: {
+            icon: 'Add',
+            label: 'Add',
+        },
+    },
+    {
+        label: 'Text only',
+        state: {
+            label: 'Add',
+        },
+    },
+    {
+        label: 'Icon only',
+        state: {
+            showLabel: false,
+            icon: 'Add',
+            label: 'Add',
+        },
+    },
+]);
+export const examples = (setState, action) => ({
+    Avatar: {
+        presets: setPresets([
+            {
+                label: 'Name Only',
+                state: {
+                    name: 'Andre Giant',
+                    image: undefined, // Ensure no image is set
+                    initials: undefined, // Ensure no initials are set
+                    icon: undefined, // Ensure no icon is set
+                },
+            },
+            {
+                label: 'With Initials',
+                state: {
+                    name: 'Andre Giant',
+                    initials: 'GA',
+                    image: undefined, // Ensure no image is set
+                },
+            },
+            {
+                label: 'With Icon',
+                state: {
+                    name: 'Andre Giant',
+                    icon: 'Person',
+                    image: undefined, // Ensure no image is set
+                },
+            },
+            {
+                label: 'With Image',
+                state: {
+                    name: 'Andre Giant',
+                    image: '/profile.jpg',
+                },
+            },
+        ]),
+    },
+    Button: {
+        presets: buttonExamplePresets,
+    },
+    BannerAlert: {
+        containerStyle: { width: '100%' },
+        propRenderOverrides: (state, context) => {
+            let nextHeader = state.header || 'This is a banner alert';
+            if (context?.variantName === 'variant') {
+                if (context?.variantValue === 'informational')
+                    nextHeader = 'This is informational banner';
+                if (context?.variantValue === 'success')
+                    nextHeader = 'This is success banner';
+                if (context?.variantValue === 'warning')
+                    nextHeader = 'This is warning banner';
+                if (context?.variantValue === 'error')
+                    nextHeader = 'This is error banner';
+            }
+            return { ...state, header: nextHeader };
+        },
+        presets: setPresets([
+            {
+                label: 'With CallToAction',
+                state: {
+                    callToAction: {
+                        label: 'Click me',
+                        onClick: () => action('Call to action clicked!'),
+                    },
+                },
+            },
+            {
+                label: 'Without OnClose',
+                state: {
+                    onClose: undefined,
+                },
+            },
+        ]),
+    },
+    Card: {
+        propRenderOverrides: (state) => ({
+            ...state,
+            children: (_jsx(ExamplePlaceholder, { style: {
+                    height: '200px',
+                    width: '100%',
+                    minWidth: '250px',
+                } })),
+        }),
+    },
+    Divider: {
+        render: ({ props, Component }) => {
+            const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: props.orientation === 'vertical' ? 'row' : 'column',
+                    alignItems: props.orientation === 'vertical' ? 'center' : 'stretch',
+                    justifyContent: props.orientation === 'vertical' ? 'center' : 'stretch',
+                    maxWidth: props.orientation !== 'vertical' ? '300px' : 'auto',
+                }, children: [_jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style })] }));
+        },
+    },
+    Dropdown: {
+        presets: setPresets(() => {
+            return [
+                {
+                    label: 'Simple',
+                    state: {},
+                },
+                {
+                    label: 'Multi',
+                    state: { isMulti: true },
+                },
+                {
+                    label: 'Trailing Tags',
+                    state: asProps({
+                        options: [
+                            //
+                            { value: 'a', label: 'Package A', tag: 'Recommended', tagColor: 'blue' },
+                            { value: 'b', label: 'Package B', tag: 'Best Value', tagColor: 'green' },
+                            { value: 'c', label: 'Package C' },
+                            { value: 'd', label: 'Package D' },
+                        ],
+                        renderListItem: (props) => {
+                            return {
+                                trailing: props.item.tag && props.item.tagColor ? (_jsx(Tag, { color: props.item.tagColor, size: "x-small", children: props.item.tag })) : null,
+                            };
+                        },
+                    }),
+                },
+                {
+                    label: 'Trailing Text',
+                    state: asProps({
+                        options: [
+                            //
+                            { value: '1', label: 'Option A', price: 400 },
+                            { value: '2', label: 'Option B', price: 1000 },
+                            { value: '3', label: 'Option C', price: 1600 },
+                            { value: '4', label: 'Option D', price: 2000 },
+                        ],
+                        renderListItem: (props) => {
+                            return {
+                                trailing: (_jsx(Txt, { children: `${new Intl.NumberFormat('en-US', {
+                                        style: 'currency',
+                                        currency: 'USD',
+                                    }).format(props.item.price / 100)}` })),
+                            };
+                        },
+                    }),
+                },
+                {
+                    label: 'Leading Avatar',
+                    state: asProps({
+                        options: [
+                            //
+                            {
+                                value: 'Jessica',
+                                label: 'Jessica P.',
+                                profile: { name: 'Jessica P.' },
+                            },
+                            { value: 'Louis', label: 'Louis L.', profile: { name: 'Louis L.' } },
+                            { value: 'Harvey', label: 'Harvey S.', profile: { name: 'Harvey S.' } },
+                            { value: 'Mike', label: 'Mike R.', profile: { name: 'Mike R.' } },
+                        ],
+                        renderListItem: (props) => {
+                            return {
+                                leading: _jsx(Avatar, { size: "small", ...props.item.profile }),
+                            };
+                        },
+                    }),
+                },
+            ];
+        }),
+    },
+    EmptyState: {
+        containerStyle: { width: '100%' },
+        propRenderOverrides: (state, context) => {
+            return {
+                ...state,
+                children: context?.preset?.label === 'With Children' ? (_jsx(ExamplePlaceholder, { style: {
+                        height: '200px',
+                        width: '60%',
+                        minWidth: '250px',
+                    } })) : null,
+            };
+        },
+        presets: setPresets([
+            {
+                label: 'With CallToAction',
+                state: {
+                    header: 'No payment methods added',
+                    body: 'Add a card to your account for faster checkout.',
+                    callToAction: {
+                        label: 'Add payment method',
+                        onClick: () => action('Add payment method clicked!'),
+                    },
+                },
+            },
+            {
+                label: 'With Children',
+                state: {
+                    header: 'No payment methods added',
+                    body: 'Add a card to your account for faster checkout.',
+                    callToAction: {
+                        label: 'Add payment method',
+                        onClick: () => action('Add payment method clicked!'),
+                    },
+                },
+            },
+        ]),
+    },
+    Fab: {
+        containerStyle: { width: '100%' },
+        presets: buttonExamplePresets,
+    },
+    ListItem: {
+        containerStyle: { width: '50%' },
+        propRenderOverrides: (state) => {
+            return {
+                ...state,
+                leading: createChildrenElement(state, 'leading', setState, action),
+                trailing: createChildrenElement(state, 'trailing', setState, action),
+            };
+        },
+        propControlsOverrides: {
+            leading: {
+                options: [...LEADING_COMPONENTS],
+                type: 'select',
+            },
+            trailing: {
+                options: [...TRAILING_COMPONENTS],
+                type: 'select',
+            },
+        },
+    },
+    Modal: {
+        hideVariants: true,
+        render: ({ props, preset }) => (_jsx(ExampleModalRender, { preset: preset, props: props, setState: setState })),
+    },
+    Popover: {
+        render: ({ props }) => {
+            return (_jsx(_Fragment, { children: _jsx(Popover, { ...props, children: _jsx(Button, { label: `Click me (${props.placement})`, variant: "secondary" }) }) }));
+        },
+        presets: setPresets([
+            {
+                label: 'With CallToAction',
+                state: { callToAction: { label: 'Click me', onClick: () => action('Call to action clicked!') } },
+            },
+        ]),
+    },
+    Link: {
+        render: ({ props, Component }) => {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    width: '100%',
+                    justifyContent: 'center',
+                    background: props.variant === 'subtle-inverse' ? 'black' : '',
+                    minHeight: 'var(--spacing-sizing-24)',
+                }, children: _jsx(Component, { ...props }) }));
+        },
+    },
+    ProgressionStepper: {
+        presets: setPresets([
+            {
+                label: 'Horizontal',
+                state: {
+                    variant: 'horizontal',
+                    currentStep: 2,
+                    steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
+                },
+            },
+            {
+                label: 'Vertical',
+                state: {
+                    variant: 'vertical',
+                    currentStep: 2,
+                    steps: [
+                        {
+                            name: 'Name of step 1',
+                            subtext: `Subtext of step 1`,
+                        },
+                        {
+                            name: 'Name of step 2',
+                            subtext: `Subtext of step 2`,
+                        },
+                        {
+                            name: 'Name of step 3',
+                            subtext: `Subtext of step 3`,
+                        },
+                    ],
+                },
+            },
+            {
+                label: 'Widget',
+                state: {
+                    variant: 'widget',
+                    currentStep: 2,
+                    steps: [
+                        { name: 'Name of step 1' },
+                        { name: 'Name of step 2' },
+                        { name: 'Name of step 3' },
+                        { name: 'Name of step 4' },
+                        { name: 'Name of step 5' },
+                        { name: 'Name of step 6' },
+                        { name: 'Name of step 7' },
+                    ],
+                },
+            },
+        ]),
+    },
+    Radio: {
+        render: ({ props, Component }) => _jsx(Component, { ...props, name: createUid('radio') }),
+    },
+    RadioGroup: {
+        render: ({ props, Component }) => _jsx(Component, { ...props, name: createUid('radio') }),
+    },
+    RadioOption: {
+        render: ({ props, Component }) => _jsx(Component, { ...props, name: createUid('radio') }),
+    },
+    SegmentedControl: {
+        containerStyle: { width: '100%' },
+        presets: setPresets([
+            {
+                label: 'With icons',
+                state: {
+                    options: [
+                        { value: '1', label: 'Option 1', icon: _jsx(SvgDiamond, {}), iconActive: _jsx(SvgDiamondFill, {}) },
+                        { value: '2', label: 'Disabled 2', disabled: true, icon: _jsx(SvgCircle, {}) },
+                        { value: '3', label: 'Option 3', icon: _jsx(SvgSquare, {}), iconActive: _jsx(SvgSquareFill, {}) },
+                    ],
+                },
+            },
+        ]),
+    },
+    TextInput: {
+        containerStyle: { width: '280px' },
+        presets: setPresets([
+            {
+                label: 'Currency',
+                state: {
+                    type: 'number',
+                    leading: '$',
+                    trailing: undefined,
+                    placeholder: 'currency',
+                },
+            },
+            {
+                label: 'Percent',
+                state: {
+                    type: 'number',
+                    leading: undefined,
+                    trailing: '%',
+                    placeholder: 'percent',
+                },
+            },
+            {
+                label: 'Dimension',
+                state: {
+                    type: 'number',
+                    leading: undefined,
+                    placeholder: 'dimensions',
+                    trailing: 'ft',
+                },
+            },
+        ]),
+    },
+    TabGroup: {
+        containerStyle: { width: '100%' },
+        presets: setPresets([
+            {
+                label: 'With icons',
+                state: {
+                    options: [
+                        { value: '1', label: 'Option 1', icon: _jsx(SvgDiamond, {}), iconActive: _jsx(SvgDiamondFill, {}) },
+                        { value: '2', label: 'Disabled 2', disabled: true, icon: _jsx(SvgCircle, {}) },
+                        { value: '3', label: 'Option 3', icon: _jsx(SvgSquare, {}), iconActive: _jsx(SvgSquareFill, {}) },
+                    ],
+                },
+            },
+            {
+                label: 'With badges',
+                state: {
+                    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(SvgSquare, {}), badge: 3 },
+                    ],
+                },
+            },
+        ]),
+    },
+    Tooltip: {
+        render: ({ props: state, Component }) => {
+            return (_jsx(_Fragment, { children: _jsx(Component, { label: "Tooltip text", ...state, placement: [state.placement].flat()[0] || 'top', children: _jsx(Button, { label: `Hover over me ${'data-variant-value' in state ? `(${state['data-variant-value']})` : ''}`, variant: "secondary" }) }) }));
+        },
+    },
+});
+export const createChildrenElement = (state, name, setState, action) => {
+    const componentName = state[name];
+    if (componentName === 'Checkbox' || componentName === 'Radio' || componentName === 'Switch') {
+        let As = Checkbox;
+        if (componentName === 'Radio')
+            As = Radio;
+        else if (componentName === 'Switch')
+            As = Switch;
+        return (_jsx(As, { "aria-label": `${componentName} demo`, checked: state[`${name}-toggle`], name: `${name}-toggle`, onChange: (checked) => {
+                setState({ [`${name}-toggle`]: checked });
+            }, onClick: () => action(`${name} ${componentName} clicked`), value: `${name}-${componentName}` }));
+    }
+    if (componentName === 'ListItemButton')
+        return (_jsx(ListItem.Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') }));
+    if (componentName === 'Img')
+        return _jsx(Img, { alt: "placeholder", src: "/placeholder.svg" });
+    if (componentName === 'Avatar')
+        return _jsx(Avatar, { name: "List Item", showTooltip: false });
+    if (componentName === 'Tag') {
+        return _jsx(Tag, { children: "Tag" });
+    }
+    if (componentName === 'Txt')
+        return _jsx(Txt, { children: "Text" });
+    if (componentName === 'Icon')
+        return _jsx(SvgDiamond, {});
+    return null;
+};
+//# sourceMappingURL=examples.js.map

package/dist/demo/examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.js","sourceRoot":"","sources":["../../src/demo/examples.tsx"],"names":[],"mappings":"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"}

package/dist/divider.css

@@ -1 +1 @@
-[data-bspk=divider]{/*! --inset: is set via inline style */display:flex;background-color:var(--stroke-neutral-low);align-self:stretch;place-content:stretch stretch;margin:0;padding:0;content:"hello";--length: calc(100% - var(--inset) * 2)}[data-bspk=divider],[data-bspk=divider][data-thickness=light]{--line-thickness: 1px;--padding: var(--spacing-sizing-02)}[data-bspk=divider][data-thickness=heavy]{--line-thickness: 2px;--padding: var(--spacing-sizing-04)}[data-bspk=divider],[data-bspk=divider][data-orientation=horizontal]{width:unset;min-height:unset;height:var(--line-thickness);min-width:var(--length);margin:var(--padding) var(--inset)}[data-bspk=divider][data-orientation=vertical]{height:unset;min-width:unset;width:var(--line-thickness);min-height:var(--length);margin:var(--inset) var(--padding)}[data-bspk=divider][data-hide-padding]{--padding: 0}
+[data-bspk=divider]{/*! --inset: is set via inline style */display:flex;background-color:var(--stroke-neutral-low);align-self:stretch;place-content:stretch stretch;margin:0;padding:0;content:"hello";--length: calc(100% - var(--inset) * 2)}[data-bspk=divider],[data-bspk=divider][data-thickness=light]{--line-thickness: 1px;--padding: var(--spacing-sizing-02)}[data-bspk=divider][data-thickness=heavy]{--line-thickness: 2px;--padding: var(--spacing-sizing-04);border-radius:var(--radius-circular)}[data-bspk=divider],[data-bspk=divider][data-orientation=horizontal]{width:unset;min-height:unset;height:var(--line-thickness);min-width:var(--length);margin:var(--padding) var(--inset)}[data-bspk=divider][data-orientation=vertical]{height:unset;min-width:unset;width:var(--line-thickness);min-height:var(--length);margin:var(--inset) var(--padding)}[data-bspk=divider][data-hide-padding]{--padding: 0}

package/dist/hooks/useOptionIconsInvalid.d.ts

@@ -20,8 +20,17 @@ export type NavOption = {
     disabled?: boolean;
     /** The value of the option. If not provided, the label will be used as the value. */
     value?: string;
-    /** The the icon to display before the label. */
+    /**
+     * The the icon to display before the label.
+     *
+     * @type BspkIcon
+     */
     icon?: React.ReactNode;
+    /**
+     * The icon to display before the label when the option is active.
+     *
+     * @type BspkIcon
+     */
     iconActive?: React.ReactNode;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useOptionIconsInvalid.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOptionIconsInvalid.js","sourceRoot":"","sources":["../../src/hooks/useOptionIconsInvalid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAsB,OAAwB;IAC/E,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC;QAErD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzG,QAAQ,CACJ,YAAY,EACZ,+FAA+F,CAClG,CAAC;QAEF,OAAO,YAAY,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5B,CAAC;AAsBD,sDAAsD"}
+{"version":3,"file":"useOptionIconsInvalid.js","sourceRoot":"","sources":["../../src/hooks/useOptionIconsInvalid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAsB,OAAwB;IAC/E,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC;QAErD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzG,QAAQ,CACJ,YAAY,EACZ,+FAA+F,CAClG,CAAC;QAEF,OAAO,YAAY,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5B,CAAC;AA+BD,sDAAsD"}

package/dist/index.d.ts

@@ -3,8 +3,9 @@
  *
  * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
  */
-import { ChangeEvent, MouseEvent as ReactMouseEvent, ComponentProps, JSXElementConstructor, ReactNode } from 'react';
+import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
+export type SetRef<T> = (instance: T | null) => void;
 export type ElementProps<P extends Record<string, unknown>, E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentProps<E>, O | keyof P> & P;
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
 export type CallToActionButton = {
@@ -17,29 +18,13 @@ export type CallToActionButton = {
     /**
      * The callback function for the call to action button.
      *
-     * @type () => void
      * @required
      */
     onClick: () => void;
     /** The size of the call to action button. */
     size?: ButtonSize;
 };
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> & InvalidPropsLibrary & Required<CommonProps<'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<T>) => void;
-};
-export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElement = HTMLElement> = Pick<CommonPropsLibrary<T>, K>;
+export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 /**
  * The props that are common to input elements.
  *
@@ -61,7 +46,7 @@ export type InvalidPropsLibrary = {
      */
     errorMessage?: string;
 };
-export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
+export type CommonPropsLibrary = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
     /**
@@ -118,13 +103,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     'aria-label': string;
-    /**
-     * The function to call when the element is clicked.
-     *
-     * @param event - The mouse event.
-     * @returns Void
-     */
-    onClick?: (event: ReactMouseEvent<T, MouseEvent>) => void;
 };
 export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
 export declare const BRANDS: {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0JH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+HH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}

package/dist/list-item.css

@@ -1 +1 @@
-[data-bspk=list-item]{display:block;width:100%;box-sizing:border-box;padding:0 var(--spacing-sizing-02);background:unset;border:unset;margin:unset;text-decoration:unset;user-select:none;color:var(--foreground-neutral-on-surface)}[data-bspk=list-item]:is(a),[data-bspk=list-item]:is(button),[data-bspk=list-item][onclick],[data-bspk=list-item][role=button]{cursor:pointer}[data-bspk=list-item] [data-inner]{height:100%;width:100%;min-height:var(--spacing-sizing-09);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--spacing-sizing-03);padding:var(--spacing-sizing-02) 0;justify-items:stretch}[data-bspk=list-item] [data-inner]>*{min-height:100%;width:fit-content;display:flex;flex-direction:column;justify-content:space-around;flex:1;flex-shrink:0}[data-bspk=list-item] [data-inner]>* svg{width:24px;max-width:unset}[data-pseudo=focus] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:focus-visible,[data-bspk=list-item][data-action]:has(*:focus-visible){box-shadow:inset var(--stroke-neutral-focus) 0 0 0 2px}[data-pseudo=focus] [data-bspk=list-item][data-action] [data-inner],[data-bspk=list-item][data-action]:focus-visible [data-inner],[data-bspk=list-item][data-action]:has(*:focus-visible) [data-inner]{border-color:rgba(0,0,0,0)}[data-pseudo=hover] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action][data-active],[data-bspk=list-item][data-action]:active{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=list-item] [data-component=Img]>img{height:36px;width:36px;max-width:unset}[data-bspk=list-item]:is(label) [data-inner]{border-bottom:0;gap:var(--spacing-sizing-02)}[data-bspk=list-item] [data-item-label]{flex:100%;text-align:left}[data-bspk=list-item] [data-item-label] [data-text]{font:var(--labels-base);color:var(--foreground-neutral-on-surface)}[data-bspk=list-item] [data-item-label] [data-sub-text]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=list-item][aria-disabled] [data-text],[data-bspk=list-item][aria-disabled] [data-sub-text]{color:var(--foreground-neutral-disabled-on-surface)}
+[data-bspk=list-item]{display:block;width:100%;box-sizing:border-box;padding:0 var(--spacing-sizing-02);background:unset;border:unset;margin:unset;text-decoration:unset;user-select:none;color:var(--foreground-neutral-on-surface)}[data-bspk=list-item]:is(a),[data-bspk=list-item]:is(button),[data-bspk=list-item][onclick],[data-bspk=list-item][role=button]{cursor:pointer}[data-bspk=list-item] [data-inner]{height:100%;width:100%;min-height:var(--spacing-sizing-09);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--spacing-sizing-03);padding:var(--spacing-sizing-02) 0;justify-items:stretch}[data-bspk=list-item] [data-inner]>*{min-height:100%;width:fit-content;display:flex;flex-direction:column;justify-content:space-around;flex:1;flex-shrink:0}[data-bspk=list-item] [data-inner]>* svg{width:24px;max-width:unset}[data-pseudo=focus] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:focus-visible,[data-bspk=list-item][data-action]:has(*:focus-visible){box-shadow:inset var(--stroke-neutral-focus) 0 0 0 2px}[data-pseudo=focus] [data-bspk=list-item][data-action] [data-inner],[data-bspk=list-item][data-action]:focus-visible [data-inner],[data-bspk=list-item][data-action]:has(*:focus-visible) [data-inner]{border-color:rgba(0,0,0,0)}[data-pseudo=hover] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action]:hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active] [data-bspk=list-item][data-action],[data-bspk=list-item][data-action][data-active],[data-bspk=list-item][data-action]:active{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=list-item] [data-trailing]:has(input){pointer-events:none}[data-bspk=list-item] [data-component=Img]>img{height:36px;width:36px;max-width:unset}[data-bspk=list-item]:is(label) [data-inner]{border-bottom:0;gap:var(--spacing-sizing-02)}[data-bspk=list-item] [data-item-label]{flex:100%;text-align:left}[data-bspk=list-item] [data-item-label] [data-text]{font:var(--labels-base);color:var(--foreground-neutral-on-surface)}[data-bspk=list-item] [data-item-label] [data-sub-text]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=list-item][aria-disabled] [data-text],[data-bspk=list-item][aria-disabled] [data-sub-text]{color:var(--foreground-neutral-disabled-on-surface)}

package/dist/menu.css

@@ -1 +1 @@
-[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-list-item]{min-height:var(--item-size);height:var(--item-size)}
+[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-bspk=list-item]{min-height:var(--item-size);height:var(--item-size)}

package/dist/segmented-control.css

@@ -1 +1 @@
-[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface);flex-grow:var(--btn-flex-grow);font:var(--labels-small);margin:0;height:var(--spacing-sizing-12);background:rgba(0,0,0,0);position:relative}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [data-outer]{height:var(--outer-height);background:var(--surface-neutral-t3-low);margin:var(--spacing-sizing-01) 0;padding:var(--spacing-sizing-01) 0;display:block}[data-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button:first-of-type [data-outer]{border-top-left-radius:var(--radius-medium);border-bottom-left-radius:var(--radius-medium);padding-left:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:last-of-type [data-outer]{border-top-right-radius:var(--radius-medium);border-bottom-right-radius:var(--radius-medium);padding-right:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}
+[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface);flex-grow:var(--btn-flex-grow);font:var(--labels-small);margin:0;height:var(--spacing-sizing-12);background:rgba(0,0,0,0);position:relative;white-space:nowrap}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [data-outer]{height:var(--outer-height);background:var(--surface-neutral-t3-low);margin:var(--spacing-sizing-01) 0;padding:var(--spacing-sizing-01) 0;display:block}[data-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button:first-of-type [data-outer]{border-top-left-radius:var(--radius-medium);border-bottom-left-radius:var(--radius-medium);padding-left:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:last-of-type [data-outer]{border-top-right-radius:var(--radius-medium);border-bottom-right-radius:var(--radius-medium);padding-right:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}

package/dist/tab-group.css

@@ -1 +1 @@
-[data-bspk=tab-group]{display:flex;flex-direction:row;--btn-flex-grow: 0;border-bottom:1px solid var(--stroke-neutral-low);width:100%;--font: var(--labels-base);--height: var(--spacing-sizing-10)}[data-bspk=tab-group][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1}[data-bspk=tab-group][data-size=small]{--font: var(--labels-small);--height: var(--spacing-sizing-08)}[data-bspk=tab-group][data-size=large]{--font: var(--labels-large);--height: var(--spacing-sizing-12)}[data-bspk=tab-group] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface-variant-02);background:none;flex-grow:var(--btn-flex-grow);font:var(--font)}[data-bspk=tab-group] button:hover{background:var(--interactions-neutral-hover-opacity)}[data-bspk=tab-group] button:active{background:var(--interactions-neutral-press-opacity)}[data-bspk=tab-group] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=tab-group] button:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=tab-group] button 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)}[data-bspk=tab-group] button span svg{width:var(--spacing-sizing-05)}[data-bspk=tab-group] button[data-active]{color:var(--foreground-brand-primary)}[data-bspk=tab-group] button[data-active] 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}[data-bspk=tab-group] button[data-active] span svg{color:var(--surface-brand-primary)}[data-bspk=tab-group][data-hide-trail]{border-bottom:none}[data-bspk=tab-group][data-hide-trail] button{border-bottom:1px solid var(--stroke-neutral-low)}
+[data-bspk=tab-group]{display:flex;flex-direction:row;--btn-flex-grow: 0;border-bottom:1px solid var(--stroke-neutral-low);width:100%;--font: var(--labels-base);--height: var(--spacing-sizing-10)}[data-bspk=tab-group][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1}[data-bspk=tab-group][data-size=small]{--font: var(--labels-small);--height: var(--spacing-sizing-08)}[data-bspk=tab-group][data-size=large]{--font: var(--labels-large);--height: var(--spacing-sizing-12)}[data-bspk=tab-group] button{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}[data-bspk=tab-group] button:hover{background:var(--interactions-neutral-hover-opacity)}[data-bspk=tab-group] button:active{background:var(--interactions-neutral-press-opacity)}[data-bspk=tab-group] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=tab-group] button:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=tab-group] button 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)}[data-bspk=tab-group] button span svg{width:var(--spacing-sizing-05)}[data-bspk=tab-group] button[data-active]{color:var(--foreground-brand-primary)}[data-bspk=tab-group] button[data-active] 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}[data-bspk=tab-group] button[data-active] span svg{color:var(--surface-brand-primary)}[data-bspk=tab-group][data-hide-trail]{border-bottom:none}[data-bspk=tab-group][data-hide-trail] button{border-bottom:1px solid var(--stroke-neutral-low)}

package/dist/tag.css

@@ -1 +1 @@
-[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}
+[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap;pointer-events:none}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}