@bspk/ui 1.1.33 → 1.2.0

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

@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
-import { ElementProps, InvalidPropsLibrary, CommonProps } from '../../index.js';
+import { ElementProps, CommonProps } from '-/types/common';
 import './radio.scss';
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> & Required<CommonProps<'value'>> & {
     /**
      * Marks the radio as checked.
      *
@@ -24,9 +24,5 @@ export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> & Inval
  * @name Radio
  * @phase Utility
  */
-declare function Radio(props: ElementProps<RadioProps, 'input'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Radio {
-    var bspkName: string;
-}
-export { Radio };
+export declare function Radio(props: ElementProps<RadioProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Radio/Radio.js

@@ -9,10 +9,8 @@ import './radio.css.js';
  * @name Radio
  * @phase Utility
  */
-function Radio(props) {
-    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
-    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-errormessage": errorMessage || undefined, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
+export 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 })] }));
 }
-Radio.bspkName = 'Radio';
-export { Radio };
 //# sourceMappingURL=Radio.js.map

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

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

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

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

package/dist/components/Radio/radio.css

@@ -37,7 +37,7 @@
   width: var(--spacing-sizing-03);
   aspect-ratio: 1/1;
   background: var(--inner);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   opacity: 0;
 }
 [data-bspk=radio] input[type=radio]:not(:disabled):hover + span {

package/dist/components/Radio/radio.css.js

@@ -40,7 +40,7 @@ style.appendChild(document.createTextNode(`[data-bspk=radio] {
   width: var(--spacing-sizing-03);
   aspect-ratio: 1/1;
   background: var(--inner);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   opacity: 0;
 }
 [data-bspk=radio] input[type=radio]:not(:disabled):hover + span {
@@ -70,4 +70,3 @@ style.appendChild(document.createTextNode(`[data-bspk=radio] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,8 +1,8 @@
-import { ElementProps, CommonProps } from '../../index.js';
-import { ToggleOptionProps } from '../ToggleOption';
+import { RadioOptionProps } from '-/components/RadioOption';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 import './radio-group.scss';
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
+export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> & Required<CommonProps<'value'>>;
+export type RadioGroupProps = CommonProps<'disabled' | 'name'> & FormFieldControlProps & {
     /**
      * The value of the control.
      *
@@ -49,11 +49,11 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
      */
     label: string;
     /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+     * Hides the RadioGroup label. When label isn't showing it is used as the aria-label prop.
      *
-     * @default true
+     * @default false
      */
-    showLabel?: boolean;
+    hideLabel?: boolean;
 };
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
@@ -84,11 +84,7 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, showLabel, disabled, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioGroup {
-    var bspkName: string;
-}
-export { RadioGroup };
+export declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, hideLabel: hideLabelProp, disabled: disabledGroup, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import { Radio } from '../Radio';
-import { ToggleOption } from '../ToggleOption';
+import { RadioOption } from '../RadioOption';
+import { useId } from '../../hooks/useId';
 import './radio-group.css.js';
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
@@ -32,14 +31,12 @@ import './radio-group.css.js';
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function RadioGroup({ onChange, options = [], name, value: groupValue, label: groupLabel, showLabel = true, disabled, ...props }) {
+export function RadioGroup({ onChange, options = [], name, value: groupValue, label: groupLabel, hideLabel: hideLabelProp = false, disabled: disabledGroup = false, ...props }) {
     const id = `radio-group-${useId()}`;
-    return (_jsxs("div", { ...props, "aria-label": !showLabel ? groupLabel : undefined, "aria-labelledby": showLabel ? `${id}-label` : undefined, "data-bspk": "radio-group", "data-disabled": disabled || undefined, id: id, role: "group", children: [showLabel && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, value }, index) => {
-                    return (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, disabled: disabled, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
+    return (_jsxs("div", { ...props, "aria-describedby": props['aria-describedby'], "aria-errormessage": props['aria-errormessage'], "aria-label": hideLabelProp ? groupLabel : undefined, "aria-labelledby": !hideLabelProp ? `${id}-label` : undefined, "data-bspk": "radio-group", id: id, role: "radiogroup", children: [!hideLabelProp && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, disabled, value }, index) => {
+                    return (_jsx(RadioOption, { checked: groupValue === value, description: description, disabled: disabledGroup || disabled, label: label, name: name, onChange: (checked) => checked && onChange(value), value: value }, `radio-option-${value || index}`));
                 }) })] }));
 }
-RadioGroup.bspkName = 'RadioGroup';
-export { RadioGroup };
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,oBAAoB,CAAC;AA0D5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,gBACG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC5C,aAAa,mBACR,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EAC5D,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAClD,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAA0C,KAAK,EAAE,KAAK,YACxF,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IARuC,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAS/D,CAClB,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,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/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,oBAAoB,CAAC;AA4D5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,aAAa,GAAG,KAAK,EAChC,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,uBACxB,KAAK,CAAC,mBAAmB,CAAC,gBACjC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBACjC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eACjD,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,YAAY,aAEhB,CAAC,aAAa,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EACjE,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAC5D,OAAO,CACH,KAAC,WAAW,IACR,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,IAAI,QAAQ,EAEnC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,IAJP,gBAAgB,KAAK,IAAI,KAAK,EAAE,CAKvC,CACL,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/RadioGroup/RadioGroupExample.d.ts

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

package/dist/components/RadioGroup/RadioGroupExample.js

@@ -1,27 +1,7 @@
+import { CheckboxGroupExample } from '../CheckboxGroup/CheckboxGroupExample';
 import { RadioExample } from '../Radio/RadioExample';
 export const RadioGroupExample = {
     render: RadioExample.render,
-    presets: [
-        {
-            label: 'With Descriptions',
-            propState: {
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    { label: 'Option 2', value: 'option2', description: 'Description for option 2' },
-                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
-                ],
-            },
-        },
-        {
-            label: 'Long labels',
-            propState: {
-                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' },
-                ],
-            },
-        },
-    ],
+    presets: CheckboxGroupExample.presets,
 };
 //# sourceMappingURL=RadioGroupExample.js.map

package/dist/components/RadioGroup/RadioGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupExample.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroupExample.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAK/D,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,MAAM,EAAE,YAAY,CAAC,MAAM;IAC3B,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,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,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":"RadioGroupExample.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroupExample.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAG/D,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,MAAM,EAAE,YAAY,CAAC,MAAM;IAC3B,OAAO,EAAE,oBAAoB,CAAC,OAAuD;CACxF,CAAC"}

package/dist/components/RadioGroup/radio-group.css

@@ -3,5 +3,4 @@
   flex-direction: column;
   gap: var(--spacing-sizing-01);
   max-width: 100%;
-  overflow: hidden;
 }

package/dist/components/RadioGroup/radio-group.css.js

@@ -6,8 +6,6 @@ style.appendChild(document.createTextNode(`[data-bspk=radio-group] {
   flex-direction: column;
   gap: var(--spacing-sizing-01);
   max-width: 100%;
-  overflow: hidden;
 }
 `));
 document.head.appendChild(style);
-

package/dist/components/RadioOption/RadioOption.d.ts

@@ -1,15 +1,6 @@
-import { ChangeEvent } from 'react';
-import { InvalidPropsLibrary } from '../../index.js';
-import { RadioProps } from '../Radio';
-import { ToggleOptionProps } from '../ToggleOption';
-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;
-};
+import { RadioProps } from '-/components/Radio';
+import { ToggleOptionControlProps } from '-/components/ToggleOption';
+export type RadioOptionProps = ToggleOptionControlProps<RadioProps>;
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -18,9 +9,5 @@ export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked'
  * @name RadioOption
  * @phase Utility
  */
-declare function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace RadioOption {
-    var bspkName: string;
-}
-export { RadioOption };
+export declare function RadioOption({ label: labelProp, description, disabled, ...radioProps }: RadioOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/RadioOption/RadioOption.js

@@ -9,10 +9,9 @@ import { ToggleOption } from '../ToggleOption';
  * @name RadioOption
  * @phase Utility
  */
-function RadioOption({ label: labelProp, description, ...checkboxProps }) {
+export function RadioOption({ label: labelProp, description, disabled, ...radioProps }) {
     const label = labelProp || description;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, label: label, children: _jsx(Radio, { ...checkboxProps, "aria-label": label }) })));
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, disabled: disabled, label: label, children: _jsx(Radio, { ...radioProps, "aria-label": ariaLabel }) })));
 }
-RadioOption.bspkName = 'RadioOption';
-export { RadioOption };
 //# sourceMappingURL=RadioOption.js.map

package/dist/components/RadioOption/RadioOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../../../src/components/RadioOption/RadioOption.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAc,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAa5E;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IACtF,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../../../src/components/RadioOption/RadioOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAoB;IACpG,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,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC7F,KAAC,KAAK,OAAK,UAAU,gBAAc,SAAS,GAAI,GACrC,CAClB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/RadioOption/RadioOptionExample.d.ts

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

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,39 @@
+import './rating.scss';
+export type RatingSize = 'large' | 'medium' | 'small';
+export type RatingProps = {
+    /**
+     * The value of the rating between 0 and 5.
+     *
+     * @minimum 0
+     * @maximum 5
+     */
+    value?: number;
+    /**
+     * If included the component is in interactive mode and this callback is fired when a star is selected.
+     *
+     * @param value - The new value of the rating.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * The size of the rating.
+     *
+     * @default medium
+     */
+    size?: RatingSize;
+};
+/**
+ * Descriptive and interactive controls that allow customers to indicate their feelings about an experience or product
+ * on a scale of 1 to 5. Half sizes are displayed when interactive is false.
+ *
+ * @example
+ *     import { Rating } from '@bspk/ui/Rating';
+ *
+ *     function Example() {
+ *         return <Rating value={4.5} />;
+ *     }
+ *
+ * @name Rating
+ * @phase UXReview
+ */
+export declare function Rating({ size, value, onChange }: RatingProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Rating/Rating.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgStarFill } from '@bspk/icons/StarFill';
+import './rating.css.js';
+const MAX_STARS = 5;
+const iconWidths = {
+    large: 32,
+    medium: 24,
+    small: 16,
+};
+/**
+ * Descriptive and interactive controls that allow customers to indicate their feelings about an experience or product
+ * on a scale of 1 to 5. Half sizes are displayed when interactive is false.
+ *
+ * @example
+ *     import { Rating } from '@bspk/ui/Rating';
+ *
+ *     function Example() {
+ *         return <Rating value={4.5} />;
+ *     }
+ *
+ * @name Rating
+ * @phase UXReview
+ */
+export function Rating({ size = 'medium', value, onChange }) {
+    const As = onChange ? 'button' : 'div';
+    return (_jsx("div", { "aria-label": onChange ? 'Select a star rating' : `${value} out of ${MAX_STARS} stars`, "data-bspk": "rating", "data-size": size, role: onChange ? 'radiogroup' : 'img', children: Array.from({ length: MAX_STARS }, (_, index) => {
+            const fill = getFill(index + 1, value);
+            const selected = value !== undefined && Math.floor(value) === index;
+            return (_jsxs(As, { "aria-checked": selected, "aria-hidden": !onChange, "aria-label": onChange ? `Rate ${index + 1}` : undefined, "data-fill": fill, "data-star": true, onClick: () => onChange?.(index + 1), role: onChange ? 'radio' : 'presentation', tabIndex: onChange ? (selected ? 0 : -1) : -1, type: "button", children: [_jsx(SvgStarFill, { width: iconWidths[size] }), fill === 'half' && (_jsx("div", { "data-fill-half": true, children: _jsx("div", { "data-star": true, children: _jsx(SvgStarFill, { width: iconWidths[size] }) }) }))] }, index));
+        }) }));
+}
+function getFill(num, value) {
+    if (value === undefined)
+        return undefined;
+    if (value >= num)
+        return 'full';
+    if (value == num - 0.5)
+        return 'half';
+    return undefined;
+}
+//# sourceMappingURL=Rating.js.map

package/dist/components/Rating/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,CAAC,CAAC;AAIpB,MAAM,UAAU,GAA+B;IAC3C,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACZ,CAAC;AAwBF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAe;IACpE,MAAM,EAAE,GAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpD,OAAO,CACH,4BACgB,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,WAAW,SAAS,QAAQ,eAC1E,QAAQ,eACP,IAAI,EACf,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,YAEpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAC5C,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;YACvC,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;YACpE,OAAO,CACH,MAAC,EAAE,oBACe,QAAQ,iBACT,CAAC,QAAQ,gBACV,QAAQ,CAAC,CAAC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,eAC3C,IAAI,qBAGf,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EACzC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAC,QAAQ,aAEb,KAAC,WAAW,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAI,EACvC,IAAI,KAAK,MAAM,IAAI,CAChB,gDACI,2CACI,KAAC,WAAW,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAI,GACtC,GACJ,CACT,KAbI,KAAK,CAcT,CACR,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,SAAS,OAAO,CAAC,GAAW,EAAE,KAAc;IACxC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC1C,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,MAAM,CAAC;IAChC,IAAI,KAAK,IAAI,GAAG,GAAG,GAAG;QAAE,OAAO,MAAM,CAAC;IACtC,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/dist/components/Rating/RatingExample.d.ts

@@ -0,0 +1,3 @@
+import { RatingProps } from './Rating';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const RatingExample: ComponentExampleFn<RatingProps>;

package/dist/components/Rating/RatingExample.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RatingExample = () => {
+    return {
+        render: ({ props, Component }) => {
+            return _jsx(Component, { ...props });
+        },
+        presets: [
+            {
+                label: 'Non interactive',
+                propState: {
+                    onChange: undefined,
+                },
+            },
+        ],
+    };
+};
+//# sourceMappingURL=RatingExample.js.map

package/dist/components/Rating/RatingExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingExample.js","sourceRoot":"","sources":["../../../src/components/Rating/RatingExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,aAAa,GAAoC,GAAG,EAAE;IAC/D,OAAO;QACH,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;YAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;QACpC,CAAC;QACD,OAAO,EAAE;YACL;gBACI,KAAK,EAAE,iBAAiB;gBACxB,SAAS,EAAE;oBACP,QAAQ,EAAE,SAAS;iBACtB;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC"}

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

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

package/dist/components/Rating/index.js

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

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

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

package/dist/components/Rating/rating.css

@@ -0,0 +1,65 @@
+[data-bspk=rating] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+}
+[data-bspk=rating][data-size=small] [data-star] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=small] svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=rating][data-size=medium] [data-star] {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating][data-size=medium] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=large] [data-star] {
+  width: var(--spacing-sizing-10);
+  height: var(--spacing-sizing-10);
+}
+[data-bspk=rating][data-size=large] svg {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating] [data-star] {
+  outline: none;
+  cursor: default;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--surface-neutral-t3-low);
+}
+[data-bspk=rating] [data-star]:is(button) {
+  cursor: pointer;
+}
+[data-bspk=rating] [data-star]:is(button):hover {
+  transform: scale(1.2);
+}
+[data-bspk=rating] [data-star]:is(button):focus-visible {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=rating] [data-star][data-fill=full] {
+  color: var(--status-warning);
+}
+[data-bspk=rating] [data-star] [data-fill-half] {
+  position: absolute;
+  inset: 0 50% 0 0;
+  overflow: hidden;
+}
+[data-bspk=rating] [data-star] [data-fill-half] [data-star] {
+  color: var(--status-warning);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Rating/rating.css.js

@@ -0,0 +1,70 @@
+/** * 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=rating] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+}
+[data-bspk=rating][data-size=small] [data-star] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=small] svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=rating][data-size=medium] [data-star] {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating][data-size=medium] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=large] [data-star] {
+  width: var(--spacing-sizing-10);
+  height: var(--spacing-sizing-10);
+}
+[data-bspk=rating][data-size=large] svg {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating] [data-star] {
+  outline: none;
+  cursor: default;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--surface-neutral-t3-low);
+}
+[data-bspk=rating] [data-star]:is(button) {
+  cursor: pointer;
+}
+[data-bspk=rating] [data-star]:is(button):hover {
+  transform: scale(1.2);
+}
+[data-bspk=rating] [data-star]:is(button):focus-visible {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=rating] [data-star][data-fill=full] {
+  color: var(--status-warning);
+}
+[data-bspk=rating] [data-star] [data-fill-half] {
+  position: absolute;
+  inset: 0 50% 0 0;
+  overflow: hidden;
+}
+[data-bspk=rating] [data-star] [data-fill-half] [data-star] {
+  color: var(--status-warning);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Scrim/Scrim.d.ts

@@ -1,20 +1,12 @@
-import { CommonProps } from '../../index.js';
+import { CommonProps } from '-/types/common';
 import './scrim.scss';
-export type ScrimProps = CommonProps<'data-bspk-owner'> & {
+export type ScrimProps = CommonProps<'owner'> & {
     /**
      * Whether the Scrim should be visible.
      *
      * @default true
      */
     visible?: boolean;
-    /**
-     * The variant of the Scrim.
-     *
-     * This determines how the Scrim is used in the application and effects its styling.
-     *
-     * @required
-     */
-    variant: 'dialog' | 'dropdown';
     /**
      * A function that is called when the Scrim is clicked.
      *
@@ -32,9 +24,5 @@ export type ScrimProps = CommonProps<'data-bspk-owner'> & {
  *
  * @phase Utility
  */
-declare function Scrim({ visible, variant, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Scrim {
-    var bspkName: string;
-}
-export { Scrim };
+export declare function Scrim({ visible, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Scrim/Scrim.js

@@ -8,9 +8,7 @@ import './scrim.css.js';
  *
  * @phase Utility
  */
-function Scrim({ visible = true, variant, ...props }) {
-    return (_jsx("div", { ...props, "aria-hidden": "true", "data-bspk": "scrim", "data-hidden": !visible || undefined, "data-variant": variant }));
+export function Scrim({ visible = true, ...props }) {
+    return _jsx("div", { ...props, "aria-hidden": "true", "data-bspk": "scrim", "data-hidden": !visible || undefined });
 }
-Scrim.bspkName = 'Scrim';
-export { Scrim };
 //# sourceMappingURL=Scrim.js.map

package/dist/components/Scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AA2BtB;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc;IAC5D,OAAO,CACH,iBACQ,KAAK,iBACG,MAAM,eACR,OAAO,iBACJ,CAAC,OAAO,IAAI,SAAS,kBACpB,OAAO,GACvB,CACL,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAmBtB;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,KAAK,EAAc;IAC1D,OAAO,iBAAS,KAAK,iBAAc,MAAM,eAAW,OAAO,iBAAc,CAAC,OAAO,IAAI,SAAS,GAAI,CAAC;AACvG,CAAC"}

package/dist/components/Scrim/scrim.css

@@ -8,12 +8,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-[data-bspk=scrim][data-variant=dialog] {
   background-color: var(--background-scrim);
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=scrim][data-hidden] {
   display: none;
 }
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */