@boostdev/design-system-components 1.0.3 → 1.1.1

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Progress } from './Progress.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Progress',
+  component: Progress,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <div style={{ width: 300 }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 60, label: 'Progress' } };
+export const WithLabel: Story = { args: { value: 40, label: 'Loading', showLabel: true } };
+export const Small: Story = { args: { value: 70, label: 'Small progress', size: 'small' } };
+export const Large: Story = { args: { value: 50, label: 'Large progress', size: 'large', showLabel: true } };
+export const Complete: Story = { args: { value: 100, label: 'Complete', showLabel: true } };
+export const Empty: Story = { args: { value: 0, label: 'Not started', showLabel: true } };

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

@@ -0,0 +1,84 @@
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type ProgressSize = 'small' | 'medium' | 'large';
+
+interface ProgressProps {
+  value: number;
+  max?: number;
+  label: string;
+  showLabel?: boolean;
+  size?: ProgressSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+const trackHeight: Record<ProgressSize, number> = {
+  small:  4,
+  medium: 8,
+  large:  12,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  labelRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: spacing.xxs,
+  },
+  labelText: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS,
+  },
+  track: {
+    width: '100%',
+    borderRadius: border.radius.xs,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: border.radius.xs,
+  },
+});
+
+export function Progress({
+  value,
+  max = 100,
+  label,
+  showLabel = false,
+  size = 'medium',
+  style,
+}: Readonly<ProgressProps>) {
+  const { colors } = useTheme();
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+  const height = trackHeight[size];
+
+  return (
+    <View style={[styles.container, style]}>
+      {showLabel && (
+        <View style={styles.labelRow}>
+          <Text style={[styles.labelText, { color: colors.colorOnBg }]}>{label}</Text>
+          <Text style={[styles.labelText, { color: colors.colorOnBgSubtle }]}>
+            {Math.round(percentage)}%
+          </Text>
+        </View>
+      )}
+      <View
+        style={[styles.track, { height, backgroundColor: colors.colorBgSubtle }]}
+        accessibilityRole="progressbar"
+        accessibilityLabel={label}
+        accessibilityValue={{ min: 0, max, now: value }}
+      >
+        <View
+          style={[
+            styles.fill,
+            { width: `${percentage}%`, backgroundColor: colors.colorInteractive },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Progress } from './Progress';
 
 const meta = {
-  title: 'UI/Progress',
+  title: 'React/UI/Progress',
   component: Progress,
   argTypes: {
     size: { control: 'radio', options: ['small', 'medium', 'large'] },

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

@@ -1,13 +1,13 @@
 import css from './Progress.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface ProgressProps {
+interface ProgressProps extends WithClassName {
   value: number;
   max?: number;
   label: string;
   showLabel?: boolean;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 export function Progress({

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

@@ -15,7 +15,7 @@
   }
 
   .fill {
-    stroke: var(--progressCircle_color-active, var(--bds-color_green));
+    stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ProgressCircle } from './ProgressCircle';
 
 const meta = {
-  title: 'UI/ProgressCircle',
+  title: 'React/UI/ProgressCircle',
   component: ProgressCircle,
 } satisfies Meta<typeof ProgressCircle>;
 

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

@@ -1,13 +1,13 @@
 import css from './ProgressCircle.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface ProgressCircleProps {
+interface ProgressCircleProps extends WithClassName {
   value: number;
   max?: number;
   label: string;
   showValue?: boolean;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 const SIZE_PX = { small: 40, medium: 64, large: 96 };

package/src/components/ui/Separator/Separator.mdx

@@ -23,6 +23,20 @@ Visual divider between content sections. Renders a semantic `<hr>` (horizontal)
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--separator_color`</td><td>`var(--bds-color_on-bg)`</td><td>Line colour</td></tr>
+<tr><td>`--separator_thickness`</td><td>`1px`</td><td>Line thickness (height for horizontal, width for vertical)</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Horizontal variant uses `<hr>` — natively announces a thematic break to screen readers

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

@@ -6,13 +6,13 @@
 
   .separator.--horizontal {
     display: block;
-    width: 100%;
-    height: var(--separator_thickness, 1px);
+    inline-size: 100%;
+    block-size: var(--separator_thickness, 1px);
   }
 
   .separator.--vertical {
     display: inline-block;
-    width: var(--separator_thickness, 1px);
+    inline-size: var(--separator_thickness, 1px);
     align-self: stretch;
   }
 }

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Separator } from './Separator.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Separator',
+  component: Separator,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <div style={{ width: 300 }}>
+        <Separator {...args} orientation="horizontal" />
+      </div>
+    </ThemeProvider>
+  ),
+};
+
+export const Vertical: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', height: 60, alignItems: 'stretch' }}>
+        <span>Left</span>
+        <div style={{ display: 'flex', margin: '0 8px' }}>
+          <Separator {...args} orientation="vertical" />
+        </div>
+        <span>Right</span>
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,32 @@
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    height: StyleSheet.hairlineWidth,
+    width: '100%',
+  },
+  vertical: {
+    width: StyleSheet.hairlineWidth,
+    alignSelf: 'stretch',
+  },
+});
+
+export function Separator({ orientation = 'horizontal', style }: Readonly<SeparatorProps>) {
+  const { colors } = useTheme();
+  return (
+    <View
+      accessibilityRole="none"
+      style={[
+        orientation === 'vertical' ? styles.vertical : styles.horizontal,
+        { backgroundColor: colors.colorBgSubtle },
+        style,
+      ]}
+    />
+  );
+}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Separator } from './Separator';
 
 const meta = {
-  title: 'UI/Separator',
+  title: 'React/UI/Separator',
   component: Separator,
   argTypes: {
     orientation: { control: 'radio', options: ['horizontal', 'vertical'] },

package/src/components/ui/Separator/Separator.tsx

@@ -1,9 +1,9 @@
 import css from './Separator.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface SeparatorProps {
+interface SeparatorProps extends WithClassName {
   orientation?: 'horizontal' | 'vertical';
-  className?: string;
 }
 
 export function Separator({ orientation = 'horizontal', className }: Readonly<SeparatorProps>) {

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

@@ -9,7 +9,7 @@
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: var(--bds-border_radius--xs);
-    min-height: var(--bds-space_m);
+    min-block-size: var(--bds-space_m);
   }
 }
 

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Skeleton } from './Skeleton.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Skeleton',
+  component: Skeleton,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  render: (args) => <Skeleton {...args} style={{ width: 200, height: 16 }} />,
+};
+export const Avatar: Story = {
+  render: (args) => <Skeleton {...args} style={{ width: 48, height: 48, borderRadius: 999 }} />,
+};
+export const Card: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: 280 }}>
+        <Skeleton style={{ width: 280, height: 160 }} />
+        <Skeleton style={{ width: 200, height: 16 }} />
+        <Skeleton style={{ width: 140, height: 14 }} />
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface SkeletonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  skeleton: {
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+});
+
+export function Skeleton({ style }: SkeletonProps) {
+  const { colors } = useTheme();
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const anim = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1,   duration: 700, useNativeDriver: true }),
+      ]),
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        styles.skeleton,
+        { backgroundColor: colors.colorBgSubtle, opacity },
+        style,
+      ]}
+    />
+  );
+}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Skeleton } from './Skeleton';
 
 const meta = {
-  title: 'UI/Skeleton',
+  title: 'React/UI/Skeleton',
   component: Skeleton,
 } satisfies Meta<typeof Skeleton>;
 

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -1,9 +1,8 @@
 import { cn } from '@boostdev/design-system-foundation';
 import css from './Skeleton.module.css';
+import type { WithClassName } from '../../../types';
 
-interface SkeletonProps {
-  className?: string;
-}
+type SkeletonProps = WithClassName;
 
 export function Skeleton({ className }: SkeletonProps) {
   return (

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SkipLink } from './SkipLink';
 
 const meta = {
-  title: 'UI/SkipLink',
+  title: 'React/UI/SkipLink',
   component: SkipLink,
   decorators: [
     Story => (

package/src/components/ui/SkipLink/SkipLink.tsx

@@ -1,13 +1,15 @@
 import css from './SkipLink.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface SkipLinkProps {
+interface SkipLinkProps extends WithClassName {
   href?: string;
   children?: string;
 }
 
-export function SkipLink({ href = '#main', children = 'Skip to main content' }: SkipLinkProps) {
+export function SkipLink({ href = '#main', children = 'Skip to main content', className }: SkipLinkProps) {
   return (
-    <a href={href} className={css.skipLink}>
+    <a href={href} className={cn(css.skipLink, className)}>
       {children}
     </a>
   );

package/src/components/ui/Table/Table.mdx

@@ -30,6 +30,20 @@ Data table with optional sortable columns and caption.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--table_border`</td><td>`none`</td><td>Container border</td></tr>
+<tr><td>`--table_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Wraps in `<table>` with `<thead>` and `<tbody>`

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

@@ -1,7 +1,7 @@
 @layer component {
   .wrapper {
-    width: 100%;
-    overflow-x: auto;
+    inline-size: 100%;
+    overflow-inline: auto;
     border: var(--table_border, none);
     --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
@@ -12,7 +12,7 @@
   }
 
   .table {
-    width: 100%;
+    inline-size: 100%;
     border-collapse: collapse;
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
@@ -37,7 +37,7 @@
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
 
   .th.--sortable {
@@ -50,7 +50,7 @@
     align-items: center;
     gap: var(--bds-space_xxs);
     padding: var(--bds-space_s) var(--bds-space_m);
-    width: 100%;
+    inline-size: 100%;
     cursor: pointer;
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
@@ -71,8 +71,8 @@
   }
 
   .sortIcon {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
     opacity: 0.4;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing),
       opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
@@ -88,12 +88,12 @@
   }
 
   .tbody .tr {
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
 
   .tbody .tr:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   @media (hover: hover) and (pointer: fine) {

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

@@ -5,7 +5,7 @@ import { Table } from './Table';
 type User = { name: string; role: string; status: string; joined: string };
 
 const meta = {
-  title: 'UI/Table',
+  title: 'React/UI/Table',
   component: Table,
 } satisfies Meta<typeof Table<User>>;
 

package/src/components/ui/Table/Table.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import css from './Table.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface TableColumn<Row> {
   key: string;
@@ -9,14 +10,13 @@ export interface TableColumn<Row> {
   render?: (row: Row) => ReactNode;
 }
 
-interface TableProps<Row extends Record<string, unknown>> {
+interface TableProps<Row extends Record<string, unknown>> extends WithClassName {
   columns: TableColumn<Row>[];
   rows: Row[];
   caption?: string;
   sortKey?: string;
   sortDirection?: 'asc' | 'desc';
   onSort?: (key: string, direction: 'asc' | 'desc') => void;
-  className?: string;
 }
 
 export function Table<Row extends Record<string, unknown>>({

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

@@ -6,7 +6,7 @@
 
   .tabList {
     display: flex;
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
     gap: var(--bds-space_xxs);
   }
 
@@ -19,8 +19,8 @@
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--tab_color, var(--bds-color_on-bg));
-    border-bottom: 2px solid var(--tab_border-color, transparent);
-    margin-bottom: -1px;
+    border-block-end: 2px solid var(--tab_border-color, transparent);
+    margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Tabs } from './Tabs';
 
 const meta = {
-  title: 'UI/Tabs',
+  title: 'React/UI/Tabs',
   component: Tabs,
 } satisfies Meta<typeof Tabs>;
 

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,6 +1,7 @@
 import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface TabItem {
   id: string;
@@ -9,10 +10,9 @@ export interface TabItem {
   disabled?: boolean;
 }
 
-interface TabsProps {
+interface TabsProps extends WithClassName {
   tabs: TabItem[];
   defaultTab?: string;
-  className?: string;
 }
 
 export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {

package/src/components/ui/Tooltip/Tooltip.mdx

@@ -36,6 +36,20 @@ Short contextual label that appears on hover or focus. Use to supplement icon bu
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--tooltip_bg`</td><td>`var(--bds-color_on-bg)`</td><td>Tooltip background colour</td></tr>
+<tr><td>`--tooltip_text`</td><td>`var(--bds-color_bg)`</td><td>Tooltip text colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Tooltip content is linked via `aria-describedby` on the trigger element