@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  Text,
+  Pressable,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+interface NumberInputProps {
+  label: string;
+  name: string;
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  onChange?: (value: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const STEPPER_SIZE = 44;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  stepper: {
+    width: STEPPER_SIZE,
+    height: STEPPER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  stepperStart: {
+    borderTopStartRadius: border.radius.full,
+    borderBottomStartRadius: border.radius.full,
+    borderEndWidth: 0,
+  },
+  stepperEnd: {
+    borderTopEndRadius: border.radius.full,
+    borderBottomEndRadius: border.radius.full,
+    borderStartWidth: 0,
+  },
+  stepperText: {
+    fontSize: 20,
+    fontWeight: font.weight.semibold,
+    lineHeight: 24,
+  },
+  input: {
+    flex: 1,
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    textAlign: 'center',
+    paddingHorizontal: spacing.xs,
+    paddingVertical: spacing.xs,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    minHeight: STEPPER_SIZE,
+  },
+});
+
+export function NumberInput({
+  label,
+  name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
+  value,
+  defaultValue,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  style,
+}: Readonly<NumberInputProps>) {
+  const { colors } = useTheme();
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? 0);
+
+  const currentValue = isControlled ? value : internalValue;
+
+  const clamp = (v: number): number => {
+    const withMin = min !== undefined ? Math.max(min, v) : v;
+    return max !== undefined ? Math.min(max, withMin) : withMin;
+  };
+
+  const update = (next: number) => {
+    const clamped = clamp(next);
+    if (!isControlled) setInternalValue(clamped);
+    onChange?.(clamped);
+  };
+
+  const canDecrease = min === undefined || currentValue > min;
+  const canIncrease = max === undefined || currentValue < max;
+
+  const borderColor = error ? colors.colorError : colors.colorOnBg;
+
+  return (
+    <View style={[styles.container, style]}>
+      <Label label={label} />
+      <View style={[styles.inputRow, disabled && { opacity: 0.4 }]}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Decrease"
+          accessibilityState={{ disabled: disabled || !canDecrease }}
+          disabled={disabled || !canDecrease}
+          onPress={() => update(currentValue - step)}
+          style={({ pressed }) => [
+            styles.stepper,
+            styles.stepperStart,
+            {
+              borderColor,
+              backgroundColor: colors.colorBgSubtle,
+            },
+            pressed && { opacity: 0.7 },
+            (disabled || !canDecrease) && { opacity: 0.4 },
+          ]}
+        >
+          <Text
+            style={[styles.stepperText, { color: colors.colorOnBg }]}
+            aria-hidden
+          >
+            {'\u2212'}
+          </Text>
+        </Pressable>
+
+        <TextInput
+          accessibilityLabel={label}
+          accessibilityState={{ disabled }}
+          accessibilityValue={{
+            min,
+            max,
+            now: currentValue,
+            text: String(currentValue),
+          }}
+          keyboardType="numeric"
+          value={String(currentValue)}
+          editable={!disabled}
+          onChangeText={(text) => {
+            const parsed = parseFloat(text);
+            const safe = isNaN(parsed) ? 0 : parsed;
+            update(safe);
+          }}
+          style={[
+            styles.input,
+            {
+              borderColor,
+              color: colors.colorOnBg,
+              backgroundColor: colors.colorBg,
+            },
+          ]}
+        />
+
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Increase"
+          accessibilityState={{ disabled: disabled || !canIncrease }}
+          disabled={disabled || !canIncrease}
+          onPress={() => update(currentValue + step)}
+          style={({ pressed }) => [
+            styles.stepper,
+            styles.stepperEnd,
+            {
+              borderColor,
+              backgroundColor: colors.colorBgSubtle,
+            },
+            pressed && { opacity: 0.7 },
+            (disabled || !canIncrease) && { opacity: 0.4 },
+          ]}
+        >
+          <Text
+            style={[styles.stepperText, { color: colors.colorOnBg }]}
+            aria-hidden
+          >
+            +
+          </Text>
+        </Pressable>
+      </View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Radio } from './Radio.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Radio (native)', () => {
+  it('has radio role with label', () => {
+    renderWithTheme(<Radio label="Option A" name="choice" />);
+    expect(screen.getByRole('radio', { name: 'Option A' })).toBeInTheDocument();
+  });
+
+  it('renders unchecked by default (no inner dot)', () => {
+    renderWithTheme(<Radio label="Option A" name="choice" />);
+    // The outer circle is always present; the inner dot only renders when checked
+    const radio = screen.getByRole('radio');
+    // When unchecked, the inner filled circle should not be rendered
+    // The outer has 1 child (no inner dot) vs 2 when checked
+    expect(radio).toBeInTheDocument();
+  });
+
+  it('renders inner dot when checked', () => {
+    const { container: uncheckedContainer } = renderWithTheme(
+      <Radio label="Unchecked" name="choice" />,
+    );
+    const { container: checkedContainer } = renderWithTheme(
+      <Radio label="Checked" name="choice" checked />,
+    );
+    // The checked variant has more DOM nodes (the inner filled circle)
+    expect(checkedContainer.innerHTML.length).toBeGreaterThan(
+      uncheckedContainer.innerHTML.length,
+    );
+  });
+
+  it('reflects disabled state', () => {
+    renderWithTheme(<Radio label="Option A" name="choice" disabled />);
+    const radio = screen.getByRole('radio');
+    expect(radio).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('calls onChange when clicked', () => {
+    const handleChange = vi.fn();
+    renderWithTheme(
+      <Radio label="Option A" name="choice" onChange={handleChange} />,
+    );
+    fireEvent.click(screen.getByRole('radio'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onChange when disabled', () => {
+    const handleChange = vi.fn();
+    renderWithTheme(
+      <Radio label="Option A" name="choice" disabled onChange={handleChange} />,
+    );
+    fireEvent.click(screen.getByRole('radio'));
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('renders error message', () => {
+    renderWithTheme(
+      <Radio label="Option A" name="choice" error="Selection required." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Selection required.');
+  });
+
+  it('renders hint message', () => {
+    renderWithTheme(
+      <Radio label="Option A" name="choice" hint="Select your preference." />,
+    );
+    expect(screen.getByText('Select your preference.')).toBeInTheDocument();
+  });
+
+  it('uses name as accessibility label when label is not a string', () => {
+    renderWithTheme(<Radio label={<span>Custom</span>} name="fallback" />);
+    expect(screen.getByRole('radio', { name: 'fallback' })).toBeInTheDocument();
+  });
+});

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

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Form/Radio',
   component: Radio,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
 } satisfies Meta<typeof Radio>;
 
@@ -28,19 +28,17 @@ export const Group: Story = {
     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>
+      <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>
     );
   },
 };

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

@@ -55,7 +55,7 @@ export function Radio({
   style,
 }: RadioProps) {
   const { colors } = useTheme();
-  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorBgSubtle;
+  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorOnBg;
 
   return (
     <View style={[styles.container, style]}>

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

@@ -0,0 +1,79 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './RadioGroup.native.stories';
+
+<Meta of={Stories} />
+
+# RadioGroup (React Native)
+
+Groups related radio buttons under a common legend with optional hint and error messages. Uses `accessibilityRole="radiogroup"` for proper screen reader semantics.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { RadioGroup, Radio } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [selected, setSelected] = useState('standard');
+
+  return (
+    <RadioGroup legend="Shipping method">
+      <Radio
+        label="Standard"
+        name="shipping"
+        checked={selected === 'standard'}
+        onChange={() => setSelected('standard')}
+      />
+      <Radio
+        label="Express"
+        name="shipping"
+        checked={selected === 'express'}
+        onChange={() => setSelected('express')}
+      />
+    </RadioGroup>
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Required
+<Canvas of={Stories.Required} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `legend` | string | -- | Group label displayed above the radio buttons |
+| `children` | ReactNode | -- | Radio components |
+| `error` | string | -- | Error message displayed below the group |
+| `hint` | string | -- | Helper text displayed below the group |
+| `required` | boolean | -- | Appends asterisk to legend |
+| `disabled` | boolean | `false` | Reduces opacity of the entire group |
+
+## Accessibility
+
+- Uses `accessibilityRole="radiogroup"` for proper grouping semantics
+- The group is labelled via `accessibilityLabel` matching the legend text
+- Error messages use `accessibilityRole="alert"` for screen reader announcement

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

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { RadioGroup } from './RadioGroup.native';
+import { Radio } from '../Radio/Radio.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('RadioGroup (native)', () => {
+  it('renders the legend text', () => {
+    renderWithTheme(
+      <RadioGroup legend="Shipping method">
+        <Radio label="Standard" name="shipping" />
+      </RadioGroup>,
+    );
+    expect(screen.getByText('Shipping method')).toBeInTheDocument();
+  });
+
+  it('has radiogroup role', () => {
+    renderWithTheme(
+      <RadioGroup legend="Shipping">
+        <Radio label="Standard" name="shipping" />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    renderWithTheme(
+      <RadioGroup legend="Options">
+        <Radio label="Option A" name="opt" />
+        <Radio label="Option B" name="opt" />
+      </RadioGroup>,
+    );
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+    expect(screen.getByText('Option B')).toBeInTheDocument();
+  });
+
+  it('appends asterisk when required', () => {
+    renderWithTheme(
+      <RadioGroup legend="Payment" required>
+        <Radio label="Card" name="payment" />
+      </RadioGroup>,
+    );
+    expect(screen.getByText('*', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders error message', () => {
+    renderWithTheme(
+      <RadioGroup legend="Shipping" error="Please select one.">
+        <Radio label="Standard" name="shipping" />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Please select one.');
+  });
+
+  it('renders hint message', () => {
+    renderWithTheme(
+      <RadioGroup legend="Shipping" hint="Choose your preferred method.">
+        <Radio label="Standard" name="shipping" />
+      </RadioGroup>,
+    );
+    expect(screen.getByText('Choose your preferred method.')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { RadioGroup } from './RadioGroup.native';
+import { Radio } from '../Radio/Radio.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/RadioGroup',
+  component: RadioGroup,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    legend: 'Shipping method',
+    children: (
+      <>
+        <Radio label="Standard" name="shipping" />
+        <Radio label="Express" name="shipping" />
+        <Radio label="Next day" name="shipping" />
+      </>
+    ),
+  },
+};
+
+export const Required: Story = {
+  args: {
+    legend: 'Payment method',
+    required: true,
+    children: (
+      <>
+        <Radio label="Credit card" name="payment" />
+        <Radio label="iDEAL" name="payment" />
+      </>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    legend: 'Shipping method',
+    disabled: true,
+    children: (
+      <>
+        <Radio label="Standard" name="shipping" checked disabled />
+        <Radio label="Express" name="shipping" disabled />
+      </>
+    ),
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    legend: 'Select one',
+    error: 'Please select a shipping method.',
+    children: (
+      <>
+        <Radio label="Standard" name="shipping" />
+        <Radio label="Express" name="shipping" />
+      </>
+    ),
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    legend: 'Delivery speed',
+    hint: 'Express adds a surcharge.',
+    children: (
+      <>
+        <Radio label="Standard" name="delivery" />
+        <Radio label="Express" name="delivery" />
+      </>
+    ),
+  },
+};
+
+function InteractiveComponent() {
+  const [selected, setSelected] = useState('standard');
+  return (
+    <RadioGroup legend="Shipping method">
+      <Radio label="Standard" name="shipping" checked={selected === 'standard'} onChange={() => setSelected('standard')} />
+      <Radio label="Express" name="shipping" checked={selected === 'express'} onChange={() => setSelected('express')} />
+      <Radio label="Next day" name="shipping" checked={selected === 'nextday'} onChange={() => setSelected('nextday')} />
+    </RadioGroup>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveComponent />,
+};

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

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Message } from '../atoms/Message.native';
+
+interface RadioGroupProps {
+  legend: string;
+  children: ReactNode;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xs,
+  },
+  legend: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.semibold,
+  },
+  required: {
+    fontWeight: font.weight.body,
+  },
+  items: {
+    gap: spacing.xxs,
+  },
+});
+
+export function RadioGroup({
+  legend,
+  children,
+  error,
+  hint,
+  required,
+  disabled = false,
+  style,
+}: Readonly<RadioGroupProps>) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      style={[styles.container, disabled && { opacity: 0.4 }, style]}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={legend}
+    >
+      <Text style={[styles.legend, { color: colors.colorOnBg }]}>
+        {legend}
+        {required && <Text style={[styles.required, { color: colors.colorOnBgSubtle }]}> *</Text>}
+      </Text>
+      <View style={styles.items}>{children}</View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

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

@@ -6,7 +6,7 @@
     grid-auto-columns: 1fr;
     padding: var(--bds-space_xxxs);
     background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
-    border-radius: var(--control_radius, var(--bds-border_radius--m));
+    border-radius: var(--control_radius, var(--bds-border_radius--full));
     gap: 0;
   }
 
@@ -16,7 +16,7 @@
     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(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     background-color: var(--control_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     pointer-events: none;
@@ -30,7 +30,7 @@
     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(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     pointer-events: none;
     z-index: 2;
     display: none;
@@ -46,7 +46,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
@@ -66,7 +66,7 @@
   .item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
   }
 
   .item.--active {