Peraa

import { Button } from '@peraa/react';

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button intent="tertiary">Tertiary</Button>

// With additional props
<Button intent="primary" size="lg">
  Large Button
</Button>
<Button intent="primary" disabled>
  Disabled
</Button>

<button class="peraa-btn-primary">
  Primary
</button>

<button class="peraa-btn-secondary">
  Secondary
</button>

<button class="peraa-btn-tertiary">
  Tertiary
</button>

<!-- With sizes -->
<button class="peraa-btn-primary peraa-btn-sm">Small</button>
<button class="peraa-btn-primary peraa-btn-lg">Large</button>

import { Badge } from '@peraa/react';

<Badge>Default</Badge>
<Badge variant="brand">Brand</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

// With props
<Badge variant="brand" size="sm">Small</Badge>
<Badge variant="success" outline>Outlined</Badge>

<span class="peraa-badge">Default</span>
<span class="peraa-badge-brand">Brand</span>
<span class="peraa-badge-success">Success</span>
<span class="peraa-badge-warning">Warning</span>
<span class="peraa-badge-error">Error</span>

<!-- With sizes -->
<span class="peraa-badge peraa-badge-sm">Small</span>
<span class="peraa-badge peraa-badge-lg">Large</span>

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@peraa/react';

<Tabs defaultTab="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="features">Features</Tab>
    <Tab id="pricing">Pricing</Tab>
  </TabList>
  <TabPanels>
    <TabPanel id="overview">
      Overview content here
    </TabPanel>
    <TabPanel id="features">
      Features content here
    </TabPanel>
    <TabPanel id="pricing">
      Pricing content here
    </TabPanel>
  </TabPanels>
</Tabs>

<div class="peraa-tabs-list">
  <button class="peraa-tab peraa-tab-active">Tab 1</button>
  <button class="peraa-tab">Tab 2</button>
  <button class="peraa-tab">Tab 3</button>
</div>
<div class="peraa-tab-panel">
  Content for the active tab
</div>

import { Card, CardImage, CardContent, CardTitle, CardDescription } from '@peraa/react';

<Card interactive>
  <CardImage src="/image.jpg" alt="Description" />
  <CardContent>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>
      Brief description of the card content.
    </CardDescription>
  </CardContent>
</Card>

// Variants
<Card horizontal>...</Card>
<Card compact>...</Card>
<Card featured>...</Card>

<div class="peraa-card-interactive">
  <img src="..." class="peraa-card-image" />
  <div class="peraa-card-content">
    <h3 class="peraa-card-title">Card Title</h3>
    <p class="peraa-card-description">
      Description text here.
    </p>
  </div>
</div>

<!-- Variants -->
<div class="peraa-card-featured">...</div>

import { Articles, Article } from '@peraa/react';

<Articles>
  <Article
    href="/article"
    title="Design Systems Must Evolve"
    description="Excerpt text..."
    date="April 2026"
    readingTime="5 min read"
  />
</Articles>

<div class="peraa-articles">
  <article class="peraa-article">
    <a href="/article" class="peraa-article__link">
      <h2 class="peraa-article__title">Title</h2>
      <p class="peraa-article__description">Excerpt...</p>
      <div class="peraa-article__meta">
        <span class="peraa-article__date">April 2026</span>
      </div>
    </a>
  </article>
</div>

import { FlipCard } from '@peraa/react';

<FlipCard
  front={<div>Front content</div>}
  back={<div>Back content</div>}
/>

<div class="peraa-flip-card">
  <div class="peraa-flip-card__inner">
    <div class="peraa-flip-card__front">...</div>
    <div class="peraa-flip-card__back">...</div>
  </div>
</div>

import { Field, Input, Textarea, Select } from '@peraa/react';

<Field label="Full name">
  <Input type="text" placeholder="Enter your name" />
</Field>

<Field label="Email" error="Invalid email address.">
  <Input type="email" status="error" />
</Field>

<Field label="Message">
  <Textarea rows={4} />
</Field>

<div class="peraa-field">
  <label class="peraa-label" for="name">
    Full name
  </label>
  <input class="peraa-input" type="text" id="name">
</div>

import { Alert } from '@peraa/react';

<Alert variant="info" title="Heads up">
  Message text here.
</Alert>

<Alert variant="success" title="All done">
  Changes saved.
</Alert>

<Alert variant="error" title="Something went wrong">
  Please try again.
</Alert>

<div class="peraa-alert peraa-alert--success">
  <div class="peraa-alert__content">
    <p class="peraa-alert__title">All done</p>
    <p class="peraa-alert__message">Changes saved.</p>
  </div>
</div>

<div class="peraa-glass" style="padding: var(--peraa-spacing-8);">
  Card content
</div>

<!-- Workshop Inquiry trigger -->
<button data-modal-trigger="workshop">Book a Workshop</button>

<!-- Start a Conversation trigger -->
<button data-modal-trigger="conversation">Start a Conversation</button>

<!-- Link trigger (footer pattern) -->
<a href="#" data-modal-trigger="conversation">
  trldesignr@gmail.com
</a>

interface CheckboxProps {
  id: string;
  label: string;
  checked?: boolean;
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
}

export function Checkbox({ id, label, checked, disabled, onChange }: CheckboxProps) {
  return (
    <div className="peraa-checkbox">
      <input
        className="peraa-checkbox__input"
        type="checkbox"
        id={id}
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange?.(e.target.checked)}
      />
      <label className="peraa-checkbox__label" htmlFor={id}>{label}</label>
    </div>
  );
}

interface RadioOption { value: string; label: string; disabled?: boolean; }

interface RadioGroupProps {
  name: string;
  options: RadioOption[];
  value?: string;
  onChange?: (value: string) => void;
}

export function RadioGroup({ name, options, value, onChange }: RadioGroupProps) {
  return (
    <div className="peraa-radio-group" role="radiogroup">
      {options.map((opt) => (
        <div key={opt.value} className="peraa-radio">
          <input
            className="peraa-radio__input"
            type="radio"
            name={name}
            id={`${name}-${opt.value}`}
            checked={value === opt.value}
            disabled={opt.disabled}
            onChange={() => onChange?.(opt.value)}
          />
          <label className="peraa-radio__label" htmlFor={`${name}-${opt.value}`}>
            {opt.label}
          </label>
        </div>
      ))}
    </div>
  );
}

interface ToggleProps {
  id: string;
  label: string;
  checked?: boolean;
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
}

export function Toggle({ id, label, checked, size = 'md', disabled, onChange }: ToggleProps) {
  const sizeClass = size !== 'md' ? `peraa-toggle--${size}` : '';
  return (
    <div className={`peraa-toggle ${sizeClass}`}>
      <input className="peraa-toggle__input" type="checkbox" id={id}
        checked={checked} disabled={disabled}
        onChange={(e) => onChange?.(e.target.checked)} />
      <label className="peraa-toggle__label" htmlFor={id}>
        <span className="peraa-toggle__track"><span className="peraa-toggle__thumb" /></span>
        <span className="peraa-toggle__text">{label}</span>
      </label>
    </div>
  );
}

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  hint?: string;
  maxLength?: number;
  resize?: 'vertical' | 'none' | 'auto';
}

export function Textarea({ label, hint, maxLength, resize = 'vertical', id, value, onChange, ...props }: TextareaProps) {
  const resizeClass = resize === 'none' ? 'peraa-textarea--no-resize' : resize === 'auto' ? 'peraa-textarea--auto' : '';
  const count = typeof value === 'string' ? value.length : 0;
  return (
    <div className="peraa-field">
      {label && <label className="peraa-label" htmlFor={id}>{label}</label>}
      <div className="peraa-textarea-wrapper">
        <textarea className={`peraa-input peraa-textarea ${resizeClass}`} id={id} value={value} onChange={onChange} {...props} />
        {maxLength && <span className="peraa-textarea__count">{count}/{maxLength}</span>}
      </div>
      {hint && <span className="peraa-field__hint">{hint}</span>}
    </div>
  );
}

interface SelectOption { value: string; label: string; }

interface SelectProps {
  id: string;
  label?: string;
  options: SelectOption[];
  value?: string;
  size?: 'sm' | 'md' | 'lg';
  error?: boolean;
  onChange?: (value: string) => void;
}

export function Select({ id, label, options, value, size = 'md', error, onChange }: SelectProps) {
  const sizeClass = size !== 'md' ? `peraa-select--${size}` : '';
  const errorClass = error ? 'peraa-select--error' : '';
  return (
    <div className="peraa-field">
      {label && <label className="peraa-label" htmlFor={id}>{label}</label>}
      <div className="peraa-select-wrapper">
        <select className={`peraa-select ${sizeClass} ${errorClass}`} id={id} value={value}
          onChange={(e) => onChange?.(e.target.value)}>
          {options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
      </div>
    </div>
  );
}

export function FileUpload({ onFiles }: { onFiles?: (files: File[]) => void }) {
  const [files, setFiles] = React.useState<File[]>([]);
  const [dragging, setDragging] = React.useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const next = Array.from(e.target.files ?? []);
    setFiles(next); onFiles?.(next);
  };
  const remove = (i: number) => setFiles(f => f.filter((_, idx) => idx !== i));

  return (
    <div className="peraa-file-upload">
      <input className="peraa-file-upload__input" type="file" id="fu" multiple onChange={handleChange} />
      <label className={`peraa-file-upload__zone${dragging ? ' peraa-file-upload__zone--dragging' : ''}`}
        htmlFor="fu"
        onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
        onDragLeave={() => setDragging(false)}
        onDrop={(e) => { e.preventDefault(); setDragging(false); const next = Array.from(e.dataTransfer.files); setFiles(next); onFiles?.(next); }}>
        <p className="peraa-file-upload__prompt"><span>Click to upload</span> or drag & drop</p>
      </label>
      {files.length > 0 && (
        <div className="peraa-file-upload__list">
          {files.map((f, i) => (
            <div key={i} className="peraa-file-upload__item">
              <span className="peraa-file-upload__item-name">{f.name}</span>
              <button className="peraa-file-upload__item-remove" onClick={() => remove(i)}>&times;</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

interface SearchInputProps {
  placeholder?: string;
  value?: string;
  onChange?: (value: string) => void;
  onClear?: () => void;
  square?: boolean;
  fullWidth?: boolean;
}

export function SearchInput({ placeholder, value, onChange, onClear, square, fullWidth }: SearchInputProps) {
  const classes = ['peraa-search', square && 'peraa-search--square', fullWidth && 'peraa-search--full'].filter(Boolean).join(' ');
  return (
    <div className={classes}>
      <SearchIcon className="peraa-search__icon" />
      <input className="peraa-search__input" type="search" placeholder={placeholder}
        value={value} onChange={(e) => onChange?.(e.target.value)} />
      {value && <button className="peraa-search__clear" onClick={onClear} aria-label="Clear">&times;</button>}
    </div>
  );
}

// useToast hook pattern
interface Toast { id: string; variant: 'success'|'warning'|'error'|'info'; title?: string; message: string; }

function useToast() {
  const [toasts, setToasts] = React.useState<Toast[]>([]);
  const add = (t: Omit<Toast, 'id'>) => {
    const id = crypto.randomUUID();
    setToasts(prev => [...prev, { ...t, id }]);
    setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), 4000);
  };
  const remove = (id: string) => setToasts(prev => prev.filter(x => x.id !== id));
  return { toasts, add, remove };
}

// ToastStack portal component
export function ToastStack({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
  return ReactDOM.createPortal(
    <div className="peraa-toast-stack">
      {toasts.map((t) => (
        <div key={t.id} className={`peraa-toast peraa-toast--${t.variant}`}>
          <div className="peraa-toast__content">
            <div className="peraa-toast__body">
              {t.title && <p className="peraa-toast__title">{t.title}</p>}
              <p className="peraa-toast__message">{t.message}</p>
            </div>
          </div>
          <div className="peraa-toast__actions">
            <button className="peraa-toast__dismiss" onClick={() => onDismiss(t.id)}>&times;</button>
          </div>
        </div>
      ))}
    </div>,
    document.body
  );
}

interface SpinnerProps {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  label?: string;
  overlay?: boolean;
  variant?: 'default' | 'light' | 'accent';
}

export function Spinner({ size = 'md', label, overlay, variant = 'default' }: SpinnerProps) {
  const sizeClass = size !== 'md' ? `peraa-spinner--${size}` : '';
  const variantClass = variant !== 'default' ? `peraa-spinner--${variant}` : '';
  const spinner = <div className={`peraa-spinner ${sizeClass} ${variantClass}`} aria-label="Loading" />;

  if (overlay) return <div className="peraa-spinner-overlay">{spinner}</div>;
  if (label) return <span className="peraa-spinner-label">{spinner} {label}</span>;
  return spinner;
}

// Primitives
export const Skeleton = ({ variant = 'text', width }: { variant?: string; width?: string }) => (
  <div className={`peraa-skeleton peraa-skeleton--${variant}`} style={width ? { width } : undefined} />
);

// Compound card skeleton (mirrors your card layout)
export function CardSkeleton() {
  return (
    <div className="peraa-skeleton-card">
      <Skeleton variant="circle" width="40px" />
      <div className="peraa-skeleton-lines">
        <Skeleton />
        <Skeleton width="60%" />
      </div>
    </div>
  );
}

interface ProgressBarProps {
  value?: number; // 0–100; omit for indeterminate
  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
  size?: 'sm' | 'md' | 'lg';
  label?: string;
}

export function ProgressBar({ value, variant = 'default', size = 'md', label }: ProgressBarProps) {
  const indeterminate = value === undefined;
  const variantClass = variant !== 'default' ? `peraa-progress--${variant}` : '';
  const sizeClass = size !== 'md' ? `peraa-progress--${size}` : '';
  const indClass = indeterminate ? 'peraa-progress--indeterminate' : '';
  return (
    <div>
      {label && !indeterminate && (
        <div className="peraa-progress__label">
          <span>{label}</span>
          <span className="peraa-progress__label-value">{value}%</span>
        </div>
      )}
      <div className={`peraa-progress ${variantClass} ${sizeClass} ${indClass}`}
        role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={100}>
        <div className="peraa-progress__bar"
          style={!indeterminate ? { '--peraa-progress-value': `${value}%` } as React.CSSProperties : undefined} />
      </div>
    </div>
  );
}

// CSS-only tooltip (static positioning)
interface TooltipProps {
  content: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
  wide?: boolean;
  children: React.ReactNode;
}

export function Tooltip({ content, position = 'top', wide, children }: TooltipProps) {
  return (
    <span className="peraa-tooltip-wrapper">
      {children}
      <span className={`peraa-tooltip peraa-tooltip--${position}${wide ? ' peraa-tooltip--wide' : ''}`}>
        {content}
      </span>
    </span>
  );
}

// For production: use @radix-ui/react-tooltip or floating-ui for correct positioning

// Pattern using Radix UI Popover (recommended for a11y + positioning)
import * as Popover from '@radix-ui/react-popover';

export function FilterPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button className="peraa-btn peraa-btn--secondary">Filters</button>
      </Popover.Trigger>
      <Popover.Content className="peraa-popover" side="bottom" align="start" sideOffset={8}>
        <div className="peraa-popover__header">
          <p className="peraa-popover__title">Filter options</p>
        </div>
        <div className="peraa-popover__body">
          {/* filter controls */}
        </div>
        <div className="peraa-popover__footer">
          <button className="peraa-btn peraa-btn--primary peraa-btn--sm">Apply</button>
        </div>
      </Popover.Content>
    </Popover.Root>
  );
}

interface DrawerProps {
  open: boolean;
  onClose: () => void;
  title: string;
  side?: 'left' | 'right';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  footer?: React.ReactNode;
}

export function Drawer({ open, onClose, title, side = 'right', size, children, footer }: DrawerProps) {
  const sideClass = `peraa-drawer--${side}`;
  const sizeClass = size ? `peraa-drawer--${size}` : '';
  return (
    <>
      <div className={`peraa-drawer-overlay${open ? ' peraa-drawer-overlay--open' : ''}`} onClick={onClose} />
      <div className={`peraa-drawer ${sideClass} ${sizeClass}${open ? ' peraa-drawer--open' : ''}`}
           role="dialog" aria-modal="true">
        <div className="peraa-drawer__header">
          <h2 className="peraa-drawer__title">{title}</h2>
          <button className="peraa-drawer__close" onClick={onClose} aria-label="Close">&times;</button>
        </div>
        <div className="peraa-drawer__body">{children}</div>
        {footer && <div className="peraa-drawer__footer">{footer}</div>}
      </div>
    </>
  );
}

interface BreadcrumbItem { label: string; href?: string; }

export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav className="peraa-breadcrumb" aria-label="Breadcrumb">
      <ol className="peraa-breadcrumb__list">
        {items.map((item, i) => {
          const isCurrent = i === items.length - 1;
          return (
            <li key={i} className={`peraa-breadcrumb__item${isCurrent ? ' peraa-breadcrumb__item--current' : ''}`}
                aria-current={isCurrent ? 'page' : undefined}>
              {isCurrent ? (
                <span className="peraa-breadcrumb__current">{item.label}</span>
              ) : (
                <>
                  <a className="peraa-breadcrumb__link" href={item.href}>{item.label}</a>
                  <span className="peraa-breadcrumb__separator" aria-hidden="true">/</span>
                </>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

interface PaginationProps {
  page: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function Pagination({ page, totalPages, onPageChange }: PaginationProps) {
  const pages = Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1);
  return (
    <nav className="peraa-pagination" aria-label="Pagination">
      <button className="peraa-pagination__prev" onClick={() => onPageChange(page - 1)}
        disabled={page === 1} aria-label="Previous">&larr;</button>
      <div className="peraa-pagination__pages">
        {pages.map((p) => (
          <button key={p} className={`peraa-pagination__item${p === page ? ' peraa-pagination__item--active' : ''}`}
            aria-current={p === page ? 'page' : undefined}
            onClick={() => onPageChange(p)}>{p}</button>
        ))}
        {totalPages > 5 && <><span className="peraa-pagination__ellipsis">&hellip;</span><button className="peraa-pagination__item" onClick={() => onPageChange(totalPages)}>{totalPages}</button></>}
      </div>
      <button className="peraa-pagination__next" onClick={() => onPageChange(page + 1)}
        disabled={page === totalPages} aria-label="Next">&rarr;</button>
    </nav>
  );
}

interface Step { label: string; sublabel?: string; }

type StepState = 'complete' | 'active' | 'pending';
function getState(i: number, current: number): StepState {
  if (i < current) return 'complete';
  if (i === current) return 'active';
  return 'pending';
}

export function Stepper({ steps, currentStep, vertical }: { steps: Step[]; currentStep: number; vertical?: boolean }) {
  return (
    <ol className={`peraa-stepper${vertical ? ' peraa-stepper--vertical' : ''}`}>
      {steps.map((step, i) => {
        const state = getState(i, currentStep);
        return (
          <li key={i} className={`peraa-stepper__step peraa-stepper__step--${state}`}
              aria-current={state === 'active' ? 'step' : undefined}>
            <div className="peraa-stepper__header">
              <div className="peraa-stepper__indicator">
                <span className="peraa-stepper__number">{state === 'complete' ? '✓' : i + 1}</span>
              </div>
              <span className="peraa-stepper__label">{step.label}</span>
            </div>
          </li>
        );
      })}
    </ol>
  );
}

interface AccordionItem { question: string; answer: React.ReactNode; }

export function Accordion({ items }: { items: AccordionItem[] }) {
  const [open, setOpen] = React.useState<number | null>(null);
  return (
    <div className="peraa-accordion">
      {items.map((item, i) => (
        <div key={i} className={`peraa-accordion__item${open === i ? ' peraa-accordion__item--open' : ''}`}>
          <button className="peraa-accordion__trigger" aria-expanded={open === i}
                  onClick={() => setOpen(open === i ? null : i)}>
            <span className="peraa-accordion__title">{item.question}</span>
            <ChevronIcon className="peraa-accordion__icon" />
          </button>
          <div className="peraa-accordion__panel">
            <div className="peraa-accordion__content">{item.answer}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

interface DividerProps {
  label?: string;
  vertical?: boolean;
  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  strong?: boolean;
}

export function Divider({ label, vertical, spacing = 'md', strong }: DividerProps) {
  if (vertical) {
    return <div className="peraa-divider peraa-divider--vertical" role="separator" aria-orientation="vertical" />;
  }
  const spacingClass = spacing !== 'md' ? `peraa-divider--${spacing}` : '';
  const strongClass = strong ? 'peraa-divider--strong' : '';
  if (label) {
    return (
      <div className={`peraa-divider peraa-divider--label ${spacingClass}`} role="separator">
        <span className="peraa-divider__text">{label}</span>
      </div>
    );
  }
  return <hr className={`peraa-divider ${spacingClass} ${strongClass}`} />;
}

interface Column<T> { key: keyof T; header: string; numeric?: boolean; sortable?: boolean; }

export function DataTable<T extends Record<string, unknown>>({
  columns, rows, striped
}: { columns: Column<T>[]; rows: T[]; striped?: boolean }) {
  const [sortKey, setSortKey] = React.useState<keyof T | null>(null);
  const [sortDir, setSortDir] = React.useState<'asc' | 'desc'>('asc');
  const sorted = sortKey ? [...rows].sort((a, b) => {
    const v = a[sortKey] > b[sortKey] ? 1 : -1;
    return sortDir === 'asc' ? v : -v;
  }) : rows;
  return (
    <div className="peraa-table-wrapper">
      <table className={`peraa-table${striped ? ' peraa-table--striped' : ''}`}>
        <thead><tr>{columns.map((col) => (
          <th key={String(col.key)} className={`peraa-th${col.sortable ? ' peraa-th--sortable' : ''}${col.numeric ? ' peraa-th--num' : ''}`}
              onClick={col.sortable ? () => { setSortKey(col.key); setSortDir(d => d === 'asc' ? 'desc' : 'asc'); } : undefined}>{col.header}</th>
        ))}</tr></thead>
        <tbody>{sorted.map((row, i) => (
          <tr key={i} className="peraa-tr">{columns.map((col) => (
            <td key={String(col.key)} className={`peraa-td${col.numeric ? ' peraa-td--num' : ''}`}>{String(row[col.key])}</td>
          ))}</tr>
        ))}</tbody>
      </table>
    </div>
  );
}

interface DataListItem { label: string; value: React.ReactNode; }

interface DataListProps {
  items: DataListItem[];
  card?: boolean;
  striped?: boolean;
  stacked?: boolean;
}

export function DataList({ items, card, striped, stacked }: DataListProps) {
  const classes = ['peraa-data-list', card && 'peraa-data-list--card',
    striped && 'peraa-data-list--striped', stacked && 'peraa-data-list--stacked']
    .filter(Boolean).join(' ');
  return (
    <dl className={classes}>
      {items.map((item, i) => (
        <div key={i} className="peraa-data-list__row">
          <dt className="peraa-data-list__label">{item.label}</dt>
          <dd className="peraa-data-list__value">{item.value}</dd>
        </div>
      ))}
    </dl>
  );
}

interface AvatarProps {
  src?: string;
  name: string;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  square?: boolean;
}

function getInitials(name: string) {
  return name.split(' ').slice(0, 2).map(n => n[0]).join('').toUpperCase();
}

export function Avatar({ src, name, size = 'md', square }: AvatarProps) {
  const classes = ['peraa-avatar', `peraa-avatar--${size}`, square && 'peraa-avatar--square'].filter(Boolean).join(' ');
  return (
    <div className={classes}>
      {src ? <img className="peraa-avatar__img" src={src} alt={name} />
           : <span className="peraa-avatar__initials">{getInitials(name)}</span>}
    </div>
  );
}

interface TagProps {
  label: string;
  color?: 'default' | 'purple' | 'teal' | 'success' | 'warning' | 'error';
  removable?: boolean;
  selected?: boolean;
  onClick?: () => void;
  onRemove?: () => void;
}

export function Tag({ label, color = 'default', removable, selected, onClick, onRemove }: TagProps) {
  const colorClass = color !== 'default' ? `peraa-tag--${color}` : '';
  const selectedClass = selected ? 'peraa-tag--selected' : '';
  const Element = onClick ? 'button' : 'span';
  return (
    <Element className={`peraa-tag ${colorClass} ${selectedClass}${onClick ? ' peraa-tag--interactive' : ''}`}
      onClick={onClick}>
      {label}
      {removable && (
        <button className="peraa-tag__remove" aria-label={`Remove ${label}`}
          onClick={(e) => { e.stopPropagation(); onRemove?.(); }}>&times;</button>
      )}
    </Element>
  );
}

const icons = { info: 'ℹ️', tip: '💡', warning: '⚠️', danger: '🚫' };

interface CalloutProps {
  variant?: 'info' | 'tip' | 'warning' | 'danger';
  title?: string;
  children: React.ReactNode;
}

export function Callout({ variant = 'info', title, children }: CalloutProps) {
  return (
    <div className={`peraa-callout peraa-callout--${variant}`}>
      <span className="peraa-callout__icon">{icons[variant]}</span>
      <div className="peraa-callout__body">
        {title && <strong className="peraa-callout__title">{title}</strong>}
        {children}
      </div>
    </div>
  );
}

interface EmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description?: string;
  actions?: React.ReactNode;
  size?: 'default' | 'sm';
}

export function EmptyState({ icon, title, description, actions, size = 'default' }: EmptyStateProps) {
  return (
    <div className={`peraa-empty-state${size === 'sm' ? ' peraa-empty-state--sm' : ''}`}>
      {icon && <div className="peraa-empty-state__icon">{icon}</div>}
      <h3 className="peraa-empty-state__title">{title}</h3>
      {description && <p className="peraa-empty-state__description">{description}</p>}
      {actions && <div className="peraa-empty-state__actions">{actions}</div>}
    </div>
  );
}

export function Kbd({ children, size }: { children: React.ReactNode; size?: 'sm' | 'lg' }) {
  const sizeClass = size ? `peraa-kbd--${size}` : '';
  return <kbd className={`peraa-kbd ${sizeClass}`}>{children}</kbd>;
}

interface KbdComboProps {
  keys: string[];
  separator?: string;
  size?: 'sm' | 'lg';
}

export function KbdCombo({ keys, separator = '+', size }: KbdComboProps) {
  return (
    <span className="peraa-kbd-combo">
      {keys.map((key, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="peraa-kbd-combo__plus">{separator}</span>}
          <Kbd size={size}>{key}</Kbd>
        </React.Fragment>
      ))}
    </span>
  );
}

interface StatCardProps {
  label: string;
  value: string | number;
  trend?: { value: string; direction: 'up' | 'down' | 'neutral'; context?: string; };
  variant?: 'default' | 'accent' | 'highlighted';
  icon?: React.ReactNode;
}

export function StatCard({ label, value, trend, variant = 'default', icon }: StatCardProps) {
  const variantClass = variant !== 'default' ? `peraa-stat-card--${variant}` : '';
  return (
    <div className={`peraa-stat-card ${variantClass}`}>
      <div className="peraa-stat-card__header">
        {icon && <div className="peraa-stat-card__icon">{icon}</div>}
        <span className="peraa-stat-card__label">{label}</span>
      </div>
      <div className="peraa-stat-card__value">{value}</div>
      {trend && (
        <div className="peraa-stat-card__trend">
          <span className={`peraa-stat-card__trend-badge peraa-stat-card__trend-badge--${trend.direction}`}>
            {trend.direction === 'up' ? '▲' : trend.direction === 'down' ? '▼' : '─'} {trend.value}
          </span>
          {trend.context && <span className="peraa-stat-card__trend-label">{trend.context}</span>}
        </div>
      )}
    </div>
  );
}