Display

import { Card, Badge, Alert, Skeleton, EmptyState } from "@azmr/ui/display";

import { Button } from "@azmr/ui/button";
import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@azmr/ui/display";

export default function DisplayCards() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Business plan</CardTitle>
        <CardDescription>
          <Badge variant="success">Active</Badge> Renews on 1 November
        </CardDescription>
      </CardHeader>
      <CardContent className="text-sm">
        Up to 25 users, priority support and audit logs.
      </CardContent>
      <CardFooter className="gap-2">
        <Button size="sm">Manage plan</Button>
        <Button size="sm" variant="ghost">
          View invoices
        </Button>
      </CardFooter>
    </Card>
  );
}

"use client";

import { Chip } from "@azmr/ui/display";
import { useState } from "react";

export default function DisplayChips() {
  const [tags, setTags] = useState(["React", "Accessibility", "Tailwind", "Base UI"]);

  // The Chip does not hide itself: you own the list.
  return (
    <div className="flex flex-wrap gap-2">
      {tags.map((tag) => (
        <Chip
          key={tag}
          variant="secondary"
          onRemove={() => setTags((all) => all.filter((t) => t !== tag))}
        >
          {tag}
        </Chip>
      ))}
      {tags.length === 0 && <span className="text-sm text-muted-foreground">No tags left.</span>}
    </div>
  );
}

"use client";

import { Alert, AlertDescription, AlertTitle } from "@azmr/ui/display";
import { useState } from "react";

export default function DisplayAlerts() {
  const [dismissed, setDismissed] = useState(false);

  return (
    <div className="flex max-w-xl flex-col gap-3">
      <Alert variant="info">
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>Your trial ends in 3 days.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertTitle>Saved</AlertTitle>
        <AlertDescription>Your changes are live.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>Plan renews tomorrow</AlertTitle>
        <AlertDescription>Update your card to avoid an interruption.</AlertDescription>
      </Alert>
      {/* The Alert does not hide itself: you own that state. */}
      {!dismissed && (
        <Alert variant="destructive" onDismiss={() => setDismissed(true)}>
          <AlertTitle>Payment failed</AlertTitle>
          <AlertDescription>We could not charge the card on file.</AlertDescription>
        </Alert>
      )}
    </div>
  );
}

import { Button } from "@azmr/ui/button";
import { Badge, EmptyState, Skeleton } from "@azmr/ui/display";
import { Icon } from "@azmr/ui/icons";
import { Inbox } from "lucide-react";

export default function DisplayPlaceholders() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-wrap gap-2">
        <Badge>Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="info">Info</Badge>
        <Badge variant="success">Success</Badge>
        <Badge variant="warning">Warning</Badge>
        <Badge variant="destructive">Destructive</Badge>
      </div>

      {/* Mark the loading container aria-busy; the skeleton itself is decorative. */}
      <div aria-busy="true" className="flex max-w-xs items-center gap-3">
        <Skeleton className="size-10 rounded-full" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton className="h-3 w-3/4" />
          <Skeleton className="h-3 w-1/2" />
        </div>
      </div>

      <EmptyState
        icon={<Icon icon={Inbox} size="xl" />}
        title="No messages yet"
        description="When customers write to you, their messages will appear here."
        action={<Button size="sm">Compose a message</Button>}
      />
    </div>
  );
}