@adres/mgda-ui 0.0.0-stage → 0.0.1

package/knowledge/step-indicator.md

@@ -0,0 +1,157 @@
+---
+# >>> DERIVED - regenerated by `npm run knowledge:sync`. Do not edit. <<<
+derived:
+  schemaVersion: 1
+  id: step-indicator
+  sourceFile: packages/design-system/src/components/step-indicator.tsx
+  client: true
+  category: web-app-patterns
+  categoryFromBarrel: web-app-patterns
+  barrelExported: true
+  importPath: "@adres/mgda-ui"
+  exports:
+    - name: StepIndicator
+      kind: component
+      typeText: "ForwardRefExoticComponent<StepIndicatorProps & RefAttributes<HTMLDivElement>>"
+    - name: StepIndicatorOrientation
+      kind: type
+    - name: StepIndicatorProps
+      kind: type
+    - name: StepIndicatorSize
+      kind: type
+    - name: StepIndicatorStep
+      kind: type
+  primaryExport: StepIndicator
+  subcomponents: []
+  props:
+    StepIndicator:
+      - name: currentStep
+        type: number
+        required: true
+        declaredIn: self
+        doc: "Zero-based index of the active step. Steps before it render as done; the step at this index renders as active; later steps stay muted."
+      - name: onStepClick
+        type: "((index: number) => void)"
+        required: false
+        declaredIn: self
+        doc: "When provided, the indicator becomes interactive: done and active steps render as buttons that call back with the step index. Upcoming steps remain inert (users can't jump ahead)."
+      - name: orientation
+        type: StepIndicatorOrientation
+        required: false
+        declaredIn: self
+        doc: "Layout direction. `horizontal` (default) is best for desktop wizards; `vertical` is better on mobile or in side panels."
+      - name: size
+        type: StepIndicatorSize
+        required: false
+        declaredIn: self
+        doc: "Visual density."
+      - name: steps
+        type: "StepIndicatorStep[]"
+        required: true
+        declaredIn: self
+  extendsProps:
+    - "React.HTMLAttributes<HTMLDivElement>"
+  variants:
+    size:
+      kind: enum
+      options:
+        - sm
+        - md
+        - lg
+      default: md
+      on: StepIndicator
+    orientation:
+      kind: enum
+      options:
+        - horizontal
+        - vertical
+      default: horizontal
+      on: StepIndicator
+  variantSource: prop-union
+  compoundVariants: []
+  sizeMaps:
+    - CIRCLE_H
+    - CIRCLE_SIZE
+    - ICON_CLASS
+    - LABEL_CLASS
+    - NUMBER_CLASS
+  dataSlots: []
+  dependsOn:
+    internal: []
+    lib:
+      - cn
+    hooks: []
+    external:
+      - lucide-react
+      - react
+  contexts: []
+  stories:
+    - exportName: Default
+      id: components-stepindicator--default
+  storybookTitle: Components/StepIndicator
+  docsId: components-stepindicator--documentation
+  argTypeOptions: {}
+  resolvedCleanly: true
+  contractHash: a0e45cc52f9d
+  factsHash: "72b15c96378f"
+# >>> AUTHORED - humans own everything below this line. <<<
+status: stable
+summary: "A multi-step progress indicator (horizontal wizard or vertical timeline) with done/active/upcoming/error states, optionally clickable to navigate backward."
+useWhen:
+  - "showing progress through a fixed sequence of discrete steps - a multi-page form, an onboarding wizard, an order-status timeline"
+useInstead:
+  - id: progress
+    when: "progress is a continuous percentage or value, not a fixed sequence of named steps"
+  - id: countdown-pill
+    when: "showing time remaining until one event, not discrete steps in a process"
+related:
+  - progress
+  - countdown-pill
+a11y:
+  notes:
+    - "aria-current=\"step\" marks the active step on both interactive and static renders - assistive tech can identify the current position regardless of onStepClick."
+    - "onStepClick makes done and active steps real button elements automatically; upcoming steps stay non-interactive divs even when onStepClick is provided - users cannot jump ahead, matching the visual cue that upcoming steps are muted."
+  keyboard:
+    - "When interactive, clickable steps are native buttons, so Tab/Enter/Space work without extra wiring - no custom keyboard handling is needed."
+  radixHandles: false
+pitfalls:
+  - "currentStep is the only source of done/active/upcoming state - steps do not track their own completion; passing an out-of-range currentStep (negative, or >= steps.length) does not throw, it just renders every step as either done or upcoming with no active step highlighted."
+  - "status: \"error\" on a step overrides its computed done/active/upcoming state entirely, and takes over the connector color on both sides of that step - marking a past step as error still shows it distinct from a normal done step, not just tinted."
+  - "onStepClick only ever fires for steps at or before currentStep - passing it does not let users skip ahead to upcoming steps, by design; there is no prop to relax that restriction."
+  - "orientation=\"vertical\" allows step.label to be a full ReactNode (e.g. a details block), but orientation=\"horizontal\" visually assumes a short, non-wrapping label - a long or rich label in horizontal mode overflows rather than wraps."
+canonicalSnippet: |
+  import { StepIndicator } from "@adres/mgda-ui"
+
+  <StepIndicator
+    currentStep={1}
+    steps={[
+      { label: "Account" },
+      { label: "Profile" },
+      { label: "Confirm" },
+    ]}
+  />
+reviewedAt: 2026-09-01
+reviewedAgainstContractHash: a0e45cc52f9d
+---
+
+## Usage
+
+`StepIndicator` shows progress through a fixed sequence of discrete, named
+steps - a multi-page form, an onboarding wizard, an order-status timeline.
+Reach for `Progress` instead when progress is a continuous percentage, not a
+set of named steps, and `CountdownPill` when showing time remaining until
+one event rather than discrete steps in a process.
+
+`currentStep` (zero-based) is the only source of truth for step state -
+steps before it render `done`, the step at that index renders `active`,
+later steps stay `upcoming`. A per-step `status: "error"` overrides that
+computed state regardless of position.
+
+Pass `onStepClick` to make the indicator navigable: only `done` and `active`
+steps become clickable, matching the natural rule that users can revisit a
+completed step or the current one, but cannot skip ahead to an `upcoming`
+step.
+
+`orientation="horizontal"` (default) suits desktop wizards with short
+labels; `orientation="vertical"` suits mobile or side panels and allows a
+richer `ReactNode` label per step, such as a details block.

package/knowledge/switch.md

@@ -0,0 +1,88 @@
+---
+# >>> DERIVED - regenerated by `npm run knowledge:sync`. Do not edit. <<<
+derived:
+  schemaVersion: 1
+  id: switch
+  sourceFile: packages/design-system/src/components/switch.tsx
+  client: true
+  category: uncategorized
+  categoryFromBarrel: null
+  barrelExported: false
+  importPath: "@adres/mgda-ui/components/switch"
+  exports:
+    - name: Switch
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<SwitchProps & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+  primaryExport: Switch
+  subcomponents: []
+  props: {}
+  extendsProps: []
+  variants: {}
+  variantSource: none
+  compoundVariants: []
+  sizeMaps: []
+  dataSlots: []
+  dependsOn:
+    internal: []
+    lib:
+      - cn
+    hooks: []
+    external:
+      - "@radix-ui/react-switch"
+      - react
+  contexts: []
+  stories:
+    - exportName: Default
+      id: components-switch--default
+    - exportName: Checked
+      id: components-switch--checked
+  storybookTitle: Components/Switch
+  docsId: components-switch--documentation
+  argTypeOptions: {}
+  resolvedCleanly: true
+  contractHash: c5e06226b968
+  factsHash: "5a117fe889c2"
+# >>> AUTHORED - humans own everything below this line. <<<
+status: stable
+summary: "An on/off toggle switch, built on Radix Switch, for a setting that takes effect immediately."
+useWhen:
+  - "an immediate on/off setting - e.g. airplane mode, notifications enabled - that applies right away, not a form-bound selection to submit"
+useInstead:
+  - id: checkbox
+    when: "the control is a form-bound boolean or tri-state selection, especially in a list, form, or table row"
+  - id: toggle
+    when: "the control needs to look like a pressable button rather than a physical switch"
+related:
+  - checkbox
+  - toggle
+a11y:
+  notes:
+    - "Switch has no built-in label - pair it with a Label (via htmlFor/id, as in the story) so the control has an accessible name."
+  keyboard:
+    - "Native Radix switch role - Space toggles it, and it takes part in tab order automatically."
+  radixHandles: true
+pitfalls:
+  - "Switch is not exported from the package barrel (@adres/mgda-ui) - import it from the deep path @adres/mgda-ui/components/switch."
+canonicalSnippet: |
+  import { Switch } from "@adres/mgda-ui/components/switch"
+
+  <Switch aria-label="Airplane mode" onCheckedChange={setEnabled} />
+reviewedAt: 2026-09-01
+reviewedAgainstContractHash: c5e06226b968
+---
+
+## Usage
+
+`Switch` is for an immediate on/off setting that takes effect right away -
+airplane mode, a notifications toggle - as opposed to a value that gets
+submitted with a form. Reach for `Checkbox` instead when the control is a
+form-bound boolean or tri-state selection, especially in a list, form, or
+table row.
+
+`Switch` renders no label of its own - always give it an accessible name,
+either via `aria-label` (as above) or by pairing it with a `Label` pointing at
+the switch's `id` with `htmlFor`.
+
+Unlike most components in this package, `Switch` is not re-exported from the
+package barrel; import it from its deep path,
+`@adres/mgda-ui/components/switch`.

package/knowledge/table.md

@@ -0,0 +1,190 @@
+---
+# >>> DERIVED - regenerated by `npm run knowledge:sync`. Do not edit. <<<
+derived:
+  schemaVersion: 1
+  id: table
+  sourceFile: packages/design-system/src/components/table.tsx
+  client: true
+  category: web-app-data
+  categoryFromBarrel: web-app-data
+  barrelExported: true
+  importPath: "@adres/mgda-ui"
+  exports:
+    - name: Table
+      kind: component
+      typeText: "ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>"
+    - name: TableBody
+      kind: component
+      typeText: "ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>"
+    - name: TableCaption
+      kind: component
+      typeText: "ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & RefAttributes<HTMLTableCaptionElement>>"
+    - name: TableCell
+      kind: component
+      typeText: "ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>>"
+    - name: TableFooter
+      kind: component
+      typeText: "ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>"
+    - name: TableHead
+      kind: component
+      typeText: "ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>>"
+    - name: TableHeader
+      kind: component
+      typeText: "ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>"
+    - name: TableProps
+      kind: type
+    - name: TableRow
+      kind: component
+      typeText: "ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & RefAttributes<HTMLTableRowElement>>"
+    - name: TableSize
+      kind: type
+    - name: TableVariant
+      kind: type
+  primaryExport: Table
+  subcomponents:
+    - TableBody
+    - TableCaption
+    - TableCell
+    - TableFooter
+    - TableHead
+    - TableHeader
+    - TableRow
+  props:
+    Table:
+      - name: size
+        type: TableSize
+        required: false
+        declaredIn: self
+      - name: variant
+        type: TableVariant
+        required: false
+        declaredIn: self
+  extendsProps:
+    - "React.HTMLAttributes<HTMLTableElement>"
+  variants:
+    size:
+      kind: enum
+      options:
+        - sm
+        - md
+        - lg
+      default: md
+      on: Table
+    variant:
+      kind: enum
+      options:
+        - ghost
+        - surface
+      default: surface
+      on: Table
+  variantSource: prop-union
+  compoundVariants: []
+  sizeMaps:
+    - CELL_PADDING
+    - TEXT_SIZE
+  dataSlots: []
+  dependsOn:
+    internal: []
+    lib:
+      - cn
+    hooks: []
+    external:
+      - react
+  contexts:
+    - name: TableContext
+      type: TableContextValue
+      default: null
+  stories:
+    - exportName: Default
+      id: components-table--default
+  storybookTitle: Components/Table
+  docsId: components-table--documentation
+  argTypeOptions: {}
+  resolvedCleanly: true
+  contractHash: "954f019b29cd"
+  factsHash: d411faad10ae
+# >>> AUTHORED - humans own everything below this line. <<<
+status: stable
+summary: "A hand-markup HTML table (thead/tbody/tfoot/tr/th/td) with density sizes and a bordered or ghost surface, for full control over table structure."
+useWhen:
+  - "the table needs custom structure raw markup gives you - row spans, grouped headers, a footer row, or hand-placed cells - beyond a plain column-driven grid"
+useInstead:
+  - id: data-table
+    when: "columns are defined in data and you want built-in client-side sorting without wiring the markup by hand"
+  - id: data-list
+    when: "showing label/value pairs for a single record, not multiple rows sharing the same columns"
+  - id: accordion
+    when: "the content is a list of expandable sections, not tabular rows and columns"
+related:
+  - data-table
+  - data-list
+  - accordion
+tokens:
+  - "--border"
+  - "--muted"
+  - "--card"
+  - "--background"
+  - "--primary-muted"
+  - "--foreground"
+  - "--muted-foreground"
+a11y:
+  notes:
+    - "Renders real table/thead/tbody/tfoot/tr/th/td elements, so screen readers get native table navigation and header/cell association for free - no extra ARIA is needed for a straightforward table."
+    - "TableCaption renders a real caption element, the correct way to give a table an accessible name or description - prefer it over a heading placed above the table."
+  radixHandles: false
+pitfalls:
+  - "TableBody, not TableRow, owns the row background, hover, and selected-state styling (data-state=\"selected\") - putting those classes on TableRow directly would also paint header rows, since TableHeader and TableRow share the same underlying element."
+  - "variant=\"surface\" (default) wraps the table in a bordered, rounded, scrollable container; variant=\"ghost\" drops that chrome entirely for a table meant to sit flush inside another surface, such as one already inside a Card."
+  - "size drives two separate maps (cell padding, text size) with intentional half-step padding values that fall between the spacing token scale - do not round these to the nearest token when customizing, they are tuned to the row's font size."
+  - "This is markup written by hand, row by row - for data driven by an array of records with built-in sorting, DataTable is very likely the better fit; reach for Table only when structure is needed that DataTable does not support (row spans, grouped headers, a footer)."
+canonicalSnippet: |
+  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@adres/mgda-ui"
+
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Name</TableHead>
+        <TableHead>Status</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>Acme Corp</TableCell>
+        <TableCell>Active</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+reviewedAt: 2026-09-01
+reviewedAgainstContractHash: "954f019b29cd"
+---
+
+## Usage
+
+`Table` is the hand-markup table primitive - reach for it when structure is
+needed that a column-driven grid cannot express: row spans, grouped headers,
+a footer row, or manually placed cells. For the common case of rendering rows
+from an array of records with built-in sorting, `DataTable` is very likely
+the better fit and needs far less markup. Reach for `DataList` instead for a
+single record's label/value pairs, and `Accordion` for expandable sections
+rather than tabular rows and columns.
+
+`variant="surface"` (default) wraps the table in a bordered, rounded,
+scrollable container; `variant="ghost"` drops that chrome for a table meant
+to sit flush inside another surface, such as one already inside a `Card`.
+`size` scales cell padding and text together across the whole table - set it
+once on `Table`, not per cell.
+
+## Anatomy
+
+`Table` renders real, semantic HTML table elements throughout.
+
+| Part | Role |
+| --- | --- |
+| `Table` | The `<table>` root, wrapped in a scroll container. Owns `size` and `variant`, shared via context. |
+| `TableHeader` | The `<thead>`. Tinted when `variant="surface"`. |
+| `TableBody` | The `<tbody>`. Owns row background, hover, and selected-state styling - deliberately not on `TableRow`, so header rows are unaffected. |
+| `TableFooter` | The `<tfoot>`. |
+| `TableRow` | A `<tr>`. Intentionally unstyled beyond structure - see `TableBody`. |
+| `TableHead` | A `<th>`. |
+| `TableCell` | A `<td>`. |
+| `TableCaption` | A real `<caption>` - the correct way to give the table an accessible name or description. |

package/knowledge/tabs.md

@@ -0,0 +1,169 @@
+---
+# >>> DERIVED - regenerated by `npm run knowledge:sync`. Do not edit. <<<
+derived:
+  schemaVersion: 1
+  id: tabs
+  sourceFile: packages/design-system/src/components/tabs.tsx
+  client: true
+  category: web-app-layout-navigation
+  categoryFromBarrel: web-app-layout-navigation
+  barrelExported: true
+  importPath: "@adres/mgda-ui"
+  exports:
+    - name: Tabs
+      kind: component
+      typeText: "ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>"
+    - name: TabsContent
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<TabsContentProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+    - name: TabsList
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<TabsListProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+    - name: TabsOrientation
+      kind: type
+    - name: TabsProps
+      kind: type
+    - name: TabsSize
+      kind: type
+    - name: TabsTrigger
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<TabsTriggerProps & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+  primaryExport: Tabs
+  subcomponents:
+    - TabsContent
+    - TabsList
+    - TabsTrigger
+  props:
+    Tabs:
+      - name: orientation
+        type: TabsOrientation
+        required: false
+        declaredIn: self
+        doc: "`horizontal` (default) is a segmented row; `vertical` stacks the triggers in a left-aligned column (labels may wrap)."
+      - name: size
+        type: TabsSize
+        required: false
+        declaredIn: self
+  extendsProps:
+    - "React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>"
+  variants:
+    size:
+      kind: enum
+      options:
+        - sm
+        - md
+        - lg
+      default: md
+      on: Tabs
+    orientation:
+      kind: enum
+      options:
+        - horizontal
+        - vertical
+      default: horizontal
+      on: Tabs
+  variantSource: prop-union
+  compoundVariants: []
+  sizeMaps:
+    - LIST_HEIGHT
+    - TRIGGER_PADDING
+    - TRIGGER_PADDING_Y
+    - TRIGGER_TEXT
+  dataSlots: []
+  dependsOn:
+    internal: []
+    lib:
+      - cn
+    hooks: []
+    external:
+      - "@radix-ui/react-tabs"
+      - react
+  contexts:
+    - name: TabsContext
+      type: TabsContextValue
+      default: null
+  stories:
+    - exportName: Default
+      id: components-tabs--default
+  storybookTitle: Components/Tabs
+  docsId: components-tabs--documentation
+  argTypeOptions: {}
+  resolvedCleanly: true
+  contractHash: "3be5f90e7de1"
+  factsHash: "4a3f7798cec2"
+# >>> AUTHORED - humans own everything below this line. <<<
+status: stable
+summary: "A segmented (or vertically stacked) tab switcher with a floating, animated active indicator, on top of Radix Tabs."
+useWhen:
+  - "switching between a small, fixed set of views that share the same context (a settings page's sections, a record's detail panels)"
+  - "the tab set is known ahead of time and short enough to show all at once - not for a long or dynamic list of destinations"
+useInstead:
+  - id: segmented-control
+    when: "you're picking one value from a small set, not switching between panels of content - SegmentedControl carries the same visual language without the panel/content wiring"
+  - id: list-nav
+    when: "the set of destinations is longer than fits comfortably as tabs, or each one should be a real navigable URL"
+related:
+  - segmented-control
+composesWith: []
+tokens:
+  - "--muted"
+  - "--card"
+  - "--primary-foreground"
+  - "--muted-foreground"
+  - "--foreground"
+  - "--ring"
+a11y:
+  notes:
+    - "Radix Tabs supplies the full tab-panel contract: role=\"tablist\"/\"tab\"/\"tabpanel\", aria-selected, and roving tabindex so only the active trigger is in the tab order."
+    - "The floating indicator div is aria-hidden and purely visual - it plays no role in the accessible tab/panel relationship, which Radix handles independently."
+    - "size and orientation are read from context by TabsList/TabsTrigger/TabsContent - they must be set on the ancestor Tabs, not on the individual parts."
+  requiredProps:
+    - "every TabsTrigger and its paired TabsContent must share the same value string"
+  keyboard:
+    - "Radix default: Arrow keys move focus between triggers (horizontal uses Left/Right, vertical uses Up/Down per orientation), and Home/End jump to the first/last trigger."
+    - "By default Radix activates a tab as soon as it receives focus (automatic activation) - set activationMode=\"manual\" on Tabs (passed through props) if pressing Enter/Space should be required to switch."
+  radixHandles: true
+pitfalls:
+  - "TabsList measures the active trigger's DOM rect to position the floating indicator - rendering TabsTrigger conditionally (mounting/unmounting rather than just disabling) can leave the indicator momentarily unpositioned until the next value change."
+  - "orientation must be set on Tabs, not on TabsList directly - it also changes Radix's own keyboard arrow-key axis, so setting it only visually (e.g. via className) leaves keyboard nav on the wrong axis."
+  - "TabsContent's default top margin (mt-4) only applies for horizontal orientation - vertical layouts are expected to place TabsList and TabsContent side by side in the consumer's own row layout, with no automatic gap between them."
+subcomponentNotes:
+  TabsList: "Hosts the floating active-tab indicator, measured via getBoundingClientRect and re-measured via ResizeObserver on layout changes."
+  TabsTrigger: "Requires value, matched against Tabs' own value/defaultValue/onValueChange. Registers itself with TabsList so the indicator can find its position."
+  TabsContent: "Requires the same value as its paired TabsTrigger. Radix keeps only the active panel mounted by default."
+rtl: "Layout uses flex, gap, and logical text-start/justify-start only - both orientations mirror correctly under RTL with no extra work. The floating indicator's position is computed from measured pixel rects, so it follows the mirrored layout automatically."
+canonicalSnippet: |
+  import { Tabs, TabsList, TabsTrigger, TabsContent } from "@adres/mgda-ui"
+
+  <Tabs defaultValue="profile" size="md">
+    <TabsList>
+      <TabsTrigger value="profile">Profile</TabsTrigger>
+      <TabsTrigger value="billing">Billing</TabsTrigger>
+    </TabsList>
+    <TabsContent value="profile">Profile settings go here.</TabsContent>
+    <TabsContent value="billing">Billing settings go here.</TabsContent>
+  </Tabs>
+reviewedAt: 2026-08-31
+reviewedAgainstContractHash: "3be5f90e7de1"
+---
+
+## Usage
+
+Tabs wraps Radix's Tabs primitive with a shared visual language (matching
+`SegmentedControl`/`Button` heights at every size) and a floating indicator
+that slides behind the active trigger instead of each trigger drawing its own
+active background. `size` and `orientation` are set once on the root `Tabs`
+and read by every part through context - they cannot be set per-part.
+
+Prefer uncontrolled usage (`defaultValue`) unless something outside the
+component needs to read or drive the active tab; pass `value` +
+`onValueChange` only in that case.
+
+## Anatomy
+
+- **Tabs** - the root: owns `size`, `orientation`, and the active value
+  (controlled or uncontrolled), and provides context to every other part.
+- **TabsList** - the row (or column, in vertical orientation) of triggers,
+  plus the floating active-tab indicator.
+- **TabsTrigger** - one tab button; `value` pairs it to its `TabsContent`.
+- **TabsContent** - the panel shown when its `value` matches the active tab.