@boostdev/design-system-components 1.0.3 → 1.1.1

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

@@ -31,6 +31,22 @@ Numeric text input with increment/decrement stepper buttons. Enforces `min`, `ma
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--numberInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--numberInput_border`</td><td>`none`</td><td>Border</td></tr>
+<tr><td>`--numberInput_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Corner radius</td></tr>
+<tr><td>`--numberInput_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Renders `<input type="number">` — browser-native spinner support

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

@@ -38,7 +38,7 @@
     padding: var(--bds-space_s);
     background: transparent;
     color: var(--numberInput_color, var(--bds-color_on-bg));
-    min-width: 0;
+    min-inline-size: 0;
     appearance: textfield;
   }
 

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

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

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

@@ -4,8 +4,9 @@ import {Label} from '../atoms/Label';
 import {Message} from '../atoms/Message';
 import {InputContainer} from '../atoms/InputContainer';
 import {cn} from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface NumberInputProps {
+interface NumberInputProps extends WithClassName {
   label: string;
   name: string;
   value?: number;
@@ -17,7 +18,6 @@ interface NumberInputProps {
   error?: string;
   hint?: string;
   onChange?: (value: number) => void;
-  className?: string;
 }
 
 export function NumberInput({

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

@@ -46,9 +46,9 @@ Single-select option within a group. Renders a styled native `<input type="radio
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--radio_color-active`</td><td>`var(--bds-active)`</td><td>Selected fill and border colour</td></tr>
-<tr><td>`--radio_color-on-active`</td><td>`var(--bds-on-active)`</td><td>Inner dot colour</td></tr>
-<tr><td>`--radio_description-color`</td><td>`var(--bds-on-bg--subtle)`</td><td>Description text colour</td></tr>
+<tr><td>`--radio_color-active`</td><td>`var(--bdc-color_active)`</td><td>Selected fill and border colour</td></tr>
+<tr><td>`--radio_color-on-active`</td><td>`var(--bdc-color_on-active)`</td><td>Inner dot colour</td></tr>
+<tr><td>`--radio_description-color`</td><td>`var(--bds-color_on-bg--subtle)`</td><td>Description text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -29,8 +29,8 @@
   .radio {
     flex-shrink: 0;
     margin-block-start: 0.2em;
-    width: var(--inputSize);
-    height: var(--inputSize);
+    inline-size: var(--inputSize);
+    block-size: var(--inputSize);
     color: var(--radio_color, var(--bds-color_on-bg));
     border: var(--radio_border, none);
     --bdc_color: currentcolor;
@@ -48,20 +48,20 @@
   }
 
   .radio:checked {
-    background-color: var(--radio_color-active, var(--bds-color_green));
-    --bdc_color: var(--radio_color-active, var(--bds-color_green));
+    background-color: var(--radio_color-active, var(--bdc-color_active));
+    --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
 
   .radio:checked::after {
     content: '';
     position: absolute;
-    left: 50%;
-    top: 50%;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
     transform: translate(-50%, -50%);
-    width: 0.4em;
-    height: 0.4em;
+    inline-size: 0.4em;
+    block-size: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--bds-color_on-green));
+    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.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

@@ -12,10 +12,9 @@
 
   .thumb {
     position: absolute;
-    top: var(--bds-space_xxxs);
-    bottom: var(--bds-space_xxxs);
-    left: var(--bds-space_xxxs);
-    width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
+    inset-block: var(--bds-space_xxxs);
+    inset-inline-start: var(--bds-space_xxxs);
+    inline-size: 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-color_bg));
     box-shadow: var(--bds-shadow_s);
@@ -43,8 +42,8 @@
   .radio {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    inline-size: 0;
+    block-size: 0;
     margin: 0;
   }
 

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

@@ -12,7 +12,7 @@
 
   .select {
     appearance: none;
-    width: 100%;
+    inline-size: 100%;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -60,7 +60,7 @@
   }
 
   .chevron svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 }

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

@@ -24,13 +24,13 @@
 
     color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
-    width: 100%;
-    height: var(--slider_track-height);
+    inline-size: 100%;
+    block-size: var(--slider_track-height);
     border-radius: 999px;
     background: linear-gradient(
       to right,
-      var(--slider_color-active, var(--bds-color_green)) 0%,
-      var(--slider_color-active, var(--bds-color_green)) var(--slider_fill),
+      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%
     );
@@ -52,10 +52,10 @@
   /* Thumb — Webkit */
   .slider::-webkit-slider-thumb {
     appearance: none;
-    width: var(--slider_thumb-size);
-    height: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size);
+    block-size: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-color_green));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     cursor: pointer;
@@ -63,11 +63,11 @@
 
   /* Thumb — Firefox */
   .slider::-moz-range-thumb {
-    width: var(--slider_thumb-size);
-    height: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size);
+    block-size: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-color_green));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }

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

@@ -25,8 +25,8 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    width: var(--switch_track-width);
-    height: var(--switch_track-height);
+    inline-size: var(--switch_track-width);
+    block-size: var(--switch_track-height);
   }
 
   /* Real input — invisible overlay to capture pointer/keyboard events */
@@ -35,8 +35,8 @@
     inset: 0;
     appearance: none;
     opacity: 0;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     margin: 0;
     cursor: pointer;
     z-index: 1;
@@ -50,8 +50,8 @@
   .track {
     display: inline-flex;
     align-items: center;
-    width: var(--switch_track-width);
-    height: var(--switch_track-height);
+    inline-size: var(--switch_track-width);
+    block-size: var(--switch_track-height);
     border-radius: 999px;
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
@@ -69,8 +69,8 @@
   /* Thumb */
   .thumb {
     display: block;
-    width: var(--switch_thumb-size);
-    height: var(--switch_thumb-size);
+    inline-size: var(--switch_thumb-size);
+    block-size: var(--switch_thumb-size);
     border-radius: 50%;
     background-color: var(--switch_thumb-bg, var(--bds-color_grey));
     box-shadow: var(--bds-shadow_s);
@@ -85,13 +85,13 @@
 
   /* Checked state via CSS sibling combinator */
   .switch:checked + .track {
-    background-color: var(--switch_track-bg--active, var(--bds-color_green--subtle));
+    background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
 
-    --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_green--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-color_green--strong));
+    background-color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
     transform: translateX(var(--switch_thumb-size));
   }