@boostdev/design-system-components 1.0.3 → 1.1.1

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -32,29 +32,29 @@
 
   /* Placement: top (default) */
   .--placement_top {
-    bottom: calc(100% + var(--bds-space_xs));
-    left: 50%;
+    inset-block-end: calc(100% + var(--bds-space_xs));
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   /* Placement: bottom */
   .--placement_bottom {
-    top: calc(100% + var(--bds-space_xs));
-    left: 50%;
+    inset-block-start: calc(100% + var(--bds-space_xs));
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   /* Placement: left */
   .--placement_left {
-    right: calc(100% + var(--bds-space_xs));
-    top: 50%;
+    inset-inline-end: calc(100% + var(--bds-space_xs));
+    inset-block-start: 50%;
     transform: translateY(-50%);
   }
 
   /* Placement: right */
   .--placement_right {
-    left: calc(100% + var(--bds-space_xs));
-    top: 50%;
+    inset-inline-start: calc(100% + var(--bds-space_xs));
+    inset-block-start: 50%;
     transform: translateY(-50%);
   }
 

package/src/components/ui/Tooltip/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from './Tooltip';
 import { Button } from '../../interaction/Button/Button';
 
 const meta = {
-  title: 'UI/Tooltip',
+  title: 'React/UI/Tooltip',
   component: Tooltip,
   argTypes: {
     placement: { control: 'radio', options: ['top', 'bottom', 'left', 'right'] },

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,12 +1,12 @@
 import { ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
 import css from './Tooltip.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface TooltipProps {
+interface TooltipProps extends WithClassName {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   children: ReactElement;
-  className?: string;
 }
 
 export function Tooltip({

package/src/components/ui/Typography/Typography.mdx

@@ -35,6 +35,19 @@ Renders a text element with a design-system variant. Decouples visual style from
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--typography_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour override</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Defaults to the semantically correct element for each variant (`h1`–`h3`, `p`)

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

@@ -0,0 +1,56 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Typography.native.stories';
+
+<Meta of={Stories} />
+
+# Typography (React Native)
+
+React Native typography component wrapping `Text` with semantic variants. Use instead of bare `<Text>` to ensure consistent sizing, weight, and line-height from the design token scale.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Typography } from '@boostdev/components';
+
+<Typography variant="h1">Page title</Typography>
+<Typography variant="body">Body copy text.</Typography>
+```
+
+## Examples
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+### Heading 1
+<Canvas of={Stories.Heading1} />
+
+### Heading 2
+<Canvas of={Stories.Heading2} />
+
+### Heading 3
+<Canvas of={Stories.Heading3} />
+
+### Body
+<Canvas of={Stories.Body} />
+
+### Body small
+<Canvas of={Stories.BodySmall} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Typographic scale |
+| `children` | `ReactNode` | — | Text content |
+| `style` | `StyleProp<TextStyle>` | — | Override text styles |
+
+## Accessibility
+
+- `h1`/`h2`/`h3` variants set `accessibilityRole="header"` automatically
+- Override with the `accessibilityRole` prop if the visual hierarchy doesn't match the semantic hierarchy

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Typography } from './Typography.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Typography',
+  component: Typography,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Heading1: Story = { args: { children: 'Heading 1', variant: 'h1' } };
+export const Heading2: Story = { args: { children: 'Heading 2', variant: 'h2' } };
+export const Heading3: Story = { args: { children: 'Heading 3', variant: 'h3' } };
+export const Body: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body' } };
+export const BodySmall: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body_s' } };
+export const AllVariants: Story = {
+  args: { children: '' },
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <Typography variant="h1">Heading 1</Typography>
+        <Typography variant="h2">Heading 2</Typography>
+        <Typography variant="h3">Heading 3</Typography>
+        <Typography variant="body">Body — The quick brown fox jumps over the lazy dog.</Typography>
+        <Typography variant="body_s">Body Small — The quick brown fox jumps over the lazy dog.</Typography>
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+
+interface TypographyProps {
+  variant?: TypographyVariant;
+  children: ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body,
+  },
+  h1: {
+    fontSize: font.size.heading1,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading1,
+  },
+  h2: {
+    fontSize: font.size.heading2,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading2,
+  },
+  h3: {
+    fontSize: font.size.heading3,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading3,
+  },
+  body: {
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+  },
+  body_s: {
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+  },
+});
+
+const accessibilityRoles: Record<TypographyVariant, 'header' | 'text'> = {
+  h1: 'header',
+  h2: 'header',
+  h3: 'header',
+  body: 'text',
+  body_s: 'text',
+};
+
+export function Typography({ variant = 'body', children, style }: TypographyProps) {
+  const { colors } = useTheme();
+  return (
+    <Text
+      accessibilityRole={accessibilityRoles[variant]}
+      style={[styles.base, styles[variant], { color: colors.colorOnBg }, style]}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/components/ui/Typography/Typography.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from './Typography';
 
 const meta = {
-  title: 'UI/Typography',
+  title: 'React/UI/Typography',
   component: Typography,
   argTypes: {
     variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },

package/src/components/ui/Typography/Typography.tsx

@@ -1,14 +1,14 @@
 import { ReactNode, ElementType } from 'react';
 import css from './Typography.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 
-interface TypographyProps {
+interface TypographyProps extends WithClassName {
   variant?: TypographyVariant;
   component?: ElementType;
   children: ReactNode;
-  className?: string;
 }
 
 const variantToElement: Record<TypographyVariant, ElementType> = {

package/src/css/bdc.css

@@ -55,6 +55,14 @@
     --bdc_color--focus: var(--bds-color_interactive);
     --bdc_color--error: var(--bds-color_error);
 
+    /* Active / selected state colours — override these to theme all filled form controls globally */
+    --bdc-color_active:            var(--bds-color_green);
+    --bdc-color_on-active:         var(--bds-color_on-green);
+    --bdc-color_active--subtle:    var(--bds-color_green--subtle);
+    --bdc-color_on-active--subtle: var(--bds-color_on-green--subtle);
+    --bdc-color_active--strong:    var(--bds-color_green--strong);
+    --bdc-color_on-active--strong: var(--bds-color_on-green--strong);
+
     /* Outline geometry */
     --bdc-outline_width:  1px;
     --bdc-outline_offset: -1px; /* inset — appears inside the element like a traditional border */

package/src/index.ts

@@ -73,3 +73,4 @@ export type { IconWrapperProps } from './components/layout/IconWrapper';
 
 // Utilities
 export { cn } from '@boostdev/design-system-foundation';
+export type { WithClassName } from './types';

package/src/native/ThemeContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { colors } from './tokens';
+
+type ThemeColors = typeof colors.light | typeof colors.dark;
+
+interface ThemeContextValue {
+  colors: ThemeColors;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const scheme = useColorScheme();
+  const isDark = scheme === 'dark';
+  const value = useMemo<ThemeContextValue>(
+    () => ({ colors: isDark ? colors.dark : colors.light, isDark }),
+    [isDark],
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

package/src/native/tokens.ts

@@ -0,0 +1,13 @@
+import { colors, spacing, font, border, zIndex, animation } from '@boostdev/design-system-foundation/native';
+
+export { colors, spacing, font, border, zIndex, animation };
+
+/** Absolute lineHeight values for React Native (ratio × fontSize). */
+export const lineHeight = {
+  display: Math.round(font.size.display * font.lineHeight.display),
+  heading1: Math.round(font.size.heading1 * font.lineHeight.heading),
+  heading2: Math.round(font.size.heading2 * font.lineHeight.heading),
+  heading3: Math.round(font.size.heading3 * font.lineHeight.heading),
+  body: Math.round(font.size.body * font.lineHeight.body),
+  bodyS: Math.round(font.size.bodyS * font.lineHeight.body),
+} as const;

package/src/native.ts

@@ -0,0 +1,39 @@
+// React Native component barrel
+// Explicitly imports *.native.tsx variants so tsup compiles them into dist/native/index.js.
+// Metro resolves this via the "react-native" export condition in package.json.
+
+// Infrastructure
+export { ThemeProvider, useTheme } from './native/ThemeContext';
+
+// UI
+export { Typography } from './components/ui/Typography/Typography.native';
+export { Badge } from './components/ui/Badge/Badge.native';
+export { Avatar } from './components/ui/Avatar/Avatar.native';
+export { Separator } from './components/ui/Separator/Separator.native';
+export { Loading } from './components/ui/Loading/Loading.native';
+export { Progress } from './components/ui/Progress/Progress.native';
+export { Skeleton } from './components/ui/Skeleton/Skeleton.native';
+export { Alert } from './components/ui/Alert/Alert.native';
+export { NotificationBanner } from './components/ui/NotificationBanner/NotificationBanner.native';
+
+// Layout
+export { Card } from './components/layout/Card/Card.native';
+export { SectionHeader } from './components/layout/SectionHeader/SectionHeader.native';
+export { IconWrapper } from './components/layout/IconWrapper/IconWrapper.native';
+export type { IconWrapperProps } from './components/layout/IconWrapper/IconWrapper.native';
+export { ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
+export type { ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
+
+// Interaction
+export { Button } from './components/interaction/Button/Button.native';
+export type { ButtonProps } from './components/interaction/Button/Button.native';
+export { Switch } from './components/interaction/form/Switch/Switch.native';
+export { Checkbox } from './components/interaction/form/Checkbox/Checkbox.native';
+export { Radio } from './components/interaction/form/Radio/Radio.native';
+
+// Atoms
+export { Label } from './components/interaction/form/atoms/Label.native';
+export { Message } from './components/interaction/form/atoms/Message.native';
+
+// Tokens (re-exported for convenience)
+export { colors, spacing, font, border, zIndex, animation, lineHeight } from './native/tokens';

package/src/polyfill-invoker-commands.ts

@@ -0,0 +1,68 @@
+/**
+ * Invoker Commands API polyfill (Baseline 2025).
+ *
+ * Handles `commandfor` / `command` attributes on <button> elements for browsers
+ * that don't yet support the native API. Dispatches a synthetic `command` event
+ * on the target element before performing the action — identical to native
+ * behaviour — so any existing `command` event listeners continue to work.
+ *
+ * Supports the dialog-specific commands used by this library:
+ *   command="show-modal"  →  dialog.showModal()
+ *   command="close"       →  dialog.close()
+ *
+ * Installation is idempotent and SSR-safe. The function is called automatically
+ * when the Dialog component is imported; consumers do not need to call it.
+ */
+
+let installed = false;
+
+export function installInvokerCommandsPolyfill(): void {
+  if (installed) return;
+  if (typeof window === 'undefined') return;
+  if ('command' in HTMLButtonElement.prototype) return; // native support present
+
+  installed = true;
+
+  document.addEventListener('click', (e: MouseEvent) => {
+    const button = (e.target as Element | null)?.closest<HTMLButtonElement>('button[commandfor]');
+    if (!button) return;
+
+    const targetId = button.getAttribute('commandfor');
+    const command = button.getAttribute('command');
+    if (!targetId || !command) return;
+
+    const target = document.getElementById(targetId);
+    if (!target) return;
+
+    // Dispatch a synthetic command event that mirrors the native CommandEvent.
+    const commandEvent = new Event('command', { cancelable: true, bubbles: false });
+    Object.defineProperty(commandEvent, 'command', { value: command, configurable: true });
+    Object.defineProperty(commandEvent, 'source', { value: button, configurable: true });
+    const notCancelled = target.dispatchEvent(commandEvent);
+
+    if (!notCancelled) return;
+
+    if (target instanceof HTMLDialogElement) {
+      if (command === 'show-modal' && !target.open) {
+        target.showModal();
+      } else if (command === 'close' && target.open) {
+        target.close();
+      }
+    } else if (target.hasAttribute('popover') && 'showPopover' in target) {
+      // Popover API commands — Popover API is Baseline 2024 so showPopover exists
+      // in any browser that lacks native invoker command support.
+      const popover = target as HTMLElement & {
+        showPopover(): void;
+        hidePopover(): void;
+        togglePopover(force?: boolean): boolean;
+      };
+      if (command === 'toggle-popover') {
+        popover.togglePopover();
+      } else if (command === 'show-popover') {
+        popover.showPopover();
+      } else if (command === 'hide-popover') {
+        popover.hidePopover();
+      }
+    }
+  });
+}

package/src/react-augment.d.ts

@@ -0,0 +1,32 @@
+// This file MUST be a module (not a global script) so that `declare module 'react'`
+// is treated as an augmentation that merges with @types/react rather than as an
+// ambient module declaration that would shadow @types/react entirely.
+// The `export {}` below is what makes TypeScript treat this as a module.
+export {};
+
+// CSS Anchor Positioning properties — not yet in React's CSSProperties types.
+declare module 'react' {
+  interface CSSProperties {
+    anchorName?: string;
+    positionAnchor?: string;
+  }
+
+  // Invoker Commands API (Baseline 2025) — not yet in @types/react.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ButtonHTMLAttributes<T> {
+    commandfor?: string;
+    command?: string;
+  }
+}
+
+// CommandEvent and its entry in the DOM event map — not yet in TypeScript's lib.dom.
+declare global {
+  interface CommandEvent extends Event {
+    readonly command: string;
+    readonly source: Element;
+  }
+
+  interface HTMLElementEventMap {
+    command: CommandEvent;
+  }
+}

package/src/stories/DesignSystem/DarkMode.mdx

@@ -0,0 +1,130 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Design System/Dark Mode" />
+
+# Dark Mode
+
+All components adapt to dark mode automatically. No extra CSS imports or component changes are needed — switching the theme updates every token at once.
+
+## How it works
+
+The design system foundation ships two sets of semantic tokens: one for light mode and one for dark mode. When dark mode is active, the `--bds-color_*` tokens remap to their dark counterparts. Because every component is built on these tokens, the entire UI responds in a single cascade update.
+
+## Enabling dark mode
+
+### Via `data-theme` attribute (recommended)
+
+Set `data-theme="dark"` on a container element — typically `<html>` for a global switch, or any wrapper for a scoped one.
+
+```html
+<!-- global dark mode -->
+<html data-theme="dark">
+
+<!-- scoped dark mode (only this subtree) -->
+<div data-theme="dark">
+  <Button>Dark button</Button>
+</div>
+```
+
+Remove the attribute (or set `data-theme="light"`) to return to light mode.
+
+### Via `prefers-color-scheme` (automatic)
+
+No attribute needed. When a user has dark mode enabled at the OS level, the design system tokens switch automatically:
+
+```css
+/* this is built into @boostdev/design-system-foundation — nothing to add */
+@media (prefers-color-scheme: dark) {
+  :root { /* dark token values */ }
+}
+```
+
+`data-theme` always takes precedence over `prefers-color-scheme`, so you can override the system preference.
+
+## Building a theme toggle
+
+A minimal React hook that syncs with the system preference and lets the user override it:
+
+```tsx
+import { useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+function getSystemTheme(): Theme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem('theme') as Theme) ?? getSystemTheme()
+  );
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggle = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+
+  return { theme, toggle };
+}
+```
+
+Usage:
+
+```tsx
+function ThemeToggle() {
+  const { theme, toggle } = useTheme();
+  return (
+    <Button onClick={toggle}>
+      {theme === 'dark' ? 'Switch to light' : 'Switch to dark'}
+    </Button>
+  );
+}
+```
+
+## Customising tokens in dark mode
+
+Override any token in `@layer tokens.override` — the rule applies regardless of the active theme unless you scope it:
+
+```css
+@import "@boostdev/design-system-foundation/css";
+
+/* override for all themes */
+@layer tokens.override {
+  :root {
+    --bds-color_green: oklch(60% 0.15 145);
+  }
+}
+
+/* override for dark mode only */
+@layer tokens.override {
+  [data-theme="dark"],
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bds-color_green: oklch(75% 0.15 145);
+    }
+  }
+}
+```
+
+## Component-level dark mode overrides
+
+Use component CSS variables to restyle a specific component in dark mode without touching global tokens:
+
+```css
+/* make all Tooltips use a high-contrast dark style in both themes */
+.my-app {
+  --tooltip_bg: #1a1a1a;
+  --tooltip_text: #f5f5f5;
+}
+
+/* only override in dark mode */
+[data-theme="dark"] .my-card {
+  --card_color: #1e1e1e;
+}
+```
+
+## Testing dark mode in Storybook
+
+Use the **Theme** toolbar toggle in the top bar to switch between light and dark mode while browsing stories. This sets `data-theme` on the story canvas root.