@boostdev/design-system-components 1.0.2 → 1.1.0

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

@@ -1,11 +1,11 @@
 import css from './Pagination.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface PaginationProps {
+interface PaginationProps extends WithClassName {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
-  className?: string;
 }
 
 function getPageRange(current: number, total: number): (number | '...')[] {

package/src/components/ui/Progress/Progress.mdx

@@ -40,7 +40,7 @@ Horizontal progress bar communicating completion towards a goal.
 <tr><th>Variable</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--bds-active)`)</td></tr>
+<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--bdc-color_active)`)</td></tr>
 <tr><td>`--progress_color-track`</td><td>Empty track colour</td></tr>
 </tbody>
 </table>

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

@@ -11,7 +11,7 @@
     justify-content: space-between;
     align-items: baseline;
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .value {
@@ -21,7 +21,7 @@
   .track {
     width: 100%;
     height: var(--progress_height, var(--bds-space_xs));
-    background-color: var(--bds-bg--subtle);
+    background-color: var(--bds-color_bg--subtle);
     border-radius: 999px;
     overflow: hidden;
   }
@@ -32,7 +32,7 @@
 
   .fill {
     height: 100%;
-    background-color: var(--progress_color-active, var(--bds-active));
+    background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: 999px;
     transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

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

@@ -11,11 +11,11 @@
   }
 
   .track {
-    stroke: var(--bds-bg--subtle);
+    stroke: var(--bds-color_bg--subtle);
   }
 
   .fill {
-    stroke: var(--progressCircle_color-active, var(--bds-active));
+    stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
@@ -24,7 +24,7 @@
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
     font-variant-numeric: tabular-nums;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     line-height: 1;
   }
 

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

@@ -1,7 +1,7 @@
 @layer component {
   .separator {
     border: none;
-    background-color: var(--separator_color, var(--bds-on-bg));
+    background-color: var(--separator_color, var(--bds-color_on-bg));
   }
 
   .separator.--horizontal {

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

@@ -2,9 +2,9 @@
   .skeleton {
     background: linear-gradient(
       90deg,
-      var(--bds-grey--subtle) 25%,
-      var(--bds-bg) 50%,
-      var(--bds-grey--subtle) 75%
+      var(--bds-color_grey--subtle) 25%,
+      var(--bds-color_bg) 50%,
+      var(--bds-color_grey--subtle) 75%
     );
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;

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.module.css

@@ -5,14 +5,14 @@
     inset-inline-start: var(--bds-space_s);
     z-index: var(--z_overlay);
     padding: var(--bds-space_xs) var(--bds-space_m);
-    background-color: var(--bds-bg);
-    color: var(--bds-on-bg);
+    background-color: var(--bds-color_bg);
+    color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     border-radius: var(--bds-border_radius--s);
     text-decoration: none;
 
-    --bdc_color: var(--color_focus, var(--bds-interactive));
+    --bdc_color: var(--color_focus, var(--bds-color_interactive));
 
     border: var(--skip-link_border, none);
     outline: var(--bdc-outline_width) solid var(--bdc_color);

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

@@ -3,7 +3,7 @@
     width: 100%;
     overflow-x: auto;
     border: var(--table_border, none);
-    --bdc_color: var(--bds-bg--subtle);
+    --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
 
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -23,11 +23,11 @@
     text-align: start;
     padding: var(--bds-space_s) var(--bds-space_m);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .thead {
-    background-color: var(--bds-bg--subtle);
+    background-color: var(--bds-color_bg--subtle);
   }
 
   .th {
@@ -35,9 +35,9 @@
     text-align: start;
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
   }
 
   .th.--sortable {
@@ -52,7 +52,7 @@
     padding: var(--bds-space_s) var(--bds-space_m);
     width: 100%;
     cursor: pointer;
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body--s);
     transition: var(--bds-animation_transition);
@@ -66,7 +66,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .sortButton:hover {
-      color: var(--bds-on-bg);
+      color: var(--bds-color_on-bg);
     }
   }
 
@@ -80,7 +80,7 @@
 
   .sortIcon.--sort-active {
     opacity: 1;
-    color: var(--bds-interactive);
+    color: var(--bds-color_interactive);
   }
 
   .sortIcon.--sort-desc {
@@ -88,7 +88,7 @@
   }
 
   .tbody .tr {
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
 
@@ -98,13 +98,13 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tbody .tr:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
   .td {
     padding: var(--bds-space_s) var(--bds-space_m);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     vertical-align: middle;
   }
 

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>>;