@boostdev/design-system-components 1.0.2 → 1.1.0

package/src/components/interaction/form/Radio/Radio.module.css

@@ -22,7 +22,7 @@
 
   .description {
     font-size: var(--bds-font_size--body--s);
-    color: var(--radio_description-color, var(--bds-on-bg--subtle));
+    color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
     line-height: var(--bds-font_line-height--body);
   }
 
@@ -31,7 +31,7 @@
     margin-block-start: 0.2em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--radio_color, var(--bds-on-bg));
+    color: var(--radio_color, var(--bds-color_on-bg));
     border: var(--radio_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: 50%;
@@ -41,15 +41,15 @@
     border-radius: var(--radio_radius, var(--bdc-outline_radius));
     box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
     appearance: none;
-    background-color: var(--radio_color_bg, var(--bds-bg));
+    background-color: var(--radio_color_bg, var(--bds-color_bg));
     cursor: pointer;
     position: relative;
     transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
 
   .radio:checked {
-    background-color: var(--radio_color-active, var(--bds-active));
-    --bdc_color: var(--radio_color-active, var(--bds-active));
+    background-color: var(--radio_color-active, var(--bdc-color_active));
+    --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
 
   .radio:checked::after {
@@ -61,7 +61,7 @@
     width: 0.4em;
     height: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--bds-on-active));
+    background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
   }
 
   .radio:focus {

package/src/components/interaction/form/Radio/Radio.native.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Radio } from './Radio.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Radio',
+  component: Radio,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unchecked: Story = { args: { label: 'Option A', name: 'option', checked: false } };
+export const Checked: Story = { args: { label: 'Option A', name: 'option', checked: true } };
+export const Disabled: Story = { args: { label: 'Option A', name: 'option', disabled: true } };
+export const WithError: Story = {
+  args: { label: 'Option A', name: 'option', error: 'Please select an option.' },
+};
+export const WithHint: Story = {
+  args: { label: 'Option A', name: 'option', hint: 'This is the recommended option.' },
+};
+export const Group: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null);
+    const options = ['Option A', 'Option B', 'Option C'];
+    return (
+      <ThemeProvider>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          {options.map(o => (
+            <Radio
+              key={o}
+              label={o}
+              name="group"
+              checked={selected === o}
+              onChange={() => setSelected(o)}
+            />
+          ))}
+        </div>
+      </ThemeProvider>
+    );
+  },
+};

package/src/components/interaction/form/Radio/Radio.native.tsx

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+interface RadioProps {
+  label: ReactNode;
+  name: string;
+  checked?: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DOT = 22;
+const INNER = 10;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    minHeight: 44,
+  },
+  outer: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inner: {
+    width: INNER,
+    height: INNER,
+    borderRadius: INNER / 2,
+  },
+});
+
+export function Radio({
+  label,
+  name,
+  checked = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style,
+}: RadioProps) {
+  const { colors } = useTheme();
+  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorBgSubtle;
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        onPress={() => !disabled && onChange?.()}
+        accessibilityRole="radio"
+        accessibilityLabel={typeof label === 'string' ? label : name}
+        accessibilityState={{ checked, disabled }}
+        disabled={disabled}
+        style={({ pressed }) => [styles.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }]}
+      >
+        <View style={[styles.outer, { borderColor }]}>
+          {checked && <View style={[styles.inner, { backgroundColor: colors.colorInteractive }]} />}
+        </View>
+        <Label label={label} />
+      </Pressable>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Radio/Radio.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Radio } from './Radio';
 
 const meta = {
-  title: 'Form/Radio',
+  title: 'React/Form/Radio',
   component: Radio,
 } satisfies Meta<typeof Radio>;
 

package/src/components/interaction/form/Radio/Radio.tsx

@@ -4,14 +4,14 @@ import { Message } from '../atoms/Message';
 import { Label } from '../atoms/Label';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: ReactNode;
   name: string;
   description?: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Radio({ label, name, description, error, hint, className, ...props }: RadioProps) {

package/src/components/interaction/form/RadioGroup/RadioGroup.mdx

@@ -0,0 +1,45 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './RadioGroup.stories';
+
+<Meta of={Stories} />
+
+# RadioGroup
+
+Groups multiple `Radio` inputs under a shared label. Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+
+## When to use
+- Mutually exclusive choices where exactly one option must be selected
+- Any time two or more radio buttons share a common question or label
+
+## When not to use
+- More than 6 options — use `Select` or `Combobox` to avoid overwhelming the user
+- Independent on/off choices — use `CheckboxGroup`
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### Required
+<Canvas of={Stories.Required} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Wraps radio buttons in a `<fieldset>` with a `<legend>` — screen readers announce the group label before each option
+- `disabled` on the group sets the HTML `disabled` attribute on the `<fieldset>`, which disables all child inputs
+- `aria-required` is set on the `<fieldset>` when `required` is true
+- Error and hint messages are linked via `aria-describedby`
+- Arrow keys move between options within the group; `Tab` moves focus out of the group

package/src/components/interaction/form/RadioGroup/RadioGroup.module.css

@@ -12,13 +12,13 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
 
   .required {
-    color: var(--bds-error);
+    color: var(--bds-color_error);
   }
 
   .items {

package/src/components/interaction/form/RadioGroup/RadioGroup.stories.tsx

@@ -3,7 +3,7 @@ import { Radio } from '../Radio';
 import { RadioGroup } from './RadioGroup';
 
 const meta = {
-  title: 'Form/RadioGroup',
+  title: 'React/Form/RadioGroup',
   component: RadioGroup,
 } satisfies Meta<typeof RadioGroup>;
 

package/src/components/interaction/form/RadioGroup/RadioGroup.tsx

@@ -2,15 +2,15 @@ import { ReactNode, useId } from 'react';
 import css from './RadioGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-export interface RadioGroupProps {
+export interface RadioGroupProps extends WithClassName {
   legend: string;
   children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
   disabled?: boolean;
-  className?: string;
 }
 
 export function RadioGroup({

package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css

@@ -5,7 +5,7 @@
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     padding: var(--bds-space_xxxs);
-    background-color: var(--control_track-bg, var(--bds-bg--subtle));
+    background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
     border-radius: var(--bds-border_radius--m);
     gap: 0;
   }
@@ -17,7 +17,7 @@
     left: var(--bds-space_xxxs);
     width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
     border-radius: var(--bds-border_radius--s);
-    background-color: var(--control_thumb-bg, var(--bds-bg));
+    background-color: var(--control_thumb-bg, var(--bds-color_bg));
     box-shadow: var(--bds-shadow_s);
     pointer-events: none;
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
@@ -54,7 +54,7 @@
     white-space: nowrap;
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
-    color: var(--control_label-color, var(--bds-on-bg--subtle));
+    color: var(--control_label-color, var(--bds-color_on-bg--subtle));
     transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     pointer-events: none;
     user-select: none;
@@ -72,7 +72,7 @@
   }
 
   .item.--active .label {
-    color: var(--control_label-color--active, var(--bds-on-bg));
+    color: var(--control_label-color--active, var(--bds-color_on-bg));
   }
 
   .radio:focus-visible ~ .label {
@@ -83,7 +83,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .item:not(.--active, .--disabled):hover .label {
-      color: var(--control_label-color--hover, var(--bds-on-bg));
+      color: var(--control_label-color--hover, var(--bds-color_on-bg));
     }
   }
 

package/src/components/interaction/form/SegmentedControl/SegmentedControl.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SegmentedControl } from './SegmentedControl';
 
 const meta = {
-  title: 'Form/SegmentedControl',
+  title: 'React/Form/SegmentedControl',
   component: SegmentedControl,
   argTypes: {
     size: { control: 'radio', options: ['small', 'medium', 'large'] },

package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes, ReactNode, useId, useState } from 'react';
 import css from './SegmentedControl.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
 export interface SegmentedControlOption {
   value: string;
@@ -9,7 +10,7 @@ export interface SegmentedControlOption {
 }
 
 export interface SegmentedControlProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+  extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
   name: string;
   options: SegmentedControlOption[];
   /** Controlled selected value */
@@ -19,7 +20,6 @@ export interface SegmentedControlProps
   onChange?: (value: string) => void;
   disabled?: boolean;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
   'aria-label'?: string;
 }
 

package/src/components/interaction/form/Select/Select.module.css

@@ -25,8 +25,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--select_radius, var(--bdc-outline_radius));
     box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
-    background-color: var(--select_color_bg, var(--bds-bg));
-    color: var(--select_color, var(--bds-on-bg));
+    background-color: var(--select_color_bg, var(--bds-color_bg));
+    color: var(--select_color, var(--bds-color_on-bg));
     cursor: pointer;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
@@ -56,7 +56,7 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--select_color, var(--bds-on-bg));
+    color: var(--select_color, var(--bds-color_on-bg));
   }
 
   .chevron svg {

package/src/components/interaction/form/Select/Select.stories.tsx

@@ -9,7 +9,7 @@ const options = [
 ];
 
 const meta = {
-  title: 'Form/Select',
+  title: 'React/Form/Select',
   component: Select,
 } satisfies Meta<typeof Select>;
 

package/src/components/interaction/form/Select/Select.tsx

@@ -4,6 +4,7 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
 export interface SelectOption {
   value: string;
@@ -11,14 +12,13 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+interface SelectProps extends WithClassName, Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
   label: ReactNode;
   name: string;
   options: SelectOption[];
   placeholder?: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Select({

package/src/components/interaction/form/Slider/Slider.mdx

@@ -46,7 +46,7 @@ Range input for selecting a numeric value within a bounded range.
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--slider_color-active`</td><td>`var(--bds-active)`</td><td>Filled track and thumb colour</td></tr>
+<tr><td>`--slider_color-active`</td><td>`var(--bdc-color_active)`</td><td>Filled track and thumb colour</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/form/Slider/Slider.module.css

@@ -14,7 +14,7 @@
   .value {
     font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
   }
 
   .slider {
@@ -22,17 +22,17 @@
     --slider_track-height: var(--bds-space_xxs);
     --slider_thumb-size:   calc(var(--bds-space_s) * 2);
 
-    color: var(--slider_color, var(--bds-on-bg));
+    color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
     width: 100%;
     height: var(--slider_track-height);
     border-radius: 999px;
     background: linear-gradient(
       to right,
-      var(--slider_color-active, var(--bds-active)) 0%,
-      var(--slider_color-active, var(--bds-active)) var(--slider_fill),
-      var(--bds-bg--subtle) var(--slider_fill),
-      var(--bds-bg--subtle) 100%
+      var(--slider_color-active, var(--bdc-color_active)) 0%,
+      var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill),
+      var(--bds-color_bg--subtle) var(--slider_fill),
+      var(--bds-color_bg--subtle) 100%
     );
     cursor: pointer;
     transition: var(--bds-animation_transition);
@@ -55,7 +55,7 @@
     width: var(--slider_thumb-size);
     height: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-active));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     cursor: pointer;
@@ -67,7 +67,7 @@
     height: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-active));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
@@ -75,19 +75,19 @@
   .sliderError {
     background: linear-gradient(
       to right,
-      var(--bds-error) 0%,
-      var(--bds-error) var(--slider_fill),
-      var(--bds-bg--subtle) var(--slider_fill),
-      var(--bds-bg--subtle) 100%
+      var(--bds-color_error) 0%,
+      var(--bds-color_error) var(--slider_fill),
+      var(--bds-color_bg--subtle) var(--slider_fill),
+      var(--bds-color_bg--subtle) 100%
     );
   }
 
   .sliderError::-webkit-slider-thumb {
-    background-color: var(--bds-error);
+    background-color: var(--bds-color_error);
   }
 
   .sliderError::-moz-range-thumb {
-    background-color: var(--bds-error);
+    background-color: var(--bds-color_error);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/components/interaction/form/Slider/Slider.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Slider } from './Slider';
 
 const meta = {
-  title: 'Form/Slider',
+  title: 'React/Form/Slider',
   component: Slider,
 } satisfies Meta<typeof Slider>;
 

package/src/components/interaction/form/Slider/Slider.tsx

@@ -4,8 +4,9 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
-interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface SliderProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: string;
   name: string;
   min?: number;
@@ -13,7 +14,6 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
   showValue?: boolean;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Slider({

package/src/components/interaction/form/Switch/Switch.mdx

@@ -52,10 +52,10 @@ Toggle control for binary settings that take immediate effect — without requir
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--switch_track-bg`</td><td>`var(--bds-grey--subtle)`</td><td>Track background when off</td></tr>
-<tr><td>`--switch_thumb-bg`</td><td>`var(--bds-grey)`</td><td>Thumb colour when off (also track outline)</td></tr>
-<tr><td>`--switch_track-bg--active`</td><td>`var(--bds-active--subtle)`</td><td>Track background when on</td></tr>
-<tr><td>`--switch_thumb-bg--active`</td><td>`var(--bds-active--strong)`</td><td>Thumb colour when on (also track outline)</td></tr>
+<tr><td>`--switch_track-bg`</td><td>`var(--bds-color_grey--subtle)`</td><td>Track background when off</td></tr>
+<tr><td>`--switch_thumb-bg`</td><td>`var(--bds-color_grey)`</td><td>Thumb colour when off (also track outline)</td></tr>
+<tr><td>`--switch_track-bg--active`</td><td>`var(--bdc-color_active--subtle)`</td><td>Track background when on</td></tr>
+<tr><td>`--switch_thumb-bg--active`</td><td>`var(--bdc-color_active--strong)`</td><td>Thumb colour when on (also track outline)</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/form/Switch/Switch.module.css

@@ -5,7 +5,7 @@
     --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
     --switch_track-width:  calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
 
-    color: var(--switch_color, var(--bds-on-bg));
+    color: var(--switch_color, var(--bds-color_on-bg));
     display: flex;
     flex-direction: column;
   }
@@ -53,7 +53,7 @@
     width: var(--switch_track-width);
     height: var(--switch_track-height);
     border-radius: 999px;
-    background-color: var(--switch_track-bg, var(--bds-grey--subtle));
+    background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -63,7 +63,7 @@
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
 
-    --bdc_color: var(--switch_thumb-bg, var(--bds-grey));
+    --bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
   }
 
   /* Thumb */
@@ -72,7 +72,7 @@
     width: var(--switch_thumb-size);
     height: var(--switch_thumb-size);
     border-radius: 50%;
-    background-color: var(--switch_thumb-bg, var(--bds-grey));
+    background-color: var(--switch_thumb-bg, var(--bds-color_grey));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     transform: translateX(0);
@@ -80,18 +80,18 @@
 
   /* Error state — declared before checked/focus so higher-specificity states can override */
   .switch.switchError + .track {
-    --bdc_color: var(--bds-error);
+    --bdc_color: var(--bds-color_error);
   }
 
   /* Checked state via CSS sibling combinator */
   .switch:checked + .track {
-    background-color: var(--switch_track-bg--active, var(--bds-active--subtle));
+    background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
 
-    --bdc_color: var(--switch_thumb-bg--active, var(--bds-active--strong));
+    --bdc_color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
   }
 
   .switch:checked + .track .thumb {
-    background-color: var(--switch_thumb-bg--active, var(--bds-active--strong));
+    background-color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
     transform: translateX(var(--switch_thumb-size));
   }