@bspk/ui 1.0.0

package/Switch.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * 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 or SwitchGroup component.
+ *
+ * @element
+ *
+ * @name Switch
+ */
+function Switch(props) {
+    const { 
+    //
+    checked = false, disabled, ...otherProps } = props;
+    return (jsxs("span", { css: style, "data-switch": true, 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';
+const style = css `
+    --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;
+    position: relative;
+    box-sizing: border-box;
+    margin: 2px;
+
+    input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+    }
+
+    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;
+
+    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;
+    }
+
+    &:has(input[type='checkbox']:checked) {
+        --track-bg: var(--foreground-brand-primary);
+
+        span {
+            left: calc(var(--track-width) - var(--toggle-width) - 2px);
+        }
+    }
+
+    &:has(input[type='checkbox']:disabled) {
+        input[type='checkbox'] {
+            pointer-events: none;
+        }
+        --track-bg: var(--interactions-disabled-opacity);
+        --toggle-bg: var(--foreground-neutral-disabled-on-surface);
+
+        &:has(input[type='checkbox']:checked) span {
+            --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
+        }
+    }
+`;
+
+export { Switch, style };
+//# sourceMappingURL=Switch.js.map

package/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["src/Switch.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAqBA;;;;;;;;AAQG;AACH,SAAS,MAAM,CAAC,KAAkB,EAAA;IAC9B,MAAM;;IAEF,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,KAAK,kCACZC,GACQ,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACC,eAAA,EAAA,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,EAAA,CACjB,EACFA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,CAAoB,CACjB,EAAA,CAAA,EACT;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAIpB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/SwitchGroup.d.ts

@@ -0,0 +1,35 @@
+import { ToggleOptionProps } from './ToggleOption';
+import { ToggleControlProps, ElementProps, CommonProps } from './';
+export type SwitchGroupOption = Pick<ToggleControlProps<HTMLInputElement>, 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
+    /**
+     * The function to call when the switches are changed.
+     *
+     * @required
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * The options for the switches.
+     *
+     * @type SwitchGroupOption[]
+     * @required
+     */
+    options: SwitchGroupOption[];
+    /**
+     * The values of the switches in the on state.
+     *
+     * @type string[]
+     */
+    values?: SwitchGroupProps['options'][number]['value'][];
+};
+/**
+ * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name SwitchGroup
+ */
+declare function SwitchGroup({ onChange, options, name, values, ...props }: ElementProps<SwitchGroupProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace SwitchGroup {
+    var bspkName: string;
+}
+export { SwitchGroup };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/SwitchGroup.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Switch } from './Switch.js';
+import { ToggleOption } from './ToggleOption.js';
+
+/**
+ * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name SwitchGroup
+ */
+function SwitchGroup({ onChange, options = [], name, values = [], ...props }) {
+    return (jsx("div", { ...props, "data-control-group": true, "data-switch-group": true, role: "group", children: options.map(({ label, description, value }) => (jsx(ToggleOption, { description: description, label: label, children: jsx(Switch, { "aria-label": label, checked: values.includes(value), name: name, onChange: (checked) => {
+                    onChange(checked ? [...values, value] : values.filter((v) => v !== value));
+                }, value: value }) }, value))) }));
+}
+SwitchGroup.bspkName = 'SwitchGroup';
+
+export { SwitchGroup };
+//# sourceMappingURL=SwitchGroup.js.map

package/SwitchGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchGroup.js","sources":["src/SwitchGroup.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AA8BA;;;;AAIG;AACH,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,KAAK,EAAyC,EAAA;IAC/G,QACIA,GAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAuC,oBAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,IAAI,EAAC,OAAO,EAC5D,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MACvCA,GAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,EAC5D,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACS,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,KAAI;AAClB,oBAAA,QAAQ,CAAC,OAAO,GAAG,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;AAC/E,iBAAC,EACD,KAAK,EAAE,KAAK,EACd,CAAA,EAAA,EATuC,KAAK,CAUnC,CAClB,CAAC,EACA,CAAA,EACR;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa;;;;"}

package/SwitchOption.d.ts

@@ -0,0 +1,14 @@
+import { SwitchProps } from './Switch';
+import { ToggleOptionProps } from './ToggleOption';
+export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label' | 'size'>;
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name SwitchOption
+ */
+declare function SwitchOption({ label, description, size, ...checkboxProps }: SwitchOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace SwitchOption {
+    var bspkName: string;
+}
+export { SwitchOption };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/SwitchOption.js

@@ -0,0 +1,16 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Switch } from './Switch.js';
+import { ToggleOption } from './ToggleOption.js';
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name SwitchOption
+ */
+function SwitchOption({ label, description, size, ...checkboxProps }) {
+    return (jsx(ToggleOption, { "data-checkbox-field": true, description: description, label: label, size: size, children: jsx(Switch, { ...checkboxProps, "aria-label": label }) }));
+}
+SwitchOption.bspkName = 'SwitchOption';
+
+export { SwitchOption };
+//# sourceMappingURL=SwitchOption.js.map

package/SwitchOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchOption.js","sources":["src/SwitchOption.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAMA;;;;AAIG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,aAAa,EAAqB,EAAA;IACnF,QACIA,GAAC,CAAA,YAAY,EAAqB,EAAA,qBAAA,EAAA,IAAA,EAAA,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAChF,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAA,GAAK,aAAa,EAAA,YAAA,EAAc,KAAK,EAAA,CAAI,EACrC,CAAA,EACjB;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc;;;;"}

package/TabGroup.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { ElementProps } from './';
+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. If not provided, the label will be used as the value. */
+    value?: string;
+    /** The icon to display on the left side of the tab. */
+    icon?: ReactNode;
+    /** The icon to display on the left side of the tab when the tab is active. */
+    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.
+     *
+     * @type TabGroupOption[]
+     * @required
+     */
+    options: TabGroupOption[];
+    /** The id of the selected tab. */
+    value?: TabGroupOption['value'];
+    /**
+     * The function to call when the tab is clicked.
+     *
+     * @required
+     */
+    onChange: (tabId: TabGroupOption['value']) => void;
+    /**
+     * The size of the tabs.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * 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.
+ *
+ * @name TabGroup
+ */
+declare function TabGroup({ onChange: onTabChange, value, size, options, width, showTrail, ...containerProps }: ElementProps<TabGroupProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace TabGroup {
+    var bspkName: string;
+}
+export { TabGroup };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/TabGroup.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { Badge } from './Badge.js';
+import { useNavOptions } from './hooks/useNavOptions.js';
+
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @name TabGroup
+ */
+function TabGroup({ 
+//
+onChange: onTabChange, value, size = 'medium', options, width = 'hug', showTrail = false, ...containerProps }) {
+    const items = useNavOptions(options);
+    return (jsx("div", { ...containerProps, css: style, "data-hide-trail": (width === 'hug' && !showTrail) || undefined, "data-size": size, "data-tab-group": true, "data-width": width, children: items.map((item) => {
+            const isActive = item.value === value;
+            return (jsx("button", { "data-active": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onTabChange(item.value), children: jsxs("span", { children: [(isActive && item.iconActive) || item.icon, item.label, item.badge && jsx(Badge, { count: item.badge, size: "x-small" })] }) }, item.value));
+        }) }));
+}
+TabGroup.bspkName = 'TabGroup';
+const style = css `
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    --btn-flex-grow: 0;
+    border-bottom: 1px solid var(--stroke-neutral-low);
+    width: 100%;
+
+    &[data-width='fill'] {
+        align-items: stretch;
+        width: 100%;
+        --btn-flex-grow: 1;
+    }
+
+    --font: var(--labels-base);
+    --height: var(--spacing-sizing-10);
+
+    &[data-size='small'] {
+        --font: var(--labels-small);
+        --height: var(--spacing-sizing-08);
+    }
+
+    &[data-size='large'] {
+        --font: var(--labels-large);
+        --height: var(--spacing-sizing-12);
+    }
+
+    button {
+        border: 0;
+        cursor: pointer;
+        color: var(--foreground-neutral-on-surface-variant-02);
+        background: none;
+        flex-grow: var(--btn-flex-grow);
+        font: var(--font);
+
+        &:hover {
+            background: var(--interactions-neutral-hover-opacity);
+        }
+
+        &:active {
+            background: var(--interactions-neutral-press-opacity);
+        }
+
+        &:disabled {
+            pointer-events: none;
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        &:focus-visible {
+            outline: solid 2px var(--stroke-neutral-focus);
+        }
+
+        span {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin: 0 var(--spacing-sizing-04);
+            height: var(--height);
+            justify-content: center;
+            position: relative;
+            gap: var(--spacing-sizing-02);
+
+            svg {
+                width: var(--spacing-sizing-05);
+            }
+        }
+
+        &[data-active] {
+            color: var(--foreground-brand-primary);
+            span {
+                &:after {
+                    content: '';
+                    display: block;
+                    width: 100%;
+                    height: 2px;
+                    background-color: var(--stroke-brand-primary);
+                    bottom: -1px;
+                    position: absolute;
+                    border-top-right-radius: 2px;
+                    border-top-left-radius: 2px;
+                }
+
+                svg {
+                    color: var(--surface-brand-primary);
+                }
+            }
+        }
+    }
+
+    &[data-hide-trail] {
+        border-bottom: none;
+        button {
+            border-bottom: 1px solid var(--stroke-neutral-low);
+        }
+    }
+`;
+
+export { TabGroup, style };
+//# sourceMappingURL=TabGroup.js.map

package/TabGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabGroup.js","sources":["src/TabGroup.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAqEA;;;;AAIG;AACH,SAAS,QAAQ,CAAC;AACd;AACA,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACgB,EAAA;AACjC,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AAErC,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAA,GACQ,cAAc,EAClB,GAAG,EAAE,KAAK,EAAA,iBAAA,EACO,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,KAAK,SAAS,EAAA,WAAA,EAClD,IAAI,EAAA,gBAAA,EAAA,IAAA,EAAA,YAAA,EAEH,KAAK,EAAA,QAAA,EAEhB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AAChB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;AAEtC,YAAA,QACIA,GAAA,CAAA,QAAA,EAAA,EAAA,aAAA,EACiB,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEpC,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,QAAA,EAEtCC,IACK,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,EAC1C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAID,GAAA,CAAC,KAAK,EAAC,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,SAAS,EAAA,CAAG,CACvD,EAAA,CAAA,EAAA,EAPF,IAAI,CAAC,KAAK,CAQV,EACX;SACL,CAAC,EACA,CAAA,EACR;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAIxB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/Table.d.ts

@@ -0,0 +1,45 @@
+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("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Table {
+    var bspkName: string;
+}
+export { Table };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Table.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name Table
+ */
+function Table({ rows, columns, ...props }) {
+    return (jsxs("div", { ...props, css: style, "data-table": true, 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';
+const style = css `
+    width: 100%;
+    border-collapse: separate;
+    text-align: left;
+    border-spacing: 2rem 0.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-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);
+        p {
+            margin: 0;
+            padding: 0;
+            font: var(--body-small);
+        }
+    }
+
+    [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-head='first'] {
+            border-top-left-radius: var(--radius-medium);
+        }
+
+        &[data-head='last'] {
+            border-top-right-radius: var(--radius-medium);
+        }
+    }
+`;
+
+export { Table, style };
+//# sourceMappingURL=Table.js.map

package/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["src/Table.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAuCA;;;;AAIG;AACH,SAAS,KAAK,CAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAsC,EAAA;IAC9F,QACIA,iBACQ,KAAK,EACT,GAAG,EAAE,KAAK,EAEV,YAAA,EAAA,IAAA,EAAA,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,mBAAmB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAA,UAAA,EAAa,CAAC,CAAC,KAAK,IAAI,KAAK,CAAA,CAAA,CAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACtF,SAAA,EAAA,QAAA,EAAA,CAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,MAC5BC,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EACe,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,EAGhG,QAAA,EAAA,MAAM,CAAC,KAAK,IAFR,MAAM,CAAC,GAAa,CAGvB,CACT,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,KAAI;gBAC1B,MAAM,OAAO,GAAG,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC;AACtD,gBAAA,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACtBA,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EAAgB,MAAM,CAAC,GAAG,EAAiB,eAAA,EAAA,OAAO,EAC7C,QAAA,EAAA,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,EADqC,EAAA,KAAK,GAAI,MAAM,CAAC,GAAc,CAEjF,CACT,CAAC,CAAC;aACN,CAAC,CACA,EAAA,CAAA,EACR;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAIlB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/Tag.d.ts

@@ -0,0 +1,56 @@
+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.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The size of the tag.
+     *
+     * @default small
+     */
+    size?: 'small' | 'x-small';
+    /**
+     * The color of the tag.
+     *
+     * @default white
+     */
+    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.
+ *
+ * @name Tag
+ */
+declare function Tag<As extends ElementType = 'span'>({ children, as, color, size, variant, wrap, ...props }: ElementProps<TagProps<As>, As>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Tag {
+    var bspkName: string;
+}
+export { Tag };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Tag.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { COLOR_VARIABLES } from './utils/colorVariants.js';
+
+/**
+ * A non-interactive visual indicators to draw attention or categorization of a component.
+ *
+ * @name Tag
+ */
+function Tag({ children, as, color = 'white', size = 'small', variant = 'flat', wrap, ...props }) {
+    const As = as || 'span';
+    return (jsxs(As, { ...props, css: style, "data-color": color, "data-size": size, "data-tag": true, "data-variant": variant, "data-wrap": wrap || undefined, children: [children, variant === 'corner-wrap' && jsx("div", { "data-triangle": true })] }));
+}
+Tag.bspkName = 'Tag';
+const style = css `
+    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);
+    text-decoration: none;
+    font: unset;
+    text-decoration: unset;
+    white-space: nowrap;
+
+    &[data-wrap] {
+        height: auto;
+    }
+
+    &[data-variant='pill'] {
+        border-radius: var(--radius-circular);
+    }
+
+    &[data-variant='corner-wrap'] {
+        border-bottom-right-radius: 0;
+    }
+
+    ${Object.entries(COLOR_VARIABLES).map(([variant, { foreground, surface }]) => css `
+            &[data-color='${variant}'] {
+                --foreground: var(${foreground});
+                --background: var(${surface});
+            }
+        `)}
+
+    &[data-size='small'] {
+        font: var(--labels-small);
+        height: var(--spacing-sizing-08);
+    }
+
+    &[data-size='x-small'] {
+        font: var(--labels-x-small);
+        height: var(--spacing-sizing-06);
+    }
+
+    &[data-color='white'] {
+        box-shadow: var(--drop-shadow-south);
+    }
+
+    [data-triangle] {
+        position: absolute;
+        bottom: -12px;
+        right: 0;
+        width: 0px;
+        height: 0px;
+        border-style: solid;
+        border-width: 12px 12px 0 0;
+        border-color: var(--foreground) transparent transparent transparent;
+        transform: rotate(0deg);
+    }
+`;
+
+export { Tag, style };
+//# sourceMappingURL=Tag.js.map

package/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAiDA;;;;AAIG;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,EAAA;AAC7B,IAAA,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;AAErC,IAAA,QACIA,IAAA,CAAC,EAAE,EAAA,EAAA,GACK,KAAK,EACT,GAAG,EAAE,KAAK,EAAA,YAAA,EACE,KAAK,EAAA,WAAA,EACN,IAAI,EAAA,UAAA,EAAA,IAAA,EAAA,cAAA,EAED,OAAO,EAAA,WAAA,EACV,IAAI,IAAI,SAAS,EAAA,QAAA,EAAA,CAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAIC,GAAqB,CAAA,KAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CAClD,EACP;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAId,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BlB,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,GAAG,CACjC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,GAAG,CAAA,CAAA;4BACvB,OAAO,CAAA;oCACC,UAAU,CAAA;oCACV,OAAO,CAAA;;SAElC,CACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/TextField.d.ts

@@ -0,0 +1,16 @@
+import { FormFieldProps } from './FormField';
+import { TextInputProps } from './TextInput';
+export type TextFieldProps = Pick<TextInputProps, 'autoComplete' | 'disabled' | 'inputRef' | 'invalid' | '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.
+ *
+ * @name TextField
+ */
+declare function TextField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace TextField {
+    var bspkName: string;
+}
+export { TextField };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */