@bspk/ui 1.1.32 → 1.1.34

package/src/components/Avatar/avatar.scss

@@ -0,0 +1,101 @@
+[data-bspk='avatar'] {
+    --height: var(--spacing-sizing-10);
+    --font: var(--labels-base);
+    --svg-size: var(--spacing-sizing-10);
+
+    &:not([data-color]) {
+        --foreground: var(--foreground-neutral-on-surface);
+        --background: var(--surface-neutral-t3-low);
+    }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    height: var(--height);
+    width: var(--height);
+    aspect-ratio: 1 / 1;
+    border-radius: 999px;
+    background-color: var(--background);
+    color: var(--foreground);
+    font: var(--font);
+
+    &:has(img) {
+        overflow: hidden;
+        align-items: start;
+        justify-content: start;
+    }
+
+    img {
+        vertical-align: top;
+        max-width: 100%;
+    }
+
+    svg {
+        width: var(--svg-size);
+        height: var(--svg-size);
+    }
+
+    [data-icon] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &[data-size='x-small'] {
+        --height: var(--spacing-sizing-06);
+        --font: var(--labels-x-small);
+        --svg-size: var(--spacing-sizing-04);
+    }
+
+    &[data-size='small'] {
+        --height: var(--spacing-sizing-08);
+        --font: var(--labels-small);
+        --svg-size: var(--spacing-sizing-05);
+    }
+
+    &[data-size='medium'] {
+        --height: var(--spacing-sizing-10);
+        --font: var(--labels-base);
+        --svg-size: var(--spacing-sizing-05);
+    }
+
+    &[data-size='large'] {
+        --height: var(--spacing-sizing-12);
+        --font: var(--labels-large);
+        --svg-size: var(--spacing-sizing-06);
+    }
+
+    &[data-size='x-large'] {
+        --height: var(--spacing-sizing-14);
+        --font: var(--subheader-x-large);
+        --svg-size: var(--spacing-sizing-08);
+    }
+
+    &[data-size='xx-large'] {
+        --height: var(--spacing-sizing-17);
+        --font: var(--subheader-xx-large);
+        --svg-size: var(--spacing-sizing-12);
+    }
+
+    &[data-size='xxx-large'] {
+        --height: var(--spacing-sizing-19);
+        --font: var(--display-regular-small);
+        --svg-size: var(--spacing-sizing-15);
+    }
+
+    &[data-size='xxxx-large'] {
+        --height: var(--spacing-sizing-21);
+        --font: var(--display-regular-medium);
+        --svg-size: var(--spacing-sizing-17);
+    }
+
+    &[data-size='xxxxx-large'] {
+        --height: var(--spacing-sizing-23);
+        --font: var(--display-regular-large);
+        --svg-size: var(--spacing-sizing-18);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Avatar/index.tsx

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

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,86 @@
+import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
+import './avatar-group.scss';
+
+export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
+
+export type AvatarGroupProps = {
+    /**
+     * The avatars to display in the group.
+     *
+     * @example
+     *     [
+     *         { name: 'Jane Doe', image: '/profile.jpg' },
+     *         { name: 'John Smith', initials: 'JS' },
+     *     ];
+     *
+     * @type Array<AvatarItem>
+     * @required
+     */
+    items: AvatarItem[];
+    /**
+     * Size of the avatar group.
+     *
+     * @default small
+     */
+    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
+    /**
+     * The maximum number of avatars to display before showing the overflowCount.
+     *
+     * This is used to limit the number of avatars displayed in the group.
+     *
+     * @minimum 3
+     * @maximum 5
+     */
+    max?: number;
+    /**
+     * The variant of the avatar group.
+     *
+     * @default spread
+     */
+    variant?: 'spread' | 'stacked';
+};
+
+/**
+ * AvatarGroup component displays a group of avatars.
+ *
+ * @example
+ *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
+ *
+ *     export function Example() {
+ *         return (
+ *             <AvatarGroup
+ *                 items={[
+ *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'John Smith', initials: 'JS' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name AvatarGroup
+ * @phase Backlog
+ */
+function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupProps) {
+    if (!Array.isArray(items) || !items?.length) return null;
+
+    const overFlowCount = items.length - max;
+
+    return (
+        <div data-bspk="avatar-group" data-max={max} data-size={size} data-variant={variant}>
+            <div data-wrap>
+                {items.map((item, index) => (
+                    <Avatar key={index} {...item} size={size} />
+                ))}
+                {overFlowCount > 0 && (
+                    <div aria-hidden data-bspk="avatar" data-color="white" data-size={size}>
+                        <span data-overflow-count>+{overFlowCount}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+AvatarGroup.bspkName = 'AvatarGroup';
+
+export { AvatarGroup };

package/src/components/AvatarGroup/avatar-group.scss

@@ -0,0 +1,13 @@
+[data-bspk='avatar-group'] {
+    width: 100%;
+
+    [data-wrap] {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: end;
+        justify-content: end;
+        gap: var(--spacing-sizing-02);
+        overflow: hidden;
+    }
+}

package/src/components/AvatarGroup/index.tsx

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

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+
+import { tryIntParse } from '-/utils/tryIntPsrse';
+
+import './badge.scss';
+
+export type BadgeProps = {
+    /**
+     * The content of the badge. If larger than 99, the badge will display '99+'. If null or undefined, the badge will
+     * be hidden.
+     *
+     * @example
+     *     5;
+     *
+     * @default 1
+     *
+     * @type number
+     * @minimum 1
+     */
+    count?: number;
+    /**
+     * The size of the badge.
+     *
+     * @default small
+     */
+    size?: 'small' | 'x-small';
+    /**
+     * The color variant of the badge.
+     *
+     * @default primary
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Whether the badge should have a border that matches the surface color.
+     *
+     * @default false
+     */
+    surfaceBorder?: boolean;
+    /**
+     * The context for which the badge is applied.
+     *
+     * Could be a button, link, or any other element that the badge is associated with.
+     *
+     * @type
+     */
+    children?: ReactNode;
+};
+
+/**
+ * Visual indicator for new items within a parent page represented with a numerical count of new items.
+ *
+ * @example
+ *     import { Badge } from '@bspk/ui/badge';
+ *
+ *     function Example() {
+ *         return <Badge count={5} size="small" variant="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
+ *
+ * @name Badge
+ * @phase DesignReview
+ */
+function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }: BadgeProps) {
+    const count: number | null = tryIntParse(countProp);
+
+    if (count === null) return;
+
+    const badge = (
+        <sup data-bspk="badge" data-size={size} data-surface-border={surfaceBorder || undefined} data-variant={variant}>
+            {count > 99 ? '99+' : count}
+        </sup>
+    );
+
+    if (children) {
+        return (
+            <span data-bspk="badge-wrapper">
+                {children}
+                {badge}
+            </span>
+        );
+    }
+
+    return badge;
+}
+
+Badge.bspkName = 'Badge';
+
+export { Badge };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Badge/BadgeExample.tsx

@@ -0,0 +1,73 @@
+import { Avatar } from '-/components/Avatar';
+import { ComponentExample } from '-/utils/demo';
+
+import { BadgeProps } from '.';
+
+export const BadgeExample: ComponentExample<BadgeProps> = {
+    containerStyle: { width: '100%' },
+    render: ({ props, Component, preset }) => {
+        if (preset?.label === 'Borders') return <ExampleBadgeVariants Component={Component} props={props} />;
+
+        if (preset?.label === 'With Context') {
+            return (
+                <>
+                    <Component {...props}>
+                        <Avatar image="/profile.jpg" name="Andre Giant" />
+                    </Component>
+                </>
+            );
+        }
+        return <Component {...props} />;
+    },
+    presets: [
+        {
+            label: 'With Context',
+        },
+        {
+            label: 'Borders',
+        },
+    ],
+};
+
+function ExampleBadgeVariants({
+    Component,
+    ...props
+}: {
+    Component: React.ComponentType<Record<string, unknown>>;
+    props: BadgeProps;
+}) {
+    const cells = [
+        ['', 'Small', 'X-Small'],
+        ['None', { size: 'small', surfaceBorder: false }, { size: 'x-small', surfaceBorder: false }],
+        ['Border', { size: 'small', surfaceBorder: true }, { size: 'x-small', surfaceBorder: true }],
+    ] as (BadgeProps | string)[][];
+
+    let border = false;
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
+            {cells.flat().map((content, idx) => {
+                if (typeof content === 'string' && content === 'Border') border = true;
+                return (
+                    <div
+                        key={idx}
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: '8px',
+                            padding: '8px',
+                            background:
+                                typeof content !== 'string' && border ? 'var(--surface-neutral-t3-low)' : 'transparent',
+                        }}
+                    >
+                        {typeof content === 'string'
+                            ? content
+                            : [9, 99, 999].map((count, idx2) => (
+                                  <Component count={count} key={idx2} {...props} {...(content as BadgeProps)} />
+                              ))}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/src/components/Badge/badge.scss

@@ -0,0 +1,51 @@
+[data-bspk='badge'] {
+    --size: var(--spacing-sizing-06);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-circular);
+    height: var(--size);
+    width: fit-content;
+    min-width: var(--size);
+    font: var(--labels-x-small);
+    color: var(--foreground-brand-on-primary);
+    background: var(--surface-brand-primary);
+    padding: 0 var(--spacing-sizing-02);
+
+    &[data-size='x-small'] {
+        --size: var(--spacing-sizing-05);
+
+        padding: 2px var(--spacing-sizing-01);
+    }
+
+    &[data-variant='secondary'] {
+        color: var(--foreground-brand-on-secondary);
+        background: var(--surface-brand-secondary);
+    }
+
+    &[data-surface-border] {
+        border: 2px solid var(--surface-neutral-t1-base);
+    }
+}
+
+[data-bspk='badge-wrapper'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    flex-shrink: 0;
+
+    [data-bspk='badge'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: scale(1) translate(50%, -50%);
+        transform-origin: 100% 0%;
+        z-index: 2;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Badge/index.tsx

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

package/src/components/BannerAlert/BannerAlert.tsx

@@ -0,0 +1,116 @@
+import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
+import { SvgClose } from '@bspk/icons/Close';
+import { SvgErrorFill } from '@bspk/icons/ErrorFill';
+import { SvgInfoFill } from '@bspk/icons/InfoFill';
+import { SvgWarningFill } from '@bspk/icons/WarningFill';
+
+import { ElementProps, AlertVariant, CallToActionButton } from '-';
+import './banner-alert.scss';
+
+export type BannerAlertProps = {
+    /**
+     * The color variant of the banner alert.
+     *
+     * @default informational
+     */
+    variant?: AlertVariant;
+    /**
+     * The function to call when the banner alert is closed. If not included the close button will not be displayed.
+     *
+     * @type () => void
+     */
+    onClose?: () => void;
+    /**
+     * The header of the banner alert.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * The body of the banner alert.
+     *
+     * @type multiline
+     * @required
+     */
+    body: string;
+    /**
+     * This property may be undefined or an object containing required CallToActionButton properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+    /**
+     * Is the alert elevated. If true a drop shadow is added.
+     *
+     * @default false
+     */
+    elevated?: boolean;
+};
+
+/**
+ * A visual and contextual message used to communicate an important message or notification to users relating to a
+ * status or the body content of a page.
+ *
+ * @example
+ *     import { BannerAlert } from '@bspk/ui/BannerAlert';
+ *
+ *     function Example() {
+ *         <BannerAlert
+ *             variant="error"
+ *             header="Error"
+ *             body="There was an error processing your request."
+ *             onClose={() => console.log('Alert closed')}
+ *         />;
+ *     }
+ *
+ * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
+ *
+ *
+ *
+ *
+ * @name BannerAlert
+ * @phase DesignReview
+ */
+function BannerAlert({
+    variant = 'informational',
+    onClose,
+    header,
+    callToAction,
+    body,
+    elevated = false,
+}: ElementProps<BannerAlertProps, 'div'>) {
+    return (
+        <article data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant}>
+            <div data-icon-bar>
+                {variant === 'error' && <SvgErrorFill />}
+                {variant === 'informational' && <SvgInfoFill />}
+                {variant === 'success' && <SvgCheckCircleFill />}
+                {variant === 'warning' && <SvgWarningFill />}
+            </div>
+            <div data-content>
+                {(header || onClose) && (
+                    <header>
+                        <span>{header}</span>
+                        {typeof onClose === 'function' && (
+                            <button aria-label="Close" onClick={onClose} type="button">
+                                <SvgClose />
+                            </button>
+                        )}
+                    </header>
+                )}
+                <div data-body>
+                    <span>{body}</span>
+                    {callToAction?.label && callToAction?.onClick && (
+                        <button onClick={callToAction.onClick}>{callToAction.label}</button>
+                    )}
+                </div>
+            </div>
+        </article>
+    );
+}
+
+BannerAlert.bspkName = 'BannerAlert';
+
+export { BannerAlert };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BannerAlert/BannerAlertExample.tsx

@@ -0,0 +1,34 @@
+import { ComponentExampleFn } from '-/utils/demo';
+
+import { BannerAlertProps } from '.';
+
+export const BannerAlertExample: ComponentExampleFn<BannerAlertProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, context, Component }) => {
+        let nextHeader = props.header || 'This is a banner alert';
+        if (context?.variantName === 'variant') {
+            if (context?.variantValue === 'informational') nextHeader = 'This is informational banner';
+            if (context?.variantValue === 'success') nextHeader = 'This is success banner';
+            if (context?.variantValue === 'warning') nextHeader = 'This is warning banner';
+            if (context?.variantValue === 'error') nextHeader = 'This is error banner';
+        }
+        return <Component {...props} header={nextHeader} />;
+    },
+    presets: [
+        {
+            label: 'With CallToAction',
+            propState: {
+                callToAction: {
+                    label: 'Click me',
+                    onClick: () => action('Call to action clicked!'),
+                },
+            },
+        },
+        {
+            label: 'Without OnClose',
+            propState: {
+                onClose: undefined,
+            },
+        },
+    ],
+});

package/src/components/BannerAlert/banner-alert.scss

@@ -0,0 +1,114 @@
+[data-bspk='banner-alert'] {
+    --color: var(--status-information);
+    --on-color: var(--status-on-information);
+
+    display: flex;
+    flex-direction: row;
+    border: 2px solid var(--color);
+    border-radius: var(--radius-md);
+    background-color: var(--surface-neutral-t1-base);
+    width: 100%;
+
+    &[data-variant='error'] {
+        --color: var(--status-error);
+        --on-color: var(--status-on-error);
+    }
+
+    &[data-variant='success'] {
+        --color: var(--status-success);
+        --on-color: var(--status-on-success);
+    }
+
+    &[data-variant='warning'] {
+        --color: var(--status-warning);
+        --on-color: var(--status-on-warning);
+    }
+
+    &[data-elevated] {
+        box-shadow: var(--drop-shadow-raise);
+    }
+
+    [data-icon-bar] {
+        flex: 1;
+        padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
+        background: var(--color);
+        color: var(--on-color);
+
+        svg {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+    }
+
+    [data-content] {
+        flex: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+
+        header {
+            display: flex;
+            flex-direction: row;
+            gap: var(--spacing-sizing-03);
+            height: var(--spacing-sizing-12);
+            align-items: center;
+
+            span {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                color: var(--foreground-neutral-on-surface);
+                font: var(--heading-h6);
+
+                @media (any-pointer: coarse) {
+                    font: var(--heading-h6);
+                }
+            }
+
+            // close button
+            button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 0;
+                margin: 0 0 0 auto;
+                color: var(--foreground-neutral-on-surface-variant-01);
+                height: var(--spacing-sizing-08);
+                width: var(--spacing-sizing-08);
+
+                @media (any-pointer: coarse) {
+                    height: var(--spacing-sizing-12);
+                    width: var(--spacing-sizing-12);
+                }
+
+                svg {
+                    width: var(--spacing-sizing-04);
+                    height: var(--spacing-sizing-04);
+                }
+            }
+        }
+
+        [data-body] {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sizing-02);
+            padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
+
+            span {
+                font: var(--body-base);
+            }
+
+            button {
+                margin-left: auto;
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 0 var(--spacing-sizing-03);
+                height: var(--spacing-sizing-12);
+                font: var(--labels-small);
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BannerAlert/index.tsx

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