@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -0,0 +1,78 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './SegmentedControl.native.stories';
+
+<Meta of={Stories} />
+
+# SegmentedControl (React Native)
+
+A horizontal control with multiple segments, where each segment acts as a tab. Supports `outline` and `filled` variants with three size options.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { SegmentedControl } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [index, setIndex] = useState(0);
+
+  return (
+    <SegmentedControl
+      selectedIndex={index}
+      onValueChange={setIndex}
+      accessibilityLabel="View mode"
+    >
+      {'Day'}
+      {'Week'}
+      {'Month'}
+    </SegmentedControl>
+  );
+}
+```
+
+## Examples
+
+### Outline (default)
+<Canvas of={Stories.Outline} />
+
+### Filled
+<Canvas of={Stories.Filled} />
+
+### Small
+<Canvas of={Stories.Small} />
+
+### Large
+<Canvas of={Stories.Large} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+### Interactive filled
+<Canvas of={Stories.InteractiveFilled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `selectedIndex` | number | `0` | Zero-based index of the active segment |
+| `disabled` | boolean | `false` | Disables all segments |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Controls height and font size |
+| `variant` | `'outline' \| 'filled'` | `'outline'` | Visual style of the control |
+| `children` | ReactNode | -- | Segment labels (strings or elements) |
+| `accessibilityLabel` | string | -- | Label for the tab group |
+| `onValueChange` | `(index: number) => void` | -- | Called with the tapped segment index |
+
+## Accessibility
+
+- Uses `accessibilityRole="tablist"` on the container
+- Each segment uses `accessibilityRole="tab"` with `accessibilityState.selected`
+- Disabled state is communicated via `accessibilityState`

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

@@ -0,0 +1,82 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { SegmentedControl } from './SegmentedControl.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('SegmentedControl (native)', () => {
+  it('renders all segments', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View">
+        {'Day'}
+        {'Week'}
+        {'Month'}
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('Day')).toBeInTheDocument();
+    expect(screen.getByText('Week')).toBeInTheDocument();
+    expect(screen.getByText('Month')).toBeInTheDocument();
+  });
+
+  it('has tablist role', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('renders tab roles for each segment', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(2);
+  });
+
+  it('calls onValueChange with the clicked index', () => {
+    const onValueChange = vi.fn();
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" onValueChange={onValueChange}>
+        {'Day'}
+        {'Week'}
+        {'Month'}
+      </SegmentedControl>,
+    );
+    fireEvent.click(screen.getByText('Week'));
+    expect(onValueChange).toHaveBeenCalledWith(1);
+  });
+
+  it('does not call onValueChange when disabled', () => {
+    const onValueChange = vi.fn();
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" onValueChange={onValueChange} disabled>
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    fireEvent.click(screen.getByText('Week'));
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('renders the selected segment with distinct styling', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={1}>
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    // Verify both tabs render and the selected one exists
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(2);
+    // The selected tab text is rendered
+    expect(screen.getByText('Week')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { SegmentedControl } from './SegmentedControl.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/SegmentedControl',
+  component: SegmentedControl,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    selectedIndex: 0,
+    children: ['Day', 'Week', 'Month'],
+    accessibilityLabel: 'View mode',
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+    selectedIndex: 1,
+    children: ['Day', 'Week', 'Month'],
+    accessibilityLabel: 'View mode',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    selectedIndex: 0,
+    children: ['On', 'Off'],
+    accessibilityLabel: 'Toggle',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    selectedIndex: 2,
+    children: ['First', 'Second', 'Third'],
+    accessibilityLabel: 'Selection',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    selectedIndex: 0,
+    disabled: true,
+    children: ['Day', 'Week', 'Month'],
+    accessibilityLabel: 'View mode',
+  },
+};
+
+function InteractiveComponent() {
+  const [index, setIndex] = useState(0);
+  return (
+    <SegmentedControl
+      selectedIndex={index}
+      onValueChange={setIndex}
+      accessibilityLabel="View mode"
+    >
+      {'Day'}
+      {'Week'}
+      {'Month'}
+    </SegmentedControl>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveComponent />,
+};
+
+function InteractiveFilledComponent() {
+  const [index, setIndex] = useState(0);
+  return (
+    <SegmentedControl
+      variant="filled"
+      selectedIndex={index}
+      onValueChange={setIndex}
+      accessibilityLabel="Category"
+    >
+      {'All'}
+      {'Active'}
+      {'Completed'}
+    </SegmentedControl>
+  );
+}
+
+export const InteractiveFilled: Story = {
+  render: () => <InteractiveFilledComponent />,
+};

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

@@ -0,0 +1,121 @@
+import { Children, ReactNode } from 'react';
+import { StyleSheet, View, Pressable, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+
+type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlVariant = 'outline' | 'filled';
+
+interface SegmentedControlProps {
+  selectedIndex?: number;
+  disabled?: boolean;
+  size?: SegmentedControlSize;
+  variant?: SegmentedControlVariant;
+  children: ReactNode;
+  accessibilityLabel?: string;
+  onValueChange?: (index: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeTokens: Record<SegmentedControlSize, { height: number; fontSize: number; px: number }> = {
+  small:  { height: 32, fontSize: font.size.bodyS, px: spacing.s },
+  medium: { height: 40, fontSize: font.size.body,  px: spacing.m },
+  large:  { height: 48, fontSize: font.size.body,  px: spacing.l },
+};
+
+const styles = StyleSheet.create({
+  track: {
+    flexDirection: 'row',
+    borderRadius: border.radius.full,
+    overflow: 'hidden',
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  label: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    textAlign: 'center',
+  },
+});
+
+export function SegmentedControl({
+  selectedIndex = 0,
+  disabled = false,
+  size = 'medium',
+  variant = 'outline',
+  children,
+  accessibilityLabel,
+  onValueChange,
+  style,
+}: Readonly<SegmentedControlProps>) {
+  const { colors } = useTheme();
+  const { height, fontSize, px } = sizeTokens[size];
+  const items = Children.toArray(children);
+
+  const trackStyle: ViewStyle = variant === 'filled'
+    ? { backgroundColor: colors.colorBgSubtle }
+    : { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.colorBgSubtle };
+
+  return (
+    <View
+      style={[styles.track, trackStyle, { borderRadius: border.radius.full }, style]}
+      accessibilityRole="tablist"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {items.map((child, index) => {
+        const isActive = index === selectedIndex;
+
+        const activeStyle: ViewStyle = variant === 'filled'
+          ? { backgroundColor: colors.colorInteractive }
+          : { borderWidth: 2, borderColor: colors.colorInteractive };
+
+        const inactiveStyle: ViewStyle = variant === 'filled'
+          ? {}
+          : {};
+
+        const textColor = variant === 'filled' && isActive
+          ? colors.colorOnInteractive
+          : isActive
+            ? colors.colorInteractive
+            : colors.colorOnBgSubtle;
+
+        // Extract label from child: if it's a string, use it directly.
+        // Otherwise render the child as-is.
+        const label = typeof child === 'string' || typeof child === 'number'
+          ? String(child)
+          : null;
+
+        return (
+          <Pressable
+            key={index}
+            onPress={() => !disabled && onValueChange?.(index)}
+            disabled={disabled}
+            accessibilityRole="tab"
+            accessibilityLabel={label ?? undefined}
+            accessibilityState={{ selected: isActive, disabled }}
+            style={({ pressed }) => [
+              styles.item,
+              { height, paddingHorizontal: px },
+              isActive ? activeStyle : inactiveStyle,
+              variant === 'filled' && isActive && { borderRadius: border.radius.full },
+              pressed && !disabled && { opacity: 0.7 },
+              disabled && { opacity: 0.4 },
+            ]}
+          >
+            {label !== null ? (
+              <Text style={[styles.label, { fontSize, color: textColor }]}>
+                {label}
+              </Text>
+            ) : (
+              child
+            )}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -19,7 +19,7 @@
     padding-inline-end: var(--bds-space_xxl);
     border: var(--select_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
 
     border-radius: var(--select_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));

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

@@ -0,0 +1,85 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Select.native.stories';
+
+<Meta of={Stories} />
+
+# Select (React Native)
+
+Dropdown-style select component. Renders a trigger button that opens a bottom sheet modal with a scrollable list of options.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Select } from '@boostdev/components';
+import { useState } from 'react';
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+];
+
+function Example() {
+  const [value, setValue] = useState('');
+  return (
+    <Select
+      label="Fruit"
+      name="fruit"
+      options={options}
+      placeholder="Choose a fruit..."
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With placeholder
+<Canvas of={Stories.WithPlaceholder} />
+
+### With selected value
+<Canvas of={Stories.WithValue} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | ReactNode | — | Visible label text |
+| `name` | string | — | Field name (used for accessibility) |
+| `options` | `SelectOption[]` | — | Array of `{ value, label, disabled? }` |
+| `placeholder` | string | `'Select an option'` | Placeholder when no value is selected |
+| `value` | string | — | Currently selected value |
+| `error` | string | — | Error message displayed below the trigger |
+| `hint` | string | — | Hint text displayed below the trigger |
+| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
+| `onChange` | `(value: string) => void` | — | Called with the selected option value |
+
+## Accessibility
+
+- Trigger announces the label and current value via `accessibilityLabel`
+- `accessibilityState.expanded` reflects whether the modal is open
+- Each option announces its label and selected state
+- Disabled options are communicated via `accessibilityState.disabled`

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

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Select } from './Select.native';
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+];
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Select (native)', () => {
+  it('renders the label', () => {
+    renderWithTheme(<Select label="Fruit" name="fruit" options={options} />);
+    expect(screen.getByText('Fruit')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no value is selected', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} placeholder="Choose..." />,
+    );
+    expect(screen.getByText('Choose...')).toBeInTheDocument();
+  });
+
+  it('shows the selected option label', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} value="cherry" />,
+    );
+    expect(screen.getByText('Cherry')).toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} error="Required." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Required.');
+  });
+
+  it('shows hint message', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} hint="Pick one." />,
+    );
+    expect(screen.getByText('Pick one.')).toBeInTheDocument();
+  });
+
+  it('renders the trigger button with correct accessibility', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} />,
+    );
+    const trigger = screen.getByRole('button', { name: /Fruit/ });
+    expect(trigger).toBeInTheDocument();
+  });
+
+  it('applies disabled opacity', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} disabled value="banana" />,
+    );
+    const trigger = screen.getByRole('button', { name: /Fruit/ });
+    expect(trigger).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Select } from './Select.native';
+
+const fruitOptions = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'dragonfruit', label: 'Dragonfruit' },
+  { value: 'elderberry', label: 'Elderberry' },
+];
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Select',
+  component: Select,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: 'Fruit', name: 'fruit', options: fruitOptions },
+};
+
+export const WithPlaceholder: Story = {
+  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, placeholder: 'Choose a fruit...' },
+};
+
+export const WithValue: Story = {
+  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, value: 'cherry' },
+};
+
+export const WithError: Story = {
+  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, error: 'Please select a fruit.' },
+};
+
+export const WithHint: Story = {
+  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, hint: 'Pick your favourite.' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, disabled: true, value: 'banana' },
+};
+
+export const WithDisabledOption: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana', disabled: true },
+      { value: 'cherry', label: 'Cherry' },
+    ],
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <Select
+        label="Favourite fruit"
+        name="fruit"
+        options={fruitOptions}
+        placeholder="Choose a fruit..."
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};