@bspk/ui 1.1.33 → 1.2.0

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -1,8 +1,8 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { ProgressionStepperProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps> = {
+    containerStyle: { width: '100%' },
     presets: [
         {
             label: 'Horizontal',
@@ -37,7 +37,7 @@ export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps
             label: 'Widget',
             propState: {
                 variant: 'widget',
-                currentStep: 2,
+                currentStep: 3,
                 steps: [
                     { name: 'Name of step 1' },
                     { name: 'Name of step 2' },

package/src/components/ProgressionStepper/progression-stepper.scss

@@ -9,6 +9,7 @@
 
     ol {
         display: flex;
+        flex-direction: row;
         width: 100%;
         margin: 0;
         padding: 0;
@@ -20,6 +21,7 @@
             margin: 0;
             padding: 0;
             gap: var(--spacing-sizing-02);
+            flex-grow: 1;
 
             [data-line-circle] {
                 display: flex;
@@ -54,8 +56,19 @@
 
             [data-content] {
                 display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                [data-variant='horizontal'] & {
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                }
+
                 padding: 0 var(--spacing-sizing-10);
                 font: var(--body-small);
+                text-align: center;
             }
 
             &:first-of-type {

package/src/components/ProgressionStepperBar/ProgressionStepperBar.tsx

@@ -1,4 +1,5 @@
 import { cssWithVars } from '-/utils/cwv';
+
 import './progression-stepper-bar.scss';
 
 export type ProgressionStepperBarProps = {
@@ -35,9 +36,9 @@ export type ProgressionStepperBarProps = {
  * Component description coming soon.
  *
  * @name ProgressionStepperBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressionStepperBar({
+export function ProgressionStepperBar({
     stepCount,
     stepCompleted: stepCompletedProp = 0,
     size = 'large',
@@ -51,15 +52,11 @@ function ProgressionStepperBar({
                     <div data-complete={i < stepCompleted || undefined} data-step={i} key={i} />
                 ))}
             </div>
-            <label>
+            <span data-label>
                 {stepCompleted} of {stepCount} steps completed.
-            </label>
+            </span>
         </div>
     );
 }
 
-ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
-
-export { ProgressionStepperBar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressionStepperBar/progression-stepper-bar.scss

@@ -22,7 +22,7 @@
             width: 100%;
             height: var(--height);
             min-width: var(--spacing-sizing-02);
-            border-radius: var(--radius-small);
+            border-radius: var(--radius-sm);
             background: var(--surface-neutral-t3-low);
 
             &[data-complete] {
@@ -31,7 +31,7 @@
         }
     }
 
-    label {
+    [data-label] {
         font: var(--labels-small);
     }
 }

package/src/components/Radio/Radio.tsx

@@ -1,11 +1,10 @@
 import { ChangeEvent } from 'react';
 
-import { ElementProps, InvalidPropsLibrary, CommonProps } from '-';
+import { ElementProps, CommonProps } from '-/types/common';
 
 import './radio.scss';
 
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
     Required<CommonProps<'value'>> & {
         /**
          * Marks the radio as checked.
@@ -30,15 +29,14 @@ export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
  * @name Radio
  * @phase Utility
  */
-function Radio(props: ElementProps<RadioProps, 'input'>) {
-    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
+export function Radio(props: ElementProps<RadioProps, 'input'>) {
+    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
 
     return (
         <span data-bspk="radio">
             <input
                 {...otherProps}
                 checked={!!checked}
-                data-errormessage={errorMessage || undefined}
                 data-invalid={invalid || undefined}
                 disabled={disabled || undefined}
                 onChange={(event) => onChange(!!event.target.checked, event)}
@@ -49,8 +47,4 @@ function Radio(props: ElementProps<RadioProps, 'input'>) {
     );
 }
 
-Radio.bspkName = 'Radio';
-
-export { Radio };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Radio/radio.scss

@@ -39,7 +39,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;
         }
     }

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,65 +1,66 @@
-import { useId } from 'react';
+import { RadioOption, RadioOptionProps } from '-/components/RadioOption';
+import { useId } from '-/hooks/useId';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 
-import { ElementProps, CommonProps } from '-';
-import { Radio } from '-/components/Radio';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
 import './radio-group.scss';
 
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> &
+    Required<CommonProps<'value'>>;
 
-export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
-    /**
-     * The value of the control.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: string;
-    /**
-     * The function to call when the radios are changed.
-     *
-     * @example
-     *     (value) => setState({ value }),
-     *
-     * @required
-     */
-    onChange: (value: string) => void;
-    /**
-     * The options for the radios.
-     *
-     * @example
-     *     [
-     *         {
-     *             value: '1',
-     *             label: 'Option 1',
-     *         },
-     *         {
-     *             value: '2',
-     *             label: 'Option 2',
-     *             description: 'Description here',
-     *         },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<RadioGroupOption>
-     * @required
-     */
-    options: RadioGroupOption[];
-    /**
-     * The label of the radio group.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
-     *
-     * @default true
-     */
-    showLabel?: boolean;
-};
+export type RadioGroupProps = CommonProps<'disabled' | 'name'> &
+    FormFieldControlProps & {
+        /**
+         * The value of the control.
+         *
+         * @example
+         *     1;
+         *
+         * @required
+         */
+        value: string;
+        /**
+         * The function to call when the radios are changed.
+         *
+         * @example
+         *     (value) => setState({ value }),
+         *
+         * @required
+         */
+        onChange: (value: string) => void;
+        /**
+         * The options for the radios.
+         *
+         * @example
+         *     [
+         *         {
+         *             value: '1',
+         *             label: 'Option 1',
+         *         },
+         *         {
+         *             value: '2',
+         *             label: 'Option 2',
+         *             description: 'Description here',
+         *         },
+         *         { value: '3', label: 'Option 3' },
+         *     ];
+         *
+         * @type Array<RadioGroupOption>
+         * @required
+         */
+        options: RadioGroupOption[];
+        /**
+         * The label of the radio group.
+         *
+         * @required
+         */
+        label: string;
+        /**
+         * Hides the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+         *
+         * @default false
+         */
+        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.
@@ -90,16 +91,16 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function RadioGroup({
+export function RadioGroup({
     onChange,
     options = [],
     name,
     value: groupValue,
     label: groupLabel,
-    showLabel = true,
-    disabled,
+    hideLabel: hideLabelProp = false,
+    disabled: disabledGroup = false,
     ...props
 }: ElementProps<RadioGroupProps, 'div'>) {
     const id = `radio-group-${useId()}`;
@@ -107,27 +108,28 @@ function RadioGroup({
     return (
         <div
             {...props}
-            aria-label={!showLabel ? groupLabel : undefined}
-            aria-labelledby={showLabel ? `${id}-label` : undefined}
+            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"
-            data-disabled={disabled || undefined}
             id={id}
-            role="group"
+            role="radiogroup"
         >
-            {showLabel && <label id={`${id}-label`}>{groupLabel}</label>}
+            {!hideLabelProp && <label id={`${id}-label`}>{groupLabel}</label>}
             <div role="radiogroup">
-                {options.map(({ label, description, value }, index) => {
+                {options.map(({ label, description, disabled, value }, index) => {
                     return (
-                        <ToggleOption description={description} key={`toggle-option-${value || index}`} label={label}>
-                            <Radio
-                                aria-label={label}
-                                checked={groupValue === value}
-                                disabled={disabled}
-                                name={name}
-                                onChange={(checked) => checked && onChange(value)}
-                                value={value}
-                            />
-                        </ToggleOption>
+                        <RadioOption
+                            checked={groupValue === value}
+                            description={description}
+                            disabled={disabledGroup || disabled}
+                            key={`radio-option-${value || index}`}
+                            label={label}
+                            name={name}
+                            onChange={(checked) => checked && onChange(value)}
+                            value={value}
+                        />
                     );
                 })}
             </div>
@@ -135,8 +137,4 @@ function RadioGroup({
     );
 }
 
-RadioGroup.bspkName = 'RadioGroup';
-
-export { RadioGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/RadioGroup/RadioGroupExample.tsx

@@ -1,30 +1,9 @@
+import { RadioGroupProps } from '.';
+import { CheckboxGroupExample } from '-/components/CheckboxGroup/CheckboxGroupExample';
 import { RadioExample } from '-/components/Radio/RadioExample';
 import { ComponentExample } from '-/utils/demo';
 
-import { RadioGroupProps } from '.';
-
 export const RadioGroupExample: ComponentExample<RadioGroupProps> = {
     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 as ComponentExample<RadioGroupProps>['presets'],
 };

package/src/components/RadioGroup/radio-group.scss

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

package/src/components/RadioOption/RadioOption.tsx

@@ -1,19 +1,7 @@
-import { ChangeEvent } from 'react';
-
-import { InvalidPropsLibrary } from '-';
 import { RadioProps, Radio } from '-/components/Radio';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ToggleOption, ToggleOptionControlProps } from '-/components/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;
-    };
+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.
@@ -23,19 +11,16 @@ export type RadioOptionProps = InvalidPropsLibrary &
  * @name RadioOption
  * @phase Utility
  */
-function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps) {
+export function RadioOption({ label: labelProp, description, disabled, ...radioProps }: RadioOptionProps) {
     const label = labelProp || description;
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
     return (
         label && (
-            <ToggleOption data-bspk="radio-option" description={description} label={label}>
-                <Radio {...checkboxProps} aria-label={label} />
+            <ToggleOption data-bspk="radio-option" description={description} disabled={disabled} label={label}>
+                <Radio {...radioProps} aria-label={ariaLabel} />
             </ToggleOption>
         )
     );
 }
 
-RadioOption.bspkName = 'RadioOption';
-
-export { RadioOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Rating/Rating.tsx

@@ -0,0 +1,100 @@
+import { SvgStarFill } from '@bspk/icons/StarFill';
+import { ElementType } from 'react';
+
+import './rating.scss';
+
+const MAX_STARS = 5;
+
+export type RatingSize = 'large' | 'medium' | 'small';
+
+const iconWidths: Record<RatingSize, number> = {
+    large: 32,
+    medium: 24,
+    small: 16,
+};
+
+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 function Rating({ size = 'medium', value, onChange }: RatingProps) {
+    const As: ElementType = onChange ? 'button' : 'div';
+
+    return (
+        <div
+            aria-label={onChange ? 'Select a star rating' : `${value} out of ${MAX_STARS} stars`}
+            data-bspk="rating"
+            data-size={size}
+            role={onChange ? 'radiogroup' : 'img'}
+        >
+            {Array.from({ length: MAX_STARS }, (_, index) => {
+                const fill = getFill(index + 1, value);
+                const selected = value !== undefined && Math.floor(value) === index;
+                return (
+                    <As
+                        aria-checked={selected}
+                        aria-hidden={!onChange}
+                        aria-label={onChange ? `Rate ${index + 1}` : undefined}
+                        data-fill={fill}
+                        data-star
+                        key={index}
+                        onClick={() => onChange?.(index + 1)}
+                        role={onChange ? 'radio' : 'presentation'}
+                        tabIndex={onChange ? (selected ? 0 : -1) : -1}
+                        type="button"
+                    >
+                        <SvgStarFill width={iconWidths[size]} />
+                        {fill === 'half' && (
+                            <div data-fill-half>
+                                <div data-star>
+                                    <SvgStarFill width={iconWidths[size]} />
+                                </div>
+                            </div>
+                        )}
+                    </As>
+                );
+            })}
+        </div>
+    );
+}
+
+function getFill(num: number, value?: number): 'full' | 'half' | undefined {
+    if (value === undefined) return undefined;
+    if (value >= num) return 'full';
+    if (value == num - 0.5) return 'half';
+    return undefined;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Rating/RatingExample.tsx

@@ -0,0 +1,18 @@
+import { RatingProps } from './Rating';
+import { ComponentExampleFn } from '-/utils/demo';
+
+export const RatingExample: ComponentExampleFn<RatingProps> = () => {
+    return {
+        render: ({ props, Component }) => {
+            return <Component {...props} />;
+        },
+        presets: [
+            {
+                label: 'Non interactive',
+                propState: {
+                    onChange: undefined,
+                },
+            },
+        ],
+    };
+};

package/src/components/Rating/index.tsx

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

package/src/components/Rating/rating.scss

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