@bspk/ui 1.1.32 → 1.1.34

package/dist/components/Chip/Chip.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './chip.css.js';
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @example
+ *     import { Chip } from '@bspk/ui/Chip';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip variant="filter" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
+ * @name Chip
+ * @phase DesignReview
+ */
+function Chip({ children = '', wrap = false, variant = 'filter', flat = false, disabled = false, selected = false, onClick, style: styleProp, }) {
+    let additionalProps = {};
+    if (variant === 'filter') {
+        additionalProps = {
+            onClick,
+            role: 'button',
+            tabIndex: 0,
+        };
+    }
+    return (_jsx("span", { "data-bspk": "chip", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-variant": variant, "data-wrap": wrap || undefined, style: styleProp, ...additionalProps, children: children }));
+}
+Chip.bspkName = 'Chip';
+export { Chip };
+//# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";AAIA,OAAO,aAAa,CAAC;AA0CrB;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,IAAI,CAAC,EACV,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EAAE,SAAS,GACR;IACR,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,eAAe,GAAG;YACd,OAAO;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED,OAAO,CACH,4BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,kBACtB,OAAO,eACV,IAAI,IAAI,SAAS,EAC5B,KAAK,EAAE,SAAS,KACZ,eAAe,YAElB,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Chip/chip.css

@@ -0,0 +1,44 @@
+[data-bspk=chip] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: fit-content;
+  height: var(--spacing-sizing-06);
+  padding: 0 var(--spacing-sizing-02);
+  font: var(--labels-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+  background-color: var(--surface-neutral-t1-base);
+  border: 1px solid var(--stroke-neutral-low);
+  border-radius: var(--radius-sm);
+}
+[data-bspk=chip]:not([data-flat]) {
+  box-shadow: var(--drop-shadow-raise);
+}
+[data-bspk=chip][data-variant=filter] {
+  cursor: pointer;
+}
+[data-bspk=chip][data-wrap] {
+  height: auto;
+}
+[data-bspk=chip][data-disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  cursor: not-allowed;
+  border-color: var(--stroke-neutral-disabled-light);
+  background-image: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=chip]:not([data-disabled]):hover {
+  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=chip]:not([data-disabled]):active {
+  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=chip]:not([data-disabled]):focus {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+}
+[data-bspk=chip][data-selected] {
+  background-color: var(--surface-brand-primary-highlight);
+  border-color: var(--stroke-brand-primary);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Chip/chip.css.js

@@ -0,0 +1,50 @@
+/** * 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=chip] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: fit-content;
+  height: var(--spacing-sizing-06);
+  padding: 0 var(--spacing-sizing-02);
+  font: var(--labels-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+  background-color: var(--surface-neutral-t1-base);
+  border: 1px solid var(--stroke-neutral-low);
+  border-radius: var(--radius-sm);
+}
+[data-bspk=chip]:not([data-flat]) {
+  box-shadow: var(--drop-shadow-raise);
+}
+[data-bspk=chip][data-variant=filter] {
+  cursor: pointer;
+}
+[data-bspk=chip][data-wrap] {
+  height: auto;
+}
+[data-bspk=chip][data-disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  cursor: not-allowed;
+  border-color: var(--stroke-neutral-disabled-light);
+  background-image: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=chip]:not([data-disabled]):hover {
+  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=chip]:not([data-disabled]):active {
+  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=chip]:not([data-disabled]):focus {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+}
+[data-bspk=chip][data-selected] {
+  background-color: var(--surface-brand-primary-highlight);
+  border-color: var(--stroke-brand-primary);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

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

package/dist/components/Chip/index.js

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

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

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

package/dist/components/ChipAssist/ChipAssist.d.ts

@@ -0,0 +1,28 @@
+import { ChipUtilityProps } from '../ChipUtility';
+export type ChipAssistProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'>;
+/**
+ * A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons.
+ *
+ * @example
+ *     import { ChipAssist } from '@bspk/ui/ChipAssist';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipAssist
+ *                 label="Assist Chip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Assist Chip clicked')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipAssist
+ * @phase DesignReview
+ */
+declare function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChipAssist {
+    var bspkName: string;
+}
+export { ChipAssist };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipAssist/ChipAssist.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChipUtility } from '../ChipUtility';
+/**
+ * A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons.
+ *
+ * @example
+ *     import { ChipAssist } from '@bspk/ui/ChipAssist';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipAssist
+ *                 label="Assist Chip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Assist Chip clicked')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipAssist
+ * @phase DesignReview
+ */
+function ChipAssist({ disabled, label, leadingIcon, onClick }) {
+    return _jsx(ChipUtility, { disabled: disabled, label: label, leadingIcon: leadingIcon, onClick: onClick });
+}
+ChipAssist.bspkName = 'ChipAssist';
+export { ChipAssist };
+//# sourceMappingURL=ChipAssist.js.map

package/dist/components/ChipAssist/ChipAssist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipAssist.js","sourceRoot":"","sources":["../../../src/components/ChipAssist/ChipAssist.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAmB;IAC1E,OAAO,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACzG,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/ChipAssist/ChipAssistExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExampleFn } from '../../utils/demo';
+import { ChipAssistProps } from '.';
+export declare const ChipAssistExample: ComponentExampleFn<ChipAssistProps>;

package/dist/components/ChipAssist/ChipAssistExample.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChipAssistExample = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props, onClick: () => action('ChipAssist clicked!') });
+    },
+    presets: [
+        {
+            label: 'Basic ChipAssist',
+            propState: {
+                label: 'chip option',
+            },
+        },
+        {
+            label: 'with leadingIcon',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+            },
+        },
+        {
+            label: 'disabled',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+                disabled: true,
+            },
+        },
+    ],
+});
+//# sourceMappingURL=ChipAssistExample.js.map

package/dist/components/ChipAssist/ChipAssistExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipAssistExample.js","sourceRoot":"","sources":["../../../src/components/ChipAssist/ChipAssistExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAI,CAAC;IAClF,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;aACvB;SACJ;QACD;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;aAC9B;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;gBAC3B,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC"}

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

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

package/dist/components/ChipAssist/index.js

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

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

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

package/dist/components/ChipFilter/ChipFilter.d.ts

@@ -0,0 +1,44 @@
+import { ChipUtilityProps } from '../ChipUtility';
+export type chipTrailingIcon = 'SvgChevronRight' | 'SvgClose' | 'SvgKeyboardArrowDown';
+export type ChipFilterProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'> & {
+    /**
+     * The trailing icon of the filter chip.
+     *
+     * You can only have one of the trailing options, a trailing icon **or** a trailing badge. If both are present the
+     * trailingIcon will be visible.
+     */
+    trailingIcon?: chipTrailingIcon;
+    /**
+     * The trailing Badge count.
+     *
+     * If a trailingIcon is provided the Badge will **not** be visible.
+     */
+    trailingBadgeCount?: number;
+};
+/**
+ * Short form descriptive words that filter out content or represent active filter setting.
+ *
+ * @example
+ *     import { ChipFilter } from '@bspk/ui/ChipFilter';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipFilter
+ *                 label="FilterChip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Filter Chip clicked')}
+ *                 trailingIcon="SvgChevronRight"
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipFilter
+ * @phase DesignReview
+ */
+declare function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trailingBadgeCount }: ChipFilterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChipFilter {
+    var bspkName: string;
+}
+export { ChipFilter };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipFilter/ChipFilter.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgClose } from '@bspk/icons/Close';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { ChipUtility } from '../ChipUtility';
+/**
+ * Short form descriptive words that filter out content or represent active filter setting.
+ *
+ * @example
+ *     import { ChipFilter } from '@bspk/ui/ChipFilter';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipFilter
+ *                 label="FilterChip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Filter Chip clicked')}
+ *                 trailingIcon="SvgChevronRight"
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipFilter
+ * @phase DesignReview
+ */
+function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trailingBadgeCount }) {
+    const trailingIconComponent = trailingIcon === 'SvgChevronRight' ? (_jsx(SvgChevronRight, {})) : trailingIcon === 'SvgKeyboardArrowDown' ? (_jsx(SvgKeyboardArrowDown, {})) : trailingIcon === 'SvgClose' ? (_jsx(SvgClose, {})) : undefined;
+    return (_jsx(ChipUtility, { disabled: disabled, label: label, leadingIcon: leadingIcon, onClick: onClick, trailingBadge: trailingBadgeCount ? { count: trailingBadgeCount } : undefined, trailingIcon: trailingIconComponent }));
+}
+ChipFilter.bspkName = 'ChipFilter';
+export { ChipFilter };
+//# sourceMappingURL=ChipFilter.js.map

package/dist/components/ChipFilter/ChipFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipFilter.js","sourceRoot":"","sources":["../../../src/components/ChipFilter/ChipFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAoBzE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAmB;IAC5G,MAAM,qBAAqB,GACvB,YAAY,KAAK,iBAAiB,CAAC,CAAC,CAAC,CACjC,KAAC,eAAe,KAAG,CACtB,CAAC,CAAC,CAAC,YAAY,KAAK,sBAAsB,CAAC,CAAC,CAAC,CAC1C,KAAC,oBAAoB,KAAG,CAC3B,CAAC,CAAC,CAAC,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,CAC9B,KAAC,QAAQ,KAAG,CACf,CAAC,CAAC,CAAC,SAAS,CAAC;IAClB,OAAO,CACH,KAAC,WAAW,IACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7E,YAAY,EAAE,qBAAqB,GACrC,CACL,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/ChipFilter/ChipFilterExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExampleFn } from '../../utils/demo';
+import { ChipFilterProps } from './ChipFilter';
+export declare const ChipFilterExample: ComponentExampleFn<ChipFilterProps>;

package/dist/components/ChipFilter/ChipFilterExample.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChipFilterExample = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props, onClick: () => action('ChipFilter clicked!') });
+    },
+    presets: [
+        {
+            label: 'basic ChipFilter',
+            propState: {
+                label: 'chip option',
+            },
+        },
+        {
+            label: 'with leading icon',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+            },
+        },
+        {
+            label: 'with close icon',
+            propState: {
+                label: 'chip option',
+                trailingIcon: 'SvgClose',
+            },
+        },
+        {
+            label: 'with chevron right icon',
+            propState: {
+                label: 'chip option',
+                trailingIcon: 'SvgChevronRight',
+            },
+        },
+        {
+            label: 'with keyboard arrow down icon',
+            propState: {
+                label: 'chip option',
+                trailingIcon: 'SvgKeyboardArrowDown',
+            },
+        },
+        {
+            label: 'with Badge',
+            propState: {
+                label: 'chip option',
+                trailingBadgeCount: 3,
+            },
+        },
+        {
+            label: 'disabled',
+            propState: {
+                label: 'chip option',
+                trailingBadgeCount: 3,
+                disabled: true,
+            },
+        },
+    ],
+});
+//# sourceMappingURL=ChipFilterExample.js.map

package/dist/components/ChipFilter/ChipFilterExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipFilterExample.js","sourceRoot":"","sources":["../../../src/components/ChipFilter/ChipFilterExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAI,CAAC;IAClF,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;aACvB;SACJ;QACD;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;aAC9B;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,YAAY,EAAE,UAAU;aAC3B;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,YAAY,EAAE,iBAAiB;aAClC;SACJ;QACD;YACI,KAAK,EAAE,+BAA+B;YACtC,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,YAAY,EAAE,sBAAsB;aACvC;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,kBAAkB,EAAE,CAAC;aACxB;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,kBAAkB,EAAE,CAAC;gBACrB,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC"}

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

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

package/dist/components/ChipFilter/index.js

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

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

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

package/dist/components/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,39 @@
+import './chip-group.scss';
+import { ReactNode } from 'react';
+import { ChipUtilityProps } from '../ChipUtility';
+export type ChipGroupItem = Pick<ChipUtilityProps, 'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'>;
+export type ChipGroupProps = {
+    /**
+     * To allow chips to wrap. If set to false chips will scroll.
+     *
+     * @default true
+     */
+    wrap?: boolean;
+    /** Only ChipUtility, ChipInput, ChipFilter, ChipSuggestion, or ChipAssist components should be used as children. */
+    children?: ReactNode;
+};
+/**
+ * Component description.
+ *
+ * @example
+ *     import { ChipGroup } from '@bspk/ui/ChipGroup';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipGroup wrap={false}>
+ *                 <ChipSuggestion label="suggestion 1" onClick={() => console.log('Suggestion 1')} />
+ *                 <ChipSuggestion label="suggestion 2" onClick={() => console.log('Suggestion 2')} />
+ *                 <ChipSuggestion label="suggestion 3" onClick={() => console.log('Suggestion 3')} />
+ *             </ChipGroup>
+ *         );
+ *     }
+ *
+ * @name ChipGroup
+ * @phase WorkInProgress
+ */
+declare function ChipGroup({ children, wrap }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChipGroup {
+    var bspkName: string;
+}
+export { ChipGroup };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipGroup/ChipGroup.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './chip-group.css.js';
+/**
+ * Component description.
+ *
+ * @example
+ *     import { ChipGroup } from '@bspk/ui/ChipGroup';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipGroup wrap={false}>
+ *                 <ChipSuggestion label="suggestion 1" onClick={() => console.log('Suggestion 1')} />
+ *                 <ChipSuggestion label="suggestion 2" onClick={() => console.log('Suggestion 2')} />
+ *                 <ChipSuggestion label="suggestion 3" onClick={() => console.log('Suggestion 3')} />
+ *             </ChipGroup>
+ *         );
+ *     }
+ *
+ * @name ChipGroup
+ * @phase WorkInProgress
+ */
+function ChipGroup({ children, wrap = true }) {
+    return (_jsx("div", { "data-bspk": "chip-group", "data-wrap": wrap || undefined, children: children }));
+}
+ChipGroup.bspkName = 'ChipGroup';
+export { ChipGroup };
+//# sourceMappingURL=ChipGroup.js.map

package/dist/components/ChipGroup/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IACxD,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ChipGroup/ChipGroupExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExampleFn } from '../../utils/demo';
+import { ChipGroupProps } from '../ChipGroup';
+export declare const ChipGroupExample: ComponentExampleFn<ChipGroupProps>;

package/dist/components/ChipGroup/ChipGroupExample.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgClose } from '@bspk/icons/Close';
+import { SvgCloud } from '@bspk/icons/Cloud';
+import { SvgIcecream } from '@bspk/icons/Icecream';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgLightbulb } from '@bspk/icons/Lightbulb';
+import { SvgOpportunities } from '@bspk/icons/Opportunities';
+import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
+import { ChipAssist } from '../ChipAssist';
+import { ChipFilter } from '../ChipFilter';
+import { ChipGroup } from '../ChipGroup';
+import { ChipInput } from '../ChipInput';
+import { ChipSuggestion } from '../ChipSuggestion';
+import { ChipUtility } from '../ChipUtility';
+export const ChipGroupExample = ({ action }) => ({
+    presets: [
+        { label: 'wrap', propState: { wrap: true } },
+        { label: 'scroll', propState: { wrap: false } },
+        { label: 'suggestion', propState: { wrap: true } },
+        { label: 'assist', propState: { wrap: true } },
+        { label: 'input', propState: { wrap: true } },
+        { label: 'filter', propState: { wrap: true } },
+    ],
+    // containerStyle: { width: '100%' },
+    render: ({ props, preset }) => {
+        if (!preset)
+            return null;
+        const handleChipInputClick = () => action('Chip clicked!');
+        switch (preset.label) {
+            case 'wrap':
+                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipUtility, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
+            case 'scroll':
+                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipUtility, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
+            case 'suggestion':
+                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipSuggestion, { label: "suggestion 1", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 2", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 3", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 4", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 5", onClick: handleChipInputClick })] }));
+            case 'assist':
+                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipAssist, { label: "assist 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 2", onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 4", onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick })] }));
+            case 'input':
+                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipInput, { label: "input 1", onClick: handleChipInputClick, removable: false }), _jsx(ChipInput, { label: "input 2", onClick: handleChipInputClick }), _jsx(ChipInput, { label: "input 3", onClick: handleChipInputClick }), _jsx(ChipInput, { label: "input 4", onClick: handleChipInputClick }), _jsx(ChipInput, { label: "input 5", onClick: handleChipInputClick })] }));
+            case 'filter':
+                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipFilter, { label: "filter 1", onClick: handleChipInputClick, trailingIcon: "SvgClose" }), _jsx(ChipFilter, { label: "filter 2", onClick: handleChipInputClick, trailingIcon: "SvgChevronRight" }), _jsx(ChipFilter, { label: "filter 3", onClick: handleChipInputClick, trailingIcon: "SvgKeyboardArrowDown" }), _jsx(ChipFilter, { label: "filter 1", onClick: handleChipInputClick, trailingBadgeCount: 5 }), _jsx(ChipFilter, { label: "filter 1", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingBadgeCount: 7 })] }));
+            default:
+                return null;
+        }
+    },
+});
+//# sourceMappingURL=ChipGroupExample.js.map

package/dist/components/ChipGroup/ChipGroupExample.js.map

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

package/dist/components/ChipGroup/chip-group.css

@@ -0,0 +1,11 @@
+[data-bspk=chip-group] {
+  display: flex;
+  gap: var(--spacing-sizing-02);
+  width: 100%;
+  overflow: auto;
+}
+[data-bspk=chip-group][data-wrap] {
+  flex-flow: row wrap;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipGroup/chip-group.css.js

@@ -0,0 +1,17 @@
+/** * 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=chip-group] {
+  display: flex;
+  gap: var(--spacing-sizing-02);
+  width: 100%;
+  overflow: auto;
+}
+[data-bspk=chip-group][data-wrap] {
+  flex-flow: row wrap;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

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

package/dist/components/ChipGroup/index.js

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

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

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