@boostdev/design-system-components 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -271,7 +271,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:css": "stylelint \"src/**/*.css\"",
-    "storybook": "storybook dev -p 6006 --no-manager-cache",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -279,7 +279,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^1.0.4",
+    "@boostdev/design-system-foundation": "^1.0.5",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",

package/src/components/interaction/Button/Button.module.css

@@ -36,7 +36,7 @@
     padding-inline: var(--bds-space_l);
     display: inline-flex;
     gap: var(--bds-space_xs);
-    border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+    border-radius: var(--button_radius, var(--bds-border_radius--full));
     align-items: center;
     cursor: pointer;
     scroll-padding-block-end: var(--bds-space_l);
@@ -76,7 +76,6 @@
   .button.--size_small {
     --button_height:    2.25em;
     --button_font-size: var(--bds-font_size--body--s);
-    --button_border_radius--s: var(--bds-border_radius--xs);
 
     padding-inline: var(--bds-space_m);
   }
@@ -89,7 +88,6 @@
 
   .button.--size_large {
     --button_font-size: var(--bds-font_size--heading-3);
-    --button_border_radius--s: var(--bds-border_radius--m);
 
     padding-inline: var(--bds-space_xl);
   }
@@ -137,7 +135,6 @@
   .button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: var(--bds-border_radius--s);
   }
 
   /* Default hover: outline appears, bg becomes page surface */

package/src/components/interaction/Button/Button.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Interaction/Button',
   component: Button,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'centered' },
   argTypes: {
     variant: { control: 'select', options: ['default', 'ghost'] },
@@ -27,16 +27,14 @@ export const Large: Story = { args: { children: 'Large', size: 'large' } };
 export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
 export const AllVariants: Story = {
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-        {(['default', 'ghost'] as const).map(v => (
-          <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-            {(['small', 'medium', 'large'] as const).map(s => (
-              <Button key={s} variant={v} size={s}>{v} {s}</Button>
-            ))}
-          </div>
-        ))}
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {(['default', 'ghost'] as const).map(v => (
+        <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          {(['small', 'medium', 'large'] as const).map(s => (
+            <Button key={s} variant={v} size={s}>{v} {s}</Button>
+          ))}
+        </div>
+      ))}
+    </div>
   ),
 };

package/src/components/interaction/Button/Button.native.tsx

@@ -19,9 +19,9 @@ export interface ButtonProps {
 }
 
 const sizeTokens: Record<ButtonSize, { height: number; px: number; fontSize: number; radius: number }> = {
-  small:  { height: 36,  px: spacing.m,   fontSize: font.size.bodyS,    radius: border.radius.xs },
-  medium: { height: 48,  px: spacing.m,   fontSize: font.size.body,     radius: border.radius.s },
-  large:  { height: 56,  px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.m },
+  small:  { height: 36,  px: spacing.m,   fontSize: font.size.bodyS,    radius: border.radius.full },
+  medium: { height: 48,  px: spacing.m,   fontSize: font.size.body,     radius: border.radius.full },
+  large:  { height: 56,  px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.full },
 };
 
 const styles = StyleSheet.create({

package/src/components/interaction/Dialog/Dialog.module.css

@@ -33,7 +33,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--dialog_close-radius, var(--bds-border_radius--circle));
     background-color: var(--bds-color_bg);
     color: currentcolor;
     border: var(--dialog_close-border, none);

package/src/components/interaction/Dialog/Dialog.native.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Dialog.native.stories';
+
+<Meta of={Stories} />
+
+# Dialog (React Native)
+
+A modal dialog overlay that centers content on screen with a semi-transparent backdrop. Built on React Native `Modal` with `transparent` background.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Dialog } from '@boostdev/components';
+
+const [open, setOpen] = useState(false);
+
+<Button onPress={() => setOpen(true)}>Open</Button>
+<Dialog isOpen={open} onClose={() => setOpen(false)} title="Confirm">
+  <Text>Are you sure?</Text>
+</Dialog>
+```
+
+Wrap your tree in `ThemeProvider` (once, at the app root):
+
+```tsx
+import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+
+export default function App() {
+  return <ThemeProvider><YourApp /></ThemeProvider>;
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Without title
+<Canvas of={Stories.WithoutTitle} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | `false` | Controls visibility of the dialog |
+| `onClose` | `() => void` | — | Called when backdrop or close button is pressed |
+| `title` | `string` | — | Optional title displayed at the top |
+| `children` | `ReactNode` | — | Dialog body content |
+| `style` | `StyleProp<ViewStyle>` | — | Override panel styles |
+
+## Accessibility
+
+- Backdrop press and close button both call `onClose`
+- Close button has `accessibilityLabel="Close dialog"`
+- Android back button triggers `onRequestClose` which calls `onClose`

package/src/components/interaction/Dialog/Dialog.native.spec.tsx

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Dialog } from './Dialog.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Dialog (native)', () => {
+  it('renders children when open', () => {
+    renderWithTheme(
+      <Dialog isOpen>
+        <span>Dialog body</span>
+      </Dialog>,
+    );
+    expect(screen.getByText('Dialog body')).toBeInTheDocument();
+  });
+
+  it('does not render children when closed', () => {
+    renderWithTheme(
+      <Dialog isOpen={false}>
+        <span>Hidden content</span>
+      </Dialog>,
+    );
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+  });
+
+  it('renders the title when provided', () => {
+    renderWithTheme(
+      <Dialog isOpen title="Confirm action">
+        <span>Body</span>
+      </Dialog>,
+    );
+    expect(screen.getByText('Confirm action')).toBeInTheDocument();
+  });
+
+  it('renders a close button with accessible label', () => {
+    renderWithTheme(
+      <Dialog isOpen onClose={() => {}}>
+        <span>Body</span>
+      </Dialog>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
+    expect(closeButtons.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <Dialog isOpen onClose={onClose}>
+        <span>Body</span>
+      </Dialog>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
+    // The inner close button (not the backdrop)
+    const innerClose = closeButtons[closeButtons.length - 1];
+    fireEvent.click(innerClose);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when backdrop is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <Dialog isOpen onClose={onClose}>
+        <span>Body</span>
+      </Dialog>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
+    // The first one is the backdrop
+    fireEvent.click(closeButtons[0]);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/interaction/Dialog/Dialog.native.stories.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Dialog } from './Dialog.native';
+import { Button } from '../Button/Button.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Interaction/Dialog',
+  component: Dialog,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog isOpen={open} onClose={() => setOpen(false)} title="Confirmation">
+        <Text>Are you sure you want to proceed with this action?</Text>
+        <View style={{ flexDirection: 'row', gap: 8, marginTop: 16 }}>
+          <Button variant="outline" onPress={() => setOpen(false)}>Cancel</Button>
+          <Button onPress={() => setOpen(false)}>Confirm</Button>
+        </View>
+      </Dialog>
+    </>
+  );
+}
+
+function DialogWithoutTitleDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setOpen(true)}>Open Dialog (no title)</Button>
+      <Dialog isOpen={open} onClose={() => setOpen(false)}>
+        <Text>This dialog has no title, just content.</Text>
+      </Dialog>
+    </>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DialogDemo />,
+};
+
+export const WithoutTitle: Story = {
+  render: () => <DialogWithoutTitleDemo />,
+};

package/src/components/interaction/Dialog/Dialog.native.tsx

@@ -0,0 +1,128 @@
+import { ReactNode } from 'react';
+import {
+  Modal,
+  View,
+  Pressable,
+  Text,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface DialogProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  title?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    padding: spacing.m,
+  },
+  panel: {
+    width: '100%',
+    maxWidth: 480,
+    borderRadius: border.radius.m,
+    padding: spacing.l,
+    paddingTop: spacing.xl,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing.m,
+  },
+  title: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold,
+    flex: 1,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: spacing.s,
+    end: spacing.s,
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: 20,
+    lineHeight: 24,
+  },
+});
+
+export function Dialog({
+  isOpen = false,
+  onClose,
+  title,
+  children,
+  style,
+}: Readonly<DialogProps>) {
+  const { colors } = useTheme();
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={styles.overlay}
+        onPress={onClose}
+        accessibilityRole="button"
+        accessibilityLabel="Close dialog"
+      >
+        <Pressable
+          style={[styles.panel, { backgroundColor: colors.colorGreySubtle }, style]}
+          onPress={() => {
+            /* prevent close when pressing content */
+          }}
+          accessibilityRole="none"
+        >
+          <Pressable
+            style={styles.closeButton}
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Close dialog"
+            hitSlop={8}
+          >
+            <Text
+              style={[styles.closeText, { color: colors.colorOnBgSubtle }]}
+              aria-hidden
+            >
+              {'\u2715'}
+            </Text>
+          </Pressable>
+
+          {!!title && (
+            <View style={styles.header}>
+              <Text style={[styles.title, { color: colors.colorOnGreySubtle }]}>
+                {title}
+              </Text>
+            </View>
+          )}
+
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}

package/src/components/interaction/Drawer/Drawer.module.css

@@ -78,7 +78,7 @@
     justify-content: center;
     inline-size: 2rem;
     block-size: 2rem;
-    border-radius: 50%;
+    border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }

package/src/components/interaction/Drawer/Drawer.native.mdx

@@ -0,0 +1,58 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Drawer.native.stories';
+
+<Meta of={Stories} />
+
+# Drawer (React Native)
+
+A sliding panel that slides in from the bottom of the screen. Built on React Native `Modal` with `Animated` for smooth slide and backdrop fade transitions.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Drawer } from '@boostdev/components';
+
+const [open, setOpen] = useState(false);
+
+<Button onPress={() => setOpen(true)}>Open</Button>
+<Drawer isOpen={open} onClose={() => setOpen(false)} title="Settings">
+  <Text>Drawer content here.</Text>
+</Drawer>
+```
+
+Wrap your tree in `ThemeProvider` (once, at the app root):
+
+```tsx
+import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+
+export default function App() {
+  return <ThemeProvider><YourApp /></ThemeProvider>;
+}
+```
+
+## Examples
+
+<Canvas of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | — | Controls visibility of the drawer |
+| `onClose` | `() => void` | — | Called when backdrop or close button is pressed |
+| `title` | `ReactNode` | — | Title displayed in the drawer header |
+| `children` | `ReactNode` | — | Drawer body content |
+| `style` | `StyleProp<ViewStyle>` | — | Override panel styles |
+
+## Accessibility
+
+- Backdrop press and close button both call `onClose`
+- Close button has `accessibilityLabel="Close drawer"`
+- Android back button triggers `onRequestClose` which calls `onClose`
+- Backdrop fades in, panel slides from bottom

package/src/components/interaction/Drawer/Drawer.native.spec.tsx

@@ -0,0 +1,81 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Drawer } from './Drawer.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Drawer (native)', () => {
+  it('renders children when open', () => {
+    renderWithTheme(
+      <Drawer isOpen onClose={() => {}}>
+        <span>Drawer content</span>
+      </Drawer>,
+    );
+    expect(screen.getByText('Drawer content')).toBeInTheDocument();
+  });
+
+  it('does not render children when closed', () => {
+    renderWithTheme(
+      <Drawer isOpen={false} onClose={() => {}}>
+        <span>Hidden drawer</span>
+      </Drawer>,
+    );
+    expect(screen.queryByText('Hidden drawer')).not.toBeInTheDocument();
+  });
+
+  it('renders the title when provided', () => {
+    renderWithTheme(
+      <Drawer isOpen onClose={() => {}} title="Settings">
+        <span>Body</span>
+      </Drawer>,
+    );
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('renders a close button with accessible label', () => {
+    renderWithTheme(
+      <Drawer isOpen onClose={() => {}}>
+        <span>Body</span>
+      </Drawer>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close drawer' });
+    expect(closeButtons.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <Drawer isOpen onClose={onClose} title="Test">
+        <span>Body</span>
+      </Drawer>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close drawer' });
+    // The inner close button (not the backdrop)
+    const innerClose = closeButtons[closeButtons.length - 1];
+    fireEvent.click(innerClose);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when backdrop is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <Drawer isOpen onClose={onClose}>
+        <span>Body</span>
+      </Drawer>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close drawer' });
+    fireEvent.click(closeButtons[0]);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders panel when open', () => {
+    const { container } = renderWithTheme(
+      <Drawer isOpen onClose={() => {}}>
+        <span>Body</span>
+      </Drawer>,
+    );
+    expect(container).toBeInTheDocument();
+  });
+});

package/src/components/interaction/Drawer/Drawer.native.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Drawer } from './Drawer.native';
+import { Button } from '../Button/Button.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Interaction/Drawer',
+  component: Drawer,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DrawerDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setOpen(true)}>Open Drawer</Button>
+      <Drawer isOpen={open} onClose={() => setOpen(false)} title="Settings">
+        <Text>Drawer content slides in from the bottom.</Text>
+      </Drawer>
+    </>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DrawerDemo />,
+};