@bspk/ui 1.1.31 → 1.1.33

package/src/components/ChipGroup/ChipGroup.tsx

@@ -0,0 +1,53 @@
+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
+ */
+function ChipGroup({ children, wrap = true }: ChipGroupProps) {
+    return (
+        <div data-bspk="chip-group" data-wrap={wrap || undefined}>
+            {children}
+        </div>
+    );
+}
+
+ChipGroup.bspkName = 'ChipGroup';
+
+export { ChipGroup };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -0,0 +1,158 @@
+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 { ComponentExampleFn } from '-/utils/demo';
+
+import { ChipAssist } from '../ChipAssist';
+import { ChipFilter } from '../ChipFilter';
+import { ChipGroup, ChipGroupProps } from '../ChipGroup';
+import { ChipInput } from '../ChipInput';
+import { ChipSuggestion } from '../ChipSuggestion';
+import { ChipUtility } from '../ChipUtility';
+
+export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ 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 (
+                    <ChipGroup {...props}>
+                        <ChipUtility
+                            label="chip 1"
+                            leadingIcon={<SvgLightbulb />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgChevronRight />}
+                        />
+                        <ChipUtility
+                            label="chip 2"
+                            leadingIcon={<SvgIcecream />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgChevronRight />}
+                        />
+                        <ChipUtility
+                            label="chip 3"
+                            leadingIcon={<SvgSignLanguage />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgClose />}
+                        />
+                        <ChipUtility
+                            label="chip 4"
+                            leadingIcon={<SvgOpportunities />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgClose />}
+                        />
+                        <ChipUtility
+                            label="chip 5"
+                            leadingIcon={<SvgCloud />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgKeyboardArrowDown />}
+                        />
+                    </ChipGroup>
+                );
+            case 'scroll':
+                return (
+                    <ChipGroup {...props}>
+                        <ChipUtility
+                            label="chip 1"
+                            leadingIcon={<SvgLightbulb />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgChevronRight />}
+                        />
+                        <ChipUtility
+                            label="chip 2"
+                            leadingIcon={<SvgIcecream />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgChevronRight />}
+                        />
+                        <ChipUtility
+                            label="chip 3"
+                            leadingIcon={<SvgSignLanguage />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgClose />}
+                        />
+                        <ChipUtility
+                            label="chip 4"
+                            leadingIcon={<SvgOpportunities />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgClose />}
+                        />
+                        <ChipUtility
+                            label="chip 5"
+                            leadingIcon={<SvgCloud />}
+                            onClick={handleChipInputClick}
+                            trailingIcon={<SvgKeyboardArrowDown />}
+                        />
+                    </ChipGroup>
+                );
+            case 'suggestion':
+                return (
+                    <ChipGroup {...props}>
+                        <ChipSuggestion label="suggestion 1" onClick={handleChipInputClick} />
+                        <ChipSuggestion label="suggestion 2" onClick={handleChipInputClick} />
+                        <ChipSuggestion label="suggestion 3" onClick={handleChipInputClick} />
+                        <ChipSuggestion label="suggestion 4" onClick={handleChipInputClick} />
+                        <ChipSuggestion label="suggestion 5" onClick={handleChipInputClick} />
+                    </ChipGroup>
+                );
+            case 'assist':
+                return (
+                    <ChipGroup {...props}>
+                        <ChipAssist label="assist 1" leadingIcon={<SvgLightbulb />} onClick={handleChipInputClick} />
+                        <ChipAssist label="assist 2" onClick={handleChipInputClick} />
+                        <ChipAssist label="assist 3" leadingIcon={<SvgSignLanguage />} onClick={handleChipInputClick} />
+                        <ChipAssist label="assist 4" onClick={handleChipInputClick} />
+                        <ChipAssist label="assist 5" leadingIcon={<SvgCloud />} onClick={handleChipInputClick} />
+                    </ChipGroup>
+                );
+            case 'input':
+                return (
+                    <ChipGroup {...props}>
+                        <ChipInput label="input 1" onClick={handleChipInputClick} removable={false} />
+                        <ChipInput label="input 2" onClick={handleChipInputClick} />
+                        <ChipInput label="input 3" onClick={handleChipInputClick} />
+                        <ChipInput label="input 4" onClick={handleChipInputClick} />
+                        <ChipInput label="input 5" onClick={handleChipInputClick} />
+                    </ChipGroup>
+                );
+            case 'filter':
+                return (
+                    <ChipGroup {...props}>
+                        <ChipFilter label="filter 1" onClick={handleChipInputClick} trailingIcon="SvgClose" />
+                        <ChipFilter label="filter 2" onClick={handleChipInputClick} trailingIcon="SvgChevronRight" />
+                        <ChipFilter
+                            label="filter 3"
+                            onClick={handleChipInputClick}
+                            trailingIcon="SvgKeyboardArrowDown"
+                        />
+                        <ChipFilter label="filter 1" onClick={handleChipInputClick} trailingBadgeCount={5} />
+                        <ChipFilter
+                            label="filter 1"
+                            leadingIcon={<SvgIcecream />}
+                            onClick={handleChipInputClick}
+                            trailingBadgeCount={7}
+                        />
+                    </ChipGroup>
+                );
+            default:
+                return null;
+        }
+    },
+});

package/src/components/ChipGroup/chip-group.scss

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

package/src/components/ChipGroup/index.tsx

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

package/src/components/ChipInput/ChipInput.tsx

@@ -0,0 +1,50 @@
+import { SvgClose } from '@bspk/icons/Close';
+
+import { ChipUtility, ChipUtilityProps } from '-/components/ChipUtility';
+
+export type ChipInputProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'> & {
+    /**
+     * If true, a close icon will be added and the chip can be removed.
+     *
+     * @default true
+     */
+    removable?: boolean;
+};
+
+/**
+ * A range of short form key words or pieces of information a customer enters within multi entry field.
+ *
+ * @example
+ *     import { ChipInput } from '@bspk/ui/ChipInput';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipInput
+ *                 label="InputChip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Input Chip clicked')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipInput
+ * @phase DesignReview
+ */
+function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }: ChipInputProps) {
+    return (
+        <ChipUtility
+            disabled={disabled}
+            label={label}
+            leadingIcon={leadingIcon}
+            onClick={onClick}
+            trailingIcon={removable ? <SvgClose /> : undefined}
+        />
+    );
+}
+
+ChipInput.bspkName = 'ChipInput';
+
+export { ChipInput };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipInput/ChipInputExample.tsx

@@ -0,0 +1,48 @@
+import { ComponentExampleFn } from '-/utils/demo';
+
+import { ChipInputProps } from '.';
+
+export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return <Component {...props} onClick={() => action('ChipInput clicked!')} />;
+    },
+    presets: [
+        {
+            label: 'Basic ChipInput',
+            propState: {
+                label: 'chip option',
+            },
+        },
+        {
+            label: 'with leadingIcon',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+            },
+        },
+        {
+            label: 'with removable = false',
+            propState: {
+                label: 'chip option',
+                removable: false,
+            },
+        },
+        {
+            label: 'with removable = false and leadingIcon',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+                removable: false,
+            },
+        },
+        {
+            label: 'disabled',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+                disabled: true,
+            },
+        },
+    ],
+});

package/src/components/ChipInput/index.tsx

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

package/src/components/ChipSuggestion/ChipSuggestion.tsx

@@ -0,0 +1,26 @@
+import { ChipUtility, ChipUtilityProps } from '-/components/ChipUtility';
+
+export type ChipSuggestionProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'onClick'>;
+
+/**
+ * Dynamically generated options that are suggested to the customer as responses or prompts.
+ *
+ * @example
+ *     import { ChipSuggestion } from '@bspk/ui/ChipSuggestion';
+ *
+ *     function Example() {
+ *         return <ChipSuggestion label="Suggestion Chip" onClick={() => console.log('Suggestion')} />;
+ *     }
+ *
+ * @name ChipSuggestion
+ * @phase DesignReview
+ */
+function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps) {
+    return <ChipUtility disabled={disabled} label={label} onClick={onClick} />;
+}
+
+ChipSuggestion.bspkName = 'ChipSuggestion';
+
+export { ChipSuggestion };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipSuggestion/ChipSuggestionExample.tsx

@@ -0,0 +1,25 @@
+import { ComponentExampleFn } from '-/utils/demo';
+
+import { ChipSuggestionProps } from '.';
+
+export const ChipSuggestionExample: ComponentExampleFn<ChipSuggestionProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return <Component {...props} onClick={() => action('ChipSuggestion clicked!')} />;
+    },
+    presets: [
+        {
+            label: 'ChipSuggestion example',
+            propState: {
+                label: 'chip option',
+            },
+        },
+        {
+            label: 'disabled',
+            propState: {
+                label: 'chip option',
+                disabled: true,
+            },
+        },
+    ],
+});

package/src/components/ChipSuggestion/index.tsx

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

package/src/components/ChipUtility/ChipUtility.tsx

@@ -0,0 +1,129 @@
+import { ReactNode, isValidElement } from 'react';
+
+import { Badge, BadgeProps } from '-/components/Badge';
+import { isValidIcon } from '-/utils/children';
+
+import './chip-utility.scss';
+
+export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder' | 'variant'>;
+
+export type ChipUtilityProps = {
+    /**
+     * Is the chip disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Is the chip elevated or flat. If flat the drop shadow is removed.
+     *
+     * @default false
+     */
+    flat?: boolean;
+    /**
+     * The label of the chip.
+     *
+     * @example
+     *     'Hello I am Chip';
+     *
+     * @required
+     */
+    label: string;
+    /** The function to call when the chip is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Whether the chip is currently selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The leading icon of the chip.
+     *
+     * @type BspkIcon
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * The trailing icon of the chip.
+     *
+     * You can only have one of the trailing options, trailingIcon **or** trailingBadge. If both are present the
+     * trailingIcon will be visible.
+     *
+     * @type BspkIcon
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * The trailing Badge for use in the ChipFilter.
+     *
+     * If a trailingIcon is provided the Badge will **not** be visible.
+     */
+    trailingBadge?: BadgeItem;
+};
+
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @example
+ *     import { ChipUtility } from '@bspk/ui/ChipUtility';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
+ * @name ChipUtility
+ * @phase Utility
+ */
+function ChipUtility({
+    flat = false,
+    disabled = false,
+    label,
+    selected = false,
+    leadingIcon,
+    onClick,
+    trailingIcon,
+    trailingBadge,
+}: ChipUtilityProps) {
+    return (
+        <button
+            data-bspk="chip-utility"
+            data-disabled={disabled || undefined}
+            data-flat={flat || undefined}
+            data-selected={selected || undefined}
+            data-touch-target-parent
+            onClick={disabled ? undefined : onClick}
+        >
+            <>
+                {isValidIcon(leadingIcon) && isValidElement(leadingIcon) && (
+                    <span aria-hidden="true" data-chip-icon>
+                        {leadingIcon}
+                    </span>
+                )}
+                <span>{label}</span>
+                {isValidIcon(trailingIcon) && isValidElement(trailingIcon) && (
+                    <span aria-hidden="true" data-chip-icon>
+                        {trailingIcon}
+                    </span>
+                )}
+                {trailingBadge && !trailingIcon && (
+                    <Badge
+                        count={trailingBadge.count}
+                        size={trailingBadge.size}
+                        surfaceBorder={trailingBadge.surfaceBorder}
+                        variant={trailingBadge.variant}
+                    />
+                )}
+            </>
+            <span data-touch-target />
+        </button>
+    );
+}
+
+ChipUtility.bspkName = 'ChipUtility';
+
+export { ChipUtility };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipUtility/ChipUtilityExample.tsx

@@ -0,0 +1,63 @@
+import { ComponentExample } from '-/utils/demo';
+
+import { ChipUtilityProps } from '.';
+
+export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+    presets: [
+        {
+            label: 'Basic',
+            propState: {
+                label: 'chip',
+            },
+        },
+        {
+            label: 'Leading Icon',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Add',
+                trailingIcon: '',
+            },
+        },
+        {
+            label: 'Trailing Icon',
+            propState: {
+                label: 'chip',
+                leadingIcon: '',
+                trailingIcon: 'Add',
+            },
+        },
+        {
+            label: 'Both Icons',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Add',
+                trailingIcon: 'Add',
+            },
+        },
+        {
+            label: 'Invalid Icons',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Bumblebee',
+                trailingIcon: 'Rabbit',
+            },
+        },
+        {
+            label: 'Trailing Badge',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Add',
+                trailingIcon: '',
+                trailingBadge: { count: 2, size: 'x-small' },
+            },
+        },
+        {
+            label: 'Trailing Badge Icon',
+            propState: {
+                label: 'chip',
+                trailingIcon: 'Cloud',
+                trailingBadge: { count: 2, size: 'x-small' },
+            },
+        },
+    ],
+};

package/src/components/ChipUtility/chip-utility.scss

@@ -0,0 +1,59 @@
+[data-bspk='chip-utility'] {
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+    height: var(--spacing-sizing-08);
+    text-wrap: nowrap;
+    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-small);
+    padding: 0 var(--spacing-sizing-03);
+
+    [data-touch-target] {
+        min-width: var(--spacing-sizing-12);
+        min-height: var(--spacing-sizing-12);
+    }
+
+    &:not([data-flat]) {
+        box-shadow: var(--drop-shadow-raise);
+    }
+
+    &[data-variant='filter'] {
+        cursor: pointer;
+    }
+
+    &[data-disabled] {
+        color: var(--foreground-neutral-disabled-on-surface);
+        cursor: not-allowed;
+        border-color: var(--stroke-neutral-disabled-light);
+        background-color: var(--interactions-disabled-opacity);
+    }
+
+    &:not([data-disabled]) {
+        &:hover {
+            background-color: var(--interactions-neutral-hover-opacity);
+        }
+
+        &:active {
+            background-color: var(--interactions-neutral-press-opacity);
+        }
+
+        &:focus {
+            outline: 1px solid var(--stroke-neutral-focus);
+            border-color: var(--stroke-neutral-focus);
+        }
+    }
+
+    &[data-selected] {
+        background-color: var(--surface-brand-primary-highlight);
+        border-color: var(--stroke-brand-primary);
+    }
+
+    [data-chip-icon] {
+        display: flex;
+        align-items: center;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipUtility/index.tsx

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