@bspk/ui 1.1.32 → 1.1.34

package/dist/components/TabGroup/TabGroupExample.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgCircle } from '@bspk/icons/Circle';
+import { SvgDiamond } from '@bspk/icons/Diamond';
+import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
+import { SvgSquare } from '@bspk/icons/Square';
+import { SvgSquareFill } from '@bspk/icons/SquareFill';
+export const TabGroupExample = {
+    containerStyle: { width: '100%' },
+    presets: [
+        {
+            label: 'With icons',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: _jsx(SvgDiamond, {}),
+                        iconActive: _jsx(SvgDiamondFill, {}),
+                        badge: undefined,
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: _jsx(SvgCircle, {}),
+                        badge: undefined,
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: _jsx(SvgSquare, {}),
+                        iconActive: _jsx(SvgSquareFill, {}),
+                        badge: undefined,
+                    },
+                ],
+            },
+        },
+        {
+            label: 'With badges',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: undefined,
+                        iconActive: undefined,
+                        badge: 1,
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: undefined,
+                        iconActive: undefined,
+                        badge: 2,
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: undefined,
+                        iconActive: undefined,
+                        badge: 3,
+                    },
+                ],
+            },
+        },
+        {
+            label: 'With icons & badges',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: _jsx(SvgDiamond, {}),
+                        iconActive: _jsx(SvgDiamondFill, {}),
+                        badge: 1,
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: _jsx(SvgCircle, {}),
+                        badge: 2,
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: _jsx(SvgSquare, {}),
+                        iconActive: _jsx(SvgSquareFill, {}),
+                        badge: 3,
+                    },
+                ],
+            },
+        },
+    ],
+};
+//# sourceMappingURL=TabGroupExample.js.map

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

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

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

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

package/dist/components/TabGroup/index.js

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

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

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

package/dist/components/TabGroup/tab-group.css

@@ -0,0 +1,82 @@
+[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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabGroup/tab-group.css.js

@@ -0,0 +1,88 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ElementProps } from '../../index.js';
+import './table.scss';
+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
+ * @phase Backlog
+ */
+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/components/Table/Table.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './table.css.js';
+/**
+ * Component description coming soon.
+ *
+ * @name Table
+ * @phase Backlog
+ */
+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/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAoCtB;;;;;GAKG;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/components/Table/index.d.ts

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

package/dist/components/Table/index.js

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

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

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

package/dist/components/Table/table.css

@@ -0,0 +1,43 @@
+[data-bspk=table] {
+  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-md);
+  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-md);
+}
+[data-bspk=table] [data-head][data-head=last] {
+  border-top-right-radius: var(--radius-md);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Table/table.css.js

@@ -0,0 +1,49 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=table] {
+  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-md);
+  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-md);
+}
+[data-bspk=table] [data-head][data-head=last] {
+  border-top-right-radius: var(--radius-md);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,71 @@
+import { ElementType, ReactNode } from 'react';
+import { ElementProps } from '../../index.js';
+import { ColorVariant } from '../../utils/colorVariants';
+import './tag.scss';
+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
+ * @phase AccessibilityReview
+ */
+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/components/Tag/Tag.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './tag.css.js';
+/**
+ * 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
+ * @phase AccessibilityReview
+ */
+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/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AA+CpB;;;;;;;;;;;;;;;;GAgBG;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/components/Tag/index.d.ts

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

package/dist/components/Tag/index.js

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

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

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

package/dist/components/Tag/tag.css

@@ -0,0 +1,48 @@
+[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-sm);
+  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) transparent transparent transparent;
+  transform: rotate(0deg);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Tag/tag.css.js

@@ -0,0 +1,54 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=tag] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: fit-content;
+  position: relative;
+  padding: 0 var(--spacing-sizing-03);
+  border-radius: var(--radius-sm);
+  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) transparent transparent transparent;
+  transform: rotate(0deg);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+