@bspk/ui 1.0.0

package/Portal.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * Utility component to render children in the portals container provided by the BaseProvider.
+ *
+ * Initial SRR is supported.
+ *
+ * @name Portal
+ */
+function Portal({ children, container }) {
+    const [portalContainer, setPortalContainer] = useState(container || null);
+    useEffect(() => {
+        if (!portalContainer && typeof window !== 'undefined')
+            setPortalContainer(document.body);
+    }, [portalContainer]);
+    return portalContainer && createPortal(children, portalContainer);
+}
+Portal.bspkName = 'Portal';
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { Portal };
+//# sourceMappingURL=Portal.js.map

package/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":["src/Portal.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAcA;;;;;;AAMG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe,EAAA;AAChD,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,YAAA,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7F,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAI3B;;;;"}

package/Profile.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { 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';
+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
+ */
+declare function Profile({ initials, color, size, icon, image, 'aria-label': ariaLabel, overflowCount, }: ProfileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Profile {
+    var bspkName: string;
+}
+export { Profile };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Profile.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+import { COLOR_VARIABLES } from './utils/colorVariants.js';
+
+const SIZE_VARIANTS = {
+    '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,
+};
+/**
+ * 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, }) {
+    const children = useMemo(() => {
+        if (initials)
+            return jsx("span", { "data-initials": true, children: initials });
+        if (icon)
+            return jsx("span", { "data-icon": true, children: icon });
+        if (image)
+            return jsx("img", { alt: ariaLabel, src: image });
+        if (overflowCount)
+            return jsxs("span", { "data-overflow-count": true, children: ["+", overflowCount] });
+        return null;
+    }, [ariaLabel, icon, image, initials, overflowCount]);
+    return (jsx(Fragment, { children: children && (jsx("div", { "aria-label": ariaLabel, css: style, "data-color": color, "data-profile": "", "data-size": size, children: children })) }));
+}
+Profile.bspkName = 'Profile';
+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});
+            }
+        `)};
+`;
+
+export { Profile, style };
+//# sourceMappingURL=Profile.js.map

package/Profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.js","sources":["src/Profile.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAkBA,MAAM,aAAa,GAA0D;IACzE,SAAS,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,EAAE,qBAAqB,EAAE;IACtE,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB,EAAE;IAChE,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,qBAAqB,EAAE;IAChE,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB,EAAE;IAChE,SAAS,EAAE,EAAE,IAAI,EAAE,6BAA6B,EAAE,MAAM,EAAE,qBAAqB,EAAE;IACjF,UAAU,EAAE,EAAE,IAAI,EAAE,8BAA8B,EAAE,MAAM,EAAE,qBAAqB,EAAE;IACnF,WAAW,EAAE,EAAE,IAAI,EAAE,iCAAiC,EAAE,MAAM,EAAE,qBAAqB,EAAE;IACvF,YAAY,EAAE,EAAE,IAAI,EAAE,kCAAkC,EAAE,MAAM,EAAE,qBAAqB,EAAE;IACzF,aAAa,EAAE,EAAE,IAAI,EAAE,iCAAiC,EAAE,MAAM,EAAE,qBAAqB,EAAE;CAC5F,CAAC;AAyBF;;;;;;;AAOG;AACH,SAAS,OAAO,CAAC,EACb,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,GACF,EAAA;AACX,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAK;AAC1B,QAAA,IAAI,QAAQ;YAAE,OAAOA,GAAA,CAAA,MAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAqB,QAAQ,EAAA,CAAQ,CAAC;AAC3D,QAAA,IAAI,IAAI;YAAE,OAAOA,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAiB,IAAI,EAAA,CAAQ,CAAC;AAC/C,QAAA,IAAI,KAAK;YAAE,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAA,CAAI,CAAC;AACtD,QAAA,IAAI,aAAa;YAAE,OAAOC,IAAA,CAAA,MAAA,EAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAA4B,aAAa,CAAA,EAAA,CAAQ,CAAC;AAC5E,QAAA,OAAO,IAAI,CAAC;AAChB,KAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAEtD,QACID,0BACK,QAAQ,KACLA,GAAiB,CAAA,KAAA,EAAA,EAAA,YAAA,EAAA,SAAS,EAAE,GAAG,EAAE,KAAK,gBAAc,KAAK,EAAA,cAAA,EAAe,EAAE,EAAA,WAAA,EAAY,IAAI,EAAA,QAAA,EACrF,QAAQ,EACP,CAAA,CACT,EACF,CAAA,EACL;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAItB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BlB,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAC/B,CAAC,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,GAAG,CAAA,CAAA;2BACjB,OAAO,CAAA;gCACF,MAAM,CAAA;8BACR,IAAI,CAAA;;SAEzB,CACJ,CAAA;;MAEC,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,GAAG,CACjC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,GAAG,CAAA,CAAA;4BACvB,OAAO,CAAA;oCACC,UAAU,CAAA;oCACV,OAAO,CAAA;;SAElC,CACJ,CAAA;;;;;"}

package/ProgressBar.d.ts

@@ -0,0 +1,38 @@
+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
+ */
+declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace ProgressBar {
+    var bspkName: string;
+}
+export { ProgressBar };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/ProgressBar.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useId } from 'react';
+
+/**
+ * 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 }) {
+    const id = useId();
+    return (jsxs("div", { css: style, "data-align": align, "data-progress-bar": true, "data-size": size, children: [jsxs("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, children: [completion, "%"] }), jsx("div", { "aria-hidden": true, "data-bar": true, style: { '--width': `${completion}%` } }), jsx("label", { htmlFor: id, children: label })] }));
+}
+ProgressBar.bspkName = 'ProgressBar';
+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;
+    }
+`;
+
+export { ProgressBar, style };
+//# sourceMappingURL=ProgressBar.js.map

package/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["src/ProgressBar.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AA6BA;;;;;AAKG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB,EAAA;AAC9F,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAc,YAAA,EAAA,KAAK,EAA+B,mBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAI,EACjE,QAAA,EAAA,CAAAA,IAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EACe,UAAU,GAAG,GAAG,EAAA,YAAA,EAChB,sCAAsC,EAAA,eAAA,EAClC,GAAG,EAAA,eAAA,EACH,CAAC,EAAA,eAAA,EACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,EAAA,QAAA,EAAA,CAEhB,UAAU,EAAA,GAAA,CAAA,EAAA,CACJ,EACXC,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAA0B,KAAK,EAAE,EAAE,SAAS,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,CAAG,EAAmB,EAAA,CAAI,EACrFA,GAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAS,CACjC,EAAA,CAAA,EACR;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAI9B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/ProgressCircle.d.ts

@@ -0,0 +1,31 @@
+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
+ */
+declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace ProgressCircle {
+    var bspkName: string;
+    var SVG: (props: {
+        strokeWidth?: number;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+}
+export { ProgressCircle };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/ProgressCircle.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useId } from 'react';
+import { Txt } from './Txt.js';
+
+const ANIMATION_SPEED = 1.5;
+/**
+ * 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' }) {
+    let variant = 'labels-base';
+    if (size === 'small')
+        variant = 'labels-small';
+    else if (size === 'large')
+        variant = 'labels-large';
+    const labelId = useId();
+    return (jsxs("div", { "aria-labelledby": labelId, css: style, "data-label-position": labelPosition, "data-progress-circle": true, "data-size": size, role: "progressbar", children: [jsx(ProgressCircle.SVG, {}), jsx(Txt, { id: labelId, variant: variant, children: label || 'Loading ...' })] }));
+}
+ProgressCircle.bspkName = 'ProgressCircle';
+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) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+    return (jsxs("svg", { ...props, "data-animated": true, fill: "none", viewBox: `0 0 ${width * 2} ${width * 2}`, children: [jsxs("defs", { children: [jsxs("linearGradient", { id: `${id}spinner-secondHalf`, children: [jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] }), jsxs("linearGradient", { id: `${id}spinner-firstHalf`, children: [jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 1 }), jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] })] }), jsxs("g", { strokeWidth: strokeWidth * 2, children: [jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`, stroke: `url(#${id}spinner-secondHalf)` }), jsx("path", { d: `M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`, stroke: `url(#${id}spinner-firstHalf)` }), jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`, stroke: "currentColor", strokeLinecap: "round" })] })] }));
+};
+ProgressCircle.SVG = ProgressCircleSVG;
+
+export { ProgressCircle, style };
+//# sourceMappingURL=ProgressCircle.js.map

package/ProgressCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.js","sources":["src/ProgressCircle.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ProgressionStepper.d.ts

@@ -0,0 +1,66 @@
+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
+ */
+declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace ProgressionStepper {
+    var bspkName: string;
+}
+export { ProgressionStepper };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/ProgressionStepper.js

@@ -0,0 +1,197 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { SvgCheck } from '@bspk/icons/Check';
+import { css } from '@emotion/react';
+
+/**
+ * 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 }) {
+    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
+    return (jsxs("div", { ...containerProps, css: style, "data-progress-stepper": "", "data-variant": variant, children: [variant === 'widget' && (jsxs("label", { children: [jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (jsxs(Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
+                    const stepNum = index + 1;
+                    let status = 'incomplete';
+                    if (stepNum < currentStep)
+                        status = 'complete';
+                    else if (stepNum === currentStep)
+                        status = 'current';
+                    return (jsxs("li", { "data-status": status, "data-step": stepNum, children: [jsxs("span", { "aria-hidden": true, "data-line-circle": true, children: [jsx("span", { "data-line": "before" }), jsxs("span", { "data-circle": true, children: [jsx("span", { children: stepNum }), status === 'complete' && jsx(SvgCheck, {})] }), jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (jsxs("span", { "data-content": true, children: [jsx("span", { "data-name": true, children: name }), subtext && jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
+                }) })] }));
+}
+ProgressionStepper.bspkName = 'ProgressionStepper';
+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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export { ProgressionStepper, style };
+//# sourceMappingURL=ProgressionStepper.js.map

package/ProgressionStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressionStepper.js","sources":["src/ProgressionStepper.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}