@boostdev/design-system-components 1.0.2 → 1.1.0

package/src/components/ui/Calendar/Calendar.tsx

@@ -1,6 +1,7 @@
 import { useState, useId, KeyboardEvent } from 'react';
 import css from './Calendar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const DAY_LABELS: Record<string, string> = {
@@ -12,13 +13,12 @@ const MONTHS = [
   'July', 'August', 'September', 'October', 'November', 'December',
 ];
 
-interface CalendarProps {
+interface CalendarProps extends WithClassName {
   value?: Date;
   defaultValue?: Date;
   min?: Date;
   max?: Date;
   onChange?: (date: Date) => void;
-  className?: string;
 }
 
 function isSameDay(a: Date, b: Date): boolean {

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

@@ -33,10 +33,10 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    background-color: var(--bds-bg);
-    color: var(--bds-on-bg);
+    background-color: var(--bds-color_bg);
+    color: var(--bds-color_on-bg);
 
-    --bdc_color: var(--bds-on-bg);
+    --bdc_color: var(--bds-color_on-bg);
 
     border: none;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -59,7 +59,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 

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

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

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,11 +1,11 @@
 import { ReactNode, useRef, useId } from 'react';
 import css from './Carousel.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface CarouselProps {
+interface CarouselProps extends WithClassName {
   items: ReactNode[];
   label: string;
-  className?: string;
 }
 
 export function Carousel({ items, label, className }: Readonly<CarouselProps>) {

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

@@ -1,6 +1,6 @@
 @layer component {
   .collapsible {
-    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
+    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
     border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
     overflow: hidden;
   }
@@ -15,8 +15,8 @@
     cursor: pointer;
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body);
-    color: var(--collapsible_color, var(--bds-on-bg));
-    background-color: var(--collapsible_bg, var(--bds-bg));
+    color: var(--collapsible_color, var(--bds-color_on-bg));
+    background-color: var(--collapsible_bg, var(--bds-color_bg));
     user-select: none;
     transition: var(--bds-animation_transition);
   }
@@ -33,13 +33,13 @@
 
   @media (hover: hover) and (pointer: fine) {
     .summary:hover {
-      background-color: var(--collapsible_bg--hover, var(--bds-bg--subtle));
+      background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
   /* Separator when open */
   .collapsible[open] > .summary {
-    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
+    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
   }
 
   .summaryContent {
@@ -63,7 +63,7 @@
 
   .content {
     padding: var(--bds-space_m);
-    color: var(--collapsible_on-color, var(--bds-on-bg));
+    color: var(--collapsible_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }

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

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

package/src/components/ui/Collapsible/Collapsible.tsx

@@ -1,8 +1,9 @@
 import { HTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 import css from './Collapsible.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
+export interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
   /** The trigger label — always visible */
   summary: ReactNode;
   /** The content revealed when expanded */
@@ -18,7 +19,6 @@ export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement
    * (native <details name="…"> behaviour).
    */
   name?: string;
-  className?: string;
 }
 
 export function Collapsible({

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

@@ -6,7 +6,7 @@
     margin: 0;
     padding: 0;
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .group {
@@ -17,12 +17,12 @@
 
   .term {
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .details {
     margin: 0;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   /* Inline layout */

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

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

package/src/components/ui/DescriptionList/DescriptionList.tsx

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
 import css from './DescriptionList.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface DescriptionItem {
   term: ReactNode;
   details: ReactNode | ReactNode[];
 }
 
-interface DescriptionListProps {
+interface DescriptionListProps extends WithClassName {
   items: DescriptionItem[];
   layout?: 'stacked' | 'inline';
-  className?: string;
 }
 
 export function DescriptionList({ items, layout = 'stacked', className }: Readonly<DescriptionListProps>) {

package/src/components/ui/Link/Link.mdx

@@ -38,6 +38,20 @@ Styled anchor element with three visual variants. Renders as `<a>` by default, b
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--link_color`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Link text colour</td></tr>
+<tr><td>`--link_color-hover`</td><td>`var(--bds-color_blue--strong)`</td><td>Link text colour on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - External links add `target="_blank"` with `rel="noopener noreferrer"` and a visually-hidden "(opens in new tab)" label

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

@@ -15,23 +15,23 @@
 
   @media (hover: hover) and (pointer: fine) {
     .link:hover {
-      --link_color: var(--link_color-hover, var(--bds-blue--strong));
+      --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
     }
   }
 
   .--variant_default {
     --link_color:       var(--bds-color_interactive_on-bg);
-    --link_color-hover: var(--bds-blue--strong);
+    --link_color-hover: var(--bds-color_blue--strong);
   }
 
   .--variant_subtle {
-    --link_color:       var(--bds-on-bg);
+    --link_color:       var(--bds-color_on-bg);
     --link_color-hover: var(--bds-color_interactive_on-bg);
   }
 
   .--variant_standalone {
     --link_color:       var(--bds-color_interactive_on-bg);
-    --link_color-hover: var(--bds-blue--strong);
+    --link_color-hover: var(--bds-color_blue--strong);
 
     display: inline-flex;
     align-items: center;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from './Link';
 
 const meta = {
-  title: 'UI/Link',
+  title: 'React/UI/Link',
   component: Link,
   argTypes: {
     variant: { control: 'radio', options: ['default', 'subtle', 'standalone'] },

package/src/components/ui/Link/Link.tsx

@@ -1,14 +1,14 @@
 import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import css from './Link.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-type LinkOwnProps<T extends ElementType> = {
+type LinkOwnProps<T extends ElementType> = WithClassName & {
   as?: T;
   children: ReactNode;
   variant?: 'default' | 'subtle' | 'standalone';
   external?: boolean;
   externalLabel?: string;
-  className?: string;
 };
 
 type LinkProps<T extends ElementType = 'a'> = LinkOwnProps<T> &

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

@@ -8,8 +8,8 @@
   .spinner {
     width: 2.5em;
     height: 2.5em;
-    border: 4px solid var(--bds-bg);
-    border-top: 4px solid var(--bds-interactive);
+    border: 4px solid var(--bds-color_bg);
+    border-top: 4px solid var(--bds-color_interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }

package/src/components/ui/Loading/Loading.native.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Loading } from './Loading.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Loading (native)', () => {
+  it('has progressbar role', () => {
+    renderWithTheme(<Loading />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('has default accessible label "Loading"', () => {
+    renderWithTheme(<Loading />);
+    expect(screen.getByRole('progressbar', { name: 'Loading' })).toBeInTheDocument();
+  });
+
+  it('accepts a custom accessibilityLabel', () => {
+    renderWithTheme(<Loading accessibilityLabel="Laden…" />);
+    expect(screen.getByRole('progressbar', { name: 'Laden…' })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Loading } from './Loading.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Loading',
+  component: Loading,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof Loading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = { args: { size: 'small' } };
+export const Medium: Story = { args: { size: 'medium' } };
+export const Large: Story = { args: { size: 'large' } };
+export const AllSizes: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+        <Loading size="small" />
+        <Loading size="medium" />
+        <Loading size="large" />
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,29 @@
+import { ActivityIndicator, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../native/ThemeContext';
+
+type LoadingSize = 'small' | 'medium' | 'large';
+
+interface LoadingProps {
+  size?: LoadingSize;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const rnSize: Record<LoadingSize, 'small' | 'large'> = {
+  small:  'small',
+  medium: 'large',
+  large:  'large',
+};
+
+export function Loading({ size = 'medium', accessibilityLabel = 'Loading', style }: LoadingProps) {
+  const { colors } = useTheme();
+  return (
+    <ActivityIndicator
+      size={rnSize[size]}
+      color={colors.colorInteractive}
+      style={style}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+}

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

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

package/src/components/ui/Loading/Loading.tsx

@@ -1,9 +1,9 @@
 import css from './Loading.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface LoadingProps {
+interface LoadingProps extends WithClassName {
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 export function Loading({ size = 'medium', className }: LoadingProps) {

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

@@ -4,36 +4,36 @@
     align-items: center;
     gap: var(--bds-space_m);
     padding: var(--bds-space_s) var(--bds-space_m);
-    background-color: var(--banner_bg, var(--bds-blue--subtle));
-    color: var(--banner_text, var(--bds-on-blue--subtle));
-    border-block-end: 3px solid var(--banner_border, var(--bds-blue));
+    background-color: var(--banner_bg, var(--bds-color_blue--subtle));
+    color: var(--banner_text, var(--bds-color_on-blue--subtle));
+    border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
     width: 100%;
   }
 
   .--variant_info {
-    --banner_bg: var(--bds-blue--subtle);
-    --banner_text: var(--bds-on-blue--subtle);
-    --banner_border: var(--bds-blue);
+    --banner_bg: var(--bds-color_blue--subtle);
+    --banner_text: var(--bds-color_on-blue--subtle);
+    --banner_border: var(--bds-color_blue);
   }
 
   .--variant_success {
-    --banner_bg: var(--bds-success--subtle);
-    --banner_text: var(--bds-on-success--subtle);
-    --banner_border: var(--bds-success);
+    --banner_bg: var(--bds-color_success--subtle);
+    --banner_text: var(--bds-color_on-success--subtle);
+    --banner_border: var(--bds-color_success);
   }
 
   .--variant_warning {
-    --banner_bg: var(--bds-orange--subtle);
-    --banner_text: var(--bds-on-orange--subtle);
-    --banner_border: var(--bds-warning);
+    --banner_bg: var(--bds-color_orange--subtle);
+    --banner_text: var(--bds-color_on-orange--subtle);
+    --banner_border: var(--bds-color_warning);
   }
 
   .--variant_error {
-    --banner_bg: rgb(from var(--bds-error) r g b / 12%);
-    --banner_text: var(--bds-on-bg);
-    --banner_border: var(--bds-error);
+    --banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
+    --banner_text: var(--bds-color_on-bg);
+    --banner_border: var(--bds-color_error);
   }
 
   .content {

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { NotificationBanner } from './NotificationBanner.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/NotificationBanner',
+  component: NotificationBanner,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+  },
+} satisfies Meta<typeof NotificationBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = { args: { children: 'New update available.', variant: 'info' } };
+export const Success: Story = { args: { children: 'Changes saved successfully.', variant: 'success' } };
+export const Warning: Story = { args: { children: 'Your session will expire soon.', variant: 'warning' } };
+export const Error: Story = { args: { children: 'Failed to load data. Please retry.', variant: 'error' } };
+export const Dismissible: Story = {
+  args: { children: 'You can dismiss this notification.', variant: 'info', onDismiss: () => {} },
+};
+export const AllVariants: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {(['info', 'success', 'warning', 'error'] as const).map(v => (
+          <NotificationBanner key={v} variant={v}>
+            {v.charAt(0).toUpperCase() + v.slice(1)} notification
+          </NotificationBanner>
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+
+interface NotificationBannerProps {
+  variant?: BannerVariant;
+  children: ReactNode;
+  action?: ReactNode;
+  onDismiss?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    gap: spacing.xs,
+  },
+  content: {
+    flex: 1,
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS,
+  },
+  dismiss: {
+    padding: spacing.xxs,
+    flexShrink: 0,
+  },
+});
+
+export function NotificationBanner({
+  variant = 'info',
+  children,
+  action,
+  onDismiss,
+  style,
+}: Readonly<NotificationBannerProps>) {
+  const { colors } = useTheme();
+  const isUrgent = variant === 'error' || variant === 'warning';
+
+  const variantColors: Record<BannerVariant, { bg: string; text: string }> = {
+    info:    { bg: colors.colorBlueSubtle,    text: colors.colorOnBlueSubtle },
+    success: { bg: colors.colorSuccessSubtle, text: colors.colorOnSuccessSubtle },
+    warning: { bg: colors.colorOrangeSubtle,  text: colors.colorOnOrangeSubtle },
+    error:   { bg: colors.colorRedSubtle,     text: colors.colorOnRedSubtle },
+  };
+
+  const { bg, text } = variantColors[variant];
+
+  return (
+    <View
+      accessibilityRole={isUrgent ? 'alert' : 'none'}
+      accessibilityLiveRegion={isUrgent ? 'assertive' : 'polite'}
+      style={[styles.banner, { backgroundColor: bg }, style]}
+    >
+      <Text style={[styles.content, { color: text }]}>{children}</Text>
+      {action}
+      {onDismiss && (
+        <Pressable
+          onPress={onDismiss}
+          style={styles.dismiss}
+          accessibilityLabel="Dismiss notification"
+          accessibilityRole="button"
+          hitSlop={8}
+        >
+          <Text style={{ color: text, fontSize: 16 }}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}

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

@@ -3,7 +3,7 @@ import { NotificationBanner } from './NotificationBanner';
 import { Button } from '../../interaction/Button/Button';
 
 const meta = {
-  title: 'UI/NotificationBanner',
+  title: 'React/UI/NotificationBanner',
   component: NotificationBanner,
 } satisfies Meta<typeof NotificationBanner>;
 

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 import css from './NotificationBanner.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface NotificationBannerProps {
+interface NotificationBannerProps extends WithClassName {
   variant?: 'info' | 'success' | 'warning' | 'error';
   children: ReactNode;
   action?: ReactNode;
   onDismiss?: () => void;
-  className?: string;
 }
 
 export function NotificationBanner({

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

@@ -24,12 +24,12 @@
     border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
 
-    --bdc_color: var(--btn_border, var(--bds-bg--subtle));
+    --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
 
     border: none;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
-    color: var(--btn_color, var(--bds-on-bg));
+    color: var(--btn_color, var(--bds-color_on-bg));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-variant-numeric: tabular-nums;
@@ -50,15 +50,15 @@
 
   @media (hover: hover) and (pointer: fine) {
     .button:not(:disabled, .--active):hover {
-      --btn_bg:    var(--bds-bg--subtle);
-      --btn_color: var(--bds-interactive);
+      --btn_bg:    var(--bds-color_bg--subtle);
+      --btn_color: var(--bds-color_interactive_on-bg);
     }
   }
 
   .button.--active {
-    --btn_bg:     var(--bds-interactive);
-    --btn_color:  var(--bds-on-interactive);
-    --btn_border: var(--bds-interactive);
+    --btn_bg:     var(--bds-color_interactive);
+    --btn_color:  var(--bds-color_on-interactive);
+    --btn_border: var(--bds-color_interactive);
   }
 
   .button.--nav svg {
@@ -72,7 +72,7 @@
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     font-size: var(--bds-font_size--body);
     user-select: none;
   }

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Pagination } from './Pagination';
 
 const meta = {
-  title: 'UI/Pagination',
+  title: 'React/UI/Pagination',
   component: Pagination,
 } satisfies Meta<typeof Pagination>;