import { Button } from "@raxrai/stylelab-ui";

<S.Button variant="primary">Primary</S.Button>
<S.Button variant="secondary">Secondary</S.Button>
<S.Button variant="ghost">Ghost</S.Button>
<S.Button loading>Loading</S.Button>

import { Input } from "@raxrai/stylelab-ui";

<S.Input placeholder="Text input" />
<S.Input type="password" placeholder="Password" />

import { Toggle } from "@raxrai/stylelab-ui";

<Toggle defaultChecked={false} aria-label="Toggle" />
<Toggle defaultChecked onCheckedChange={(checked) => console.log(checked)} />

import { Badge } from "@raxrai/stylelab-ui";

<S.Badge>Default</Badge>
<S.Badge>New</Badge>

import { Slider } from "@raxrai/stylelab-ui";

<Slider defaultValue={60} onValueChange={(v) => setValue(v)} />
<Slider min={0} max={100} step={10} value={value} />

import { Skeleton } from "@raxrai/stylelab-ui";

<Skeleton variant="rectangle" className="h-12 w-32" />
<Skeleton variant="circle" className="size-12" />
<Skeleton variant="text" />

import { Avatar, AvatarGroup } from "@raxrai/stylelab-ui";

<S.Avatar fallback="JD" />
<S.AvatarGroup max={4}>
  <S.Avatar fallback="A" />
  <S.Avatar fallback="B" />
</AvatarGroup>

import { Tabs } from "@raxrai/stylelab-ui";

<Tabs items={[{ label: "Tab 1", value: "1", content: <p>Content</p> }, ...]} />

import { Card } from "@raxrai/stylelab-ui";

<S.Card>
  <p className="font-medium">Title</p>
  <p className="mt-2 text-sm opacity-80">Card content here.</p>
</Card>

import { Accordion } from "@raxrai/stylelab-ui";

<S.Accordion
  items={[
    { id: "1", title: "Section one", content: <p>Content here.</p> },
    { id: "2", title: "Section two", content: <p>More content.</p> },
  ]}
  allowMultiple={false}
/>

import { Alert } from "@raxrai/stylelab-ui";

<S.Alert intent="info" title="Info">Message.</Alert>
<S.Alert intent="danger">Error text.</Alert>

import { Breadcrumbs } from "@raxrai/stylelab-ui";

<Breadcrumbs items={[
  { label: "Home", href: "/" },
  { label: "Current" },
]} />

import { Tooltip } from "@raxrai/stylelab-ui";

<Tooltip content="Help text">
  <button>Hover me</button>
</Tooltip>

import { Dropdown, Button } from "@raxrai/stylelab-ui";

<S.Dropdown
  trigger={<S.Button>Open</S.Button>}
  items={[{ value: "1", label: "One" }, ...]}
  onValueChange={setValue}
/>

import { ProgressBar } from "@raxrai/stylelab-ui";

<ProgressBar value={70} max={100} />
<ProgressBar value={40} segmented />

import { BentoGrid, Card } from "@raxrai/stylelab-ui";

<S.BentoGrid>
  <S.Card>Bento 1</S.Card>
  <S.Card>Bento 2</S.Card>
  <S.Card>Bento 3</S.Card>
</BentoGrid>

import { Navbar } from "@raxrai/stylelab-ui";

<S.Navbar>
  <span className="font-semibold">App name</span>
  <nav className="flex gap-4">...</nav>
</Navbar>

import { Sidebar } from "@raxrai/stylelab-ui";

<S.Sidebar>
  <a href="/">Nav item</a>
  <a href="/settings">Settings</a>
</Sidebar>

import { SectionHeader } from "@raxrai/stylelab-ui";

<SectionHeader title="Section title" subtitle="Optional subtitle." />

import { GraphicCard } from "@raxrai/stylelab-ui";

<GraphicCard>
  <p className="text-sm font-semibold">Title</p>
  <p className="mt-1 text-xs text-zinc-600">
    Supporting copy here.
  </p>
</GraphicCard>

import { Flashcard } from "@raxrai/stylelab-ui";

<Flashcard
  question="What is the capital of France?"
  answer="Paris"
/>

import { DocumentAccordion } from "@raxrai/stylelab-ui";

<DocumentAccordion
  title="Syllabus"
  content="Paste long-form text here."
/>

<DocumentAccordion
  title="Syllabus (PDF)"
  pdfUrl="https://example.com/syllabus.pdf"
/>

import { Modal, Button } from "@raxrai/stylelab-ui";

const [open, setOpen] = useState(false);
<S.Button onClick={() => setOpen(true)}>Open</S.Button>
<S.Modal open={open} onClose={() => setOpen(false)} title="Title">
  <p>Modal content.</p>
</Modal>

import { Toast } from "@raxrai/stylelab-ui";

<S.Toast message="Saved!" onDismiss={() => setVisible(false)} />

import { CommandPalette } from "@raxrai/stylelab-ui";

const [open, setOpen] = useState(false);
<S.CommandPalette
  open={open}
  onClose={() => setOpen(false)}
  commands={[
    { id: "1", label: "Go to Home", onSelect: () => {} },
    { id: "2", label: "Search", shortcut: "/", onSelect: () => {} },
  ]}
/>

import { DataTable } from "@raxrai/stylelab-ui";

<S.DataTable
  columns={[
    { key: "name", header: "Name" },
    { key: "role", header: "Role", render: (row) => row.role },
  ]}
  data={[{ name: "Alice", role: "Engineer" }]}
/>

import { PricingCard } from "@raxrai/stylelab-ui";

<PricingCard
  tier={{
    name: "Pro",
    price: "$29/mo",
    features: ["Feature A", "Feature B"],
    cta: "Get started",
    highlighted: true,
  }}
  onSelect={() => {}}
/>

import { Terminal } from "@raxrai/stylelab-ui";

<Terminal title="terminal">
  <p>$ npm run dev</p>
  <p>Ready on http://localhost:3000</p>
</Terminal>

import { StatsCard } from "@raxrai/stylelab-ui";

<StatsCard label="Revenue" value="$12,345" trend={{ direction: "up", value: "+12%" }} />
<StatsCard label="Users" value="2,431" />

import { Calendar } from "@raxrai/stylelab-ui";

<Calendar value={date} onSelect={setDate} />
<Calendar min={new Date()} max={...} />

import { Timeline } from "@raxrai/stylelab-ui";

<Timeline items={[
  { title: "Event", time: "Now", description: "Details" },
]} />