Tabs

Cần chuyển đổi view?
├─ Cùng page, nội dung parallel → Tabs
├─ Khác page (URL change) → Navigation
├─ 2–3 options, inline compact → Segmented Control
├─ Show/hide sections → Accordion
└─ Sequential steps → Stepper / Wizard

interface TabsProps {
  /** Active tab value */
  value?: string;
  /** Default active tab (uncontrolled) */
  defaultValue?: string;
  /** Visual variant — default: 'primary' */
  variant?: 'primary' | 'secondary' | 'enclosed' | 'segment';
  /** Size */
  size?: 'sm' | 'md' | 'lg';
  /** Orientation */
  orientation?: 'horizontal' | 'vertical';
  /** Full width (tabs stretch) */
  fullWidth?: boolean;
  /**
   * Icon position relative to label.
   * Auto-resolved from variant if omitted:
   *   primary → 'stacked' (icon above label)
   *   secondary/enclosed/segment → 'inline' (icon left of label)
   */
  iconPosition?: 'stacked' | 'inline';
  /** onChange callback */
  onChange?: (value: string) => void;
  children: ReactNode;
}

interface TabProps {
  /** Unique value identifier */
  value: string;
  /** Label */
  label: string;
  /** Icon */
  icon?: ReactNode;
  /** Badge / counter */
  badge?: string | number;
  /** Disabled */
  disabled?: boolean;
  /** Closable */
  closable?: boolean;
}

interface TabPanelProps {
  /** Matching value from Tab */
  value: string;
  children: ReactNode;
}

{/* ✅ M3 Primary tabs (default) — stacked icons */}
<Tabs defaultValue="overview" variant="primary">
  <TabList>
    <Tab value="overview" label="Tổng quan" icon={<LayoutDashboard />} />
    <Tab value="transactions" label="Giao dịch" icon={<ArrowLeftRight />} badge={5} />
    <Tab value="settings" label="Cài đặt" icon={<Settings />} />
  </TabList>
  <TabPanel value="overview">Nội dung tổng quan...</TabPanel>
  <TabPanel value="transactions">Danh sách giao dịch...</TabPanel>
  <TabPanel value="settings">Cài đặt tài khoản...</TabPanel>
</Tabs>

{/* ✅ M3 Secondary tabs — inline icons, sub-level content */}
<Tabs defaultValue="all" variant="secondary">
  <TabList>
    <Tab value="all" label="Tất cả" />
    <Tab value="income" label="Thu nhập" />
    <Tab value="expense" label="Chi tiêu" />
  </TabList>
</Tabs>

{/* ✅ Segment tabs (iOS Segmented Control) */}
<Tabs variant="segment" size="sm" fullWidth>
  <TabList>
    <Tab value="day" label="Ngày" />
    <Tab value="week" label="Tuần" />
    <Tab value="month" label="Tháng" />
  </TabList>
</Tabs>

{/* ✅ Enclosed tabs */}
<Tabs variant="enclosed">
  <TabList>
    <Tab value="code" label="Code" />
    <Tab value="preview" label="Preview" />
  </TabList>
</Tabs>