@bspk/ui 1.0.0

package/src/Profile.tsx

@@ -0,0 +1,140 @@
+import { css } from '@emotion/react';
+import { ReactNode, useMemo } from 'react';
+
+import { COLOR_VARIABLES, ColorVariant } from './utils/colorVariants';
+
+import { CommonProps } from '.';
+
+export type SizeVariant =
+    | 'large'
+    | 'medium'
+    | 'small'
+    | 'x-large'
+    | 'x-small'
+    | 'xx-large'
+    | 'xxx-large'
+    | 'xxxx-large'
+    | 'xxxxx-large';
+
+const SIZE_VARIANTS: Record<SizeVariant, { height: string; font: string }> = {
+    'x-small': { font: '--labels-x-small', height: '--spacing-sizing-06' }, // 24
+    small: { font: '--labels-small', height: '--spacing-sizing-08' }, // 32,
+    medium: { font: '--labels-base', height: '--spacing-sizing-10' }, // 40
+    large: { font: '--labels-large', height: '--spacing-sizing-12' }, //48,
+    'x-large': { font: '--desktop-subheader-x-large', height: '--spacing-sizing-14' }, // 56,
+    'xx-large': { font: '--desktop-subheader-xx-large', height: '--spacing-sizing-17' }, // 72,
+    'xxx-large': { font: '--desktop-display-regular-small', height: '--spacing-sizing-19' }, //96,
+    'xxxx-large': { font: '--desktop-display-regular-medium', height: '--spacing-sizing-21' }, // 120,
+    'xxxxx-large': { font: '--desktop-display-regular-large', height: '--spacing-sizing-23' }, //144,
+};
+
+export type ProfileProps = CommonProps<'aria-label'> & {
+    /**
+     * The size of the profile.
+     *
+     * @default small
+     */
+    size?: SizeVariant;
+    /**
+     * The color of the profile.
+     *
+     * @default grey
+     */
+    color?: ColorVariant;
+    /** The initials to display in the profile limited to 2 characters. */
+    initials?: string;
+    /** The icon to display in the profile. */
+    icon?: ReactNode;
+    /** The url to the image to display in the profile. */
+    image?: string;
+    /** The number of notifications not displayed in a list. */
+    overflowCount?: number;
+};
+
+/**
+ * A profile component.
+ *
+ * A profile is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
+ * overflowCount.
+ *
+ * @name Profile
+ */
+function Profile({
+    initials,
+    color = 'grey',
+    size = 'small',
+    icon,
+    image,
+    'aria-label': ariaLabel,
+    overflowCount,
+}: ProfileProps) {
+    const children = useMemo(() => {
+        if (initials) return <span data-initials>{initials}</span>;
+        if (icon) return <span data-icon>{icon}</span>;
+        if (image) return <img alt={ariaLabel} src={image} />;
+        if (overflowCount) return <span data-overflow-count>+{overflowCount}</span>;
+        return null;
+    }, [ariaLabel, icon, image, initials, overflowCount]);
+
+    return (
+        <>
+            {children && (
+                <div aria-label={ariaLabel} css={style} data-color={color} data-profile="" data-size={size}>
+                    {children}
+                </div>
+            )}
+        </>
+    );
+}
+
+Profile.bspkName = 'Profile';
+
+export { Profile };
+
+export const style = css`
+    --height: var(--spacing-sizing-10);
+    --font: var(--labels-base);
+    --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;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    ${Object.entries(SIZE_VARIANTS).map(
+        ([variant, { height, font }]) => css`
+            &[data-size='${variant}'] {
+                --height: var(${height});
+                --font: var(${font});
+            }
+        `,
+    )}
+
+    ${Object.entries(COLOR_VARIABLES).map(
+        ([variant, { foreground, surface }]) => css`
+            &[data-color='${variant}'] {
+                --foreground: var(${foreground});
+                --background: var(${surface});
+            }
+        `,
+    )};
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressBar.tsx

@@ -0,0 +1,110 @@
+import { css } from '@emotion/react';
+import { CSSProperties, useId } from 'react';
+
+export type ProgressBarProps = {
+    /**
+     * The size of the progressbar.
+     *
+     * @default large
+     */
+    size?: 'large' | 'small';
+    /**
+     * The current progress of the progressbar.
+     *
+     * @default 0
+     * @minimum 0
+     * @maximum 100
+     * @required
+     */
+    completion: number;
+    /**
+     * The label alignment of the progressbar.
+     *
+     * @default center
+     */
+    align?: 'center' | 'left';
+    /** The label of the progressbar. */
+    label: string;
+};
+
+/**
+ * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
+ * occurring in the background.
+ *
+ * @name ProgressBar
+ */
+function ProgressBar({ size = 'large', completion = 0, align = 'center', label }: ProgressBarProps) {
+    const id = useId();
+
+    return (
+        <div css={style} data-align={align} data-progress-bar data-size={size}>
+            <progress
+                aria-busy={completion < 100}
+                aria-label="A bounded progress bar from 0 to 100"
+                aria-valuemax={100}
+                aria-valuemin={0}
+                aria-valuenow={completion}
+                id={id}
+                max="100"
+                value={completion}
+            >
+                {completion}%
+            </progress>
+            <div aria-hidden data-bar style={{ '--width': `${completion}%` } as CSSProperties} />
+            <label htmlFor={id}>{label}</label>
+        </div>
+    );
+}
+
+ProgressBar.bspkName = 'ProgressBar';
+
+export { ProgressBar };
+
+export const style = css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--spacing-sizing-01);
+
+    progress {
+        opacity: 0;
+        position: absolute;
+    }
+
+    [data-bar] {
+        width: 100%;
+        height: var(--spacing-sizing-02);
+        background-color: var(--surface-neutral-t3-low);
+        border-radius: var(--radius-small);
+
+        &::after {
+            content: '';
+            display: block;
+            height: 100%;
+            background-color: var(--foreground-brand-primary);
+            border-radius: var(--radius-small);
+            width: var(--width);
+            transition: width 0.3s;
+        }
+    }
+
+    &[data-size='small'] {
+        max-width: 248px;
+
+        [data-bar] {
+            height: var(--spacing-sizing-01);
+        }
+    }
+
+    label {
+        font-size: var(--labels-small);
+        width: 100%;
+        text-align: center;
+    }
+
+    &[data-align='left'] label {
+        text-align: left;
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressCircle.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/no-multi-comp */
+
+import { css } from '@emotion/react';
+import { useId } from 'react';
+
+import { Txt } from './Txt';
+import { TxtVariant } from './utils/txtVariants';
+
+const ANIMATION_SPEED = 1.5;
+
+export type ProgressCircleProps = {
+    /** The label of the progress circle. */
+    label: string;
+    /**
+     * The size of the label and progress circle.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * The position of the label in relation to the progress circle.
+     *
+     * @default bottom
+     */
+    labelPosition?: 'bottom' | 'left' | 'right' | 'top';
+};
+
+/**
+ * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
+ *
+ * @name ProgressCircle
+ */
+function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircleProps) {
+    let variant: TxtVariant = 'labels-base';
+
+    if (size === 'small') variant = 'labels-small';
+    else if (size === 'large') variant = 'labels-large';
+
+    const labelId = useId();
+
+    return (
+        <div
+            aria-labelledby={labelId}
+            css={style}
+            data-label-position={labelPosition}
+            data-progress-circle
+            data-size={size}
+            role="progressbar"
+        >
+            <ProgressCircle.SVG />
+            <Txt id={labelId} variant={variant}>
+                {label || 'Loading ...'}
+            </Txt>
+        </div>
+    );
+}
+
+ProgressCircle.bspkName = 'ProgressCircle';
+
+export { ProgressCircle };
+
+export const style = css`
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sizing-02);
+    align-items: center;
+    justify-content: center;
+
+    &[data-label-position='top'] {
+        flex-direction: column-reverse;
+    }
+
+    &[data-label-position='left'] {
+        flex-direction: row-reverse;
+    }
+
+    &[data-label-position='right'] {
+        flex-direction: row;
+    }
+
+    svg {
+        color: var(--foreground-brand-secondary);
+        animation: spin ${ANIMATION_SPEED}s linear infinite;
+    }
+
+    @keyframes spin {
+        100% {
+            transform: rotate(360deg);
+        }
+        0% {
+            transform: rotate(0deg);
+        }
+    }
+
+    &[data-size='small'] {
+        svg {
+            width: 32px;
+        }
+    }
+
+    &[data-size='medium'] {
+        svg {
+            width: 40px;
+        }
+    }
+
+    &[data-size='large'] {
+        svg {
+            width: 48px;
+        }
+    }
+`;
+
+const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+
+    return (
+        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
+            <defs>
+                <linearGradient id={`${id}spinner-secondHalf`}>
+                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+                <linearGradient id={`${id}spinner-firstHalf`}>
+                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+            </defs>
+            <g strokeWidth={strokeWidth * 2}>
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
+                    stroke={`url(#${id}spinner-secondHalf)`}
+                />
+                <path
+                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
+                    stroke={`url(#${id}spinner-firstHalf)`}
+                />
+                {/* 1deg extra path to have the round end cap */}
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                />
+            </g>
+        </svg>
+    );
+};
+
+ProgressCircle.SVG = ProgressCircleSVG;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressionStepper.tsx

@@ -0,0 +1,294 @@
+import { SvgCheck } from '@bspk/icons/Check';
+import { css } from '@emotion/react';
+
+import { ElementProps } from '.';
+
+/** A progress stepper item is a single step in the progress bar. */
+export type ProgressionStepperItem = {
+    /**
+     * The name of the step.
+     *
+     * @type string
+     * @required
+     */
+    name: string;
+    /**
+     * The subtext of the step.
+     *
+     * @type multiline
+     */
+    subtext?: string;
+    /**
+     * The link to navigate to when the step is clicked.
+     *
+     * @type {label: string; onClick: () => void}
+     */
+    touchLink?: { label: string; onClick: () => void };
+};
+
+export type ProgressionStepperProps = {
+    /**
+     * The steps to display in the progress bar.
+     *
+     * @type ProgressionStepperItem[]
+     * @required
+     */
+    steps: ProgressionStepperItem[];
+    /**
+     * The current step in the progress bar.
+     *
+     * If the current step is greater than the number of steps, all steps with be completed.
+     *
+     * If the current step is less than 1, all steps will be incomplete.
+     *
+     * @default 0
+     * @minimum 0
+     */
+    currentStep?: number;
+    /**
+     * The variant of the progress bar. Can be either horizontal, vertical, or widget.
+     *
+     * When on small width screens, the default will automatically switch to widget.
+     *
+     * @default horizontal
+     */
+    variant?: 'horizontal' | 'vertical' | 'widget';
+};
+
+/**
+ * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
+ *
+ * @name ProgressionStepper
+ */
+function ProgressionStepper({
+    steps = [],
+    currentStep: currentStepProp = 0,
+    variant = 'horizontal',
+    ...containerProps
+}: ElementProps<ProgressionStepperProps, 'div'>) {
+    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
+    return (
+        <div {...containerProps} css={style} data-progress-stepper="" data-variant={variant}>
+            {variant === 'widget' && (
+                <label>
+                    <span data-title>{steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name}</span>
+                    <span data-subtitle>
+                        {currentStep >= steps.length ? (
+                            'Completed'
+                        ) : (
+                            <>
+                                Step {currentStep} of {steps.length}
+                            </>
+                        )}
+                    </span>
+                </label>
+            )}
+            <ol>
+                {steps.flatMap(({ name, subtext }, index) => {
+                    const stepNum = index + 1;
+                    let status: 'complete' | 'current' | 'incomplete' = 'incomplete';
+                    if (stepNum < currentStep) status = 'complete';
+                    else if (stepNum === currentStep) status = 'current';
+
+                    return (
+                        <li data-status={status} data-step={stepNum} key={`step-${index}`}>
+                            <span aria-hidden data-line-circle>
+                                <span data-line="before" />
+                                <span data-circle>
+                                    <span>{stepNum}</span>
+                                    {status === 'complete' && <SvgCheck />}
+                                </span>
+                                <span data-line="after" />
+                            </span>
+                            {variant !== 'widget' && (
+                                <span data-content>
+                                    <span data-name>{name}</span>
+                                    {subtext && <span data-subtext>{subtext}</span>}
+                                </span>
+                            )}
+                        </li>
+                    );
+                })}
+            </ol>
+        </div>
+    );
+}
+
+ProgressionStepper.bspkName = 'ProgressionStepper';
+
+export { ProgressionStepper };
+
+export const style = css`
+    width: 100%;
+    --circle-width: var(--spacing-sizing-09);
+
+    --active-background-color: var(--surface-brand-primary);
+    --active-foreground-color: var(--foreground-brand-on-primary);
+    --inactive-background-color: var(--surface-neutral-t3-low);
+    --inactive-foreground-color: var(--foreground-neutral-on-surface);
+
+    ol {
+        display: flex;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+
+        li {
+            display: flex;
+            flex-direction: column;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            gap: var(--spacing-sizing-02);
+            [data-line-circle] {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: row;
+
+                [data-line] {
+                    background-color: var(--inactive-background-color);
+                    height: 2px;
+                    flex-grow: 1;
+                }
+
+                [data-circle] {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: var(--circle-width);
+                    height: var(--circle-width);
+                    border-radius: 50%;
+                    background-color: none;
+                    border: 2px solid var(--inactive-background-color);
+                    font: var(--labels-large);
+
+                    svg {
+                        display: none;
+                        width: var(--spacing-sizing-06);
+                        height: var(--spacing-sizing-06);
+                    }
+                }
+            }
+
+            [data-content] {
+                display: flex;
+                padding: 0 var(--spacing-sizing-10);
+                font: var(--body-small);
+            }
+
+            &:first-of-type {
+                [data-line='before'] {
+                    visibility: hidden;
+                }
+            }
+
+            &:last-of-type {
+                [data-line='after'] {
+                    visibility: hidden;
+                }
+            }
+
+            &[data-status='complete'] {
+                [data-line] {
+                    background-color: var(--active-background-color);
+                }
+                [data-circle] {
+                    background-color: var(--active-background-color);
+                    border: 1px solid var(--active-background-color);
+                    color: var(--active-foreground-color);
+
+                    span {
+                        display: none;
+                    }
+                    svg {
+                        display: block;
+                    }
+                }
+            }
+
+            &[data-status='current'] {
+                [data-line='before'] {
+                    background-color: var(--active-background-color);
+                }
+
+                [data-circle] {
+                    border-color: var(--active-background-color);
+                }
+            }
+        }
+    }
+
+    &[data-variant='vertical'] {
+        ol {
+            flex-direction: column;
+        }
+
+        li {
+            flex-direction: row;
+
+            [data-line-circle] {
+                flex-direction: column;
+                width: var(--circle-width);
+
+                [data-line] {
+                    width: 2px;
+                    height: auto;
+                }
+            }
+            [data-content] {
+                flex-direction: column;
+                padding: var(--spacing-sizing-10) 0;
+            }
+        }
+    }
+
+    &[data-variant='widget'] {
+        --circle-width: var(--spacing-sizing-05);
+
+        label {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sizing-02);
+            margin-bottom: var(--spacing-sizing-03);
+            font: var(--body-small);
+
+            [data-title] {
+                font: var(--labels-base);
+                color: var(--foreground-neutral-on-surface);
+            }
+
+            [data-subtitle] {
+                font: var(--body-x-small);
+                color: var(--foreground-neutral-on-surface-variant-02);
+            }
+        }
+
+        ol {
+            align-items: center;
+            min-height: var(--spacing-sizing-09);
+
+            li {
+                [data-line-circle] {
+                    [data-line] {
+                        width: 10px;
+                    }
+                }
+
+                &[data-status='current'] {
+                    --circle-width: var(--spacing-sizing-09);
+                }
+
+                &[data-status='incomplete'] {
+                    [data-circle] {
+                        span {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */