@bspk/ui 1.1.17 → 1.1.19

package/dist/Menu.d.ts

@@ -1,14 +1,14 @@
 import './menu.scss';
-import { ComponentProps, MouseEvent as ReactMouseEvent } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { ListItem } from './ListItem';
-import { CommonProps, ElementProps } from './';
+import { CommonProps, ElementProps, SetRef } from './';
 export declare const MIN_ITEM_COUNT = 3;
 export declare const MAX_ITEM_COUNT = 10;
 export declare function menuItemId(menuId: string, index: number): string;
 /** The props for the renderListItem function. Useful for customizing menu list items. */
-export type RenderListItemParams<M extends MenuItem> = Pick<MenuProps<M>, 'activeIndex' | 'isMulti' | 'selectedValues'> & {
+export type RenderListItemParams<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'activeIndex' | 'isMulti' | 'selectedValues'> & {
     index: number;
-    item: M;
+    item: T;
     menuId: string;
     selected: boolean;
     itemId?: string;
@@ -22,7 +22,7 @@ export type MenuItem = CommonProps<'disabled'> & {
     /** The unique id of the menu item. */
     id?: string;
 };
-export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled' | 'id'> & {
+export type MenuProps<T extends MenuItem = MenuItem> = CommonProps<'disabled' | 'id'> & {
     /**
      * The number of items to display in the menu
      *
@@ -34,17 +34,27 @@ export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled'
     /**
      * Content to display in the menu.
      *
-     * @type MenuItems
-     */
-    items?: Item[];
-    /** A ref to the inner div element. */
-    innerRef?: (node: HTMLElement | null) => void;
-    /**
-     * Message to display when no results are found
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *         { value: '4', label: 'Option 4' },
+     *         { value: '5', label: 'Option 5' },
+     *         { value: '6', label: 'Option 6' },
+     *         { value: '7', label: 'Option 7' },
+     *         { value: '8', label: 'Option 8' },
+     *         { value: '9', label: 'Option 9' },
+     *         { value: '10', label: 'Option 10' },
+     *     ];
      *
-     * @type multiline
+     * @type Array<MenuItem>
      */
-    noResultsMessage?: string;
+    items?: T[];
+    /** A ref to the inner div element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /** Message to display when no results are found */
+    noResultsMessage?: ReactNode;
     /** The index of the currently highlighted item. */
     activeIndex?: number;
     /** The values of the selected items */
@@ -56,29 +66,38 @@ export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled'
      * @param {RenderListItemParams} props
      * @returns {ComponentProps<typeof ListItem>}
      */
-    renderListItem?: (props: RenderListItemParams<Item>) => Partial<ComponentProps<typeof ListItem>>;
+    renderListItem?: (props: RenderListItemParams<T>) => Partial<ComponentProps<typeof ListItem>>;
     /**
      * Whether the menu allows multiple selections.
      *
      * @default false
      */
     isMulti?: boolean;
+    /**
+     * The label for the "Select All" option.
+     *
+     * Ignored if `isMulti` is false.
+     *
+     * If `isMulti` is `true`, defaults to "Select All". If a string, it will be used as the label. If false the select
+     * all option will not be rendered.
+     *
+     * @default false
+     */
+    selectAll?: boolean | string;
     /**
      * The function to call when the selected values change.
      *
-     * @type (selectedValues: String[], event: ChangeEvent) => void
-     * @param {string[]} selectedValues
-     * @param {ChangeEvent} event
-     * @returns {void}
+     * @example
+     *     (selectedValues, event) => setState({ selectedValues });
      */
-    onChange?: (selectedValues: string[], event?: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onChange?: (selectedValues: string[], event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 /**
  * A container housing a simple list of options presented to the user to select one option at a time.
  *
  * @name Menu
  */
-declare function Menu<Item extends MenuItem = MenuItem>({ itemCount: itemCountProp, items: itemsProp, noResultsMessage, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, renderListItem, isMulti, ...props }: ElementProps<MenuProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Menu({ itemCount: itemCountProp, items: itemsProp, noResultsMessage, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, renderListItem, isMulti, selectAll: selectAllProp, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace Menu {
     var bspkName: string;
 }

package/dist/Menu.js

@@ -1,12 +1,14 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-list-item]{min-height:var(--item-size);height:var(--item-size)}`);;
+styleAdd(`[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-bspk=list-item]{min-height:var(--item-size);height:var(--item-size)}[data-bspk=menu] [data-bspk=list-item][data-selected]{background-color:var(--surface-brand-primary-highlight)}`);;
 import { useMemo } from 'react';
 import { Checkbox } from './Checkbox';
 import { ListItem } from './ListItem';
-import { Txt } from './Txt';
 import { useId } from './hooks/useId';
+const DEFAULT = {
+    selectAll: 'Select All',
+};
 export const MIN_ITEM_COUNT = 3;
 export const MAX_ITEM_COUNT = 10;
 export function menuItemId(menuId, index) {
@@ -17,45 +19,65 @@ export function menuItemId(menuId, index) {
  *
  * @name Menu
  */
-function Menu({ itemCount: itemCountProp = 5, items: itemsProp = [], noResultsMessage, innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, renderListItem, isMulti, ...props }) {
+function Menu({ itemCount: itemCountProp = 5, items: itemsProp = [], noResultsMessage, innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, renderListItem, isMulti, selectAll: selectAllProp, ...props }) {
     const menuId = useId(idProp);
-    const items = Array.isArray(itemsProp) ? itemsProp : [];
-    const itemCount = useMemo(() => 
-    // Ensure itemCount is within the range of items.length
-    Math.min(items.length, 
-    // pin itemCountProp to a range of 3 to 10
-    Math.max(MIN_ITEM_COUNT, Math.min(itemCountProp, MAX_ITEM_COUNT))), [itemCountProp, items.length]);
-    return (_jsx("div", { ...props, "data-bspk": "menu", "data-disabled": disabled || undefined, "data-item-count": itemCount || undefined, "data-no-items": !items.length || undefined, id: menuId, ref: innerRef, role: "listbox", style: { ...props.style, '--item-count': itemCount }, children: items.length ? (items.map((item, index) => {
-            const itemId = item.id || menuItemId(menuId, index);
-            const selected = Array.isArray(selectedValues) && selectedValues.includes(item.value);
-            const renderProps = renderListItem?.({
-                activeIndex,
-                index,
-                item,
-                selectedValues,
-                isMulti,
-                menuId: menuId || '',
-                selected,
-                itemId,
-            });
-            return (_createElement(ListItem, { ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, "aria-selected": selected || undefined, as: "button", "data-menu-item": true, "data-selected": selected || undefined, disabled: item.disabled || undefined, id: itemId, key: itemId, label: renderProps?.label?.toString() || item.label?.toString(), onClick: (event) => {
-                    if (renderProps)
-                        renderProps?.onClick?.(event);
-                    if (onChange) {
-                        if (!isMulti) {
-                            onChange?.([item.value], event);
-                            return;
-                        }
-                        onChange(selected
-                            ? selectedValues.filter((value) => value !== item.value)
-                            : [...selectedValues, item.value], event);
-                    }
-                }, role: "option", tabIndex: -1, trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
-                        onChange?.(checked
-                            ? selectedValues.filter((value) => value !== item.value)
-                            : [...selectedValues, item.value]);
-                    }, value: item.value })) : (renderProps?.trailing) }));
-        })) : (_jsxs(_Fragment, { children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), _jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage })] })) }));
+    const selectAll = useMemo(() => {
+        if (!isMulti)
+            return false;
+        if (selectAllProp && typeof selectAllProp === 'string')
+            return selectAllProp;
+        return selectAllProp === true ? DEFAULT.selectAll : false;
+    }, [isMulti, selectAllProp]);
+    const { items, itemCount } = useMemo(() => {
+        const itemsNext = Array.isArray(itemsProp) ? itemsProp : [];
+        return {
+            items: itemsNext,
+            // Ensure itemCount is within the range of items.length
+            itemCount: Math.min(itemsNext.length, 
+            // pin itemCountProp to a range of 3 to 10
+            Math.max(MIN_ITEM_COUNT, Math.min(itemCountProp, MAX_ITEM_COUNT))),
+        };
+    }, [itemCountProp, itemsProp]);
+    const allSelected = useMemo(() => !!(items.length && items.every((item) => selectedValues.includes(item.value))), [items, selectedValues]);
+    return (_jsxs("div", { ...props, "aria-multiselectable": isMulti || undefined, "data-bspk": "menu", "data-disabled": disabled || undefined, "data-item-count": itemCount || undefined, "data-no-items": !items.length || undefined, id: menuId, ref: innerRef, role: "listbox", style: { ...props.style, '--item-count': itemCount }, children: [isMulti && selectAll && (_jsx(ListItem, { as: "button", "data-selected": allSelected || undefined, label: selectAll, onClick: (event) => {
+                    onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                }, role: "option", tabIndex: -1, trailing: _jsx(Checkbox, { "aria-label": selectAll, checked: !!allSelected, name: "", onChange: (checked) => {
+                        onChange?.(checked ? items.map((item) => item.value) : []);
+                    }, value: "" }) }, "select-all")), items.length
+                ? items.map((item, index) => {
+                    const itemId = item.id || menuItemId(menuId, index);
+                    const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+                    const renderProps = renderListItem?.({
+                        activeIndex,
+                        index,
+                        item,
+                        selectedValues,
+                        isMulti,
+                        menuId: menuId || '',
+                        selected,
+                        itemId,
+                    });
+                    return (_createElement(ListItem, { ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, "aria-selected": selected || undefined, as: "button", 
+                        //data-selected={selected || undefined}
+                        disabled: item.disabled || undefined, id: itemId, key: itemId, label: renderProps?.label?.toString() || item.label?.toString(), onClick: (event) => {
+                            if (renderProps)
+                                renderProps?.onClick?.(event);
+                            if (onChange) {
+                                if (!isMulti) {
+                                    onChange?.([item.value], event);
+                                    return;
+                                }
+                                onChange(selected
+                                    ? selectedValues.filter((value) => value !== item.value)
+                                    : [...selectedValues, item.value], event);
+                            }
+                        }, role: "option", tabIndex: -1, trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
+                                onChange?.(checked
+                                    ? selectedValues.filter((value) => value !== item.value)
+                                    : [...selectedValues, item.value]);
+                            }, value: item.value })) : (renderProps?.trailing) }));
+                })
+                : noResultsMessage] }));
 }
 Menu.bspkName = 'Menu';
 export { Menu };

package/dist/Menu.js.map

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

package/dist/NumberInput.d.ts

@@ -3,7 +3,11 @@ import { CommonProps, InvalidPropsLibrary } from '.';
 export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & {
     /** The value of the control. */
     value?: number;
-    /** Callback when the value changes. */
+    /**
+     * Callback when the value changes.
+     *
+     * @required
+     */
     onChange: (value: number | undefined) => void;
     /**
      * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.

package/dist/NumberInput.js

@@ -32,8 +32,9 @@ function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.si
     const inputId = useId(inputIdProp);
     const max = isNumber(maxProp);
     const min = isNumber(minProp);
-    const fix = (next = value) => {
-        if (typeof next !== 'number') {
+    const fix = (nextValue) => {
+        const next = isNumber(nextValue);
+        if (typeof next !== 'number' || isNaN(next)) {
             onChange(undefined);
             return;
         }
@@ -53,10 +54,11 @@ function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.si
         onChange: fix,
         value,
     };
-    return (_jsxs("div", { "aria-valuemax": max || undefined, "aria-valuemin": min || undefined, "data-bspk": "number-input", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && _jsx(IncrementButton, { ...buttonProps, increment: -1 }), _jsx("input", { "aria-label": ariaLabel, disabled: disabled, id: inputId, name: name, onBlur: () => {
-                    fix();
+    return (_jsxs("div", { "aria-valuemax": max || undefined, "aria-valuemin": min || undefined, "data-bspk": "number-input", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && _jsx(IncrementButton, { ...buttonProps, increment: -1 }), _jsx("input", { "aria-label": ariaLabel, disabled: disabled, id: inputId, max: max, min: min, name: name, onBlur: (event) => {
+                    // Fix the value on blur to ensure it is a valid number
+                    fix(event.target.value);
                 }, onChange: (event) => {
-                    onChange(event.target.value);
+                    onChange(isNumber(event.target.value));
                 }, readOnly: readOnly, type: "number", value: value }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { ...buttonProps, increment: -1 })] })), _jsx(IncrementButton, { ...buttonProps, increment: 1 })] }));
 }
 // eslint-disable-next-line react/no-multi-comp

package/dist/NumberInput.js.map

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

package/dist/Portal.d.ts

@@ -6,7 +6,11 @@ export type PortalProps = {
      * @required
      */
     children: ReactNode;
-    /** The container to render the portal in. */
+    /**
+     * The container to render the portal in.
+     *
+     * @optional
+     */
     container?: HTMLElement;
 };
 /**

package/dist/Portal.js.map

@@ -1 +1 @@
-{"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;AAazC;;;;;;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"}
+{"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

@@ -9,9 +9,13 @@ export type ProgressBarProps = {
     /**
      * The current progress of the progressbar.
      *
+     * @example
+     *     42;
+     *
      * @default 0
      * @minimum 0
      * @maximum 100
+     *
      * @required
      */
     completion: number;

package/dist/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AA4B7C;;;;;GAKG;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"}
+{"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;;;;;GAKG;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/ProgressionStepper.d.ts

@@ -29,7 +29,14 @@ export type ProgressionStepperProps = {
     /**
      * The steps to display in the progress bar.
      *
-     * @type ProgressionStepperItem[]
+     * @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[];
@@ -58,7 +65,7 @@ export type ProgressionStepperProps = {
  *
  * @name ProgressionStepper
  */
-declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ProgressionStepper {
     var bspkName: string;
 }

package/dist/ProgressionStepper.js

@@ -9,7 +9,7 @@ styleAdd(`[data-bspk=progression-stepper]{width:100%;--circle-width: var(--spaci
  */
 function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
     const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return (_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) => {
+    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)

package/dist/ProgressionStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AAuDpC;;;;GAIG;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,CACH,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"}
+{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AA8DpC;;;;GAIG;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

@@ -3,6 +3,9 @@ export type ProgressionStepperBarProps = {
     /**
      * The number of steps in the progress bar.
      *
+     * @example
+     *     5;
+     *
      * @minimum 2
      * @maximum 10
      * @required
@@ -11,6 +14,9 @@ export type ProgressionStepperBarProps = {
     /**
      * The last step completed.
      *
+     * @example
+     *     2;
+     *
      * @default 0
      * @minimum 0
      */

package/dist/ProgressionStepperBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../src/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,gCAAgC,CAAC;AA2BxC;;;;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"}
+{"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,6 +1,20 @@
 import './radio.scss';
-import { ToggleControlProps, ElementProps, InvalidPropsLibrary } from './';
-export type RadioProps = InvalidPropsLibrary & Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'name' | 'onChange' | 'value'>;
+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.

package/dist/Radio.js

@@ -10,8 +10,8 @@ styleAdd(`[data-bspk=radio]{display:block;position:relative;width:var(--spacing-
  * @name Radio
  */
 function Radio(props) {
-    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
-    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
+    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 };

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAMtB;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,KAAwC;IACnD,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACH,6BAAgB,OAAO,aACnB,mBACQ,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,kBACJ,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"}
+{"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,21 +1,44 @@
 import { ToggleOptionProps } from './ToggleOption';
 import { ElementProps, CommonProps } from './';
 export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type RadioGroupProps = CommonProps<'name' | '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.
      *
-     * @type RadioGroupOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1', description: 'Description here' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<RadioGroupOption>
      * @required
      */
     options: RadioGroupOption[];
-    /** The size of the radio group labels. */
+    /**
+     * The size of the radio group labels.
+     *
+     * @default base
+     */
     size?: 'base' | 'large' | 'small';
 };
 /**

package/dist/RadioGroup.js

@@ -6,9 +6,9 @@ import { ToggleOption } from './ToggleOption';
  *
  * @name RadioGroup
  */
-function RadioGroup({ onChange, options = [], name, value: groupValue, size, ...props }) {
-    return (_jsx("div", { ...props, "data-bspk": "radio-group", role: "radiogroup", style: { display: 'contents' }, children: options.map(({ label, description, value }) => {
-            return (_jsx(ToggleOption, { description: description, label: label, size: size, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, value));
+function RadioGroup({ onChange, options = [], name, value: groupValue, size = 'base', ...props }) {
+    return (_jsx("div", { ...props, "data-bspk": "radio-group", role: "radiogroup", style: { display: 'contents' }, children: options.map(({ label, description, value }, index) => {
+            return (_jsx(ToggleOption, { description: description, label: label, size: size, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
         }) }));
 }
 RadioGroup.bspkName = 'RadioGroup';

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAwBjE;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,EACJ,GAAG,KAAK,EAC2B;IACnC,OAAO,CACH,iBAAS,KAAK,eAAY,aAAa,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YACnF,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;YAC3C,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,YACxE,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAPuC,KAAK,CAQnC,CAClB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA+CjE;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,GAAG,MAAM,EACb,GAAG,KAAK,EAC2B;IACnC,OAAO,CACH,iBAAS,KAAK,eAAY,aAAa,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YACnF,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EAExB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,YAEV,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAVG,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAW3B,CAClB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/RadioOption.d.ts

@@ -1,7 +1,15 @@
+import { ChangeEvent } from 'react';
 import { RadioProps } from './Radio';
 import { ToggleOptionProps } from './ToggleOption';
 import { InvalidPropsLibrary } from '.';
-export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'> & {
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *

package/dist/RadioOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQjE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IAC3E,OAAO,CACH,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IAC3E,OAAO,CACH,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}