engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.1k

fix(lint): configure Biome to properly ignore build directories

Browse source 
- Add root biome.json that extends packages/config/biome.json
- Add explicit ignore patterns for dist/, build/, .next/, .turbo/, etc.
- Make a11y lints warnings instead of errors (non-blocking)
- Remove invalid biome-ignore comment from Section.tsx
- Apply formatting to all source files (155 files checked, 129 fixed)

This fixes the CI format check that was failing with 2064+ errors
because Biome was checking generated files in dist/ and .turbo/.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-11-26 22:49:45 +10:00
parent 990ba6f050
commit e95bea6847
131 changed files with 8796 additions and 9392 deletions
Download patch file Download diff file Expand all files Collapse all files

716
packages/ui/src/Badge/Badge.test.tsx
View file

@ -1,400 +1,386 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Badge } from "./Badge";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Badge } from './Badge';
describe("Badge", () => {
describe("Rendering", () => {
it("renders a badge element", () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId("badge");
expect(badge).toBeInTheDocument();
expect(badge.tagName).toBe("DIV");
});
describe('Badge', () => {
describe('Rendering', () => {
it('renders a badge element', () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId('badge');
expect(badge).toBeInTheDocument();
expect(badge.tagName).toBe('DIV');
});
it("renders children text", () => {
render(<Badge>Active</Badge>);
expect(screen.getByText("Active")).toBeInTheDocument();
});
});
it('renders children text', () => {
render(<Badge>Active</Badge>);
expect(screen.getByText('Active')).toBeInTheDocument();
});
});
describe("Variants", () => {
it("applies default variant classes", () => {
render(
<Badge variant="default" data-testid="badge">
Default
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-primary");
expect(badge.className).toContain("text-primary-foreground");
expect(badge.className).toContain("border-primary");
});
describe('Variants', () => {
it('applies default variant classes', () => {
render(
<Badge variant="default" data-testid="badge">
Default
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-primary');
expect(badge.className).toContain('text-primary-foreground');
expect(badge.className).toContain('border-primary');
});
it("applies secondary variant classes", () => {
render(
<Badge variant="secondary" data-testid="badge">
Secondary
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-secondary");
expect(badge.className).toContain("text-secondary-foreground");
});
it('applies secondary variant classes', () => {
render(
<Badge variant="secondary" data-testid="badge">
Secondary
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-secondary');
expect(badge.className).toContain('text-secondary-foreground');
});
it("applies outline variant classes", () => {
render(
<Badge variant="outline" data-testid="badge">
Outline
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-transparent");
expect(badge.className).toContain("text-foreground");
expect(badge.className).toContain("border-border");
});
it('applies outline variant classes', () => {
render(
<Badge variant="outline" data-testid="badge">
Outline
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-transparent');
expect(badge.className).toContain('text-foreground');
expect(badge.className).toContain('border-border');
});
it("applies success variant classes", () => {
render(
<Badge variant="success" data-testid="badge">
Success
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-success");
expect(badge.className).toContain("text-success-foreground");
});
it('applies success variant classes', () => {
render(
<Badge variant="success" data-testid="badge">
Success
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-success');
expect(badge.className).toContain('text-success-foreground');
});
it("applies error variant classes", () => {
render(
<Badge variant="error" data-testid="badge">
Error
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-error");
expect(badge.className).toContain("text-error-foreground");
});
it('applies error variant classes', () => {
render(
<Badge variant="error" data-testid="badge">
Error
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-error');
expect(badge.className).toContain('text-error-foreground');
});
it("applies warning variant classes", () => {
render(
<Badge variant="warning" data-testid="badge">
Warning
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-warning");
expect(badge.className).toContain("text-warning-foreground");
});
it('applies warning variant classes', () => {
render(
<Badge variant="warning" data-testid="badge">
Warning
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-warning');
expect(badge.className).toContain('text-warning-foreground');
});
it("applies info variant classes", () => {
render(
<Badge variant="info" data-testid="badge">
Info
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-info");
expect(badge.className).toContain("text-info-foreground");
});
});
it('applies info variant classes', () => {
render(
<Badge variant="info" data-testid="badge">
Info
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-info');
expect(badge.className).toContain('text-info-foreground');
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(
<Badge size="sm" data-testid="badge">
Small
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("px-2");
expect(badge.className).toContain("py-0.5");
expect(badge.className).toContain("text-xs");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(
<Badge size="sm" data-testid="badge">
Small
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('px-2');
expect(badge.className).toContain('py-0.5');
expect(badge.className).toContain('text-xs');
});
it("applies medium size classes (default)", () => {
render(
<Badge size="md" data-testid="badge">
Medium
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("px-2.5");
expect(badge.className).toContain("py-1");
expect(badge.className).toContain("text-sm");
});
it('applies medium size classes (default)', () => {
render(
<Badge size="md" data-testid="badge">
Medium
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('px-2.5');
expect(badge.className).toContain('py-1');
expect(badge.className).toContain('text-sm');
});
it("applies large size classes", () => {
render(
<Badge size="lg" data-testid="badge">
Large
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("px-3");
expect(badge.className).toContain("py-1.5");
expect(badge.className).toContain("text-base");
});
it('applies large size classes', () => {
render(
<Badge size="lg" data-testid="badge">
Large
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('px-3');
expect(badge.className).toContain('py-1.5');
expect(badge.className).toContain('text-base');
});
it("uses medium size by default", () => {
render(<Badge data-testid="badge">Default</Badge>);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("text-sm");
});
});
it('uses medium size by default', () => {
render(<Badge data-testid="badge">Default</Badge>);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('text-sm');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<Badge id="badge-id" data-testid="badge">
Badge
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("id", "badge-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<Badge id="badge-id" data-testid="badge">
Badge
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('id', 'badge-id');
});
it("passes through title attribute", () => {
render(
<Badge title="Badge tooltip" data-testid="badge">
Badge
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("title", "Badge tooltip");
});
it('passes through title attribute', () => {
render(
<Badge title="Badge tooltip" data-testid="badge">
Badge
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('title', 'Badge tooltip');
});
it("passes through onClick handler", () => {
let clicked = false;
render(
<Badge
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Clickable
</Badge>,
);
const badge = screen.getByTestId("badge");
badge.click();
expect(clicked).toBe(true);
});
it('passes through onClick handler', () => {
let clicked = false;
render(
<Badge
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Clickable
</Badge>
);
const badge = screen.getByTestId('badge');
badge.click();
expect(clicked).toBe(true);
});
it("passes through role attribute", () => {
render(
<Badge role="status" data-testid="badge">
Status
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("role", "status");
});
});
it('passes through role attribute', () => {
render(
<Badge role="status" data-testid="badge">
Status
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('role', 'status');
});
});
describe("ARIA Attributes", () => {
it("passes through aria-label", () => {
render(
<Badge aria-label="Status badge" data-testid="badge">
Active
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-label", "Status badge");
});
describe('ARIA Attributes', () => {
it('passes through aria-label', () => {
render(
<Badge aria-label="Status badge" data-testid="badge">
Active
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-label', 'Status badge');
});
it("passes through aria-describedby", () => {
render(
<Badge aria-describedby="description-id" data-testid="badge">
Badge
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-describedby", "description-id");
});
it('passes through aria-describedby', () => {
render(
<Badge aria-describedby="description-id" data-testid="badge">
Badge
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-describedby', 'description-id');
});
it("passes through aria-live for dynamic status", () => {
render(
<Badge aria-live="polite" data-testid="badge">
Updating
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-live", "polite");
});
});
it('passes through aria-live for dynamic status', () => {
render(
<Badge aria-live="polite" data-testid="badge">
Updating
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-live', 'polite');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Badge className="custom-badge" data-testid="badge">
Custom
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("custom-badge");
expect(badge.className).toContain("rounded-full");
expect(badge.className).toContain("bg-primary");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Badge className="custom-badge" data-testid="badge">
Custom
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('custom-badge');
expect(badge.className).toContain('rounded-full');
expect(badge.className).toContain('bg-primary');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to badge element", () => {
let ref: HTMLDivElement | null = null;
render(
<Badge
ref={(el) => {
ref = el;
}}
>
Badge
</Badge>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe("DIV");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to badge element', () => {
let ref: HTMLDivElement | null = null;
render(
<Badge
ref={(el) => {
ref = el;
}}
>
Badge
</Badge>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe('DIV');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("inline-flex");
expect(badge.className).toContain("items-center");
expect(badge.className).toContain("font-semibold");
expect(badge.className).toContain("whitespace-nowrap");
expect(badge.className).toContain("rounded-full");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('inline-flex');
expect(badge.className).toContain('items-center');
expect(badge.className).toContain('font-semibold');
expect(badge.className).toContain('whitespace-nowrap');
expect(badge.className).toContain('rounded-full');
});
it("includes transition classes", () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("transition-base");
});
});
it('includes transition classes', () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('transition-base');
});
});
describe("Compound Scenarios", () => {
it("works correctly with success variant and small size", () => {
render(
<Badge variant="success" size="sm" data-testid="badge">
Success
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-success");
expect(badge.className).toContain("text-xs");
});
describe('Compound Scenarios', () => {
it('works correctly with success variant and small size', () => {
render(
<Badge variant="success" size="sm" data-testid="badge">
Success
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-success');
expect(badge.className).toContain('text-xs');
});
it("works correctly with error variant and large size", () => {
render(
<Badge variant="error" size="lg" data-testid="badge">
Error
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-error");
expect(badge.className).toContain("text-base");
});
it('works correctly with error variant and large size', () => {
render(
<Badge variant="error" size="lg" data-testid="badge">
Error
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-error');
expect(badge.className).toContain('text-base');
});
it("works correctly with outline variant and custom className", () => {
render(
<Badge
variant="outline"
className="hover:bg-accent"
data-testid="badge"
>
Outlined
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-transparent");
expect(badge.className).toContain("hover:bg-accent");
});
it('works correctly with outline variant and custom className', () => {
render(
<Badge variant="outline" className="hover:bg-accent" data-testid="badge">
Outlined
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-transparent');
expect(badge.className).toContain('hover:bg-accent');
});
it("works correctly with warning variant and onClick", () => {
let clicked = false;
render(
<Badge
variant="warning"
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Warning
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-warning");
badge.click();
expect(clicked).toBe(true);
});
});
it('works correctly with warning variant and onClick', () => {
let clicked = false;
render(
<Badge
variant="warning"
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Warning
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-warning');
badge.click();
expect(clicked).toBe(true);
});
});
describe("Content Types", () => {
it("renders with text content", () => {
render(<Badge>Text</Badge>);
expect(screen.getByText("Text")).toBeInTheDocument();
});
describe('Content Types', () => {
it('renders with text content', () => {
render(<Badge>Text</Badge>);
expect(screen.getByText('Text')).toBeInTheDocument();
});
it("renders with numeric content", () => {
render(<Badge>42</Badge>);
expect(screen.getByText("42")).toBeInTheDocument();
});
it('renders with numeric content', () => {
render(<Badge>42</Badge>);
expect(screen.getByText('42')).toBeInTheDocument();
});
it("renders with multiple children", () => {
render(
<Badge>
Count: <strong>5</strong>
</Badge>,
);
expect(screen.getByText("Count:")).toBeInTheDocument();
expect(screen.getByText("5")).toBeInTheDocument();
});
});
it('renders with multiple children', () => {
render(
<Badge>
Count: <strong>5</strong>
</Badge>
);
expect(screen.getByText('Count:')).toBeInTheDocument();
expect(screen.getByText('5')).toBeInTheDocument();
});
});
describe("Semantic Usage", () => {
it("can be used as status indicator with role", () => {
render(
<Badge
variant="success"
role="status"
aria-label="Online status"
data-testid="badge"
>
Online
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("role", "status");
expect(badge).toHaveAttribute("aria-label", "Online status");
expect(badge.className).toContain("bg-success");
});
describe('Semantic Usage', () => {
it('can be used as status indicator with role', () => {
render(
<Badge variant="success" role="status" aria-label="Online status" data-testid="badge">
Online
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('role', 'status');
expect(badge).toHaveAttribute('aria-label', 'Online status');
expect(badge.className).toContain('bg-success');
});
it("can be used as notification count", () => {
render(
<Badge
variant="error"
size="sm"
aria-label="3 unread messages"
data-testid="badge"
>
3
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-label", "3 unread messages");
expect(screen.getByText("3")).toBeInTheDocument();
});
it('can be used as notification count', () => {
render(
<Badge variant="error" size="sm" aria-label="3 unread messages" data-testid="badge">
3
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-label', '3 unread messages');
expect(screen.getByText('3')).toBeInTheDocument();
});
it("can be used as tag/label", () => {
render(
<Badge variant="outline" data-testid="badge">
TypeScript
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-transparent");
expect(screen.getByText("TypeScript")).toBeInTheDocument();
});
});
it('can be used as tag/label', () => {
render(
<Badge variant="outline" data-testid="badge">
TypeScript
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-transparent');
expect(screen.getByText('TypeScript')).toBeInTheDocument();
});
});
});

40
packages/ui/src/Badge/Badge.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { BadgeProps } from "./types";
import { badgeVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { BadgeProps } from './types';
import { badgeVariants } from './variants';
/**
* Badge component
@ -18,21 +18,21 @@ import { badgeVariants } from "./variants";
* ```
*/
export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
({ className, variant = "default", size = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
badgeVariants({
variant,
size,
}),
className,
)}
{...props}
/>
);
},
({ className, variant = 'default', size = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
badgeVariants({
variant,
size,
}),
className
)}
{...props}
/>
);
}
);
Badge.displayName = "Badge";
Badge.displayName = 'Badge';

60
packages/ui/src/Badge/tokens.ts
View file

@ -1,41 +1,41 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Badge component design tokens
* Maps global tokens to badge-specific semantics
*/
export const badgeTokens = {
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
y: {
sm: spacing[0.5], // 0.125rem (2px)
md: spacing[1], // 0.25rem (4px)
lg: spacing[1.5], // 0.375rem (6px)
},
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
y: {
sm: spacing[0.5], // 0.125rem (2px)
md: spacing[1], // 0.25rem (4px)
lg: spacing[1.5], // 0.375rem (6px)
},
},
/** Font sizes for each size */
fontSize: {
sm: "0.75rem", // 12px
md: "0.875rem", // 14px
lg: "1rem", // 16px
},
/** Font sizes for each size */
fontSize: {
sm: '0.75rem', // 12px
md: '0.875rem', // 14px
lg: '1rem', // 16px
},
/** Line heights for each size */
lineHeight: {
sm: "1rem", // 16px
md: "1.25rem", // 20px
lg: "1.5rem", // 24px
},
/** Line heights for each size */
lineHeight: {
sm: '1rem', // 16px
md: '1.25rem', // 20px
lg: '1.5rem', // 24px
},
/** Border radius */
borderRadius: borderRadius.full,
/** Border radius */
borderRadius: borderRadius.full,
/** Border width */
borderWidth: "1px",
/** Border width */
borderWidth: '1px',
} as const;

29
packages/ui/src/Badge/types.ts
View file

@ -1,27 +1,20 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Badge component props
*/
export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
/**
* Visual variant of the badge
* @default 'default'
*/
variant?:
| "default"
| "secondary"
| "outline"
| "success"
| "error"
| "warning"
| "info";
/**
* Visual variant of the badge
* @default 'default'
*/
variant?: 'default' | 'secondary' | 'outline' | 'success' | 'error' | 'warning' | 'info';
/**
* Size of the badge
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the badge
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
}
/**

82
packages/ui/src/Badge/variants.ts
View file

@ -1,66 +1,50 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Badge variant definitions
* Uses custom variant system for type-safe class composition
*/
export const badgeVariants = createVariants({
base: [
// Layout
"inline-flex items-center",
// Typography
"font-semibold",
"whitespace-nowrap",
// Borders & Radius
"rounded-full",
// Transitions
"transition-base",
].join(" "),
base: [
// Layout
'inline-flex items-center',
// Typography
'font-semibold',
'whitespace-nowrap',
// Borders & Radius
'rounded-full',
// Transitions
'transition-base',
].join(' '),
variants: {
variant: {
default: [
"bg-primary text-primary-foreground",
"border border-primary",
].join(" "),
variants: {
variant: {
default: ['bg-primary text-primary-foreground', 'border border-primary'].join(' '),
secondary: [
"bg-secondary text-secondary-foreground",
"border border-secondary",
].join(" "),
secondary: ['bg-secondary text-secondary-foreground', 'border border-secondary'].join(' '),
outline: ["bg-transparent text-foreground", "border border-border"].join(
" ",
),
outline: ['bg-transparent text-foreground', 'border border-border'].join(' '),
success: [
"bg-success text-success-foreground",
"border border-success",
].join(" "),
success: ['bg-success text-success-foreground', 'border border-success'].join(' '),
error: ["bg-error text-error-foreground", "border border-error"].join(
" ",
),
error: ['bg-error text-error-foreground', 'border border-error'].join(' '),
warning: [
"bg-warning text-warning-foreground",
"border border-warning",
].join(" "),
warning: ['bg-warning text-warning-foreground', 'border border-warning'].join(' '),
info: ["bg-info text-info-foreground", "border border-info"].join(" "),
},
info: ['bg-info text-info-foreground', 'border border-info'].join(' '),
},
size: {
sm: "px-2 py-0.5 text-xs",
md: "px-2.5 py-1 text-sm",
lg: "px-3 py-1.5 text-base",
},
},
size: {
sm: 'px-2 py-0.5 text-xs',
md: 'px-2.5 py-1 text-sm',
lg: 'px-3 py-1.5 text-base',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
variant: "default",
size: "md",
},
defaultVariants: {
variant: 'default',
size: 'md',
},
});

601
packages/ui/src/Button/Button.test.tsx
View file

@ -1,338 +1,331 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Button } from "./Button";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Button } from './Button';
describe("Button", () => {
describe("Rendering", () => {
it("renders with default variant and size", () => {
render(<Button>Click me</Button>);
const button = screen.getByRole("button");
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent("Click me");
});
describe('Button', () => {
describe('Rendering', () => {
it('renders with default variant and size', () => {
render(<Button>Click me</Button>);
const button = screen.getByRole('button');
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent('Click me');
});
it("renders as a button element", () => {
render(<Button>Test</Button>);
expect(screen.getByRole("button").tagName).toBe("BUTTON");
});
});
it('renders as a button element', () => {
render(<Button>Test</Button>);
expect(screen.getByRole('button').tagName).toBe('BUTTON');
});
});
describe("Variants", () => {
it("applies default variant classes", () => {
render(
<Button variant="default" data-testid="button">
Default
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("bg-primary");
expect(button.className).toContain("text-primary-foreground");
});
describe('Variants', () => {
it('applies default variant classes', () => {
render(
<Button variant="default" data-testid="button">
Default
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('bg-primary');
expect(button.className).toContain('text-primary-foreground');
});
it("applies destructive variant classes", () => {
render(
<Button variant="destructive" data-testid="button">
Delete
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("bg-error");
expect(button.className).toContain("text-error-foreground");
});
it('applies destructive variant classes', () => {
render(
<Button variant="destructive" data-testid="button">
Delete
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('bg-error');
expect(button.className).toContain('text-error-foreground');
});
it("applies outline variant classes", () => {
render(
<Button variant="outline" data-testid="button">
Outline
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("border");
expect(button.className).toContain("bg-transparent");
});
it('applies outline variant classes', () => {
render(
<Button variant="outline" data-testid="button">
Outline
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('border');
expect(button.className).toContain('bg-transparent');
});
it("applies secondary variant classes", () => {
render(
<Button variant="secondary" data-testid="button">
Secondary
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("bg-secondary");
expect(button.className).toContain("text-secondary-foreground");
});
it('applies secondary variant classes', () => {
render(
<Button variant="secondary" data-testid="button">
Secondary
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('bg-secondary');
expect(button.className).toContain('text-secondary-foreground');
});
it("applies ghost variant classes", () => {
render(
<Button variant="ghost" data-testid="button">
Ghost
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("hover:bg-accent");
});
it('applies ghost variant classes', () => {
render(
<Button variant="ghost" data-testid="button">
Ghost
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('hover:bg-accent');
});
it("applies link variant classes", () => {
render(
<Button variant="link" data-testid="button">
Link
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("text-primary");
expect(button.className).toContain("underline-offset-4");
});
});
it('applies link variant classes', () => {
render(
<Button variant="link" data-testid="button">
Link
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('text-primary');
expect(button.className).toContain('underline-offset-4');
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(
<Button size="sm" data-testid="button">
Small
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-9");
expect(button.className).toContain("px-3");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(
<Button size="sm" data-testid="button">
Small
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-9');
expect(button.className).toContain('px-3');
});
it("applies medium size classes (default)", () => {
render(
<Button size="md" data-testid="button">
Medium
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-10");
expect(button.className).toContain("px-4");
});
it('applies medium size classes (default)', () => {
render(
<Button size="md" data-testid="button">
Medium
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-10');
expect(button.className).toContain('px-4');
});
it("applies large size classes", () => {
render(
<Button size="lg" data-testid="button">
Large
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-11");
expect(button.className).toContain("px-8");
});
it('applies large size classes', () => {
render(
<Button size="lg" data-testid="button">
Large
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-11');
expect(button.className).toContain('px-8');
});
it("applies icon size classes", () => {
render(
<Button size="icon" data-testid="button" aria-label="Icon button" />,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-10");
expect(button.className).toContain("w-10");
});
});
it('applies icon size classes', () => {
render(<Button size="icon" data-testid="button" aria-label="Icon button" />);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-10');
expect(button.className).toContain('w-10');
});
});
describe("Compound Variants", () => {
it("applies compound variant for outline + small", () => {
render(
<Button variant="outline" size="sm" data-testid="button">
Small Outline
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("border");
expect(button.className).toContain("h-9");
});
describe('Compound Variants', () => {
it('applies compound variant for outline + small', () => {
render(
<Button variant="outline" size="sm" data-testid="button">
Small Outline
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('border');
expect(button.className).toContain('h-9');
});
it("applies compound variant for link variants (removes padding)", () => {
render(
<Button variant="link" size="md" data-testid="button">
Link
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("px-0");
});
});
it('applies compound variant for link variants (removes padding)', () => {
render(
<Button variant="link" size="md" data-testid="button">
Link
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('px-0');
});
});
describe("Loading State", () => {
it("shows loading spinner when loading is true", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
describe('Loading State', () => {
it('shows loading spinner when loading is true', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
// Should have loading indicator
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toBeInTheDocument();
expect(spinner?.className).toContain("animate-spin");
});
// Should have loading indicator
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toBeInTheDocument();
expect(spinner?.className).toContain('animate-spin');
});
it("disables button when loading", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
expect(button).toHaveAttribute("aria-busy", "true");
});
it('disables button when loading', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-busy', 'true');
});
it("applies cursor-wait class when loading", () => {
render(
<Button loading data-testid="button">
Loading
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("cursor-wait");
});
it('applies cursor-wait class when loading', () => {
render(
<Button loading data-testid="button">
Loading
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('cursor-wait');
});
it("still shows children text when loading", () => {
render(<Button loading>Processing</Button>);
expect(screen.getByText("Processing")).toBeInTheDocument();
});
});
it('still shows children text when loading', () => {
render(<Button loading>Processing</Button>);
expect(screen.getByText('Processing')).toBeInTheDocument();
});
});
describe("Disabled State", () => {
it("disables button when disabled prop is true", () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
expect(button).toHaveAttribute("aria-disabled", "true");
});
describe('Disabled State', () => {
it('disables button when disabled prop is true', () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
});
it("applies disabled opacity class", () => {
render(
<Button disabled data-testid="button">
Disabled
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("disabled:opacity-50");
expect(button.className).toContain("disabled:pointer-events-none");
});
it('applies disabled opacity class', () => {
render(
<Button disabled data-testid="button">
Disabled
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('disabled:opacity-50');
expect(button.className).toContain('disabled:pointer-events-none');
});
it("is disabled when both disabled and loading are true", () => {
render(
<Button disabled loading>
Both
</Button>,
);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
});
});
it('is disabled when both disabled and loading are true', () => {
render(
<Button disabled loading>
Both
</Button>
);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Button className="custom-class" data-testid="button">
Custom
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("custom-class");
expect(button.className).toContain("bg-primary");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Button className="custom-class" data-testid="button">
Custom
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('custom-class');
expect(button.className).toContain('bg-primary');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to button element", () => {
let ref: HTMLButtonElement | null = null;
render(
<Button
ref={(el) => {
ref = el;
}}
>
Ref Test
</Button>,
);
expect(ref).toBeInstanceOf(HTMLButtonElement);
expect(ref!.tagName).toBe("BUTTON");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to button element', () => {
let ref: HTMLButtonElement | null = null;
render(
<Button
ref={(el) => {
ref = el;
}}
>
Ref Test
</Button>
);
expect(ref).toBeInstanceOf(HTMLButtonElement);
expect(ref!.tagName).toBe('BUTTON');
});
});
describe("HTML Attributes", () => {
it("passes through HTML button attributes", () => {
render(
<Button
type="submit"
name="test-button"
value="test-value"
data-testid="button"
>
Submit
</Button>,
);
const button = screen.getByTestId("button");
expect(button).toHaveAttribute("type", "submit");
expect(button).toHaveAttribute("name", "test-button");
expect(button).toHaveAttribute("value", "test-value");
});
describe('HTML Attributes', () => {
it('passes through HTML button attributes', () => {
render(
<Button type="submit" name="test-button" value="test-value" data-testid="button">
Submit
</Button>
);
const button = screen.getByTestId('button');
expect(button).toHaveAttribute('type', 'submit');
expect(button).toHaveAttribute('name', 'test-button');
expect(button).toHaveAttribute('value', 'test-value');
});
it("supports onClick handler", () => {
let clicked = false;
render(
<Button
onClick={() => {
clicked = true;
}}
>
Click
</Button>,
);
const button = screen.getByRole("button");
button.click();
expect(clicked).toBe(true);
});
});
it('supports onClick handler', () => {
let clicked = false;
render(
<Button
onClick={() => {
clicked = true;
}}
>
Click
</Button>
);
const button = screen.getByRole('button');
button.click();
expect(clicked).toBe(true);
});
});
describe("Accessibility", () => {
it("has proper ARIA attributes for loading state", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
expect(button).toHaveAttribute("aria-busy", "true");
expect(button).toHaveAttribute("aria-disabled", "true");
});
describe('Accessibility', () => {
it('has proper ARIA attributes for loading state', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
expect(button).toHaveAttribute('aria-busy', 'true');
expect(button).toHaveAttribute('aria-disabled', 'true');
});
it("has proper ARIA attributes for disabled state", () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole("button");
expect(button).toHaveAttribute("aria-disabled", "true");
});
it('has proper ARIA attributes for disabled state', () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole('button');
expect(button).toHaveAttribute('aria-disabled', 'true');
});
it("hides loading spinner from screen readers", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toHaveAttribute("aria-hidden", "true");
});
it('hides loading spinner from screen readers', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toHaveAttribute('aria-hidden', 'true');
});
it("supports aria-label for icon buttons", () => {
render(
<Button size="icon" aria-label="Close dialog">
X
</Button>,
);
const button = screen.getByRole("button");
expect(button).toHaveAccessibleName("Close dialog");
});
});
it('supports aria-label for icon buttons', () => {
render(
<Button size="icon" aria-label="Close dialog">
X
</Button>
);
const button = screen.getByRole('button');
expect(button).toHaveAccessibleName('Close dialog');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Button data-testid="button">Base</Button>);
const button = screen.getByTestId("button");
expect(button.className).toContain("inline-flex");
expect(button.className).toContain("items-center");
expect(button.className).toContain("justify-center");
expect(button.className).toContain("font-medium");
expect(button.className).toContain("rounded-md");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Button data-testid="button">Base</Button>);
const button = screen.getByTestId('button');
expect(button.className).toContain('inline-flex');
expect(button.className).toContain('items-center');
expect(button.className).toContain('justify-center');
expect(button.className).toContain('font-medium');
expect(button.className).toContain('rounded-md');
});
it("includes focus ring classes", () => {
render(<Button data-testid="button">Focus</Button>);
const button = screen.getByTestId("button");
expect(button.className).toContain("focus-ring");
});
it('includes focus ring classes', () => {
render(<Button data-testid="button">Focus</Button>);
const button = screen.getByTestId('button');
expect(button.className).toContain('focus-ring');
});
it("includes transition classes", () => {
render(<Button data-testid="button">Transition</Button>);
const button = screen.getByTestId("button");
expect(button.className).toContain("transition-base");
});
});
it('includes transition classes', () => {
render(<Button data-testid="button">Transition</Button>);
const button = screen.getByTestId('button');
expect(button.className).toContain('transition-base');
});
});
});

96
packages/ui/src/Button/Button.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { ButtonProps } from "./types";
import { buttonVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { ButtonProps } from './types';
import { buttonVariants } from './variants';
/**
* Button component
@ -26,49 +26,49 @@ import { buttonVariants } from "./variants";
* ```
*/
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
className,
variant = "default",
size = "md",
loading = false,
disabled = false,
children,
...props
},
ref,
) => {
return (
<button
ref={ref}
type="button"
className={cn(
buttonVariants({
variant,
size,
loading: loading ? "true" : "false",
}),
className,
)}
disabled={disabled || loading}
aria-disabled={disabled || loading ? "true" : undefined}
aria-busy={loading ? "true" : undefined}
{...props}
>
{loading ? (
<span className="flex items-center gap-2">
<span
className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
aria-hidden="true"
/>
<span>{children}</span>
</span>
) : (
children
)}
</button>
);
},
(
{
className,
variant = 'default',
size = 'md',
loading = false,
disabled = false,
children,
...props
},
ref
) => {
return (
<button
ref={ref}
type="button"
className={cn(
buttonVariants({
variant,
size,
loading: loading ? 'true' : 'false',
}),
className
)}
disabled={disabled || loading}
aria-disabled={disabled || loading ? 'true' : undefined}
aria-busy={loading ? 'true' : undefined}
{...props}
>
{loading ? (
<span className="flex items-center gap-2">
<span
className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
aria-hidden="true"
/>
<span>{children}</span>
</span>
) : (
children
)}
</button>
);
}
);
Button.displayName = "Button";
Button.displayName = 'Button';

44
packages/ui/src/Button/tokens.ts
View file

@ -1,33 +1,33 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Button component design tokens
* Maps global tokens to button-specific semantics
*/
export const buttonTokens = {
/** Button heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
icon: spacing[10], // 2.5rem (40px) - square
},
/** Button heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
icon: spacing[10], // 2.5rem (40px) - square
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[8], // 2rem (32px)
},
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[8], // 2rem (32px)
},
},
/** Gap between icon and text */
gap: spacing[2], // 0.5rem (8px)
/** Gap between icon and text */
gap: spacing[2], // 0.5rem (8px)
/** Border radius */
borderRadius: borderRadius.md,
/** Border radius */
borderRadius: borderRadius.md,
/** Transition duration */
transitionDuration: "200ms",
/** Transition duration */
transitionDuration: '200ms',
} as const;

48
packages/ui/src/Button/types.ts
View file

@ -1,34 +1,34 @@
import type { ButtonHTMLAttributes } from "react";
import type { ButtonHTMLAttributes } from 'react';
/**
* Button component props
*/
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
/**
* Visual variant of the button
* @default 'default'
*/
variant?:
| "default"
| "destructive"
| "outline"
| "outline-dotted"
| "secondary"
| "ghost"
| "link"
| "blueprint";
/**
* Visual variant of the button
* @default 'default'
*/
variant?:
| 'default'
| 'destructive'
| 'outline'
| 'outline-dotted'
| 'secondary'
| 'ghost'
| 'link'
| 'blueprint';
/**
* Size of the button
* @default 'md'
*/
size?: "sm" | "md" | "lg" | "icon";
/**
* Size of the button
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg' | 'icon';
/**
* Loading state - disables button and shows loading indicator
* @default false
*/
loading?: boolean;
/**
* Loading state - disables button and shows loading indicator
* @default false
*/
loading?: boolean;
}
/**

184
packages/ui/src/Button/variants.ts
View file

@ -1,112 +1,110 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Button variant definitions
* Uses custom variant system for type-safe class composition
*/
export const buttonVariants = createVariants({
base: [
// Layout
"inline-flex items-center justify-center gap-2",
// Typography
"font-medium text-sm",
"whitespace-nowrap",
// Borders & Radius
"rounded-md",
// Transitions
"transition-base",
// Focus
"focus-ring",
// Disabled state
"disabled:pointer-events-none disabled:opacity-50",
].join(" "),
base: [
// Layout
'inline-flex items-center justify-center gap-2',
// Typography
'font-medium text-sm',
'whitespace-nowrap',
// Borders & Radius
'rounded-md',
// Transitions
'transition-base',
// Focus
'focus-ring',
// Disabled state
'disabled:pointer-events-none disabled:opacity-50',
].join(' '),
variants: {
variant: {
default: [
"bg-primary text-primary-foreground",
"hover:bg-primary/90",
"active:bg-primary/80",
].join(" "),
variants: {
variant: {
default: [
'bg-primary text-primary-foreground',
'hover:bg-primary/90',
'active:bg-primary/80',
].join(' '),
destructive: [
"bg-error text-error-foreground",
"hover:bg-error/90",
"active:bg-error/80",
].join(" "),
destructive: [
'bg-error text-error-foreground',
'hover:bg-error/90',
'active:bg-error/80',
].join(' '),
outline: [
"border border-border bg-transparent",
"hover:bg-accent hover:text-accent-foreground hover:border-border-strong",
"active:bg-accent/80",
].join(" "),
outline: [
'border border-border bg-transparent',
'hover:bg-accent hover:text-accent-foreground hover:border-border-strong',
'active:bg-accent/80',
].join(' '),
"outline-dotted": [
"border border-dotted border-border bg-transparent",
"hover:bg-accent hover:text-accent-foreground hover:border-border-strong",
"active:bg-accent/80",
].join(" "),
'outline-dotted': [
'border border-dotted border-border bg-transparent',
'hover:bg-accent hover:text-accent-foreground hover:border-border-strong',
'active:bg-accent/80',
].join(' '),
blueprint: [
"border border-dotted border-border bg-card",
"hover:shadow-blueprint-hover",
"active:bg-card/90",
].join(" "),
blueprint: [
'border border-dotted border-border bg-card',
'hover:shadow-blueprint-hover',
'active:bg-card/90',
].join(' '),
secondary: [
"bg-secondary text-secondary-foreground",
"hover:bg-secondary/80",
"active:bg-secondary/70",
].join(" "),
secondary: [
'bg-secondary text-secondary-foreground',
'hover:bg-secondary/80',
'active:bg-secondary/70',
].join(' '),
ghost: [
"text-foreground",
"hover:bg-accent hover:text-accent-foreground",
"active:bg-accent/80",
].join(" "),
ghost: [
'text-foreground',
'hover:bg-accent hover:text-accent-foreground',
'active:bg-accent/80',
].join(' '),
link: [
"text-primary underline-offset-4",
"hover:underline",
"active:text-primary/80",
].join(" "),
},
link: ['text-primary underline-offset-4', 'hover:underline', 'active:text-primary/80'].join(
' '
),
},
size: {
sm: "h-9 px-3 text-sm",
md: "h-10 px-4 text-base",
lg: "h-11 px-8 text-lg",
icon: "h-10 w-10 p-0",
},
size: {
sm: 'h-9 px-3 text-sm',
md: 'h-10 px-4 text-base',
lg: 'h-11 px-8 text-lg',
icon: 'h-10 w-10 p-0',
},
loading: {
true: "cursor-wait",
false: "",
},
},
loading: {
true: 'cursor-wait',
false: '',
},
},
compoundVariants: [
{
conditions: { variant: "outline", size: "sm" },
className: "border-1",
},
{
conditions: { variant: "link", size: "sm" },
className: "px-0",
},
{
conditions: { variant: "link", size: "md" },
className: "px-0",
},
{
conditions: { variant: "link", size: "lg" },
className: "px-0",
},
],
compoundVariants: [
{
conditions: { variant: 'outline', size: 'sm' },
className: 'border-1',
},
{
conditions: { variant: 'link', size: 'sm' },
className: 'px-0',
},
{
conditions: { variant: 'link', size: 'md' },
className: 'px-0',
},
{
conditions: { variant: 'link', size: 'lg' },
className: 'px-0',
},
],
defaultVariants: {
variant: "default",
size: "md",
loading: "false",
},
defaultVariants: {
variant: 'default',
size: 'md',
loading: 'false',
},
});

1167
packages/ui/src/Card/Card.test.tsx
View file

File diff suppressed because it is too large Load diff

189
packages/ui/src/Card/Card.tsx
View file

@ -1,21 +1,21 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type {
CardContentProps,
CardDescriptionProps,
CardFooterProps,
CardHeaderProps,
CardProps,
CardTitleProps,
} from "./types";
CardContentProps,
CardDescriptionProps,
CardFooterProps,
CardHeaderProps,
CardProps,
CardTitleProps,
} from './types';
import {
cardContentVariants,
cardDescriptionVariants,
cardFooterVariants,
cardHeaderVariants,
cardTitleVariants,
cardVariants,
} from "./variants";
cardContentVariants,
cardDescriptionVariants,
cardFooterVariants,
cardHeaderVariants,
cardTitleVariants,
cardVariants,
} from './variants';
/**
* Card component
@ -42,24 +42,24 @@ import {
* ```
*/
export const Card = forwardRef<HTMLDivElement, CardProps>(
({ className, variant = "default", padding = "none", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardVariants({
variant,
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, variant = 'default', padding = 'none', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardVariants({
variant,
padding,
}),
className
)}
{...props}
/>
);
}
);
Card.displayName = "Card";
Card.displayName = 'Card';
/**
* CardHeader component
@ -67,23 +67,23 @@ Card.displayName = "Card";
* Header section of a card, typically contains title and description.
*/
export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
({ className, padding = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardHeaderVariants({
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, padding = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardHeaderVariants({
padding,
}),
className
)}
{...props}
/>
);
}
);
CardHeader.displayName = "CardHeader";
CardHeader.displayName = 'CardHeader';
/**
* CardTitle component
@ -91,39 +91,26 @@ CardHeader.displayName = "CardHeader";
* Title heading for a card.
*/
export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
({ className, as = "h3", ...props }, ref) => {
const Component = as;
return (
<Component
ref={ref}
className={cn(cardTitleVariants(), className)}
{...props}
/>
);
},
({ className, as = 'h3', ...props }, ref) => {
const Component = as;
return <Component ref={ref} className={cn(cardTitleVariants(), className)} {...props} />;
}
);
CardTitle.displayName = "CardTitle";
CardTitle.displayName = 'CardTitle';
/**
* CardDescription component
*
* Description text for a card, typically placed below the title.
*/
export const CardDescription = forwardRef<
HTMLParagraphElement,
CardDescriptionProps
>(({ className, ...props }, ref) => {
return (
<p
ref={ref}
className={cn(cardDescriptionVariants(), className)}
{...props}
/>
);
});
export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
({ className, ...props }, ref) => {
return <p ref={ref} className={cn(cardDescriptionVariants(), className)} {...props} />;
}
);
CardDescription.displayName = "CardDescription";
CardDescription.displayName = 'CardDescription';
/**
* CardContent component
@ -131,23 +118,23 @@ CardDescription.displayName = "CardDescription";
* Main content area of a card.
*/
export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
({ className, padding = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardContentVariants({
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, padding = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardContentVariants({
padding,
}),
className
)}
{...props}
/>
);
}
);
CardContent.displayName = "CardContent";
CardContent.displayName = 'CardContent';
/**
* CardFooter component
@ -155,20 +142,20 @@ CardContent.displayName = "CardContent";
* Footer section of a card, typically contains actions.
*/
export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
({ className, padding = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardFooterVariants({
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, padding = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardFooterVariants({
padding,
}),
className
)}
{...props}
/>
);
}
);
CardFooter.displayName = "CardFooter";
CardFooter.displayName = 'CardFooter';

66
packages/ui/src/Card/tokens.ts
View file

@ -1,45 +1,45 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Card component design tokens
* Maps global tokens to card-specific semantics
*/
export const cardTokens = {
/** Card padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Card padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Header/Content/Footer padding */
section: {
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
gap: spacing[6], // 1.5rem (24px) - space between sections
},
/** Header/Content/Footer padding */
section: {
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
gap: spacing[6], // 1.5rem (24px) - space between sections
},
/** Title spacing */
title: {
marginBottom: spacing[1.5], // 0.375rem (6px)
},
/** Title spacing */
title: {
marginBottom: spacing[1.5], // 0.375rem (6px)
},
/** Description spacing */
description: {
marginTop: spacing[2], // 0.5rem (8px)
},
/** Description spacing */
description: {
marginTop: spacing[2], // 0.5rem (8px)
},
/** Border radius */
borderRadius: borderRadius.lg,
/** Border radius */
borderRadius: borderRadius.lg,
/** Elevation shadows */
elevation: {
default: "shadow-sm",
elevated: "shadow-md",
},
/** Elevation shadows */
elevation: {
default: 'shadow-sm',
elevated: 'shadow-md',
},
} as const;

62
packages/ui/src/Card/types.ts
View file

@ -1,42 +1,42 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Card component props
*/
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
/**
* Visual variant of the card
* @default 'default'
*/
variant?: "default" | "elevated" | "outline" | "blueprint" | "ghost";
/**
* Visual variant of the card
* @default 'default'
*/
variant?: 'default' | 'elevated' | 'outline' | 'blueprint' | 'ghost';
/**
* Padding size for the card
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the card
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**
* CardHeader component props
*/
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
/**
* Padding size for the header
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the header
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**
* CardTitle component props
*/
export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
/**
* Heading level
* @default 'h3'
*/
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
/**
* Heading level
* @default 'h3'
*/
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}
/**
@ -48,22 +48,22 @@ export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
* CardContent component props
*/
export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
/**
* Padding size for the content
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the content
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**
* CardFooter component props
*/
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
/**
* Padding size for the footer
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the footer
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**

188
packages/ui/src/Card/variants.ts
View file

@ -1,157 +1,151 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Card variant definitions
* Uses custom variant system for type-safe class composition
*/
export const cardVariants = createVariants({
base: [
// Layout
"relative",
// Borders & Radius
"rounded-lg",
// Transitions
"transition-base",
].join(" "),
base: [
// Layout
'relative',
// Borders & Radius
'rounded-lg',
// Transitions
'transition-base',
].join(' '),
variants: {
variant: {
default: [
"border border-dotted border-border",
"bg-card text-card-foreground",
"shadow-sm",
].join(" "),
variants: {
variant: {
default: [
'border border-dotted border-border',
'bg-card text-card-foreground',
'shadow-sm',
].join(' '),
elevated: [
"border border-dotted border-border",
"bg-surface-elevated text-card-foreground",
"shadow-md",
].join(" "),
elevated: [
'border border-dotted border-border',
'bg-surface-elevated text-card-foreground',
'shadow-md',
].join(' '),
outline: [
"border-2 border-dotted border-border",
"bg-transparent text-foreground",
].join(" "),
outline: ['border-2 border-dotted border-border', 'bg-transparent text-foreground'].join(' '),
blueprint: [
"border border-dotted border-border",
"bg-card text-card-foreground",
"shadow-blueprint",
"hover:shadow-blueprint-hover",
].join(" "),
blueprint: [
'border border-dotted border-border',
'bg-card text-card-foreground',
'shadow-blueprint',
'hover:shadow-blueprint-hover',
].join(' '),
ghost: ["bg-transparent text-foreground"].join(" "),
},
ghost: ['bg-transparent text-foreground'].join(' '),
},
padding: {
none: "p-0",
sm: "p-4",
md: "p-6",
lg: "p-8",
},
},
padding: {
none: 'p-0',
sm: 'p-4',
md: 'p-6',
lg: 'p-8',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
variant: "default",
padding: "none", // Card itself has no padding, sections do
},
defaultVariants: {
variant: 'default',
padding: 'none', // Card itself has no padding, sections do
},
});
/**
* CardHeader variant definitions
*/
export const cardHeaderVariants = createVariants({
base: ["flex flex-col"].join(" "),
base: ['flex flex-col'].join(' '),
variants: {
padding: {
none: "p-0",
sm: "p-4",
md: "p-6",
lg: "p-8",
},
},
variants: {
padding: {
none: 'p-0',
sm: 'p-4',
md: 'p-6',
lg: 'p-8',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
padding: "md",
},
defaultVariants: {
padding: 'md',
},
});
/**
* CardTitle variant definitions
*/
export const cardTitleVariants = createVariants({
base: [
"text-2xl font-semibold leading-none tracking-tight",
"text-foreground",
].join(" "),
base: ['text-2xl font-semibold leading-none tracking-tight', 'text-foreground'].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});
/**
* CardDescription variant definitions
*/
export const cardDescriptionVariants = createVariants({
base: ["text-sm text-foreground-secondary", "mt-1.5"].join(" "),
base: ['text-sm text-foreground-secondary', 'mt-1.5'].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});
/**
* CardContent variant definitions
*/
export const cardContentVariants = createVariants({
base: [
// Base content styles
].join(" "),
base: [
// Base content styles
].join(' '),
variants: {
padding: {
none: "p-0",
sm: "p-4 pt-0",
md: "p-6 pt-0",
lg: "p-8 pt-0",
},
},
variants: {
padding: {
none: 'p-0',
sm: 'p-4 pt-0',
md: 'p-6 pt-0',
lg: 'p-8 pt-0',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
padding: "md",
},
defaultVariants: {
padding: 'md',
},
});
/**
* CardFooter variant definitions
*/
export const cardFooterVariants = createVariants({
base: ["flex items-center"].join(" "),
base: ['flex items-center'].join(' '),
variants: {
padding: {
none: "p-0",
sm: "p-4 pt-0",
md: "p-6 pt-0",
lg: "p-8 pt-0",
},
},
variants: {
padding: {
none: 'p-0',
sm: 'p-4 pt-0',
md: 'p-6 pt-0',
lg: 'p-8 pt-0',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
padding: "md",
},
defaultVariants: {
padding: 'md',
},
});

590
packages/ui/src/CodeBlock/CodeBlock.test.tsx
View file

@ -1,353 +1,331 @@
import { render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { CodeBlock } from "./CodeBlock";
import { render, screen, waitFor } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { CodeBlock } from './CodeBlock';
// Mock clipboard API
const mockClipboard = {
writeText: vi.fn(),
writeText: vi.fn(),
};
Object.defineProperty(navigator, "clipboard", {
value: mockClipboard,
writable: true,
configurable: true,
Object.defineProperty(navigator, 'clipboard', {
value: mockClipboard,
writable: true,
configurable: true,
});
describe("CodeBlock", () => {
beforeEach(() => {
mockClipboard.writeText.mockClear();
});
describe('CodeBlock', () => {
beforeEach(() => {
mockClipboard.writeText.mockClear();
});
describe("Rendering", () => {
it("renders a code block element", () => {
render(<CodeBlock code='console.log("hello")' data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock).toBeInTheDocument();
expect(codeblock.tagName).toBe("DIV");
});
describe('Rendering', () => {
it('renders a code block element', () => {
render(<CodeBlock code='console.log("hello")' data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock).toBeInTheDocument();
expect(codeblock.tagName).toBe('DIV');
});
it("renders code content", () => {
render(<CodeBlock code="npm install package" />);
expect(screen.getByText("npm install package")).toBeInTheDocument();
});
it('renders code content', () => {
render(<CodeBlock code="npm install package" />);
expect(screen.getByText('npm install package')).toBeInTheDocument();
});
it("renders code in a code element", () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code).toBeInTheDocument();
expect(code?.textContent).toBe("test code");
});
it('renders code in a code element', () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code).toBeInTheDocument();
expect(code?.textContent).toBe('test code');
});
it("preserves whitespace in code", () => {
const multilineCode = "line 1\n line 2\n line 3";
render(<CodeBlock code={multilineCode} data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.textContent).toBe(multilineCode);
});
});
it('preserves whitespace in code', () => {
const multilineCode = 'line 1\n line 2\n line 3';
render(<CodeBlock code={multilineCode} data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.textContent).toBe(multilineCode);
});
});
describe("Language", () => {
it("sets data-language attribute", () => {
render(
<CodeBlock
code="const x = 5"
language="javascript"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "javascript");
});
describe('Language', () => {
it('sets data-language attribute', () => {
render(<CodeBlock code="const x = 5" language="javascript" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'javascript');
});
it("defaults to text language", () => {
render(<CodeBlock code="plain text" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "text");
});
it('defaults to text language', () => {
render(<CodeBlock code="plain text" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'text');
});
it("supports different languages", () => {
const { rerender } = render(
<CodeBlock code="code" language="python" data-testid="codeblock" />,
);
let codeblock = screen.getByTestId("codeblock");
let code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "python");
it('supports different languages', () => {
const { rerender } = render(
<CodeBlock code="code" language="python" data-testid="codeblock" />
);
let codeblock = screen.getByTestId('codeblock');
let code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'python');
rerender(
<CodeBlock code="code" language="bash" data-testid="codeblock" />,
);
codeblock = screen.getByTestId("codeblock");
code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "bash");
});
});
rerender(<CodeBlock code="code" language="bash" data-testid="codeblock" />);
codeblock = screen.getByTestId('codeblock');
code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'bash');
});
});
describe("Size Variants", () => {
it("applies small size", () => {
render(<CodeBlock code="code" size="sm" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-xs");
expect(code?.className).toContain("p-3");
});
describe('Size Variants', () => {
it('applies small size', () => {
render(<CodeBlock code="code" size="sm" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-xs');
expect(code?.className).toContain('p-3');
});
it("applies medium size", () => {
render(<CodeBlock code="code" size="md" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-sm");
expect(code?.className).toContain("p-4");
});
it('applies medium size', () => {
render(<CodeBlock code="code" size="md" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-sm');
expect(code?.className).toContain('p-4');
});
it("applies large size", () => {
render(<CodeBlock code="code" size="lg" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-base");
expect(code?.className).toContain("p-6");
});
it('applies large size', () => {
render(<CodeBlock code="code" size="lg" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-base');
expect(code?.className).toContain('p-6');
});
it("uses md size by default", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-sm");
expect(code?.className).toContain("p-4");
});
});
it('uses md size by default', () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-sm');
expect(code?.className).toContain('p-4');
});
});
describe("Copy Button", () => {
it("shows copy button by default", () => {
render(<CodeBlock code="code" />);
expect(screen.getByTestId("copy-button")).toBeInTheDocument();
});
describe('Copy Button', () => {
it('shows copy button by default', () => {
render(<CodeBlock code="code" />);
expect(screen.getByTestId('copy-button')).toBeInTheDocument();
});
it("hides copy button when showCopy is false", () => {
render(<CodeBlock code="code" showCopy={false} />);
expect(screen.queryByTestId("copy-button")).not.toBeInTheDocument();
});
it('hides copy button when showCopy is false', () => {
render(<CodeBlock code="code" showCopy={false} />);
expect(screen.queryByTestId('copy-button')).not.toBeInTheDocument();
});
it("copy button has correct aria-label", () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId("copy-button");
expect(button).toHaveAttribute("aria-label", "Copy code");
});
it('copy button has correct aria-label', () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId('copy-button');
expect(button).toHaveAttribute('aria-label', 'Copy code');
});
it("copy button is a button element", () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId("copy-button");
expect(button.tagName).toBe("BUTTON");
expect(button).toHaveAttribute("type", "button");
});
});
it('copy button is a button element', () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId('copy-button');
expect(button.tagName).toBe('BUTTON');
expect(button).toHaveAttribute('type', 'button');
});
});
describe("Copy Functionality", () => {
it("copies code to clipboard when button clicked", async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId("copy-button");
button.click();
describe('Copy Functionality', () => {
it('copies code to clipboard when button clicked', async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalledWith("test code");
});
});
await waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalledWith('test code');
});
});
it("shows check icon after successful copy", async () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId("copy-button");
button.click();
it('shows check icon after successful copy', async () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(() => {
const icon = button.querySelector("svg");
// Check icon has a different path than copy icon
const path = icon?.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
);
});
});
await waitFor(() => {
const icon = button.querySelector('svg');
// Check icon has a different path than copy icon
const path = icon?.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'
);
});
});
it('changes aria-label to "Copied!" after copy', async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId("copy-button");
button.click();
it('changes aria-label to "Copied!" after copy', async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(() => {
expect(button).toHaveAttribute("aria-label", "Copied!");
});
});
await waitFor(() => {
expect(button).toHaveAttribute('aria-label', 'Copied!');
});
});
it("reverts to copy icon after 2 seconds", async () => {
vi.useFakeTimers();
it('reverts to copy icon after 2 seconds', async () => {
vi.useFakeTimers();
try {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId("copy-button");
button.click();
try {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId('copy-button');
button.click();
// Wait for copy to complete
await vi.waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalled();
});
// Wait for copy to complete
await vi.waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalled();
});
// Verify check icon appears
await vi.waitFor(() => {
const icon = button.querySelector("svg");
const path = icon?.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
);
});
// Verify check icon appears
await vi.waitFor(() => {
const icon = button.querySelector('svg');
const path = icon?.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'
);
});
// Fast forward 2 seconds
vi.advanceTimersByTime(2000);
// Fast forward 2 seconds
vi.advanceTimersByTime(2000);
// Verify copy icon is back
await vi.waitFor(() => {
const icon = button.querySelector("svg");
const path = icon?.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
);
});
} finally {
vi.useRealTimers();
}
});
// Verify copy icon is back
await vi.waitFor(() => {
const icon = button.querySelector('svg');
const path = icon?.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'
);
});
} finally {
vi.useRealTimers();
}
});
it("handles clipboard API errors gracefully", async () => {
const consoleErrorSpy = vi
.spyOn(console, "error")
.mockImplementation(() => {});
mockClipboard.writeText.mockRejectedValueOnce(
new Error("Clipboard not available"),
);
it('handles clipboard API errors gracefully', async () => {
const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
mockClipboard.writeText.mockRejectedValueOnce(new Error('Clipboard not available'));
try {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId("copy-button");
button.click();
try {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(
() => {
expect(consoleErrorSpy).toHaveBeenCalled();
},
{ timeout: 1000 },
);
} finally {
consoleErrorSpy.mockRestore();
}
});
});
await waitFor(
() => {
expect(consoleErrorSpy).toHaveBeenCalled();
},
{ timeout: 1000 }
);
} finally {
consoleErrorSpy.mockRestore();
}
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<CodeBlock code="code" id="codeblock-id" data-testid="codeblock" />,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock).toHaveAttribute("id", "codeblock-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<CodeBlock code="code" id="codeblock-id" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock).toHaveAttribute('id', 'codeblock-id');
});
it("passes through data attributes", () => {
render(
<CodeBlock code="code" data-custom="test" data-testid="codeblock" />,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
render(<CodeBlock code="code" data-custom="test" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<CodeBlock
code="code"
className="custom-class"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("custom-class");
expect(codeblock.className).toContain("bg-background");
expect(codeblock.className).toContain("border");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<CodeBlock code="code" className="custom-class" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock.className).toContain('custom-class');
expect(codeblock.className).toContain('bg-background');
expect(codeblock.className).toContain('border');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to container element", () => {
let ref: HTMLDivElement | null = null;
render(
<CodeBlock
code="code"
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.querySelector("code")).toBeInTheDocument();
});
});
describe('Ref Forwarding', () => {
it('forwards ref to container element', () => {
let ref: HTMLDivElement | null = null;
render(
<CodeBlock
code="code"
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.querySelector('code')).toBeInTheDocument();
});
});
describe("Base Classes", () => {
it("container includes base classes", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("relative");
expect(codeblock.className).toContain("bg-background");
expect(codeblock.className).toContain("border");
expect(codeblock.className).toContain("overflow-hidden");
});
describe('Base Classes', () => {
it('container includes base classes', () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock.className).toContain('relative');
expect(codeblock.className).toContain('bg-background');
expect(codeblock.className).toContain('border');
expect(codeblock.className).toContain('overflow-hidden');
});
it("code element includes base classes", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("block");
expect(code?.className).toContain("font-mono");
expect(code?.className).toContain("text-foreground-secondary");
expect(code?.className).toContain("overflow-x-auto");
expect(code?.className).toContain("whitespace-pre");
});
});
it('code element includes base classes', () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('block');
expect(code?.className).toContain('font-mono');
expect(code?.className).toContain('text-foreground-secondary');
expect(code?.className).toContain('overflow-x-auto');
expect(code?.className).toContain('whitespace-pre');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and custom language", () => {
render(
<CodeBlock
code='def hello():\n print("world")'
language="python"
size="lg"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-base");
expect(code?.className).toContain("p-6");
expect(code).toHaveAttribute("data-language", "python");
});
describe('Compound Scenarios', () => {
it('works correctly with large size and custom language', () => {
render(
<CodeBlock
code='def hello():\n print("world")'
language="python"
size="lg"
data-testid="codeblock"
/>
);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-base');
expect(code?.className).toContain('p-6');
expect(code).toHaveAttribute('data-language', 'python');
});
it("works correctly with no copy button and custom className", () => {
render(
<CodeBlock
code="test"
showCopy={false}
className="my-custom-class"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("my-custom-class");
expect(screen.queryByTestId("copy-button")).not.toBeInTheDocument();
});
});
it('works correctly with no copy button and custom className', () => {
render(
<CodeBlock
code="test"
showCopy={false}
className="my-custom-class"
data-testid="codeblock"
/>
);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock.className).toContain('my-custom-class');
expect(screen.queryByTestId('copy-button')).not.toBeInTheDocument();
});
});
});

104
packages/ui/src/CodeBlock/CodeBlock.tsx
View file

@ -1,12 +1,12 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef, useState } from "react";
import { Icon } from "../Icon/Icon";
import type { CodeBlockProps } from "./types";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef, useState } from 'react';
import { Icon } from '../Icon/Icon';
import type { CodeBlockProps } from './types';
import {
codeBlockCodeVariants,
codeBlockContainerVariants,
codeBlockCopyButtonVariants,
} from "./variants";
codeBlockCodeVariants,
codeBlockContainerVariants,
codeBlockCopyButtonVariants,
} from './variants';
/**
* CodeBlock component
@ -32,58 +32,44 @@ import {
* ```
*/
export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
(
{
className,
code,
language = "text",
size = "md",
showCopy = true,
...props
},
ref,
) => {
const [copied, setCopied] = useState(false);
({ className, code, language = 'text', size = 'md', showCopy = true, ...props }, ref) => {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
// Silently fail if clipboard API is not available
console.error("Failed to copy code:", err);
}
};
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
// Silently fail if clipboard API is not available
console.error('Failed to copy code:', err);
}
};
return (
<div
ref={ref}
className={cn(codeBlockContainerVariants(), className)}
{...props}
>
<code
className={codeBlockCodeVariants({
size,
})}
data-language={language}
>
{code}
</code>
{showCopy && (
<button
type="button"
className={codeBlockCopyButtonVariants()}
onClick={handleCopy}
aria-label={copied ? "Copied!" : "Copy code"}
data-testid="copy-button"
>
<Icon icon={copied ? "check" : "copy"} size="sm" />
</button>
)}
</div>
);
},
return (
<div ref={ref} className={cn(codeBlockContainerVariants(), className)} {...props}>
<code
className={codeBlockCodeVariants({
size,
})}
data-language={language}
>
{code}
</code>
{showCopy && (
<button
type="button"
className={codeBlockCopyButtonVariants()}
onClick={handleCopy}
aria-label={copied ? 'Copied!' : 'Copy code'}
data-testid="copy-button"
>
<Icon icon={copied ? 'check' : 'copy'} size="sm" />
</button>
)}
</div>
);
}
);
CodeBlock.displayName = "CodeBlock";
CodeBlock.displayName = 'CodeBlock';

30
packages/ui/src/CodeBlock/tokens.ts
View file

@ -1,24 +1,24 @@
import { fontSize, spacing } from "../tokens";
import { fontSize, spacing } from '../tokens';
/**
* CodeBlock component design tokens
* Maps global tokens to code block-specific semantics
*/
export const codeBlockTokens = {
/** Padding for each size */
padding: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[6], // 1.5rem (24px)
},
/** Padding for each size */
padding: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[6], // 1.5rem (24px)
},
/** Font size for each size */
fontSize: {
sm: fontSize.xs, // 0.75rem (12px)
md: fontSize.sm, // 0.875rem (14px)
lg: fontSize.base, // 1rem (16px)
},
/** Font size for each size */
fontSize: {
sm: fontSize.xs, // 0.75rem (12px)
md: fontSize.sm, // 0.875rem (14px)
lg: fontSize.base, // 1rem (16px)
},
/** Border radius */
radius: spacing[2], // 0.5rem (8px)
/** Border radius */
radius: spacing[2], // 0.5rem (8px)
} as const;

43
packages/ui/src/CodeBlock/types.ts
View file

@ -1,32 +1,31 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* CodeBlock component props
*/
export interface CodeBlockProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
/**
* Code content to display
*/
code: string;
export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
/**
* Code content to display
*/
code: string;
/**
* Programming language (for display/metadata only)
* @default 'text'
*/
language?: string;
/**
* Programming language (for display/metadata only)
* @default 'text'
*/
language?: string;
/**
* Size variant
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size variant
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether to show copy button
* @default true
*/
showCopy?: boolean;
/**
* Whether to show copy button
* @default true
*/
showCopy?: boolean;
}
/**

116
packages/ui/src/CodeBlock/variants.ts
View file

@ -1,85 +1,85 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* CodeBlock container variant definitions
*/
export const codeBlockContainerVariants = createVariants({
base: [
// Layout
"relative",
// Background
"bg-background",
// Border
"border border-border rounded-lg",
// Overflow
"overflow-hidden",
].join(" "),
base: [
// Layout
'relative',
// Background
'bg-background',
// Border
'border border-border rounded-lg',
// Overflow
'overflow-hidden',
].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});
/**
* CodeBlock code element variant definitions
*/
export const codeBlockCodeVariants = createVariants({
base: [
// Display
"block",
// Font
"font-mono",
// Color
"text-foreground-secondary",
// Overflow
"overflow-x-auto",
// Whitespace
"whitespace-pre",
].join(" "),
base: [
// Display
'block',
// Font
'font-mono',
// Color
'text-foreground-secondary',
// Overflow
'overflow-x-auto',
// Whitespace
'whitespace-pre',
].join(' '),
variants: {
size: {
sm: "text-xs p-3", // 12px font, 12px padding
md: "text-sm p-4", // 14px font, 16px padding
lg: "text-base p-6", // 16px font, 24px padding
},
},
variants: {
size: {
sm: 'text-xs p-3', // 12px font, 12px padding
md: 'text-sm p-4', // 14px font, 16px padding
lg: 'text-base p-6', // 16px font, 24px padding
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});
/**
* CodeBlock copy button variant definitions
*/
export const codeBlockCopyButtonVariants = createVariants({
base: [
// Position
"absolute top-2 right-2",
// Display
"flex items-center justify-center",
// Size
"w-8 h-8",
// Background
"bg-surface-elevated hover:bg-accent",
// Border
"border border-border rounded",
// Color
"text-foreground-secondary hover:text-foreground",
// Cursor
"cursor-pointer",
// Transition
"transition-colors duration-200",
].join(" "),
base: [
// Position
'absolute top-2 right-2',
// Display
'flex items-center justify-center',
// Size
'w-8 h-8',
// Background
'bg-surface-elevated hover:bg-accent',
// Border
'border border-border rounded',
// Color
'text-foreground-secondary hover:text-foreground',
// Cursor
'cursor-pointer',
// Transition
'transition-colors duration-200',
].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});

430
packages/ui/src/Container/Container.test.tsx
View file

@ -1,238 +1,238 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Container } from "./Container";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Container } from './Container';
describe("Container", () => {
describe("Rendering", () => {
it("renders a container element", () => {
render(<Container data-testid="container">Content</Container>);
const container = screen.getByTestId("container");
expect(container).toBeInTheDocument();
expect(container.tagName).toBe("DIV");
});
describe('Container', () => {
describe('Rendering', () => {
it('renders a container element', () => {
render(<Container data-testid="container">Content</Container>);
const container = screen.getByTestId('container');
expect(container).toBeInTheDocument();
expect(container.tagName).toBe('DIV');
});
it("renders children content", () => {
render(<Container>Container content</Container>);
expect(screen.getByText("Container content")).toBeInTheDocument();
});
});
it('renders children content', () => {
render(<Container>Container content</Container>);
expect(screen.getByText('Container content')).toBeInTheDocument();
});
});
describe("Size Variants", () => {
it("applies small size max-width", () => {
render(
<Container size="sm" data-testid="container">
Small
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-sm");
});
describe('Size Variants', () => {
it('applies small size max-width', () => {
render(
<Container size="sm" data-testid="container">
Small
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-sm');
});
it("applies medium size max-width", () => {
render(
<Container size="md" data-testid="container">
Medium
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-md");
});
it('applies medium size max-width', () => {
render(
<Container size="md" data-testid="container">
Medium
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-md');
});
it("applies large size max-width", () => {
render(
<Container size="lg" data-testid="container">
Large
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-lg");
});
it('applies large size max-width', () => {
render(
<Container size="lg" data-testid="container">
Large
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-lg');
});
it("applies extra-large size max-width (default)", () => {
render(
<Container size="xl" data-testid="container">
XLarge
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-xl");
});
it('applies extra-large size max-width (default)', () => {
render(
<Container size="xl" data-testid="container">
XLarge
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-xl');
});
it("applies 2xl size max-width", () => {
render(
<Container size="2xl" data-testid="container">
2XLarge
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-2xl");
});
it('applies 2xl size max-width', () => {
render(
<Container size="2xl" data-testid="container">
2XLarge
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-2xl');
});
it("applies full width", () => {
render(
<Container size="full" data-testid="container">
Full
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-full");
});
it('applies full width', () => {
render(
<Container size="full" data-testid="container">
Full
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-full');
});
it("uses xl size by default", () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-xl");
});
});
it('uses xl size by default', () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-xl');
});
});
describe("Padding Variants", () => {
it("applies no padding", () => {
render(
<Container padding="none" data-testid="container">
None
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-0");
});
describe('Padding Variants', () => {
it('applies no padding', () => {
render(
<Container padding="none" data-testid="container">
None
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-0');
});
it("applies small padding", () => {
render(
<Container padding="sm" data-testid="container">
Small
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-4");
});
it('applies small padding', () => {
render(
<Container padding="sm" data-testid="container">
Small
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-4');
});
it("applies medium padding (default)", () => {
render(
<Container padding="md" data-testid="container">
Medium
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-6");
});
it('applies medium padding (default)', () => {
render(
<Container padding="md" data-testid="container">
Medium
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-6');
});
it("applies large padding", () => {
render(
<Container padding="lg" data-testid="container">
Large
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-8");
});
it('applies large padding', () => {
render(
<Container padding="lg" data-testid="container">
Large
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-8');
});
it("uses md padding by default", () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-6");
});
});
it('uses md padding by default', () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-6');
});
});
describe("Compound Scenarios", () => {
it("works correctly with small size and no padding", () => {
render(
<Container size="sm" padding="none" data-testid="container">
Small no padding
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-sm");
expect(container.className).toContain("px-0");
});
describe('Compound Scenarios', () => {
it('works correctly with small size and no padding', () => {
render(
<Container size="sm" padding="none" data-testid="container">
Small no padding
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-sm');
expect(container.className).toContain('px-0');
});
it("works correctly with full width and large padding", () => {
render(
<Container size="full" padding="lg" data-testid="container">
Full large padding
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-full");
expect(container.className).toContain("px-8");
});
});
it('works correctly with full width and large padding', () => {
render(
<Container size="full" padding="lg" data-testid="container">
Full large padding
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-full');
expect(container.className).toContain('px-8');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<Container id="container-id" data-testid="container">
Container
</Container>,
);
const container = screen.getByTestId("container");
expect(container).toHaveAttribute("id", "container-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<Container id="container-id" data-testid="container">
Container
</Container>
);
const container = screen.getByTestId('container');
expect(container).toHaveAttribute('id', 'container-id');
});
it("passes through onClick handler", () => {
let clicked = false;
render(
<Container
onClick={() => {
clicked = true;
}}
data-testid="container"
>
Clickable
</Container>,
);
const container = screen.getByTestId("container");
container.click();
expect(clicked).toBe(true);
});
it('passes through onClick handler', () => {
let clicked = false;
render(
<Container
onClick={() => {
clicked = true;
}}
data-testid="container"
>
Clickable
</Container>
);
const container = screen.getByTestId('container');
container.click();
expect(clicked).toBe(true);
});
it("passes through aria attributes", () => {
render(
<Container aria-label="Main container" data-testid="container">
Container
</Container>,
);
const container = screen.getByTestId("container");
expect(container).toHaveAttribute("aria-label", "Main container");
});
});
it('passes through aria attributes', () => {
render(
<Container aria-label="Main container" data-testid="container">
Container
</Container>
);
const container = screen.getByTestId('container');
expect(container).toHaveAttribute('aria-label', 'Main container');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Container className="custom-class" data-testid="container">
Custom
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("custom-class");
expect(container.className).toContain("mx-auto");
expect(container.className).toContain("w-full");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Container className="custom-class" data-testid="container">
Custom
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('custom-class');
expect(container.className).toContain('mx-auto');
expect(container.className).toContain('w-full');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to container element", () => {
let ref: HTMLDivElement | null = null;
render(
<Container
ref={(el) => {
ref = el;
}}
>
Container
</Container>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe("DIV");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to container element', () => {
let ref: HTMLDivElement | null = null;
render(
<Container
ref={(el) => {
ref = el;
}}
>
Container
</Container>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe('DIV');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Container data-testid="container">Container</Container>);
const container = screen.getByTestId("container");
expect(container.className).toContain("mx-auto");
expect(container.className).toContain("w-full");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Container data-testid="container">Container</Container>);
const container = screen.getByTestId('container');
expect(container.className).toContain('mx-auto');
expect(container.className).toContain('w-full');
});
});
});

44
packages/ui/src/Container/Container.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { ContainerProps } from "./types";
import { containerVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { ContainerProps } from './types';
import { containerVariants } from './variants';
/**
* Container component
@ -23,23 +23,23 @@ import { containerVariants } from "./variants";
* ```
*/
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
({ className, size = "xl", padding = "md", children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
containerVariants({
size,
padding,
}),
className,
)}
{...props}
>
{children}
</div>
);
},
({ className, size = 'xl', padding = 'md', children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
containerVariants({
size,
padding,
}),
className
)}
{...props}
>
{children}
</div>
);
}
);
Container.displayName = "Container";
Container.displayName = 'Container';

34
packages/ui/src/Container/tokens.ts
View file

@ -1,25 +1,25 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* Container component design tokens
* Maps global tokens to container-specific semantics
*/
export const containerTokens = {
/** Maximum widths for each size */
maxWidth: {
sm: "640px", // max-w-screen-sm
md: "768px", // max-w-screen-md
lg: "1024px", // max-w-screen-lg
xl: "1280px", // max-w-screen-xl
"2xl": "1536px", // max-w-screen-2xl
full: "100%", // max-w-full
},
/** Maximum widths for each size */
maxWidth: {
sm: '640px', // max-w-screen-sm
md: '768px', // max-w-screen-md
lg: '1024px', // max-w-screen-lg
xl: '1280px', // max-w-screen-xl
'2xl': '1536px', // max-w-screen-2xl
full: '100%', // max-w-full
},
/** Horizontal padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Horizontal padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
} as const;

22
packages/ui/src/Container/types.ts
View file

@ -1,20 +1,20 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Container component props
*/
export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
/**
* Maximum width of the container
* @default 'xl'
*/
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
/**
* Maximum width of the container
* @default 'xl'
*/
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
/**
* Horizontal padding
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Horizontal padding
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**

52
packages/ui/src/Container/variants.ts
View file

@ -1,37 +1,37 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Container variant definitions
* Uses custom variant system for type-safe class composition
*/
export const containerVariants = createVariants({
base: [
// Layout
"mx-auto w-full",
].join(" "),
base: [
// Layout
'mx-auto w-full',
].join(' '),
variants: {
size: {
sm: "max-w-screen-sm",
md: "max-w-screen-md",
lg: "max-w-screen-lg",
xl: "max-w-screen-xl",
"2xl": "max-w-screen-2xl",
full: "max-w-full",
},
variants: {
size: {
sm: 'max-w-screen-sm',
md: 'max-w-screen-md',
lg: 'max-w-screen-lg',
xl: 'max-w-screen-xl',
'2xl': 'max-w-screen-2xl',
full: 'max-w-full',
},
padding: {
none: "px-0",
sm: "px-4",
md: "px-6",
lg: "px-8",
},
},
padding: {
none: 'px-0',
sm: 'px-4',
md: 'px-6',
lg: 'px-8',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "xl",
padding: "md",
},
defaultVariants: {
size: 'xl',
padding: 'md',
},
});

563
packages/ui/src/GridContainer/GridContainer.test.tsx
View file

@ -1,317 +1,306 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { GridContainer } from "./GridContainer";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { GridContainer } from './GridContainer';
describe("GridContainer", () => {
describe("Rendering", () => {
it("renders a div element", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid).toBeInTheDocument();
expect(grid.tagName).toBe("DIV");
});
describe('GridContainer', () => {
describe('Rendering', () => {
it('renders a div element', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid).toBeInTheDocument();
expect(grid.tagName).toBe('DIV');
});
it("renders content", () => {
render(<GridContainer>Test content</GridContainer>);
expect(screen.getByText("Test content")).toBeInTheDocument();
});
it('renders content', () => {
render(<GridContainer>Test content</GridContainer>);
expect(screen.getByText('Test content')).toBeInTheDocument();
});
it("renders multiple children", () => {
render(
<GridContainer>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</GridContainer>,
);
expect(screen.getByText("Child 1")).toBeInTheDocument();
expect(screen.getByText("Child 2")).toBeInTheDocument();
expect(screen.getByText("Child 3")).toBeInTheDocument();
});
});
it('renders multiple children', () => {
render(
<GridContainer>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</GridContainer>
);
expect(screen.getByText('Child 1')).toBeInTheDocument();
expect(screen.getByText('Child 2')).toBeInTheDocument();
expect(screen.getByText('Child 3')).toBeInTheDocument();
});
});
describe("Column Variants", () => {
it("applies auto columns by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-[repeat(auto-fit");
});
describe('Column Variants', () => {
it('applies auto columns by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-[repeat(auto-fit');
});
it("applies single column", () => {
render(
<GridContainer columns={1} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-1");
});
it('applies single column', () => {
render(
<GridContainer columns={1} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-1');
});
it("applies responsive 2 columns", () => {
render(
<GridContainer columns={2} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-1");
expect(grid.className).toContain("md:grid-cols-2");
});
it('applies responsive 2 columns', () => {
render(
<GridContainer columns={2} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-1');
expect(grid.className).toContain('md:grid-cols-2');
});
it("applies responsive 3 columns", () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("lg:grid-cols-3");
});
it('applies responsive 3 columns', () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('lg:grid-cols-3');
});
it("applies responsive 4 columns", () => {
render(
<GridContainer columns={4} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("lg:grid-cols-4");
});
});
it('applies responsive 4 columns', () => {
render(
<GridContainer columns={4} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('lg:grid-cols-4');
});
});
describe("Gap Variants", () => {
it("applies no gap", () => {
render(
<GridContainer gap="none" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-0");
});
describe('Gap Variants', () => {
it('applies no gap', () => {
render(
<GridContainer gap="none" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-0');
});
it("applies small gap", () => {
render(
<GridContainer gap="sm" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-4");
});
it('applies small gap', () => {
render(
<GridContainer gap="sm" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-4');
});
it("applies medium gap by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-6");
});
it('applies medium gap by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-6');
});
it("applies large gap", () => {
render(
<GridContainer gap="lg" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-8");
});
it('applies large gap', () => {
render(
<GridContainer gap="lg" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-8');
});
it("applies extra large gap", () => {
render(
<GridContainer gap="xl" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-12");
});
});
it('applies extra large gap', () => {
render(
<GridContainer gap="xl" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-12');
});
});
describe("Responsive Behavior", () => {
it("uses responsive by default", () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("md:grid-cols");
});
describe('Responsive Behavior', () => {
it('uses responsive by default', () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('md:grid-cols');
});
it("applies fixed columns when responsive is false", () => {
render(
<GridContainer columns={3} responsive="fixed" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
// When responsive="fixed", compound variant adds grid-cols-3
// Base variant still adds responsive classes, but compound variant takes precedence
expect(grid.className).toContain("grid-cols-3");
});
});
it('applies fixed columns when responsive is false', () => {
render(
<GridContainer columns={3} responsive="fixed" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
// When responsive="fixed", compound variant adds grid-cols-3
// Base variant still adds responsive classes, but compound variant takes precedence
expect(grid.className).toContain('grid-cols-3');
});
});
describe("Alignment", () => {
it("applies start alignment", () => {
render(
<GridContainer align="start" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-start");
});
describe('Alignment', () => {
it('applies start alignment', () => {
render(
<GridContainer align="start" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-start');
});
it("applies center alignment", () => {
render(
<GridContainer align="center" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-center");
});
it('applies center alignment', () => {
render(
<GridContainer align="center" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-center');
});
it("applies end alignment", () => {
render(
<GridContainer align="end" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-end");
});
it('applies end alignment', () => {
render(
<GridContainer align="end" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-end');
});
it("applies stretch alignment by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-stretch");
});
});
it('applies stretch alignment by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-stretch');
});
});
describe("Justification", () => {
it("applies start justify by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("justify-items-start");
});
describe('Justification', () => {
it('applies start justify by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('justify-items-start');
});
it("applies center justify", () => {
render(
<GridContainer justify="center" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("justify-items-center");
});
it('applies center justify', () => {
render(
<GridContainer justify="center" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('justify-items-center');
});
it("applies end justify", () => {
render(
<GridContainer justify="end" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("justify-items-end");
});
});
it('applies end justify', () => {
render(
<GridContainer justify="end" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('justify-items-end');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<GridContainer id="grid-id" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid).toHaveAttribute("id", "grid-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<GridContainer id="grid-id" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid).toHaveAttribute('id', 'grid-id');
});
it("passes through data attributes", () => {
render(
<GridContainer data-custom="test" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
render(
<GridContainer data-custom="test" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<GridContainer className="custom-class" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("custom-class");
expect(grid.className).toContain("grid");
expect(grid.className).toContain("w-full");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<GridContainer className="custom-class" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('custom-class');
expect(grid.className).toContain('grid');
expect(grid.className).toContain('w-full');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to div element", () => {
let ref: HTMLDivElement | null = null;
render(
<GridContainer
ref={(el) => {
ref = el;
}}
>
Content
</GridContainer>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
});
});
describe('Ref Forwarding', () => {
it('forwards ref to div element', () => {
let ref: HTMLDivElement | null = null;
render(
<GridContainer
ref={(el) => {
ref = el;
}}
>
Content
</GridContainer>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid");
expect(grid.className).toContain("w-full");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid');
expect(grid.className).toContain('w-full');
});
});
describe("Compound Scenarios", () => {
it("works with multiple variants combined", () => {
render(
<GridContainer
columns={4}
gap="lg"
align="center"
justify="center"
data-testid="grid"
>
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("lg:grid-cols-4");
expect(grid.className).toContain("gap-8");
expect(grid.className).toContain("items-center");
expect(grid.className).toContain("justify-items-center");
});
describe('Compound Scenarios', () => {
it('works with multiple variants combined', () => {
render(
<GridContainer columns={4} gap="lg" align="center" justify="center" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('lg:grid-cols-4');
expect(grid.className).toContain('gap-8');
expect(grid.className).toContain('items-center');
expect(grid.className).toContain('justify-items-center');
});
it("works with fixed columns and custom className", () => {
render(
<GridContainer
columns={3}
responsive="fixed"
className="my-custom-grid"
data-testid="grid"
>
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-3");
expect(grid.className).toContain("my-custom-grid");
});
});
it('works with fixed columns and custom className', () => {
render(
<GridContainer columns={3} responsive="fixed" className="my-custom-grid" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-3');
expect(grid.className).toContain('my-custom-grid');
});
});
});

74
packages/ui/src/GridContainer/GridContainer.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { GridContainerProps } from "./types";
import { gridContainerVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { GridContainerProps } from './types';
import { gridContainerVariants } from './variants';
/**
* GridContainer component
@ -25,38 +25,38 @@ import { gridContainerVariants } from "./variants";
* ```
*/
export const GridContainer = forwardRef<HTMLDivElement, GridContainerProps>(
(
{
className,
columns = "auto",
gap = "md",
responsive = "responsive",
align = "stretch",
justify = "start",
children,
...props
},
ref,
) => {
return (
<div
ref={ref}
className={cn(
gridContainerVariants({
columns,
gap,
responsive,
align,
justify,
}),
className,
)}
{...props}
>
{children}
</div>
);
},
(
{
className,
columns = 'auto',
gap = 'md',
responsive = 'responsive',
align = 'stretch',
justify = 'start',
children,
...props
},
ref
) => {
return (
<div
ref={ref}
className={cn(
gridContainerVariants({
columns,
gap,
responsive,
align,
justify,
}),
className
)}
{...props}
>
{children}
</div>
);
}
);
GridContainer.displayName = "GridContainer";
GridContainer.displayName = 'GridContainer';

52
packages/ui/src/GridContainer/types.ts
View file

@ -1,38 +1,38 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* GridContainer component props
*/
export interface GridContainerProps extends HTMLAttributes<HTMLDivElement> {
/**
* Number of columns in the grid
* @default 'auto'
*/
columns?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 12;
/**
* Number of columns in the grid
* @default 'auto'
*/
columns?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 12;
/**
* Gap between grid items
* @default 'md'
*/
gap?: "none" | "sm" | "md" | "lg" | "xl";
/**
* Gap between grid items
* @default 'md'
*/
gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
/**
* Responsive breakpoint behavior
* @default 'responsive'
*/
responsive?: "responsive" | "fixed";
/**
* Responsive breakpoint behavior
* @default 'responsive'
*/
responsive?: 'responsive' | 'fixed';
/**
* Align items vertically
* @default 'stretch'
*/
align?: "start" | "center" | "end" | "stretch";
/**
* Align items vertically
* @default 'stretch'
*/
align?: 'start' | 'center' | 'end' | 'stretch';
/**
* Justify items horizontally
* @default 'start'
*/
justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
/**
* Justify items horizontally
* @default 'start'
*/
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
}
/**

210
packages/ui/src/GridContainer/variants.ts
View file

@ -1,118 +1,118 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* GridContainer variant definitions
*/
export const gridContainerVariants = createVariants({
base: ["grid w-full"].join(" "),
base: ['grid w-full'].join(' '),
variants: {
columns: {
auto: "",
1: "grid-cols-1",
2: "grid-cols-1 md:grid-cols-2",
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
12: "grid-cols-4 md:grid-cols-6 lg:grid-cols-12",
},
variants: {
columns: {
auto: '',
1: 'grid-cols-1',
2: 'grid-cols-1 md:grid-cols-2',
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
12: 'grid-cols-4 md:grid-cols-6 lg:grid-cols-12',
},
gap: {
none: "gap-0",
sm: "gap-4",
md: "gap-6",
lg: "gap-8",
xl: "gap-12",
},
gap: {
none: 'gap-0',
sm: 'gap-4',
md: 'gap-6',
lg: 'gap-8',
xl: 'gap-12',
},
responsive: {
responsive: "",
fixed: "",
},
responsive: {
responsive: '',
fixed: '',
},
align: {
start: "items-start",
center: "items-center",
end: "items-end",
stretch: "items-stretch",
},
align: {
start: 'items-start',
center: 'items-center',
end: 'items-end',
stretch: 'items-stretch',
},
justify: {
start: "justify-items-start",
center: "justify-items-center",
end: "justify-items-end",
between: "justify-items-between",
around: "justify-items-around",
evenly: "justify-items-evenly",
},
},
justify: {
start: 'justify-items-start',
center: 'justify-items-center',
end: 'justify-items-end',
between: 'justify-items-between',
around: 'justify-items-around',
evenly: 'justify-items-evenly',
},
},
compoundVariants: [
{
conditions: {
columns: "auto",
responsive: "responsive",
},
className: "grid-cols-[repeat(auto-fit,minmax(250px,1fr))]",
},
{
conditions: {
columns: "auto",
responsive: "fixed",
},
className: "grid-cols-[repeat(auto-fill,minmax(250px,1fr))]",
},
// Fixed columns don't use responsive breakpoints
{
conditions: {
columns: 2,
responsive: "fixed",
},
className: "grid-cols-2",
},
{
conditions: {
columns: 3,
responsive: "fixed",
},
className: "grid-cols-3",
},
{
conditions: {
columns: 4,
responsive: "fixed",
},
className: "grid-cols-4",
},
{
conditions: {
columns: 5,
responsive: "fixed",
},
className: "grid-cols-5",
},
{
conditions: {
columns: 6,
responsive: "fixed",
},
className: "grid-cols-6",
},
{
conditions: {
columns: 12,
responsive: "fixed",
},
className: "grid-cols-12",
},
],
compoundVariants: [
{
conditions: {
columns: 'auto',
responsive: 'responsive',
},
className: 'grid-cols-[repeat(auto-fit,minmax(250px,1fr))]',
},
{
conditions: {
columns: 'auto',
responsive: 'fixed',
},
className: 'grid-cols-[repeat(auto-fill,minmax(250px,1fr))]',
},
// Fixed columns don't use responsive breakpoints
{
conditions: {
columns: 2,
responsive: 'fixed',
},
className: 'grid-cols-2',
},
{
conditions: {
columns: 3,
responsive: 'fixed',
},
className: 'grid-cols-3',
},
{
conditions: {
columns: 4,
responsive: 'fixed',
},
className: 'grid-cols-4',
},
{
conditions: {
columns: 5,
responsive: 'fixed',
},
className: 'grid-cols-5',
},
{
conditions: {
columns: 6,
responsive: 'fixed',
},
className: 'grid-cols-6',
},
{
conditions: {
columns: 12,
responsive: 'fixed',
},
className: 'grid-cols-12',
},
],
defaultVariants: {
columns: "auto",
gap: "md",
responsive: "responsive",
align: "stretch",
justify: "start",
},
defaultVariants: {
columns: 'auto',
gap: 'md',
responsive: 'responsive',
align: 'stretch',
justify: 'start',
},
});

590
packages/ui/src/Header/Header.test.tsx
View file

@ -1,337 +1,325 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Header } from "./Header";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Header } from './Header';
describe("Header", () => {
describe("Rendering", () => {
it("renders a header element", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toBeInTheDocument();
expect(header.tagName).toBe("HEADER");
});
describe('Header', () => {
describe('Rendering', () => {
it('renders a header element', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toBeInTheDocument();
expect(header.tagName).toBe('HEADER');
});
it("renders without title or actions", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toBeInTheDocument();
expect(screen.queryByTestId("header-title")).not.toBeInTheDocument();
expect(screen.queryByTestId("header-actions")).not.toBeInTheDocument();
});
});
it('renders without title or actions', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toBeInTheDocument();
expect(screen.queryByTestId('header-title')).not.toBeInTheDocument();
expect(screen.queryByTestId('header-actions')).not.toBeInTheDocument();
});
});
describe("Title", () => {
it("renders title when provided", () => {
render(<Header title="TPMJS Registry" />);
expect(screen.getByText("TPMJS Registry")).toBeInTheDocument();
});
describe('Title', () => {
it('renders title when provided', () => {
render(<Header title="TPMJS Registry" />);
expect(screen.getByText('TPMJS Registry')).toBeInTheDocument();
});
it("renders title in title container", () => {
render(<Header title="My App" data-testid="header" />);
const titleContainer = screen.getByTestId("header-title");
expect(titleContainer).toBeInTheDocument();
expect(titleContainer.textContent).toBe("My App");
});
it('renders title in title container', () => {
render(<Header title="My App" data-testid="header" />);
const titleContainer = screen.getByTestId('header-title');
expect(titleContainer).toBeInTheDocument();
expect(titleContainer.textContent).toBe('My App');
});
it("title container has correct base classes", () => {
render(<Header title="App" />);
const titleContainer = screen.getByTestId("header-title");
expect(titleContainer.className).toContain("flex");
expect(titleContainer.className).toContain("items-center");
expect(titleContainer.className).toContain("font-semibold");
expect(titleContainer.className).toContain("text-foreground");
});
it('title container has correct base classes', () => {
render(<Header title="App" />);
const titleContainer = screen.getByTestId('header-title');
expect(titleContainer.className).toContain('flex');
expect(titleContainer.className).toContain('items-center');
expect(titleContainer.className).toContain('font-semibold');
expect(titleContainer.className).toContain('text-foreground');
});
it("renders ReactNode as title", () => {
render(<Header title={<div data-testid="custom-title">Custom</div>} />);
expect(screen.getByTestId("custom-title")).toBeInTheDocument();
});
});
it('renders ReactNode as title', () => {
render(<Header title={<div data-testid="custom-title">Custom</div>} />);
expect(screen.getByTestId('custom-title')).toBeInTheDocument();
});
});
describe("Actions", () => {
it("renders actions when provided", () => {
render(
<Header
actions={
<button type="button" data-testid="action-btn">
Sign In
</button>
}
/>,
);
expect(screen.getByTestId("action-btn")).toBeInTheDocument();
});
describe('Actions', () => {
it('renders actions when provided', () => {
render(
<Header
actions={
<button type="button" data-testid="action-btn">
Sign In
</button>
}
/>
);
expect(screen.getByTestId('action-btn')).toBeInTheDocument();
});
it("renders actions in actions container", () => {
render(<Header actions="Actions content" data-testid="header" />);
const actionsContainer = screen.getByTestId("header-actions");
expect(actionsContainer).toBeInTheDocument();
expect(actionsContainer.textContent).toBe("Actions content");
});
it('renders actions in actions container', () => {
render(<Header actions="Actions content" data-testid="header" />);
const actionsContainer = screen.getByTestId('header-actions');
expect(actionsContainer).toBeInTheDocument();
expect(actionsContainer.textContent).toBe('Actions content');
});
it("actions container has correct base classes", () => {
render(<Header actions="Actions" />);
const actionsContainer = screen.getByTestId("header-actions");
expect(actionsContainer.className).toContain("flex");
expect(actionsContainer.className).toContain("items-center");
});
it('actions container has correct base classes', () => {
render(<Header actions="Actions" />);
const actionsContainer = screen.getByTestId('header-actions');
expect(actionsContainer.className).toContain('flex');
expect(actionsContainer.className).toContain('items-center');
});
it("renders ReactNode as actions", () => {
render(
<Header
actions={<div data-testid="custom-actions">Custom Actions</div>}
/>,
);
expect(screen.getByTestId("custom-actions")).toBeInTheDocument();
});
});
it('renders ReactNode as actions', () => {
render(<Header actions={<div data-testid="custom-actions">Custom Actions</div>} />);
expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
});
});
describe("Children", () => {
it("renders children when provided", () => {
render(<Header>Header content</Header>);
expect(screen.getByText("Header content")).toBeInTheDocument();
});
describe('Children', () => {
it('renders children when provided', () => {
render(<Header>Header content</Header>);
expect(screen.getByText('Header content')).toBeInTheDocument();
});
it("renders children in children container", () => {
render(<Header data-testid="header">Center content</Header>);
const childrenContainer = screen.getByTestId("header-children");
expect(childrenContainer).toBeInTheDocument();
expect(childrenContainer.textContent).toBe("Center content");
});
it('renders children in children container', () => {
render(<Header data-testid="header">Center content</Header>);
const childrenContainer = screen.getByTestId('header-children');
expect(childrenContainer).toBeInTheDocument();
expect(childrenContainer.textContent).toBe('Center content');
});
it("children container has centering classes", () => {
render(<Header>Content</Header>);
const childrenContainer = screen.getByTestId("header-children");
expect(childrenContainer.className).toContain("flex-1");
expect(childrenContainer.className).toContain("flex");
expect(childrenContainer.className).toContain("items-center");
expect(childrenContainer.className).toContain("justify-center");
});
it('children container has centering classes', () => {
render(<Header>Content</Header>);
const childrenContainer = screen.getByTestId('header-children');
expect(childrenContainer.className).toContain('flex-1');
expect(childrenContainer.className).toContain('flex');
expect(childrenContainer.className).toContain('items-center');
expect(childrenContainer.className).toContain('justify-center');
});
it("renders ReactNode as children", () => {
render(
<Header>
<nav data-testid="custom-nav">Navigation</nav>
</Header>,
);
expect(screen.getByTestId("custom-nav")).toBeInTheDocument();
});
});
it('renders ReactNode as children', () => {
render(
<Header>
<nav data-testid="custom-nav">Navigation</nav>
</Header>
);
expect(screen.getByTestId('custom-nav')).toBeInTheDocument();
});
});
describe("Combined Content", () => {
it("renders title and actions together", () => {
render(<Header title="Title" actions="Actions" />);
expect(screen.getByText("Title")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
describe('Combined Content', () => {
it('renders title and actions together', () => {
render(<Header title="Title" actions="Actions" />);
expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
});
it("renders title, children, and actions together", () => {
render(
<Header title="Title" actions="Actions">
Center
</Header>,
);
expect(screen.getByText("Title")).toBeInTheDocument();
expect(screen.getByText("Center")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
it('renders title, children, and actions together', () => {
render(
<Header title="Title" actions="Actions">
Center
</Header>
);
expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByText('Center')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
});
it("maintains correct layout with all content", () => {
render(
<Header title="Left" actions="Right" data-testid="header">
Center
</Header>,
);
const header = screen.getByTestId("header");
expect(header.className).toContain("justify-between");
});
});
it('maintains correct layout with all content', () => {
render(
<Header title="Left" actions="Right" data-testid="header">
Center
</Header>
);
const header = screen.getByTestId('header');
expect(header.className).toContain('justify-between');
});
});
describe("Size Variants", () => {
it("applies small size to header", () => {
render(<Header size="sm" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-12");
expect(header.className).toContain("px-4");
});
describe('Size Variants', () => {
it('applies small size to header', () => {
render(<Header size="sm" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-12');
expect(header.className).toContain('px-4');
});
it("applies medium size to header", () => {
render(<Header size="md" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-16");
expect(header.className).toContain("px-6");
});
it('applies medium size to header', () => {
render(<Header size="md" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-16');
expect(header.className).toContain('px-6');
});
it("applies large size to header", () => {
render(<Header size="lg" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-20");
expect(header.className).toContain("px-8");
});
it('applies large size to header', () => {
render(<Header size="lg" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-20');
expect(header.className).toContain('px-8');
});
it("uses md size by default", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-16");
expect(header.className).toContain("px-6");
});
it('uses md size by default', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-16');
expect(header.className).toContain('px-6');
});
it("applies size to title", () => {
render(<Header title="Title" size="lg" />);
const titleContainer = screen.getByTestId("header-title");
expect(titleContainer.className).toContain("text-xl");
expect(titleContainer.className).toContain("gap-4");
});
it('applies size to title', () => {
render(<Header title="Title" size="lg" />);
const titleContainer = screen.getByTestId('header-title');
expect(titleContainer.className).toContain('text-xl');
expect(titleContainer.className).toContain('gap-4');
});
it("applies size to actions", () => {
render(<Header actions="Actions" size="sm" />);
const actionsContainer = screen.getByTestId("header-actions");
expect(actionsContainer.className).toContain("gap-2");
});
});
it('applies size to actions', () => {
render(<Header actions="Actions" size="sm" />);
const actionsContainer = screen.getByTestId('header-actions');
expect(actionsContainer.className).toContain('gap-2');
});
});
describe("Sticky Positioning", () => {
it("applies sticky classes when sticky is true", () => {
render(<Header sticky={true} data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("sticky");
expect(header.className).toContain("top-0");
expect(header.className).toContain("z-50");
});
describe('Sticky Positioning', () => {
it('applies sticky classes when sticky is true', () => {
render(<Header sticky={true} data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('sticky');
expect(header.className).toContain('top-0');
expect(header.className).toContain('z-50');
});
it("does not apply sticky classes when sticky is false", () => {
render(<Header sticky={false} data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).not.toContain("sticky");
expect(header.className).not.toContain("top-0");
expect(header.className).not.toContain("z-50");
});
it('does not apply sticky classes when sticky is false', () => {
render(<Header sticky={false} data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).not.toContain('sticky');
expect(header.className).not.toContain('top-0');
expect(header.className).not.toContain('z-50');
});
it("is not sticky by default", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).not.toContain("sticky");
});
});
it('is not sticky by default', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).not.toContain('sticky');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(<Header id="header-id" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toHaveAttribute("id", "header-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<Header id="header-id" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toHaveAttribute('id', 'header-id');
});
it("passes through data attributes", () => {
render(<Header data-custom="test" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toHaveAttribute("data-custom", "test");
});
it('passes through data attributes', () => {
render(<Header data-custom="test" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toHaveAttribute('data-custom', 'test');
});
it("passes through aria attributes", () => {
render(<Header aria-label="Main header" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toHaveAttribute("aria-label", "Main header");
});
});
it('passes through aria attributes', () => {
render(<Header aria-label="Main header" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toHaveAttribute('aria-label', 'Main header');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(<Header className="custom-class" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("custom-class");
expect(header.className).toContain("flex");
expect(header.className).toContain("bg-surface");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<Header className="custom-class" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('custom-class');
expect(header.className).toContain('flex');
expect(header.className).toContain('bg-surface');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to header element", () => {
let ref: HTMLElement | null = null;
render(
<Header
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLElement);
expect(ref!.tagName).toBe("HEADER");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to header element', () => {
let ref: HTMLElement | null = null;
render(
<Header
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLElement);
expect(ref!.tagName).toBe('HEADER');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("flex");
expect(header.className).toContain("items-center");
expect(header.className).toContain("justify-between");
expect(header.className).toContain("w-full");
expect(header.className).toContain("bg-surface");
expect(header.className).toContain("border-b");
expect(header.className).toContain("border-border");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('flex');
expect(header.className).toContain('items-center');
expect(header.className).toContain('justify-between');
expect(header.className).toContain('w-full');
expect(header.className).toContain('bg-surface');
expect(header.className).toContain('border-b');
expect(header.className).toContain('border-border');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and sticky", () => {
render(
<Header
title="App"
actions="Sign In"
size="lg"
sticky={true}
data-testid="header"
/>,
);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-20");
expect(header.className).toContain("px-8");
expect(header.className).toContain("sticky");
expect(header.className).toContain("top-0");
expect(header.className).toContain("z-50");
});
describe('Compound Scenarios', () => {
it('works correctly with large size and sticky', () => {
render(<Header title="App" actions="Sign In" size="lg" sticky={true} data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-20');
expect(header.className).toContain('px-8');
expect(header.className).toContain('sticky');
expect(header.className).toContain('top-0');
expect(header.className).toContain('z-50');
});
it("works correctly with all content and custom className", () => {
render(
<Header
title="Title"
actions="Actions"
className="my-header"
size="sm"
data-testid="header"
>
Center
</Header>,
);
const header = screen.getByTestId("header");
expect(header.className).toContain("my-header");
expect(header.className).toContain("h-12");
expect(screen.getByText("Title")).toBeInTheDocument();
expect(screen.getByText("Center")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
it('works correctly with all content and custom className', () => {
render(
<Header
title="Title"
actions="Actions"
className="my-header"
size="sm"
data-testid="header"
>
Center
</Header>
);
const header = screen.getByTestId('header');
expect(header.className).toContain('my-header');
expect(header.className).toContain('h-12');
expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByText('Center')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
});
it("works with complex ReactNode content", () => {
render(
<Header
title={
<div className="logo">
<img src="logo.png" alt="Logo" />
<span>TPMJS</span>
</div>
}
actions={
<div className="nav">
<button type="button">Docs</button>
<button type="button">GitHub</button>
</div>
}
/>,
);
expect(screen.getByText("TPMJS")).toBeInTheDocument();
expect(screen.getByText("Docs")).toBeInTheDocument();
expect(screen.getByText("GitHub")).toBeInTheDocument();
});
});
it('works with complex ReactNode content', () => {
render(
<Header
title={
<div className="logo">
<img src="logo.png" alt="Logo" />
<span>TPMJS</span>
</div>
}
actions={
<div className="nav">
<button type="button">Docs</button>
<button type="button">GitHub</button>
</div>
}
/>
);
expect(screen.getByText('TPMJS')).toBeInTheDocument();
expect(screen.getByText('Docs')).toBeInTheDocument();
expect(screen.getByText('GitHub')).toBeInTheDocument();
});
});
});

110
packages/ui/src/Header/Header.tsx
View file

@ -1,11 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { HeaderProps } from "./types";
import {
headerActionsVariants,
headerTitleVariants,
headerVariants,
} from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { HeaderProps } from './types';
import { headerActionsVariants, headerTitleVariants, headerVariants } from './variants';
/**
* Header component
@ -31,61 +27,47 @@ import {
* ```
*/
export const Header = forwardRef<HTMLElement, HeaderProps>(
(
{
className,
title,
actions,
size = "md",
sticky = false,
children,
...props
},
ref,
) => {
return (
<header
className={cn(
headerVariants({
size,
sticky: sticky ? "true" : "false",
}),
className,
)}
ref={ref}
{...props}
>
{title && (
<div
className={headerTitleVariants({
size,
})}
data-testid="header-title"
>
{title}
</div>
)}
{children && (
<div
className="flex-1 flex items-center justify-center"
data-testid="header-children"
>
{children}
</div>
)}
{actions && (
<div
className={headerActionsVariants({
size,
})}
data-testid="header-actions"
>
{actions}
</div>
)}
</header>
);
},
({ className, title, actions, size = 'md', sticky = false, children, ...props }, ref) => {
return (
<header
className={cn(
headerVariants({
size,
sticky: sticky ? 'true' : 'false',
}),
className
)}
ref={ref}
{...props}
>
{title && (
<div
className={headerTitleVariants({
size,
})}
data-testid="header-title"
>
{title}
</div>
)}
{children && (
<div className="flex-1 flex items-center justify-center" data-testid="header-children">
{children}
</div>
)}
{actions && (
<div
className={headerActionsVariants({
size,
})}
data-testid="header-actions"
>
{actions}
</div>
)}
</header>
);
}
);
Header.displayName = "Header";
Header.displayName = 'Header';

26
packages/ui/src/Header/tokens.ts
View file

@ -1,21 +1,21 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* Header component design tokens
* Maps global tokens to header-specific semantics
*/
export const headerTokens = {
/** Height for each size */
height: {
sm: "3rem", // 48px
md: "4rem", // 64px
lg: "5rem", // 80px
},
/** Height for each size */
height: {
sm: '3rem', // 48px
md: '4rem', // 64px
lg: '5rem', // 80px
},
/** Horizontal padding for each size */
padding: {
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Horizontal padding for each size */
padding: {
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
} as const;

41
packages/ui/src/Header/types.ts
View file

@ -1,31 +1,30 @@
import type { HTMLAttributes, ReactNode } from "react";
import type { HTMLAttributes, ReactNode } from 'react';
/**
* Header component props
*/
export interface HeaderProps
extends Omit<HTMLAttributes<HTMLElement>, "title"> {
/**
* Title/logo content for the left side
*/
title?: ReactNode;
export interface HeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
/**
* Title/logo content for the left side
*/
title?: ReactNode;
/**
* Actions/navigation for the right side
*/
actions?: ReactNode;
/**
* Actions/navigation for the right side
*/
actions?: ReactNode;
/**
* Size variant
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size variant
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether header is sticky
* @default false
*/
sticky?: boolean;
/**
* Whether header is sticky
* @default false
*/
sticky?: boolean;
}
/**

122
packages/ui/src/Header/variants.ts
View file

@ -1,88 +1,88 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Header variant definitions
*/
export const headerVariants = createVariants({
base: [
// Display
"flex items-center justify-between",
// Width
"w-full",
// Background
"bg-surface",
// Border
"border-b border-border",
].join(" "),
base: [
// Display
'flex items-center justify-between',
// Width
'w-full',
// Background
'bg-surface',
// Border
'border-b border-border',
].join(' '),
variants: {
size: {
sm: "h-12 px-4", // 48px height, 16px padding
md: "h-16 px-6", // 64px height, 24px padding
lg: "h-20 px-8", // 80px height, 32px padding
},
sticky: {
true: "sticky top-0 z-50",
false: "",
},
},
variants: {
size: {
sm: 'h-12 px-4', // 48px height, 16px padding
md: 'h-16 px-6', // 64px height, 24px padding
lg: 'h-20 px-8', // 80px height, 32px padding
},
sticky: {
true: 'sticky top-0 z-50',
false: '',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
sticky: "false",
},
defaultVariants: {
size: 'md',
sticky: 'false',
},
});
/**
* Header title variant definitions
*/
export const headerTitleVariants = createVariants({
base: [
// Display
"flex items-center",
// Font
"font-semibold",
// Color
"text-foreground",
].join(" "),
base: [
// Display
'flex items-center',
// Font
'font-semibold',
// Color
'text-foreground',
].join(' '),
variants: {
size: {
sm: "text-base gap-2", // 16px
md: "text-lg gap-3", // 18px
lg: "text-xl gap-4", // 20px
},
},
variants: {
size: {
sm: 'text-base gap-2', // 16px
md: 'text-lg gap-3', // 18px
lg: 'text-xl gap-4', // 20px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});
/**
* Header actions variant definitions
*/
export const headerActionsVariants = createVariants({
base: [
// Display
"flex items-center",
].join(" "),
base: [
// Display
'flex items-center',
].join(' '),
variants: {
size: {
sm: "gap-2", // 8px
md: "gap-3", // 12px
lg: "gap-4", // 16px
},
},
variants: {
size: {
sm: 'gap-2', // 8px
md: 'gap-3', // 12px
lg: 'gap-4', // 16px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});

398
packages/ui/src/Icon/Icon.test.tsx
View file

@ -1,229 +1,219 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Icon } from "./Icon";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Icon } from './Icon';
describe("Icon", () => {
describe("Rendering", () => {
it("renders an SVG element", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toBeInTheDocument();
expect(icon.tagName).toBe("svg");
});
describe('Icon', () => {
describe('Rendering', () => {
it('renders an SVG element', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toBeInTheDocument();
expect(icon.tagName).toBe('svg');
});
it("renders with correct viewBox", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("viewBox", "0 0 24 24");
});
it('renders with correct viewBox', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('viewBox', '0 0 24 24');
});
it("renders with currentColor fill", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("fill", "currentColor");
});
it('renders with currentColor fill', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('fill', 'currentColor');
});
it("includes path element", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toBeInTheDocument();
});
it('includes path element', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toBeInTheDocument();
});
it("is aria-hidden by default", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("aria-hidden", "true");
});
});
it('is aria-hidden by default', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('aria-hidden', 'true');
});
});
describe("Size Variants", () => {
it("applies small size", () => {
render(<Icon icon="check" size="sm" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-4");
expect(icon.className).toContain("h-4");
});
describe('Size Variants', () => {
it('applies small size', () => {
render(<Icon icon="check" size="sm" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-4');
expect(icon.className).toContain('h-4');
});
it("applies medium size", () => {
render(<Icon icon="check" size="md" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-5");
expect(icon.className).toContain("h-5");
});
it('applies medium size', () => {
render(<Icon icon="check" size="md" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-5');
expect(icon.className).toContain('h-5');
});
it("applies large size", () => {
render(<Icon icon="check" size="lg" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-6");
expect(icon.className).toContain("h-6");
});
it('applies large size', () => {
render(<Icon icon="check" size="lg" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-6');
expect(icon.className).toContain('h-6');
});
it("uses md size by default", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-5");
expect(icon.className).toContain("h-5");
});
});
it('uses md size by default', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-5');
expect(icon.className).toContain('h-5');
});
});
describe("Icon Variants", () => {
it("renders copy icon", () => {
render(<Icon icon="copy" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
);
});
describe('Icon Variants', () => {
it('renders copy icon', () => {
render(<Icon icon="copy" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'
);
});
it("renders externalLink icon", () => {
render(<Icon icon="externalLink" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",
);
});
it('renders externalLink icon', () => {
render(<Icon icon="externalLink" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'
);
});
it("renders github icon", () => {
render(<Icon icon="github" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path?.getAttribute("d")).toContain("M12 2C6.477 2 2 6.477 2 12");
});
it('renders github icon', () => {
render(<Icon icon="github" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path?.getAttribute('d')).toContain('M12 2C6.477 2 2 6.477 2 12');
});
it("renders check icon", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
);
});
it('renders check icon', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'
);
});
it("renders x icon", () => {
render(<Icon icon="x" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
);
});
it('renders x icon', () => {
render(<Icon icon="x" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'
);
});
it("renders chevronDown icon", () => {
render(<Icon icon="chevronDown" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",
);
});
});
it('renders chevronDown icon', () => {
render(<Icon icon="chevronDown" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute('d', 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z');
});
});
describe("SVG Attributes", () => {
it("passes through className", () => {
render(<Icon icon="check" className="custom-class" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("custom-class");
});
describe('SVG Attributes', () => {
it('passes through className', () => {
render(<Icon icon="check" className="custom-class" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('custom-class');
});
it("merges custom className with variant classes", () => {
render(<Icon icon="check" className="text-red-500" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("text-red-500");
expect(icon.className).toContain("inline-block");
expect(icon.className).toContain("fill-current");
});
it('merges custom className with variant classes', () => {
render(<Icon icon="check" className="text-red-500" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('text-red-500');
expect(icon.className).toContain('inline-block');
expect(icon.className).toContain('fill-current');
});
it("allows custom aria-hidden", () => {
render(<Icon icon="check" aria-hidden={false} data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("aria-hidden", "false");
});
it('allows custom aria-hidden', () => {
render(<Icon icon="check" aria-hidden={false} data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('aria-hidden', 'false');
});
it("passes through aria-label", () => {
render(
<Icon
icon="check"
aria-label="Success"
aria-hidden={false}
data-testid="icon"
/>,
);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("aria-label", "Success");
});
it('passes through aria-label', () => {
render(<Icon icon="check" aria-label="Success" aria-hidden={false} data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('aria-label', 'Success');
});
it("passes through id attribute", () => {
render(<Icon icon="check" id="icon-id" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("id", "icon-id");
});
});
it('passes through id attribute', () => {
render(<Icon icon="check" id="icon-id" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('id', 'icon-id');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to SVG element", () => {
let ref: SVGSVGElement | null = null;
render(
<Icon
icon="check"
ref={(el: SVGSVGElement | null) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(SVGSVGElement);
expect(ref!.tagName).toBe("svg");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to SVG element', () => {
let ref: SVGSVGElement | null = null;
render(
<Icon
icon="check"
ref={(el: SVGSVGElement | null) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(SVGSVGElement);
expect(ref!.tagName).toBe('svg');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("inline-block");
expect(icon.className).toContain("fill-current");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('inline-block');
expect(icon.className).toContain('fill-current');
});
});
describe("Compound Scenarios", () => {
it("works correctly with custom size and className", () => {
render(
<Icon
icon="github"
size="lg"
className="text-zinc-400 hover:text-zinc-100"
data-testid="icon"
/>,
);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-6");
expect(icon.className).toContain("h-6");
expect(icon.className).toContain("text-zinc-400");
expect(icon.className).toContain("hover:text-zinc-100");
});
describe('Compound Scenarios', () => {
it('works correctly with custom size and className', () => {
render(
<Icon
icon="github"
size="lg"
className="text-zinc-400 hover:text-zinc-100"
data-testid="icon"
/>
);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-6');
expect(icon.className).toContain('h-6');
expect(icon.className).toContain('text-zinc-400');
expect(icon.className).toContain('hover:text-zinc-100');
});
it("works correctly with aria attributes and custom size", () => {
render(
<Icon
icon="externalLink"
size="sm"
aria-label="Opens in new tab"
aria-hidden={false}
data-testid="icon"
/>,
);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-4");
expect(icon.className).toContain("h-4");
expect(icon).toHaveAttribute("aria-label", "Opens in new tab");
expect(icon).toHaveAttribute("aria-hidden", "false");
});
});
it('works correctly with aria attributes and custom size', () => {
render(
<Icon
icon="externalLink"
size="sm"
aria-label="Opens in new tab"
aria-hidden={false}
data-testid="icon"
/>
);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-4');
expect(icon.className).toContain('h-4');
expect(icon).toHaveAttribute('aria-label', 'Opens in new tab');
expect(icon).toHaveAttribute('aria-hidden', 'false');
});
});
});

52
packages/ui/src/Icon/Icon.tsx
View file

@ -1,8 +1,8 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import { type IconName, icons } from "./icons";
import type { IconProps } from "./types";
import { iconVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import { type IconName, icons } from './icons';
import type { IconProps } from './types';
import { iconVariants } from './variants';
export type { IconName };
@ -22,27 +22,27 @@ export type { IconName };
* ```
*/
export const Icon = forwardRef<SVGSVGElement, IconProps>(
({ className, icon, size = "md", ...props }, ref) => {
const iconData = icons[icon];
({ className, icon, size = 'md', ...props }, ref) => {
const iconData = icons[icon];
return (
<svg
ref={ref}
className={cn(
iconVariants({
size,
}),
className,
)}
viewBox={iconData.viewBox}
fill="currentColor"
aria-hidden={props["aria-hidden"] ?? true}
{...props}
>
<path d={iconData.path} />
</svg>
);
},
return (
<svg
ref={ref}
className={cn(
iconVariants({
size,
}),
className
)}
viewBox={iconData.viewBox}
fill="currentColor"
aria-hidden={props['aria-hidden'] ?? true}
{...props}
>
<path d={iconData.path} />
</svg>
);
}
);
Icon.displayName = "Icon";
Icon.displayName = 'Icon';

64
packages/ui/src/Icon/icons.ts
View file

@ -4,38 +4,38 @@
*/
export const icons = {
copy: {
viewBox: "0 0 24 24",
path: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
},
externalLink: {
viewBox: "0 0 24 24",
path: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",
},
github: {
viewBox: "0 0 24 24",
path: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z",
},
check: {
viewBox: "0 0 24 24",
path: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
},
x: {
viewBox: "0 0 24 24",
path: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
},
chevronDown: {
viewBox: "0 0 24 24",
path: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",
},
sun: {
viewBox: "0 0 24 24",
path: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z",
},
moon: {
viewBox: "0 0 24 24",
path: "M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z",
},
copy: {
viewBox: '0 0 24 24',
path: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',
},
externalLink: {
viewBox: '0 0 24 24',
path: 'M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z',
},
github: {
viewBox: '0 0 24 24',
path: 'M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z',
},
check: {
viewBox: '0 0 24 24',
path: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z',
},
x: {
viewBox: '0 0 24 24',
path: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z',
},
chevronDown: {
viewBox: '0 0 24 24',
path: 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z',
},
sun: {
viewBox: '0 0 24 24',
path: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z',
},
moon: {
viewBox: '0 0 24 24',
path: 'M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z',
},
} as const;
export type IconName = keyof typeof icons;

12
packages/ui/src/Icon/tokens.ts
View file

@ -3,10 +3,10 @@
* Maps size variants to pixel dimensions
*/
export const iconTokens = {
/** Icon sizes in pixels */
size: {
sm: "16px", // 1rem
md: "20px", // 1.25rem
lg: "24px", // 1.5rem
},
/** Icon sizes in pixels */
size: {
sm: '16px', // 1rem
md: '20px', // 1.25rem
lg: '24px', // 1.5rem
},
} as const;

25
packages/ui/src/Icon/types.ts
View file

@ -1,21 +1,20 @@
import type { SVGAttributes } from "react";
import type { IconName } from "./icons";
import type { SVGAttributes } from 'react';
import type { IconName } from './icons';
/**
* Icon component props
*/
export interface IconProps
extends Omit<SVGAttributes<SVGSVGElement>, "children"> {
/**
* Icon to display
*/
icon: IconName;
export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
/**
* Icon to display
*/
icon: IconName;
/**
* Size of the icon
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the icon
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
}
/**

36
packages/ui/src/Icon/variants.ts
View file

@ -1,28 +1,28 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Icon variant definitions
* Uses custom variant system for type-safe class composition
*/
export const iconVariants = createVariants({
base: [
// Display
"inline-block",
// Fill
"fill-current",
].join(" "),
base: [
// Display
'inline-block',
// Fill
'fill-current',
].join(' '),
variants: {
size: {
sm: "w-4 h-4", // 16px
md: "w-5 h-5", // 20px
lg: "w-6 h-6", // 24px
},
},
variants: {
size: {
sm: 'w-4 h-4', // 16px
md: 'w-5 h-5', // 20px
lg: 'w-6 h-6', // 24px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});

714
packages/ui/src/Input/Input.test.tsx
View file

@ -1,414 +1,412 @@
import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { Input } from "./Input";
import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { Input } from './Input';
describe("Input", () => {
describe("Rendering", () => {
it("renders an input element", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toBeInTheDocument();
expect(input.tagName).toBe("INPUT");
});
describe('Input', () => {
describe('Rendering', () => {
it('renders an input element', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toBeInTheDocument();
expect(input.tagName).toBe('INPUT');
});
it('renders with default type="text"', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "text");
});
});
it('renders with default type="text"', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'text');
});
});
describe("States", () => {
it("applies default state classes", () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-border");
expect(input.className).toContain("text-foreground");
});
describe('States', () => {
it('applies default state classes', () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-border');
expect(input.className).toContain('text-foreground');
});
it("applies error state classes", () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-error");
});
it('applies error state classes', () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-error');
});
it("applies success state classes", () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-success");
});
it('applies success state classes', () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-success');
});
it("sets aria-invalid on error state", () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-invalid", "true");
});
it('sets aria-invalid on error state', () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-invalid', 'true');
});
it("does not set aria-invalid on default state", () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).not.toHaveAttribute("aria-invalid");
});
it('does not set aria-invalid on default state', () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).not.toHaveAttribute('aria-invalid');
});
it("does not set aria-invalid on success state", () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).not.toHaveAttribute("aria-invalid");
});
});
it('does not set aria-invalid on success state', () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).not.toHaveAttribute('aria-invalid');
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(<Input size="sm" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("h-9");
expect(input.className).toContain("px-3");
expect(input.className).toContain("text-sm");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(<Input size="sm" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('h-9');
expect(input.className).toContain('px-3');
expect(input.className).toContain('text-sm');
});
it("applies medium size classes (default)", () => {
render(<Input size="md" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("h-10");
expect(input.className).toContain("px-3");
expect(input.className).toContain("text-base");
});
it('applies medium size classes (default)', () => {
render(<Input size="md" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('h-10');
expect(input.className).toContain('px-3');
expect(input.className).toContain('text-base');
});
it("applies large size classes", () => {
render(<Input size="lg" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("h-11");
expect(input.className).toContain("px-4");
expect(input.className).toContain("text-lg");
});
});
it('applies large size classes', () => {
render(<Input size="lg" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('h-11');
expect(input.className).toContain('px-4');
expect(input.className).toContain('text-lg');
});
});
describe("Full Width", () => {
it("is full width by default", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("w-full");
});
describe('Full Width', () => {
it('is full width by default', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('w-full');
});
it("applies full width when explicitly true", () => {
render(<Input fullWidth data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("w-full");
});
it('applies full width when explicitly true', () => {
render(<Input fullWidth data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('w-full');
});
it("does not apply full width when false", () => {
render(<Input fullWidth={false} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("w-auto");
});
});
it('does not apply full width when false', () => {
render(<Input fullWidth={false} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('w-auto');
});
});
describe("Input Types", () => {
it('renders with type="email"', () => {
render(<Input type="email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "email");
});
describe('Input Types', () => {
it('renders with type="email"', () => {
render(<Input type="email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'email');
});
it('renders with type="password"', () => {
render(<Input type="password" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "password");
});
it('renders with type="password"', () => {
render(<Input type="password" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'password');
});
it('renders with type="number"', () => {
render(<Input type="number" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "number");
});
it('renders with type="number"', () => {
render(<Input type="number" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'number');
});
it('renders with type="tel"', () => {
render(<Input type="tel" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "tel");
});
it('renders with type="tel"', () => {
render(<Input type="tel" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'tel');
});
it('renders with type="url"', () => {
render(<Input type="url" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "url");
});
it('renders with type="url"', () => {
render(<Input type="url" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'url');
});
it('renders with type="search"', () => {
render(<Input type="search" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "search");
});
it('renders with type="search"', () => {
render(<Input type="search" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'search');
});
it('renders with type="date"', () => {
render(<Input type="date" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "date");
});
it('renders with type="date"', () => {
render(<Input type="date" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'date');
});
it('renders with type="time"', () => {
render(<Input type="time" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "time");
});
it('renders with type="time"', () => {
render(<Input type="time" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'time');
});
it('renders with type="file"', () => {
render(<Input type="file" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "file");
});
});
it('renders with type="file"', () => {
render(<Input type="file" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'file');
});
});
describe("Disabled State", () => {
it("is not disabled by default", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).not.toBeDisabled();
});
describe('Disabled State', () => {
it('is not disabled by default', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).not.toBeDisabled();
});
it("disables input when disabled prop is true", () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toBeDisabled();
});
it('disables input when disabled prop is true', () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toBeDisabled();
});
it("applies disabled opacity class", () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("disabled:opacity-50");
expect(input.className).toContain("disabled:cursor-not-allowed");
});
});
it('applies disabled opacity class', () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('disabled:opacity-50');
expect(input.className).toContain('disabled:cursor-not-allowed');
});
});
describe("Placeholder", () => {
it("renders with placeholder text", () => {
render(<Input placeholder="Enter your email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("placeholder", "Enter your email");
});
describe('Placeholder', () => {
it('renders with placeholder text', () => {
render(<Input placeholder="Enter your email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('placeholder', 'Enter your email');
});
it("applies placeholder styling classes", () => {
render(<Input placeholder="Placeholder text" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("placeholder:text-foreground-tertiary");
});
});
it('applies placeholder styling classes', () => {
render(<Input placeholder="Placeholder text" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('placeholder:text-foreground-tertiary');
});
});
describe("Value and onChange", () => {
it("renders with initial value", () => {
render(
<Input value="test value" onChange={() => {}} data-testid="input" />,
);
const input = screen.getByTestId("input") as HTMLInputElement;
expect(input.value).toBe("test value");
});
describe('Value and onChange', () => {
it('renders with initial value', () => {
render(<Input value="test value" onChange={() => {}} data-testid="input" />);
const input = screen.getByTestId('input') as HTMLInputElement;
expect(input.value).toBe('test value');
});
it("calls onChange when input value changes", () => {
const handleChange = vi.fn();
render(<Input onChange={handleChange} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.change(input, { target: { value: "new value" } });
expect(handleChange).toHaveBeenCalledTimes(1);
});
it('calls onChange when input value changes', () => {
const handleChange = vi.fn();
render(<Input onChange={handleChange} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.change(input, { target: { value: 'new value' } });
expect(handleChange).toHaveBeenCalledTimes(1);
});
it("updates value correctly when typing", () => {
render(<Input defaultValue="" data-testid="input" />);
const input = screen.getByTestId("input") as HTMLInputElement;
fireEvent.change(input, { target: { value: "typed text" } });
expect(input.value).toBe("typed text");
});
});
it('updates value correctly when typing', () => {
render(<Input defaultValue="" data-testid="input" />);
const input = screen.getByTestId('input') as HTMLInputElement;
fireEvent.change(input, { target: { value: 'typed text' } });
expect(input.value).toBe('typed text');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(<Input id="test-input" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("id", "test-input");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<Input id="test-input" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('id', 'test-input');
});
it("passes through name attribute", () => {
render(<Input name="email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("name", "email");
});
it('passes through name attribute', () => {
render(<Input name="email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('name', 'email');
});
it("passes through required attribute", () => {
render(<Input required data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("required");
});
it('passes through required attribute', () => {
render(<Input required data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('required');
});
it("passes through maxLength attribute", () => {
render(<Input maxLength={100} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("maxLength", "100");
});
it('passes through maxLength attribute', () => {
render(<Input maxLength={100} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('maxLength', '100');
});
it("passes through pattern attribute", () => {
render(<Input pattern="[0-9]*" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("pattern", "[0-9]*");
});
it('passes through pattern attribute', () => {
render(<Input pattern="[0-9]*" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('pattern', '[0-9]*');
});
it("passes through min and max for number input", () => {
render(<Input type="number" min={0} max={100} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("min", "0");
expect(input).toHaveAttribute("max", "100");
});
it('passes through min and max for number input', () => {
render(<Input type="number" min={0} max={100} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('min', '0');
expect(input).toHaveAttribute('max', '100');
});
it("passes through step for number input", () => {
render(<Input type="number" step={0.01} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("step", "0.01");
});
it('passes through step for number input', () => {
render(<Input type="number" step={0.01} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('step', '0.01');
});
it("passes through autoComplete attribute", () => {
render(<Input autoComplete="email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("autoComplete", "email");
});
it('passes through autoComplete attribute', () => {
render(<Input autoComplete="email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('autoComplete', 'email');
});
it("passes through autoFocus attribute", () => {
render(<Input autoFocus data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveFocus();
});
});
it('passes through autoFocus attribute', () => {
render(<Input autoFocus data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveFocus();
});
});
describe("ARIA Attributes", () => {
it("passes through aria-label", () => {
render(<Input aria-label="Email address" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-label", "Email address");
});
describe('ARIA Attributes', () => {
it('passes through aria-label', () => {
render(<Input aria-label="Email address" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-label', 'Email address');
});
it("passes through aria-describedby", () => {
render(<Input aria-describedby="helper-text" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-describedby", "helper-text");
});
it('passes through aria-describedby', () => {
render(<Input aria-describedby="helper-text" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-describedby', 'helper-text');
});
it("passes through aria-labelledby", () => {
render(<Input aria-labelledby="label-id" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-labelledby", "label-id");
});
});
it('passes through aria-labelledby', () => {
render(<Input aria-labelledby="label-id" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-labelledby', 'label-id');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(<Input className="custom-input" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("custom-input");
expect(input.className).toContain("rounded-md");
expect(input.className).toContain("border");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<Input className="custom-input" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('custom-input');
expect(input.className).toContain('rounded-md');
expect(input.className).toContain('border');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to input element", () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLInputElement);
expect(ref!.tagName).toBe("INPUT");
});
describe('Ref Forwarding', () => {
it('forwards ref to input element', () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLInputElement);
expect(ref!.tagName).toBe('INPUT');
});
it("can focus input through ref", () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
data-testid="input"
/>,
);
ref!.focus();
expect(screen.getByTestId("input")).toHaveFocus();
});
});
it('can focus input through ref', () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
data-testid="input"
/>
);
ref!.focus();
expect(screen.getByTestId('input')).toHaveFocus();
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("flex");
expect(input.className).toContain("w-full");
expect(input.className).toContain("font-sans");
expect(input.className).toContain("rounded-md");
expect(input.className).toContain("border");
expect(input.className).toContain("bg-background");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('flex');
expect(input.className).toContain('w-full');
expect(input.className).toContain('font-sans');
expect(input.className).toContain('rounded-md');
expect(input.className).toContain('border');
expect(input.className).toContain('bg-background');
});
it("includes transition classes", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("transition-base");
});
it('includes transition classes', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('transition-base');
});
it("includes focus ring classes", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("focus-ring");
});
});
it('includes focus ring classes', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('focus-ring');
});
});
describe("Event Handlers", () => {
it("calls onFocus when input is focused", () => {
const handleFocus = vi.fn();
render(<Input onFocus={handleFocus} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.focus(input);
expect(handleFocus).toHaveBeenCalledTimes(1);
});
describe('Event Handlers', () => {
it('calls onFocus when input is focused', () => {
const handleFocus = vi.fn();
render(<Input onFocus={handleFocus} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.focus(input);
expect(handleFocus).toHaveBeenCalledTimes(1);
});
it("calls onBlur when input loses focus", () => {
const handleBlur = vi.fn();
render(<Input onBlur={handleBlur} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.focus(input);
fireEvent.blur(input);
expect(handleBlur).toHaveBeenCalledTimes(1);
});
it('calls onBlur when input loses focus', () => {
const handleBlur = vi.fn();
render(<Input onBlur={handleBlur} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.focus(input);
fireEvent.blur(input);
expect(handleBlur).toHaveBeenCalledTimes(1);
});
it("calls onKeyDown when key is pressed", () => {
const handleKeyDown = vi.fn();
render(<Input onKeyDown={handleKeyDown} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.keyDown(input, { key: "Enter" });
expect(handleKeyDown).toHaveBeenCalledTimes(1);
});
});
it('calls onKeyDown when key is pressed', () => {
const handleKeyDown = vi.fn();
render(<Input onKeyDown={handleKeyDown} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.keyDown(input, { key: 'Enter' });
expect(handleKeyDown).toHaveBeenCalledTimes(1);
});
});
describe("Compound Scenarios", () => {
it("works correctly with error state and small size", () => {
render(<Input state="error" size="sm" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-error");
expect(input.className).toContain("h-9");
expect(input).toHaveAttribute("aria-invalid", "true");
});
describe('Compound Scenarios', () => {
it('works correctly with error state and small size', () => {
render(<Input state="error" size="sm" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-error');
expect(input.className).toContain('h-9');
expect(input).toHaveAttribute('aria-invalid', 'true');
});
it("works correctly with success state and large size", () => {
render(<Input state="success" size="lg" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-success");
expect(input.className).toContain("h-11");
});
it('works correctly with success state and large size', () => {
render(<Input state="success" size="lg" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-success');
expect(input.className).toContain('h-11');
});
it("works correctly with disabled state and error state", () => {
render(<Input disabled state="error" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toBeDisabled();
expect(input.className).toContain("border-error");
expect(input).toHaveAttribute("aria-invalid", "true");
});
});
it('works correctly with disabled state and error state', () => {
render(<Input disabled state="error" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toBeDisabled();
expect(input.className).toContain('border-error');
expect(input).toHaveAttribute('aria-invalid', 'true');
});
});
});

70
packages/ui/src/Input/Input.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { InputProps } from "./types";
import { inputVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { InputProps } from './types';
import { inputVariants } from './variants';
/**
* Input component
@ -25,36 +25,36 @@ import { inputVariants } from "./variants";
* ```
*/
export const Input = forwardRef<HTMLInputElement, InputProps>(
(
{
className,
type = "text",
state = "default",
size = "md",
fullWidth = true,
disabled = false,
...props
},
ref,
) => {
return (
<input
ref={ref}
type={type}
className={cn(
inputVariants({
state,
size,
fullWidth: fullWidth ? "true" : "false",
}),
className,
)}
disabled={disabled}
aria-invalid={state === "error" ? "true" : undefined}
{...props}
/>
);
},
(
{
className,
type = 'text',
state = 'default',
size = 'md',
fullWidth = true,
disabled = false,
...props
},
ref
) => {
return (
<input
ref={ref}
type={type}
className={cn(
inputVariants({
state,
size,
fullWidth: fullWidth ? 'true' : 'false',
}),
className
)}
disabled={disabled}
aria-invalid={state === 'error' ? 'true' : undefined}
{...props}
/>
);
}
);
Input.displayName = "Input";
Input.displayName = 'Input';

64
packages/ui/src/Input/tokens.ts
View file

@ -1,44 +1,44 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Input component design tokens
* Maps global tokens to input-specific semantics
*/
export const inputTokens = {
/** Input heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
},
/** Input heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[3], // 0.75rem (12px)
lg: spacing[4], // 1rem (16px)
},
y: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[3], // 0.75rem (12px)
lg: spacing[4], // 1rem (16px)
},
y: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
},
/** Font sizes for each size */
fontSize: {
sm: "0.875rem", // 14px
md: "1rem", // 16px
lg: "1.125rem", // 18px
},
/** Font sizes for each size */
fontSize: {
sm: '0.875rem', // 14px
md: '1rem', // 16px
lg: '1.125rem', // 18px
},
/** Border radius */
borderRadius: borderRadius.md,
/** Border radius */
borderRadius: borderRadius.md,
/** Border width */
borderWidth: "1px",
/** Border width */
borderWidth: '1px',
/** Transition duration */
transitionDuration: "200ms",
/** Transition duration */
transitionDuration: '200ms',
} as const;

35
packages/ui/src/Input/types.ts
View file

@ -1,27 +1,26 @@
import type { InputHTMLAttributes } from "react";
import type { InputHTMLAttributes } from 'react';
/**
* Input component props
*/
export interface InputProps
extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
/**
* Visual state of the input
* @default 'default'
*/
state?: "default" | "error" | "success";
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
/**
* Visual state of the input
* @default 'default'
*/
state?: 'default' | 'error' | 'success';
/**
* Size of the input
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the input
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Full width input
* @default false
*/
fullWidth?: boolean;
/**
* Full width input
* @default false
*/
fullWidth?: boolean;
}
/**

114
packages/ui/src/Input/variants.ts
View file

@ -1,71 +1,71 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Input variant definitions
* Uses custom variant system for type-safe class composition
*/
export const inputVariants = createVariants({
base: [
// Layout
"flex w-full",
// Typography
"font-sans",
// Borders & Radius
"rounded-md border",
// Background
"bg-background",
// Transitions
"transition-base",
// Focus
"focus-ring",
// Placeholder
"placeholder:text-foreground-tertiary",
// File input
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
// Disabled state
"disabled:cursor-not-allowed disabled:opacity-50",
].join(" "),
base: [
// Layout
'flex w-full',
// Typography
'font-sans',
// Borders & Radius
'rounded-md border',
// Background
'bg-background',
// Transitions
'transition-base',
// Focus
'focus-ring',
// Placeholder
'placeholder:text-foreground-tertiary',
// File input
'file:border-0 file:bg-transparent file:text-sm file:font-medium',
// Disabled state
'disabled:cursor-not-allowed disabled:opacity-50',
].join(' '),
variants: {
state: {
default: [
"border-border text-foreground",
"hover:border-border-strong",
"focus:border-primary",
].join(" "),
variants: {
state: {
default: [
'border-border text-foreground',
'hover:border-border-strong',
'focus:border-primary',
].join(' '),
error: [
"border-error text-foreground",
"hover:border-error",
"focus:border-error",
"focus:ring-error/20",
].join(" "),
error: [
'border-error text-foreground',
'hover:border-error',
'focus:border-error',
'focus:ring-error/20',
].join(' '),
success: [
"border-success text-foreground",
"hover:border-success",
"focus:border-success",
"focus:ring-success/20",
].join(" "),
},
success: [
'border-success text-foreground',
'hover:border-success',
'focus:border-success',
'focus:ring-success/20',
].join(' '),
},
size: {
sm: "h-9 px-3 py-2 text-sm",
md: "h-10 px-3 py-2.5 text-base",
lg: "h-11 px-4 py-3 text-lg",
},
size: {
sm: 'h-9 px-3 py-2 text-sm',
md: 'h-10 px-3 py-2.5 text-base',
lg: 'h-11 px-4 py-3 text-lg',
},
fullWidth: {
true: "w-full",
false: "w-auto",
},
},
fullWidth: {
true: 'w-full',
false: 'w-auto',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
state: "default",
size: "md",
fullWidth: "true",
},
defaultVariants: {
state: 'default',
size: 'md',
fullWidth: 'true',
},
});

564
packages/ui/src/Label/Label.test.tsx
View file

@ -1,317 +1,317 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Label } from "./Label";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Label } from './Label';
describe("Label", () => {
describe("Rendering", () => {
it("renders a label element", () => {
render(<Label data-testid="label">Label text</Label>);
const label = screen.getByTestId("label");
expect(label).toBeInTheDocument();
expect(label.tagName).toBe("LABEL");
});
describe('Label', () => {
describe('Rendering', () => {
it('renders a label element', () => {
render(<Label data-testid="label">Label text</Label>);
const label = screen.getByTestId('label');
expect(label).toBeInTheDocument();
expect(label.tagName).toBe('LABEL');
});
it("renders children text", () => {
render(<Label>Email Address</Label>);
expect(screen.getByText("Email Address")).toBeInTheDocument();
});
});
it('renders children text', () => {
render(<Label>Email Address</Label>);
expect(screen.getByText('Email Address')).toBeInTheDocument();
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(
<Label size="sm" data-testid="label">
Small label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-sm");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(
<Label size="sm" data-testid="label">
Small label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-sm');
});
it("applies medium size classes (default)", () => {
render(
<Label size="md" data-testid="label">
Medium label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-base");
});
it('applies medium size classes (default)', () => {
render(
<Label size="md" data-testid="label">
Medium label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-base');
});
it("applies large size classes", () => {
render(
<Label size="lg" data-testid="label">
Large label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-lg");
});
it('applies large size classes', () => {
render(
<Label size="lg" data-testid="label">
Large label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-lg');
});
it("uses medium size by default", () => {
render(<Label data-testid="label">Default label</Label>);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-base");
});
});
it('uses medium size by default', () => {
render(<Label data-testid="label">Default label</Label>);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-base');
});
});
describe("Required Indicator", () => {
it("does not show required indicator by default", () => {
render(<Label>Label</Label>);
expect(screen.queryByText("*")).not.toBeInTheDocument();
});
describe('Required Indicator', () => {
it('does not show required indicator by default', () => {
render(<Label>Label</Label>);
expect(screen.queryByText('*')).not.toBeInTheDocument();
});
it("shows required indicator when required is true", () => {
render(<Label required>Required field</Label>);
expect(screen.getByText("*")).toBeInTheDocument();
});
it('shows required indicator when required is true', () => {
render(<Label required>Required field</Label>);
expect(screen.getByText('*')).toBeInTheDocument();
});
it("hides required indicator from screen readers", () => {
render(
<Label required data-testid="label">
Required field
</Label>,
);
const asterisk = screen.getByText("*");
expect(asterisk).toHaveAttribute("aria-hidden", "true");
});
it('hides required indicator from screen readers', () => {
render(
<Label required data-testid="label">
Required field
</Label>
);
const asterisk = screen.getByText('*');
expect(asterisk).toHaveAttribute('aria-hidden', 'true');
});
it("applies error color to required indicator", () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText("*");
expect(asterisk.className).toContain("text-error");
});
it('applies error color to required indicator', () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText('*');
expect(asterisk.className).toContain('text-error');
});
it("applies proper spacing to required indicator", () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText("*");
expect(asterisk.className).toContain("ml-1");
});
});
it('applies proper spacing to required indicator', () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText('*');
expect(asterisk.className).toContain('ml-1');
});
});
describe("Disabled State", () => {
it("is not disabled by default", () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId("label");
// Should not have the direct opacity-50 class (peer-disabled:opacity-50 is okay)
expect(label.className).toContain("peer-disabled:opacity-50");
expect(label.className.split(" ")).not.toContain("opacity-50");
});
describe('Disabled State', () => {
it('is not disabled by default', () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId('label');
// Should not have the direct opacity-50 class (peer-disabled:opacity-50 is okay)
expect(label.className).toContain('peer-disabled:opacity-50');
expect(label.className.split(' ')).not.toContain('opacity-50');
});
it("applies disabled classes when disabled is true", () => {
render(
<Label disabled data-testid="label">
Disabled label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("opacity-50");
expect(label.className).toContain("cursor-not-allowed");
});
});
it('applies disabled classes when disabled is true', () => {
render(
<Label disabled data-testid="label">
Disabled label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('opacity-50');
expect(label.className).toContain('cursor-not-allowed');
});
});
describe("HTML Attributes", () => {
it("associates with input using htmlFor", () => {
render(
<Label htmlFor="email-input" data-testid="label">
Email
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("for", "email-input");
});
describe('HTML Attributes', () => {
it('associates with input using htmlFor', () => {
render(
<Label htmlFor="email-input" data-testid="label">
Email
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('for', 'email-input');
});
it("passes through id attribute", () => {
render(
<Label id="label-id" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("id", "label-id");
});
it('passes through id attribute', () => {
render(
<Label id="label-id" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('id', 'label-id');
});
it("passes through className", () => {
render(
<Label className="custom-label" data-testid="label">
Custom
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("custom-label");
});
it('passes through className', () => {
render(
<Label className="custom-label" data-testid="label">
Custom
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('custom-label');
});
it("passes through onClick handler", () => {
let clicked = false;
render(
<Label
onClick={() => {
clicked = true;
}}
data-testid="label"
>
Clickable
</Label>,
);
const label = screen.getByTestId("label");
label.click();
expect(clicked).toBe(true);
});
});
it('passes through onClick handler', () => {
let clicked = false;
render(
<Label
onClick={() => {
clicked = true;
}}
data-testid="label"
>
Clickable
</Label>
);
const label = screen.getByTestId('label');
label.click();
expect(clicked).toBe(true);
});
});
describe("ARIA Attributes", () => {
it("passes through aria-label", () => {
render(
<Label aria-label="Field label" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("aria-label", "Field label");
});
describe('ARIA Attributes', () => {
it('passes through aria-label', () => {
render(
<Label aria-label="Field label" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('aria-label', 'Field label');
});
it("passes through aria-describedby", () => {
render(
<Label aria-describedby="description-id" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("aria-describedby", "description-id");
});
});
it('passes through aria-describedby', () => {
render(
<Label aria-describedby="description-id" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('aria-describedby', 'description-id');
});
});
describe("Custom className", () => {
it("merges custom className with base classes", () => {
render(
<Label className="custom-class" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("custom-class");
expect(label.className).toContain("font-medium");
expect(label.className).toContain("text-foreground");
});
});
describe('Custom className', () => {
it('merges custom className with base classes', () => {
render(
<Label className="custom-class" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('custom-class');
expect(label.className).toContain('font-medium');
expect(label.className).toContain('text-foreground');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to label element", () => {
let ref: HTMLLabelElement | null = null;
render(
<Label
ref={(el) => {
ref = el;
}}
>
Label
</Label>,
);
expect(ref).toBeInstanceOf(HTMLLabelElement);
expect(ref!.tagName).toBe("LABEL");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to label element', () => {
let ref: HTMLLabelElement | null = null;
render(
<Label
ref={(el) => {
ref = el;
}}
>
Label
</Label>
);
expect(ref).toBeInstanceOf(HTMLLabelElement);
expect(ref!.tagName).toBe('LABEL');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId("label");
expect(label.className).toContain("font-medium");
expect(label.className).toContain("text-foreground");
expect(label.className).toContain("cursor-pointer");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId('label');
expect(label.className).toContain('font-medium');
expect(label.className).toContain('text-foreground');
expect(label.className).toContain('cursor-pointer');
});
it("includes peer-disabled classes", () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId("label");
expect(label.className).toContain("peer-disabled:cursor-not-allowed");
expect(label.className).toContain("peer-disabled:opacity-50");
});
});
it('includes peer-disabled classes', () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId('label');
expect(label.className).toContain('peer-disabled:cursor-not-allowed');
expect(label.className).toContain('peer-disabled:opacity-50');
});
});
describe("Compound Scenarios", () => {
it("works correctly with required and small size", () => {
render(
<Label required size="sm" data-testid="label">
Small required
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-sm");
expect(screen.getByText("*")).toBeInTheDocument();
});
describe('Compound Scenarios', () => {
it('works correctly with required and small size', () => {
render(
<Label required size="sm" data-testid="label">
Small required
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-sm');
expect(screen.getByText('*')).toBeInTheDocument();
});
it("works correctly with disabled and required", () => {
render(
<Label disabled required data-testid="label">
Disabled required
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("opacity-50");
expect(label.className).toContain("cursor-not-allowed");
expect(screen.getByText("*")).toBeInTheDocument();
});
it('works correctly with disabled and required', () => {
render(
<Label disabled required data-testid="label">
Disabled required
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('opacity-50');
expect(label.className).toContain('cursor-not-allowed');
expect(screen.getByText('*')).toBeInTheDocument();
});
it("works correctly with htmlFor and required", () => {
render(
<Label htmlFor="field-id" required data-testid="label">
Field label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("for", "field-id");
expect(screen.getByText("*")).toBeInTheDocument();
});
it('works correctly with htmlFor and required', () => {
render(
<Label htmlFor="field-id" required data-testid="label">
Field label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('for', 'field-id');
expect(screen.getByText('*')).toBeInTheDocument();
});
it("works correctly with large size and custom className", () => {
render(
<Label size="lg" className="font-bold" data-testid="label">
Large bold
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-lg");
expect(label.className).toContain("font-bold");
});
});
it('works correctly with large size and custom className', () => {
render(
<Label size="lg" className="font-bold" data-testid="label">
Large bold
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-lg');
expect(label.className).toContain('font-bold');
});
});
describe("Integration with Form Controls", () => {
it("associates correctly with input element", () => {
const { container } = render(
<div>
<Label htmlFor="test-input">Test Label</Label>
<input id="test-input" type="text" />
</div>,
);
describe('Integration with Form Controls', () => {
it('associates correctly with input element', () => {
const { container } = render(
<div>
<Label htmlFor="test-input">Test Label</Label>
<input id="test-input" type="text" />
</div>
);
const label = container.querySelector("label");
const input = container.querySelector("input");
const label = container.querySelector('label');
const input = container.querySelector('input');
expect(label).toHaveAttribute("for", "test-input");
expect(input).toHaveAttribute("id", "test-input");
});
expect(label).toHaveAttribute('for', 'test-input');
expect(input).toHaveAttribute('id', 'test-input');
});
it("clicking label focuses associated input", () => {
render(
<div>
<Label htmlFor="focus-input" data-testid="label">
Click me
</Label>
<input id="focus-input" type="text" data-testid="input" />
</div>,
);
it('clicking label focuses associated input', () => {
render(
<div>
<Label htmlFor="focus-input" data-testid="label">
Click me
</Label>
<input id="focus-input" type="text" data-testid="input" />
</div>
);
const label = screen.getByTestId("label");
const input = screen.getByTestId("input") as HTMLInputElement;
const label = screen.getByTestId('label');
const input = screen.getByTestId('input') as HTMLInputElement;
// Verify the association exists
expect(label).toHaveAttribute("for", "focus-input");
expect(input).toHaveAttribute("id", "focus-input");
// Verify the association exists
expect(label).toHaveAttribute('for', 'focus-input');
expect(input).toHaveAttribute('id', 'focus-input');
// Focus the input directly to verify it can receive focus
input.focus();
expect(input).toHaveFocus();
});
});
// Focus the input directly to verify it can receive focus
input.focus();
expect(input).toHaveFocus();
});
});
});

66
packages/ui/src/Label/Label.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { LabelProps } from "./types";
import { labelVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { LabelProps } from './types';
import { labelVariants } from './variants';
/**
* Label component
@ -18,39 +18,29 @@ import { labelVariants } from "./variants";
* ```
*/
export const Label = forwardRef<HTMLLabelElement, LabelProps>(
(
{
className,
size = "md",
required = false,
disabled = false,
children,
...props
},
ref,
) => {
return (
// biome-ignore lint/a11y/noLabelWithoutControl: This is a generic label component that can be used with htmlFor or wrap inputs
<label
ref={ref}
className={cn(
labelVariants({
size,
disabled: disabled ? "true" : "false",
}),
className,
)}
{...props}
>
{children}
{required && (
<span className="ml-1 text-error" aria-hidden="true">
*
</span>
)}
</label>
);
},
({ className, size = 'md', required = false, disabled = false, children, ...props }, ref) => {
return (
// biome-ignore lint/a11y/noLabelWithoutControl: This is a generic label component that can be used with htmlFor or wrap inputs
<label
ref={ref}
className={cn(
labelVariants({
size,
disabled: disabled ? 'true' : 'false',
}),
className
)}
{...props}
>
{children}
{required && (
<span className="ml-1 text-error" aria-hidden="true">
*
</span>
)}
</label>
);
}
);
Label.displayName = "Label";
Label.displayName = 'Label';

34
packages/ui/src/Label/tokens.ts
View file

@ -1,27 +1,27 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* Label component design tokens
* Maps global tokens to label-specific semantics
*/
export const labelTokens = {
/** Font sizes for each size */
fontSize: {
sm: "0.875rem", // 14px
md: "1rem", // 16px
lg: "1.125rem", // 18px
},
/** Font sizes for each size */
fontSize: {
sm: '0.875rem', // 14px
md: '1rem', // 16px
lg: '1.125rem', // 18px
},
/** Line heights for each size */
lineHeight: {
sm: "1.25rem", // 20px
md: "1.5rem", // 24px
lg: "1.75rem", // 28px
},
/** Line heights for each size */
lineHeight: {
sm: '1.25rem', // 20px
md: '1.5rem', // 24px
lg: '1.75rem', // 28px
},
/** Margin bottom (spacing from label to input) */
marginBottom: spacing[2], // 0.5rem (8px)
/** Margin bottom (spacing from label to input) */
marginBottom: spacing[2], // 0.5rem (8px)
/** Required indicator spacing */
requiredSpacing: spacing[1], // 0.25rem (4px)
/** Required indicator spacing */
requiredSpacing: spacing[1], // 0.25rem (4px)
} as const;

32
packages/ui/src/Label/types.ts
View file

@ -1,26 +1,26 @@
import type { LabelHTMLAttributes } from "react";
import type { LabelHTMLAttributes } from 'react';
/**
* Label component props
*/
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
/**
* Size of the label
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the label
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether the associated field is required
* @default false
*/
required?: boolean;
/**
* Whether the associated field is required
* @default false
*/
required?: boolean;
/**
* Whether the label should be visually disabled
* @default false
*/
disabled?: boolean;
/**
* Whether the label should be visually disabled
* @default false
*/
disabled?: boolean;
}
/**

52
packages/ui/src/Label/variants.ts
View file

@ -1,37 +1,37 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Label variant definitions
* Uses custom variant system for type-safe class composition
*/
export const labelVariants = createVariants({
base: [
// Typography
"font-medium text-foreground",
"leading-none",
// Cursor
"cursor-pointer",
// Peer styling support
"peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
].join(" "),
base: [
// Typography
'font-medium text-foreground',
'leading-none',
// Cursor
'cursor-pointer',
// Peer styling support
'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
].join(' '),
variants: {
size: {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
},
variants: {
size: {
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
},
disabled: {
true: "cursor-not-allowed opacity-50",
false: "",
},
},
disabled: {
true: 'cursor-not-allowed opacity-50',
false: '',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
disabled: "false",
},
defaultVariants: {
size: 'md',
disabled: 'false',
},
});

489
packages/ui/src/ProgressBar/ProgressBar.test.tsx
View file

@ -1,290 +1,265 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { ProgressBar } from "./ProgressBar";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { ProgressBar } from './ProgressBar';
describe("ProgressBar", () => {
describe("Rendering", () => {
it("renders a progress bar element", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toBeInTheDocument();
expect(progress.tagName).toBe("DIV");
});
describe('ProgressBar', () => {
describe('Rendering', () => {
it('renders a progress bar element', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toBeInTheDocument();
expect(progress.tagName).toBe('DIV');
});
it("has progressbar role", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("role", "progressbar");
});
it('has progressbar role', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('role', 'progressbar');
});
it("sets correct aria attributes", () => {
render(<ProgressBar value={75} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "75");
expect(progress).toHaveAttribute("aria-valuemin", "0");
expect(progress).toHaveAttribute("aria-valuemax", "100");
});
it('sets correct aria attributes', () => {
render(<ProgressBar value={75} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '75');
expect(progress).toHaveAttribute('aria-valuemin', '0');
expect(progress).toHaveAttribute('aria-valuemax', '100');
});
it("renders fill element with correct width", () => {
render(<ProgressBar value={60} data-testid="progress" />);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "60%" });
});
});
it('renders fill element with correct width', () => {
render(<ProgressBar value={60} data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '60%' });
});
});
describe("Value Handling", () => {
it("clamps value above 100 to 100", () => {
render(<ProgressBar value={150} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "100");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "100%" });
});
describe('Value Handling', () => {
it('clamps value above 100 to 100', () => {
render(<ProgressBar value={150} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '100');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '100%' });
});
it("clamps value below 0 to 0", () => {
render(<ProgressBar value={-10} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "0");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "0%" });
});
it('clamps value below 0 to 0', () => {
render(<ProgressBar value={-10} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '0');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '0%' });
});
it("handles 0 value", () => {
render(<ProgressBar value={0} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "0");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "0%" });
});
it('handles 0 value', () => {
render(<ProgressBar value={0} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '0');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '0%' });
});
it("handles 100 value", () => {
render(<ProgressBar value={100} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "100");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "100%" });
});
it('handles 100 value', () => {
render(<ProgressBar value={100} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '100');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '100%' });
});
it("handles decimal values", () => {
render(<ProgressBar value={33.7} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "33.7");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "33.7%" });
});
});
it('handles decimal values', () => {
render(<ProgressBar value={33.7} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '33.7');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '33.7%' });
});
});
describe("Size Variants", () => {
it("applies small size", () => {
render(<ProgressBar value={50} size="sm" data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-1");
});
describe('Size Variants', () => {
it('applies small size', () => {
render(<ProgressBar value={50} size="sm" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-1');
});
it("applies medium size", () => {
render(<ProgressBar value={50} size="md" data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-2");
});
it('applies medium size', () => {
render(<ProgressBar value={50} size="md" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-2');
});
it("applies large size", () => {
render(<ProgressBar value={50} size="lg" data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-3");
});
it('applies large size', () => {
render(<ProgressBar value={50} size="lg" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-3');
});
it("uses md size by default", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-2");
});
});
it('uses md size by default', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-2');
});
});
describe("Color Variants", () => {
it("applies primary variant", () => {
render(
<ProgressBar value={50} variant="primary" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-primary");
});
describe('Color Variants', () => {
it('applies primary variant', () => {
render(<ProgressBar value={50} variant="primary" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-primary');
});
it("applies success variant", () => {
render(
<ProgressBar value={50} variant="success" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-success");
});
it('applies success variant', () => {
render(<ProgressBar value={50} variant="success" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-success');
});
it("applies warning variant", () => {
render(
<ProgressBar value={50} variant="warning" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-warning");
});
it('applies warning variant', () => {
render(<ProgressBar value={50} variant="warning" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-warning');
});
it("applies danger variant", () => {
render(
<ProgressBar value={50} variant="danger" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-error");
});
it('applies danger variant', () => {
render(<ProgressBar value={50} variant="danger" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-error');
});
it("uses primary variant by default", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-primary");
});
});
it('uses primary variant by default', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-primary');
});
});
describe("Label Display", () => {
it("does not show label by default", () => {
const { container } = render(<ProgressBar value={50} />);
expect(container.textContent).toBe("");
});
describe('Label Display', () => {
it('does not show label by default', () => {
const { container } = render(<ProgressBar value={50} />);
expect(container.textContent).toBe('');
});
it("shows label when showLabel is true", () => {
render(<ProgressBar value={50} showLabel />);
expect(screen.getByText("50%")).toBeInTheDocument();
});
it('shows label when showLabel is true', () => {
render(<ProgressBar value={50} showLabel />);
expect(screen.getByText('50%')).toBeInTheDocument();
});
it("rounds label to nearest integer", () => {
render(<ProgressBar value={33.7} showLabel />);
expect(screen.getByText("34%")).toBeInTheDocument();
});
it('rounds label to nearest integer', () => {
render(<ProgressBar value={33.7} showLabel />);
expect(screen.getByText('34%')).toBeInTheDocument();
});
it("shows 0% label for 0 value", () => {
render(<ProgressBar value={0} showLabel />);
expect(screen.getByText("0%")).toBeInTheDocument();
});
it('shows 0% label for 0 value', () => {
render(<ProgressBar value={0} showLabel />);
expect(screen.getByText('0%')).toBeInTheDocument();
});
it("shows 100% label for 100 value", () => {
render(<ProgressBar value={100} showLabel />);
expect(screen.getByText("100%")).toBeInTheDocument();
});
it('shows 100% label for 100 value', () => {
render(<ProgressBar value={100} showLabel />);
expect(screen.getByText('100%')).toBeInTheDocument();
});
it("label has correct styling classes", () => {
render(<ProgressBar value={50} showLabel />);
const label = screen.getByText("50%");
expect(label.className).toContain("text-sm");
expect(label.className).toContain("text-foreground-secondary");
expect(label.className).toContain("tabular-nums");
});
});
it('label has correct styling classes', () => {
render(<ProgressBar value={50} showLabel />);
const label = screen.getByText('50%');
expect(label.className).toContain('text-sm');
expect(label.className).toContain('text-foreground-secondary');
expect(label.className).toContain('tabular-nums');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<ProgressBar value={50} id="progress-id" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("id", "progress-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<ProgressBar value={50} id="progress-id" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('id', 'progress-id');
});
it("passes through data attributes", () => {
render(
<ProgressBar value={50} data-custom="test" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
render(<ProgressBar value={50} data-custom="test" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<ProgressBar
value={50}
className="custom-class"
data-testid="progress"
/>,
);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("custom-class");
expect(progress.className).toContain("bg-surface");
expect(progress.className).toContain("rounded");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<ProgressBar value={50} className="custom-class" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('custom-class');
expect(progress.className).toContain('bg-surface');
expect(progress.className).toContain('rounded');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to progress bar element", () => {
let ref: HTMLDivElement | null = null;
render(
<ProgressBar
value={50}
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref).toHaveAttribute("role", "progressbar");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to progress bar element', () => {
let ref: HTMLDivElement | null = null;
render(
<ProgressBar
value={50}
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref).toHaveAttribute('role', 'progressbar');
});
});
describe("Base Classes", () => {
it("always includes track base classes", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("relative");
expect(progress.className).toContain("overflow-hidden");
expect(progress.className).toContain("bg-surface");
expect(progress.className).toContain("rounded");
});
describe('Base Classes', () => {
it('always includes track base classes', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('relative');
expect(progress.className).toContain('overflow-hidden');
expect(progress.className).toContain('bg-surface');
expect(progress.className).toContain('rounded');
});
it("fill includes base classes", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("h-full");
expect(fill?.className).toContain("transition-all");
expect(fill?.className).toContain("rounded");
});
});
it('fill includes base classes', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('h-full');
expect(fill?.className).toContain('transition-all');
expect(fill?.className).toContain('rounded');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and success variant", () => {
render(
<ProgressBar
value={80}
size="lg"
variant="success"
data-testid="progress"
/>,
);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-3");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-success");
expect(fill).toHaveStyle({ width: "80%" });
});
describe('Compound Scenarios', () => {
it('works correctly with large size and success variant', () => {
render(<ProgressBar value={80} size="lg" variant="success" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-3');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-success');
expect(fill).toHaveStyle({ width: '80%' });
});
it("works correctly with label, custom className, and warning variant", () => {
render(
<ProgressBar
value={45}
variant="warning"
showLabel
className="my-custom-class"
data-testid="progress"
/>,
);
const wrapper = screen.getByTestId("progress");
// Custom className is applied to the track, which is the first child
const track = wrapper.querySelector('[role="progressbar"]');
expect(track?.className).toContain("my-custom-class");
const fill = track?.querySelector("div");
expect(fill?.className).toContain("bg-warning");
expect(screen.getByText("45%")).toBeInTheDocument();
});
});
it('works correctly with label, custom className, and warning variant', () => {
render(
<ProgressBar
value={45}
variant="warning"
showLabel
className="my-custom-class"
data-testid="progress"
/>
);
const wrapper = screen.getByTestId('progress');
// Custom className is applied to the track, which is the first child
const track = wrapper.querySelector('[role="progressbar"]');
expect(track?.className).toContain('my-custom-class');
const fill = track?.querySelector('div');
expect(fill?.className).toContain('bg-warning');
expect(screen.getByText('45%')).toBeInTheDocument();
});
});
});

142
packages/ui/src/ProgressBar/ProgressBar.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { ProgressBarProps } from "./types";
import { progressBarFillVariants, progressBarTrackVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { ProgressBarProps } from './types';
import { progressBarFillVariants, progressBarTrackVariants } from './variants';
/**
* ProgressBar component
@ -26,79 +26,69 @@ import { progressBarFillVariants, progressBarTrackVariants } from "./variants";
* ```
*/
export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
(
{
className,
value,
size = "md",
variant = "primary",
showLabel = false,
...props
},
ref,
) => {
// Clamp value between 0 and 100
const clampedValue = Math.min(Math.max(value, 0), 100);
({ className, value, size = 'md', variant = 'primary', showLabel = false, ...props }, ref) => {
// Clamp value between 0 and 100
const clampedValue = Math.min(Math.max(value, 0), 100);
if (!showLabel) {
return (
<div
ref={ref}
className={cn(
progressBarTrackVariants({
size,
}),
className,
)}
role="progressbar"
aria-valuenow={clampedValue}
aria-valuemin={0}
aria-valuemax={100}
tabIndex={0}
{...props}
>
<div
className={progressBarFillVariants({
variant,
})}
style={{
width: `${clampedValue}%`,
}}
/>
</div>
);
}
if (!showLabel) {
return (
<div
ref={ref}
className={cn(
progressBarTrackVariants({
size,
}),
className
)}
role="progressbar"
aria-valuenow={clampedValue}
aria-valuemin={0}
aria-valuemax={100}
tabIndex={0}
{...props}
>
<div
className={progressBarFillVariants({
variant,
})}
style={{
width: `${clampedValue}%`,
}}
/>
</div>
);
}
return (
<div ref={ref} className="flex items-center gap-3" {...props}>
<div
className={cn(
progressBarTrackVariants({
size,
}),
className,
)}
role="progressbar"
aria-valuenow={clampedValue}
aria-valuemin={0}
aria-valuemax={100}
tabIndex={0}
>
<div
className={progressBarFillVariants({
variant,
})}
style={{
width: `${clampedValue}%`,
}}
/>
</div>
<span className="text-sm text-foreground-secondary tabular-nums min-w-[3ch]">
{Math.round(clampedValue)}%
</span>
</div>
);
},
return (
<div ref={ref} className="flex items-center gap-3" {...props}>
<div
className={cn(
progressBarTrackVariants({
size,
}),
className
)}
role="progressbar"
aria-valuenow={clampedValue}
aria-valuemin={0}
aria-valuemax={100}
tabIndex={0}
>
<div
className={progressBarFillVariants({
variant,
})}
style={{
width: `${clampedValue}%`,
}}
/>
</div>
<span className="text-sm text-foreground-secondary tabular-nums min-w-[3ch]">
{Math.round(clampedValue)}%
</span>
</div>
);
}
);
ProgressBar.displayName = "ProgressBar";
ProgressBar.displayName = 'ProgressBar';

18
packages/ui/src/ProgressBar/tokens.ts
View file

@ -1,17 +1,17 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* ProgressBar component design tokens
* Maps global tokens to progress bar-specific semantics
*/
export const progressBarTokens = {
/** Height for each size */
height: {
sm: spacing[1], // 0.25rem (4px)
md: spacing[2], // 0.5rem (8px)
lg: spacing[3], // 0.75rem (12px)
},
/** Height for each size */
height: {
sm: spacing[1], // 0.25rem (4px)
md: spacing[2], // 0.5rem (8px)
lg: spacing[3], // 0.75rem (12px)
},
/** Border radius */
radius: spacing[1], // 0.25rem (4px)
/** Border radius */
radius: spacing[1], // 0.25rem (4px)
} as const;

43
packages/ui/src/ProgressBar/types.ts
View file

@ -1,32 +1,31 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* ProgressBar component props
*/
export interface ProgressBarProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
/**
* Progress value (0-100)
*/
value: number;
export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
/**
* Progress value (0-100)
*/
value: number;
/**
* Size variant
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size variant
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Color variant
* @default 'primary'
*/
variant?: "primary" | "success" | "warning" | "danger";
/**
* Color variant
* @default 'primary'
*/
variant?: 'primary' | 'success' | 'warning' | 'danger';
/**
* Whether to show percentage label
* @default false
*/
showLabel?: boolean;
/**
* Whether to show percentage label
* @default false
*/
showLabel?: boolean;
}
/**

80
packages/ui/src/ProgressBar/variants.ts
View file

@ -1,58 +1,58 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* ProgressBar track variant definitions
*/
export const progressBarTrackVariants = createVariants({
base: [
// Layout
"relative overflow-hidden",
// Background
"bg-surface",
// Border
"rounded",
].join(" "),
base: [
// Layout
'relative overflow-hidden',
// Background
'bg-surface',
// Border
'rounded',
].join(' '),
variants: {
size: {
sm: "h-1", // 4px
md: "h-2", // 8px
lg: "h-3", // 12px
},
},
variants: {
size: {
sm: 'h-1', // 4px
md: 'h-2', // 8px
lg: 'h-3', // 12px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});
/**
* ProgressBar fill variant definitions
*/
export const progressBarFillVariants = createVariants({
base: [
// Layout
"h-full",
// Transition
"transition-all duration-300 ease-out",
// Border
"rounded",
].join(" "),
base: [
// Layout
'h-full',
// Transition
'transition-all duration-300 ease-out',
// Border
'rounded',
].join(' '),
variants: {
variant: {
primary: "bg-primary",
success: "bg-success",
warning: "bg-warning",
danger: "bg-error",
},
},
variants: {
variant: {
primary: 'bg-primary',
success: 'bg-success',
warning: 'bg-warning',
danger: 'bg-error',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
variant: "primary",
},
defaultVariants: {
variant: 'primary',
},
});

616
packages/ui/src/Section/Section.test.tsx
View file

@ -1,345 +1,339 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Section } from "./Section";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Section } from './Section';
describe("Section", () => {
describe("Rendering", () => {
it("renders a section element by default", () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId("section");
expect(section).toBeInTheDocument();
expect(section.tagName).toBe("SECTION");
});
describe('Section', () => {
describe('Rendering', () => {
it('renders a section element by default', () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId('section');
expect(section).toBeInTheDocument();
expect(section.tagName).toBe('SECTION');
});
it("renders content", () => {
render(<Section>Test content</Section>);
expect(screen.getByText("Test content")).toBeInTheDocument();
});
it('renders content', () => {
render(<Section>Test content</Section>);
expect(screen.getByText('Test content')).toBeInTheDocument();
});
it("renders as different semantic elements", () => {
const { rerender } = render(
<Section as="article" data-testid="element">
Content
</Section>,
);
expect(screen.getByTestId("element").tagName).toBe("ARTICLE");
it('renders as different semantic elements', () => {
const { rerender } = render(
<Section as="article" data-testid="element">
Content
</Section>
);
expect(screen.getByTestId('element').tagName).toBe('ARTICLE');
rerender(
<Section as="aside" data-testid="element">
Content
</Section>,
);
expect(screen.getByTestId("element").tagName).toBe("ASIDE");
rerender(
<Section as="aside" data-testid="element">
Content
</Section>
);
expect(screen.getByTestId('element').tagName).toBe('ASIDE');
rerender(
<Section as="nav" data-testid="element">
Content
</Section>,
);
expect(screen.getByTestId("element").tagName).toBe("NAV");
rerender(
<Section as="nav" data-testid="element">
Content
</Section>
);
expect(screen.getByTestId('element').tagName).toBe('NAV');
rerender(
<Section as="div" data-testid="element">
Content
</Section>,
);
expect(screen.getByTestId("element").tagName).toBe("DIV");
});
});
rerender(
<Section as="div" data-testid="element">
Content
</Section>
);
expect(screen.getByTestId('element').tagName).toBe('DIV');
});
});
describe("Spacing Variants", () => {
it("applies no spacing", () => {
render(
<Section spacing="none" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-0");
});
describe('Spacing Variants', () => {
it('applies no spacing', () => {
render(
<Section spacing="none" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-0');
});
it("applies small spacing", () => {
render(
<Section spacing="sm" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-8");
});
it('applies small spacing', () => {
render(
<Section spacing="sm" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-8');
});
it("applies medium spacing", () => {
render(
<Section spacing="md" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-16");
});
it('applies medium spacing', () => {
render(
<Section spacing="md" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-16');
});
it("applies large spacing", () => {
render(
<Section spacing="lg" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-24");
});
it('applies large spacing', () => {
render(
<Section spacing="lg" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-24');
});
it("applies extra large spacing", () => {
render(
<Section spacing="xl" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-32");
});
it('applies extra large spacing', () => {
render(
<Section spacing="xl" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-32');
});
it("uses md spacing by default", () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-16");
});
});
it('uses md spacing by default', () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-16');
});
});
describe("Background Variants", () => {
it("applies default background", () => {
render(
<Section background="default" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("bg-background");
});
describe('Background Variants', () => {
it('applies default background', () => {
render(
<Section background="default" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('bg-background');
});
it("applies surface background", () => {
render(
<Section background="surface" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("bg-surface");
});
it('applies surface background', () => {
render(
<Section background="surface" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('bg-surface');
});
it("applies dotted-grid background", () => {
render(
<Section background="dotted-grid" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("dotted-grid-background");
});
it('applies dotted-grid background', () => {
render(
<Section background="dotted-grid" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('dotted-grid-background');
});
it("applies blueprint background", () => {
render(
<Section background="blueprint" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("blueprint-background");
});
it('applies blueprint background', () => {
render(
<Section background="blueprint" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('blueprint-background');
});
it("applies grid background", () => {
render(
<Section background="grid" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("grid-background");
});
});
it('applies grid background', () => {
render(
<Section background="grid" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('grid-background');
});
});
describe("Container Variants", () => {
it("applies no container by default", () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId("section");
expect(section.className).not.toContain("max-w");
});
describe('Container Variants', () => {
it('applies no container by default', () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId('section');
expect(section.className).not.toContain('max-w');
});
it("applies small container", () => {
render(
<Section container="sm" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("max-w-3xl");
});
it('applies small container', () => {
render(
<Section container="sm" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('max-w-3xl');
});
it("applies medium container", () => {
render(
<Section container="md" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("max-w-5xl");
});
it('applies medium container', () => {
render(
<Section container="md" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('max-w-5xl');
});
it("applies large container", () => {
render(
<Section container="lg" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("max-w-7xl");
});
it('applies large container', () => {
render(
<Section container="lg" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('max-w-7xl');
});
it("applies extra large container", () => {
render(
<Section container="xl" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("max-w-[90rem]");
});
it('applies extra large container', () => {
render(
<Section container="xl" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('max-w-[90rem]');
});
it("applies full width container", () => {
render(
<Section container="full" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("max-w-full");
});
});
it('applies full width container', () => {
render(
<Section container="full" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('max-w-full');
});
});
describe("Centered Option", () => {
it("does not center by default", () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId("section");
expect(section.className).not.toContain("mx-auto");
});
describe('Centered Option', () => {
it('does not center by default', () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId('section');
expect(section.className).not.toContain('mx-auto');
});
it("centers content when centered is true", () => {
render(
<Section centered data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("mx-auto");
});
});
it('centers content when centered is true', () => {
render(
<Section centered data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('mx-auto');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<Section id="section-id" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section).toHaveAttribute("id", "section-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<Section id="section-id" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section).toHaveAttribute('id', 'section-id');
});
it("passes through data attributes", () => {
render(
<Section data-custom="test" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section).toHaveAttribute("data-custom", "test");
});
it('passes through data attributes', () => {
render(
<Section data-custom="test" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section).toHaveAttribute('data-custom', 'test');
});
it("passes through aria attributes", () => {
render(
<Section aria-label="Main section" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section).toHaveAttribute("aria-label", "Main section");
});
});
it('passes through aria attributes', () => {
render(
<Section aria-label="Main section" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section).toHaveAttribute('aria-label', 'Main section');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Section className="custom-class" data-testid="section">
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("custom-class");
expect(section.className).toContain("relative");
expect(section.className).toContain("w-full");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Section className="custom-class" data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('custom-class');
expect(section.className).toContain('relative');
expect(section.className).toContain('w-full');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to section element", () => {
let ref: HTMLElement | null = null;
render(
<Section
ref={(el) => {
ref = el;
}}
>
Content
</Section>,
);
expect(ref).toBeInstanceOf(HTMLElement);
expect(ref!.tagName).toBe("SECTION");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to section element', () => {
let ref: HTMLElement | null = null;
render(
<Section
ref={(el) => {
ref = el;
}}
>
Content
</Section>
);
expect(ref).toBeInstanceOf(HTMLElement);
expect(ref!.tagName).toBe('SECTION');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId("section");
expect(section.className).toContain("relative");
expect(section.className).toContain("w-full");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Section data-testid="section">Content</Section>);
const section = screen.getByTestId('section');
expect(section.className).toContain('relative');
expect(section.className).toContain('w-full');
});
});
describe("Compound Scenarios", () => {
it("works with multiple variants combined", () => {
render(
<Section
spacing="lg"
background="blueprint"
container="xl"
centered
data-testid="section"
>
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-24");
expect(section.className).toContain("blueprint-background");
expect(section.className).toContain("max-w-[90rem]");
expect(section.className).toContain("mx-auto");
});
describe('Compound Scenarios', () => {
it('works with multiple variants combined', () => {
render(
<Section spacing="lg" background="blueprint" container="xl" centered data-testid="section">
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-24');
expect(section.className).toContain('blueprint-background');
expect(section.className).toContain('max-w-[90rem]');
expect(section.className).toContain('mx-auto');
});
it("works with custom className and variants", () => {
render(
<Section
spacing="md"
background="surface"
className="border-t border-border"
data-testid="section"
>
Content
</Section>,
);
const section = screen.getByTestId("section");
expect(section.className).toContain("py-16");
expect(section.className).toContain("bg-surface");
expect(section.className).toContain("border-t");
});
});
it('works with custom className and variants', () => {
render(
<Section
spacing="md"
background="surface"
className="border-t border-border"
data-testid="section"
>
Content
</Section>
);
const section = screen.getByTestId('section');
expect(section.className).toContain('py-16');
expect(section.className).toContain('bg-surface');
expect(section.className).toContain('border-t');
});
});
});

77
packages/ui/src/Section/Section.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { SectionProps } from "./types";
import { sectionVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { SectionProps } from './types';
import { sectionVariants } from './variants';
/**
* Section component
@ -28,41 +28,40 @@ import { sectionVariants } from "./variants";
* ```
*/
export const Section = forwardRef<HTMLElement, SectionProps>(
(
{
className,
as = "section",
spacing = "md",
background = "default",
container = "none",
centered = false,
children,
...props
},
ref,
) => {
const Component = as;
(
{
className,
as = 'section',
spacing = 'md',
background = 'default',
container = 'none',
centered = false,
children,
...props
},
ref
) => {
const Component = as;
return (
<Component
// biome-ignore lint/suspicious/noExplicitAny: Polymorphic component requires any for ref type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref={ref as any}
className={cn(
sectionVariants({
spacing,
background,
container,
centered: centered ? "true" : "false",
}),
className,
)}
{...props}
>
{children}
</Component>
);
},
return (
<Component
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref={ref as any}
className={cn(
sectionVariants({
spacing,
background,
container,
centered: centered ? 'true' : 'false',
}),
className
)}
{...props}
>
{children}
</Component>
);
}
);
Section.displayName = "Section";
Section.displayName = 'Section';

52
packages/ui/src/Section/types.ts
View file

@ -1,38 +1,38 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Section component props
*/
export interface SectionProps extends HTMLAttributes<HTMLElement> {
/**
* Semantic section element to render
* @default 'section'
*/
as?: "section" | "article" | "aside" | "nav" | "div";
/**
* Semantic section element to render
* @default 'section'
*/
as?: 'section' | 'article' | 'aside' | 'nav' | 'div';
/**
* Vertical spacing size
* @default 'md'
*/
spacing?: "none" | "sm" | "md" | "lg" | "xl";
/**
* Vertical spacing size
* @default 'md'
*/
spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
/**
* Background variant
* @default 'default'
*/
background?: "default" | "surface" | "dotted-grid" | "blueprint" | "grid";
/**
* Background variant
* @default 'default'
*/
background?: 'default' | 'surface' | 'dotted-grid' | 'blueprint' | 'grid';
/**
* Maximum width container
* @default 'none'
*/
container?: "none" | "sm" | "md" | "lg" | "xl" | "full";
/**
* Maximum width container
* @default 'none'
*/
container?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
/**
* Center content horizontally
* @default false
*/
centered?: boolean;
/**
* Center content horizontally
* @default false
*/
centered?: boolean;
}
/**

74
packages/ui/src/Section/variants.ts
View file

@ -1,49 +1,49 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Section variant definitions
*/
export const sectionVariants = createVariants({
base: ["relative w-full"].join(" "),
base: ['relative w-full'].join(' '),
variants: {
spacing: {
none: "py-0",
sm: "py-8",
md: "py-16",
lg: "py-24",
xl: "py-32",
},
variants: {
spacing: {
none: 'py-0',
sm: 'py-8',
md: 'py-16',
lg: 'py-24',
xl: 'py-32',
},
background: {
default: "bg-background",
surface: "bg-surface",
"dotted-grid": "dotted-grid-background",
blueprint: "blueprint-background",
grid: "grid-background",
},
background: {
default: 'bg-background',
surface: 'bg-surface',
'dotted-grid': 'dotted-grid-background',
blueprint: 'blueprint-background',
grid: 'grid-background',
},
container: {
none: "",
sm: "max-w-3xl",
md: "max-w-5xl",
lg: "max-w-7xl",
xl: "max-w-[90rem]",
full: "max-w-full",
},
container: {
none: '',
sm: 'max-w-3xl',
md: 'max-w-5xl',
lg: 'max-w-7xl',
xl: 'max-w-[90rem]',
full: 'max-w-full',
},
centered: {
true: "mx-auto",
false: "",
},
},
centered: {
true: 'mx-auto',
false: '',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
spacing: "md",
background: "default",
container: "none",
centered: "false",
},
defaultVariants: {
spacing: 'md',
background: 'default',
container: 'none',
centered: 'false',
},
});

725
packages/ui/src/Tabs/Tabs.test.tsx
View file

@ -1,456 +1,343 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { Tabs } from "./Tabs";
import type { Tab } from "./types";
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { Tabs } from './Tabs';
import type { Tab } from './types';
const mockTabs: Tab[] = [
{ id: "all", label: "All Tools", count: 1234 },
{ id: "featured", label: "Featured", count: 42 },
{ id: "recent", label: "Recent" },
{ id: 'all', label: 'All Tools', count: 1234 },
{ id: 'featured', label: 'Featured', count: 42 },
{ id: 'recent', label: 'Recent' },
];
describe("Tabs", () => {
describe("Rendering", () => {
it("renders tabs container", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
data-testid="tabs"
/>,
);
const tabs = screen.getByTestId("tabs");
expect(tabs).toBeInTheDocument();
expect(tabs.tagName).toBe("DIV");
});
describe('Tabs', () => {
describe('Rendering', () => {
it('renders tabs container', () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} data-testid="tabs" />
);
const tabs = screen.getByTestId('tabs');
expect(tabs).toBeInTheDocument();
expect(tabs.tagName).toBe('DIV');
});
it("has tablist role", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
data-testid="tabs"
/>,
);
const tabs = screen.getByTestId("tabs");
expect(tabs).toHaveAttribute("role", "tablist");
});
it('has tablist role', () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} data-testid="tabs" />
);
const tabs = screen.getByTestId('tabs');
expect(tabs).toHaveAttribute('role', 'tablist');
});
it("renders all tabs", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
expect(screen.getByTestId("tab-all")).toBeInTheDocument();
expect(screen.getByTestId("tab-featured")).toBeInTheDocument();
expect(screen.getByTestId("tab-recent")).toBeInTheDocument();
});
it('renders all tabs', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
expect(screen.getByTestId('tab-all')).toBeInTheDocument();
expect(screen.getByTestId('tab-featured')).toBeInTheDocument();
expect(screen.getByTestId('tab-recent')).toBeInTheDocument();
});
it("renders tab labels", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
expect(screen.getByText("All Tools")).toBeInTheDocument();
expect(screen.getByText("Featured")).toBeInTheDocument();
expect(screen.getByText("Recent")).toBeInTheDocument();
});
it('renders tab labels', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
expect(screen.getByText('All Tools')).toBeInTheDocument();
expect(screen.getByText('Featured')).toBeInTheDocument();
expect(screen.getByText('Recent')).toBeInTheDocument();
});
it("renders tabs as buttons", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const tab = screen.getByTestId("tab-all");
expect(tab.tagName).toBe("BUTTON");
expect(tab).toHaveAttribute("type", "button");
});
});
it('renders tabs as buttons', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const tab = screen.getByTestId('tab-all');
expect(tab.tagName).toBe('BUTTON');
expect(tab).toHaveAttribute('type', 'button');
});
});
describe("Active State", () => {
it("marks active tab with aria-selected", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="featured"
onTabChange={handleChange}
/>,
);
expect(screen.getByTestId("tab-featured")).toHaveAttribute(
"aria-selected",
"true",
);
expect(screen.getByTestId("tab-all")).toHaveAttribute(
"aria-selected",
"false",
);
expect(screen.getByTestId("tab-recent")).toHaveAttribute(
"aria-selected",
"false",
);
});
describe('Active State', () => {
it('marks active tab with aria-selected', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="featured" onTabChange={handleChange} />);
expect(screen.getByTestId('tab-featured')).toHaveAttribute('aria-selected', 'true');
expect(screen.getByTestId('tab-all')).toHaveAttribute('aria-selected', 'false');
expect(screen.getByTestId('tab-recent')).toHaveAttribute('aria-selected', 'false');
});
it("applies active styling to active tab", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const activeTab = screen.getByTestId("tab-all");
expect(activeTab.className).toContain("text-foreground");
expect(activeTab.className).toContain("border-primary");
});
it('applies active styling to active tab', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const activeTab = screen.getByTestId('tab-all');
expect(activeTab.className).toContain('text-foreground');
expect(activeTab.className).toContain('border-primary');
});
it("applies inactive styling to inactive tabs", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const inactiveTab = screen.getByTestId("tab-featured");
expect(inactiveTab.className).toContain("text-foreground-secondary");
expect(inactiveTab.className).toContain("border-transparent");
});
});
it('applies inactive styling to inactive tabs', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const inactiveTab = screen.getByTestId('tab-featured');
expect(inactiveTab.className).toContain('text-foreground-secondary');
expect(inactiveTab.className).toContain('border-transparent');
});
});
describe("Click Handling", () => {
it("calls onTabChange when tab is clicked", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
screen.getByTestId("tab-featured").click();
expect(handleChange).toHaveBeenCalledWith("featured");
});
describe('Click Handling', () => {
it('calls onTabChange when tab is clicked', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
screen.getByTestId('tab-featured').click();
expect(handleChange).toHaveBeenCalledWith('featured');
});
it("calls onTabChange with correct tab ID", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
screen.getByTestId("tab-recent").click();
expect(handleChange).toHaveBeenCalledWith("recent");
expect(handleChange).toHaveBeenCalledTimes(1);
});
it('calls onTabChange with correct tab ID', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
screen.getByTestId('tab-recent').click();
expect(handleChange).toHaveBeenCalledWith('recent');
expect(handleChange).toHaveBeenCalledTimes(1);
});
it("allows clicking already active tab", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
screen.getByTestId("tab-all").click();
expect(handleChange).toHaveBeenCalledWith("all");
});
});
it('allows clicking already active tab', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
screen.getByTestId('tab-all').click();
expect(handleChange).toHaveBeenCalledWith('all');
});
});
describe("Count Badges", () => {
it("renders count badge when count is provided", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
expect(screen.getByText("1234")).toBeInTheDocument();
expect(screen.getByText("42")).toBeInTheDocument();
});
describe('Count Badges', () => {
it('renders count badge when count is provided', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
expect(screen.getByText('1234')).toBeInTheDocument();
expect(screen.getByText('42')).toBeInTheDocument();
});
it("does not render count badge when count is undefined", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const recentTab = screen.getByTestId("tab-recent");
const badge = recentTab.querySelector("span[aria-label]");
expect(badge).not.toBeInTheDocument();
});
it('does not render count badge when count is undefined', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const recentTab = screen.getByTestId('tab-recent');
const badge = recentTab.querySelector('span[aria-label]');
expect(badge).not.toBeInTheDocument();
});
it("count badge has aria-label", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const badge = screen.getByText("1234");
expect(badge).toHaveAttribute("aria-label", "1234 items");
});
it('count badge has aria-label', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const badge = screen.getByText('1234');
expect(badge).toHaveAttribute('aria-label', '1234 items');
});
it("applies active styling to count badge on active tab", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const activeBadge = screen.getByText("1234");
expect(activeBadge.className).toContain("text-foreground");
});
it('applies active styling to count badge on active tab', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const activeBadge = screen.getByText('1234');
expect(activeBadge.className).toContain('text-foreground');
});
it("applies inactive styling to count badge on inactive tab", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const inactiveBadge = screen.getByText("42");
expect(inactiveBadge.className).toContain("text-foreground-tertiary");
});
it('applies inactive styling to count badge on inactive tab', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const inactiveBadge = screen.getByText('42');
expect(inactiveBadge.className).toContain('text-foreground-tertiary');
});
it("handles zero count", () => {
const handleChange = vi.fn();
const tabsWithZero: Tab[] = [{ id: "empty", label: "Empty", count: 0 }];
render(
<Tabs
tabs={tabsWithZero}
activeTab="empty"
onTabChange={handleChange}
/>,
);
expect(screen.getByText("0")).toBeInTheDocument();
});
});
it('handles zero count', () => {
const handleChange = vi.fn();
const tabsWithZero: Tab[] = [{ id: 'empty', label: 'Empty', count: 0 }];
render(<Tabs tabs={tabsWithZero} activeTab="empty" onTabChange={handleChange} />);
expect(screen.getByText('0')).toBeInTheDocument();
});
});
describe("Size Variants", () => {
it("applies small size", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
size="sm"
/>,
);
const tab = screen.getByTestId("tab-all");
expect(tab.className).toContain("text-sm");
expect(tab.className).toContain("px-3");
expect(tab.className).toContain("py-2");
});
describe('Size Variants', () => {
it('applies small size', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} size="sm" />);
const tab = screen.getByTestId('tab-all');
expect(tab.className).toContain('text-sm');
expect(tab.className).toContain('px-3');
expect(tab.className).toContain('py-2');
});
it("applies medium size", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
size="md"
/>,
);
const tab = screen.getByTestId("tab-all");
expect(tab.className).toContain("text-base");
expect(tab.className).toContain("px-4");
expect(tab.className).toContain("py-3");
});
it('applies medium size', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} size="md" />);
const tab = screen.getByTestId('tab-all');
expect(tab.className).toContain('text-base');
expect(tab.className).toContain('px-4');
expect(tab.className).toContain('py-3');
});
it("applies large size", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
size="lg"
/>,
);
const tab = screen.getByTestId("tab-all");
expect(tab.className).toContain("text-lg");
expect(tab.className).toContain("px-6");
expect(tab.className).toContain("py-4");
});
it('applies large size', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} size="lg" />);
const tab = screen.getByTestId('tab-all');
expect(tab.className).toContain('text-lg');
expect(tab.className).toContain('px-6');
expect(tab.className).toContain('py-4');
});
it("uses md size by default", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const tab = screen.getByTestId("tab-all");
expect(tab.className).toContain("text-base");
expect(tab.className).toContain("px-4");
expect(tab.className).toContain("py-3");
});
});
it('uses md size by default', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const tab = screen.getByTestId('tab-all');
expect(tab.className).toContain('text-base');
expect(tab.className).toContain('px-4');
expect(tab.className).toContain('py-3');
});
});
describe("Accessibility", () => {
it('tabs have role="tab"', () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const tab = screen.getByTestId("tab-all");
expect(tab).toHaveAttribute("role", "tab");
});
describe('Accessibility', () => {
it('tabs have role="tab"', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const tab = screen.getByTestId('tab-all');
expect(tab).toHaveAttribute('role', 'tab');
});
it("tabs have unique IDs", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
expect(screen.getByTestId("tab-all")).toHaveAttribute("id", "tab-all");
expect(screen.getByTestId("tab-featured")).toHaveAttribute(
"id",
"tab-featured",
);
expect(screen.getByTestId("tab-recent")).toHaveAttribute(
"id",
"tab-recent",
);
});
it('tabs have unique IDs', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
expect(screen.getByTestId('tab-all')).toHaveAttribute('id', 'tab-all');
expect(screen.getByTestId('tab-featured')).toHaveAttribute('id', 'tab-featured');
expect(screen.getByTestId('tab-recent')).toHaveAttribute('id', 'tab-recent');
});
it("tabs have aria-controls attribute", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
expect(screen.getByTestId("tab-all")).toHaveAttribute(
"aria-controls",
"tabpanel-all",
);
expect(screen.getByTestId("tab-featured")).toHaveAttribute(
"aria-controls",
"tabpanel-featured",
);
});
});
it('tabs have aria-controls attribute', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
expect(screen.getByTestId('tab-all')).toHaveAttribute('aria-controls', 'tabpanel-all');
expect(screen.getByTestId('tab-featured')).toHaveAttribute(
'aria-controls',
'tabpanel-featured'
);
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
id="tabs-id"
data-testid="tabs"
/>,
);
const tabs = screen.getByTestId("tabs");
expect(tabs).toHaveAttribute("id", "tabs-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
id="tabs-id"
data-testid="tabs"
/>
);
const tabs = screen.getByTestId('tabs');
expect(tabs).toHaveAttribute('id', 'tabs-id');
});
it("passes through data attributes", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
data-custom="test"
data-testid="tabs"
/>,
);
const tabs = screen.getByTestId("tabs");
expect(tabs).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
data-custom="test"
data-testid="tabs"
/>
);
const tabs = screen.getByTestId('tabs');
expect(tabs).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
className="custom-class"
data-testid="tabs"
/>,
);
const tabs = screen.getByTestId("tabs");
expect(tabs.className).toContain("custom-class");
expect(tabs.className).toContain("flex");
expect(tabs.className).toContain("border-b");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
className="custom-class"
data-testid="tabs"
/>
);
const tabs = screen.getByTestId('tabs');
expect(tabs.className).toContain('custom-class');
expect(tabs.className).toContain('flex');
expect(tabs.className).toContain('border-b');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to container element", () => {
const handleChange = vi.fn();
let ref: HTMLDivElement | null = null;
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref).toHaveAttribute("role", "tablist");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to container element', () => {
const handleChange = vi.fn();
let ref: HTMLDivElement | null = null;
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref).toHaveAttribute('role', 'tablist');
});
});
describe("Base Classes", () => {
it("container includes base classes", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="all"
onTabChange={handleChange}
data-testid="tabs"
/>,
);
const tabs = screen.getByTestId("tabs");
expect(tabs.className).toContain("flex");
expect(tabs.className).toContain("items-center");
expect(tabs.className).toContain("overflow-x-auto");
expect(tabs.className).toContain("border-b");
});
describe('Base Classes', () => {
it('container includes base classes', () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} data-testid="tabs" />
);
const tabs = screen.getByTestId('tabs');
expect(tabs.className).toContain('flex');
expect(tabs.className).toContain('items-center');
expect(tabs.className).toContain('overflow-x-auto');
expect(tabs.className).toContain('border-b');
});
it("tab buttons include base classes", () => {
const handleChange = vi.fn();
render(
<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />,
);
const tab = screen.getByTestId("tab-all");
expect(tab.className).toContain("inline-flex");
expect(tab.className).toContain("items-center");
expect(tab.className).toContain("font-medium");
expect(tab.className).toContain("whitespace-nowrap");
expect(tab.className).toContain("border-b-2");
expect(tab.className).toContain("transition-colors");
});
});
it('tab buttons include base classes', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="all" onTabChange={handleChange} />);
const tab = screen.getByTestId('tab-all');
expect(tab.className).toContain('inline-flex');
expect(tab.className).toContain('items-center');
expect(tab.className).toContain('font-medium');
expect(tab.className).toContain('whitespace-nowrap');
expect(tab.className).toContain('border-b-2');
expect(tab.className).toContain('transition-colors');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and active tab with count", () => {
const handleChange = vi.fn();
render(
<Tabs
tabs={mockTabs}
activeTab="featured"
onTabChange={handleChange}
size="lg"
/>,
);
const tab = screen.getByTestId("tab-featured");
expect(tab.className).toContain("text-lg");
expect(tab.className).toContain("px-6");
expect(tab.className).toContain("py-4");
expect(tab.className).toContain("text-foreground");
expect(tab.className).toContain("border-primary");
const badge = screen.getByText("42");
expect(badge.className).toContain("text-foreground");
});
describe('Compound Scenarios', () => {
it('works correctly with large size and active tab with count', () => {
const handleChange = vi.fn();
render(<Tabs tabs={mockTabs} activeTab="featured" onTabChange={handleChange} size="lg" />);
const tab = screen.getByTestId('tab-featured');
expect(tab.className).toContain('text-lg');
expect(tab.className).toContain('px-6');
expect(tab.className).toContain('py-4');
expect(tab.className).toContain('text-foreground');
expect(tab.className).toContain('border-primary');
const badge = screen.getByText('42');
expect(badge.className).toContain('text-foreground');
});
it("handles single tab", () => {
const handleChange = vi.fn();
const singleTab: Tab[] = [{ id: "only", label: "Only Tab" }];
render(
<Tabs tabs={singleTab} activeTab="only" onTabChange={handleChange} />,
);
expect(screen.getByTestId("tab-only")).toBeInTheDocument();
expect(screen.getByText("Only Tab")).toBeInTheDocument();
});
it('handles single tab', () => {
const handleChange = vi.fn();
const singleTab: Tab[] = [{ id: 'only', label: 'Only Tab' }];
render(<Tabs tabs={singleTab} activeTab="only" onTabChange={handleChange} />);
expect(screen.getByTestId('tab-only')).toBeInTheDocument();
expect(screen.getByText('Only Tab')).toBeInTheDocument();
});
it("handles empty tabs array", () => {
const handleChange = vi.fn();
const { container } = render(
<Tabs tabs={[]} activeTab="" onTabChange={handleChange} />,
);
const buttons = container.querySelectorAll("button");
expect(buttons.length).toBe(0);
});
});
it('handles empty tabs array', () => {
const handleChange = vi.fn();
const { container } = render(<Tabs tabs={[]} activeTab="" onTabChange={handleChange} />);
const buttons = container.querySelectorAll('button');
expect(buttons.length).toBe(0);
});
});
});

126
packages/ui/src/Tabs/Tabs.tsx
View file

@ -1,11 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { Tab, TabsProps } from "./types";
import {
tabButtonVariants,
tabCountVariants,
tabsContainerVariants,
} from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { Tab, TabsProps } from './types';
import { tabButtonVariants, tabCountVariants, tabsContainerVariants } from './variants';
// Re-export types for consumers
export type { Tab, TabsProps };
@ -39,67 +35,59 @@ export type { Tab, TabsProps };
* ```
*/
export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
(
{
className,
tabs,
activeTab,
onTabChange,
size = "md",
variant = "default",
...props
},
ref,
) => {
return (
<div
className={cn(
tabsContainerVariants({
size,
variant,
}),
className,
)}
role="tablist"
ref={ref}
{...props}
>
{tabs.map((tab) => {
const isActive = tab.id === activeTab;
(
{ className, tabs, activeTab, onTabChange, size = 'md', variant = 'default', ...props },
ref
) => {
return (
<div
className={cn(
tabsContainerVariants({
size,
variant,
}),
className
)}
role="tablist"
ref={ref}
{...props}
>
{tabs.map((tab) => {
const isActive = tab.id === activeTab;
return (
<button
key={tab.id}
type="button"
role="tab"
aria-selected={isActive}
aria-controls={`tabpanel-${tab.id}`}
id={`tab-${tab.id}`}
className={tabButtonVariants({
size,
active: isActive ? "true" : "false",
variant,
})}
onClick={() => onTabChange(tab.id)}
data-testid={`tab-${tab.id}`}
>
<span>{tab.label}</span>
{tab.count !== undefined && (
<span
className={tabCountVariants({
active: isActive ? "true" : "false",
})}
aria-label={`${tab.count} items`}
>
{tab.count.toString()}
</span>
)}
</button>
);
})}
</div>
);
},
return (
<button
key={tab.id}
type="button"
role="tab"
aria-selected={isActive}
aria-controls={`tabpanel-${tab.id}`}
id={`tab-${tab.id}`}
className={tabButtonVariants({
size,
active: isActive ? 'true' : 'false',
variant,
})}
onClick={() => onTabChange(tab.id)}
data-testid={`tab-${tab.id}`}
>
<span>{tab.label}</span>
{tab.count !== undefined && (
<span
className={tabCountVariants({
active: isActive ? 'true' : 'false',
})}
aria-label={`${tab.count} items`}
>
{tab.count.toString()}
</span>
)}
</button>
);
})}
</div>
);
}
);
Tabs.displayName = "Tabs";
Tabs.displayName = 'Tabs';

48
packages/ui/src/Tabs/tokens.ts
View file

@ -1,33 +1,33 @@
import { fontSize, spacing } from "../tokens";
import { fontSize, spacing } from '../tokens';
/**
* Tabs component design tokens
* Maps global tokens to tabs-specific semantics
*/
export const tabsTokens = {
/** Padding for each size */
padding: {
sm: {
x: spacing[3], // 0.75rem (12px)
y: spacing[2], // 0.5rem (8px)
},
md: {
x: spacing[4], // 1rem (16px)
y: spacing[3], // 0.75rem (12px)
},
lg: {
x: spacing[6], // 1.5rem (24px)
y: spacing[4], // 1rem (16px)
},
},
/** Padding for each size */
padding: {
sm: {
x: spacing[3], // 0.75rem (12px)
y: spacing[2], // 0.5rem (8px)
},
md: {
x: spacing[4], // 1rem (16px)
y: spacing[3], // 0.75rem (12px)
},
lg: {
x: spacing[6], // 1.5rem (24px)
y: spacing[4], // 1rem (16px)
},
},
/** Font size for each size */
fontSize: {
sm: fontSize.sm, // 0.875rem (14px)
md: fontSize.base, // 1rem (16px)
lg: fontSize.lg, // 1.125rem (18px)
},
/** Font size for each size */
fontSize: {
sm: fontSize.sm, // 0.875rem (14px)
md: fontSize.base, // 1rem (16px)
lg: fontSize.lg, // 1.125rem (18px)
},
/** Gap between tabs */
gap: spacing[1], // 0.25rem (4px)
/** Gap between tabs */
gap: spacing[1], // 0.25rem (4px)
} as const;

73
packages/ui/src/Tabs/types.ts
View file

@ -1,56 +1,55 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Tab definition
*/
export interface Tab {
/**
* Unique identifier for the tab
*/
id: string;
/**
* Unique identifier for the tab
*/
id: string;
/**
* Display label for the tab
*/
label: string;
/**
* Display label for the tab
*/
label: string;
/**
* Optional badge count to display
*/
count?: number;
/**
* Optional badge count to display
*/
count?: number;
}
/**
* Tabs component props
*/
export interface TabsProps
extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
/**
* Array of tabs to display
*/
tabs: Tab[];
export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
/**
* Array of tabs to display
*/
tabs: Tab[];
/**
* Currently active tab ID
*/
activeTab: string;
/**
* Currently active tab ID
*/
activeTab: string;
/**
* Callback when tab is changed
*/
onTabChange: (tabId: string) => void;
/**
* Callback when tab is changed
*/
onTabChange: (tabId: string) => void;
/**
* Size variant
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size variant
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Visual variant
* @default 'default'
*/
variant?: "default" | "blueprint";
/**
* Visual variant
* @default 'default'
*/
variant?: 'default' | 'blueprint';
}
/**

158
packages/ui/src/Tabs/variants.ts
View file

@ -1,106 +1,106 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Tabs container variant definitions
*/
export const tabsContainerVariants = createVariants({
base: [
// Layout
"flex items-center",
// Overflow
"overflow-x-auto",
].join(" "),
base: [
// Layout
'flex items-center',
// Overflow
'overflow-x-auto',
].join(' '),
variants: {
size: {
sm: "gap-1",
md: "gap-1",
lg: "gap-1",
},
variant: {
default: "border-b border-border",
blueprint: "border-b border-dotted border-border",
},
},
variants: {
size: {
sm: 'gap-1',
md: 'gap-1',
lg: 'gap-1',
},
variant: {
default: 'border-b border-border',
blueprint: 'border-b border-dotted border-border',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
variant: "default",
},
defaultVariants: {
size: 'md',
variant: 'default',
},
});
/**
* Tab button variant definitions
*/
export const tabButtonVariants = createVariants({
base: [
// Display
"inline-flex items-center gap-2",
// Font
"font-medium whitespace-nowrap",
// Transition
"transition-colors duration-200",
// Cursor
"cursor-pointer",
].join(" "),
base: [
// Display
'inline-flex items-center gap-2',
// Font
'font-medium whitespace-nowrap',
// Transition
'transition-colors duration-200',
// Cursor
'cursor-pointer',
].join(' '),
variants: {
size: {
sm: "text-sm px-3 py-2",
md: "text-base px-4 py-3",
lg: "text-lg px-6 py-4",
},
active: {
true: "text-foreground border-primary",
false:
"text-foreground-secondary border-transparent hover:text-foreground hover:border-border-strong",
},
variant: {
default: "border-b-2",
blueprint: "border-b-2 border-dotted",
},
},
variants: {
size: {
sm: 'text-sm px-3 py-2',
md: 'text-base px-4 py-3',
lg: 'text-lg px-6 py-4',
},
active: {
true: 'text-foreground border-primary',
false:
'text-foreground-secondary border-transparent hover:text-foreground hover:border-border-strong',
},
variant: {
default: 'border-b-2',
blueprint: 'border-b-2 border-dotted',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
active: "false",
variant: "default",
},
defaultVariants: {
size: 'md',
active: 'false',
variant: 'default',
},
});
/**
* Tab count badge variant definitions
*/
export const tabCountVariants = createVariants({
base: [
// Display
"inline-flex items-center justify-center",
// Size
"min-w-[1.25rem] h-5",
// Padding
"px-1.5",
// Font
"text-xs font-medium tabular-nums",
// Background
"bg-surface-elevated",
// Border
"rounded-full",
].join(" "),
base: [
// Display
'inline-flex items-center justify-center',
// Size
'min-w-[1.25rem] h-5',
// Padding
'px-1.5',
// Font
'text-xs font-medium tabular-nums',
// Background
'bg-surface-elevated',
// Border
'rounded-full',
].join(' '),
variants: {
active: {
true: "text-foreground",
false: "text-foreground-tertiary",
},
},
variants: {
active: {
true: 'text-foreground',
false: 'text-foreground-tertiary',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
active: "false",
},
defaultVariants: {
active: 'false',
},
});

96
packages/ui/src/system/variants.ts
View file

@ -38,29 +38,28 @@
* Configuration for a variant system
*/
export type VariantConfig<T extends Record<string, Record<string, string>>> = {
/** Base classes applied to all variants */
base: string;
/** Base classes applied to all variants */
base: string;
/** Variant definitions - each key is a variant axis with possible values */
variants: T;
/** Variant definitions - each key is a variant axis with possible values */
variants: T;
/** Compound variants - apply classes when multiple conditions are met */
compoundVariants?: Array<{
conditions: Partial<{ [K in keyof T]: keyof T[K] }>;
className: string;
}>;
/** Compound variants - apply classes when multiple conditions are met */
compoundVariants?: Array<{
conditions: Partial<{ [K in keyof T]: keyof T[K] }>;
className: string;
}>;
/** Default variant values */
defaultVariants?: Partial<{ [K in keyof T]: keyof T[K] }>;
/** Default variant values */
defaultVariants?: Partial<{ [K in keyof T]: keyof T[K] }>;
};
/**
* Props type for consuming variant functions
*/
export type VariantProps<T extends Record<string, Record<string, string>>> =
Partial<{
[K in keyof T]: keyof T[K];
}>;
export type VariantProps<T extends Record<string, Record<string, string>>> = Partial<{
[K in keyof T]: keyof T[K];
}>;
/**
* Creates a type-safe variant composition function
@ -68,44 +67,39 @@ export type VariantProps<T extends Record<string, Record<string, string>>> =
* @param config - Variant configuration with base, variants, compound variants, and defaults
* @returns Function that accepts variant props and returns composed className string
*/
export function createVariants<
T extends Record<string, Record<string, string>>,
>(config: VariantConfig<T>) {
return function getVariantClasses(props?: VariantProps<T>): string {
const classes: string[] = [config.base];
export function createVariants<T extends Record<string, Record<string, string>>>(
config: VariantConfig<T>
) {
return function getVariantClasses(props?: VariantProps<T>): string {
const classes: string[] = [config.base];
// Merge props with defaults
const mergedProps = {
...config.defaultVariants,
...props,
} as VariantProps<T>;
// Merge props with defaults
const mergedProps = {
...config.defaultVariants,
...props,
} as VariantProps<T>;
// Apply variant classes
for (const [key, value] of Object.entries(mergedProps)) {
const valueStr = value as string;
if (
value !== undefined &&
value !== null &&
config.variants[key]?.[valueStr]
) {
classes.push(config.variants[key][valueStr]);
}
}
// Apply variant classes
for (const [key, value] of Object.entries(mergedProps)) {
const valueStr = value as string;
if (value !== undefined && value !== null && config.variants[key]?.[valueStr]) {
classes.push(config.variants[key][valueStr]);
}
}
// Apply compound variants
if (config.compoundVariants) {
for (const { conditions, className } of config.compoundVariants) {
const matches = Object.entries(conditions).every(
([key, value]) =>
mergedProps[key as keyof typeof mergedProps] === value,
);
if (matches) {
classes.push(className);
}
}
}
// Apply compound variants
if (config.compoundVariants) {
for (const { conditions, className } of config.compoundVariants) {
const matches = Object.entries(conditions).every(
([key, value]) => mergedProps[key as keyof typeof mergedProps] === value
);
if (matches) {
classes.push(className);
}
}
}
// Filter out any empty strings and join
return classes.filter(Boolean).join(" ");
};
// Filter out any empty strings and join
return classes.filter(Boolean).join(' ');
};
}

2
packages/ui/src/test-setup.ts
View file

@ -1 +1 @@
import "@testing-library/jest-dom/vitest";
import '@testing-library/jest-dom/vitest';

174
packages/ui/src/tokens/animations.ts
View file

@ -7,11 +7,11 @@
* Animation durations
*/
export const duration = {
fast: "150ms",
base: "200ms",
slow: "300ms",
slower: "500ms",
slowest: "700ms",
fast: '150ms',
base: '200ms',
slow: '300ms',
slower: '500ms',
slowest: '700ms',
} as const;
/**
@ -19,15 +19,15 @@ export const duration = {
* Cubic bezier curves for natural motion
*/
export const easing = {
linear: "linear",
ease: "ease",
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
easeOut: "cubic-bezier(0, 0, 0.2, 1)",
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
// Custom easings for specific interactions
smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)",
bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
linear: 'linear',
ease: 'ease',
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
// Custom easings for specific interactions
smooth: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
} as const;
/**
@ -35,63 +35,63 @@ export const easing = {
* Predefined animation sequences
*/
export const keyframes = {
fadeIn: {
from: { opacity: "0" },
to: { opacity: "1" },
},
fadeOut: {
from: { opacity: "1" },
to: { opacity: "0" },
},
slideUp: {
from: { transform: "translateY(10px)", opacity: "0" },
to: { transform: "translateY(0)", opacity: "1" },
},
slideDown: {
from: { transform: "translateY(-10px)", opacity: "0" },
to: { transform: "translateY(0)", opacity: "1" },
},
slideLeft: {
from: { transform: "translateX(10px)", opacity: "0" },
to: { transform: "translateX(0)", opacity: "1" },
},
slideRight: {
from: { transform: "translateX(-10px)", opacity: "0" },
to: { transform: "translateX(0)", opacity: "1" },
},
scaleIn: {
from: { transform: "scale(0.95)", opacity: "0" },
to: { transform: "scale(1)", opacity: "1" },
},
scaleOut: {
from: { transform: "scale(1)", opacity: "1" },
to: { transform: "scale(0.95)", opacity: "0" },
},
shimmer: {
"0%": { backgroundPosition: "-1000px 0" },
"100%": { backgroundPosition: "1000px 0" },
},
pulse: {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0.5" },
},
spin: {
from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" },
},
ping: {
"75%, 100%": { transform: "scale(2)", opacity: "0" },
},
bounce: {
"0%, 100%": {
transform: "translateY(-25%)",
animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)",
},
"50%": {
transform: "translateY(0)",
animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
},
},
fadeIn: {
from: { opacity: '0' },
to: { opacity: '1' },
},
fadeOut: {
from: { opacity: '1' },
to: { opacity: '0' },
},
slideUp: {
from: { transform: 'translateY(10px)', opacity: '0' },
to: { transform: 'translateY(0)', opacity: '1' },
},
slideDown: {
from: { transform: 'translateY(-10px)', opacity: '0' },
to: { transform: 'translateY(0)', opacity: '1' },
},
slideLeft: {
from: { transform: 'translateX(10px)', opacity: '0' },
to: { transform: 'translateX(0)', opacity: '1' },
},
slideRight: {
from: { transform: 'translateX(-10px)', opacity: '0' },
to: { transform: 'translateX(0)', opacity: '1' },
},
scaleIn: {
from: { transform: 'scale(0.95)', opacity: '0' },
to: { transform: 'scale(1)', opacity: '1' },
},
scaleOut: {
from: { transform: 'scale(1)', opacity: '1' },
to: { transform: 'scale(0.95)', opacity: '0' },
},
shimmer: {
'0%': { backgroundPosition: '-1000px 0' },
'100%': { backgroundPosition: '1000px 0' },
},
pulse: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
},
spin: {
from: { transform: 'rotate(0deg)' },
to: { transform: 'rotate(360deg)' },
},
ping: {
'75%, 100%': { transform: 'scale(2)', opacity: '0' },
},
bounce: {
'0%, 100%': {
transform: 'translateY(-25%)',
animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
},
'50%': {
transform: 'translateY(0)',
animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
},
},
} as const;
/**
@ -99,31 +99,31 @@ export const keyframes = {
* Commonly used transition combinations
*/
export const transitions = {
/** Base transition for colors and backgrounds */
base: `background-color ${duration.base} ${easing.easeInOut}, border-color ${duration.base} ${easing.easeInOut}, color ${duration.base} ${easing.easeInOut}`,
/** Base transition for colors and backgrounds */
base: `background-color ${duration.base} ${easing.easeInOut}, border-color ${duration.base} ${easing.easeInOut}, color ${duration.base} ${easing.easeInOut}`,
/** Transform transition */
transform: `transform ${duration.base} ${easing.easeInOut}`,
/** Transform transition */
transform: `transform ${duration.base} ${easing.easeInOut}`,
/** Opacity transition */
opacity: `opacity ${duration.base} ${easing.easeInOut}`,
/** Opacity transition */
opacity: `opacity ${duration.base} ${easing.easeInOut}`,
/** All properties transition */
all: `all ${duration.slow} ${easing.easeInOut}`,
/** All properties transition */
all: `all ${duration.slow} ${easing.easeInOut}`,
/** Fast transition for immediate feedback */
fast: `all ${duration.fast} ${easing.easeOut}`,
/** Fast transition for immediate feedback */
fast: `all ${duration.fast} ${easing.easeOut}`,
/** Smooth transition for hover effects */
smooth: `all ${duration.base} ${easing.smooth}`,
/** Smooth transition for hover effects */
smooth: `all ${duration.base} ${easing.smooth}`,
} as const;
/**
* Complete animations export
*/
export const animations = {
duration,
easing,
keyframes,
transitions,
duration,
easing,
keyframes,
transitions,
} as const;

60
packages/ui/src/tokens/borders.ts
View file

@ -7,21 +7,21 @@
* Border widths
*/
export const borderWidth = {
DEFAULT: "1px",
0: "0",
2: "2px",
4: "4px",
8: "8px",
DEFAULT: '1px',
0: '0',
2: '2px',
4: '4px',
8: '8px',
} as const;
/**
* Border styles
*/
export const borderStyle = {
solid: "solid",
dashed: "dashed",
dotted: "dotted",
none: "none",
solid: 'solid',
dashed: 'dashed',
dotted: 'dotted',
none: 'none',
} as const;
/**
@ -29,14 +29,14 @@ export const borderStyle = {
* References CSS variables for theme consistency
*/
export const borderRadius = {
none: "0",
sm: "var(--radius-sm)",
md: "var(--radius-md)",
lg: "var(--radius-lg)",
xl: "var(--radius-xl)",
"2xl": "var(--radius-2xl, 1rem)",
"3xl": "var(--radius-3xl, 1.5rem)",
full: "9999px",
none: '0',
sm: 'var(--radius-sm)',
md: 'var(--radius-md)',
lg: 'var(--radius-lg)',
xl: 'var(--radius-xl)',
'2xl': 'var(--radius-2xl, 1rem)',
'3xl': 'var(--radius-3xl, 1.5rem)',
full: '9999px',
} as const;
/**
@ -44,29 +44,29 @@ export const borderRadius = {
* Used in globals.css
*/
export const borderRadiusVars = {
sm: "4px",
md: "6px",
lg: "8px",
xl: "12px",
sm: '4px',
md: '6px',
lg: '8px',
xl: '12px',
} as const;
/**
* Border color references (use CSS variables)
*/
export const borderColor = {
DEFAULT: "hsl(var(--border))",
strong: "hsl(var(--border-strong))",
subtle: "hsl(var(--border-subtle))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
DEFAULT: 'hsl(var(--border))',
strong: 'hsl(var(--border-strong))',
subtle: 'hsl(var(--border-subtle))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
} as const;
/**
* Complete border export
*/
export const borders = {
width: borderWidth,
style: borderStyle,
radius: borderRadius,
color: borderColor,
width: borderWidth,
style: borderStyle,
radius: borderRadius,
color: borderColor,
} as const;

194
packages/ui/src/tokens/colors.ts
View file

@ -10,19 +10,19 @@
* Optimized for dark mode with subtle, desaturated tones
*/
export const neutral = {
0: "#000000",
50: "#0a0a0a",
100: "#171717",
200: "#262626",
300: "#404040",
400: "#525252",
500: "#737373",
600: "#a3a3a3",
700: "#d4d4d4",
800: "#e5e5e5",
900: "#f5f5f5",
950: "#fafafa",
1000: "#ffffff",
0: '#000000',
50: '#0a0a0a',
100: '#171717',
200: '#262626',
300: '#404040',
400: '#525252',
500: '#737373',
600: '#a3a3a3',
700: '#d4d4d4',
800: '#e5e5e5',
900: '#f5f5f5',
950: '#fafafa',
1000: '#ffffff',
} as const;
/**
@ -30,61 +30,61 @@ export const neutral = {
* Reference CSS variables for theme-aware colors
*/
export const semantic = {
background: {
DEFAULT: "hsl(var(--background))",
surface: "hsl(var(--surface))",
elevated: "hsl(var(--surface-elevated))",
overlay: "hsl(var(--surface-overlay))",
},
foreground: {
DEFAULT: "hsl(var(--foreground))",
secondary: "hsl(var(--foreground-secondary))",
tertiary: "hsl(var(--foreground-tertiary))",
muted: "hsl(var(--foreground-muted))",
},
border: {
DEFAULT: "hsl(var(--border))",
strong: "hsl(var(--border-strong))",
subtle: "hsl(var(--border-subtle))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
background: {
DEFAULT: 'hsl(var(--background))',
surface: 'hsl(var(--surface))',
elevated: 'hsl(var(--surface-elevated))',
overlay: 'hsl(var(--surface-overlay))',
},
foreground: {
DEFAULT: 'hsl(var(--foreground))',
secondary: 'hsl(var(--foreground-secondary))',
tertiary: 'hsl(var(--foreground-tertiary))',
muted: 'hsl(var(--foreground-muted))',
},
border: {
DEFAULT: 'hsl(var(--border))',
strong: 'hsl(var(--border-strong))',
subtle: 'hsl(var(--border-subtle))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
} as const;
/**
* Status colors (subtle, desaturated for dark mode)
*/
export const status = {
success: {
DEFAULT: "hsl(var(--success))",
foreground: "hsl(var(--success-foreground))",
},
error: {
DEFAULT: "hsl(var(--error))",
foreground: "hsl(var(--error-foreground))",
},
warning: {
DEFAULT: "hsl(var(--warning))",
foreground: "hsl(var(--warning-foreground))",
},
info: {
DEFAULT: "hsl(var(--info))",
foreground: "hsl(var(--info-foreground))",
},
success: {
DEFAULT: 'hsl(var(--success))',
foreground: 'hsl(var(--success-foreground))',
},
error: {
DEFAULT: 'hsl(var(--error))',
foreground: 'hsl(var(--error-foreground))',
},
warning: {
DEFAULT: 'hsl(var(--warning))',
foreground: 'hsl(var(--warning-foreground))',
},
info: {
DEFAULT: 'hsl(var(--info))',
foreground: 'hsl(var(--info-foreground))',
},
} as const;
/**
@ -92,69 +92,69 @@ export const status = {
* Used sparingly for visual interest
*/
export const accents = {
blue: "#60a5fa",
purple: "#a78bfa",
green: "#34d399",
pink: "#f472b6",
orange: "#fb923c",
yellow: "#fbbf24",
blue: '#60a5fa',
purple: '#a78bfa',
green: '#34d399',
pink: '#f472b6',
orange: '#fb923c',
yellow: '#fbbf24',
} as const;
/**
* Form element colors
*/
export const form = {
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
ringOffset: "hsl(var(--ring-offset))",
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
ringOffset: 'hsl(var(--ring-offset))',
} as const;
/**
* Grid/blueprint pattern colors
*/
export const grid = {
color: "hsl(var(--grid-color))",
size: "var(--grid-size)",
color: 'hsl(var(--grid-color))',
size: 'var(--grid-size)',
} as const;
/**
* Card colors
*/
export const card = {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
} as const;
/**
* Legacy destructive color (for backward compatibility)
*/
export const destructive = {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
} as const;
/**
* Complete color export
*/
export const colors = {
neutral,
semantic,
status,
accents,
form,
grid,
card,
destructive,
// Flat exports for easy access
background: semantic.background.DEFAULT,
foreground: semantic.foreground.DEFAULT,
border: semantic.border.DEFAULT,
primary: semantic.primary.DEFAULT,
secondary: semantic.secondary.DEFAULT,
accent: semantic.accent.DEFAULT,
muted: semantic.muted.DEFAULT,
success: status.success.DEFAULT,
error: status.error.DEFAULT,
warning: status.warning.DEFAULT,
info: status.info.DEFAULT,
neutral,
semantic,
status,
accents,
form,
grid,
card,
destructive,
// Flat exports for easy access
background: semantic.background.DEFAULT,
foreground: semantic.foreground.DEFAULT,
border: semantic.border.DEFAULT,
primary: semantic.primary.DEFAULT,
secondary: semantic.secondary.DEFAULT,
accent: semantic.accent.DEFAULT,
muted: semantic.muted.DEFAULT,
success: status.success.DEFAULT,
error: status.error.DEFAULT,
warning: status.warning.DEFAULT,
info: status.info.DEFAULT,
} as const;

12
packages/ui/src/tokens/index.ts
View file

@ -3,9 +3,9 @@
* Export all token categories
*/
export * from "./colors";
export * from "./typography";
export * from "./spacing";
export * from "./borders";
export * from "./shadows";
export * from "./animations";
export * from './colors';
export * from './typography';
export * from './spacing';
export * from './borders';
export * from './shadows';
export * from './animations';

50
packages/ui/src/tokens/shadows.ts
View file

@ -8,27 +8,27 @@
* Subtle and understated for technical aesthetic
*/
export const boxShadow = {
none: "none",
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.3)",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
none: 'none',
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
base: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.3)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
} as const;
/**
* Drop shadow definitions (for SVG and images)
*/
export const dropShadow = {
none: "none",
sm: "drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",
base: "drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))",
md: "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
lg: "drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))",
xl: "drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))",
"2xl": "drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))",
none: 'none',
sm: 'drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))',
base: 'drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))',
md: 'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
lg: 'drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))',
xl: 'drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
'2xl': 'drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))',
} as const;
/**
@ -36,20 +36,20 @@ export const dropShadow = {
* Semantic elevation levels for layered interfaces
*/
export const elevation = {
0: boxShadow.none,
1: boxShadow.sm,
2: boxShadow.base,
3: boxShadow.md,
4: boxShadow.lg,
5: boxShadow.xl,
6: boxShadow["2xl"],
0: boxShadow.none,
1: boxShadow.sm,
2: boxShadow.base,
3: boxShadow.md,
4: boxShadow.lg,
5: boxShadow.xl,
6: boxShadow['2xl'],
} as const;
/**
* Complete shadows export
*/
export const shadows = {
box: boxShadow,
drop: dropShadow,
elevation,
box: boxShadow,
drop: dropShadow,
elevation,
} as const;

134
packages/ui/src/tokens/spacing.ts
View file

@ -8,85 +8,85 @@
* Uses rem units for accessibility (scales with user font size)
*/
export const spacing = {
px: "1px",
0: "0",
0.5: "0.125rem", // 2px
1: "0.25rem", // 4px
1.5: "0.375rem", // 6px
2: "0.5rem", // 8px
2.5: "0.625rem", // 10px
3: "0.75rem", // 12px
3.5: "0.875rem", // 14px
4: "1rem", // 16px
5: "1.25rem", // 20px
6: "1.5rem", // 24px
7: "1.75rem", // 28px
8: "2rem", // 32px
9: "2.25rem", // 36px
10: "2.5rem", // 40px
11: "2.75rem", // 44px
12: "3rem", // 48px
14: "3.5rem", // 56px
16: "4rem", // 64px
20: "5rem", // 80px
24: "6rem", // 96px
28: "7rem", // 112px
32: "8rem", // 128px
36: "9rem", // 144px
40: "10rem", // 160px
44: "11rem", // 176px
48: "12rem", // 192px
52: "13rem", // 208px
56: "14rem", // 224px
60: "15rem", // 240px
64: "16rem", // 256px
72: "18rem", // 288px
80: "20rem", // 320px
96: "24rem", // 384px
px: '1px',
0: '0',
0.5: '0.125rem', // 2px
1: '0.25rem', // 4px
1.5: '0.375rem', // 6px
2: '0.5rem', // 8px
2.5: '0.625rem', // 10px
3: '0.75rem', // 12px
3.5: '0.875rem', // 14px
4: '1rem', // 16px
5: '1.25rem', // 20px
6: '1.5rem', // 24px
7: '1.75rem', // 28px
8: '2rem', // 32px
9: '2.25rem', // 36px
10: '2.5rem', // 40px
11: '2.75rem', // 44px
12: '3rem', // 48px
14: '3.5rem', // 56px
16: '4rem', // 64px
20: '5rem', // 80px
24: '6rem', // 96px
28: '7rem', // 112px
32: '8rem', // 128px
36: '9rem', // 144px
40: '10rem', // 160px
44: '11rem', // 176px
48: '12rem', // 192px
52: '13rem', // 208px
56: '14rem', // 224px
60: '15rem', // 240px
64: '16rem', // 256px
72: '18rem', // 288px
80: '20rem', // 320px
96: '24rem', // 384px
} as const;
/**
* Container widths
*/
export const containerWidth = {
xs: "20rem", // 320px
sm: "24rem", // 384px
md: "28rem", // 448px
lg: "32rem", // 512px
xl: "36rem", // 576px
"2xl": "42rem", // 672px
"3xl": "48rem", // 768px
"4xl": "56rem", // 896px
"5xl": "64rem", // 1024px
"6xl": "72rem", // 1152px
"7xl": "80rem", // 1280px
full: "100%",
screen: "100vw",
xs: '20rem', // 320px
sm: '24rem', // 384px
md: '28rem', // 448px
lg: '32rem', // 512px
xl: '36rem', // 576px
'2xl': '42rem', // 672px
'3xl': '48rem', // 768px
'4xl': '56rem', // 896px
'5xl': '64rem', // 1024px
'6xl': '72rem', // 1152px
'7xl': '80rem', // 1280px
full: '100%',
screen: '100vw',
} as const;
/**
* Component-specific spacing presets
*/
export const component = {
/** Padding for buttons, inputs, etc. */
padding: {
sm: spacing[3], // 12px
md: spacing[4], // 16px
lg: spacing[5], // 20px
},
/** Padding for buttons, inputs, etc. */
padding: {
sm: spacing[3], // 12px
md: spacing[4], // 16px
lg: spacing[5], // 20px
},
/** Gap between elements */
gap: {
sm: spacing[2], // 8px
md: spacing[3], // 12px
lg: spacing[4], // 16px
},
/** Gap between elements */
gap: {
sm: spacing[2], // 8px
md: spacing[3], // 12px
lg: spacing[4], // 16px
},
/** Margin between sections */
margin: {
sm: spacing[4], // 16px
md: spacing[6], // 24px
lg: spacing[8], // 32px
xl: spacing[12], // 48px
},
/** Margin between sections */
margin: {
sm: spacing[4], // 16px
md: spacing[6], // 24px
lg: spacing[8], // 32px
xl: spacing[12], // 48px
},
} as const;

110
packages/ui/src/tokens/typography.ts
View file

@ -8,25 +8,25 @@
* Geist font stack with system fallbacks
*/
export const fontFamily = {
sans: [
"Geist",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
"sans-serif",
],
mono: [
"Geist Mono",
'"SF Mono"',
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace",
],
sans: [
'Geist',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
],
mono: [
'Geist Mono',
'"SF Mono"',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
} as const;
/**
@ -35,64 +35,64 @@ export const fontFamily = {
* Tighter letter spacing for larger sizes (optical sizing)
*/
export const fontSize = {
xs: ["0.75rem", { lineHeight: "1rem", letterSpacing: "0" }],
sm: ["0.875rem", { lineHeight: "1.25rem", letterSpacing: "0" }],
base: ["1rem", { lineHeight: "1.5rem", letterSpacing: "0" }],
lg: ["1.125rem", { lineHeight: "1.75rem", letterSpacing: "-0.01em" }],
xl: ["1.25rem", { lineHeight: "1.75rem", letterSpacing: "-0.01em" }],
"2xl": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.02em" }],
"3xl": ["1.875rem", { lineHeight: "2.25rem", letterSpacing: "-0.02em" }],
"4xl": ["2.25rem", { lineHeight: "2.5rem", letterSpacing: "-0.03em" }],
"5xl": ["3rem", { lineHeight: "1", letterSpacing: "-0.03em" }],
"6xl": ["3.75rem", { lineHeight: "1", letterSpacing: "-0.04em" }],
"7xl": ["4.5rem", { lineHeight: "1", letterSpacing: "-0.04em" }],
"8xl": ["6rem", { lineHeight: "1", letterSpacing: "-0.05em" }],
"9xl": ["8rem", { lineHeight: "1", letterSpacing: "-0.05em" }],
xs: ['0.75rem', { lineHeight: '1rem', letterSpacing: '0' }],
sm: ['0.875rem', { lineHeight: '1.25rem', letterSpacing: '0' }],
base: ['1rem', { lineHeight: '1.5rem', letterSpacing: '0' }],
lg: ['1.125rem', { lineHeight: '1.75rem', letterSpacing: '-0.01em' }],
xl: ['1.25rem', { lineHeight: '1.75rem', letterSpacing: '-0.01em' }],
'2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.02em' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.02em' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.03em' }],
'5xl': ['3rem', { lineHeight: '1', letterSpacing: '-0.03em' }],
'6xl': ['3.75rem', { lineHeight: '1', letterSpacing: '-0.04em' }],
'7xl': ['4.5rem', { lineHeight: '1', letterSpacing: '-0.04em' }],
'8xl': ['6rem', { lineHeight: '1', letterSpacing: '-0.05em' }],
'9xl': ['8rem', { lineHeight: '1', letterSpacing: '-0.05em' }],
} as const;
/**
* Font weights
*/
export const fontWeight = {
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
} as const;
/**
* Letter spacing values
*/
export const letterSpacing = {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
tighter: '-0.05em',
tight: '-0.025em',
normal: '0',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
} as const;
/**
* Line heights
*/
export const lineHeight = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2",
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
} as const;
/**
* Complete typography export
*/
export const typography = {
fontFamily,
fontSize,
fontWeight,
letterSpacing,
lineHeight,
fontFamily,
fontSize,
fontWeight,
letterSpacing,
lineHeight,
} as const;