@boostdev/design-system-components 0.1.1

package/package.json

@@ -0,0 +1,143 @@
+{
+  "name": "@boostdev/design-system-components",
+  "version": "0.1.1",
+  "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
+  "keywords": [
+    "React",
+    "component",
+    "library:",
+    "accessible",
+    "token-driven",
+    "components",
+    "built",
+    "on",
+    "@boostdev/design-system-foundation"
+  ],
+  "homepage": "https://gitlab.com/b00stdev/boostcomponents#readme",
+  "bugs": {
+    "url": "https://gitlab.com/b00stdev/boostcomponents/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/b00stdev/boostcomponents.git"
+  },
+  "license": "ISC",
+  "author": "Boostdev",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./css": "./src/css/index.css",
+    "./css/accordion": "./src/components/ui/Accordion/Accordion.module.css",
+    "./css/alert": "./src/components/ui/Alert/Alert.module.css",
+    "./css/avatar": "./src/components/ui/Avatar/Avatar.module.css",
+    "./css/badge": "./src/components/ui/Badge/Badge.module.css",
+    "./css/breadcrumb": "./src/components/ui/Breadcrumb/Breadcrumb.module.css",
+    "./css/calendar": "./src/components/ui/Calendar/Calendar.module.css",
+    "./css/carousel": "./src/components/ui/Carousel/Carousel.module.css",
+    "./css/description-list": "./src/components/ui/DescriptionList/DescriptionList.module.css",
+    "./css/link": "./src/components/ui/Link/Link.module.css",
+    "./css/loading": "./src/components/ui/Loading/Loading.module.css",
+    "./css/notification-banner": "./src/components/ui/NotificationBanner/NotificationBanner.module.css",
+    "./css/pagination": "./src/components/ui/Pagination/Pagination.module.css",
+    "./css/progress": "./src/components/ui/Progress/Progress.module.css",
+    "./css/progress-circle": "./src/components/ui/ProgressCircle/ProgressCircle.module.css",
+    "./css/separator": "./src/components/ui/Separator/Separator.module.css",
+    "./css/skeleton": "./src/components/ui/Skeleton/Skeleton.module.css",
+    "./css/skip-link": "./src/components/ui/SkipLink/SkipLink.module.css",
+    "./css/table": "./src/components/ui/Table/Table.module.css",
+    "./css/tabs": "./src/components/ui/Tabs/Tabs.module.css",
+    "./css/tooltip": "./src/components/ui/Tooltip/Tooltip.module.css",
+    "./css/typography": "./src/components/ui/Typography/Typography.module.css",
+    "./css/button": "./src/components/interaction/Button/Button.module.css",
+    "./css/command": "./src/components/interaction/Command/Command.module.css",
+    "./css/dialog": "./src/components/interaction/Dialog/Dialog.module.css",
+    "./css/drawer": "./src/components/interaction/Drawer/Drawer.module.css",
+    "./css/dropdown-menu": "./src/components/interaction/DropdownMenu/DropdownMenu.module.css",
+    "./css/popover": "./src/components/interaction/Popover/Popover.module.css",
+    "./css/rating": "./src/components/interaction/Rating/Rating.module.css",
+    "./css/toast": "./src/components/interaction/Toast/Toast.module.css",
+    "./css/form/checkbox": "./src/components/interaction/form/Checkbox/Checkbox.module.css",
+    "./css/form/combobox": "./src/components/interaction/form/Combobox/Combobox.module.css",
+    "./css/form/file-input": "./src/components/interaction/form/FileInput/FileInput.module.css",
+    "./css/form/form-input": "./src/components/interaction/form/FormInput/FormInput.module.css",
+    "./css/form/number-input": "./src/components/interaction/form/NumberInput/NumberInput.module.css",
+    "./css/form/radio": "./src/components/interaction/form/Radio/Radio.module.css",
+    "./css/form/select": "./src/components/interaction/form/Select/Select.module.css",
+    "./css/form/slider": "./src/components/interaction/form/Slider/Slider.module.css",
+    "./css/form/switch": "./src/components/interaction/form/Switch/Switch.module.css",
+    "./css/form/textarea": "./src/components/interaction/form/Textarea/Textarea.module.css",
+    "./css/form/input-container": "./src/components/interaction/form/atoms/InputContainer.module.css",
+    "./css/form/label": "./src/components/interaction/form/atoms/Label.module.css",
+    "./css/form/message": "./src/components/interaction/form/atoms/Message.module.css",
+    "./css/button-group": "./src/components/layout/ButtonGroup/ButtonGroup.module.css",
+    "./css/card": "./src/components/layout/Card/Card.module.css",
+    "./css/icon-wrapper": "./src/components/layout/IconWrapper/IconWrapper.module.css",
+    "./css/section-header": "./src/components/layout/SectionHeader/SectionHeader.module.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "AGENTS.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "eslint-scope": "^8.4.0",
+    "eslint-visitor-keys": "^4.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@boostdev/design-system-foundation": "^0.1.10",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "8",
+    "@storybook/react-vite": "^8.6.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9",
+    "identity-obj-proxy": "^3.0.0",
+    "jsdom": "^28.1.0",
+    "storybook": "^8.6.18",
+    "stylelint": "^16",
+    "stylelint-config-standard": "^37",
+    "tsup": "^8",
+    "tsx": "^4",
+    "typescript": "^5.8",
+    "typescript-eslint": "^8",
+    "vite": "^5.4.21",
+    "vitest": "^3"
+  },
+  "peerDependencies": {
+    "@boostdev/design-system-foundation": ">=0.1.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": [
+    "src/css/**/*.css"
+  ]
+}

package/src/components/interaction/Button/Button.module.css

@@ -0,0 +1,136 @@
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color) r g b / 50%);
+  }
+
+  70% {
+    transform: scale(1.01);
+    box-shadow: 0 0 0 var(--space_m) rgb(from var(--button_pulse-color) r g b / 0%);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color) r g b / 0%);
+  }
+}
+
+@layer component {
+  .button,
+  .button[href] {
+    /* Component tokens — override from a parent context or inline style */
+    --button_height:       3em;
+    --button_font-size:    inherit;
+    --button_bg:           var(--color_cta);
+    --button_text:         var(--color_on-cta);
+    --button_border-color: var(--color_cta);
+    --button_pulse-color:  var(--button_bg);
+
+    all: unset;
+    position: relative;
+    font: inherit;
+    padding-inline: var(--space_l);
+    display: inline-flex;
+    gap: var(--space_xs);
+    border-radius: var(--border_radius--s);
+    align-items: center;
+    cursor: pointer;
+    scroll-padding-block-end: var(--space_l);
+    justify-content: center;
+    height: var(--button_height);
+    font-size: var(--button_font-size);
+    white-space: nowrap;
+    line-height: 1;
+    background-color: var(--button_bg);
+    color: var(--button_text);
+    border: 2px solid var(--button_border-color);
+    transition: var(--animation_transition);
+  }
+
+  .button.--primary {
+    --button_bg:           var(--color_cta);
+    --button_text:         var(--color_on-cta);
+    --button_border-color: transparent;
+  }
+
+  .button.--secondary {
+    --button_bg:           var(--color_bg);
+    --button_text:         var(--color_on-bg);
+    --button_border-color: var(--button_text);
+  }
+
+  .button.--size_small {
+    --button_height:    2.25em;
+    --button_font-size: var(--font_size--body--s);
+
+    padding-inline: var(--space_m);
+  }
+
+  .button.--size_medium {
+    --button_height: 3em;
+
+    padding-inline: var(--space_l);
+  }
+
+  .button.--size_large {
+    --button_height:    3.75em;
+    --button_font-size: var(--font_size--heading-3);
+
+    padding-inline: var(--space_xl);
+  }
+
+  .button.--hasPulse {
+    animation: pulse 3s infinite;
+  }
+
+  .button[href] {
+    text-decoration: none;
+  }
+
+  .button svg {
+    --icon__stroke: currentcolor;
+
+    fill: currentcolor;
+    color: currentcolor;
+    flex-shrink: 0;
+  }
+
+  .prefix {
+    display: flex;
+    align-items: center;
+    margin-inline-start: calc(var(--space_s) * -1);
+    transition: var(--animation_transition);
+  }
+
+  .suffix {
+    display: flex;
+    align-items: center;
+    margin-inline-end: calc(var(--space_s) * -1);
+    transition: var(--animation_transition);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .button:hover .prefix svg {
+      animation: 2s infinite 'fadeZoom' ease-out;
+    }
+
+    .button:hover .suffix svg {
+      animation: 2s infinite 'fadeZoom' ease-out;
+    }
+  }
+
+  .button:focus-visible {
+    outline-offset: var(--outline_offset);
+    outline: var(--outline_default);
+    border-radius: var(--border_radius--s);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .button:hover {
+      --button_bg:           var(--color_bg);
+      --button_text:         var(--color_interactive);
+      --button_pulse-color:  var(--color_interactive);
+      --button_border-color: currentcolor;
+    }
+  }
+}

package/src/components/interaction/Button/Button.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('renders as a button element by default', () => {
+    render(<Button>Click</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('renders as an anchor when href is provided', () => {
+    render(<Button href="/path">Link</Button>);
+    const link = screen.getByRole('link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/path');
+  });
+
+  it('calls onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('has type="button" by default', () => {
+    render(<Button>Submit</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+  });
+
+  it('renders iconStart slot', () => {
+    render(<Button iconStart={<span data-testid="icon">★</span>}>Label</Button>);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders iconEnd slot', () => {
+    render(<Button iconEnd={<span data-testid="icon">★</span>}>Label</Button>);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+});

package/src/components/interaction/Button/Button.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'Interaction/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary'] },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    onClick: { action: 'clicked' },
+  },
+} satisfies Meta<typeof Button>;
+
+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 Small: Story = { args: { children: 'Small', size: 'small' } };
+export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
+export const Large: Story = { args: { children: 'Large', size: 'large' } };
+export const AsLink: Story = { args: { children: 'Link Button', href: 'https://example.com' } };
+export const WithPulse: Story = { args: { children: 'Pulsing', hasPulse: true } };
+export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
+export const WithIcons: Story = {
+  args: {
+    children: 'With Icons',
+    iconStart: <span>→</span>,
+    iconEnd: <span>←</span>,
+  },
+};
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+      {(['primary', 'secondary'] as const).map(v => (
+        ['small', 'medium', 'large'].map(s => (
+          <Button key={`${v}-${s}`} variant={v} size={s as 'small' | 'medium' | 'large'}>{v} {s}</Button>
+        ))
+      ))}
+    </div>
+  ),
+};

package/src/components/interaction/Button/Button.tsx

@@ -0,0 +1,68 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import css from './Button.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface ButtonProps {
+  href?: string;
+  variant?: 'primary' | 'secondary';
+  type?: 'button' | 'submit' | 'reset';
+  size?: 'small' | 'medium' | 'large';
+  iconStart?: ReactNode;
+  iconEnd?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  hasPulse?: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+  target?: string;
+  rel?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+export function Button({
+  children,
+  className = '',
+  variant = 'primary',
+  type = 'button',
+  iconStart,
+  iconEnd,
+  size = 'medium',
+  hasPulse = false,
+  href,
+  target,
+  rel,
+  disabled,
+  onClick,
+  ...rest
+}: Readonly<ButtonProps>) {
+  const classNames = cn(
+    css.button,
+    css[`--${variant}`],
+    css[`--size_${size}`],
+    hasPulse && css['--hasPulse'],
+    className,
+  );
+
+  const allChildren = (
+    <>
+      {!!iconStart && <span className={css.prefix}>{iconStart}</span>}
+      {children}
+      {!!iconEnd && <span className={css.suffix}>{iconEnd}</span>}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a className={classNames} href={href} target={target} rel={rel} onClick={onClick as MouseEventHandler<HTMLAnchorElement>} {...rest}>
+        {allChildren}
+      </a>
+    );
+  }
+
+  return (
+    <button type={type} className={classNames} disabled={disabled} onClick={onClick as MouseEventHandler<HTMLButtonElement>} {...rest}>
+      {allChildren}
+    </button>
+  );
+}

package/src/components/interaction/Button/index.ts

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

package/src/components/interaction/Command/Command.module.css

@@ -0,0 +1,128 @@
+@layer component {
+  .dialog {
+    padding: 0;
+    border: none;
+    border-radius: var(--border_radius--m);
+    background: transparent;
+    width: min(40rem, 90vw);
+    max-height: 70vh;
+    overflow: visible;
+    margin-block-start: 10vh;
+  }
+
+  .dialog::backdrop {
+    background: rgb(0 0 0 / 50%);
+  }
+
+  .palette {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color_bg);
+    border-radius: var(--border_radius--m);
+    box-shadow: var(--shadow_xl);
+    overflow: hidden;
+    max-height: 70vh;
+    border: 1px solid var(--color_bg--subtle);
+  }
+
+  .searchRow {
+    display: flex;
+    align-items: center;
+    gap: var(--space_xs);
+    padding: var(--space_s) var(--space_m);
+    border-block-end: 1px solid var(--color_bg--subtle);
+    flex-shrink: 0;
+  }
+
+  .searchIcon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--color_on-bg--muted);
+    flex-shrink: 0;
+  }
+
+  .search {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    color: var(--color_on-bg);
+    background: transparent;
+    min-width: 0;
+  }
+
+  .search::placeholder {
+    color: var(--color_on-bg--muted);
+  }
+
+  .escHint {
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg--muted);
+    border: 1px solid var(--color_on-bg--muted);
+    border-radius: var(--border_radius--xs);
+    padding: 0.1em 0.4em;
+    flex-shrink: 0;
+  }
+
+  .list {
+    overflow-y: auto;
+    list-style: none;
+    margin: 0;
+    padding: var(--space_xs) 0;
+  }
+
+  .groupList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .group {
+    padding: var(--space_xs) var(--space_m);
+    font-size: var(--font_size--body--s);
+    font-weight: var(--font_weight--semibold);
+    color: var(--color_on-bg--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--space_s);
+    padding: var(--space_s) var(--space_m);
+    cursor: pointer;
+    transition: background-color var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .itemActive {
+    background-color: var(--color_bg--subtle);
+  }
+
+  .itemLabel {
+    flex: 1;
+    font-size: var(--font_size--body);
+    color: var(--color_on-bg);
+  }
+
+  .itemDesc {
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg--muted);
+  }
+
+  .shortcut {
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg--muted);
+    border: 1px solid var(--color_on-bg--muted);
+    border-radius: var(--border_radius--xs);
+    padding: 0.1em 0.4em;
+  }
+
+  .empty {
+    padding: var(--space_l) var(--space_m);
+    text-align: center;
+    color: var(--color_on-bg--muted);
+    font-size: var(--font_size--body);
+  }
+}

package/src/components/interaction/Command/Command.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Command } from './Command';
+import type { CommandItem } from './Command';
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+const items: CommandItem[] = [
+  { id: 'new', label: 'New file', onSelect: vi.fn() },
+  { id: 'open', label: 'Open file', onSelect: vi.fn() },
+  { id: 'save', label: 'Save', description: 'Save current file', onSelect: vi.fn() },
+];
+
+describe('Command', () => {
+  it('renders search input when open', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('shows all items initially', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    expect(screen.getByText('New file')).toBeInTheDocument();
+    expect(screen.getByText('Open file')).toBeInTheDocument();
+  });
+
+  it('filters items by query', async () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    await userEvent.type(screen.getByRole('combobox'), 'save');
+    expect(screen.queryByText('New file')).not.toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no items match', async () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    await userEvent.type(screen.getByRole('combobox'), 'zzz');
+    expect(screen.getByText(/no results/i)).toBeInTheDocument();
+  });
+
+  it('calls onSelect and onClose when item clicked', async () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+    const testItems: CommandItem[] = [{ id: 'x', label: 'Action', onSelect }];
+    render(<Command isOpen items={testItems} onClose={onClose} />);
+    fireEvent.click(screen.getByText('Action'));
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('shows item description', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    expect(screen.getByText('Save current file')).toBeInTheDocument();
+  });
+});

package/src/components/interaction/Command/Command.stories.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Command } from './Command';
+import type { CommandItem } from './Command';
+
+const meta = {
+  title: 'Interaction/Command',
+  component: Command,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Command>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items: CommandItem[] = [
+  { id: 'new-file', label: 'New file', group: 'File', shortcut: '⌘N', onSelect: () => alert('New file') },
+  { id: 'open-file', label: 'Open file', group: 'File', shortcut: '⌘O', onSelect: () => alert('Open file') },
+  { id: 'save', label: 'Save', group: 'File', shortcut: '⌘S', onSelect: () => alert('Save') },
+  { id: 'find', label: 'Find', description: 'Search in document', group: 'Edit', shortcut: '⌘F', onSelect: () => alert('Find') },
+  { id: 'preferences', label: 'Preferences', group: 'Settings', onSelect: () => alert('Preferences') },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Command Palette <kbd>⌘K</kbd>
+        </button>
+        <Command isOpen={open} items={items} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+};