@bspk/ui 1.1.31 → 1.1.33

package/dist/StylesProviderSothebys.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html:has(body[data-bspk]){height:100%;scroll-behavior:smooth}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body[data-bspk]{height:100%;scroll-behavior:smooth;font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}body[data-bspk] input:-internal-autofill-previewed,body[data-bspk] input:-internal-autofill-selected,body[data-bspk] textarea:-internal-autofill-previewed,body[data-bspk] textarea:-internal-autofill-selected,body[data-bspk] select:-internal-autofill-previewed,body[data-bspk] select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}body[data-bspk] a{color:var(--foreground-link-text-default)}body[data-bspk] a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}body[data-bspk] a:not([disabled]):active{color:var(--foreground-link-text-default);filter:brightness(80%)}body[data-bspk] a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}body[data-bspk] a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}body[data-bspk] a[data-default]{color:var(--foreground-link-text-default) !important}body[data-bspk] a[data-hover]{color:var(--foreground-link-text-default-hovered) !important}body[data-bspk] a[data-active]{color:var(--foreground-link-text-default) !important;filter:brightness(80%)}body[data-bspk] a[data-visited]{color:var(--foreground-link-text-default-visited) !important}body[data-bspk] a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}body[data-bspk] a[data-subtle]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed)}body[data-bspk] a[data-subtle]:not([disabled]):visited{color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}body[data-bspk] a[data-subtle][data-default]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered) !important}body[data-bspk] a[data-subtle][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed) !important}body[data-bspk] a[data-subtle][data-visited]{color:var(--foreground-neutral-on-surface) !important}body[data-bspk] a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited{color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}body[data-bspk] a[data-subtle-inverse][data-default]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered) !important}body[data-bspk] a[data-subtle-inverse][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed) !important}body[data-bspk] a[data-subtle-inverse][data-visited]{color:var(--foreground-neutral-inverse-on-surface) !important}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
-import '@bspk/styles/sothebys.css';
-/**
- * Utility to provide the Sotheby's styles to the application.
- *
- * @name StylesProviderSothebys
- */
-function StylesProviderSothebys() {
-    return _jsx(_Fragment, {});
-}
-StylesProviderSothebys.bspkName = 'StylesProviderSothebys';
-export { StylesProviderSothebys };
-//# sourceMappingURL=StylesProviderSothebys.js.map

package/dist/StylesProviderSothebys.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StylesProviderSothebys.js","sourceRoot":"","sources":["../src/StylesProviderSothebys.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,2BAA2B,CAAC;AACnC;;;;GAIG;AACH,SAAS,sBAAsB;IAC3B,OAAO,mBAAK,CAAC;AACjB,CAAC;AAED,sBAAsB,CAAC,QAAQ,GAAG,wBAAwB,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/Switch.d.ts

@@ -1,50 +0,0 @@
-import './switch.scss';
-import { ChangeEvent } from 'react';
-import { CommonProps } from './';
-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;
-};
-/**
- * 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
- */
-declare function Switch(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/Switch.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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;box-sizing:border-box;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 .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)}`);;
-/**
- * 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
- */
-function Switch(props) {
-    const { 
-    //
-    checked = false, disabled, ...otherProps } = props;
-    return (_jsxs("span", { "data-bspk": "switch", children: [_jsx("input", { ...otherProps, "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/Switch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AAqBvB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM;IACF,EAAE;IACF,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,UAAU,mBACC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,OAAO,EAChB,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/SwitchOption.d.ts

@@ -1,16 +0,0 @@
-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
- */
-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/SwitchOption.js

@@ -1,17 +0,0 @@
-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
- */
-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/SwitchOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../src/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIjE;;;;;;GAMG;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/TabGroup.d.ts

@@ -1,120 +0,0 @@
-import './tab-group.scss';
-import { ReactNode } from 'react';
-import { ElementProps } from './';
-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.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { 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
- */
-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/TabGroup.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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)}`);;
-import { Badge } from './Badge';
-import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
-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
- */
-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 && !isActive && (_jsx(Badge, { count: item.badge, size: TAB_BADGE_SIZES[size] }))] }) }, item.value));
-        }) }));
-}
-TabGroup.bspkName = 'TabGroup';
-export { TabGroup };
-//# sourceMappingURL=TabGroup.js.map

package/dist/TabGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../src/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,MAAM,eAAe,GAA6C;IAC9D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACnB,CAAC;AAyFF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;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,CAAC,QAAQ,IAAI,CAC1C,KAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAAI,CAC5D,IACE,IAXF,IAAI,CAAC,KAAK,CAYV,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/Table.d.ts

@@ -1,45 +0,0 @@
-import './table.scss';
-import { ReactNode } from 'react';
-import { ElementProps } from '.';
-export type TableRow = Record<string, ReactNode>;
-export type TableColumn<R extends TableRow = Record<string, ReactNode>> = {
-    /**
-     * The key of the column. This is used to access the data in the row.
-     *
-     * @type string
-     */
-    key: keyof R;
-    /**
-     * The label of the column. This is used to display the column header.
-     *
-     * @type string
-     */
-    label: string;
-    /**
-     * The width of the column. This is used to set the width of the column.
-     *
-     * Used to set the value of
-     * [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
-     *
-     * @default 1fr
-     * @type string
-     */
-    width?: string;
-};
-export type TableProps<R extends TableRow> = {
-    /** The data of the table. */
-    rows: R[];
-    /** The columns of the table. */
-    columns: TableColumn<R>[];
-};
-/**
- * Component description coming soon.
- *
- * @name Table
- */
-declare function Table<R extends TableRow>({ rows, columns, ...props }: ElementProps<TableProps<R>, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Table {
-    var bspkName: string;
-}
-export { Table };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Table.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=table]{width:100%;border-collapse:separate;text-align:left;border-spacing:2rem .125rem;display:grid;color:var(--foreground-neutral-on-surface);font:var(--labels-base);border-radius:var(--radius-medium);border:1px solid var(--stroke-neutral-low)}[data-bspk=table] [data-cell]{display:flex;flex-direction:column;gap:var(--spacing-sizing-02);padding:var(--spacing-sizing-04);background-color:var(--surface-neutral-t1-base);border-bottom:var(--stroke-neutral-low) solid 1px;font:var(--labels-small)}[data-bspk=table] [data-cell] p{margin:0;padding:0;font:var(--body-small)}[data-bspk=table] [data-head]{display:flex;align-items:center;flex-direction:row;border-bottom:1px solid var(--stroke-neutral-base);background:var(--surface-neutral-t2-lowest);height:var(--spacing-sizing-10);padding:0 var(--spacing-sizing-03);font:var(--labels-base)}[data-bspk=table] [data-head][data-head=first]{border-top-left-radius:var(--radius-medium)}[data-bspk=table] [data-head][data-head=last]{border-top-right-radius:var(--radius-medium)}`);;
-/**
- * Component description coming soon.
- *
- * @name Table
- */
-function Table({ rows, columns, ...props }) {
-    return (_jsxs("div", { ...props, "data-bspk": "table", style: {
-            ...props.style,
-            gridTemplateColumns: columns.map((c) => `minmax(0, ${c.width || '1fr'})`).join(' '),
-        }, children: [columns.map((column, index, arr) => (_jsx("div", { "data-head": [index === 0 && 'first', index === arr.length - 1 && 'last'].filter(Boolean).join(' '), children: column.label }, column.key))), rows.map((row, index, arr) => {
-                const lastRow = index === arr.length - 1 || undefined;
-                return columns.map((column) => (_jsx("div", { "data-cell": column.key, "data-row-last": lastRow, children: row[column.key] }, index + column.key)));
-            })] }));
-}
-Table.bspkName = 'Table';
-export { Table };
-//# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAuCtB;;;;GAIG;AACH,SAAS,KAAK,CAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAsC;IAC9F,OAAO,CACH,kBACQ,KAAK,eACC,OAAO,EACjB,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,mBAAmB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;SACtF,aAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACjC,2BACe,CAAC,KAAK,KAAK,CAAC,IAAI,OAAO,EAAE,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAGhG,MAAM,CAAC,KAAK,IAFR,MAAM,CAAC,GAAa,CAGvB,CACT,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;gBAC1B,MAAM,OAAO,GAAG,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC;gBACtD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,2BAAgB,MAAM,CAAC,GAAG,mBAAiB,OAAO,YAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IADqC,KAAK,GAAI,MAAM,CAAC,GAAc,CAEjF,CACT,CAAC,CAAC;YACP,CAAC,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/Tag.d.ts

@@ -1,70 +0,0 @@
-import './tag.scss';
-import { ElementType, ReactNode } from 'react';
-import { ColorVariant } from './utils/colorVariants';
-import { ElementProps } from './';
-export type TagProps<As extends ElementType = 'span'> = {
-    /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content of the tag.
-     *
-     * @example
-     *     New;
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * The size of the tag.
-     *
-     * @default small
-     */
-    size?: 'small' | 'x-small';
-    /**
-     * The color of the tag.
-     *
-     * @default grey
-     */
-    color?: ColorVariant;
-    /**
-     * The display variant of the tag.
-     *
-     * @default flat
-     */
-    variant?: 'corner-wrap' | 'flat' | 'pill';
-    /**
-     * Whether the tag should wrap its content.
-     *
-     * (Not recommended)
-     *
-     * @default false
-     */
-    wrap?: boolean;
-};
-/**
- * A non-interactive visual indicators to draw attention or categorization of a component.
- *
- * @example
- *     import { Tag } from '@bspk/ui/Tag';
- *
- *     export function Example() {
- *         return (
- *             <Tag variant="flat" color="primary">
- *                 Example Tag
- *             </Tag>
- *         );
- *     }
- *
- * @name Tag
- */
-declare function Tag<As extends ElementType = 'span'>({ children, as, color, size, variant, wrap, ...props }: ElementProps<TagProps<As>, As>): import("react/jsx-runtime").JSX.Element;
-declare namespace Tag {
-    var bspkName: string;
-}
-export { Tag };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Tag.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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)}`);;
-/**
- * A non-interactive visual indicators to draw attention or categorization of a component.
- *
- * @example
- *     import { Tag } from '@bspk/ui/Tag';
- *
- *     export function Example() {
- *         return (
- *             <Tag variant="flat" color="primary">
- *                 Example Tag
- *             </Tag>
- *         );
- *     }
- *
- * @name Tag
- */
-function Tag({ children, as, color = 'white', size = 'small', variant = 'flat', wrap, ...props }) {
-    const As = as || 'span';
-    return (_jsxs(As, { ...props, "data-bspk": "tag", "data-color": color, "data-size": size, "data-variant": variant, "data-wrap": wrap || undefined, children: [children, variant === 'corner-wrap' && _jsx("div", { "data-triangle": true })] }));
-}
-Tag.bspkName = 'Tag';
-export { Tag };
-//# sourceMappingURL=Tag.js.map

package/dist/Tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AAoDpB;;;;;;;;;;;;;;;GAeG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,GAAG,KAAK,EACqB;IAC7B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,MAAC,EAAE,OACK,KAAK,eACC,KAAK,gBACH,KAAK,eACN,IAAI,kBACD,OAAO,eACV,IAAI,IAAI,SAAS,aAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAClD,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/TextField.d.ts

@@ -1,35 +0,0 @@
-import { FormFieldProps } from './FormField';
-import { TextInputProps } from './TextInput';
-import { InvalidPropsLibrary } from '.';
-export type TextFieldProps = InvalidPropsLibrary & Pick<TextInputProps, 'autoComplete' | 'disabled' | 'inputRef' | 'leading' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'trailing' | 'type' | 'value'> & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
- *
- * This component takes properties from the FormField and TextInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextField } from '@bspk/ui/TextField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <TextField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextField
- */
-declare function TextField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextField {
-    var bspkName: string;
-}
-export { TextField };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/TextField.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from './FormField';
-import { TextInput } from './TextInput';
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
- *
- * This component takes properties from the FormField and TextInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextField } from '@bspk/ui/TextField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <TextField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextField
- */
-function TextField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "text-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, required: required })) }));
-}
-TextField.bspkName = 'TextField';
-export { TextField };
-//# sourceMappingURL=TextField.js.map

package/dist/TextField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAuBxD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACA;IACb,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAErG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,SAAS,OAAK,UAAU,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACtG,GACO,CACf,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}