@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,42 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import css from './Link.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+type LinkOwnProps<T extends ElementType> = {
+  as?: T;
+  children: ReactNode;
+  variant?: 'default' | 'subtle' | 'standalone';
+  external?: boolean;
+  className?: string;
+};
+
+type LinkProps<T extends ElementType = 'a'> = LinkOwnProps<T> &
+  Omit<ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T>>;
+
+export function Link<T extends ElementType = 'a'>({
+  as,
+  children,
+  variant = 'default',
+  external = false,
+  className,
+  ...props
+}: LinkProps<T>) {
+  const Component = (as ?? 'a') as ElementType;
+
+  const externalProps = external
+    ? { target: '_blank', rel: 'noreferrer noopener' }
+    : {};
+
+  return (
+    <Component
+      className={cn(css.link, css[`--variant_${variant}`], className)}
+      {...externalProps}
+      {...props}
+    >
+      {children}
+      {external && (
+        <span className={css.externalLabel}> (opens in new tab)</span>
+      )}
+    </Component>
+  );
+}

package/src/components/ui/Link/index.ts

@@ -0,0 +1 @@
+export { Link } from './Link';

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

@@ -0,0 +1,33 @@
+@layer component {
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .spinner {
+    width: 2.5em;
+    height: 2.5em;
+    border: 4px solid var(--color_bg);
+    border-top: 4px solid var(--color_interactive);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  .--size_small .spinner {
+    width: 1.5em;
+    height: 1.5em;
+    border-width: 2px;
+  }
+
+  .--size_large .spinner {
+    width: 4em;
+    height: 4em;
+    border-width: 6px;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { Loading } from './Loading';
+
+describe('Loading', () => {
+  it('renders a status element', () => {
+    render(<Loading />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('has an accessible aria-label', () => {
+    render(<Loading />);
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading');
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<Loading className="custom" />);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Loading } from './Loading';
+
+const meta = {
+  title: 'UI/Loading',
+  component: Loading,
+  tags: ['autodocs'],
+  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: () => (
+    <div style={{ display: 'flex', gap: '32px', alignItems: 'center' }}>
+      <Loading size="small" />
+      <Loading size="medium" />
+      <Loading size="large" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,15 @@
+import css from './Loading.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface LoadingProps {
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+export function Loading({ size = 'medium', className }: LoadingProps) {
+  return (
+    <div className={cn(css.loading, css[`--size_${size}`], className)}>
+      <div className={css.spinner} role="status" aria-label="Loading" />
+    </div>
+  );
+}

package/src/components/ui/Loading/index.ts

@@ -0,0 +1 @@
+export { Loading } from './Loading';

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

@@ -0,0 +1,79 @@
+@layer component {
+  .banner {
+    --banner_bg: var(--color_blue--subtle);
+    --banner_text: var(--color_on-blue--subtle);
+    --banner_border: var(--color_blue);
+
+    display: flex;
+    align-items: center;
+    gap: var(--space_m);
+    padding: var(--space_s) var(--space_m);
+    background-color: var(--banner_bg);
+    color: var(--banner_text);
+    border-block-end: 3px solid var(--banner_border);
+    font-size: var(--font_size--body);
+    line-height: var(--font_line-height--body);
+    width: 100%;
+  }
+
+  .--variant_info {
+    --banner_bg: var(--color_blue--subtle);
+    --banner_text: var(--color_on-blue--subtle);
+    --banner_border: var(--color_blue);
+  }
+
+  .--variant_success {
+    --banner_bg: var(--color_green--subtle);
+    --banner_text: var(--color_on-green--subtle);
+    --banner_border: var(--color_green);
+  }
+
+  .--variant_warning {
+    --banner_bg: var(--color_orange--subtle);
+    --banner_text: var(--color_on-orange--subtle);
+    --banner_border: var(--color_warning);
+  }
+
+  .--variant_error {
+    --banner_bg: rgb(from var(--color_error) r g b / 12%);
+    --banner_text: var(--color_on-bg);
+    --banner_border: var(--color_error);
+  }
+
+  .content {
+    flex: 1;
+  }
+
+  .action {
+    flex-shrink: 0;
+  }
+
+  .dismiss {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    color: currentcolor;
+    border-radius: 50%;
+    border: 1px solid currentcolor;
+    transition: var(--animation_transition);
+  }
+
+  .dismiss svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .dismiss:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .dismiss:hover {
+      opacity: 0.7;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NotificationBanner } from './NotificationBanner';
+
+describe('NotificationBanner', () => {
+  it('renders children', () => {
+    render(<NotificationBanner>System maintenance scheduled</NotificationBanner>);
+    expect(screen.getByText('System maintenance scheduled')).toBeInTheDocument();
+  });
+
+  it('uses status role for info variant', () => {
+    render(<NotificationBanner variant="info">Info</NotificationBanner>);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('uses alert role for error variant', () => {
+    render(<NotificationBanner variant="error">Error</NotificationBanner>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('uses alert role for warning variant', () => {
+    render(<NotificationBanner variant="warning">Warning</NotificationBanner>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('renders dismiss button when onDismiss provided', () => {
+    render(<NotificationBanner onDismiss={() => {}}>Msg</NotificationBanner>);
+    expect(screen.getByRole('button', { name: 'Dismiss notification' })).toBeInTheDocument();
+  });
+
+  it('calls onDismiss when dismiss button clicked', async () => {
+    const onDismiss = vi.fn();
+    render(<NotificationBanner onDismiss={onDismiss}>Msg</NotificationBanner>);
+    await userEvent.click(screen.getByRole('button', { name: 'Dismiss notification' }));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it('renders action slot', () => {
+    render(<NotificationBanner action={<button>View details</button>}>Msg</NotificationBanner>);
+    expect(screen.getByRole('button', { name: 'View details' })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotificationBanner } from './NotificationBanner';
+
+const meta = {
+  title: 'UI/NotificationBanner',
+  component: NotificationBanner,
+  tags: ['autodocs'],
+} satisfies Meta<typeof NotificationBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = { args: { variant: 'info', children: 'A new version is available. Refresh to update.' } };
+export const Success: Story = { args: { variant: 'success', children: 'Your changes have been saved successfully.' } };
+export const Warning: Story = { args: { variant: 'warning', children: 'Your session will expire in 5 minutes.' } };
+export const Error: Story = { args: { variant: 'error', children: 'Payment processing failed. Please try again.' } };
+export const WithAction: Story = {
+  args: {
+    variant: 'info',
+    children: 'A new version is available.',
+    action: <button type="button">Update now</button>,
+  },
+};
+export const Dismissible: Story = {
+  args: {
+    variant: 'warning',
+    children: 'This is a dismissible banner.',
+    onDismiss: () => alert('dismissed'),
+  },
+};

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import css from './NotificationBanner.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface NotificationBannerProps {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  children: ReactNode;
+  action?: ReactNode;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function NotificationBanner({
+  variant = 'info',
+  children,
+  action,
+  onDismiss,
+  className,
+}: Readonly<NotificationBannerProps>) {
+  const isUrgent = variant === 'error' || variant === 'warning';
+
+  return (
+    <div
+      role={isUrgent ? 'alert' : 'status'}
+      aria-live={isUrgent ? 'assertive' : 'polite'}
+      aria-atomic="true"
+      className={cn(css.banner, css[`--variant_${variant}`], className)}
+    >
+      <div className={css.content}>{children}</div>
+      {action && <div className={css.action}>{action}</div>}
+      {onDismiss && (
+        <button
+          type="button"
+          className={css.dismiss}
+          onClick={onDismiss}
+          aria-label="Dismiss notification"
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/NotificationBanner/index.ts

@@ -0,0 +1 @@
+export { NotificationBanner } from './NotificationBanner';

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

@@ -0,0 +1,78 @@
+@layer component {
+  .pagination {
+    display: flex;
+    justify-content: center;
+  }
+
+  .list {
+    display: flex;
+    align-items: center;
+    gap: var(--space_xxs);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .button {
+    --btn_bg:         transparent;
+    --btn_color:      var(--color_on-bg);
+    --btn_border:     var(--color_bg--subtle);
+
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    padding-inline: var(--space_xs);
+    border-radius: var(--border_radius--xs);
+    border: 1px solid var(--btn_border);
+    background-color: var(--btn_bg);
+    color: var(--btn_color);
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition: var(--animation_transition);
+    box-sizing: border-box;
+  }
+
+  .button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .button:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .button:not(:disabled, .--active):hover {
+      --btn_bg:    var(--color_bg--subtle);
+      --btn_color: var(--color_interactive);
+    }
+  }
+
+  .button.--active {
+    --btn_bg:     var(--color_interactive);
+    --btn_color:  var(--color_on-interactive);
+    --btn_border: var(--color_interactive);
+  }
+
+  .button.--nav svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    color: var(--color_on-bg--subtle);
+    font-size: var(--font_size--body);
+    user-select: none;
+  }
+}

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

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Pagination } from './Pagination';
+
+describe('Pagination', () => {
+  it('renders a navigation landmark', () => {
+    render(<Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByRole('navigation', { name: 'Pagination' })).toBeInTheDocument();
+  });
+
+  it('renders a button for each page', () => {
+    render(<Pagination currentPage={1} totalPages={3} onPageChange={() => {}} />);
+    expect(screen.getByRole('button', { name: 'Page 1' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 2' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 3' })).toBeInTheDocument();
+  });
+
+  it('renders previous and next buttons', () => {
+    render(<Pagination currentPage={2} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeInTheDocument();
+  });
+
+  it('marks the current page with aria-current="page"', () => {
+    render(<Pagination currentPage={2} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByRole('button', { name: 'Page 2' })).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('disables the previous button on the first page', () => {
+    render(<Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeDisabled();
+  });
+
+  it('disables the next button on the last page', () => {
+    render(<Pagination currentPage={5} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+  });
+
+  it('calls onPageChange with the next page when next is clicked', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(<Pagination currentPage={2} totalPages={5} onPageChange={onPageChange} />);
+    await user.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it('calls onPageChange with the previous page when previous is clicked', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(<Pagination currentPage={3} totalPages={5} onPageChange={onPageChange} />);
+    await user.click(screen.getByRole('button', { name: 'Previous page' }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it('calls onPageChange with the correct page number when a page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(<Pagination currentPage={1} totalPages={3} onPageChange={onPageChange} />);
+    await user.click(screen.getByRole('button', { name: 'Page 3' }));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it('renders ellipsis for large page counts', () => {
+    render(<Pagination currentPage={5} totalPages={10} onPageChange={() => {}} />);
+    expect(screen.getAllByText('…').length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Pagination } from './Pagination';
+
+const meta = {
+  title: 'UI/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { currentPage: 3, totalPages: 7, onPageChange: () => {} },
+};
+
+export const FirstPage: Story = {
+  args: { currentPage: 1, totalPages: 5, onPageChange: () => {} },
+};
+
+export const LastPage: Story = {
+  args: { currentPage: 5, totalPages: 5, onPageChange: () => {} },
+};
+
+export const ManyPages: Story = {
+  args: { currentPage: 5, totalPages: 20, onPageChange: () => {} },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
+        <p>Current page: {page}</p>
+        <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,87 @@
+import css from './Pagination.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+function getPageRange(current: number, total: number): (number | '...')[] {
+  const delta = 1;
+  const range: (number | '...')[] = [];
+
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
+      range.push(i);
+    } else if (range[range.length - 1] !== '...') {
+      range.push('...');
+    }
+  }
+
+  return range;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className,
+}: Readonly<PaginationProps>) {
+  const pages = getPageRange(currentPage, totalPages);
+
+  return (
+    <nav aria-label="Pagination" className={cn(css.pagination, className)}>
+      <ul className={css.list}>
+        <li>
+          <button
+            type="button"
+            className={cn(css.button, css['--nav'])}
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={currentPage <= 1}
+            aria-label="Previous page"
+          >
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+        </li>
+
+        {pages.map((page, index) =>
+          page === '...' ? (
+            <li key={`ellipsis-${index}`}>
+              <span className={css.ellipsis} aria-hidden="true">…</span>
+            </li>
+          ) : (
+            <li key={page}>
+              <button
+                type="button"
+                className={cn(css.button, currentPage === page ? css['--active'] : undefined)}
+                onClick={() => onPageChange(page)}
+                aria-label={`Page ${page}`}
+                aria-current={currentPage === page ? 'page' : undefined}
+              >
+                {page}
+              </button>
+            </li>
+          )
+        )}
+
+        <li>
+          <button
+            type="button"
+            className={cn(css.button, css['--nav'])}
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={currentPage >= totalPages}
+            aria-label="Next page"
+          >
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+}

package/src/components/ui/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

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

@@ -0,0 +1,51 @@
+@layer component {
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space_xxs);
+    width: 100%;
+  }
+
+  .labelRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg);
+  }
+
+  .label {
+    font-weight: var(--font_weight--semibold);
+  }
+
+  .value {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .track {
+    --progress_height: var(--space_xs);
+
+    width: 100%;
+    height: var(--progress_height);
+    background-color: var(--color_bg--subtle);
+    border-radius: 999px;
+    overflow: hidden;
+  }
+
+  .track.--size_small  { --progress_height: var(--space_xxs); }
+  .track.--size_medium { --progress_height: var(--space_xs); }
+  .track.--size_large  { --progress_height: var(--space_s); }
+
+  .fill {
+    height: 100%;
+    background-color: var(--color_green);
+    border-radius: 999px;
+    transition: width var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fill {
+      transition: none;
+    }
+  }
+}