@cdx-ui/components 0.2.2 → 0.2.4

package/docs/components/table-pagination/content.md

@@ -0,0 +1,177 @@
+# Table Pagination (https://design.candescent.com/docs/components/table-pagination)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/navigation-tablepagination--default)
+
+`TablePagination` is chrome for moving between pages of a list or table. The parent owns `page` and `count` (1-based). Distinct from `Carousel.Pagination` dots. The `Pagination` name is reserved for a later numbered pager.
+
+```tsx
+import { TablePagination } from '@cdx-ui/components';
+```
+
+## Basic
+
+Pass `page`, `count`, and `onPageChange` to render a compact item window with previous/next controls and a “Page X of Y” label.
+
+```tsx
+import { TablePagination } from '@cdx-ui/components';
+
+export default function TablePaginationBasicDemo() {
+  return <TablePagination page={1} count={12} accessibilityLabel="Table pagination" />;
+}
+```
+
+## Compound
+
+Compose items yourself when you need a custom window. Current page uses `current`.
+
+```tsx
+import { TablePagination } from '@cdx-ui/components';
+
+export default function TablePaginationCompoundDemo() {
+  return (
+    <TablePagination accessibilityLabel="Table pagination">
+      <TablePagination.Previous />
+      <TablePagination.Item current>1</TablePagination.Item>
+      <TablePagination.Item>2</TablePagination.Item>
+      <TablePagination.Ellipsis />
+      <TablePagination.Item>12</TablePagination.Item>
+      <TablePagination.Next />
+    </TablePagination>
+  );
+}
+```
+
+## Page size
+
+Set `pageSize` and `pageSizeOptions` to show a rows-per-page `Select`.
+
+```tsx
+import { TablePagination } from '@cdx-ui/components';
+
+export default function TablePaginationPageSizeDemo() {
+  return (
+    <TablePagination
+      page={1}
+      count={8}
+      pageSize={25}
+      pageSizeOptions={[10, 25, 50]}
+      accessibilityLabel="Table pagination"
+    />
+  );
+}
+```
+
+## API
+
+### TablePagination
+
+Landmark root. On web, renders `<nav>`. On native, renders a labelled `View`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the container's own styles. |
+| `children?` | `ReactNode` | — | Custom layout of pagination parts. Omit to render the status, controls and generated page items. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default container. |
+| `page?` | `number` | — | 1-based current page. Controlled when set. |
+| `defaultPage?` | `number` | `1` | Initial 1-based page when uncontrolled. |
+| `count?` | `number` | — | Total page count. When set with no children, items are generated. |
+| `onPageChange?` | `((page: number) => void)` | — | Called with the new 1-based page when the user changes page. |
+| `siblingCount?` | `number` | `1` | Number of page items shown on each side of the current page before an ellipsis. |
+| `pageSize?` | `number` | — | Current rows-per-page value. When set with no children, the page-size select is rendered. |
+| `pageSizeOptions?` | `readonly TablePaginationPageSizeOption[]` | `[25, 50, 100]` | Choices offered by `TablePagination.PageSize`, as numbers or `{ value, label }` pairs. |
+| `onPageSizeChange?` | `((pageSize: number) => void)` | — | Called with the new rows-per-page value when the user picks one. |
+| `disabled?` | `boolean` | `false` | Disables every control in the pagination. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+| Attribute   | Values             | Description |
+| ----------- | ------------------ | ----------- |
+| `data-slot` | `table-pagination` | Root        |
+
+## Sub-components
+
+### TablePagination.Previous
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the control's own styles. |
+| `children?` | `ReactNode` | — | The element to render when `asChild` is set. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default icon button. |
+| `disabled?` | `boolean` | — | Disables the control. It is also disabled at the first or last page, or when the pagination is disabled. |
+| `onPress?` | `((event: GestureResponderEvent) => void) \| null` | — | Called on press, before the pagination moves to the adjacent page. |
+
+| Attribute   | Values                      | Description |
+| ----------- | --------------------------- | ----------- |
+| `data-slot` | `table-pagination-previous` | Previous    |
+
+### TablePagination.Next
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the control's own styles. |
+| `children?` | `ReactNode` | — | The element to render when `asChild` is set. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default icon button. |
+| `disabled?` | `boolean` | — | Disables the control. It is also disabled at the first or last page, or when the pagination is disabled. |
+| `onPress?` | `((event: GestureResponderEvent) => void) \| null` | — | Called on press, before the pagination moves to the adjacent page. |
+
+| Attribute   | Values                  | Description |
+| ----------- | ----------------------- | ----------- |
+| `data-slot` | `table-pagination-next` | Next        |
+
+### TablePagination.Item
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the item's own styles. |
+| `children?` | `ReactNode` | — | The page number or label to display. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default page button. |
+| `page?` | `number` | — | 1-based page this item navigates to when pressed. |
+| `current?` | `boolean` | `false` | Marks the item as the current page. Set automatically when `page` matches the current page. |
+| `disabled?` | `boolean` | — | Disables the item. Defaults to the pagination's `disabled`. |
+| `onPress?` | `((event: GestureResponderEvent) => void) \| null` | — | Called on press, before the pagination navigates to `page`. |
+
+| Attribute   | Values                  | Description |
+| ----------- | ----------------------- | ----------- |
+| `data-slot` | `table-pagination-item` | Page number |
+
+### TablePagination.Ellipsis
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the ellipsis's own styles. |
+| `children?` | `ReactNode` | — | Custom content in place of the default `…`. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
+
+| Attribute   | Values                      | Description |
+| ----------- | --------------------------- | ----------- |
+| `data-slot` | `table-pagination-ellipsis` | Gap         |
+
+### TablePagination.Status
+
+Connected mode renders “Page X of Y” automatically. Compose this slot when building a custom window.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the status's own styles. |
+| `children?` | `ReactNode` | — | Custom status content in place of the default "Page N of M" text. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
+
+| Attribute   | Values                    | Description |
+| ----------- | ------------------------- | ----------- |
+| `data-slot` | `table-pagination-status` | Page X of Y |
+
+### TablePagination.PageSize
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the select's own styles. |
+| `children?` | `ReactNode` | — | The element to render when `asChild` is set. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default select. |
+
+| Attribute   | Values                       | Description |
+| ----------- | ---------------------------- | ----------- |
+| `data-slot` | `table-pagination-page-size` | Rows/page   |
+
+## Accessibility
+
+The web root is a `nav` landmark. The current page uses `aria-current="page"`. Previous and next are disabled at the ends.

package/docs/components/tabs/content.md

@@ -0,0 +1,292 @@
+# Tabs (https://design.candescent.com/docs/components/tabs)
+
+Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=10266-3192), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/navigation-tabs--default)
+
+A compound component for switching between related content panels. Match each `Tabs.Tab` with a `Tabs.Panel` using the same `value`.
+
+```tsx
+import { Tabs } from '@cdx-ui/components';
+```
+
+## Basic
+
+```tsx
+import { Tabs, Text } from '@cdx-ui/components';
+
+export default function TabsBasicDemo() {
+  return (
+    <Tabs defaultValue="overview" className="w-[360px]">
+      <Tabs.List accessibilityLabel="Account sections">
+        <Tabs.Tab value="overview">
+          <Tabs.TabLabel>Overview</Tabs.TabLabel>
+        </Tabs.Tab>
+        <Tabs.Tab value="activity">
+          <Tabs.TabLabel>Activity</Tabs.TabLabel>
+        </Tabs.Tab>
+        <Tabs.Tab value="settings">
+          <Tabs.TabLabel>Settings</Tabs.TabLabel>
+        </Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="overview" className="mt-4">
+        <Text>Review balances and recent account details.</Text>
+      </Tabs.Panel>
+      <Tabs.Panel value="activity" className="mt-4">
+        <Text>View recent account activity.</Text>
+      </Tabs.Panel>
+      <Tabs.Panel value="settings" className="mt-4">
+        <Text>Manage account preferences.</Text>
+      </Tabs.Panel>
+    </Tabs>
+  );
+}
+```
+
+## Variants
+
+Use the `solid` variant for a filled segmented control or `outline` for a line indicator.
+
+```tsx
+import { Box, Tabs, Text } from '@cdx-ui/components';
+
+export default function TabsVariantsDemo() {
+  return (
+    <Box className="w-[360px] gap-8">
+      <Tabs defaultValue="checking">
+        <Tabs.List accessibilityLabel="Solid account tabs">
+          <Tabs.Tab value="checking">
+            <Tabs.TabLabel>Checking</Tabs.TabLabel>
+          </Tabs.Tab>
+          <Tabs.Tab value="savings">
+            <Tabs.TabLabel>Savings</Tabs.TabLabel>
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="checking" className="pt-3">
+          <Text>Solid (default)</Text>
+        </Tabs.Panel>
+        <Tabs.Panel value="savings" className="pt-3">
+          <Text>Savings account</Text>
+        </Tabs.Panel>
+      </Tabs>
+
+      <Tabs defaultValue="checking" variant="outline">
+        <Tabs.List accessibilityLabel="Outline account tabs">
+          <Tabs.Tab value="checking">
+            <Tabs.TabLabel>Checking</Tabs.TabLabel>
+          </Tabs.Tab>
+          <Tabs.Tab value="savings">
+            <Tabs.TabLabel>Savings</Tabs.TabLabel>
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="checking" className="pt-3">
+          <Text>Outline</Text>
+        </Tabs.Panel>
+        <Tabs.Panel value="savings" className="pt-3">
+          <Text>Savings account</Text>
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+}
+```
+
+## Vertical
+
+Set `orientation="vertical"` to place the tab list beside its panels. Orientation also determines which arrow keys move focus on web.
+
+```tsx
+import { Box, Tabs, Text, type TabsVariant } from '@cdx-ui/components';
+
+function VerticalTabs({ variant }: { variant: TabsVariant }) {
+  return (
+    <Box className="gap-2">
+      <Text weight="semibold" className="capitalize">
+        {variant}
+      </Text>
+      <Tabs defaultValue="profile" orientation="vertical" variant={variant} className="w-105">
+        <Tabs.List accessibilityLabel={`${variant} settings sections`}>
+          <Tabs.Tab value="profile">
+            <Tabs.TabLabel>Profile</Tabs.TabLabel>
+          </Tabs.Tab>
+          <Tabs.Tab value="security">
+            <Tabs.TabLabel>Security</Tabs.TabLabel>
+          </Tabs.Tab>
+          <Tabs.Tab value="notifications">
+            <Tabs.TabLabel>Notifications</Tabs.TabLabel>
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="profile">
+          <Text>Update your personal information.</Text>
+        </Tabs.Panel>
+        <Tabs.Panel value="security">
+          <Text>Manage passwords and sign-in methods.</Text>
+        </Tabs.Panel>
+        <Tabs.Panel value="notifications">
+          <Text>Choose which alerts you receive.</Text>
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+}
+
+export default function TabsVerticalDemo() {
+  return (
+    <Box className="gap-8">
+      <VerticalTabs variant="solid" />
+      <VerticalTabs variant="outline" />
+    </Box>
+  );
+}
+```
+
+## Overflow
+
+Horizontal lists scroll by default when their tabs exceed the available width. Edge fades appear on iOS, Android, and web. Paging controls are web-only. On iOS and Android, selecting a tab scrolls it into view. Vertical lists do not scroll.
+
+```tsx
+import { Tabs, Text } from '@cdx-ui/components';
+
+const sections = ['Overview', 'Activity', 'Statements', 'Settings', 'Security', 'Documents'];
+
+export default function TabsOverflowDemo() {
+  return (
+    <Tabs defaultValue="overview" className="w-[360px]">
+      <Tabs.List accessibilityLabel="Account sections">
+        {sections.map((section) => {
+          const value = section.toLowerCase();
+
+          return (
+            <Tabs.Tab key={value} value={value}>
+              <Tabs.TabLabel>{section}</Tabs.TabLabel>
+            </Tabs.Tab>
+          );
+        })}
+      </Tabs.List>
+      {sections.map((section) => {
+        const value = section.toLowerCase();
+
+        return (
+          <Tabs.Panel key={value} value={value} className="mt-4">
+            <Text>{section} content</Text>
+          </Tabs.Panel>
+        );
+      })}
+    </Tabs>
+  );
+}
+```
+
+## Disabled
+
+Disable an individual `Tabs.Tab`, or set `disabled` on `Tabs` to disable every tab.
+
+```tsx
+import { Tabs, Text } from '@cdx-ui/components';
+
+export default function TabsDisabledDemo() {
+  return (
+    <Tabs defaultValue="open" className="w-[360px]">
+      <Tabs.List accessibilityLabel="Request status">
+        <Tabs.Tab value="open">
+          <Tabs.TabLabel>Open</Tabs.TabLabel>
+        </Tabs.Tab>
+        <Tabs.Tab value="pending" disabled>
+          <Tabs.TabLabel>Pending</Tabs.TabLabel>
+        </Tabs.Tab>
+        <Tabs.Tab value="closed">
+          <Tabs.TabLabel>Closed</Tabs.TabLabel>
+        </Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="open" className="mt-4">
+        <Text>Requests awaiting review.</Text>
+      </Tabs.Panel>
+      <Tabs.Panel value="pending" className="mt-4">
+        <Text>Requests in progress.</Text>
+      </Tabs.Panel>
+      <Tabs.Panel value="closed" className="mt-4">
+        <Text>Resolved requests.</Text>
+      </Tabs.Panel>
+    </Tabs>
+  );
+}
+```
+
+## API
+
+### Tabs
+
+Manages the selected value and shares orientation, activation, and disabled state with its sub-components. Supports controlled selection with `value` and `onValueChange`, or uncontrolled selection with `defaultValue`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `variant?` | `'outline' \| 'solid'` | — | `solid` (default) slides a filled indicator behind the active tab; `outline` draws a sliding line indicator. Styled per Forge DS SegmentedControl (solid). |
+| `value?` | `string` | — | Controlled selected tab value. |
+| `defaultValue?` | `string` | — | Default selected tab value for uncontrolled usage. |
+| `onValueChange?` | `((value: string) => void)` | — | — |
+| `activationMode?` | `'automatic' \| 'manual'` | — | `automatic` (default) selects a tab as soon as it receives focus via arrow keys. `manual` only moves focus — press Enter or Space to select. Web only; native selection follows press. Use `manual` when rendering the next panel is expensive. |
+| `orientation?` | `'horizontal' \| 'vertical'` | — | Layout axis and roving-focus key set. `horizontal` (default) uses ArrowLeft/ArrowRight; `vertical` uses ArrowUp/ArrowDown, per the ARIA APG tabs pattern. |
+| `disabled?` | `boolean` | — | Disables every tab. Disable a single tab with `disabled` on that `Tabs.Tab`. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### Tabs.List
+
+The `tablist` container. It renders the animated selection indicator automatically. Provide an `accessibilityLabel` or `aria-label` because the list has no visible label of its own.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `scrollable?` | `boolean` | `true` | When `orientation="horizontal"`, scroll tab triggers if they overflow the list width. On native, selecting a tab scrolls it into view. On web, edge fades and paging controls appear when more tabs are off-screen. Vertical lists do not scroll. |
+| `showsHorizontalScrollIndicator?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### Tabs.Tab
+
+An individual `tab` trigger. Its required `value` correlates it with the matching panel.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `value` | `string` | — | Required — correlates this tab with its `Tabs.Panel` counterpart. |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### Tabs.TabLabel
+
+The text label inside a tab. It automatically applies active and inactive typography from the parent tab state.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
+
+### Tabs.Panel
+
+The `tabpanel` content region correlated with a tab by `value`. Inactive panels remain mounted and hidden by default; set `unmountWhenInactive` when inactive content should be destroyed.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `value` | `string` | — | Required — correlates this panel with its `Tabs.Tab` counterpart. |
+| `unmountWhenInactive?` | `boolean` | — | Unmount when inactive instead of keeping the panel mounted and hidden. The default keeps it mounted so the tab's `aria-controls` target stays in the tree. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Accessibility
+
+`Tabs.List`, `Tabs.Tab`, and `Tabs.Panel` provide `tablist`, `tab`, and `tabpanel` semantics and connect tabs to panels with `aria-controls` and `aria-labelledby`.
+
+On web, only the selected tab — or the tab that currently has keyboard focus — is in the tab order. `ArrowLeft` and `ArrowRight` move through horizontal tabs; `ArrowUp` and `ArrowDown` move through vertical tabs. Navigation wraps and skips disabled tabs. `Home` and `End` move to the first and last enabled tabs. With `activationMode="automatic"` (default), moving focus selects a tab. With `activationMode="manual"`, press `Enter` or `Space` to select the focused tab. On iOS and Android, focus follows the platform's sequential order. When `value` is controlled, changing it clears keyboard focus on a different tab so arrow keys follow the committed selection.

package/docs/components/text/content.md

@@ -0,0 +1,142 @@
+# Text (https://design.candescent.com/docs/components/text)
+
+Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=400-3), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-text--default)
+
+`Text` wraps React Native's text element with Forge UI typography and content color tokens.
+
+```tsx
+import { Text } from '@cdx-ui/components';
+```
+
+## Basic
+
+```tsx
+import { Text } from '@cdx-ui/components';
+
+export default function TextBasicDemo() {
+  return <Text>The quick brown fox jumps over the lazy dog.</Text>;
+}
+```
+
+## Sizes
+
+Use `size` to select one of the five body typography styles.
+
+```tsx
+import { Box, Text, type TextProps } from '@cdx-ui/components';
+
+const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly NonNullable<
+  TextProps['size']
+>[];
+
+export default function TextSizesDemo() {
+  return (
+    <Box className="gap-3">
+      {SIZES.map((size) => (
+        <Text key={size} size={size}>
+          {size} — The quick brown fox jumps over the lazy dog.
+        </Text>
+      ))}
+    </Box>
+  );
+}
+```
+
+## Colors
+
+Use `color` to select a semantic content color. It maps to the matching theme-aware `text-content-*` token, so prefer it over a color class. A `Text` nested inside another text element — another `Text`, a `Heading`, or a text slot such as `Button.Label` — inherits the parent's `color`, `size` and `weight` unless it sets its own.
+
+```tsx
+import { Box, Text, type TextProps } from '@cdx-ui/components';
+
+const COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'action',
+  'danger',
+  'warning',
+  'success',
+  'info',
+] as const satisfies readonly NonNullable<TextProps['color']>[];
+
+export default function TextColorsDemo() {
+  return (
+    <Box className="gap-3">
+      {COLORS.map((color) => (
+        <Text key={color} color={color}>
+          {color} — The quick brown fox jumps over the lazy dog.
+        </Text>
+      ))}
+      <Text color="secondary" size="sm">
+        Balance updated <Text weight="semibold">just now</Text>
+      </Text>
+    </Box>
+  );
+}
+```
+
+## Weight
+
+Use `weight` to select a font weight. It selects a face of the body family on every platform, so prefer it over a `font-*` weight class.
+
+```tsx
+import { Box, Text, type TextProps } from '@cdx-ui/components';
+
+const WEIGHTS = ['normal', 'medium', 'semibold', 'bold'] as const satisfies readonly NonNullable<
+  TextProps['weight']
+>[];
+
+export default function TextWeightDemo() {
+  return (
+    <Box className="gap-3">
+      {WEIGHTS.map((weight) => (
+        <Text key={weight} weight={weight}>
+          {weight} — The quick brown fox jumps over the lazy dog.
+        </Text>
+      ))}
+    </Box>
+  );
+}
+```
+
+## Italic
+
+Set `italic` to render the text in an italic style.
+
+```tsx
+import { Box, Text, type TextProps } from '@cdx-ui/components';
+
+const WEIGHTS = ['normal', 'medium', 'semibold', 'bold'] as const satisfies readonly NonNullable<
+  TextProps['weight']
+>[];
+
+export default function TextItalicDemo() {
+  return (
+    <Box className="gap-3">
+      {WEIGHTS.map((weight) => (
+        <Text key={weight} weight={weight} italic>
+          {weight} — The quick brown fox jumps over the lazy dog.
+        </Text>
+      ))}
+    </Box>
+  );
+}
+```
+
+## API
+
+### Text
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the text's own styles. |
+| `children?` | `React.ReactNode` | — | Text content, which may include nested `Text` elements. |
+| `color?` | `'primary' \| 'secondary' \| 'tertiary' \| 'action' \| 'danger' \| 'warning' \| 'success' \| 'info'` | `'primary'` | Semantic content color, mapped to the matching `text-content-*` token. A `Text` nested inside another text element inherits its parent's color when omitted. |
+| `weight?` | `'normal' \| 'medium' \| 'semibold' \| 'bold'` | `'normal'` | Font weight. A nested `Text` inherits its parent's weight when omitted. |
+| `italic?` | `boolean \| null` | — | Renders the text in italics. A nested `Text` inherits its parent's style when omitted. |
+| `size?` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Body typography style. A nested `Text` inherits its parent's size when omitted, and setting it keeps the parent's font family and weight. |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props). A top-level `Text` defaults to `color="primary"`, `size="md"` and `weight="normal"`. A nested `Text` inherits each of these from its parent text element when it omits them, along with the parent's font family. Setting only `size` on a nested `Text` changes the size and keeps the parent's font family and weight.
+
+A `View` between two text elements ends the nesting on iOS and Android, so a `Text` inside a `View` inside a `Text` takes the top-level defaults there. On web it keeps inheriting from the outer text. Content rendered through an overlay or portal is never nested in the text it was opened from.