component-docs

import type { ButtonHTMLAttributes, ReactNode } from 'react';

export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
export type ButtonSize = 'sm' | 'md' | 'lg';

export interface ButtonProps extends Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'className'
> {
  children: ReactNode;
  variant?: ButtonVariant;
  size?: ButtonSize;
  disabled?: boolean;
  loading?: boolean;
}

const VARIANT_CLASSES: Record<ButtonVariant, string> = {
  primary: 'bg-base-primary text-canvas border-base-primary',
  secondary: 'bg-transparent text-base-primary border-base-primary',
  ghost: 'bg-transparent text-base-primary border-transparent',
};

const SIZE_CLASSES: Record<ButtonSize, string> = {
  sm: 'text-xs px-2 py-1',
  md: 'text-sm px-3 py-1.5',
  lg: 'text-base px-4 py-2',
};

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  ...rest
}: ButtonProps) {
  return (
    <button
      type="button"
      disabled={disabled || loading}
      aria-busy={loading}
      className={[
        'inline-flex items-center justify-center gap-2 rounded-sm border font-mono transition-opacity',
        'disabled:opacity-50 disabled:cursor-not-allowed',
        VARIANT_CLASSES[variant],
        SIZE_CLASSES[size],
      ].join(' ')}
      {...rest}>
      {children}
    </button>
  );
}

export function ButtonDemo() {
  return (
    <>
      <Button>Save changes</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="ghost" loading>
        Saving
      </Button>
    </>
  );
}

import type { ReactNode } from 'react';

export type BadgeTone = 'neutral' | 'success' | 'error' | 'info';

export interface BadgeProps {
  children: ReactNode;
  tone?: BadgeTone;
  filled?: boolean;
}

const TONE_TEXT_CLASSES: Record<BadgeTone, string> = {
  neutral: 'text-base-muted border-base-muted',
  success: 'text-base-status border-base-status',
  error: 'text-base-link border-base-link',
  info: 'text-base-status border-base-status',
};

const TONE_FILLED_CLASSES: Record<BadgeTone, string> = {
  neutral: 'bg-base-muted text-canvas border-base-muted',
  success: 'bg-base-status text-canvas border-base-status',
  error: 'bg-base-link text-canvas border-base-link',
  info: 'bg-base-status text-canvas border-base-status',
};

export function Badge({
  children,
  tone = 'neutral',
  filled = false,
}: BadgeProps) {
  return (
    <span
      className={[
        'inline-flex items-center rounded-sm border px-1.5 py-0.5 text-xs font-mono leading-none',
        filled ? TONE_FILLED_CLASSES[tone] : TONE_TEXT_CLASSES[tone],
      ].join(' ')}>
      {children}
    </span>
  );
}

export function BadgeDemo() {
  return (
    <>
      <Badge>New</Badge>
      <Badge tone="success" filled>
        Passing
      </Badge>
      <Badge tone="error">Failed</Badge>
      <Badge tone="info">Beta</Badge>
    </>
  );
}

'use client';

import { useId, useState } from 'react';

export interface ToggleProps {
  label: string;
  defaultChecked?: boolean;
  checked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
}

export function Toggle({
  label,
  defaultChecked = false,
  checked,
  onCheckedChange,
  disabled = false,
}: ToggleProps) {
  const [internalChecked, setInternalChecked] = useState(defaultChecked);
  const isControlled = checked !== undefined;
  const isChecked = isControlled ? checked : internalChecked;
  const id = useId();

  function handleClick() {
    if (disabled) return;
    const next = !isChecked;
    if (!isControlled) setInternalChecked(next);
    onCheckedChange?.(next);
  }

  return (
    <label
      htmlFor={id}
      className="inline-flex items-center gap-2 font-mono text-sm text-base-primary select-none">
      <button
        id={id}
        type="button"
        role="switch"
        aria-checked={isChecked}
        disabled={disabled}
        onClick={handleClick}
        className={[
          'relative h-5 w-9 shrink-0 rounded-full border transition-colors',
          'disabled:opacity-50 disabled:cursor-not-allowed',
          isChecked
            ? 'bg-base-link border-base-link'
            : 'bg-base-muted/25 border-base-border',
        ].join(' ')}>
        <span
          aria-hidden="true"
          className={[
            'absolute left-px top-px h-4 w-4 rounded-full bg-canvas transition-transform',
            isChecked ? 'translate-x-[16px]' : 'translate-x-0',
          ].join(' ')}
        />
      </button>
      <span className="leading-none">{label}</span>
    </label>
  );
}

export function ToggleDemo() {
  return (
    <>
      <Toggle label="Enable notifications" defaultChecked />
      <Toggle label="Auto-save drafts" />
      <Toggle label="Legacy sync" defaultChecked disabled />
    </>
  );
}