@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Form/Switch',
   component: Switch,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
 } satisfies Meta<typeof Switch>;
 
@@ -27,9 +27,7 @@ export const Interactive: Story = {
   render: () => {
     const [value, setValue] = useState(false);
     return (
-      <ThemeProvider>
-        <Switch label="Enable feature" name="feature" value={value} onChange={setValue} />
-      </ThemeProvider>
+      <Switch label="Enable feature" name="feature" value={value} onChange={setValue} />
     );
   },
 };

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

@@ -0,0 +1,76 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Textarea.native.stories';
+
+<Meta of={Stories} />
+
+# Textarea (React Native)
+
+Multiline text input with label, optional hint, and error state. Uses a `TextInput` with `multiline` enabled and `textAlignVertical: 'top'`.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Textarea } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [bio, setBio] = useState('');
+  return (
+    <Textarea
+      label="Bio"
+      name="bio"
+      placeholder="Tell us about yourself..."
+      value={bio}
+      onChange={setBio}
+    />
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With placeholder
+<Canvas of={Stories.WithPlaceholder} />
+
+### 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) |
+| `value` | string | — | Controlled value |
+| `defaultValue` | string | — | Uncontrolled default value |
+| `placeholder` | string | — | Placeholder text |
+| `numberOfLines` | number | `4` | Number of visible lines |
+| `error` | string | — | Error message displayed below the input |
+| `hint` | string | — | Hint text displayed below the input |
+| `required` | boolean | `false` | Marks the field as required |
+| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
+| `onChange` | `(value: string) => void` | — | Called with the new text value |
+
+## Accessibility
+
+- The label is announced by screen readers via `accessibilityLabel`
+- Hint text is announced via `accessibilityHint`
+- `disabled` communicates the disabled state via `accessibilityState`

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

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Textarea } from './Textarea.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Textarea (native)', () => {
+  it('renders the label', () => {
+    renderWithTheme(<Textarea label="Message" name="message" />);
+    expect(screen.getByText('Message')).toBeInTheDocument();
+  });
+
+  it('renders with placeholder text', () => {
+    renderWithTheme(
+      <Textarea label="Bio" name="bio" placeholder="Tell us about yourself..." />,
+    );
+    expect(screen.getByPlaceholderText('Tell us about yourself...')).toBeInTheDocument();
+  });
+
+  it('renders with a value', () => {
+    renderWithTheme(
+      <Textarea label="Notes" name="notes" value="Some content" />,
+    );
+    expect(screen.getByDisplayValue('Some content')).toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    renderWithTheme(
+      <Textarea label="Message" name="message" error="Message is required." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Message is required.');
+  });
+
+  it('shows hint message', () => {
+    renderWithTheme(
+      <Textarea label="Message" name="message" hint="Minimum 20 characters." />,
+    );
+    expect(screen.getByText('Minimum 20 characters.')).toBeInTheDocument();
+  });
+
+  it('applies disabled opacity', () => {
+    const { container } = renderWithTheme(
+      <Textarea label="Notes" name="notes" disabled />,
+    );
+    const inputs = container.querySelectorAll('textarea, [style*="opacity"]');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Textarea } from './Textarea.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Textarea',
+  component: Textarea,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: 'Message', name: 'message' },
+};
+
+export const WithPlaceholder: Story = {
+  args: { label: 'Bio', name: 'bio', placeholder: 'Tell us about yourself...' },
+};
+
+export const WithError: Story = {
+  args: { label: 'Message', name: 'message', error: 'Message is required.' },
+};
+
+export const WithHint: Story = {
+  args: { label: 'Message', name: 'message', hint: 'Minimum 20 characters.' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Notes', name: 'notes', disabled: true, value: 'Read-only content.' },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <Textarea
+        label="Feedback"
+        name="feedback"
+        placeholder="Share your thoughts..."
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,108 @@
+import { ReactNode, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  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 TextareaProps {
+  label: ReactNode;
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  error?: string;
+  hint?: string;
+  disabled?: boolean;
+  numberOfLines?: number;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  textarea: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    paddingHorizontal: spacing.s,
+    paddingVertical: spacing.xs,
+    borderWidth: 1,
+    borderRadius: border.radius.xs,
+    minHeight: 100,
+    textAlignVertical: 'top',
+  },
+});
+
+export function Textarea({
+  label,
+  name,
+  value,
+  defaultValue,
+  placeholder,
+  error,
+  hint,
+  disabled = false,
+  numberOfLines = 4,
+  onChange,
+  onBlur,
+  onFocus,
+  style,
+}: Readonly<TextareaProps>) {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+
+  const borderColor = error
+    ? colors.colorError
+    : focused
+      ? colors.colorInteractive
+      : colors.colorOnBg;
+
+  return (
+    <View style={[styles.container, style]}>
+      <Label label={label} />
+      <TextInput
+        accessibilityLabel={typeof label === 'string' ? label : name}
+        accessibilityState={{ disabled }}
+        accessibilityHint={hint}
+        multiline
+        numberOfLines={numberOfLines}
+        value={value}
+        defaultValue={defaultValue}
+        placeholder={placeholder}
+        placeholderTextColor={colors.colorOnBgSubtle}
+        editable={!disabled}
+        onChangeText={onChange}
+        onFocus={() => {
+          setFocused(true);
+          onFocus?.();
+        }}
+        onBlur={() => {
+          setFocused(false);
+          onBlur?.();
+        }}
+        style={[
+          styles.textarea,
+          {
+            borderColor,
+            color: colors.colorOnBg,
+            backgroundColor: colors.colorBg,
+          },
+          disabled && { opacity: 0.4 },
+        ]}
+      />
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/atoms/Label.native.spec.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Label } from './Label.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Label (native)', () => {
+  it('renders the label text', () => {
+    renderWithTheme(<Label label="Email address" />);
+    expect(screen.getByText('Email address')).toBeInTheDocument();
+  });
+
+  it('renders ReactNode content as label', () => {
+    renderWithTheme(
+      <Label
+        label={
+          <span data-testid="custom-label">
+            Custom <strong>label</strong>
+          </span>
+        }
+      />,
+    );
+    expect(screen.getByTestId('custom-label')).toBeInTheDocument();
+  });
+
+  it('applies semibold font weight', () => {
+    renderWithTheme(<Label label="Name" />);
+    const label = screen.getByText('Name');
+    expect(label).toHaveStyle({ fontWeight: expect.stringMatching(/600|bold|semibold/) });
+  });
+
+  it('applies custom style when provided', () => {
+    renderWithTheme(<Label label="Name" style={{ marginBottom: 8 }} />);
+    const label = screen.getByText('Name');
+    expect(label).toHaveStyle({ marginBottom: 8 });
+  });
+});

package/src/components/interaction/form/atoms/Label.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Form/Label',
   component: Label,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'centered' },
 } satisfies Meta<typeof Label>;
 

package/src/components/interaction/form/atoms/Message.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Form/Message',
   component: Message,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     type: { control: 'select', options: ['hint', 'error'] },

package/src/components/layout/ButtonGroup/ButtonGroup.native.spec.tsx

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { ButtonGroup } from './ButtonGroup.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('ButtonGroup (native)', () => {
+  it('renders children', () => {
+    renderWithTheme(
+      <ButtonGroup>
+        <span data-testid="child-a">A</span>
+        <span data-testid="child-b">B</span>
+      </ButtonGroup>,
+    );
+    expect(screen.getByTestId('child-a')).toBeInTheDocument();
+    expect(screen.getByTestId('child-b')).toBeInTheDocument();
+  });
+
+  it('applies accessibilityLabel to the container', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup accessibilityLabel="Actions">
+        <span>OK</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).toHaveAttribute('aria-label', 'Actions');
+  });
+
+  it('renders without accessibilityLabel when not provided', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup>
+        <span>OK</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).not.toHaveAttribute('aria-label');
+  });
+
+  it('renders in row direction by default', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup>
+        <span>A</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).toHaveStyle({ flexDirection: 'row' });
+  });
+
+  it('renders in row direction for flow variant', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup variant="flow">
+        <span>A</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).toHaveStyle({ flexDirection: 'row' });
+  });
+
+  it('renders in row direction for content variant', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup variant="content">
+        <span>A</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).toHaveStyle({ flexDirection: 'row' });
+  });
+
+  it('renders in column direction for card variant', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup variant="card">
+        <span>A</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).toHaveStyle({ flexDirection: 'column' });
+  });
+
+  it('renders in column direction for modal variant', () => {
+    const { container } = renderWithTheme(
+      <ButtonGroup variant="modal">
+        <span>A</span>
+      </ButtonGroup>,
+    );
+    expect(container.firstChild).toHaveStyle({ flexDirection: 'column' });
+  });
+});

package/src/components/layout/ButtonGroup/ButtonGroup.native.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Layout/ButtonGroup',
   component: ButtonGroup,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     variant: { control: 'select', options: ['flow', 'card', 'modal', 'content'] },
@@ -20,31 +20,25 @@ type Story = StoryObj<typeof meta>;
 
 export const Flow: Story = {
   render: (args) => (
-    <ThemeProvider>
-      <ButtonGroup {...args} variant="flow">
-        <Button>Primary</Button>
-        <Button variant="ghost">Secondary</Button>
-      </ButtonGroup>
-    </ThemeProvider>
+    <ButtonGroup {...args} variant="flow">
+      <Button>Primary</Button>
+      <Button variant="ghost">Secondary</Button>
+    </ButtonGroup>
   ),
 };
 export const Card: Story = {
   render: (args) => (
-    <ThemeProvider>
-      <ButtonGroup {...args} variant="card">
-        <Button>Confirm</Button>
-        <Button variant="ghost">Cancel</Button>
-      </ButtonGroup>
-    </ThemeProvider>
+    <ButtonGroup {...args} variant="card">
+      <Button>Confirm</Button>
+      <Button variant="ghost">Cancel</Button>
+    </ButtonGroup>
   ),
 };
 export const Modal: Story = {
   render: (args) => (
-    <ThemeProvider>
-      <ButtonGroup {...args} variant="modal">
-        <Button>Save</Button>
-        <Button variant="ghost">Discard</Button>
-      </ButtonGroup>
-    </ThemeProvider>
+    <ButtonGroup {...args} variant="modal">
+      <Button>Save</Button>
+      <Button variant="ghost">Discard</Button>
+    </ButtonGroup>
   ),
 };

package/src/components/layout/Card/Card.native.spec.tsx

@@ -0,0 +1,102 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Card } from './Card.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Card (native)', () => {
+  it('renders children', () => {
+    renderWithTheme(
+      <Card>
+        <span data-testid="content">Hello</span>
+      </Card>,
+    );
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('renders as a View when onPress is not provided', () => {
+    const { container } = renderWithTheme(
+      <Card>
+        <span>Content</span>
+      </Card>,
+    );
+    expect(container.firstChild).not.toHaveAttribute('role');
+  });
+
+  it('renders as a Pressable with button role when onPress is provided', () => {
+    const handlePress = vi.fn();
+    renderWithTheme(
+      <Card onPress={handlePress} accessibilityLabel="Tap me">
+        <span>Content</span>
+      </Card>,
+    );
+    expect(screen.getByRole('button', { name: 'Tap me' })).toBeInTheDocument();
+  });
+
+  it('calls onPress when pressed', () => {
+    const handlePress = vi.fn();
+    renderWithTheme(
+      <Card onPress={handlePress} accessibilityLabel="Tap me">
+        <span>Content</span>
+      </Card>,
+    );
+    fireEvent.click(screen.getByRole('button'));
+    expect(handlePress).toHaveBeenCalledOnce();
+  });
+
+  it('applies accessibilityLabel to the pressable card', () => {
+    renderWithTheme(
+      <Card onPress={() => {}} accessibilityLabel="Product card">
+        <span>Content</span>
+      </Card>,
+    );
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Product card');
+  });
+
+  it('applies border for outlined variant', () => {
+    const { container } = renderWithTheme(
+      <Card variant="outlined">
+        <span>Content</span>
+      </Card>,
+    );
+    expect(container.firstChild).toHaveStyle({ borderWidth: 1 });
+  });
+
+  it('renders elevated variant without throwing', () => {
+    renderWithTheme(
+      <Card variant="elevated">
+        <span data-testid="elevated-content">Content</span>
+      </Card>,
+    );
+    expect(screen.getByTestId('elevated-content')).toBeInTheDocument();
+  });
+
+  it('renders with no padding when padding is none', () => {
+    const { container } = renderWithTheme(
+      <Card padding="none">
+        <span>Content</span>
+      </Card>,
+    );
+    expect(container.firstChild).toHaveStyle({ padding: 0 });
+  });
+
+  it('centers content when textAlign is center', () => {
+    const { container } = renderWithTheme(
+      <Card textAlign="center">
+        <span>Content</span>
+      </Card>,
+    );
+    expect(container.firstChild).toHaveStyle({ alignItems: 'center' });
+  });
+
+  it('aligns content to flex-end when textAlign is end', () => {
+    const { container } = renderWithTheme(
+      <Card textAlign="end">
+        <span>Content</span>
+      </Card>,
+    );
+    expect(container.firstChild).toHaveStyle({ alignItems: 'flex-end' });
+  });
+});

package/src/components/layout/Card/Card.native.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Layout/Card',
   component: Card,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
@@ -39,15 +39,13 @@ export const Pressable: Story = {
 };
 export const AllVariants: Story = {
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 320 }}>
-        {(['default', 'elevated', 'outlined'] as const).map(v => (
-          <Card key={v} variant={v} padding="medium">
-            <Typography variant="h3">{v.charAt(0).toUpperCase() + v.slice(1)}</Typography>
-            <Typography>Card with {v} variant.</Typography>
-          </Card>
-        ))}
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 320 }}>
+      {(['default', 'elevated', 'outlined'] as const).map(v => (
+        <Card key={v} variant={v} padding="medium">
+          <Typography variant="h3">{v.charAt(0).toUpperCase() + v.slice(1)}</Typography>
+          <Typography>Card with {v} variant.</Typography>
+        </Card>
+      ))}
+    </div>
   ),
 };

package/src/components/layout/Card/Card.native.tsx

@@ -32,7 +32,7 @@ const alignMap: Record<CardAlign, 'flex-start' | 'center' | 'flex-end'> = {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: border.radius.s,
+    borderRadius: border.radius.m,
     overflow: 'hidden',
   },
 });

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -3,7 +3,7 @@
     inline-size: 2em;
     block-size: 2em;
     font-size: 3em;
-    border-radius: 50%;
+    border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
     display: flex;
     align-items: center;
     justify-content: center;