@boostdev/design-system-components 1.2.3 → 1.2.5

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

@@ -0,0 +1,85 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { NotificationBanner } from './NotificationBanner.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('NotificationBanner (native)', () => {
+  it('renders children text', () => {
+    renderWithTheme(<NotificationBanner>Update available</NotificationBanner>);
+    expect(screen.getByText('Update available')).toBeInTheDocument();
+  });
+
+  it('has alert role for error variant', () => {
+    renderWithTheme(
+      <NotificationBanner variant="error">Something went wrong</NotificationBanner>,
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('has alert role for warning variant', () => {
+    renderWithTheme(
+      <NotificationBanner variant="warning">Attention needed</NotificationBanner>,
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('does not have alert role for info variant', () => {
+    renderWithTheme(
+      <NotificationBanner variant="info">FYI</NotificationBanner>,
+    );
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('does not have alert role for success variant', () => {
+    renderWithTheme(
+      <NotificationBanner variant="success">All good</NotificationBanner>,
+    );
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('renders an action element when provided', () => {
+    renderWithTheme(
+      <NotificationBanner action={<Text>Retry</Text>}>
+        Failed to save
+      </NotificationBanner>,
+    );
+    expect(screen.getByText('Retry')).toBeInTheDocument();
+    expect(screen.getByText('Failed to save')).toBeInTheDocument();
+  });
+
+  it('renders a dismiss button when onDismiss is provided', () => {
+    renderWithTheme(
+      <NotificationBanner onDismiss={() => {}}>Dismissable</NotificationBanner>,
+    );
+    expect(
+      screen.getByRole('button', { name: 'Dismiss notification' }),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onDismiss when dismiss button is pressed', () => {
+    const onDismiss = vi.fn();
+    renderWithTheme(
+      <NotificationBanner onDismiss={onDismiss}>Dismissable</NotificationBanner>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss notification' }));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render a dismiss button when onDismiss is omitted', () => {
+    renderWithTheme(<NotificationBanner>No dismiss</NotificationBanner>);
+    expect(
+      screen.queryByRole('button', { name: 'Dismiss notification' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('accepts custom style', () => {
+    renderWithTheme(
+      <NotificationBanner style={{ marginTop: 10 }}>Styled</NotificationBanner>,
+    );
+    expect(screen.getByText('Styled')).toBeInTheDocument();
+  });
+});

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

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

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

@@ -43,20 +43,20 @@ export function NotificationBanner({
   const { colors } = useTheme();
   const isUrgent = variant === 'error' || variant === 'warning';
 
-  const variantColors: Record<BannerVariant, { 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<BannerVariant, { 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.banner, { backgroundColor: bg }, style]}
+      style={[styles.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style]}
     >
       <Text style={[styles.content, { color: text }]}>{children}</Text>
       {action}

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

@@ -0,0 +1,62 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Pagination.native.stories';
+
+<Meta of={Stories} />
+
+# Pagination (React Native)
+
+React Native pagination component for navigating between pages of content. Shows page numbers with ellipsis for large ranges, with Previous/Next navigation buttons.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { Pagination } from '@boostdev/components';
+
+<Pagination
+  currentPage={3}
+  totalPages={10}
+  onPageChange={(page) => setPage(page)}
+/>
+```
+
+## Examples
+
+### Default (first page)
+<Canvas of={Stories.Default} />
+
+### Middle page
+<Canvas of={Stories.MiddlePage} />
+
+### Last page
+<Canvas of={Stories.LastPage} />
+
+### Many pages (with ellipsis)
+<Canvas of={Stories.ManyPages} />
+
+### Single page
+<Canvas of={Stories.SinglePage} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `currentPage` | `number` | -- | The currently active page (1-based) |
+| `totalPages` | `number` | -- | Total number of pages |
+| `onPageChange` | `(page: number) => void` | -- | Called when a page button is pressed |
+| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
+
+## Accessibility
+
+- Container has `navigation` role with "Pagination" label
+- Previous/Next buttons are disabled at bounds
+- Active page is indicated with `selected` accessibility state
+- Each page button has a descriptive label (e.g. "Page 3")

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

@@ -0,0 +1,86 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Pagination } from './Pagination.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Pagination (native)', () => {
+  it('renders the navigation container', () => {
+    renderWithTheme(
+      <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />,
+    );
+    expect(screen.getByRole('navigation', { name: 'Pagination' })).toBeInTheDocument();
+  });
+
+  it('renders page buttons', () => {
+    renderWithTheme(
+      <Pagination currentPage={1} totalPages={3} onPageChange={() => {}} />,
+    );
+    expect(screen.getByRole('button', { name: 'Page 1' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 2' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 3' })).toBeInTheDocument();
+  });
+
+  it('renders the current page button', () => {
+    renderWithTheme(
+      <Pagination currentPage={2} totalPages={3} onPageChange={() => {}} />,
+    );
+    expect(screen.getByRole('button', { name: 'Page 2' })).toBeInTheDocument();
+  });
+
+  it('disables Previous on first page', () => {
+    renderWithTheme(
+      <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />,
+    );
+    expect(screen.getByRole('button', { name: 'Previous page' })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+  });
+
+  it('disables Next on last page', () => {
+    renderWithTheme(
+      <Pagination currentPage={5} totalPages={5} onPageChange={() => {}} />,
+    );
+    expect(screen.getByRole('button', { name: 'Next page' })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+  });
+
+  it('calls onPageChange with the next page when Next is pressed', () => {
+    const onPageChange = vi.fn();
+    renderWithTheme(
+      <Pagination currentPage={2} totalPages={5} onPageChange={onPageChange} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it('calls onPageChange with the previous page when Previous is pressed', () => {
+    const onPageChange = vi.fn();
+    renderWithTheme(
+      <Pagination currentPage={3} totalPages={5} onPageChange={onPageChange} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Previous page' }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it('calls onPageChange when a page number is pressed', () => {
+    const onPageChange = vi.fn();
+    renderWithTheme(
+      <Pagination currentPage={1} totalPages={5} onPageChange={onPageChange} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Page 2' }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it('shows ellipsis for large page ranges', () => {
+    renderWithTheme(
+      <Pagination currentPage={5} totalPages={20} onPageChange={() => {}} />,
+    );
+    expect(screen.getAllByText('...').length).toBeGreaterThanOrEqual(1);
+  });
+});

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Pagination } from './Pagination.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Pagination',
+  component: Pagination,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { currentPage: 1, totalPages: 5 },
+};
+
+export const MiddlePage: Story = {
+  args: { currentPage: 3, totalPages: 5 },
+};
+
+export const LastPage: Story = {
+  args: { currentPage: 5, totalPages: 5 },
+};
+
+export const ManyPages: Story = {
+  args: { currentPage: 5, totalPages: 20 },
+};
+
+export const SinglePage: Story = {
+  args: { currentPage: 1, totalPages: 1 },
+};
+
+function InteractiveDemo() {
+  const [page, setPage] = useState(1);
+  return (
+    <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
+  );
+}
+
+export const Interactive: Story = {
+  args: { currentPage: 1, totalPages: 10 },
+  render: () => <InteractiveDemo />,
+};

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

@@ -0,0 +1,157 @@
+import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+function getPageRange(current: number, total: number): (number | '...')[] {
+  const delta = 1;
+  const range: (number | '...')[] = [];
+
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
+      range.push(i);
+    } else if (range[range.length - 1] !== '...') {
+      range.push('...');
+    }
+  }
+
+  return range;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xxs,
+  },
+  button: {
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: border.radius.full,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: spacing.xxs,
+  },
+  buttonText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.body,
+  },
+  navText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.semibold,
+  },
+  ellipsis: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+    minWidth: 44,
+    minHeight: 44,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+  },
+  pressed: {
+    opacity: 0.75,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  style,
+}: Readonly<PaginationProps>) {
+  const { colors } = useTheme();
+  const pages = getPageRange(currentPage, totalPages);
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityRole={'navigation' as AccessibilityRole}
+      accessibilityLabel="Pagination"
+    >
+      <Pressable
+        onPress={() => onPageChange(currentPage - 1)}
+        disabled={currentPage <= 1}
+        accessibilityRole="button"
+        accessibilityLabel="Previous page"
+        accessibilityState={{ disabled: currentPage <= 1 }}
+        style={({ pressed }) => [
+          styles.button,
+          currentPage <= 1 && styles.disabled,
+          pressed && !currentPage && styles.pressed,
+        ]}
+      >
+        <Text style={[styles.navText, { color: colors.colorOnBg }]}>‹</Text>
+      </Pressable>
+
+      {pages.map((page, index) =>
+        page === '...' ? (
+          <Text
+            key={`ellipsis-${index}`}
+            style={[styles.ellipsis, { color: colors.colorOnBgSubtle }]}
+            importantForAccessibility="no"
+            accessibilityElementsHidden={true}
+          >
+            ...
+          </Text>
+        ) : (
+          <Pressable
+            key={page}
+            onPress={() => onPageChange(page)}
+            accessibilityRole="button"
+            accessibilityLabel={`Page ${page}`}
+            accessibilityState={{ selected: currentPage === page }}
+            style={({ pressed }) => [
+              styles.button,
+              currentPage === page && { backgroundColor: colors.colorInteractive },
+              pressed && styles.pressed,
+            ]}
+          >
+            <Text
+              style={[
+                styles.buttonText,
+                {
+                  color: currentPage === page
+                    ? colors.colorOnInteractive
+                    : colors.colorOnBg,
+                },
+                currentPage === page && { fontWeight: font.weight.semibold },
+              ]}
+            >
+              {page}
+            </Text>
+          </Pressable>
+        ),
+      )}
+
+      <Pressable
+        onPress={() => onPageChange(currentPage + 1)}
+        disabled={currentPage >= totalPages}
+        accessibilityRole="button"
+        accessibilityLabel="Next page"
+        accessibilityState={{ disabled: currentPage >= totalPages }}
+        style={({ pressed }) => [
+          styles.button,
+          currentPage >= totalPages && styles.disabled,
+          pressed && styles.pressed,
+        ]}
+      >
+        <Text style={[styles.navText, { color: colors.colorOnBg }]}>›</Text>
+      </Pressable>
+    </View>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Progress } from './Progress.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Progress (native)', () => {
+  it('has progressbar role with accessible label', () => {
+    renderWithTheme(<Progress value={50} label="Upload progress" />);
+    expect(screen.getByRole('progressbar', { name: 'Upload progress' })).toBeInTheDocument();
+  });
+
+  it('renders progressbar for various values', () => {
+    renderWithTheme(<Progress value={30} max={100} label="Loading" />);
+    expect(screen.getByRole('progressbar', { name: 'Loading' })).toBeInTheDocument();
+  });
+
+  it('respects a custom max value in percentage display', () => {
+    renderWithTheme(<Progress value={5} max={10} label="Steps" showLabel />);
+    expect(screen.getByText('50%')).toBeInTheDocument();
+  });
+
+  it('does not show label by default', () => {
+    renderWithTheme(<Progress value={60} label="Progress" />);
+    expect(screen.queryByText('Progress')).not.toBeInTheDocument();
+    expect(screen.queryByText('60%')).not.toBeInTheDocument();
+  });
+
+  it('shows label text and percentage when showLabel is true', () => {
+    renderWithTheme(<Progress value={60} label="Progress" showLabel />);
+    expect(screen.getByText('Progress')).toBeInTheDocument();
+    expect(screen.getByText('60%')).toBeInTheDocument();
+  });
+
+  it('clamps percentage display at 100%', () => {
+    renderWithTheme(<Progress value={150} max={100} label="Overflow" showLabel />);
+    expect(screen.getByText('100%')).toBeInTheDocument();
+  });
+
+  it('clamps percentage display at 0%', () => {
+    renderWithTheme(<Progress value={-10} max={100} label="Underflow" showLabel />);
+    expect(screen.getByText('0%')).toBeInTheDocument();
+  });
+
+  it('rounds the percentage to the nearest integer', () => {
+    renderWithTheme(<Progress value={33} max={100} label="Loading" showLabel />);
+    expect(screen.getByText('33%')).toBeInTheDocument();
+  });
+
+  it('defaults to medium size', () => {
+    renderWithTheme(<Progress value={50} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+});

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

@@ -9,7 +9,7 @@ const meta = {
   component: Progress,
   decorators: [
     (Story) => (
-      <ThemeProvider>
+      <ThemeProvider colorScheme="light">
         <div style={{ width: 300 }}>
           <Story />
         </div>

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

@@ -35,12 +35,12 @@ const styles = StyleSheet.create({
   },
   track: {
     width: '100%',
-    borderRadius: border.radius.xs,
+    borderRadius: border.radius.full,
     overflow: 'hidden',
   },
   fill: {
     height: '100%',
-    borderRadius: border.radius.xs,
+    borderRadius: border.radius.full,
   },
 });
 

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

@@ -0,0 +1,63 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './ProgressCircle.native.stories';
+
+<Meta of={Stories} />
+
+# ProgressCircle (React Native)
+
+React Native circular progress indicator. Displays progress as a ring with an optional percentage label in the center.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { ProgressCircle } from '@boostdev/components';
+
+<ProgressCircle value={75} label="Upload progress" showValue />
+<ProgressCircle value={50} label="Loading" size="large" />
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With value label
+<Canvas of={Stories.WithValue} />
+
+### Small
+<Canvas of={Stories.Small} />
+
+### Large
+<Canvas of={Stories.Large} />
+
+### Complete
+<Canvas of={Stories.Complete} />
+
+### Empty
+<Canvas of={Stories.Empty} />
+
+### All sizes
+<Canvas of={Stories.AllSizes} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | — | Current progress value |
+| `max` | `number` | `100` | Maximum value |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Circle dimensions (40, 64, 96px) |
+| `label` | `string` | — | Accessible label for the progress indicator |
+| `showValue` | `boolean` | `false` | Show percentage text in the center |
+| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
+
+## Accessibility
+
+- Uses `accessibilityRole="progressbar"` with `accessibilityValue` for min, max, and current
+- `label` prop provides the screen reader description
+- Percentage text is hidden from assistive technologies when `showValue` is true

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

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { ProgressCircle } from './ProgressCircle.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('ProgressCircle (native)', () => {
+  it('has progressbar role with accessible label', () => {
+    renderWithTheme(<ProgressCircle value={60} label="Upload progress" />);
+    expect(screen.getByRole('progressbar', { name: 'Upload progress' })).toBeInTheDocument();
+  });
+
+  it('renders the progressbar element', () => {
+    renderWithTheme(<ProgressCircle value={75} max={100} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('shows percentage text when showValue is true', () => {
+    renderWithTheme(<ProgressCircle value={60} label="Progress" showValue />);
+    expect(screen.getByText('60%')).toBeInTheDocument();
+  });
+
+  it('does not show percentage text by default', () => {
+    renderWithTheme(<ProgressCircle value={60} label="Progress" />);
+    expect(screen.queryByText('60%')).not.toBeInTheDocument();
+  });
+
+  it('clamps value at 100%', () => {
+    renderWithTheme(<ProgressCircle value={150} max={100} label="Overflow" showValue />);
+    expect(screen.getByText('100%')).toBeInTheDocument();
+  });
+
+  it('clamps value at 0%', () => {
+    renderWithTheme(<ProgressCircle value={-10} max={100} label="Underflow" showValue />);
+    expect(screen.getByText('0%')).toBeInTheDocument();
+  });
+});