@bspk/ui 1.1.31 → 1.1.33

package/dist/Popover.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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:rgba(0,0,0,0)}[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}`);;
-import { SvgClose } from '@bspk/icons/Close';
-import { cloneElement, useId, useMemo, useRef, useState } from 'react';
-import { Button } from './Button';
-import { Portal } from './Portal';
-import { Txt } from './Txt';
-import { useFloating } from './hooks/useFloating';
-import { useOutsideClick } from './hooks/useOutsideClick';
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Popover } from '@bspk/ui/Popover';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         const [showPopover, setShowPopover] = useState<boolean>(false);
- *
- *         const togglePopover = () => setShowPopover(!showPopover);
- *         const onPopoverCallToActionClick = () => alert('Action clicked');
- *
- *         return (
- *             <Popover
- *                 placement="bottom"
- *                 content="This is a popover content"
- *                 header="Popover Header"
- *                 callToAction={{
- *                     label: 'Action',
- *                     onClick: onPopoverCallToActionClick,
- *                 }}
- *             >
- *                 <Button label="Toggle popover" onClick={togglePopover} />
- *             </Popover>
- *         );
- *     }
- *
- * @name Popover
- */
-function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }) {
-    const id = useId();
-    const [show, setShow] = useState(false);
-    const arrowRef = useRef(null);
-    const { elements, floatingStyles, middlewareData } = useFloating({
-        placement: placement,
-        strategy: 'absolute',
-        offsetOptions: 22,
-        arrowRef,
-        hide: !show,
-    });
-    useOutsideClick([elements.floating], () => setShow(false));
-    const child = useMemo(() => !disabled &&
-        children &&
-        cloneElement(children, {
-            onClick: () => setShow((prev) => !prev),
-            'aria-describedby': id,
-        }), [children, disabled, id]);
-    return disabled ? (children) : (_jsxs(_Fragment, { children: [child, _jsx(Portal, { children: _jsxs("div", { "data-bspk": "popover", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
-                        elements.setFloating(node);
-                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
-                    }, style: floatingStyles, children: [_jsxs("header", { children: [_jsx(Txt, { variant: "heading-h6", children: header }), _jsx("button", { "aria-label": "Close", onClick: () => setShow(false), children: _jsx(SvgClose, {}) })] }), _jsxs("div", { "data-content": true, children: [_jsx(Txt, { as: "div", variant: "body-small", children: content }), callToAction?.label && callToAction?.onClick && (_jsx(Button, { "data-call-to-action": true, label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "secondary" }))] }), _jsx("div", { "data-arrow": true, ref: (node) => {
-                                arrowRef.current = node;
-                            }, style: {
-                                left: `${middlewareData?.arrow?.x}px`,
-                                top: `${middlewareData?.arrow?.y}px`,
-                            } })] }) })] }));
-}
-Popover.bspkName = 'Popover';
-export { Popover };
-//# sourceMappingURL=Popover.js.map

package/dist/Popover.js.map

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

package/dist/Portal.d.ts

@@ -1,28 +0,0 @@
-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
- */
-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/Portal.js

@@ -1,22 +0,0 @@
-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
- */
-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/Portal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;GAMG;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/ProgressBar.d.ts

@@ -1,49 +0,0 @@
-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
- */
-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/ProgressBar.js

@@ -1,24 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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 .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}`);;
-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.
- *
- * @example
- *     import { ProgressBar } from '@bspk/ui/ProgressBar';
- *
- *     export function Example() {
- *         return <ProgressBar label="Example label" completion={50} />;
- *     }
- *
- * @name ProgressBar
- */
-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: { '--width': `${completion}%` } }), _jsx("label", { htmlFor: id, children: label })] }));
-}
-ProgressBar.bspkName = 'ProgressBar';
-export { ProgressBar };
-//# sourceMappingURL=ProgressBar.js.map

package/dist/ProgressBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AAgC7C;;;;;;;;;;;;GAYG;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,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAmB,GAAI,EACrF,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/ProgressCircle.d.ts

@@ -1,38 +0,0 @@
-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
- */
-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/ProgressCircle.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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}`);;
-/* eslint-disable react/no-multi-comp */
-import { useId } from 'react';
-import { Txt } from './Txt';
-/**
- * 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
- */
-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/ProgressCircle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../src/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,OAAO,wBAAwB,CAAC;AAChC,wCAAwC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAoB5B;;;;;;;;;;;GAWG;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/ProgressionStepper.d.ts

@@ -1,80 +0,0 @@
-import './progression-stepper.scss';
-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.
-     *
-     * @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
- */
-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/ProgressionStepper.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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}`);;
-import { SvgCheck } from '@bspk/icons/Check';
-/**
- * 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
- */
-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/ProgressionStepper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AA+D7C;;;;;;;;;;;GAWG;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/ProgressionStepperBar.d.ts

@@ -1,41 +0,0 @@
-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
- */
-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/ProgressionStepperBar.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[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)}`);;
-/**
- * Component description coming soon.
- *
- * @name ProgressionStepperBar
- */
-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: { '--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/ProgressionStepperBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../src/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,gCAAgC,CAAC;AAiCxC;;;;GAIG;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,EAAE,SAAS,EAAE,SAAS,EAAmB,aACtG,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/Radio.d.ts

@@ -1,31 +0,0 @@
-import './radio.scss';
-import { ChangeEvent } from 'react';
-import { ElementProps, InvalidPropsLibrary, CommonProps } from './';
-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
- */
-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/Radio.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=radio]{display:block;position:relative;width:var(--spacing-sizing-06);aspect-ratio:1/1;padding:2px}[data-bspk=radio] input[type=radio]{position:absolute;opacity:0;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}[data-bspk=radio] span{--stroke: var(--stroke-neutral-base);--inner: var(--foreground-brand-primary);--background: none;position:relative;z-index:1;box-sizing:border-box;display:flex;width:var(--spacing-sizing-05);aspect-ratio:1/1;border-radius:50%;border:2px solid var(--stroke);align-items:center;flex-direction:column;justify-content:center;background:var(--background)}[data-bspk=radio] span::before{content:"";display:block;width:var(--spacing-sizing-03);aspect-ratio:1/1;background:var(--inner);border-radius:var(--radius-circular);opacity:0}[data-bspk=radio] input[type=radio]:not(:disabled):hover+span{--background: var(--interactions-neutral-hover-opacity)}[data-bspk=radio] input[type=radio]:not(:disabled):active+span{--background: var(--interactions-neutral-press-opacity)}[data-bspk=radio] input[type=radio]:not(:disabled)[data-invalid]+span{--stroke: var(--status-error);--inner: var(--status-error)}[data-bspk=radio] input[type=radio]:checked+span{--stroke: var(--stroke-brand-primary)}[data-bspk=radio] input[type=radio]:checked+span::before{opacity:1}[data-bspk=radio] input[type=radio]:disabled{pointer-events:none}[data-bspk=radio] input[type=radio]:disabled+span{--stroke: var(--stroke-neutral-interactions-disabled-light);--inner: var(--foreground-neutral-disabled-on-surface)}`);;
-/**
- * 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
- */
-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/Radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAsBtB;;;;;;;GAOG;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/RadioGroup.d.ts

@@ -1,93 +0,0 @@
-import './radio-group.scss';
-import { ToggleOptionProps } from './ToggleOption';
-import { ElementProps, CommonProps } from './';
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type RadioGroupProps = CommonProps<'name'> & {
-    /**
-     * The value of the control.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: string;
-    /**
-     * The function to call when the radios are changed.
-     *
-     * @example
-     *     (value) => setState({ value }),
-     *
-     * @required
-     */
-    onChange: (value: string) => void;
-    /**
-     * The options for the radios.
-     *
-     * @example
-     *     [
-     *         {
-     *             value: '1',
-     *             label: 'Option 1',
-     *         },
-     *         {
-     *             value: '2',
-     *             label: 'Option 2',
-     *             description: 'Description here',
-     *         },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<RadioGroupOption>
-     * @required
-     */
-    options: RadioGroupOption[];
-    /**
-     * The label of the radio group.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
-     *
-     * @default true
-     */
-    showLabel?: boolean;
-};
-/**
- * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @example
- *     import { useState } from 'react';
- *     import { RadioGroup } from '@bspk/ui/RadioGroup';
- *
- *     export function Example() {
- *         const [selectedOption, setSelectedOption] = useState<string>('1');
- *
- *         return (
- *             <RadioGroup
- *                 name="Example name"
- *                 onChange={(nextValue) => setSelectedOption(nextValue)}
- *                 options={[
- *                     {
- *                         value: '1',
- *                         label: 'Option 1',
- *                         description: 'Description here',
- *                     },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                 ]}
- *                 value={selectedOption}
- *             />
- *         );
- *     }
- *
- * @name RadioGroup
- */
-declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, showLabel, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioGroup {
-    var bspkName: string;
-}
-export { RadioGroup };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */