@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.ebed74f

package/src/Table/plugins/tree/useTableTreeData.test.tsx

@@ -58,15 +58,20 @@ function TreeTable(
   props: Partial<UseTableTreeStateConfig<FileRow>> & {
     data?: FileRow[];
     hasExpandAllControl?: boolean;
+    hasRowClickExpansion?: boolean;
   },
 ) {
-  const {hasExpandAllControl, ...stateProps} = props;
+  const {hasExpandAllControl, hasRowClickExpansion, ...stateProps} = props;
   const {visibleData, treeConfig} = useTableTreeState<FileRow>({
     data: props.data ?? fileTree,
     idKey: 'id',
     ...stateProps,
   });
-  const tree = useTableTreeData({...treeConfig, hasExpandAllControl});
+  const tree = useTableTreeData({
+    ...treeConfig,
+    hasExpandAllControl,
+    hasRowClickExpansion,
+  });
 
   return (
     <Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />
@@ -153,6 +158,160 @@ describe('useTableTreeData — expander', () => {
   });
 });
 
+// =============================================================================
+// Whole-row-click expansion
+// =============================================================================
+
+describe('useTableTreeData — row-click expansion', () => {
+  it('does not toggle on row click when hasRowClickExpansion is unset', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable />);
+
+    await user.click(within(getRowByText('src')).getByText('src'));
+
+    // Row body click is inert by default: subtree stays collapsed.
+    expect(screen.queryByText('components')).toBeNull();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('expands an expandable row when its body is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable hasRowClickExpansion />);
+
+    await user.click(within(getRowByText('src')).getByText('src'));
+
+    expect(screen.getByText('components')).toBeInTheDocument();
+    expect(screen.getByText('utils.ts')).toBeInTheDocument();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Collapse row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('collapses an expanded row when its body is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable hasRowClickExpansion defaultExpandedIds={['src']} />);
+
+    expect(screen.getByText('components')).toBeInTheDocument();
+
+    await user.click(within(getRowByText('src')).getByText('src'));
+
+    expect(screen.queryByText('components')).toBeNull();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('does not toggle when a leaf row body is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable hasRowClickExpansion />);
+
+    const before = screen.getAllByRole('row').length;
+    await user.click(within(getRowByText('README.md')).getByText('README.md'));
+
+    // Leaf has no expansion: row count is unchanged.
+    expect(screen.getAllByRole('row')).toHaveLength(before);
+  });
+
+  it('toggles once when the chevron is clicked (no double-toggle via row click)', async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+
+    function SpyTree() {
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+      });
+      const tree = useTableTreeData({
+        ...treeConfig,
+        hasRowClickExpansion: true,
+        onToggleItem: item => {
+          onToggle(item);
+          treeConfig.onToggleItem(item);
+        },
+      });
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree}}
+        />
+      );
+    }
+
+    render(<SpyTree />);
+
+    await user.click(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    );
+
+    // The chevron stops propagation, so a chevron click toggles exactly once.
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('components')).toBeInTheDocument();
+  });
+
+  it('does not toggle when an interactive control inside the row is clicked', async () => {
+    const user = userEvent.setup();
+    // Compose with selection: each row carries a checkbox in its own column.
+    function TreeWithSelection() {
+      const [selectedKeys, setSelectedKeys] = useState<Set<string>>(
+        () => new Set(),
+      );
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+      });
+      const {selectionConfig} = useTableSelectionState<FileRow>({
+        data: visibleData,
+        idKey: 'id',
+        selectedKeys,
+        setSelectedKeys,
+      });
+      const selection = useTableSelection<FileRow>(selectionConfig);
+      const tree = useTableTreeData({
+        ...treeConfig,
+        hasRowClickExpansion: true,
+      });
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree, selection}}
+        />
+      );
+    }
+
+    render(<TreeWithSelection />);
+
+    const srcRow = getRowByText('src');
+    const cells = within(srcRow).getAllByRole('cell');
+    await user.click(within(cells[0]).getByRole('checkbox'));
+
+    // Clicking the checkbox selects the row but must NOT expand it.
+    expect(screen.queryByText('components')).toBeNull();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('is a no-op on flat data even when hasRowClickExpansion is set', async () => {
+    const user = userEvent.setup();
+    const flat: FileRow[] = [
+      {id: 'a', name: 'a.txt', size: 1},
+      {id: 'b', name: 'b.txt', size: 2},
+    ];
+    render(<TreeTable data={flat} hasRowClickExpansion />);
+
+    const before = screen.getAllByRole('row').length;
+    await user.click(within(getRowByText('a.txt')).getByText('a.txt'));
+
+    expect(screen.getAllByRole('row')).toHaveLength(before);
+  });
+});
+
 // =============================================================================
 // Row ARIA
 // =============================================================================

package/src/Table/plugins/tree/useTableTreeData.tsx

@@ -106,6 +106,17 @@ export interface UseTableTreeDataConfig<T extends Record<string, unknown>> {
   indent?: 'sm' | 'md' | 'lg';
   /** Column that carries the indent + expander. @default the first column */
   treeColumnKey?: string;
+  /**
+   * When true, clicking anywhere on an expandable row toggles its expansion,
+   * in addition to the chevron. Leaf rows stay inert. No-op on flat data.
+   *
+   * This is a pointer-only convenience layered over the chevron: keyboard and
+   * assistive-tech users toggle via the chevron button (which stays the
+   * accessible control). Clicks originating from interactive cell content
+   * (buttons, links, form controls) or a text selection do not toggle.
+   * @default false (only the chevron toggles expansion).
+   */
+  hasRowClickExpansion?: boolean;
 }
 
 // =============================================================================
@@ -271,6 +282,10 @@ const treeStyles = stylex.create({
     gap: spacingVars['--spacing-1'],
     minWidth: 0,
   },
+  /** Whole-row-click expansion: signal the row is interactive. */
+  clickableRow: {
+    cursor: 'pointer',
+  },
 });
 
 // =============================================================================
@@ -616,10 +631,48 @@ export function useTableTreeData<T extends Record<string, unknown>>(
           };
         };
 
-        return {
+        const withRef = {
           ...props,
           ref: props.ref ? mergeRefs(props.ref, treeRef) : treeRef,
         };
+
+        // Whole-row-click expansion (opt-in). Only expandable rows are
+        // clickable; leaves and flat data stay inert. `hasExpandableRows` is
+        // the feature-level flag (short-circuits the whole feature when off);
+        // `hasChildren` is the per-row check — both are intentional.
+        const cfg = store.getConfig();
+        const rowClickExpandable =
+          cfg.hasRowClickExpansion === true &&
+          cfg.hasExpandableRows &&
+          cfg.getRowMeta(item)?.hasChildren === true;
+        if (!rowClickExpandable) {
+          return withRef;
+        }
+
+        return {
+          ...withRef,
+          htmlProps: {
+            ...withRef.htmlProps,
+            onClick: (event: React.MouseEvent<HTMLTableRowElement>) => {
+              // Don't hijack clicks on interactive cell content (the chevron
+              // already stops propagation, but a composed selection checkbox,
+              // link, or action button does not) or a text selection.
+              const target = event.target as HTMLElement;
+              if (
+                target.closest(
+                  'button, a, input, select, textarea, [role="button"], [role="checkbox"], [contenteditable="true"]',
+                )
+              ) {
+                return;
+              }
+              if ((window.getSelection()?.toString() ?? '') !== '') {
+                return;
+              }
+              cfg.onToggleItem(item);
+            },
+          },
+          xstyle: [...withRef.xstyle, treeStyles.clickableRow],
+        };
       },
     };
   }, [store]);

package/src/Table/useTableColumnResize.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableColumnResize',

package/src/Table/useTableColumnSettings.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableColumnSettings',

package/src/Table/useTableFilterState.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableFilterState',

package/src/Table/useTableFiltering.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableFiltering',

package/src/Table/useTableGroupedRows.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableGroupedRows',
@@ -55,7 +55,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Groups a flat data array into collapsible section rows. Each groupBy value becomes a full-width header (chevron + label + count); collapsing hides its rows. Returns {data, plugin, idKey}: pass to Table data / plugins / idKey. Consumer owns the collapsedGroups set.',

package/src/Table/useTablePagination.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTablePagination',

package/src/Table/useTableRowExpansion.doc.mjs

@@ -1,13 +1,13 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableRowExpansion',
   subComponentOf: 'Table',
   displayName: 'useTableRowExpansion',
   description:
-    'Hook that returns a TablePlugin implementing expandable rows with inherited columns. Child rows use the same columns as their parents, indented by depth. Clicking the chevron (or right-click context menu) toggles expansion. Pair with useTableRowExpansionState, which flattens the tree and derives this config (expand/collapse handlers + expand-all state) from a single expandedKeys set.',
+    'Deprecated: use useTableTreeData + useTableTreeState instead. Hook that returns a TablePlugin implementing expandable rows with inherited columns. Child rows use the same columns as their parents, indented by depth. Clicking the chevron (or right-click context menu) toggles expansion. Pair with useTableRowExpansionState, which flattens the tree and derives this config (expand/collapse handlers + expand-all state) from a single expandedKeys set. Converging with useTableTreeData: new tree tables should prefer useTableTreeData + useTableTreeState, which cover the same affordances with a cycle guard and fine-grained re-render. See the migration example below.',
   props: [
     {
       name: 'expandedKeys',
@@ -60,12 +60,65 @@ export const docs = {
       description: 'Callback when the expand-all header toggle is clicked.',
     },
   ],
+  examples: [
+    {
+      label: 'Migrating to useTableTreeData + useTableTreeState',
+      code: `// useTableRowExpansion and useTableTreeData are converging onto one tree
+// plugin. useTableTreeData is the destination: it adds a cycle guard,
+// per-row fine-grained re-render, and imperative row ARIA, and now covers
+// the same affordances (expand-all header control, whole-row click).
+
+// BEFORE: useTableRowExpansion + useTableRowExpansionState
+const [expandedKeys, setExpandedKeys] = useState(new Set(['root']));
+const {data, expansionConfig} = useTableRowExpansionState({
+  baseData: tree,
+  getChildren: item => item.children ?? [],
+  getRowKey: item => item.id,
+  expandedKeys,
+  setExpandedKeys,
+});
+const expansion = useTableRowExpansion(expansionConfig);
+<Table data={data} columns={columns} idKey="id" plugins={{expansion}} />;
+
+// AFTER: useTableTreeState + useTableTreeData
+const {visibleData, treeConfig} = useTableTreeState({
+  data: tree,                   // nested data, not a flat array
+  idKey: 'id',                  // or a function: idKey={item => item.id}
+  childrenKey: 'children',      // replaces getChildren (default 'children')
+  defaultExpandedIds: ['root'], // uncontrolled; or expandedIds + onExpandedIdsChange
+});
+const tree = useTableTreeData({
+  ...treeConfig,
+  hasExpandAllControl: true,    // was isAllExpanded + onToggleExpandAll
+  hasRowClickExpansion: true,   // same prop name
+});
+<Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />;`,
+    },
+    {
+      label: 'Config mapping',
+      code: `// useTableRowExpansion(State)         ->  useTableTreeState / useTableTreeData
+
+// baseData: T[] (nested)              ->  data: T[]                (useTableTreeState)
+// getChildren: item => item.children  ->  childrenKey: 'children'  (property name)
+// getRowKey: item => item.id          ->  idKey: 'id' | (item => item.id)
+// getIsItemExpandable                 ->  isItemExpandable         (same shape)
+// expandedKeys + setExpandedKeys      ->  defaultExpandedIds       (uncontrolled), or
+//                                         expandedIds + onExpandedIdsChange (controlled)
+// getDepth                            ->  removed; depth derives from nesting
+// isAllExpanded + onToggleExpandAll   ->  hasExpandAllControl      (state is computed)
+// hasRowClickExpansion                ->  hasRowClickExpansion     (unchanged)
+
+// Rendering: useTableRowExpansion prepends a dedicated expander column;
+// useTableTreeData decorates the tree column in place (configurable via
+// treeColumnKey). Keyboard and AT users toggle via the chevron in both.`,
+    },
+  ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
-    'Returns a TablePlugin for expandable rows w/ inherited columns. Child rows reuse parent columns, indented by depth. Chevron click (or right-click menu) toggles expansion. Pair w/ useTableRowExpansionState, which flattens the tree + derives this config from one expandedKeys set.',
+    'Deprecated: use useTableTreeData + useTableTreeState instead. Returns a TablePlugin for expandable rows w/ inherited columns. Child rows reuse parent columns, indented by depth. Chevron click (or right-click menu) toggles expansion. Pair w/ useTableRowExpansionState, which flattens the tree + derives this config from one expandedKeys set.',
   propDescriptions: {
     expandedKeys: 'Set of currently-expanded row keys.',
     onToggle: 'Called when a row expansion is toggled.',

package/src/Table/useTableRowIndex.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableRowIndex',
@@ -37,7 +37,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Returns a TablePlugin that prepends a right-aligned monospaced row-number column. Numbering follows the rendered data order (current sort/filter/page view), 1-based by default. Pass the rendered data array; renderCell only receives the item so the plugin derives ordinals from it.',

package/src/Table/useTableRowStatus.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableRowStatus',
@@ -19,7 +19,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Returns a TablePlugin that prepends a narrow per-row status column: a colored dot, or an icon when provided (shape + color beats color alone for a11y). getStatus maps a row to {color, icon?, label} or null. color is a semantic name (success/error/warning/etc.) mapped to a theme token, or a raw CSS color. label is required (tooltip + accessible name). Memoize getStatus with useCallback.',

package/src/Table/useTableSelection.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableSelection',

package/src/Table/useTableSelectionState.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableSelectionState',

package/src/Table/useTableSortable.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableSortable',

package/src/Table/useTableStickyColumns.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableStickyColumns',

package/src/Table/useTableTreeData.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableTreeData',
@@ -65,6 +65,13 @@ export const docs = {
       description:
         'Column that carries the indent + expander. Defaults to the first column.',
     },
+    {
+      name: 'hasRowClickExpansion',
+      type: 'boolean',
+      description:
+        'When true, clicking anywhere on an expandable row toggles its expansion, in addition to the chevron. A pointer-only convenience: keyboard and assistive-tech users toggle via the chevron button. Clicks on interactive cell content (buttons, links, form controls) or a text selection do not toggle. Leaf rows stay inert, and it is a no-op on flat data.',
+      default: 'false',
+    },
   ],
   examples: [
     {
@@ -100,5 +107,7 @@ export const docsDense = {
       "aggregate state driving the header toggle: true (all) | false (none) | 'indeterminate' (some).",
     onExpandAll: 'expand every expandable row (header control)',
     onCollapseAll: 'collapse every row (header control)',
+    hasRowClickExpansion:
+      'true => clicking an expandable row body toggles it (in addition to the chevron). Leaves stay inert; no-op on flat data. Defaults to false.',
   },
 };

package/src/Table/useTableTreeState.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useTableTreeState',

package/src/Text/Heading.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Heading',
@@ -33,7 +33,7 @@ export const docs = {
     {
       name: 'color',
       type: "'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit'",
-      description: 'Text color.',
+      description: 'Text color. Themes may add custom colors.',
       default: "'primary'",
     },
     {
@@ -120,7 +120,7 @@ export const docsZh = {
     {
       name: 'color',
       type: "'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit'",
-      description: '文本颜色。',
+      description: '文本颜色。主题可添加自定义颜色。',
       default: "'primary'",
     },
     {
@@ -186,7 +186,7 @@ export const docsDense = {
     type: 'Display variant (display-1/2/3); overrides visual styling from level with display-scale sizing.',
     children: 'Heading content.',
     accessibilityLevel: 'aria-level override when different from level for document outline.',
-    color: 'Text color.',
+    color: 'Text color. Themes may add custom colors.',
     display: "Display type; overridden to 'block' when maxLines>0 or hasCapsize.",
     maxLines: 'Max lines before truncation; 0=none. Shows tooltip if truncated.',
     hasTruncateTooltip: "Tooltip for truncated text; true=default position, false=disabled, or a placement ('above' | 'below' | 'start' | 'end').",

package/src/Text/Text.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Text',
@@ -41,7 +41,7 @@ export const docs = {
     {
       name: 'color',
       type: "'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit'",
-      description: "Text color. Defaults to 'secondary' for the 'supporting' type, 'primary' for all others.",
+      description: "Text color. Defaults to 'secondary' for the 'supporting' type, 'primary' for all others. Themes may add custom colors.",
     },
     {
       name: 'weight',
@@ -137,7 +137,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -156,7 +156,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'semantic body text + headings w/ theme-driven type scale, truncation, tabular numbers',
   usage: {

package/src/Text/Text.test.tsx

@@ -9,6 +9,7 @@ import {render, screen} from '@testing-library/react';
 import {describe, it, expect} from 'vitest';
 import {Text} from './Text';
 import type {TextType} from './Text';
+import type {TextColor} from '../theme/types';
 
 describe('Text', () => {
   describe('rendering', () => {
@@ -233,3 +234,44 @@ describe('Text custom types', () => {
     expect(screen.getByText('Muted').className).toContain('secondary');
   });
 });
+
+describe('Text custom colors', () => {
+  it('renders a custom color as a stable class for theme CSS to target', () => {
+    // A theme adds a custom color (e.g. via TextColorMap augmentation +
+    // defineTheme). The rendered element carries the color as a class
+    // (astryx-text.<color>) so `.astryx-text.brand { color: ... }` from the
+    // theme applies — mirroring how custom `type`s work.
+    render(<Text color={'brand' as TextColor}>Branded</Text>);
+    const el = screen.getByText('Branded');
+    expect(el.className).toContain('astryx-text');
+    expect(el.className).toContain('brand');
+  });
+
+  it('does not crash on a custom color (falls back to the primary StyleX baseline)', () => {
+    // colorStyles has no entry for a custom color; the component must resolve a
+    // built-in baseline instead of indexing undefined. Built-in `primary` is
+    // the baseline, so both share its StyleX color class.
+    render(
+      <>
+        <Text color={'brand' as TextColor}>Custom</Text>
+        <Text color="primary">Builtin</Text>
+      </>,
+    );
+    const custom = screen.getByText('Custom');
+    const builtin = screen.getByText('Builtin');
+    // Neither throws, and the custom color reuses primary's baseline StyleX
+    // class (the real color comes from theme CSS via the `brand` class).
+    const primaryAtomic = builtin.className
+      .split(/\s+/)
+      .filter(c => c.startsWith('x'));
+    expect(primaryAtomic.length).toBeGreaterThan(0);
+    for (const cls of primaryAtomic) {
+      expect(custom.className).toContain(cls);
+    }
+  });
+
+  it('still applies built-in colors directly', () => {
+    render(<Text color="accent">Accent</Text>);
+    expect(screen.getByText('Accent').className).toContain('accent');
+  });
+});