Tabs

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="overview" tone="primary" variant="default">
      <TabsList ariaLabel="Student tabs">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="notes">Notes</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>

      <TabsPanel value="overview">Overview content…</TabsPanel>
      <TabsPanel value="notes">Notes content…</TabsPanel>
      <TabsPanel value="documents">Documents content…</TabsPanel>
      <TabsPanel value="settings">Settings content…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="week" variant="default" justify="stretch" tone="neutral">
      <TabsList ariaLabel="Time range tabs">
        <TabsTrigger value="day">Day</TabsTrigger>
        <TabsTrigger value="week">Week</TabsTrigger>
        <TabsTrigger value="month">Month</TabsTrigger>
        <TabsTrigger value="quarter">Quarter</TabsTrigger>
      </TabsList>

      <TabsPanel value="day">Day view…</TabsPanel>
      <TabsPanel value="week">Week view…</TabsPanel>
      <TabsPanel value="month">Month view…</TabsPanel>
      <TabsPanel value="quarter">Quarter view…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="active" variant="pills" tone="primary">
      <TabsList ariaLabel="Status tabs">
        <TabsTrigger value="active">Active</TabsTrigger>
        <TabsTrigger value="paused">Paused</TabsTrigger>
        <TabsTrigger value="archived">Archived</TabsTrigger>
      </TabsList>

      <TabsPanel value="active">Active…</TabsPanel>
      <TabsPanel value="paused">Paused…</TabsPanel>
      <TabsPanel value="archived">Archived…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="all" variant="segmented" tone="neutral" size="sm">
      <TabsList ariaLabel="Filters">
        <TabsTrigger value="all">All</TabsTrigger>
        <TabsTrigger value="mine">Mine</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
      </TabsList>

      <TabsPanel value="all">All results…</TabsPanel>
      <TabsPanel value="mine">My results…</TabsPanel>
      <TabsPanel value="team">Team results…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="profile" variant="nav" orientation="vertical" tone="primary">
      <TabsList ariaLabel="Student navigation">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="plan">Therapy plan</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
        <TabsTrigger value="audit">Audit log</TabsTrigger>
      </TabsList>

      <TabsPanel value="profile">Profile…</TabsPanel>
      <TabsPanel value="plan">Plan…</TabsPanel>
      <TabsPanel value="billing">Billing…</TabsPanel>
      <TabsPanel value="audit">Audit…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="summary" variant="card" tone="neutral">
      <TabsList ariaLabel="Report tabs">
        <TabsTrigger value="summary">Summary</TabsTrigger>
        <TabsTrigger value="goals">Goals</TabsTrigger>
        <TabsTrigger value="sessions">Sessions</TabsTrigger>
      </TabsList>

      <TabsPanel value="summary">Summary…</TabsPanel>
      <TabsPanel value="goals">Goals…</TabsPanel>
      <TabsPanel value="sessions">Sessions…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="tab-1" variant="default" tone="neutral">
      <TabsList ariaLabel="Scrollable tabs" scrollable showArrows>
        <TabsTrigger value="tab-1">Overview</TabsTrigger>
        <TabsTrigger value="tab-2">Notes</TabsTrigger>
        <TabsTrigger value="tab-3">Documents</TabsTrigger>
        <TabsTrigger value="tab-4">Billing</TabsTrigger>
        <TabsTrigger value="tab-5">Sessions</TabsTrigger>
        <TabsTrigger value="tab-6">Progress</TabsTrigger>
        <TabsTrigger value="tab-7">Exports</TabsTrigger>
        <TabsTrigger value="tab-8">Audit</TabsTrigger>
      </TabsList>

      <TabsPanel value="tab-1">Overview…</TabsPanel>
      <TabsPanel value="tab-2">Notes…</TabsPanel>
      <TabsPanel value="tab-3">Documents…</TabsPanel>
      <TabsPanel value="tab-4">Billing…</TabsPanel>
      <TabsPanel value="tab-5">Sessions…</TabsPanel>
      <TabsPanel value="tab-6">Progress…</TabsPanel>
      <TabsPanel value="tab-7">Exports…</TabsPanel>
      <TabsPanel value="tab-8">Audit…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="profile" variant="hover" tone="primary">
      <TabsList ariaLabel="Profile tabs">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="plan">Plan</TabsTrigger>
        <TabsTrigger value="docs">Docs</TabsTrigger>
      </TabsList>

      <TabsPanel value="profile">Profile…</TabsPanel>
      <TabsPanel value="plan">Plan…</TabsPanel>
      <TabsPanel value="docs">Docs…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="claims" variant="topline" tone="warning">
      <TabsList ariaLabel="Billing tabs">
        <TabsTrigger value="claims">Claims</TabsTrigger>
        <TabsTrigger value="auths">Authorizations</TabsTrigger>
        <TabsTrigger value="invoices">Invoices</TabsTrigger>
      </TabsList>

      <TabsPanel value="claims">Claims…</TabsPanel>
      <TabsPanel value="auths">Authorizations…</TabsPanel>
      <TabsPanel value="invoices">Invoices…</TabsPanel>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/design-system/components/Tabs";

export function Example() {
  return (
    <Tabs defaultValue="open" variant="colored" tone="success">
      <TabsList ariaLabel="Work queue">
        <TabsTrigger value="open">Open</TabsTrigger>
        <TabsTrigger value="review">Needs review</TabsTrigger>
        <TabsTrigger value="done">Completed</TabsTrigger>
      </TabsList>

      <TabsPanel value="open">Open queue…</TabsPanel>
      <TabsPanel value="review">Review queue…</TabsPanel>
      <TabsPanel value="done">Completed…</TabsPanel>
    </Tabs>
  );
}