@boostdev/design-system-components 1.2.3 → 1.2.5

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

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { SectionHeader } from './SectionHeader.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('SectionHeader (native)', () => {
+  it('renders the title with header role', () => {
+    renderWithTheme(<SectionHeader title="Overview" />);
+    expect(screen.getByRole('heading', { name: 'Overview' })).toBeInTheDocument();
+  });
+
+  it('renders the subtitle when provided', () => {
+    renderWithTheme(<SectionHeader title="Overview" subtitle="A brief summary" />);
+    expect(screen.getByText('A brief summary')).toBeInTheDocument();
+  });
+
+  it('does not render subtitle when not provided', () => {
+    renderWithTheme(<SectionHeader title="Overview" />);
+    expect(screen.queryByText('A brief summary')).not.toBeInTheDocument();
+  });
+
+  it('aligns content to flex-start by default', () => {
+    const { container } = renderWithTheme(<SectionHeader title="Overview" />);
+    expect(container.firstChild).toHaveStyle({ alignItems: 'flex-start' });
+  });
+
+  it('aligns content to center when alignment is center', () => {
+    const { container } = renderWithTheme(
+      <SectionHeader title="Overview" alignment="center" />,
+    );
+    expect(container.firstChild).toHaveStyle({ alignItems: 'center' });
+  });
+
+  it('aligns content to flex-end when alignment is end', () => {
+    const { container } = renderWithTheme(
+      <SectionHeader title="Overview" alignment="end" />,
+    );
+    expect(container.firstChild).toHaveStyle({ alignItems: 'flex-end' });
+  });
+
+  it('renders title and subtitle together', () => {
+    renderWithTheme(
+      <SectionHeader title="Settings" subtitle="Manage your preferences" />,
+    );
+    expect(screen.getByRole('heading', { name: 'Settings' })).toBeInTheDocument();
+    expect(screen.getByText('Manage your preferences')).toBeInTheDocument();
+  });
+});

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

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Layout/SectionHeader',
   component: SectionHeader,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
@@ -27,12 +27,10 @@ export const Centered: Story = {
 };
 export const AllSizes: Story = {
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-        <SectionHeader size="large" title="Large Heading" subtitle="Large section subtitle." />
-        <SectionHeader size="medium" title="Medium Heading" subtitle="Medium section subtitle." />
-        <SectionHeader size="small" title="Small Heading" subtitle="Small section subtitle." />
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <SectionHeader size="large" title="Large Heading" subtitle="Large section subtitle." />
+      <SectionHeader size="medium" title="Medium Heading" subtitle="Medium section subtitle." />
+      <SectionHeader size="small" title="Small Heading" subtitle="Small section subtitle." />
+    </div>
   ),
 };

package/src/components/ui/Accordion/Accordion.native.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Accordion.native.stories';
+
+<Meta of={Stories} />
+
+# Accordion (React Native)
+
+React Native accordion component for stacked collapsible sections. By default only one section can be open at a time (exclusive mode). Set `allowMultiple` to permit multiple open sections.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { Accordion } from '@boostdev/components';
+
+<Accordion
+  items={[
+    { id: '1', title: 'Section one', content: <Text>First section content.</Text> },
+    { id: '2', title: 'Section two', content: <Text>Second section content.</Text> },
+  ]}
+/>
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With default open section
+<Canvas of={Stories.WithDefaultOpen} />
+
+### Allow multiple
+<Canvas of={Stories.AllowMultiple} />
+
+### With disabled item
+<Canvas of={Stories.WithDisabledItem} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `AccordionItem[]` | -- | Array of accordion sections |
+| `allowMultiple` | `boolean` | `false` | Allow multiple sections open simultaneously |
+| `defaultOpen` | `string[]` | `[]` | IDs of sections open initially |
+| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
+
+### AccordionItem
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `id` | `string` | Unique identifier |
+| `title` | `ReactNode` | Header label |
+| `content` | `ReactNode` | Panel content |
+| `disabled` | `boolean` | Prevents toggling |
+
+## Accessibility
+
+- Each header has `button` role with `expanded` state
+- Disabled items have `disabled` accessibility state and reduced opacity
+- Chevron indicators are hidden from the accessibility tree

package/src/components/ui/Accordion/Accordion.native.spec.tsx

@@ -0,0 +1,69 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Accordion } from './Accordion.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+const items = [
+  { id: '1', title: 'Section 1', content: <span>Content 1</span> },
+  { id: '2', title: 'Section 2', content: <span>Content 2</span> },
+  { id: '3', title: 'Section 3', content: <span>Content 3</span> },
+];
+
+describe('Accordion (native)', () => {
+  it('renders all section headers', () => {
+    renderWithTheme(<Accordion items={items} />);
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+    expect(screen.getByText('Section 3')).toBeInTheDocument();
+  });
+
+  it('hides all content by default', () => {
+    renderWithTheme(<Accordion items={items} />);
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
+  });
+
+  it('opens a section with defaultOpen', () => {
+    renderWithTheme(<Accordion items={items} defaultOpen={['2']} />);
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('toggles a section on press (exclusive mode)', () => {
+    renderWithTheme(<Accordion items={items} />);
+    fireEvent.click(screen.getByText('Section 1'));
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Section 2'));
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('allows multiple open sections when allowMultiple is true', () => {
+    renderWithTheme(<Accordion items={items} allowMultiple />);
+    fireEvent.click(screen.getByText('Section 1'));
+    fireEvent.click(screen.getByText('Section 2'));
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('does not toggle disabled items', () => {
+    const withDisabled = [
+      ...items,
+      { id: '4', title: 'Disabled', content: <span>Disabled content</span>, disabled: true },
+    ];
+    renderWithTheme(<Accordion items={withDisabled} />);
+    fireEvent.click(screen.getByText('Disabled'));
+    expect(screen.queryByText('Disabled content')).not.toBeInTheDocument();
+  });
+
+  it('shows content of open sections and has button role on headers', () => {
+    renderWithTheme(<Accordion items={items} defaultOpen={['1']} />);
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+  });
+});

package/src/components/ui/Accordion/Accordion.native.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Accordion } from './Accordion.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Accordion',
+  component: Accordion,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleItems = [
+  { id: '1', title: 'What is this library?', content: <Text>A design system component library built for React, React Native, and Web Components.</Text> },
+  { id: '2', title: 'How do I install it?', content: <Text>Run pnpm add @boostdev/components to add it to your project.</Text> },
+  { id: '3', title: 'Is it production ready?', content: <Text>The React components are stable. React Native components are in alpha.</Text> },
+];
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+  },
+};
+
+export const WithDefaultOpen: Story = {
+  args: {
+    items: sampleItems,
+    defaultOpen: ['1'],
+  },
+};
+
+export const AllowMultiple: Story = {
+  args: {
+    items: sampleItems,
+    allowMultiple: true,
+    defaultOpen: ['1', '2'],
+  },
+};
+
+export const WithDisabledItem: Story = {
+  args: {
+    items: [
+      ...sampleItems,
+      { id: '4', title: 'Disabled section', content: <Text>You cannot see this.</Text>, disabled: true },
+    ],
+  },
+};

package/src/components/ui/Accordion/Accordion.native.tsx

@@ -0,0 +1,141 @@
+import { ReactNode, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+export interface AccordionItem {
+  id: string;
+  title: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultOpen?: string[];
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    borderRadius: border.radius.s,
+  },
+  item: {
+    borderBottomWidth: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 44,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+  },
+  titleText: {
+    flex: 1,
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.body,
+  },
+  chevron: {
+    fontSize: font.size.bodyS,
+    marginStart: spacing.xs,
+  },
+  panel: {
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.m,
+  },
+  pressed: {
+    opacity: 0.75,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+export function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  style,
+}: Readonly<AccordionProps>) {
+  const { colors } = useTheme();
+  const [openIds, setOpenIds] = useState<string[]>(defaultOpen);
+
+  const toggle = (id: string) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setOpenIds(prev => {
+      const isOpen = prev.includes(id);
+      if (isOpen) return prev.filter(i => i !== id);
+      return allowMultiple ? [...prev, id] : [id];
+    });
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      {items.map((item, index) => {
+        const isOpen = openIds.includes(item.id);
+        const isLast = index === items.length - 1;
+
+        return (
+          <View
+            key={item.id}
+            style={[
+              styles.item,
+              { borderBottomColor: colors.colorBgSubtle },
+              isLast && { borderBottomWidth: 0 },
+            ]}
+          >
+            <Pressable
+              onPress={() => toggle(item.id)}
+              disabled={item.disabled}
+              accessibilityRole="button"
+              accessibilityState={{ expanded: isOpen, disabled: item.disabled }}
+              style={({ pressed }) => [
+                styles.header,
+                item.disabled && styles.disabled,
+                pressed && !item.disabled && styles.pressed,
+              ]}
+            >
+              <Text style={[styles.titleText, { color: colors.colorOnBg }]}>
+                {typeof item.title === 'string' ? item.title : item.title}
+              </Text>
+              <Text
+                style={[styles.chevron, { color: colors.colorOnBgSubtle }]}
+                importantForAccessibility="no"
+                accessibilityElementsHidden={true}
+              >
+                {isOpen ? '▾' : '▸'}
+              </Text>
+            </Pressable>
+            {isOpen && (
+              <View style={styles.panel} accessibilityRole="summary">
+                {item.content}
+              </View>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/ui/Alert/Alert.native.spec.tsx

@@ -0,0 +1,76 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Alert } from './Alert.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Alert (native)', () => {
+  it('renders children text', () => {
+    renderWithTheme(<Alert>Something happened</Alert>);
+    expect(screen.getByText('Something happened')).toBeInTheDocument();
+  });
+
+  it('renders the title when provided', () => {
+    renderWithTheme(<Alert title="Heads up">Details here</Alert>);
+    expect(screen.getByText('Heads up')).toBeInTheDocument();
+    expect(screen.getByText('Details here')).toBeInTheDocument();
+  });
+
+  it('does not render a title element when title is omitted', () => {
+    renderWithTheme(<Alert>No title alert</Alert>);
+    expect(screen.getByText('No title alert')).toBeInTheDocument();
+  });
+
+  it('renders an icon when provided', () => {
+    renderWithTheme(
+      <Alert icon={<Text>!</Text>}>With icon</Alert>,
+    );
+    expect(screen.getByText('!')).toBeInTheDocument();
+    expect(screen.getByText('With icon')).toBeInTheDocument();
+  });
+
+  it('has alert role for error variant', () => {
+    renderWithTheme(<Alert variant="error">Error message</Alert>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('has alert role for warning variant', () => {
+    renderWithTheme(<Alert variant="warning">Warning message</Alert>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('does not have alert role for info variant', () => {
+    renderWithTheme(<Alert variant="info">Info message</Alert>);
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('does not have alert role for success variant', () => {
+    renderWithTheme(<Alert variant="success">Success message</Alert>);
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('renders a dismiss button when onDismiss is provided', () => {
+    renderWithTheme(<Alert onDismiss={() => {}}>Dismissable</Alert>);
+    expect(screen.getByRole('button', { name: 'Dismiss alert' })).toBeInTheDocument();
+  });
+
+  it('calls onDismiss when dismiss button is pressed', () => {
+    const onDismiss = vi.fn();
+    renderWithTheme(<Alert onDismiss={onDismiss}>Dismissable</Alert>);
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss alert' }));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render a dismiss button when onDismiss is omitted', () => {
+    renderWithTheme(<Alert>No dismiss</Alert>);
+    expect(screen.queryByRole('button', { name: 'Dismiss alert' })).not.toBeInTheDocument();
+  });
+
+  it('accepts custom style', () => {
+    renderWithTheme(<Alert style={{ marginTop: 10 }}>Styled</Alert>);
+    expect(screen.getByText('Styled')).toBeInTheDocument();
+  });
+});

package/src/components/ui/Alert/Alert.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/UI/Alert',
   component: Alert,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
@@ -30,14 +30,12 @@ export const Dismissible: Story = {
 export const AllVariants: Story = {
   args: { children: '' },
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 400 }}>
-        {(['info', 'success', 'warning', 'error'] as const).map(v => (
-          <Alert key={v} variant={v} title={v.charAt(0).toUpperCase() + v.slice(1)}>
-            This is a {v} alert.
-          </Alert>
-        ))}
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 400 }}>
+      {(['info', 'success', 'warning', 'error'] as const).map(v => (
+        <Alert key={v} variant={v} title={v.charAt(0).toUpperCase() + v.slice(1)}>
+          This is a {v} alert.
+        </Alert>
+      ))}
+    </div>
   ),
 };

package/src/components/ui/Alert/Alert.native.tsx

@@ -58,20 +58,20 @@ export function Alert({
   const { colors } = useTheme();
   const isUrgent = variant === 'error' || variant === 'warning';
 
-  const variantColors: Record<AlertVariant, { bg: string; text: string }> = {
-    info:    { bg: colors.colorBlueSubtle,   text: colors.colorOnBlueSubtle },
-    success: { bg: colors.colorSuccessSubtle, text: colors.colorOnSuccessSubtle },
-    warning: { bg: colors.colorOrangeSubtle, text: colors.colorOnOrangeSubtle },
-    error:   { bg: colors.colorRedSubtle,    text: colors.colorOnRedSubtle },
+  const variantColors: Record<AlertVariant, { bg: string; text: string; border: string }> = {
+    info:    { bg: colors.colorBlueSubtle,   text: colors.colorOnBlueSubtle,    border: colors.colorBlue },
+    success: { bg: colors.colorSuccessSubtle, text: colors.colorOnSuccessSubtle, border: colors.colorSuccess },
+    warning: { bg: colors.colorOrangeSubtle, text: colors.colorOnOrangeSubtle,  border: colors.colorWarning },
+    error:   { bg: colors.colorRedSubtle,    text: colors.colorOnBg,            border: colors.colorError },
   };
 
-  const { bg, text } = variantColors[variant];
+  const { bg, text, border: borderColor } = variantColors[variant];
 
   return (
     <View
       accessibilityRole={isUrgent ? 'alert' : 'none'}
       accessibilityLiveRegion={isUrgent ? 'assertive' : 'polite'}
-      style={[styles.alert, { backgroundColor: bg }, style]}
+      style={[styles.alert, { backgroundColor: bg, borderStartWidth: spacing.s, borderStartColor: borderColor }, style]}
     >
       {icon && <View style={styles.icon}>{icon}</View>}
       <View style={styles.content}>

package/src/components/ui/Avatar/Avatar.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/UI/Avatar',
   component: Avatar,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'centered' },
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
@@ -23,12 +23,10 @@ export const Large: Story = { args: { name: 'Alex Brown', size: 'large' } };
 export const SingleName: Story = { args: { name: 'Alice', size: 'medium' } };
 export const AllSizes: Story = {
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-        {(['small', 'medium', 'large'] as const).map(s => (
-          <Avatar key={s} name="John Doe" size={s} />
-        ))}
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+      {(['small', 'medium', 'large'] as const).map(s => (
+        <Avatar key={s} name="John Doe" size={s} />
+      ))}
+    </div>
   ),
 };

package/src/components/ui/Avatar/Avatar.native.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, View, Text, Image, StyleProp, ViewStyle } from 'react-native';
-import { font } from '../../../native/tokens';
+import { font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
 type AvatarSize = 'small' | 'medium' | 'large';
@@ -29,7 +29,7 @@ function getInitials(name: string): string {
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 999,
+    borderRadius: border.radius.full,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/ui/Badge/Badge.native.spec.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Badge } from './Badge.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Badge (native)', () => {
+  it('renders children text', () => {
+    renderWithTheme(<Badge>New</Badge>);
+    expect(screen.getByText('New')).toBeInTheDocument();
+  });
+
+  it('defaults to primary variant', () => {
+    const { container } = renderWithTheme(<Badge>Default</Badge>);
+    expect(screen.getByText('Default')).toBeInTheDocument();
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with secondary variant', () => {
+    renderWithTheme(<Badge variant="secondary">Info</Badge>);
+    expect(screen.getByText('Info')).toBeInTheDocument();
+  });
+
+  it('renders with success variant', () => {
+    renderWithTheme(<Badge variant="success">Active</Badge>);
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('renders with error variant', () => {
+    renderWithTheme(<Badge variant="error">Failed</Badge>);
+    expect(screen.getByText('Failed')).toBeInTheDocument();
+  });
+
+  it('renders with warning variant', () => {
+    renderWithTheme(<Badge variant="warning">Pending</Badge>);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('accepts custom style', () => {
+    renderWithTheme(<Badge style={{ marginTop: 10 }}>Styled</Badge>);
+    expect(screen.getByText('Styled')).toBeInTheDocument();
+  });
+});

package/src/components/ui/Badge/Badge.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/UI/Badge',
   component: Badge,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'centered' },
   argTypes: {
     variant: { control: 'select', options: ['primary', 'secondary', 'success', 'error', 'warning'] },
@@ -25,12 +25,10 @@ export const Warning: Story = { args: { children: 'Warning', variant: 'warning'
 export const AllVariants: Story = {
   args: { children: '' },
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-        {(['primary', 'secondary', 'success', 'error', 'warning'] as const).map(v => (
-          <Badge key={v} variant={v}>{v}</Badge>
-        ))}
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+      {(['primary', 'secondary', 'success', 'error', 'warning'] as const).map(v => (
+        <Badge key={v} variant={v}>{v}</Badge>
+      ))}
+    </div>
   ),
 };