@bspk/ui 1.1.32 → 1.1.33

package/dist/components/Popover/PopoverExample.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../Button';
+export const PopoverExample = ({ action }) => ({
+    render: ({ props, Component }) => {
+        return (_jsx(_Fragment, { children: _jsx(Component, { ...props, children: _jsx(Button, { label: `Click me (${props.placement})`, variant: "secondary" }) }) }));
+    },
+    presets: [
+        {
+            label: 'With CallToAction',
+            propState: {
+                callToAction: {
+                    label: 'Click me',
+                    onClick: () => action('Call to action clicked!'),
+                },
+            },
+        },
+    ],
+});
+//# sourceMappingURL=PopoverExample.js.map

package/dist/components/Popover/PopoverExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,4BACI,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,MAAM,IAAC,KAAK,EAAE,aAAa,KAAK,CAAC,SAAS,GAAG,EAAE,OAAO,EAAC,WAAW,GAAG,GAC9D,GACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}

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

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

package/dist/components/Popover/index.js

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

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

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

package/dist/components/Popover/popover.css

@@ -0,0 +1,87 @@
+[data-bspk=popover] {
+  position: absolute;
+  z-index: var(--z-index-tooltip-popover);
+  background: var(--surface-neutral-t1-base);
+  box-shadow: var(--drop-shadow-float);
+  padding: var(--spacing-sizing-04);
+  width: 300px;
+  border-radius: var(--radius-large);
+  display: flex;
+  flex-direction: column;
+  --arrow-size: var(--spacing-sizing-02);
+  --arrow-offset: calc(var(--arrow-size) * -2);
+  --arrow-background-color: var(--surface-neutral-t1-base);
+}
+[data-bspk=popover] header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=popover] header 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-06);
+  width: var(--spacing-sizing-06);
+}
+[data-bspk=popover] header button svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=popover] [data-arrow] {
+  z-index: 1;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
+  border-color: transparent;
+}
+[data-bspk=popover][data-placement^=top] [data-arrow] {
+  bottom: var(--arrow-offset);
+  border-top-color: var(--arrow-background-color);
+  filter: drop-shadow(0 2px 1px var(--shadow-10));
+}
+[data-bspk=popover][data-placement^=right] [data-arrow] {
+  margin-left: calc(var(--arrow-offset) * 2);
+  border-right-color: var(--arrow-background-color);
+  filter: drop-shadow(-2px 0 1px var(--shadow-10));
+}
+[data-bspk=popover][data-placement^=bottom] [data-arrow] {
+  top: var(--arrow-offset);
+  border-bottom-color: var(--arrow-background-color);
+  filter: drop-shadow(0 -2px 1px var(--shadow-10));
+}
+[data-bspk=popover][data-placement=bottom-start] [data-arrow] {
+  margin-left: var(--arrow-offset);
+}
+[data-bspk=popover][data-placement=bottom-end] [data-arrow] {
+  margin-left: calc(var(--arrow-offset) * -1);
+}
+[data-bspk=popover][data-placement^=left] [data-arrow] {
+  right: var(--arrow-offset);
+  border-left-color: var(--arrow-background-color);
+  filter: drop-shadow(2px 0 1px var(--shadow-10));
+}
+[data-bspk=popover] [data-content] {
+  gap: var(--spacing-sizing-04);
+  display: flex;
+  flex-direction: column;
+}
+[data-bspk=popover] [data-call-to-action] {
+  margin: 0 0 0 auto;
+  /* background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--spacing-sizing-03);
+  height: var(--spacing-sizing-12);
+  font: var(--labels-small);
+  color: var(--foreground-brand-primary); */
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Popover/popover.css.js

@@ -0,0 +1,93 @@
+/** * 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=popover] {
+  position: absolute;
+  z-index: var(--z-index-tooltip-popover);
+  background: var(--surface-neutral-t1-base);
+  box-shadow: var(--drop-shadow-float);
+  padding: var(--spacing-sizing-04);
+  width: 300px;
+  border-radius: var(--radius-large);
+  display: flex;
+  flex-direction: column;
+  --arrow-size: var(--spacing-sizing-02);
+  --arrow-offset: calc(var(--arrow-size) * -2);
+  --arrow-background-color: var(--surface-neutral-t1-base);
+}
+[data-bspk=popover] header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=popover] header 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-06);
+  width: var(--spacing-sizing-06);
+}
+[data-bspk=popover] header button svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=popover] [data-arrow] {
+  z-index: 1;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
+  border-color: transparent;
+}
+[data-bspk=popover][data-placement^=top] [data-arrow] {
+  bottom: var(--arrow-offset);
+  border-top-color: var(--arrow-background-color);
+  filter: drop-shadow(0 2px 1px var(--shadow-10));
+}
+[data-bspk=popover][data-placement^=right] [data-arrow] {
+  margin-left: calc(var(--arrow-offset) * 2);
+  border-right-color: var(--arrow-background-color);
+  filter: drop-shadow(-2px 0 1px var(--shadow-10));
+}
+[data-bspk=popover][data-placement^=bottom] [data-arrow] {
+  top: var(--arrow-offset);
+  border-bottom-color: var(--arrow-background-color);
+  filter: drop-shadow(0 -2px 1px var(--shadow-10));
+}
+[data-bspk=popover][data-placement=bottom-start] [data-arrow] {
+  margin-left: var(--arrow-offset);
+}
+[data-bspk=popover][data-placement=bottom-end] [data-arrow] {
+  margin-left: calc(var(--arrow-offset) * -1);
+}
+[data-bspk=popover][data-placement^=left] [data-arrow] {
+  right: var(--arrow-offset);
+  border-left-color: var(--arrow-background-color);
+  filter: drop-shadow(2px 0 1px var(--shadow-10));
+}
+[data-bspk=popover] [data-content] {
+  gap: var(--spacing-sizing-04);
+  display: flex;
+  flex-direction: column;
+}
+[data-bspk=popover] [data-call-to-action] {
+  margin: 0 0 0 auto;
+  /* background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--spacing-sizing-03);
+  height: var(--spacing-sizing-12);
+  font: var(--labels-small);
+  color: var(--foreground-brand-primary); */
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    /**
+     * The content to render in the portal.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The container to render the portal in.
+     *
+     * @optional
+     */
+    container?: HTMLElement;
+};
+/**
+ * Utility component to render children in the portals container provided by the BaseProvider.
+ *
+ * Initial SRR is supported.
+ *
+ * @name Portal
+ * @phase Utility
+ */
+declare function Portal({ children, container }: PortalProps): import("react").ReactPortal | null;
+declare namespace Portal {
+    var bspkName: string;
+}
+export { Portal };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Portal/Portal.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } 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
+ * @phase Utility
+ */
+function Portal({ children, container }) {
+    const [portalContainer, setPortalContainer] = useState(container || null);
+    useEffect(() => {
+        if (!portalContainer && typeof window !== 'undefined')
+            setPortalContainer(document.body);
+    }, [portalContainer]);
+    // data-bspk="portal" can't be used here
+    return portalContainer && createPortal(children, portalContainer);
+}
+Portal.bspkName = 'Portal';
+export { Portal };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+//# sourceMappingURL=Portal.js.map

package/dist/components/Portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;;GAOG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,sDAAsD"}

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

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

package/dist/components/Portal/index.js

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

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

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

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,50 @@
+import './progress-bar.scss';
+export type ProgressBarProps = {
+    /**
+     * The size of the progressbar.
+     *
+     * @default large
+     */
+    size?: 'large' | 'small';
+    /**
+     * The current progress of the progressbar.
+     *
+     * @example
+     *     42;
+     *
+     * @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.
+ *
+ * @example
+ *     import { ProgressBar } from '@bspk/ui/ProgressBar';
+ *
+ *     export function Example() {
+ *         return <ProgressBar label="Example label" completion={50} />;
+ *     }
+ *
+ * @name ProgressBar
+ * @phase DesignReview
+ */
+declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ProgressBar {
+    var bspkName: string;
+}
+export { ProgressBar };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cssWithVars } from '../../utils/cwv';
+import './progress-bar.css.js';
+/**
+ * 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.
+ *
+ * @example
+ *     import { ProgressBar } from '@bspk/ui/ProgressBar';
+ *
+ *     export function Example() {
+ *         return <ProgressBar label="Example label" completion={50} />;
+ *     }
+ *
+ * @name ProgressBar
+ * @phase DesignReview
+ */
+function ProgressBar({ size = 'large', completion = 0, align = 'center', label }) {
+    const id = useId();
+    return (_jsxs("div", { "data-align": align, "data-bspk": "progress-bar", "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: cssWithVars({ '--width': `${completion}%` }) }), _jsx("label", { htmlFor: id, children: label })] }));
+}
+ProgressBar.bspkName = 'ProgressBar';
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,qBAAqB,CAAC;AAgC7B;;;;;;;;;;;;;GAaG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC,GAAI,EACjF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

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

package/dist/components/ProgressBar/index.js

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

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

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

package/dist/components/ProgressBar/progress-bar.css

@@ -0,0 +1,39 @@
+[data-bspk=progress-bar] {
+  /*! --width: is set via inline style */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=progress-bar] progress {
+  opacity: 0;
+  position: absolute;
+}
+[data-bspk=progress-bar] [data-bar] {
+  width: 100%;
+  height: var(--spacing-sizing-02);
+  background-color: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-small);
+}
+[data-bspk=progress-bar] [data-bar]::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-bspk=progress-bar][data-size=small] [data-bar] {
+  height: var(--spacing-sizing-01);
+}
+[data-bspk=progress-bar] label {
+  font-size: var(--labels-small);
+  width: 100%;
+  text-align: center;
+}
+[data-bspk=progress-bar][data-align=left] label {
+  text-align: left;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressBar/progress-bar.css.js

@@ -0,0 +1,45 @@
+/** * 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=progress-bar] {
+  /*! --width: is set via inline style */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=progress-bar] progress {
+  opacity: 0;
+  position: absolute;
+}
+[data-bspk=progress-bar] [data-bar] {
+  width: 100%;
+  height: var(--spacing-sizing-02);
+  background-color: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-small);
+}
+[data-bspk=progress-bar] [data-bar]::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-bspk=progress-bar][data-size=small] [data-bar] {
+  height: var(--spacing-sizing-01);
+}
+[data-bspk=progress-bar] label {
+  font-size: var(--labels-small);
+  width: 100%;
+  text-align: center;
+}
+[data-bspk=progress-bar][data-align=left] label {
+  text-align: left;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -0,0 +1,39 @@
+import './progress-circle.scss';
+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.
+ *
+ * @example
+ *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
+ *
+ *     export function Example() {
+ *         return <ProgressCircle label="Example label" />;
+ *     }
+ *
+ * @name ProgressCircle
+ * @phase AccessibilityReview
+ */
+declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ProgressCircle {
+    var bspkName: string;
+    var SVG: (props: {
+        strokeWidth?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export { ProgressCircle };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-multi-comp */ import { useId } from 'react';
+import { Txt } from '../Txt';
+import './progress-circle.css.js';
+/**
+ * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
+ *
+ * @example
+ *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
+ *
+ *     export function Example() {
+ *         return <ProgressCircle label="Example label" />;
+ *     }
+ *
+ * @name ProgressCircle
+ * @phase AccessibilityReview
+ */
+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, "data-bspk": "progress-circle", "data-label-position": labelPosition, "data-size": size, role: "progressbar", children: [_jsx(ProgressCircle.SVG, {}), _jsx(Txt, { id: labelId, variant: variant, children: label || 'Loading ...' })] }));
+}
+ProgressCircle.bspkName = 'ProgressCircle';
+export { ProgressCircle };
+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;
+//# sourceMappingURL=ProgressCircle.js.map

package/dist/components/ProgressCircle/ProgressCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,wCAAwC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,wBAAwB,CAAC;AAmBhC;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC"}

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

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

package/dist/components/ProgressCircle/index.js

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

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

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

package/dist/components/ProgressCircle/progress-circle.css

@@ -0,0 +1,40 @@
+[data-bspk=progress-circle] {
+  --animation-speed: 1.5s;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=progress-circle][data-label-position=top] {
+  flex-direction: column-reverse;
+}
+[data-bspk=progress-circle][data-label-position=left] {
+  flex-direction: row-reverse;
+}
+[data-bspk=progress-circle][data-label-position=right] {
+  flex-direction: row;
+}
+[data-bspk=progress-circle] svg {
+  color: var(--foreground-brand-secondary);
+  animation: spin var(--animation-speed) linear infinite;
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+  0% {
+    transform: rotate(0deg);
+  }
+}
+[data-bspk=progress-circle][data-size=small] svg {
+  width: 32px;
+}
+[data-bspk=progress-circle][data-size=medium] svg {
+  width: 40px;
+}
+[data-bspk=progress-circle][data-size=large] svg {
+  width: 48px;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressCircle/progress-circle.css.js

@@ -0,0 +1,46 @@
+/** * 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=progress-circle] {
+  --animation-speed: 1.5s;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  align-items: center;
+  justify-content: center;
+}
+[data-bspk=progress-circle][data-label-position=top] {
+  flex-direction: column-reverse;
+}
+[data-bspk=progress-circle][data-label-position=left] {
+  flex-direction: row-reverse;
+}
+[data-bspk=progress-circle][data-label-position=right] {
+  flex-direction: row;
+}
+[data-bspk=progress-circle] svg {
+  color: var(--foreground-brand-secondary);
+  animation: spin var(--animation-speed) linear infinite;
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+  0% {
+    transform: rotate(0deg);
+  }
+}
+[data-bspk=progress-circle][data-size=small] svg {
+  width: 32px;
+}
+[data-bspk=progress-circle][data-size=medium] svg {
+  width: 40px;
+}
+[data-bspk=progress-circle][data-size=large] svg {
+  width: 48px;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+