@bspk/ui 1.1.32 → 1.1.33

package/dist/components/ProgressionStepper/ProgressionStepper.d.ts

@@ -0,0 +1,81 @@
+import { ElementProps } from '../../index.js';
+import './progression-stepper.scss';
+/** 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.
+     *
+     * @example
+     *     [
+     *         { name: '[Name of step to proceed forward 1]' },
+     *         { name: '[Name of step to proceed forward 2]' },
+     *         { name: '[Name of step to proceed forward 3]' },
+     *     ];
+     *
+     * @type Array<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.
+ *
+ * @example
+ *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
+ *
+ *     export function Example() {
+ *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
+ *     }
+ *
+ * @name ProgressionStepper
+ * @phase Backlog
+ */
+declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ProgressionStepper {
+    var bspkName: string;
+}
+export { ProgressionStepper };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepper/ProgressionStepper.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgCheck } from '@bspk/icons/Check';
+import './progression-stepper.css.js';
+/**
+ * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
+ *
+ * @example
+ *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
+ *
+ *     export function Example() {
+ *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
+ *     }
+ *
+ * @name ProgressionStepper
+ * @phase Backlog
+ */
+function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
+    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
+    return !steps?.length ? null : (_jsxs("div", { ...containerProps, "data-bspk": "progression-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';
+export { ProgressionStepper };
+//# sourceMappingURL=ProgressionStepper.js.map

package/dist/components/ProgressionStepper/ProgressionStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,4BAA4B,CAAC;AA6DpC;;;;;;;;;;;;GAYG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/ProgressionStepper/ProgressionStepperExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExample } from '../../utils/demo';
+import { ProgressionStepperProps } from '.';
+export declare const ProgressionStepperExample: ComponentExample<ProgressionStepperProps>;

package/dist/components/ProgressionStepper/ProgressionStepperExample.js

@@ -0,0 +1,50 @@
+export const ProgressionStepperExample = {
+    presets: [
+        {
+            label: 'Horizontal',
+            propState: {
+                variant: 'horizontal',
+                currentStep: 2,
+                steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
+            },
+        },
+        {
+            label: 'Vertical',
+            propState: {
+                variant: 'vertical',
+                currentStep: 2,
+                steps: [
+                    {
+                        name: 'Name of step 1',
+                        subtext: `Subtext of step 1`,
+                    },
+                    {
+                        name: 'Name of step 2',
+                        subtext: `Subtext of step 2`,
+                    },
+                    {
+                        name: 'Name of step 3',
+                        subtext: `Subtext of step 3`,
+                    },
+                ],
+            },
+        },
+        {
+            label: 'Widget',
+            propState: {
+                variant: 'widget',
+                currentStep: 2,
+                steps: [
+                    { name: 'Name of step 1' },
+                    { name: 'Name of step 2' },
+                    { name: 'Name of step 3' },
+                    { name: 'Name of step 4' },
+                    { name: 'Name of step 5' },
+                    { name: 'Name of step 6' },
+                    { name: 'Name of step 7' },
+                ],
+            },
+        },
+    ],
+};
+//# sourceMappingURL=ProgressionStepperExample.js.map

package/dist/components/ProgressionStepper/ProgressionStepperExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressionStepperExample.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepperExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,yBAAyB,GAA8C;IAChF,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE,YAAY;gBACrB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;aAC9F;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;oBACD;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;oBACD;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;iBAC7B;aACJ;SACJ;KACJ;CACJ,CAAC"}

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

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

package/dist/components/ProgressionStepper/index.js

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

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

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

package/dist/components/ProgressionStepper/progression-stepper.css

@@ -0,0 +1,131 @@
+[data-bspk=progression-stepper] {
+  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);
+}
+[data-bspk=progression-stepper] ol {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+[data-bspk=progression-stepper] ol li {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] [data-line] {
+  background-color: var(--inactive-background-color);
+  height: 2px;
+  flex-grow: 1;
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] [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);
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] [data-circle] svg {
+  display: none;
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=progression-stepper] ol li [data-content] {
+  display: flex;
+  padding: 0 var(--spacing-sizing-10);
+  font: var(--body-small);
+}
+[data-bspk=progression-stepper] ol li:first-of-type [data-line=before] {
+  visibility: hidden;
+}
+[data-bspk=progression-stepper] ol li:last-of-type [data-line=after] {
+  visibility: hidden;
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-line] {
+  background-color: var(--active-background-color);
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] {
+  background-color: var(--active-background-color);
+  border: 1px solid var(--active-background-color);
+  color: var(--active-foreground-color);
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] span {
+  display: none;
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] svg {
+  display: block;
+}
+[data-bspk=progression-stepper] ol li[data-status=current] [data-line=before] {
+  background-color: var(--active-background-color);
+}
+[data-bspk=progression-stepper] ol li[data-status=current] [data-circle] {
+  border-color: var(--active-background-color);
+}
+[data-bspk=progression-stepper][data-variant=vertical] ol {
+  flex-direction: column;
+}
+[data-bspk=progression-stepper][data-variant=vertical] li {
+  flex-direction: row;
+}
+[data-bspk=progression-stepper][data-variant=vertical] li [data-line-circle] {
+  flex-direction: column;
+  width: var(--circle-width);
+}
+[data-bspk=progression-stepper][data-variant=vertical] li [data-line-circle] [data-line] {
+  width: 2px;
+  height: auto;
+}
+[data-bspk=progression-stepper][data-variant=vertical] li [data-content] {
+  flex-direction: column;
+  padding: var(--spacing-sizing-10) 0;
+}
+[data-bspk=progression-stepper][data-variant=widget] {
+  --circle-width: var(--spacing-sizing-05);
+}
+[data-bspk=progression-stepper][data-variant=widget] label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  margin-bottom: var(--spacing-sizing-03);
+  font: var(--body-small);
+}
+[data-bspk=progression-stepper][data-variant=widget] label [data-title] {
+  font: var(--labels-base);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=progression-stepper][data-variant=widget] label [data-subtitle] {
+  font: var(--body-x-small);
+  color: var(--foreground-neutral-on-surface-variant-02);
+}
+[data-bspk=progression-stepper][data-variant=widget] ol {
+  align-items: center;
+  min-height: var(--spacing-sizing-09);
+}
+[data-bspk=progression-stepper][data-variant=widget] ol li [data-line-circle] [data-line] {
+  width: 10px;
+}
+[data-bspk=progression-stepper][data-variant=widget] ol li[data-status=current] {
+  --circle-width: var(--spacing-sizing-09);
+}
+[data-bspk=progression-stepper][data-variant=widget] ol li[data-status=incomplete] [data-circle] span {
+  display: none;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepper/progression-stepper.css.js

@@ -0,0 +1,137 @@
+/** * 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=progression-stepper] {
+  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);
+}
+[data-bspk=progression-stepper] ol {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+[data-bspk=progression-stepper] ol li {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] [data-line] {
+  background-color: var(--inactive-background-color);
+  height: 2px;
+  flex-grow: 1;
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] [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);
+}
+[data-bspk=progression-stepper] ol li [data-line-circle] [data-circle] svg {
+  display: none;
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=progression-stepper] ol li [data-content] {
+  display: flex;
+  padding: 0 var(--spacing-sizing-10);
+  font: var(--body-small);
+}
+[data-bspk=progression-stepper] ol li:first-of-type [data-line=before] {
+  visibility: hidden;
+}
+[data-bspk=progression-stepper] ol li:last-of-type [data-line=after] {
+  visibility: hidden;
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-line] {
+  background-color: var(--active-background-color);
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] {
+  background-color: var(--active-background-color);
+  border: 1px solid var(--active-background-color);
+  color: var(--active-foreground-color);
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] span {
+  display: none;
+}
+[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] svg {
+  display: block;
+}
+[data-bspk=progression-stepper] ol li[data-status=current] [data-line=before] {
+  background-color: var(--active-background-color);
+}
+[data-bspk=progression-stepper] ol li[data-status=current] [data-circle] {
+  border-color: var(--active-background-color);
+}
+[data-bspk=progression-stepper][data-variant=vertical] ol {
+  flex-direction: column;
+}
+[data-bspk=progression-stepper][data-variant=vertical] li {
+  flex-direction: row;
+}
+[data-bspk=progression-stepper][data-variant=vertical] li [data-line-circle] {
+  flex-direction: column;
+  width: var(--circle-width);
+}
+[data-bspk=progression-stepper][data-variant=vertical] li [data-line-circle] [data-line] {
+  width: 2px;
+  height: auto;
+}
+[data-bspk=progression-stepper][data-variant=vertical] li [data-content] {
+  flex-direction: column;
+  padding: var(--spacing-sizing-10) 0;
+}
+[data-bspk=progression-stepper][data-variant=widget] {
+  --circle-width: var(--spacing-sizing-05);
+}
+[data-bspk=progression-stepper][data-variant=widget] label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  margin-bottom: var(--spacing-sizing-03);
+  font: var(--body-small);
+}
+[data-bspk=progression-stepper][data-variant=widget] label [data-title] {
+  font: var(--labels-base);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=progression-stepper][data-variant=widget] label [data-subtitle] {
+  font: var(--body-x-small);
+  color: var(--foreground-neutral-on-surface-variant-02);
+}
+[data-bspk=progression-stepper][data-variant=widget] ol {
+  align-items: center;
+  min-height: var(--spacing-sizing-09);
+}
+[data-bspk=progression-stepper][data-variant=widget] ol li [data-line-circle] [data-line] {
+  width: 10px;
+}
+[data-bspk=progression-stepper][data-variant=widget] ol li[data-status=current] {
+  --circle-width: var(--spacing-sizing-09);
+}
+[data-bspk=progression-stepper][data-variant=widget] ol li[data-status=incomplete] [data-circle] span {
+  display: none;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.d.ts

@@ -0,0 +1,42 @@
+import './progression-stepper-bar.scss';
+export type ProgressionStepperBarProps = {
+    /**
+     * The number of steps in the progress bar.
+     *
+     * @example
+     *     5;
+     *
+     * @minimum 2
+     * @maximum 10
+     * @required
+     */
+    stepCount: number;
+    /**
+     * The last step completed.
+     *
+     * @example
+     *     2;
+     *
+     * @default 0
+     * @minimum 0
+     */
+    stepCompleted?: number;
+    /**
+     * The size of the progress bar.
+     *
+     * @default large
+     */
+    size?: 'large' | 'small';
+};
+/**
+ * Component description coming soon.
+ *
+ * @name ProgressionStepperBar
+ * @phase DesignReview
+ */
+declare function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp, size, }: ProgressionStepperBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ProgressionStepperBar {
+    var bspkName: string;
+}
+export { ProgressionStepperBar };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cssWithVars } from '../../utils/cwv';
+import './progression-stepper-bar.css.js';
+/**
+ * Component description coming soon.
+ *
+ * @name ProgressionStepperBar
+ * @phase DesignReview
+ */
+function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp = 0, size = 'large', }) {
+    const stepCompleted = Math.min(stepCompletedProp, stepCount);
+    return (_jsxs("div", { "data-bspk": "progression-stepper-bar", "data-size": size, style: cssWithVars({ '--steps': stepCount }), children: [_jsx("div", { "data-steps": true, children: Array.from({ length: stepCount }, (_, i) => (_jsx("div", { "data-complete": i < stepCompleted || undefined, "data-step": i }, i))) }), _jsxs("label", { children: [stepCompleted, " of ", stepCount, " steps completed."] })] }));
+}
+ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
+export { ProgressionStepperBar };
+//# sourceMappingURL=ProgressionStepperBar.js.map

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepperBar/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAgCxC;;;;;GAKG;AACH,SAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,IAAI,GAAG,OAAO,GACW;IACzB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACH,4BAAe,yBAAyB,eAAY,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,aAClG,4CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,+BAAoB,CAAC,GAAG,aAAa,IAAI,SAAS,eAAa,CAAC,IAAO,CAAC,CAAI,CAC/E,CAAC,GACA,EACN,4BACK,aAAa,UAAM,SAAS,yBACzB,IACN,CACT,CAAC;AACN,CAAC;AAED,qBAAqB,CAAC,QAAQ,GAAG,uBAAuB,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

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

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

package/dist/components/ProgressionStepperBar/index.js

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

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

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

package/dist/components/ProgressionStepperBar/progression-stepper-bar.css

@@ -0,0 +1,33 @@
+[data-bspk=progression-stepper-bar] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=progression-stepper-bar][data-size=large] {
+  --height: var(--spacing-sizing-02);
+}
+[data-bspk=progression-stepper-bar][data-size=small] {
+  --height: var(--spacing-sizing-01);
+}
+[data-bspk=progression-stepper-bar] [data-steps] {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-sizing-01);
+  height: var(--height);
+}
+[data-bspk=progression-stepper-bar] [data-steps] [data-step] {
+  width: 100%;
+  height: var(--height);
+  min-width: var(--spacing-sizing-02);
+  border-radius: var(--radius-small);
+  background: var(--surface-neutral-t3-low);
+}
+[data-bspk=progression-stepper-bar] [data-steps] [data-step][data-complete] {
+  background: var(--surface-brand-primary);
+}
+[data-bspk=progression-stepper-bar] label {
+  font: var(--labels-small);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepperBar/progression-stepper-bar.css.js

@@ -0,0 +1,39 @@
+/** * 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=progression-stepper-bar] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=progression-stepper-bar][data-size=large] {
+  --height: var(--spacing-sizing-02);
+}
+[data-bspk=progression-stepper-bar][data-size=small] {
+  --height: var(--spacing-sizing-01);
+}
+[data-bspk=progression-stepper-bar] [data-steps] {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-sizing-01);
+  height: var(--height);
+}
+[data-bspk=progression-stepper-bar] [data-steps] [data-step] {
+  width: 100%;
+  height: var(--height);
+  min-width: var(--spacing-sizing-02);
+  border-radius: var(--radius-small);
+  background: var(--surface-neutral-t3-low);
+}
+[data-bspk=progression-stepper-bar] [data-steps] [data-step][data-complete] {
+  background: var(--surface-brand-primary);
+}
+[data-bspk=progression-stepper-bar] label {
+  font: var(--labels-small);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent } from 'react';
+import { ElementProps, InvalidPropsLibrary, CommonProps } from '../../index.js';
+import './radio.scss';
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
+    /**
+     * Marks the radio as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
+/**
+ * A round control that allows user to choose one option from a set. This is the base element and if used directly you
+ * must wrap it with a label. This will more often be used in the RadioOption or RadioGroup component.
+ *
+ * @element
+ *
+ * @name Radio
+ * @phase Utility
+ */
+declare function Radio(props: ElementProps<RadioProps, 'input'>): import("react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var bspkName: string;
+}
+export { Radio };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Radio/Radio.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './radio.css.js';
+/**
+ * A round control that allows user to choose one option from a set. This is the base element and if used directly you
+ * must wrap it with a label. This will more often be used in the RadioOption or RadioGroup component.
+ *
+ * @element
+ *
+ * @name Radio
+ * @phase Utility
+ */
+function Radio(props) {
+    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
+    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-errormessage": errorMessage || undefined, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
+}
+Radio.bspkName = 'Radio';
+export { Radio };
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAmBtB;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,KAAwC;IACnD,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5F,OAAO,CACH,6BAAgB,OAAO,aACnB,mBACQ,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,uBACC,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAC5D,IAAI,EAAC,OAAO,GACd,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Radio/RadioExample.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '../../utils/demo';
+export declare const RadioExample: ComponentExample;