@capra/core 1.5.3 → 1.6.0

package/docs/core-skeleton--design.md

@@ -0,0 +1,88 @@
+# Core/Skeleton - Design
+
+A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.
+
+## Properties
+
+### Title width
+
+The title width can be controlled using the `titleWidth` prop.
+
+### Paragraph
+
+The paragraph rows and width can be controlled using the `paragraph` prop.
+
+### Loading
+
+The loading state can be controlled using the `loading` prop.
+
+### Round
+
+The paragraph and title radius can be controlled using the `round` prop.
+
+### Active
+
+The animation effect can be controlled using the `active` prop.
+
+## Usage
+
+### When to use
+
+* When a resource needs long time to load
+* When the component contains lots of information (List, Card)
+* Only when loading data for the first time
+
+### When to consider something else
+
+* If the visual layout of the page is not known
+* If you need to indicate processing (use Spinner)
+* If the content can be pre-loaded without a skeleton
+
+## Best Practices
+
+**Do**
+
+<p>
+  Do maintain consistent skeleton coloring.
+</p>
+
+**Don't**
+
+<p>
+  Don't change the color of skeletons.
+</p>
+
+**Do**
+
+<p>
+  Do use skeleton loading by itself.
+</p>
+
+**Don't**
+
+<p>
+  Don't combine skeleton loading with other spinners, or other loading indicators.
+</p>
+
+## Accessibility
+
+### Alternative text
+
+The loading skeleton requires an appropriate accessible role and label.
+
+**Landmark details:**
+
+* **element**: `span` (root container)
+* **aria-label**: `"Loading"` (when loading)
+* **role**: `status` (live region)
+* **aria-busy**: `true` (when loading)
+
+<img className="w-full" src="images/guidelines/skeleton/alternative-text.png" alt="Skeleton with accessibility landmark annotation showing element, aria-label, and role" />
+
+### Color contrast
+
+Graphics and user interface components like skeletons are not required to meet minimum contrast.
+
+### Motion
+
+When `active` is true, the skeleton shows a gradient shimmer animation. The animation is automatically disabled when the user has `prefers-reduced-motion: reduce` set.

package/docs/core-skeleton--usage.md

@@ -0,0 +1,13 @@
+# Core/Skeleton - Usage
+
+A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `loading` | `boolean` | No | `--` | Display the skeleton when true.<br>@default true |
+| `title` | `SkeletonTitleProps \| boolean` | No | `--` | Show title placeholder.<br>@default true |
+| `paragraph` | `SkeletonParagraphProps \| boolean` | No | `--` | Show paragraph placeholder.<br>@default true |
+| `round` | `boolean` | No | `--` | Show paragraph and title radius when true.<br>@default false |
+| `active` | `boolean` | No | `--` | Show animation effect. Respects prefers-reduced-motion.<br>@default false |
+| `children` | `React.ReactNode` | No | `--` | When set together with `loading`: if `loading` is false, only `children`<br>are rendered (no skeleton). If `loading` is true, the skeleton is shown instead — for preset<br>layouts (title and/or paragraph) children are not mounted while loading; in element mode<br>(`title={false}` and `paragraph={false}`) children render inside the placeholder while loading. |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-skeletongroup--design.md

@@ -0,0 +1,50 @@
+# Core/SkeletonGroup - Design
+
+### SkeletonGroup.Button
+
+Button-shaped placeholder.
+
+### SkeletonGroup.Input
+
+Input-shaped placeholder.
+
+### SkeletonGroup.Node
+
+Custom content placeholder.
+
+## Preset layouts
+
+SkeletonGroup provides standalone skeleton shapes. Use `Skeleton` for the preset title+paragraph layout.
+
+## Best Practices
+
+**Do**
+
+Do maintain consistent skeleton coloring.
+
+**Don't**
+
+Don't change the color of skeletons.
+
+## Accessibility
+
+### Alternative text
+
+The loading skeleton requires an appropriate accessible role and label.
+
+**Landmark details:**
+
+* **element**: `span` (root container)
+* **aria-label**: `"Loading"` (when loading)
+* **role**: `status` (live region)
+* **aria-busy**: `true` (when loading)
+
+<img className="w-full" src="images/guidelines/skeleton/alternative-text.png" alt="Skeleton with accessibility landmark annotation showing element, aria-label, and role" />
+
+### Color contrast
+
+Graphics and user interface components like skeletons are not required to meet minimum contrast.
+
+### Motion
+
+When `active` is true, the skeleton shows a gradient shimmer animation. The animation is automatically disabled when the user has `prefers-reduced-motion: reduce` set.

package/docs/core-skeletongroup--usage.md

@@ -0,0 +1,10 @@
+# Core/SkeletonGroup - Usage
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `style` | `React.CSSProperties` | No | `--` | `--` |
+| `size` | `keyof typeof SKELETON_SIZE` | No | `--` | Preset dimensions from `dimension.component.*`; use `style` for custom width/height. |
+| `active` | `boolean` | No | `--` | Show animation effect. @default false |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
+| `block` | `boolean` | No | `--` | `--` |
+| `shape` | `'circle' \| 'round' \| 'square' \| 'default'` | No | `--` | `--` |

package/docs/core-spinner--design.md

@@ -0,0 +1,99 @@
+# Core/Spinner - Design
+
+The Spinner component is used to display a loading state. It can be used in two modes: **Mode 1 - Standalone Spinner:**
+
+<p>
+  A spinner is a visual indicator of an ongoing, user-initiated process.
+</p>
+
+## Modes
+
+### Replacement Mode
+
+<p>
+  Use Replacement Mode when you want to completely hide content while loading and show the spinner instead. This is ideal for initial page loads, route transitions, or when fetching data that's required before any content can be displayed. The content and spinner never appear simultaneously—the component returns early with just the spinner when loading.
+</p>
+
+<p>
+  This mode is best for scenarios where showing partial or stale content would be confusing or misleading to users.
+</p>
+
+<p>
+  <pre>
+    ```tsx
+    if (isLoading) {
+      return <Spinner title="Loading..." />;
+    }
+    return <div>Content</div>;
+    ```
+  </pre>
+</p>
+
+### Overlay Mode
+
+<p>
+  Use Overlay Mode when you want to keep content visible while indicating an ongoing operation. The spinner appears
+  as an overlay, allowing users to see what they're waiting for or maintain context during the loading process. This
+  is perfect for refreshing data, submitting forms, or updating specific sections of a page.
+</p>
+
+<p>
+  This mode works well for progressive enhancement scenarios, search results that are being refined, or any
+  situation where the existing content provides value even during loading. It's particularly useful when you want to
+  prevent user interaction temporarily without completely removing the content from view, such as during a save
+  operation or background data synchronization.
+</p>
+
+<p>
+  <pre>
+    ```tsx
+    <Spinner title="Loading..." isPending={isLoading}>
+      <div>Content will be shown always</div>
+      <div>Will be blurred if the spinner is visible</div>
+    </Spinner>
+    ```
+  </pre>
+</p>
+
+## Properties
+
+### Label
+
+<p>
+  A label can be added to the spinner to better inform users during a loading process. Common situations in which
+  they are used include navigating to a page that is not fully known beforehand (e.g., a dashboard), or loading a
+  large set of data.
+</p>
+
+### Sizes
+
+<p>
+  Small spinners are used when in cards or other inline components. Medium spinners are the default and are
+  displayed when it represents a larger portion of the page, such as a primary data table. The large size can be
+  used when all, or most, of the page content is being loaded.
+</p>
+
+## Accessibility
+
+### Keyboard interaction
+
+<p>
+  A spinner is not a focusable element.
+</p>
+
+### Labeling
+
+<p>
+  When possible, supplement spinners with textual indicators to clarify the purpose and state.
+</p>
+
+### Focus order
+
+<p>
+  If the spinner is a blocking interaction, make sure to return focus to a relevant action once loading is complete.
+</p>
+
+### Aria considerations
+
+* Use `aria-live="polite"` to enable screen readers to notify users of the loading state.
+* When the loading state ends, remove the spinner from the DOM or hide it with `aria-hidden="true"`.

package/docs/core-spinner--usage.md

@@ -0,0 +1,11 @@
+# Core/Spinner - Usage
+
+The Spinner component is used to display a loading state. It can be used in two modes: **Mode 1 - Standalone Spinner:**
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | No | `--` | The size of the Spinner. @default "md" |
+| `title` | `string` | No | `--` | (optional) The title to display in the Spinner. |
+| `children` | `React.ReactNode` | No | `--` | The content to display inside the Spinner. When provided, Spinner acts as a wrapper with overlay. |
+| `isPending` | `boolean` | No | `--` | Whether the Spinner is visible. Only used when children are provided. @default true |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-switch--design.md

@@ -0,0 +1,145 @@
+# Core/Switch - Design
+
+## Properties
+
+### Label
+
+Switches must be paired with an accessible label, using text that clearly describes the action being performed in 1
+to 3 words. The language of the label should be phrased in a way that a response of “on”/“off” or “yes”/”no” makes
+sense to the user.
+
+<img src="images/guidelines/switch/example-1.png" />
+
+### Size
+
+Switches come in two different sizes. Medium is the default and preferred size for most situations. Small size is
+used when a switch is inline with another element, such as a table or popover.
+
+<img src="images/guidelines/switch/example-2.png" />
+
+### Selected
+
+Switches appear as either selected (on) or unselected (off). Switches cannot be in an indefinite state.
+
+<img src="images/guidelines/switch/example-3.png" />
+
+### Disabled
+
+Switches can be disabled in either a selected or unselected state if there is a prerequisite to altering its state.
+
+<img src="images/guidelines/switch/example-4.png" />
+
+## Behavior
+
+### Immediate
+
+Switches immediately update the state of the application or UI when their state changes. If a delay is necessary, a
+loading indicator should be used to inform the user that the process is taking longer.
+
+<img src="images/guidelines/switch/example-5.png" />
+
+### Labels
+
+Avoid using the words “on” or “off” within the label. Switches imply an on/off state so including it in the label is
+redundant.
+
+<img src="images/guidelines/switch/example-6.png" />
+
+## Best Practices
+
+### Labels
+
+**Do**
+
+<img src="images/guidelines/switch/example-7.png" />
+
+Do use clear and concise labels.
+
+**Don't**
+
+<img src="images/guidelines/switch/example-8.png" />
+
+Avoid using action-related verbs with “on” or “off” when adding labels to controls. Switches imply an on/off state
+so including it in the label is redundant.
+
+### Placement
+
+**Do**
+
+<img src="images/guidelines/switch/example-9.png" />
+
+Do use switches as trailing elements.
+
+**Don't**
+
+<img src="images/guidelines/switch/example-10.png" />
+
+Don’t use switches as leading elements.
+
+**Do**
+
+<img src="images/guidelines/switch/example-11.png" />
+
+Do ensure switches are either aligned with the grid or with each other when multiple switches are stacked.
+
+**Don't**
+
+<img src="images/guidelines/switch/example-12.png" />
+
+Don't misalign switches by placing them immediately after labels when multiple switches are stacked, as this can
+affect legibility.
+
+### Checkbox vs Switch
+
+**Do**
+
+<img src="images/guidelines/switch/example-13.png" />
+
+If the action is part of a larger form, use a checkbox instead. The items will be submitted with the rest of the
+form details.
+
+**Don't**
+
+<img src="images/guidelines/switch/example-14.png" />
+
+Switches apply changes immediately and don't require the user to submit anything. If you need to include the data in
+form content, use a checkbox set.
+
+### Radio vs Switch
+
+**Do**
+
+<img src="images/guidelines/switch/example-15.png" />
+
+Switches are used for activation, not selection. If you are selecting between two available options, use a radio set
+instead.
+
+**Don't**
+
+<img src="images/guidelines/switch/example-16.png" />
+
+Switches should not be used to choose between opposing or discrete options. Instead, use switches for on/off
+situations.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Key                    | Function                                                      |
+| ---------------------- | ------------------------------------------------------------- |
+| `Tab`<br />`Shift-Tab` | Moves focus into/out of the switch.                           |
+| `Space`                | When focus is on the switch, changes the state of the switch. |
+
+### WAI-ARIA Roles, States, and Properties
+
+* The switch has `role=switch`.
+* The switch has an accessible label provided by one of the following:
+  * Visible text content contained within the element with `role=switch`.
+  * A visible label referenced by the value of `aria-labelledby` set on the element with `role=switch`.
+  * `aria-label` set on the element with `role=switch`.
+* When on, the switch element has state `aria-checked` set to true.
+* When off, the switch element has state `aria-checked` set to false.
+* If a set of switches is presented as a logical group with a visible label, either:
+  * The switches are included in an element with `role=group` that has the property `aria-labelledby` set to the ID of the element containing the group label.
+  * The set is contained in an HTML `<fieldset>` and the label for the set is contained in an HTML `<legend>` element.
+* If the presentation includes additional descriptive static text relevant to a switch or switch group, the switch or switch group has the property `aria-describedby` set to the ID of the element containing the description.

package/docs/core-switch--usage.md

@@ -0,0 +1,8 @@
+# Core/Switch - Usage
+
+### Switch
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `size` | `'sm' \| 'md'` | No | `--` | `--` |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-tabnav--design.md

@@ -0,0 +1,77 @@
+# Core/TabNav - Design
+
+TabNav provides a horizontal or vertical navigation styled as tabs. Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs use an inline indented list (Tab Nav | Vertical in Figma).
+
+Tabs and TabNav organize and manage content allowing users to navigate between different sections within the current context.
+
+* **Tabs** organize content sections to be displayed at one time. They are displayed in Modals, Drawers, and other content panels.
+* **TabNav** is a navigation menu with links, styled as tabs. They are used in Page Headers and other places where navigation is needed.
+
+## Properties
+
+### Label
+
+Every tab must have a brief but descriptive label.
+
+### Variant
+
+TabNav has two variants:
+
+* **Default**: a single navigational link.
+* **Dropdown**: a dropdown menu that displays a ListBox with additional navigational links.
+
+## Content
+
+### Labels
+
+Tab labels should be one or two words, using title case (Tab Label). Labels should be less than 12 characters, with a maximum of 32 characters.
+
+## Best Practices
+
+**Do**
+
+<p>
+  Do follow the maximum character length of tab labels.
+</p>
+
+**Don't**
+
+<p>
+  Don't exceed the 32 maximum character length.
+</p>
+
+**Do**
+
+<p>
+  Do keep tab labels short and concise.
+</p>
+
+**Don't**
+
+<p>
+  Don't wrap tab labels.
+</p>
+
+## Accessibility
+
+### Keyboard interaction
+
+| Key                          | Function                                                                                                                                                                         |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab` / `Shift + Tab`        | Moves focus into the tab list, putting focus onto the active tab. When the tab list has focus, moves focus to the next focusable element (generally within the tab panel).       |
+| `Left Arrow` / `Up Arrow`    | Moves focus to, and activate, the previous tab. If focus is on the first tab, move focus to the last tab. Up performs the same action when `aria-orientation="vertical"` is set. |
+| `Right Arrow` / `Down Arrow` | Moves focus to, and activate, the next tab. If focus is on the last tab, move focus to the first tab. Down performs the same action when `aria-orientation="vertical"` is set.   |
+| `Shift+F10`                  | Opens the menu for tabs with a dropdown.                                                                                                                                         |
+
+### ARIA considerations
+
+TabNav uses link-based navigation. The following apply:
+
+* The container has `role="navigation"` with an `aria-label` for the navigation.
+* Active nav links have `aria-current="page"` set.
+* Tabs that contain a dropdown use a button with `aria-haspopup="menu"` and `aria-expanded` set.
+* Dropdown menu items use the Menu component with appropriate roles.
+
+### Orientation
+
+Use `tabPlacement="horizontal"` (default) for a horizontal tab bar at the bottom, or `tabPlacement="vertical"` for a vertical tab bar on the left. Vertical tabs have `aria-orientation="vertical"` set.

package/docs/core-tabnav--usage.md

@@ -0,0 +1,63 @@
+# Core/TabNav - Usage
+
+TabNav provides a horizontal or vertical navigation styled as tabs. Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs use an inline indented list (Tab Nav | Vertical in Figma).
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
+| `activeKey` | `string` | No | `--` | Key of the currently active tab (for visual styling). Typically derived from the current URL. |
+| `onTabClick` | `(key: string, event: React.MouseEvent) => void` | No | `--` | Callback when a tab link is clicked (before navigation). |
+| `items` | `TabNavItemType[]` | Yes | `--` | Tab items configuration. |
+| `tabPlacement` | `(typeof tabNavPlacements)[number]` | No | 'horizontal' | Orientation of the tab bar: horizontal (bottom) or vertical (left).<br>@default 'horizontal' |
+| `centered` | `boolean` | No | false | Whether to center the tabs.<br>@default false |
+| `tabBarExtraSlot` | `React.ReactNode` | No | `--` | Slot for extra content in the tab bar (e.g. right side). |
+| `wrap` | `boolean` | No | true | Whether tab items can wrap to multiple lines.<br>@default true |
+| `aria-label` | `string` | No | 'Navigation' | `--` |
+
+## Usage
+
+```tsx
+import { TabNav } from '@capra/core';
+
+// Basic usage - tab items are links that redirect to URLs
+<TabNav
+  activeKey={currentPath}
+  items={[
+    { key: '1', name: 'Tab 1', href: '/tab1' },
+    { key: '2', name: 'Tab 2', href: '/tab2' },
+  ]}
+/>
+
+// Optional `name` (visible) + `aria-label` on the item when the accessible name differs
+<TabNav
+  activeKey="overview"
+  items={[
+    { key: 'overview', name: 'Overview', 'aria-label': 'Tab 1, 1 of 3, selected', href: '/overview' },
+  ]}
+/>
+
+// With icons and disabled tab
+<TabNav
+  activeKey="1"
+  items={[
+    { key: '1', name: 'Search', icon: <SearchOutlined size="sm" />, href: '/search' },
+    { key: '2', name: 'Disabled', disabled: true, href: '/disabled' },
+  ]}
+/>
+
+// With subnav dropdown (tabs with subItems show a chevron and open a menu on click)
+<TabNav
+  activeKey="overview::summary"
+  items={[
+    {
+      key: 'overview',
+      name: 'Overview',
+      subItems: [
+        { key: 'summary', name: 'Summary', href: '/overview/summary' },
+        { key: 'details', name: 'Details', href: '/overview/details' },
+      ],
+    },
+    { key: 'settings', name: 'Settings', href: '/settings' },
+  ]}
+/>
+```

package/docs/core-tag--design.md

@@ -0,0 +1,21 @@
+# Core/Tag - Design
+
+A tag component for displaying a label and an optional icon.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Key                    | Function                                              |
+| ---------------------- | ----------------------------------------------------- |
+| `Tab`<br />`Shift-Tab` | Moves focus to the next/previous interactive element. |
+| `Space`                | If the tag's remove icon has focus, remove the tag.   |
+
+All buttons exist in the page's natural tab sequence, reachable via `Tab` and `Shift+Tab` keys. Pressing `Spacebar` or `Enter` activates the focused button.
+
+### Draggability
+
+The tag can be made draggable by setting the `draggable` prop to `true`. When the tag is draggable, the user can drag the tag to a new position in the list.
+The drag handle provides an onKeyDown handler that allows the user to drag the tag with the keyboard.
+
+NOTE: The keyboard accessibility of the drag functionality is not defined, and is not part of this component.

package/docs/core-tag--usage.md

@@ -0,0 +1,11 @@
+# Core/Tag - Usage
+
+A tag component for displaying a label and an optional icon.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `(typeof tagColors)[number]` | No | 'default' | The color of the tag. Defaults to `default`. |
+| `icon` | `SvgIcon \| SvgLogo` | No | `--` | The icon or logo to display in the tag. |
+| `children` | `string` | Yes | `--` | The label text to display in the tag. |
+| `onDelete` | `() => void` | No | `--` | The callback function for when the user clicks the delete button. |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-text--design.md

@@ -0,0 +1,32 @@
+# Core/Text - Design
+
+Component for displaying text. The visual display can be controlled via `variant`. The underlying HTML element can be controlled via the `as` prop, which defaults to a `span` tag.
+
+## Properties
+
+### Text
+
+A text component isn't very useful if you're not going to put some text in it.
+
+### Variant
+
+Variant describe the contextual purpose of the text. Text may be: heading, to create logic sections within the UI
+body, for regular text throughout the UI metric, to display in graphs and data visualizations code, to display
+monospace code snippets
+
+### Color
+
+Text inherits color from its container element. In some cases text color may be adjusted outside its container's intention.
+
+### As
+
+Gives semantic meaning to the Text variant (style), setting the underlying element rendered by the component.
+
+## Accessibility
+
+### Guidelines
+
+Key factors to follow for an accessible typography:
+
+* Color. Provide enough contrast between text and its background, check out the minimum recommended [WCAG 2.2 color contrast ratio](https://www.w3.org/TR/WCAG22/#contrast-minimum) (4.5:1).
+* Heading hierarchy. Based on the [W3 guidelines](https://www.w3.org/WAI/tutorials/page-structure/headings/), don't skip heading levels. Make sure to separate the semantics from the style.

package/docs/core-text--usage.md

@@ -0,0 +1,10 @@
+# Core/Text - Usage
+
+Component for displaying text. The visual display can be controlled via `variant`. The underlying HTML element can be controlled via the `as` prop, which defaults to a `span` tag.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `variant` | `(typeof variants)[number]` | No | `--` | The text style variant. Defaults to `body`. |
+| `color` | `Color \| 'inherit'` | No | `--` | The text foreground color. Can be a theme color or inherited from the environment. Defaults to `inherit`.<br>@default inherit |
+| `as` | `As` | No | `--` | The underlying element rendered by the component. Defaults to `span`. |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |