@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,46 @@
+@layer component {
+  .badge {
+    /* Component tokens — override from a parent context or inline style */
+    --badge_bg:        var(--color_blue);
+    --badge_text:      var(--color_on-blue);
+    --badge_radius:    2em;
+    --badge_font-size: var(--font_size--body--s);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space_xxs) var(--space_xs);
+    border-radius: var(--badge_radius);
+    font-size: var(--badge_font-size);
+    font-weight: var(--font_weight--semibold);
+    line-height: 1;
+    white-space: nowrap;
+    background-color: var(--badge_bg);
+    color: var(--badge_text);
+  }
+
+  .--variant_primary {
+    --badge_bg:   var(--color_interactive);
+    --badge_text: var(--color_on-interactive);
+  }
+
+  .--variant_secondary {
+    --badge_bg:   var(--color_bg);
+    --badge_text: var(--color_on-bg);
+  }
+
+  .--variant_success {
+    --badge_bg:   var(--color_success);
+    --badge_text: var(--color_on-success);
+  }
+
+  .--variant_error {
+    --badge_bg:   var(--color_error);
+    --badge_text: var(--color_on-error);
+  }
+
+  .--variant_warning {
+    --badge_bg:   var(--color_warning);
+    --badge_text: var(--color_on-warning);
+  }
+}

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

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders children', () => {
+    render(<Badge>Hello</Badge>);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('renders as a span', () => {
+    render(<Badge>Test</Badge>);
+    expect(screen.getByText('Test').tagName).toBe('SPAN');
+  });
+
+  it('accepts a custom className', () => {
+    render(<Badge className="custom">Test</Badge>);
+    expect(screen.getByText('Test')).toHaveClass('custom');
+  });
+});

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'success', 'error', 'warning'] },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = { args: { children: 'Primary', variant: 'primary' } };
+export const Secondary: Story = { args: { children: 'Secondary', variant: 'secondary' } };
+export const Success: Story = { args: { children: 'Success', variant: 'success' } };
+export const Error: Story = { args: { children: 'Error', variant: 'error' } };
+export const Warning: Story = { args: { children: 'Warning', variant: 'warning' } };
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+      {(['primary', 'secondary', 'success', 'error', 'warning'] as const).map(v => (
+        <Badge key={v} variant={v}>{v}</Badge>
+      ))}
+    </div>
+  ),
+};

package/src/components/ui/Badge/Badge.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import css from './Badge.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface BadgeProps {
+  children: ReactNode;
+  variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+  className?: string;
+}
+
+export function Badge({ children, variant = 'primary', className }: BadgeProps) {
+  return <span className={cn(css.badge, css[`--variant_${variant}`], className)}>{children}</span>;
+}

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

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

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

@@ -0,0 +1,50 @@
+@layer component {
+  .breadcrumb {
+    font-size: var(--font_size--body--s);
+  }
+
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space_xxs);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--space_xxs);
+  }
+
+  .link {
+    color: var(--color_interactive);
+    text-decoration: none;
+    transition: var(--animation_transition);
+  }
+
+  .link:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+    border-radius: var(--border_radius--xs);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .link:hover {
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  }
+
+  .separator {
+    color: var(--color_on-bg--subtle);
+    user-select: none;
+  }
+
+  .current {
+    color: var(--color_on-bg--subtle);
+    font-weight: var(--font_weight--semibold);
+  }
+}

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

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { Breadcrumb } from './Breadcrumb';
+
+const items = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Shoes' },
+];
+
+describe('Breadcrumb', () => {
+  it('renders a navigation landmark', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
+  });
+
+  it('renders all items', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Products')).toBeInTheDocument();
+    expect(screen.getByText('Shoes')).toBeInTheDocument();
+  });
+
+  it('renders intermediate items as links', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/');
+    expect(screen.getByRole('link', { name: 'Products' })).toHaveAttribute('href', '/products');
+  });
+
+  it('renders the last item as current page, not a link', () => {
+    render(<Breadcrumb items={items} />);
+    expect(screen.queryByRole('link', { name: 'Shoes' })).not.toBeInTheDocument();
+    expect(screen.getByText('Shoes')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders a single item as the current page', () => {
+    render(<Breadcrumb items={[{ label: 'Home' }]} />);
+    expect(screen.getByText('Home')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('accepts a custom className', () => {
+    render(<Breadcrumb items={items} className="custom" />);
+    expect(screen.getByRole('navigation')).toHaveClass('custom');
+  });
+});

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumb } from './Breadcrumb';
+
+const meta = {
+  title: 'UI/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Running shoes' },
+    ],
+  },
+};
+
+export const TwoLevels: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'About' },
+    ],
+  },
+};
+
+export const SingleLevel: Story = {
+  args: {
+    items: [{ label: 'Home' }],
+  },
+};
+
+export const DeepNested: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Shop', href: '/shop' },
+      { label: 'Men', href: '/shop/men' },
+      { label: 'Footwear', href: '/shop/men/footwear' },
+      { label: 'Running shoes' },
+    ],
+  },
+};

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,41 @@
+import css from './Breadcrumb.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>) {
+  return (
+    <nav aria-label="Breadcrumb" className={cn(css.breadcrumb, className)}>
+      <ol className={css.list}>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <li key={item.label} className={css.item}>
+              {isLast ? (
+                <span aria-current="page" className={css.current}>
+                  {item.label}
+                </span>
+              ) : (
+                <>
+                  <a href={item.href} className={css.link}>
+                    {item.label}
+                  </a>
+                  <span className={css.separator} aria-hidden="true">›</span>
+                </>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

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

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

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

@@ -0,0 +1,120 @@
+@layer component {
+  .calendar {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--space_s);
+    background-color: var(--color_bg);
+    border: 1px solid var(--color_bg--subtle);
+    border-radius: var(--border_radius--m);
+    padding: var(--space_m);
+    box-shadow: var(--shadow_s);
+    width: 20rem;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .monthYear {
+    font-size: var(--font_size--body);
+    font-weight: var(--font_weight--semibold);
+    color: var(--color_on-bg);
+  }
+
+  .navBtn {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--color_on-bg);
+    transition: var(--animation_transition);
+  }
+
+  .navBtn svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .navBtn:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .navBtn:hover {
+      background-color: var(--color_bg--subtle);
+    }
+  }
+
+  .grid {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  .weekday {
+    font-size: var(--font_size--body--s);
+    font-weight: var(--font_weight--semibold);
+    color: var(--color_on-bg--muted);
+    text-align: center;
+    padding-block-end: var(--space_xs);
+  }
+
+  .empty {
+    padding: 0;
+  }
+
+  .day {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg);
+    cursor: pointer;
+    transition: var(--animation_transition);
+    box-sizing: border-box;
+  }
+
+  .day:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .day:not(.disabled, .selected):hover {
+      background-color: var(--color_bg--subtle);
+    }
+  }
+
+  .today {
+    border: 2px solid var(--color_interactive);
+    font-weight: var(--font_weight--semibold);
+  }
+
+  .selected {
+    background-color: var(--color_interactive);
+    color: var(--color_on-interactive);
+    font-weight: var(--font_weight--semibold);
+  }
+
+  .disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .day {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Calendar } from './Calendar';
+
+// Pin to a known date for deterministic tests
+const FIXED_DATE = new Date(2024, 0, 15); // January 15, 2024
+
+describe('Calendar', () => {
+  it('renders navigation buttons', () => {
+    render(<Calendar value={FIXED_DATE} onChange={() => {}} />);
+    expect(screen.getByRole('button', { name: 'Previous month' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next month' })).toBeInTheDocument();
+  });
+
+  it('renders the current month and year', () => {
+    render(<Calendar value={FIXED_DATE} onChange={() => {}} />);
+    expect(screen.getByText('January 2024')).toBeInTheDocument();
+  });
+
+  it('renders day buttons', () => {
+    render(<Calendar value={FIXED_DATE} onChange={() => {}} />);
+    // January 2024 has 31 days
+    expect(screen.getAllByRole('button').filter(b => b.textContent?.match(/^\d+$/))).toHaveLength(31);
+  });
+
+  it('navigates to next month', async () => {
+    render(<Calendar value={FIXED_DATE} onChange={() => {}} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Next month' }));
+    expect(screen.getByText('February 2024')).toBeInTheDocument();
+  });
+
+  it('navigates to previous month', async () => {
+    render(<Calendar value={FIXED_DATE} onChange={() => {}} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Previous month' }));
+    expect(screen.getByText('December 2023')).toBeInTheDocument();
+  });
+
+  it('calls onChange when a date is selected', async () => {
+    const onChange = vi.fn();
+    render(<Calendar value={FIXED_DATE} onChange={onChange} />);
+    // Click on the 20th
+    const buttons = screen.getAllByRole('button').filter(b => b.textContent === '20');
+    await userEvent.click(buttons[0]);
+    expect(onChange).toHaveBeenCalledOnce();
+    const called = onChange.mock.calls[0][0] as Date;
+    expect(called.getDate()).toBe(20);
+    expect(called.getMonth()).toBe(0); // January
+  });
+
+  it('renders day-of-week headers', () => {
+    render(<Calendar value={FIXED_DATE} onChange={() => {}} />);
+    expect(screen.getByText('Mo')).toBeInTheDocument();
+    expect(screen.getByText('Su')).toBeInTheDocument();
+  });
+
+  it('disables days outside min/max range', () => {
+    const min = new Date(2024, 0, 10);
+    const max = new Date(2024, 0, 20);
+    render(<Calendar value={FIXED_DATE} min={min} max={max} onChange={() => {}} />);
+    // Day 5 should be disabled
+    const day5 = screen.getAllByRole('button').find(b => b.textContent === '5' && b.hasAttribute('disabled'));
+    expect(day5).toBeDefined();
+  });
+});

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

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from './Calendar';
+
+const meta = {
+  title: 'UI/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | undefined>();
+    return (
+      <div>
+        <Calendar value={value} onChange={setValue} />
+        {value && (
+          <p style={{ marginTop: '1rem', textAlign: 'center', fontSize: '0.875rem' }}>
+            Selected: {value.toLocaleDateString()}
+          </p>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithDefaultValue: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | undefined>(new Date(2024, 5, 15));
+    return <Calendar value={value} onChange={setValue} />;
+  },
+};
+
+export const WithMinMax: Story = {
+  render: () => {
+    const today = new Date();
+    const min = new Date(today.getFullYear(), today.getMonth(), 1);
+    const max = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+    const [value, setValue] = useState<Date | undefined>();
+    return (
+      <div>
+        <Calendar value={value} min={min} max={max} onChange={setValue} />
+        <p style={{ marginTop: '0.5rem', textAlign: 'center', fontSize: '0.75rem', color: 'gray' }}>
+          Only current month dates are selectable
+        </p>
+      </div>
+    );
+  },
+};