@bspk/ui 1.2.0 → 1.3.1

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,63 @@
+import './carousel.scss';
+import { CSSProperties, ReactNode } from 'react';
+export type CarouselProps = {
+    /**
+     * A label for the carousel for screen readers.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The content of the carousel.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The width of each item/child.
+     *
+     * If number is provided, it is treated as pixels.
+     *
+     * If string is provided, it is treated as a CSS width value (%, px, em, rem, etc).
+     *
+     * If a percentage (%) is provided, the item is sized based on the carousel container's width
+     *
+     * @default 80%
+     *
+     * @type string
+     */
+    itemWidth?: number | string;
+    /**
+     * The gap between items in pixels.
+     *
+     * @default 16
+     */
+    gap?: number;
+    /** Additional styles to apply to the carousel container. */
+    style?: CSSProperties;
+};
+/**
+ * A carousel component for displaying a horizontal list of items with navigation controls.
+ *
+ * @example
+ *     import { Carousel } from '@bspk/ui/Carousel';
+ *
+ *     function Example() {
+ *         return (
+ *             <Carousel label="Example Carousel" width="1/2">
+ *                 <div>child 1</div>
+ *                 <div>child 2</div>
+ *                 <div>child 3</div>
+ *                 <div>child 4</div>
+ *                 <div>child 5</div>
+ *                 <div>child 6</div>
+ *                 <div>child 7</div>
+ *             </Carousel>
+ *         );
+ *     }
+ *
+ * @name Carousel
+ * @phase UXReview
+ */
+export declare function Carousel({ label, children, itemWidth: widthProp, gap: gapProp, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './carousel.css.js';
+import { SvgChevronLeft } from '@bspk/icons/ChevronLeft';
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { Children, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { PageControl } from '../PageControl';
+import { useSwipe } from '../../hooks/useSwipe';
+import { cssWithVars } from '../../utils/cwv';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+/**
+ * A carousel component for displaying a horizontal list of items with navigation controls.
+ *
+ * @example
+ *     import { Carousel } from '@bspk/ui/Carousel';
+ *
+ *     function Example() {
+ *         return (
+ *             <Carousel label="Example Carousel" width="1/2">
+ *                 <div>child 1</div>
+ *                 <div>child 2</div>
+ *                 <div>child 3</div>
+ *                 <div>child 4</div>
+ *                 <div>child 5</div>
+ *                 <div>child 6</div>
+ *                 <div>child 7</div>
+ *             </Carousel>
+ *         );
+ *     }
+ *
+ * @name Carousel
+ * @phase UXReview
+ */
+export function Carousel({ label = 'carousel', children, itemWidth: widthProp = '80%', gap: gapProp, style, }) {
+    const gap = gapProp || 16;
+    const widthValue = typeof widthProp === 'number' ? `${widthProp}px` : widthProp;
+    const containerRef = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const { items, total } = useMemo(() => {
+        const nextItems = Children.toArray(children);
+        return {
+            items: nextItems,
+            total: nextItems.length,
+        };
+    }, [children]);
+    const setCurrent = (dir) => () => {
+        setCurrentIndex((prev) => {
+            const nextVal = Math.max(0, Math.min(total - 1, dir === 'next' ? prev + 1 : prev - 1));
+            const nextElement = containerRef.current?.children[nextVal];
+            nextElement?.focus();
+            nextElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+            return nextVal;
+        });
+    };
+    const swipeProps = useSwipe(setCurrent('next'), setCurrent('prev'));
+    return (_jsxs("div", { "aria-label": label, "aria-roledescription": "carousel", "data-bspk": "carousel", role: "region", style: cssWithVars({
+            ...style,
+            '--gap': gap ? `${gap}px` : 'var(--spacing-sizing-04)',
+            '--item-width': widthValue,
+        }), children: [_jsx("div", { "data-items-container": true, children: _jsx("div", { "data-items-track": true, ...swipeProps, onKeyDownCapture: handleKeyDown({
+                        ArrowLeft: setCurrent('prev'),
+                        ArrowRight: setCurrent('next'),
+                    }, {
+                        preventDefault: true,
+                        stopPropagation: true,
+                    }), ref: (node) => (containerRef.current = node), children: items.map((child, index) => (_jsx("div", { "aria-label": `Slide ${index + 1} of ${total}`, "aria-roledescription": "slide", "data-active": currentIndex === index || undefined, "data-item-wrapper": true, role: "tabpanel", tabIndex: currentIndex === index ? 0 : -1, children: child }, index))) }) }), _jsxs("div", { "data-controls": true, children: [_jsx(Button, { "aria-label": "Previous Slide", disabled: currentIndex === 0, icon: _jsx(SvgChevronLeft, { "aria-hidden": true }), iconOnly: true, label: "Previous", onClick: setCurrent('prev'), variant: "tertiary" }), _jsx(PageControl, { currentPage: currentIndex + 1, numPages: total }), _jsx(Button, { "aria-label": "Next Slide", disabled: currentIndex === total - 1, icon: _jsx(SvgChevronRight, { "aria-hidden": true }), iconOnly: true, label: "Next", onClick: setCurrent('next'), variant: "tertiary" })] }), _jsx("span", { "aria-live": "polite", "data-sr-only": true, children: `Slide ${currentIndex + 1} of ${total}` })] }));
+}
+//# sourceMappingURL=Carousel.js.map

package/dist/components/Carousel/Carousel.js.map

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

package/dist/components/Carousel/CarouselExample.d.ts

@@ -0,0 +1,5 @@
+import { CarouselProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const CarouselExample: ComponentExampleFn<CarouselProps & {
+    slideCount: number;
+}>;

package/dist/components/Carousel/CarouselExample.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button';
+import { COLOR_VARIANTS } from '../../utils/colorVariants';
+function ExampleSlide({ number, onClick }) {
+    return (_jsxs("div", { "data-color": COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length], style: {
+            backgroundColor: 'var(--background)',
+            color: 'var(--foreground)',
+            borderRadius: '8px',
+            minHeight: '180px',
+            padding: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: ["Slide ", number, onClick && (_jsx(Button, { label: "Click me", onClick: () => onClick(`Slide ${number} clicked`), variant: "tertiary" }))] }));
+}
+export const CarouselExample = ({ action }) => {
+    return {
+        containerStyle: { width: '100%', padding: '16px', overflow: 'hidden' },
+        render: ({ props, Component }) => (_jsx(Component, { ...props, children: Array.from({ length: props.slideCount || 7 }, (_, i) => i + 1).map((num) => (_jsx(ExampleSlide, { number: num, onClick: action }, num))) })),
+        sections: [],
+        variants: false,
+        presets: [
+            {
+                label: 'Mobile',
+                propState: { style: { width: '375px' }, slideCount: 7, itemWidth: '90%' },
+            },
+            {
+                label: '300px Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '300px' },
+            },
+            {
+                label: 'Full Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '100%' },
+            },
+            {
+                label: '3/4 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '75%' },
+            },
+            {
+                label: '1/2 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '50%' },
+            },
+            {
+                label: '1/4 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '25%' },
+            },
+        ],
+    };
+};
+//# sourceMappingURL=CarouselExample.js.map

package/dist/components/Carousel/CarouselExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselExample.js","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAA2D;IAC9F,OAAO,CACH,6BACgB,cAAc,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,EAChE,KAAK,EAAE;YACH,eAAe,EAAE,mBAAmB;YACpC,KAAK,EAAE,mBAAmB;YAC1B,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,OAAO;YAClB,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SAC3B,uBAEM,MAAM,EACZ,OAAO,IAAI,CACR,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,MAAM,UAAU,CAAC,EAAE,OAAO,EAAC,UAAU,GAAG,CACpG,IACC,CACT,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAA+D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACtG,OAAO;QACH,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE;QACtE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzE,KAAC,YAAY,IAAW,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAjC,GAAG,CAAkC,CAC3D,CAAC,GACM,CACf;QACD,QAAQ,EAAE,EAAE;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE;YACL;gBACI,KAAK,EAAE,QAAQ;gBACf,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,aAAa;gBACpB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAEvE;aACJ;YACD;gBACI,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC"}

package/dist/components/Carousel/carousel.css

@@ -0,0 +1,34 @@
+[data-bspk=carousel] {
+  /*! 
+  --gap: is set via inline style
+  --item-width: is set via inline style
+  */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=carousel] [data-items-container] {
+  width: 100%;
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-items-track] {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  min-width: 0;
+}
+[data-bspk=carousel] [data-item-wrapper] {
+  min-width: var(--item-width);
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-controls] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Carousel/carousel.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=carousel] {
+  /*! 
+  --gap: is set via inline style
+  --item-width: is set via inline style
+  */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=carousel] [data-items-container] {
+  width: 100%;
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-items-track] {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  min-width: 0;
+}
+[data-bspk=carousel] [data-item-wrapper] {
+  min-width: var(--item-width);
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-controls] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/Carousel/index.js

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

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
+import './checkbox.scss';
 import { ChangeEvent } from 'react';
 import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
-import './checkbox.scss';
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> & FormFieldControlProps & RequiredCommonProps<'value'> & {
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly'> & FormFieldControlProps & RequiredCommonProps<'value'> & {
     /**
      * If the checkbox is partially checked or
      * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
@@ -55,5 +55,5 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' |
  * @name Checkbox
  * @phase UXReview
  */
-export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, readOnly, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
 import './checkbox.css.js';
+import { useEffect, useRef } from 'react';
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
  * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
@@ -32,7 +32,7 @@ import './checkbox.css.js';
  * @name Checkbox
  * @phase UXReview
  */
-export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
+export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, readOnly, ...props }) {
     const indeterminate = !!indeterminateProp;
     const checked = !!checkedProp && !indeterminate;
     const inputRef = useRef();
@@ -41,7 +41,7 @@ export function Checkbox({ checked: checkedProp = false, indeterminate: indeterm
             return;
         inputRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-describedby": props['aria-describedby'] || undefined, "aria-errormessage": props['aria-errormessage'] || undefined, "aria-invalid": invalid || undefined, checked: checked, "data-indeterminate": indeterminate || undefined, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
+    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-describedby": props['aria-describedby'] || undefined, "aria-errormessage": props['aria-errormessage'] || undefined, "aria-invalid": invalid || undefined, checked: checked, "data-indeterminate": indeterminate || undefined, disabled: disabled || readOnly || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), readOnly: readOnly, ref: (node) => {
                     if (!node)
                         return;
                     inputRef.current = node;

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,iBAAiB,CAAC;AA4BzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,QAAQ,IAAI,SAAS,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}

package/dist/components/Checkbox/checkbox.css

@@ -39,10 +39,10 @@
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):hover + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled], [readOnly]):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):active + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled], [readOnly]):active + span {
   background-color: var(--interactions-neutral-press-opacity);
 }
 [data-bspk=checkbox] input[type=checkbox]:checked + span,
@@ -50,21 +50,24 @@
   --stroke: var(--stroke-brand-primary);
   --background: var(--surface-brand-primary);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled {
-  pointer-events: none;
+[data-bspk=checkbox] input[type=checkbox][disabled],
+[data-bspk=checkbox] input[type=checkbox][readOnly] {
+  cursor: not-allowed;
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled + span {
+[data-bspk=checkbox] input[type=checkbox][disabled] + span,
+[data-bspk=checkbox] input[type=checkbox][readOnly] + span {
   --stroke: var(--stroke-neutral-interactions-disabled-light);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked, :indeterminate) + span {
+[data-bspk=checkbox] input[type=checkbox][disabled]:is(:checked, :indeterminate) + span,
+[data-bspk=checkbox] input[type=checkbox][readOnly]:is(:checked, :indeterminate) + span {
   --stroke: transparent;
   --background: var(--interactions-disabled-opacity);
   --color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled], [readOnly]):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled], [readOnly]):indeterminate + span {
   --background: var(--status-error);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled) + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled], [readOnly]) + span {
   --stroke: var(--status-error);
 }
 

package/dist/components/Checkbox/checkbox.css.js

@@ -42,10 +42,10 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):hover + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled], [readOnly]):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):active + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled], [readOnly]):active + span {
   background-color: var(--interactions-neutral-press-opacity);
 }
 [data-bspk=checkbox] input[type=checkbox]:checked + span,
@@ -53,21 +53,24 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
   --stroke: var(--stroke-brand-primary);
   --background: var(--surface-brand-primary);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled {
-  pointer-events: none;
+[data-bspk=checkbox] input[type=checkbox][disabled],
+[data-bspk=checkbox] input[type=checkbox][readOnly] {
+  cursor: not-allowed;
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled + span {
+[data-bspk=checkbox] input[type=checkbox][disabled] + span,
+[data-bspk=checkbox] input[type=checkbox][readOnly] + span {
   --stroke: var(--stroke-neutral-interactions-disabled-light);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked, :indeterminate) + span {
+[data-bspk=checkbox] input[type=checkbox][disabled]:is(:checked, :indeterminate) + span,
+[data-bspk=checkbox] input[type=checkbox][readOnly]:is(:checked, :indeterminate) + span {
   --stroke: transparent;
   --background: var(--interactions-disabled-opacity);
   --color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled], [readOnly]):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled], [readOnly]):indeterminate + span {
   --background: var(--status-error);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled) + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled], [readOnly]) + span {
   --stroke: var(--status-error);
 }
 

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -31,7 +31,7 @@ import { ToggleOption } from '../ToggleOption';
  * @phase UXReview
  */
 export function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, disabled: disabledGroup = false, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }) {
-    return (_jsxs("div", { ...props, "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabledGroup, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), readOnly: readOnly, value: "all" }) }) })), options.map(({ label, description, value, disabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || disabledGroup, label: label, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), disabled: disabled || disabledGroup, name: name, onChange: (checked) => {
+    return (_jsxs("div", { ...props, "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', readOnly: readOnly, children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabledGroup, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), readOnly: readOnly, value: "all" }) }) })), options.map(({ label, description, value, disabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || disabledGroup, label: label, readOnly: readOnly, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), disabled: disabled || disabledGroup, name: name, onChange: (checked) => {
                         onChange(checked ? [...values, value] : values.filter((v) => v !== value));
                     }, readOnly: readOnly, value: value }) }, value)))] }));
 }

package/dist/components/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAqD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBACQ,KAAK,sBACS,gBAAgB,IAAI,eAAe,IAAI,SAAS,eACxD,gBAAgB,EAC1B,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,iBAChD,oBAAoB,EAChC,QAAQ,EAAE,aAAa,EACvB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACtD,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,IAAI,aAAa,EAAc,KAAK,EAAE,KAAK,YACjG,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAE,QAAQ,IAAI,aAAa,EACnC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,IAX4E,KAAK,CAYxE,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAqD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBACQ,KAAK,sBACS,gBAAgB,IAAI,eAAe,IAAI,SAAS,eACxD,gBAAgB,EAC1B,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,EAAE,QAAQ,EAAE,QAAQ,YACnE,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,iBAChD,oBAAoB,EAChC,QAAQ,EAAE,aAAa,EACvB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACtD,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,aAAa,EAEnC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,YAElB,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAE,QAAQ,IAAI,aAAa,EACnC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,IAdG,KAAK,CAeC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/CheckboxGroup/CheckboxGroupExample.d.ts

@@ -1,3 +1,4 @@
 import { CheckboxGroupProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<CheckboxGroupProps>[];
 export declare const CheckboxGroupExample: ComponentExample<CheckboxGroupProps>;

package/dist/components/CheckboxGroup/CheckboxGroupExample.js

@@ -1,47 +1,54 @@
-export const CheckboxGroupExample = {
-    presets: [
-        {
-            label: 'With Descriptions',
-            propState: {
-                disabled: false,
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    {
-                        label: 'Option 2',
-                        value: 'option2',
-                        description: 'Description for option 2 (disabled)',
-                        disabled: true,
-                    },
-                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
-                ],
-            },
+export const presets = [
+    {
+        label: 'With Descriptions',
+        propState: {
+            disabled: false,
+            options: [
+                { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                {
+                    label: 'Option 2',
+                    value: 'option2',
+                    description: 'Description for option 2 (disabled)',
+                    disabled: true,
+                },
+                { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-        {
-            label: 'Group disabled',
-            propState: {
-                disabled: true,
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    {
-                        label: 'Option 2',
-                        value: 'option2',
-                        description: 'Description for option 2 (disabled)',
-                    },
-                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
-                ],
-            },
+    },
+    {
+        label: 'Group disabled',
+        propState: {
+            disabled: true,
+            options: [
+                { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                {
+                    label: 'Option 2',
+                    value: 'option2',
+                    description: 'Description for option 2 (disabled)',
+                },
+                { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-        {
-            label: 'Long labels',
-            propState: {
-                disabled: false,
-                options: [
-                    { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
-                    { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
-                    { label: 'This is a very long label for option 3', value: 'option3' },
-                ],
-            },
+    },
+    {
+        label: 'Long labels',
+        propState: {
+            disabled: false,
+            options: [
+                { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
+                { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
+                { label: 'This is a very long label for option 3', value: 'option3' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-    ],
+    },
+];
+export const CheckboxGroupExample = {
+    presets,
 };
 //# sourceMappingURL=CheckboxGroupExample.js.map

package/dist/components/CheckboxGroup/CheckboxGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF;wBACI,KAAK,EAAE,UAAU;wBACjB,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,qCAAqC;wBAClD,QAAQ,EAAE,IAAI;qBACjB;oBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF;wBACI,KAAK,EAAE,UAAU;wBACjB,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,qCAAqC;qBACrD;oBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;iBACxE;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAiC;IACjD;QACI,KAAK,EAAE,mBAAmB;QAC1B,SAAS,EAAE;YACP,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;oBAClD,QAAQ,EAAE,IAAI;iBACjB;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;iBACrD;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;aACxE;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO;CACV,CAAC"}

package/dist/components/CheckboxOption/CheckboxOption.d.ts

@@ -29,5 +29,5 @@ export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
  * @name CheckboxOption
  * @phase UXReview
  */
-export declare function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export declare function CheckboxOption({ label: labelProp, description, disabled, readOnly, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxOption/CheckboxOption.js

@@ -29,9 +29,9 @@ import { ToggleOption } from '../ToggleOption';
  * @name CheckboxOption
  * @phase UXReview
  */
-export function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }) {
+export function CheckboxOption({ label: labelProp, description, disabled, readOnly, ...checkboxProps }) {
     const label = labelProp || description;
     const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel }) })));
+    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, readOnly: readOnly, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel, disabled: disabled, readOnly: readOnly }) })));
 }
 //# sourceMappingURL=CheckboxOption.js.map

package/dist/components/CheckboxOption/CheckboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAuB;IAC7G,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAChG,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,GAAI,GAC3C,CAClB,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,aAAa,EACE;IAClB,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBACC,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,YAElB,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACnF,CAClB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/ChipAssist/ChipAssistExample.d.ts

@@ -1,3 +1,4 @@
 import { ChipAssistProps } from '.';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+export declare const presets: Preset<ChipAssistProps>[];
 export declare const ChipAssistExample: ComponentExampleFn<ChipAssistProps>;