// Clases disponibles
<div className="glass-surface">...</div>   // Superficie amplia (Nivel 1)
<div className="glass-card">...</div>      // Tarjeta principal (Nivel 2)
<div className="glass-elevated">...</div>  // Elevación fuerte (Nivel 3)
<div className="glass-solid">...</div>     // Casi opaco (Nivel 4)

import '@asemh/design-system/tokens.css';

import { theme, useStore } from '@asemh/design-system';

function ThemeButton() {
  const $theme = useStore(theme);
  
  return (
    <button onClick={() => theme.set($theme === 'dark' ? 'light' : 'dark')}>
      Tema actual: {$theme}
    </button>
  );
}

// O establece un tema específico
theme.set('dark');

import { toast, Toaster } from '@asemh/design-system';

// En tu layout
function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster client:load />
    </>
  );
}

// En cualquier componente
function SaveButton() {
  const handleSave = () => {
    toast.success('Guardado exitosamente');
    // toast.error('Error al guardar');
    // toast.info('Información');
    // toast.warning('Advertencia');
  };
  
  return <Button onClick={handleSave}>Guardar</Button>;
}

import { 
  Card, CardHeader, CardTitle, CardContent,
  Badge, Progress 
} from '@asemh/design-system';

function KPICard({ title, value, target, trend }) {
  const percentage = (value / target) * 100;
  
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-baseline justify-between">
          <span className="text-2xl font-bold">{value}</span>
          <Badge variant={trend > 0 ? 'success' : 'destructive'}>
            {trend > 0 ? '+' : ''}{trend}%
          </Badge>
        </div>
        <Progress value={percentage} className="mt-3" />
        <p className="text-xs text-muted-foreground mt-1">
          {percentage.toFixed(0)}% del objetivo
        </p>
      </CardContent>
    </Card>
  );
}

import { 
  Card, CardHeader, CardTitle, CardContent, CardFooter,
  Input, Label, Textarea, Button, toast
} from '@asemh/design-system';

function ContactForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    toast.success('Mensaje enviado correctamente');
  };

  return (
    <Card className="max-w-md">
      <form onSubmit={handleSubmit}>
        <CardHeader>
          <CardTitle>Contáctanos</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Nombre</Label>
            <Input id="name" placeholder="Tu nombre" required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="tu@email.com" required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="message">Mensaje</Label>
            <Textarea id="message" placeholder="Escribe tu mensaje..." rows={4} />
          </div>
        </CardContent>
        <CardFooter>
          <Button type="submit" className="w-full">
            Enviar mensaje
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}