@ttoss/fsl-ui 0.2.4 → 0.2.6

package/dist/components/Table/Table.mjs

@@ -0,0 +1,239 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { Icon } from "../Icon/Icon.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Column, Row, Table, TableBody, TableHeader } from "react-aria-components";
+
+//#region src/components/Table/Table.tsx
+/** Formal semantic identity — Table root (Collection entity, surface). */
+var tableMeta = {
+  displayName: "Table",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — TableColumn header (Collection `title` role). */
+var tableColumnMeta = {
+  displayName: "TableColumn",
+  entity: "Collection",
+  structure: "title"
+};
+/** Formal semantic identity — TableRow (Selection entity, selectable row). */
+var tableRowMeta = {
+  displayName: "TableRow",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Formal semantic identity — TableCell (Collection `content` role). */
+var tableCellMeta = {
+  displayName: "TableCell",
+  entity: "Collection",
+  structure: "content"
+};
+/**
+* A semantic data table built on React Aria's `Table` — column headers,
+* keyboard grid navigation, sorting, and row selection.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `TableRow` is Entity = Selection (`input` chrome, the
+* `selected` State). Compose `TableHeader` + `TableColumn` for the header
+* and `TableBody` + `TableRow` + `TableCell` for the data. Sorting is
+* controlled via `sortDescriptor`/`onSortChange` with `allowsSorting` on the
+* sortable columns. Row selection uses React Aria's `selectionMode`;
+* clicking a row toggles it (there is no checkbox column yet — it ships
+* when a consumer demands bulk actions).
+*
+* @example
+* ```tsx
+* <Table aria-label="Team" sortDescriptor={sort} onSortChange={setSort}>
+*   <TableHeader>
+*     <TableColumn id="name" isRowHeader allowsSorting>Name</TableColumn>
+*     <TableColumn id="role">Role</TableColumn>
+*   </TableHeader>
+*   <TableBody>
+*     <TableRow id="ada">
+*       <TableCell>Ada Lovelace</TableCell>
+*       <TableCell>Admin</TableCell>
+*     </TableRow>
+*   </TableBody>
+* </Table>
+* ```
+*/
+var Table$1 = props => {
+  const surface = vars.colors.informational.primary;
+  return /* @__PURE__ */jsx(Table, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      inlineSize: "100%",
+      borderCollapse: "separate",
+      borderSpacing: 0,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default,
+      color: surface?.text?.default
+    }
+  });
+};
+Table$1.displayName = tableMeta.displayName;
+/**
+* The header row group. An internal frame part — place `TableColumn`s
+* inside it.
+*/
+var TableHeader$1 = props => {
+  return /* @__PURE__ */jsx(TableHeader, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "header"
+  });
+};
+TableHeader$1.displayName = "TableHeader";
+/**
+* A column header (Collection `title` role). With `allowsSorting`, React
+* Aria makes it a keyboard-operable sort control (`aria-sort` included) and
+* the current direction renders as an arrow Icon
+* (`action.sortAscending` / `action.sortDescending`).
+*
+* Set `isRowHeader` on the column whose cells name the row for assistive
+* technology.
+*/
+var TableColumn = ({
+  children,
+  ...props
+}) => {
+  const colors = vars.colors.informational.muted;
+  return /* @__PURE__ */jsx(Column, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "title",
+    style: ({
+      allowsSorting,
+      isHovered,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        textAlign: "start",
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        ...vars.text.label.sm,
+        cursor: allowsSorting ? "pointer" : void 0,
+        transitionProperty: "color",
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        color: allowsSorting ? resolveInteractiveStyle(colors?.text, {
+          isHovered
+        }) : colors?.text?.default,
+        borderBlockEndWidth: vars.border.divider.width,
+        borderBlockEndStyle: vars.border.divider.style,
+        borderBlockEndColor: colors?.border?.default ?? "transparent",
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    },
+    children: ({
+      allowsSorting,
+      sortDirection
+    }) => {
+      return /* @__PURE__ */jsxs("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: vars.spacing.gap.inline.sm
+        },
+        children: [children, allowsSorting && sortDirection && /* @__PURE__ */jsx(Icon, {
+          intent: sortDirection === "ascending" ? "action.sortAscending" : "action.sortDescending",
+          size: "sm"
+        })]
+      });
+    }
+  });
+};
+TableColumn.displayName = tableColumnMeta.displayName;
+/** The data row group. An internal frame part — place `TableRow`s inside. */
+var TableBody$1 = props => {
+  return /* @__PURE__ */jsx(TableBody, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "body"
+  });
+};
+TableBody$1.displayName = "TableBody";
+/**
+* A single data row. Entity = Selection → reads `vars.colors.input.*` and
+* surfaces the `selected` State when the parent Table has a `selectionMode`.
+*/
+var TableRow = props => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Row, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "item",
+    style: ({
+      isSelected,
+      isHovered,
+      isFocusVisible,
+      isDisabled,
+      selectionMode
+    }) => {
+      return {
+        boxSizing: "border-box",
+        blockSize: vars.sizing.hit,
+        cursor: selectionMode === "none" ? void 0 : isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? vars.opacity.disabled : void 0,
+        transitionProperty: "background-color, color",
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        backgroundColor: resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered: isHovered && selectionMode !== "none"
+        }),
+        color: resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected
+        }),
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    }
+  });
+};
+TableRow.displayName = tableRowMeta.displayName;
+/**
+* A data cell (Collection `content` role). Focusable during keyboard grid
+* navigation; typography and color inherit from the row.
+*/
+var TableCell = props => {
+  const colors = vars.colors.informational.muted;
+  return /* @__PURE__ */jsx(Cell, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "content",
+    style: ({
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        ...vars.text.body.sm,
+        borderBlockEndWidth: vars.border.divider.width,
+        borderBlockEndStyle: vars.border.divider.style,
+        borderBlockEndColor: colors?.border?.default ?? "transparent",
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    }
+  });
+};
+TableCell.displayName = tableCellMeta.displayName;
+
+//#endregion
+export { Table$1 as Table, TableBody$1 as TableBody, TableCell, TableColumn, TableHeader$1 as TableHeader, TableRow, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta };

package/dist/components/Tabs/Tabs.cjs

@@ -1,9 +1,12 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+let react = require("react");
+react = require_runtime.__toESM(react);
 
 //#region src/components/Tabs/Tabs.tsx
 /** Formal semantic identity — Tabs root (Navigation entity). */
@@ -47,21 +50,30 @@ var tabPanelMeta = {
 * </Tabs>
 * ```
 */
+/**
+* Orientation reaches `Tab` through this context — RAC exposes it in
+* `TabList`'s render props but not in `Tab`'s, and the selected-tab
+* indicator must switch edges with the orientation (friction F-003).
+*/
+var TabsOrientationContext = react.createContext("horizontal");
 var Tabs = ({
   orientation = "horizontal",
   ...props
 }) => {
-  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tabs, {
-    ...props,
-    orientation,
-    "data-scope": "tabs",
-    "data-part": "root",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      flexDirection: orientation === "vertical" ? "row" : "column",
-      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
-    }
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(TabsOrientationContext.Provider, {
+    value: orientation,
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tabs, {
+      ...props,
+      orientation,
+      "data-scope": "tabs",
+      "data-part": "root",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "row" : "column",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
+      }
+    })
   });
 };
 Tabs.displayName = tabsMeta.displayName;
@@ -74,23 +86,62 @@ var TabList = props => {
     ...props,
     "data-scope": "tabs",
     "data-part": "control",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
-      borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
-      borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
-      borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+    style: ({
+      orientation
+    }) => {
+      const isVertical = orientation === "vertical";
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        gap: isVertical ? _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm : _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+        ...(isVertical ? {
+          borderInlineEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+          borderInlineEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+          borderInlineEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+        } : {
+          borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+          borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+          borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+        })
+      };
     }
   });
 };
 TabList.displayName = tabListMeta.displayName;
 /**
+* Style for the decorative active-tab indicator line — block-end underline
+* when horizontal, inline-start bar when vertical (F-003).
+*/
+var tabIndicatorStyle = orientation => {
+  const color = _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.current ?? _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.default;
+  const style = _ttoss_fsl_theme_vars.vars.border.outline.control.style;
+  if (orientation === "vertical") return {
+    position: "absolute",
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    insetInlineStart: 0,
+    borderInlineStartWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
+    borderInlineStartStyle: style,
+    borderInlineStartColor: color
+  };
+  return {
+    position: "absolute",
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+    borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
+    borderBlockEndStyle: style,
+    borderBlockEndColor: color
+  };
+};
+/**
 * A single selectable tab. The selected tab reads the navigation `current`
 * color and shows an underline indicator; others use hover/default.
 */
 var Tab = props => {
   const colors = _ttoss_fsl_theme_vars.vars.colors.navigation.primary;
+  const orientation = react.useContext(TabsOrientationContext);
   return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tab, {
     ...props,
     "data-scope": "tabs",
@@ -131,15 +182,7 @@ var Tab = props => {
           "data-scope": "tabs",
           "data-part": "indicator",
           "aria-hidden": true,
-          style: {
-            position: "absolute",
-            insetInlineStart: 0,
-            insetInlineEnd: 0,
-            insetBlockEnd: 0,
-            borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
-            borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
-            borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.current ?? _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.default
-          }
+          style: tabIndicatorStyle(orientation)
         })]
       });
     }

package/dist/components/Tabs/Tabs.d.cts

@@ -28,23 +28,6 @@ declare const tabPanelMeta: {
 };
 /** Props for the Tabs root. */
 type TabsProps$1 = Omit<TabsProps, 'style'>;
-/**
- * A tabbed navigation widget (Navigation entity). Compose with `TabList` +
- * `Tab` for the switcher and `TabPanel` for each view. React Aria manages
- * selection, arrow-key navigation, and panel association.
- *
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList aria-label="Sections">
- *     <Tab id="a">Overview</Tab>
- *     <Tab id="b">Details</Tab>
- *   </TabList>
- *   <TabPanel id="a">Overview content</TabPanel>
- *   <TabPanel id="b">Details content</TabPanel>
- * </Tabs>
- * ```
- */
 declare const Tabs: {
   ({
     orientation,

package/dist/components/Tabs/Tabs.d.mts

@@ -28,23 +28,6 @@ declare const tabPanelMeta: {
 };
 /** Props for the Tabs root. */
 type TabsProps$1 = Omit<TabsProps, 'style'>;
-/**
- * A tabbed navigation widget (Navigation entity). Compose with `TabList` +
- * `Tab` for the switcher and `TabPanel` for each view. React Aria manages
- * selection, arrow-key navigation, and panel association.
- *
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList aria-label="Sections">
- *     <Tab id="a">Overview</Tab>
- *     <Tab id="b">Details</Tab>
- *   </TabList>
- *   <TabPanel id="a">Overview content</TabPanel>
- *   <TabPanel id="b">Details content</TabPanel>
- * </Tabs>
- * ```
- */
 declare const Tabs$1: {
   ({
     orientation,

package/dist/components/Tabs/Tabs.mjs

@@ -2,8 +2,9 @@
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import * as React from "react";
 
 //#region src/components/Tabs/Tabs.tsx
 /** Formal semantic identity — Tabs root (Navigation entity). */
@@ -47,21 +48,30 @@ var tabPanelMeta = {
 * </Tabs>
 * ```
 */
+/**
+* Orientation reaches `Tab` through this context — RAC exposes it in
+* `TabList`'s render props but not in `Tab`'s, and the selected-tab
+* indicator must switch edges with the orientation (friction F-003).
+*/
+var TabsOrientationContext = React.createContext("horizontal");
 var Tabs$1 = ({
   orientation = "horizontal",
   ...props
 }) => {
-  return /* @__PURE__ */jsx(Tabs, {
-    ...props,
-    orientation,
-    "data-scope": "tabs",
-    "data-part": "root",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      flexDirection: orientation === "vertical" ? "row" : "column",
-      gap: vars.spacing.gap.stack.sm
-    }
+  return /* @__PURE__ */jsx(TabsOrientationContext.Provider, {
+    value: orientation,
+    children: /* @__PURE__ */jsx(Tabs, {
+      ...props,
+      orientation,
+      "data-scope": "tabs",
+      "data-part": "root",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "row" : "column",
+        gap: vars.spacing.gap.stack.sm
+      }
+    })
   });
 };
 Tabs$1.displayName = tabsMeta.displayName;
@@ -74,23 +84,62 @@ var TabList$1 = props => {
     ...props,
     "data-scope": "tabs",
     "data-part": "control",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      gap: vars.spacing.gap.inline.sm,
-      borderBlockEndWidth: vars.border.divider.width,
-      borderBlockEndStyle: vars.border.divider.style,
-      borderBlockEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+    style: ({
+      orientation
+    }) => {
+      const isVertical = orientation === "vertical";
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        gap: isVertical ? vars.spacing.gap.stack.sm : vars.spacing.gap.inline.sm,
+        ...(isVertical ? {
+          borderInlineEndWidth: vars.border.divider.width,
+          borderInlineEndStyle: vars.border.divider.style,
+          borderInlineEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+        } : {
+          borderBlockEndWidth: vars.border.divider.width,
+          borderBlockEndStyle: vars.border.divider.style,
+          borderBlockEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+        })
+      };
     }
   });
 };
 TabList$1.displayName = tabListMeta.displayName;
 /**
+* Style for the decorative active-tab indicator line — block-end underline
+* when horizontal, inline-start bar when vertical (F-003).
+*/
+var tabIndicatorStyle = orientation => {
+  const color = vars.colors.navigation.primary?.border?.current ?? vars.colors.navigation.primary?.border?.default;
+  const style = vars.border.outline.control.style;
+  if (orientation === "vertical") return {
+    position: "absolute",
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    insetInlineStart: 0,
+    borderInlineStartWidth: vars.border.outline.selected.width,
+    borderInlineStartStyle: style,
+    borderInlineStartColor: color
+  };
+  return {
+    position: "absolute",
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+    borderBlockEndWidth: vars.border.outline.selected.width,
+    borderBlockEndStyle: style,
+    borderBlockEndColor: color
+  };
+};
+/**
 * A single selectable tab. The selected tab reads the navigation `current`
 * color and shows an underline indicator; others use hover/default.
 */
 var Tab$1 = props => {
   const colors = vars.colors.navigation.primary;
+  const orientation = React.useContext(TabsOrientationContext);
   return /* @__PURE__ */jsx(Tab, {
     ...props,
     "data-scope": "tabs",
@@ -131,15 +180,7 @@ var Tab$1 = props => {
           "data-scope": "tabs",
           "data-part": "indicator",
           "aria-hidden": true,
-          style: {
-            position: "absolute",
-            insetInlineStart: 0,
-            insetInlineEnd: 0,
-            insetBlockEnd: 0,
-            borderBlockEndWidth: vars.border.outline.selected.width,
-            borderBlockEndStyle: vars.border.outline.control.style,
-            borderBlockEndColor: vars.colors.navigation.primary?.border?.current ?? vars.colors.navigation.primary?.border?.default
-          }
+          style: tabIndicatorStyle(orientation)
         })]
       });
     }

package/dist/components/Text/Text.cjs

@@ -0,0 +1,70 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Text/Text.tsx
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+var textMeta = {
+  displayName: "Text",
+  entity: "Structure",
+  structure: "root"
+};
+/** Typography token per variant — the scale reaches the DOM only here. */
+var TYPE_BY_VARIANT = {
+  "display-sm": _ttoss_fsl_theme_vars.vars.text.display.sm,
+  "body-lg": _ttoss_fsl_theme_vars.vars.text.body.lg,
+  "body-md": _ttoss_fsl_theme_vars.vars.text.body.md,
+  "body-sm": _ttoss_fsl_theme_vars.vars.text.body.sm,
+  "label-lg": _ttoss_fsl_theme_vars.vars.text.label.lg,
+  "label-md": _ttoss_fsl_theme_vars.vars.text.label.md,
+  "label-sm": _ttoss_fsl_theme_vars.vars.text.label.sm
+};
+/** Muted text colour; `default` tone inherits (no colour set). */
+var colorForTone = tone => {
+  return tone === "muted" ? _ttoss_fsl_theme_vars.vars.colors.informational.muted.text?.default : "inherit";
+};
+/**
+* Running copy and labels bound to the FSL type scale.
+*
+* Entity = Structure. `variant` picks the step of the body/label scale — there
+* is no raw font-size vocabulary, which is how the theme's typography reaches
+* the screen consistently. `tone="muted"` is the sanctioned way to build text
+* hierarchy (secondary copy recedes); otherwise colour is inherited from the
+* surface.
+*
+* @example
+* ```tsx
+* <Text>Your changes are saved automatically.</Text>
+* <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+* ```
+*/
+var Text = ({
+  variant = "body-md",
+  tone = "default",
+  align = "start",
+  numeric = "normal",
+  as = "p",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(as, {
+    ...props,
+    "data-scope": "text",
+    "data-part": "root",
+    "data-variant": variant,
+    "data-tone": tone,
+    style: {
+      margin: 0,
+      color: colorForTone(tone),
+      textAlign: align,
+      fontVariantNumeric: numeric === "tabular" ? "tabular-nums" : void 0,
+      ...TYPE_BY_VARIANT[variant]
+    },
+    children
+  });
+};
+Text.displayName = textMeta.displayName;
+
+//#endregion
+exports.Text = Text;
+exports.textMeta = textMeta;