@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,69 @@
+@layer component {
+  .wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .tooltip {
+    --tooltip_bg:   var(--color_on-bg);
+    --tooltip_text: var(--color_bg);
+
+    position: absolute;
+    z-index: var(--z-index_popover);
+    padding: var(--space_xxs) var(--space_xs);
+    border-radius: var(--border_radius--xs);
+    background-color: var(--tooltip_bg);
+    color: var(--tooltip_text);
+    font-size: var(--font_size--body--s);
+    line-height: var(--font_line-height--body);
+    white-space: nowrap;
+    pointer-events: none;
+
+    /* Hidden by default */
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  /* Show on hover and keyboard focus */
+  .wrapper:hover .tooltip,
+  .wrapper:focus-within .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  /* Placement: top (default) */
+  .--placement_top {
+    bottom: calc(100% + var(--space_xs));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Placement: bottom */
+  .--placement_bottom {
+    top: calc(100% + var(--space_xs));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Placement: left */
+  .--placement_left {
+    right: calc(100% + var(--space_xs));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  /* Placement: right */
+  .--placement_right {
+    left: calc(100% + var(--space_xs));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tooltip } from './Tooltip';
+
+describe('Tooltip', () => {
+  it('renders the trigger element', () => {
+    render(
+      <Tooltip content="More info">
+        <button type="button">Hover me</button>
+      </Tooltip>
+    );
+    expect(screen.getByRole('button', { name: 'Hover me' })).toBeInTheDocument();
+  });
+
+  it('renders the tooltip content', () => {
+    render(
+      <Tooltip content="Tooltip text">
+        <button type="button">Trigger</button>
+      </Tooltip>
+    );
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Tooltip text');
+  });
+
+  it('links trigger to tooltip via aria-describedby', () => {
+    render(
+      <Tooltip content="Helpful hint">
+        <button type="button">Action</button>
+      </Tooltip>
+    );
+    const trigger = screen.getByRole('button', { name: 'Action' });
+    const tooltip = screen.getByRole('tooltip');
+    expect(trigger).toHaveAttribute('aria-describedby', tooltip.id);
+  });
+
+  it('shows tooltip on focus', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Focused">
+        <button type="button">Focus me</button>
+      </Tooltip>
+    );
+    await user.tab();
+    expect(screen.getByRole('tooltip')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+const meta = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    placement: { control: 'radio', options: ['top', 'bottom', 'left', 'right'] },
+  },
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '4rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Top: Story = {
+  args: { content: 'Helpful tip', placement: 'top' },
+  render: args => (
+    <Tooltip {...args}>
+      <button type="button">Hover or focus me</button>
+    </Tooltip>
+  ),
+};
+
+export const Bottom: Story = {
+  args: { content: 'Below the trigger', placement: 'bottom' },
+  render: args => (
+    <Tooltip {...args}>
+      <button type="button">Bottom tooltip</button>
+    </Tooltip>
+  ),
+};
+
+export const Left: Story = {
+  args: { content: 'On the left', placement: 'left' },
+  render: args => (
+    <Tooltip {...args}>
+      <button type="button">Left tooltip</button>
+    </Tooltip>
+  ),
+};
+
+export const Right: Story = {
+  args: { content: 'On the right', placement: 'right' },
+  render: args => (
+    <Tooltip {...args}>
+      <button type="button">Right tooltip</button>
+    </Tooltip>
+  ),
+};
+
+export const AllPlacements: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '3rem' }}>
+      {(['top', 'bottom', 'left', 'right'] as const).map(p => (
+        <Tooltip key={p} content={`Placement: ${p}`} placement={p}>
+          <button type="button">{p}</button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+import { ReactElement, ReactNode, cloneElement, isValidElement, useId } from 'react';
+import css from './Tooltip.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface TooltipProps {
+  content: ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  children: ReactElement;
+  className?: string;
+}
+
+export function Tooltip({
+  content,
+  placement = 'top',
+  children,
+  className,
+}: Readonly<TooltipProps>) {
+  const tooltipId = useId();
+
+  const trigger = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        'aria-describedby': tooltipId,
+      })
+    : children;
+
+  return (
+    <span className={cn(css.wrapper, className)}>
+      {trigger}
+      <span
+        id={tooltipId}
+        role="tooltip"
+        className={cn(css.tooltip, css[`--placement_${placement}`])}
+      >
+        {content}
+      </span>
+    </span>
+  );
+}

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

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

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

@@ -0,0 +1,41 @@
+@layer component {
+  .typography {
+    /* Component token — override from a parent context or inline style */
+    --typography_color: var(--color_on-bg);
+
+    margin: 0;
+    font-family: var(--font_family--body);
+    color: var(--typography_color);
+  }
+
+  .--h1 {
+    font-family: var(--font_family--heading);
+    font-size: var(--font_size--heading-1);
+    font-weight: var(--font_weight--bold);
+    line-height: var(--font_line-height--heading);
+  }
+
+  .--h2 {
+    font-family: var(--font_family--heading);
+    font-size: var(--font_size--heading-2);
+    font-weight: var(--font_weight--semibold);
+    line-height: var(--font_line-height--heading);
+  }
+
+  .--h3 {
+    font-family: var(--font_family--heading);
+    font-size: var(--font_size--heading-3);
+    font-weight: var(--font_weight--semibold);
+    line-height: var(--font_line-height--heading);
+  }
+
+  .--body {
+    font-size: var(--font_size--body);
+    line-height: var(--font_line-height--body);
+  }
+
+  .--body_s {
+    font-size: var(--font_size--body--s);
+    line-height: var(--font_line-height--body);
+  }
+}

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

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { Typography } from './Typography';
+
+describe('Typography', () => {
+  it('renders an h1 for the h1 variant', () => {
+    render(<Typography variant="h1">Title</Typography>);
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+  });
+
+  it('renders an h2 for the h2 variant', () => {
+    render(<Typography variant="h2">Subtitle</Typography>);
+    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+  });
+
+  it('renders an h3 for the h3 variant', () => {
+    render(<Typography variant="h3">Sub</Typography>);
+    expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
+  });
+
+  it('renders a p for the body variant', () => {
+    render(<Typography variant="body">Text</Typography>);
+    expect(screen.getByText('Text').tagName).toBe('P');
+  });
+
+  it('renders a p for the body_s variant', () => {
+    render(<Typography variant="body_s">Small</Typography>);
+    expect(screen.getByText('Small').tagName).toBe('P');
+  });
+
+  it('allows overriding the element via component prop', () => {
+    render(<Typography variant="h1" component="span">Custom</Typography>);
+    expect(screen.getByText('Custom').tagName).toBe('SPAN');
+  });
+
+  it('renders children', () => {
+    render(<Typography>Content</Typography>);
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from './Typography';
+
+const meta = {
+  title: 'UI/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const H1: Story = { args: { variant: 'h1', children: 'Heading 1' } };
+export const H2: Story = { args: { variant: 'h2', children: 'Heading 2' } };
+export const H3: Story = { args: { variant: 'h3', children: 'Heading 3' } };
+export const Body: Story = { args: { variant: 'body', children: 'Body text paragraph content.' } };
+export const BodySmall: Story = { args: { variant: 'body_s', children: 'Small body text.' } };
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="body">Body text</Typography>
+      <Typography variant="body_s">Small body</Typography>
+    </div>
+  ),
+};

package/src/components/ui/Typography/Typography.tsx

@@ -0,0 +1,28 @@
+import { ReactNode, ElementType } from 'react';
+import css from './Typography.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+
+interface TypographyProps {
+  variant?: TypographyVariant;
+  component?: ElementType;
+  children: ReactNode;
+  className?: string;
+}
+
+const variantToElement: Record<TypographyVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  body: 'p',
+  body_s: 'p',
+};
+
+export function Typography({ variant = 'body', component, children, className }: TypographyProps) {
+  const Component = component || variantToElement[variant];
+
+  return (
+    <Component className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
+  );
+}

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

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

package/src/css/index.css

@@ -0,0 +1,55 @@
+/* @boostdev/components — framework-agnostic CSS barrel */
+
+/* UI */
+@import '../components/ui/Accordion/Accordion.module.css';
+@import '../components/ui/Alert/Alert.module.css';
+@import '../components/ui/Avatar/Avatar.module.css';
+@import '../components/ui/Badge/Badge.module.css';
+@import '../components/ui/Breadcrumb/Breadcrumb.module.css';
+@import '../components/ui/Calendar/Calendar.module.css';
+@import '../components/ui/Carousel/Carousel.module.css';
+@import '../components/ui/DescriptionList/DescriptionList.module.css';
+@import '../components/ui/Link/Link.module.css';
+@import '../components/ui/Loading/Loading.module.css';
+@import '../components/ui/NotificationBanner/NotificationBanner.module.css';
+@import '../components/ui/Pagination/Pagination.module.css';
+@import '../components/ui/Progress/Progress.module.css';
+@import '../components/ui/ProgressCircle/ProgressCircle.module.css';
+@import '../components/ui/Separator/Separator.module.css';
+@import '../components/ui/Skeleton/Skeleton.module.css';
+@import '../components/ui/SkipLink/SkipLink.module.css';
+@import '../components/ui/Table/Table.module.css';
+@import '../components/ui/Tabs/Tabs.module.css';
+@import '../components/ui/Tooltip/Tooltip.module.css';
+@import '../components/ui/Typography/Typography.module.css';
+
+/* Interaction */
+@import '../components/interaction/Button/Button.module.css';
+@import '../components/interaction/Command/Command.module.css';
+@import '../components/interaction/Dialog/Dialog.module.css';
+@import '../components/interaction/Drawer/Drawer.module.css';
+@import '../components/interaction/DropdownMenu/DropdownMenu.module.css';
+@import '../components/interaction/Popover/Popover.module.css';
+@import '../components/interaction/Rating/Rating.module.css';
+@import '../components/interaction/Toast/Toast.module.css';
+
+/* Form */
+@import '../components/interaction/form/Checkbox/Checkbox.module.css';
+@import '../components/interaction/form/Combobox/Combobox.module.css';
+@import '../components/interaction/form/FileInput/FileInput.module.css';
+@import '../components/interaction/form/FormInput/FormInput.module.css';
+@import '../components/interaction/form/NumberInput/NumberInput.module.css';
+@import '../components/interaction/form/Radio/Radio.module.css';
+@import '../components/interaction/form/Select/Select.module.css';
+@import '../components/interaction/form/Slider/Slider.module.css';
+@import '../components/interaction/form/Switch/Switch.module.css';
+@import '../components/interaction/form/Textarea/Textarea.module.css';
+@import '../components/interaction/form/atoms/InputContainer.module.css';
+@import '../components/interaction/form/atoms/Label.module.css';
+@import '../components/interaction/form/atoms/Message.module.css';
+
+/* Layout */
+@import '../components/layout/ButtonGroup/ButtonGroup.module.css';
+@import '../components/layout/Card/Card.module.css';
+@import '../components/layout/IconWrapper/IconWrapper.module.css';
+@import '../components/layout/SectionHeader/SectionHeader.module.css';

package/src/index.ts

@@ -0,0 +1,54 @@
+// UI
+export { Accordion } from './components/ui/Accordion';
+export { Alert } from './components/ui/Alert';
+export { Avatar } from './components/ui/Avatar';
+export { Badge } from './components/ui/Badge';
+export { Breadcrumb } from './components/ui/Breadcrumb';
+export { Calendar } from './components/ui/Calendar';
+export { Carousel } from './components/ui/Carousel';
+export { DescriptionList } from './components/ui/DescriptionList';
+export { Link } from './components/ui/Link';
+export { Loading } from './components/ui/Loading';
+export { NotificationBanner } from './components/ui/NotificationBanner';
+export { Pagination } from './components/ui/Pagination';
+export { Progress } from './components/ui/Progress';
+export { ProgressCircle } from './components/ui/ProgressCircle';
+export { Separator } from './components/ui/Separator';
+export { Skeleton } from './components/ui/Skeleton';
+export { SkipLink } from './components/ui/SkipLink';
+export { Table } from './components/ui/Table';
+export { Tabs } from './components/ui/Tabs';
+export { Tooltip } from './components/ui/Tooltip';
+export { Typography } from './components/ui/Typography';
+
+// Interaction
+export { Button } from './components/interaction/Button';
+export { Command } from './components/interaction/Command';
+export type { CommandItem } from './components/interaction/Command';
+export { Dialog } from './components/interaction/Dialog';
+export { Drawer } from './components/interaction/Drawer';
+export { DropdownMenu } from './components/interaction/DropdownMenu';
+export { Popover } from './components/interaction/Popover';
+export { Rating } from './components/interaction/Rating';
+export { ToastProvider, useToast } from './components/interaction/Toast';
+
+// Form
+export { Checkbox } from './components/interaction/form/Checkbox';
+export { Combobox } from './components/interaction/form/Combobox';
+export { FileInput } from './components/interaction/form/FileInput';
+export { FormInput } from './components/interaction/form/FormInput';
+export { NumberInput } from './components/interaction/form/NumberInput';
+export { Radio } from './components/interaction/form/Radio';
+export { Select } from './components/interaction/form/Select';
+export { Slider } from './components/interaction/form/Slider';
+export { Switch } from './components/interaction/form/Switch';
+export { Textarea } from './components/interaction/form/Textarea';
+
+// Layout
+export { ButtonGroup } from './components/layout/ButtonGroup';
+export { Card } from './components/layout/Card';
+export { SectionHeader } from './components/layout/SectionHeader';
+export { IconWrapper } from './components/layout/IconWrapper';
+
+// Utilities
+export { cn } from '@boostdev/design-system-foundation';

package/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>;
+  export default classes;
+}