@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/ai/docs/Switch.md

@@ -0,0 +1,167 @@
+---
+title: Switch
+description: Toggle switch for switching between two mutually exclusive states such as On/Off.
+package: "@g4rcez/components"
+export: "{ Switch }"
+import: "import { Switch } from '@g4rcez/components/switch'"
+category: form
+---
+
+# Switch
+
+Toggle switch for switching between two mutually exclusive states such as On/Off.
+
+## Import
+
+```tsx
+import { Switch } from "@g4rcez/components/switch";
+```
+
+## Props
+
+Inherits all standard HTML `input[type="checkbox"]` attributes, plus:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | — | Label text or element displayed next to the switch. |
+| `onCheck` | `(nextValue: boolean) => void` | — | Called with the new boolean value after toggling. |
+| `error` | `string` | — | Error message displayed below the switch. |
+| `loading` | `boolean` | `false` | Disables the switch and signals a pending operation. |
+| `container` | `string` | — | Additional CSS classes for the outer `<fieldset>`. |
+
+## Design Tokens
+
+Tokens this component reads. Customize by overriding these CSS variables in your theme.
+
+| Token | CSS Variable | Purpose |
+|-------|-------------|---------|
+| `bg-input-switch-bg` | `--input-switch-bg` | Track background when unchecked |
+| `bg-primary` | `--primary` | Track background when checked |
+| `bg-disabled` | `--disabled` | Thumb fill when unchecked |
+| `bg-input-switch` | `--input-switch` | Thumb fill when checked |
+| `focus:ring-primary` | `--primary` | Focus ring on the toggle button |
+| `text-danger` | `--danger` | Error message color |
+| `text-foreground` | `--foreground` | Label text color |
+
+## Themes
+
+The switch appearance is driven entirely by design tokens. Override them in your `@theme` block to change the checked/unchecked colors across the application.
+
+## Examples
+
+### Basic toggle
+
+```tsx
+import { Switch } from "@g4rcez/components/switch";
+
+export default function NotificationsToggle() {
+  return (
+    <Switch defaultChecked onChange={(e) => console.log(e.target.checked)}>
+      Enable notifications
+    </Switch>
+  );
+}
+```
+
+### Controlled switch
+
+```tsx
+import { useState } from "react";
+import { Switch } from "@g4rcez/components/switch";
+
+export default function DarkModeToggle() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Switch checked={enabled} onCheck={setEnabled}>
+      Dark mode
+    </Switch>
+  );
+}
+```
+
+### With loading state
+
+```tsx
+import { Switch } from "@g4rcez/components/switch";
+
+export default function SyncSwitch() {
+  return (
+    <Switch loading>
+      Syncing data…
+    </Switch>
+  );
+}
+```
+
+### With error message
+
+```tsx
+import { Switch } from "@g4rcez/components/switch";
+
+export default function TermsSwitch() {
+  return (
+    <Switch error="You must accept the terms to continue">
+      Accept terms and conditions
+    </Switch>
+  );
+}
+```
+
+### In a settings form
+
+```tsx
+import { Switch } from "@g4rcez/components/switch";
+
+export default function PrivacySettings() {
+  return (
+    <div className="flex flex-col gap-base">
+      <Switch defaultChecked onCheck={(v) => updateSetting("emails", v)}>
+        Receive marketing emails
+      </Switch>
+      <Switch onCheck={(v) => updateSetting("analytics", v)}>
+        Share analytics data
+      </Switch>
+      <Switch defaultChecked onCheck={(v) => updateSetting("notifications", v)}>
+        Push notifications
+      </Switch>
+    </div>
+  );
+}
+```
+
+## Do
+
+- Use `Switch` for actions that take effect immediately without a "Save" button.
+- Provide a clear, descriptive label via `children`.
+- Use `onCheck` when you only need the new boolean value — it avoids parsing `e.target.checked`.
+- Use design-token classes on wrapper elements (`bg-background`, `text-foreground`).
+
+## Don't
+
+- Don't use `Switch` for selecting multiple items from a list — use `Checkbox` or `MultiSelect`.
+- Don't use `Switch` when the action involves a long or complex process without additional loading feedback.
+- Don't pass raw Tailwind color classes (`bg-green-500`, `border-gray-300`) — use design tokens instead.
+- Don't use arbitrary Tailwind values (`bg-[#abc]`) — override CSS variables in your `@theme` block instead.
+
+## Accessibility
+
+- A hidden `<input type="checkbox">` ensures correct native form submission and value reading.
+- The visual toggle is a `<button role="switch">` with `aria-checked` reflecting the current state.
+- `aria-labelledby` links the button to the rendered label element.
+- Space and Enter toggle the switch via the button's `onClick` handler.
+- When `loading` or `disabled` is true, both the hidden input and the button receive `disabled`, preventing interaction.
+
+## Data Attributes
+
+| Attribute | Element | Value | Description |
+|-----------|---------|-------|-------------|
+| `data-component` | `fieldset` | `"switch"` | Identifies the component. |
+| `data-checked` | `input`, `button`, thumb `span` | `"true" \| "false"` | Reflects the checked state for CSS targeting. |
+| `data-trigger` | `input` | `"change"` | Used internally to track the synthetic change event. |
+
+## Notes
+
+- The component manages its own `innerChecked` state and re-syncs when `props.checked` changes, supporting both controlled and semi-controlled usage patterns.
+- A synthetic `change` event is dispatched on the hidden input after toggling, so external form libraries that listen to native events will pick up the change.
+- Smooth track and thumb transitions use `duration-300 ease-in-out`.

package/dist/ai/docs/Table.md

@@ -0,0 +1,298 @@
+---
+title: Table
+description: Virtualized, sortable, filterable data table with column reordering, grouping, and pagination.
+package: "@g4rcez/components"
+export: "{ Table, createColumns, useTablePreferences, ColType }"
+import: "import { Table, createColumns, useTablePreferences, ColType } from '@g4rcez/components/table'"
+category: table
+---
+
+# Table
+
+Virtualized, sortable, filterable data table with column reordering, grouping, and pagination.
+
+## Import
+
+```tsx
+import { Table, createColumns, useTablePreferences, ColType } from "@g4rcez/components/table";
+```
+
+## Props
+
+### Table
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | Unique identifier used to persist user preferences in `localStorage`. |
+| `cols` | `Col<T>[]` | — | Column definitions produced by `createColumns`. |
+| `rows` | `T[]` | — | Data array to render. Each element maps to a table row. |
+| `loading` | `boolean` | `false` | Replaces rows with animated skeleton cells while data loads. |
+| `loadingMore` | `boolean` | `false` | Shows a pulse footer bar for infinite-scroll loading indicators. |
+| `operations` | `boolean` | `true` | Toggles the metadata bar (bulk filter, sort, group controls). |
+| `inlineFilter` | `boolean` | `true` | Enables per-column filter dropdowns in the header row. |
+| `inlineSorter` | `boolean` | `true` | Enables per-column sort toggles in the header row. |
+| `sticky` | `number \| null` | — | `top` offset in px for the sticky header. Pass `null` to disable stickiness. |
+| `Aside` | `React.FC<CellAsideElement<T>>` | — | Component rendered before the first cell in every row (e.g., row-level actions). |
+| `pagination` | `TablePagination` | — | Pagination configuration. When provided, a footer with page controls is shown. |
+| `reference` | `keyof T` | — | Field used as the stable row key. |
+| `useControl` | `boolean` | `false` | When `true`, disables internal filtering/sorting so you can drive it externally. |
+| `onScrollEnd` | `() => void` | — | Called when the user scrolls to the last row (infinite scroll trigger). |
+| `getScrollRef` | `() => HTMLElement \| undefined` | — | Returns a custom scroll container instead of `window`. |
+| `getRowProps` | `(row: T) => ComponentProps<"tr">` | — | Merge arbitrary `<tr>` props (e.g., `onClick`, `className`) per row. |
+| `set` | `(v: TableGetters<T>) => void` | — | External callback invoked whenever internal table state changes. |
+
+### createColumns
+
+```tsx
+createColumns<T>((c) => {
+  c.add(id, thead, options?)
+  c.remove(id)
+  c.filter(predicate)
+  c.getAll()
+})
+```
+
+| Builder method | Signature | Description |
+|----------------|-----------|-------------|
+| `add` | `(id: AllPaths<T>, thead: ReactNode, options?: ColOptions<T, K>) => void` | Registers a column. |
+| `remove` | `(id: AllPaths<T>) => void` | Removes a column by id. |
+| `filter` | `(c: (col: Col<T>) => boolean) => Col<T>[]` | Filters the column list in-place. |
+| `getAll` | `() => Col<T>[]` | Returns a copy of all registered columns. |
+
+### ColOptions
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `type` | `ColType` | `ColType.Text` | Data type (`Text`, `Number`, `Boolean`, `Select`). Affects filter operators. |
+| `allowSort` | `boolean` | `true` | Whether this column can be sorted. |
+| `allowFilter` | `boolean` | `true` | Whether this column shows a filter control. |
+| `headerLabel` | `string` | — | Overrides the column header text used in the filter/sort metadata bar. |
+| `Element` | `React.FC<CellPropsElement<T, K>>` | — | Custom cell renderer. Receives `{ row, value, rowIndex, matrix, col }`. |
+| `thProps` | `HTMLAttributes<HTMLTableCellElement>` | — | Extra props forwarded to the `<th>` element. |
+| `cellProps` | `HTMLAttributes<HTMLTableCellElement>` | — | Extra props forwarded to each `<td>` element. |
+
+### TablePagination
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `size` | `number` | Current page size. |
+| `pages` | `number` | Total number of pages. |
+| `current` | `number` | Current page index (1-based). |
+| `hasNext` | `boolean` | Whether a next page exists. |
+| `hasPrevious` | `boolean` | Whether a previous page exists. |
+| `totalItems` | `number` | Total row count across all pages. |
+| `sizes` | `number[]` | Optional list of selectable page sizes. |
+| `onChangeSize` | `(size: number) => void` | Called when the user selects a different page size. |
+| `asLink` | `React.FC<{ href: number \| "previous" \| "next"; className: string }>` | Polymorphic page button — supply a router `Link` for deep-linkable pages. |
+
+### useTablePreferences
+
+Persists column order, active filters, sorters, and groups in `localStorage` keyed by `name`.
+
+```tsx
+const prefs = useTablePreferences("users-table", columns, options?);
+// Spread into <Table {...prefs} rows={data} />
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `name` | `string` | Storage key (`@components/table-{name}`). |
+| `cols` | `Col<T>[]` | Initial column definitions. |
+| `options` | `Partial<TableGetters<T>>` | Optional initial state overrides for filters, sorters, groups, pagination. |
+
+## Design Tokens
+
+Tokens this component reads. Customize by overriding these CSS variables in your theme.
+
+| Token | CSS Variable | Purpose |
+|-------|-------------|---------|
+| `bg-table-header` | `--table-header` | Column header background |
+| `bg-table-background` | `--table-background` | Table body background |
+| `border-table-border` | `--table-border` | Column separator and row divider color |
+| `shadow-shadow-table` | `--shadow-table` | Table card shadow |
+| `bg-card-background` | `--card-background` | Footer and loading-more bar background |
+| `text-foreground` | `--foreground` | Default cell text color |
+| `text-primary` | `--primary` | Active filter / sort accent color |
+| `bg-muted` | `--muted` | Hover background for metadata bar items |
+
+The `--table-cell-padding` CSS variable controls cell padding (default `0.75rem`). Override it via `className` on `<Table>`.
+
+## Column Types
+
+| `ColType` | Enum value | Filter operators available |
+|-----------|-----------|---------------------------|
+| `ColType.Text` | `"text"` | contains, equals, starts with, ends with |
+| `ColType.Number` | `"number"` | =, ≠, >, <, ≥, ≤ |
+| `ColType.Boolean` | `"boolean"` | is true, is false |
+| `ColType.Select` | `"select"` | equals |
+
+## Examples
+
+### Basic table
+
+```tsx
+import { Table, createColumns } from "@g4rcez/components/table";
+
+type User = { id: string; name: string; email: string };
+
+const columns = createColumns<User>((c) => {
+  c.add("id", "ID");
+  c.add("name", "Name");
+  c.add("email", "Email");
+});
+
+export function UsersTable({ users }: { users: User[] }) {
+  return (
+    <Table
+      name="users"
+      cols={columns}
+      rows={users}
+    />
+  );
+}
+```
+
+### Custom cell renderer
+
+```tsx
+import { Table, createColumns, ColType } from "@g4rcez/components/table";
+import { Tag } from "@g4rcez/components/tag";
+
+type Product = { sku: string; name: string; price: number; active: boolean };
+
+const columns = createColumns<Product>((c) => {
+  c.add("sku", "SKU");
+  c.add("name", "Product Name", { allowFilter: true, allowSort: true });
+  c.add("price", "Price", {
+    type: ColType.Number,
+    Element: ({ value }) => (
+      <span className="font-mono tabular-nums">
+        {value.toLocaleString("en-US", { style: "currency", currency: "USD" })}
+      </span>
+    ),
+  });
+  c.add("active", "Status", {
+    type: ColType.Boolean,
+    Element: ({ value }) => (
+      <Tag theme={value ? "success" : "neutral"} size="small">
+        {value ? "Active" : "Inactive"}
+      </Tag>
+    ),
+  });
+});
+```
+
+### Persisted preferences
+
+```tsx
+import { Table, createColumns, useTablePreferences } from "@g4rcez/components/table";
+
+const baseColumns = createColumns<Order>((c) => {
+  c.add("id", "Order ID");
+  c.add("status", "Status");
+  c.add("total", "Total");
+});
+
+export function OrdersTable({ orders }: { orders: Order[] }) {
+  const prefs = useTablePreferences("orders-table", baseColumns);
+  return <Table {...prefs} rows={orders} />;
+}
+```
+
+### Server-side pagination
+
+```tsx
+<Table
+  name="invoices"
+  cols={columns}
+  rows={pageData}
+  useControl
+  pagination={{
+    current: page,
+    pages: totalPages,
+    size: pageSize,
+    totalItems: totalCount,
+    hasNext: page < totalPages,
+    hasPrevious: page > 1,
+    sizes: [10, 25, 50],
+    onChangeSize: setPageSize,
+    asLink: ({ href, className, children }) => (
+      <a href={`?page=${href}`} className={className}>{children}</a>
+    ),
+  }}
+/>
+```
+
+### Row-level actions with Aside
+
+```tsx
+import { TrashIcon, PencilIcon } from "lucide-react";
+
+<Table
+  name="contacts"
+  cols={columns}
+  rows={contacts}
+  Aside={({ row }) => (
+    <div className="flex gap-1">
+      <button onClick={() => edit(row)} aria-label="Edit">
+        <PencilIcon size={14} />
+      </button>
+      <button onClick={() => remove(row)} aria-label="Delete" className="hover:text-danger">
+        <TrashIcon size={14} />
+      </button>
+    </div>
+  )}
+/>
+```
+
+### Infinite scroll
+
+```tsx
+<Table
+  name="feed"
+  cols={columns}
+  rows={items}
+  loadingMore={isFetchingNextPage}
+  onScrollEnd={fetchNextPage}
+/>
+```
+
+## Do
+
+- Provide a unique `name` to ensure each table has its own isolated `localStorage` slot.
+- Use `createColumns` for full TypeScript path inference on deeply nested fields.
+- Supply a custom `Element` for cells that need formatting, interactive controls, or icons.
+- Use `useTablePreferences` when users should be able to persist their column arrangement across sessions.
+- Pass `useControl={true}` and manage data externally when filtering/sorting must happen server-side.
+- Use design-token classes for wrapper elements (`bg-table-header`, `bg-table-background`, `border-table-border`).
+
+## Don't
+
+- Don't pass raw Tailwind color classes (`bg-blue-500`, `text-white`, `border-gray-300`) — use design tokens instead.
+- Don't use arbitrary Tailwind values (`bg-[#abc]`, `bg-[--my-var]`) — override CSS variables in your `@theme` block instead.
+- Don't render `<Table>` without a `name` — preferences and DOM ids rely on it.
+- Don't put heavy rendering logic directly inside `rows` array transformation; use `Element` cells instead so virtualization can skip off-screen rows.
+- Don't use `Table` for single-row or trivial datasets — a plain list or card layout is more appropriate.
+
+## Accessibility
+
+- Renders `role="table"`, `role="rowgroup"`, `role="row"`, and `role="columnheader"` for screen-reader semantics.
+- Sort state is exposed via `aria-sort="ascending | descending | none"` on each `<th>`.
+- Column headers are keyboard-accessible drag targets; column resizing also supports `ArrowLeft`/`ArrowRight` keys (hold `Shift` for larger steps; double-click resets to auto width).
+- `aria-busy` on column headers signals loading state to assistive technologies.
+- Empty state renders the `Empty` component with a visible placeholder instead of an empty table body.
+- Virtualization uses `react-virtuoso` with `useWindowScroll` so native keyboard scrolling and focus management continue to work.
+
+## Data Attributes
+
+- `data-tableheader="{colId}"` — present on every `<th>`, used by the column-resizing logic to update `style.width`.
+- `data-resized="true"` — set on a `<th>` after the user manually resizes that column.
+- `data-type="resizer"` — identifies the drag handle element within each header cell.
+
+## Notes
+
+- Column reordering uses `motion/react`'s `Reorder.Group` / `Reorder.Item`, so columns animate smoothly to their new positions.
+- Internal filtering uses `linq-arrays`. Numeric filters operate on `Number.isNaN`-safe values; empty string filters are skipped.
+- `useTablePreferences` merges saved columns back against the current definition so new columns added in code always appear, even if a user has a stale snapshot in storage.
+- The `--table-cell-padding` variable can be set per breakpoint by adding it directly to `className`: `className="[--table-cell-padding:0.5rem] @md:[--table-cell-padding:1rem]"`.
+- Pass `getScrollRef={getModalScrollerRef}` (exported from the same subpath) when embedding a `Table` inside a `Modal` to fix virtualization scroll detection.

package/dist/ai/docs/Tabs.md

@@ -0,0 +1,191 @@
+---
+title: Tabs
+description: Keyboard-accessible tab container for organizing content into switchable panels.
+package: "@g4rcez/components"
+export: "{ Tabs }"
+import: "import { Tabs, Tab } from '@g4rcez/components/tabs'"
+category: display
+---
+
+# Tabs
+
+Keyboard-accessible tab container for organizing content into switchable panels.
+
+## Import
+
+```tsx
+import { Tabs, Tab } from "@g4rcez/components/tabs";
+```
+
+## Props
+
+### Tabs (Container)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `active` | `string` | — | ID of the currently active tab |
+| `onChange` | `(id: string) => void` | — | Called when the active tab changes |
+| `container` | `string` | — | Additional classes for the outer card container |
+| `className` | `string` | — | Additional classes for the card body (content area) |
+| `children` | `Tab[]` | — | `Tab` panel components |
+
+### Tab (Panel)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | — | Unique identifier; matched against `Tabs.active` |
+| `title` | `string` | — | Tab button label (use when label is a plain string) |
+| `label` | `string` | — | Accessible label when `title` is a non-string React element |
+| `disabled` | `boolean` | `false` | Disables the tab button and skips it during keyboard navigation |
+| `children` | `React.ReactNode` | — | Panel content rendered when this tab is active |
+
+## Design Tokens
+
+Tokens this component reads. Customize by overriding these CSS variables in your theme.
+
+| Token | CSS Variable | Purpose |
+|-------|-------------|---------|
+| `bg-card-background` | `--card-background` | Tab panel surface |
+| `border-card-border` | `--card-border` | Tab bar bottom line and card border |
+| `border-primary` | `--primary` | Active tab bottom indicator |
+| `text-primary` | `--primary` | Active tab text color |
+| `text-disabled` | `--disabled` | Disabled tab text |
+
+## Examples
+
+### Basic Tabs
+
+```tsx
+const [active, setActive] = useState("overview");
+
+<Tabs active={active} onChange={setActive}>
+  <Tab id="overview" title="Overview">
+    <h3>Project Overview</h3>
+    <p>This is the overview of your project.</p>
+  </Tab>
+
+  <Tab id="details" title="Details">
+    <h3>Project Details</h3>
+    <p>Detailed information about your project.</p>
+  </Tab>
+
+  <Tab id="settings" title="Settings">
+    <h3>Project Settings</h3>
+    <p>Configure your project settings here.</p>
+  </Tab>
+</Tabs>
+```
+
+### Tabs with Disabled State
+
+```tsx
+<Tabs active={activeTab} onChange={setActiveTab}>
+  <Tab id="available" title="Available">
+    <p>This tab is available.</p>
+  </Tab>
+
+  <Tab id="locked" title="Locked" disabled>
+    <p>This content is not accessible yet.</p>
+  </Tab>
+
+  <Tab id="also-available" title="Also Available">
+    <p>This tab is also available.</p>
+  </Tab>
+</Tabs>
+```
+
+### Settings Panel
+
+```tsx
+<Tabs active={activeTab} onChange={setActiveTab}>
+  <Tab id="general" title="General">
+    <GeneralSettings />
+  </Tab>
+  <Tab id="privacy" title="Privacy">
+    <PrivacySettings />
+  </Tab>
+  <Tab id="notifications" title="Notifications">
+    <NotificationSettings />
+  </Tab>
+</Tabs>
+```
+
+### Dynamic Tabs
+
+```tsx
+function DynamicTabs() {
+  const [tabs, setTabs] = useState([
+    { id: "tab1", title: "Tab 1", content: "Content 1" },
+    { id: "tab2", title: "Tab 2", content: "Content 2" },
+  ]);
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  const addTab = () => {
+    const newId = `tab${tabs.length + 1}`;
+    setTabs([...tabs, { id: newId, title: `Tab ${tabs.length + 1}`, content: `Content ${tabs.length + 1}` }]);
+    setActiveTab(newId);
+  };
+
+  return (
+    <div className="space-y-4">
+      <button onClick={addTab} className="px-3 py-1 bg-primary text-primary-foreground rounded-button">
+        Add Tab
+      </button>
+
+      <Tabs active={activeTab} onChange={setActiveTab}>
+        {tabs.map((tab) => (
+          <Tab key={tab.id} id={tab.id} title={tab.title}>
+            <p>{tab.content}</p>
+          </Tab>
+        ))}
+      </Tabs>
+    </div>
+  );
+}
+```
+
+### Form Wizard with Disabled Steps
+
+```tsx
+<Tabs active={currentStep} onChange={setCurrentStep}>
+  <Tab id="step1" title="Personal Info">
+    <PersonalInfoForm />
+  </Tab>
+  <Tab id="step2" title="Address" disabled={!step1Complete}>
+    <AddressForm />
+  </Tab>
+  <Tab id="step3" title="Payment" disabled={!step2Complete}>
+    <PaymentForm />
+  </Tab>
+</Tabs>
+```
+
+## Do
+
+- Always set a default `active` tab to prevent an empty initial state.
+- Use clear, concise tab titles (one to three words).
+- Arrange tabs in a logical order matching the user's workflow.
+- Use `disabled` for tabs not yet accessible (e.g. incomplete wizard steps).
+- Use design-token classes for any custom styling (`bg-background`, `border-border`).
+
+## Don't
+
+- Don't pass raw Tailwind color classes (`bg-blue-50`, `border-gray-300`) — use design tokens instead.
+- Don't use arbitrary Tailwind values (`bg-[#abc]`, `bg-[--my-var]`) — override CSS variables in your `@theme` block.
+- Don't use more than 6–8 tabs; prefer sidebar navigation for larger sets.
+- Don't use tabs for content that needs to be compared side-by-side.
+- Don't use tabs for primary page-level navigation; use a nav bar instead.
+
+## Accessibility
+
+- Tab buttons use `aria-current="page"` and `aria-disabled` for screen reader state.
+- Keyboard navigation: `ArrowLeft` / `ArrowRight` moves between tabs; `Tab` key focuses the header row.
+- Disabled tabs are skipped during arrow-key navigation.
+- Tab panels are only rendered when active (unmounted otherwise) — use this for performance but be aware that form state inside inactive panels is lost.
+
+## Notes
+
+- Only the active panel's `children` are rendered — inactive panels are unmounted.
+- The tab header list is horizontally scrollable on small screens (`overflow-x-auto`).
+- `Tabs` is built on top of `Card`, so it inherits card design tokens and the `container` / `className` props map to the card's `container` and `className` respectively.
+- If `active` does not match any `Tab` `id`, the component selects the first available non-disabled tab automatically.