@boostdev/design-system-components 1.2.3 → 1.2.5

package/dist/utils.cjs

@@ -0,0 +1,30 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  cn: () => import_design_system_foundation.cn
+});
+module.exports = __toCommonJS(utils_exports);
+var import_design_system_foundation = require("@boostdev/design-system-foundation");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cn
+});

package/dist/utils.d.cts

@@ -0,0 +1,8 @@
+export { cn } from '@boostdev/design-system-foundation';
+
+/** Allows consumers to pass a CSS class to the component's root element. */
+type WithClassName = {
+    className?: string | undefined;
+};
+
+export type { WithClassName };

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+export { cn } from '@boostdev/design-system-foundation';
+
+/** Allows consumers to pass a CSS class to the component's root element. */
+type WithClassName = {
+    className?: string | undefined;
+};
+
+export type { WithClassName };

package/dist/utils.js

@@ -0,0 +1,5 @@
+// src/utils.ts
+import { cn } from "@boostdev/design-system-foundation";
+export {
+  cn
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -36,6 +36,11 @@
       "import": "./dist/client.js",
       "require": "./dist/client.cjs"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
     "./web-components": {
       "types": "./dist/web-components/index.d.ts",
       "import": "./dist/web-components/index.js"
@@ -279,7 +284,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^1.0.5",
+    "@boostdev/design-system-foundation": "^1.0.6",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
@@ -310,10 +315,11 @@
     "typescript": "^5.8",
     "typescript-eslint": "^8",
     "vite": "^5.4.21",
-    "vitest": "^3"
+    "vitest": "^3",
+    "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@boostdev/design-system-foundation": ">=1.0.4",
+    "@boostdev/design-system-foundation": ">=1.0.6",
     "react": ">=18",
     "react-dom": ">=18",
     "react-native": ">=0.70"

package/src/client.ts

@@ -1 +1,7 @@
+/**
+ * Client entry point — identical exports to the root, but with a 'use client'
+ * banner injected by tsup. Use this import path in Next.js App Router:
+ *
+ *   import { Button } from '@boostdev/design-system-components/client';
+ */
 export * from './index';

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.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.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 />,
+};