@12-apps/ui 1.23.0 → 2.1.0

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { DataGrid, type GridColumn, type GridSort } from "../DataGrid";
 import { Box } from "../../../mui/Box";
 
@@ -10,9 +12,11 @@ import {
   DENSITY_CARD_COLUMNS,
   DENSITY_ROW_PADDING,
   useDataViewsLayout,
+  type DataViewsDensity,
 } from "./data-views-layout-context";
 import { DataViewsBoard, type BoardConfig } from "./DataViewsBoard";
 import { SelectAllStrip } from "./data-views-select-all-strip";
+import { ListCardGroup, type ListGroupConfig } from "./list-card-rails";
 import type { DataViewCardSelection } from "./data-views-types";
 import type { DataViewsController } from "./use-data-views-state";
 
@@ -160,6 +164,10 @@ interface ListBodyProps<T extends Record<string, unknown>> {
   onToggleId: (id: string | number) => void;
   /** Gap between rows, from the density preference. */
   rowGap: number;
+  /** The list's shared column config. See {@link ListGroupConfig}. */
+  group?: ListGroupConfig<T>;
+  /** The density every row answers, handed to the group when there is one. */
+  density: DataViewsDensity;
   dataTestId?: string;
   emptyState?: React.ReactNode;
 }
@@ -186,28 +194,59 @@ function ListBody<T extends Record<string, unknown>>({
   selectedIds,
   onToggleId,
   rowGap,
+  group,
+  density,
   dataTestId,
   emptyState,
 }: ListBodyProps<T>): React.JSX.Element {
   if (rows.length === 0) {
     return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;
   }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id: string | number): DataViewCardSelection => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1,
+  });
+
+  if (group) {
+    return (
+      <Box sx={{ mt: 1.5 }}>
+        <ListCardGroup
+          cells={group.cells}
+          metaColumns={group.metaColumns}
+          rails={group.rails}
+          reserveGutters={group.reserveGutters}
+          density={density}
+          gap={rowGap}
+          dataTestId={testId}
+        >
+          {rows.map((row) => {
+            const id = getRowId(row);
+            // A FRAGMENT, NOT A BOX. The row is subgrid over the group's tracks
+            // (`gridColumn: span railCount`), which only resolves while the card
+            // is a DIRECT child of the group's grid. One wrapper element and the
+            // span is measured against a grid that isn't there, so every rail
+            // collapses — the exact failure the group exists to prevent.
+            return (
+              <React.Fragment key={id}>
+                {renderListRow(row, selectionFor(id))}
+              </React.Fragment>
+            );
+          })}
+        </ListCardGroup>
+      </Box>
+    );
+  }
+
   return (
     <Box
       sx={{ mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap }}
-      data-testid={dataTestId ? `${dataTestId}-list` : "data-views-list"}
+      data-testid={testId}
     >
       {rows.map((row) => {
         const id = getRowId(row);
-        return (
-          <Box key={id}>
-            {renderListRow(row, {
-              selected: selectedIds.has(id),
-              onToggleSelect: () => onToggleId(id),
-              scale: 1,
-            })}
-          </Box>
-        );
+        return <Box key={id}>{renderListRow(row, selectionFor(id))}</Box>;
       })}
     </Box>
   );
@@ -221,6 +260,8 @@ interface GridMainProps<T extends Record<string, unknown>> {
   renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
   /** Opt-in "Lista" layout — one full-width row per record. */
   renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
+  /** The Lista's shared columns. Omitted, each row resolves its own tracks. */
+  listGroup?: ListGroupConfig<T>;
   /** Opt-in "Quadro" (board) layout — needs `renderCard`, since it reuses the card. */
   board?: BoardConfig<T>;
   dataTestId?: string;
@@ -260,68 +301,78 @@ function Headerless<T extends Record<string, unknown>>({
   );
 }
 
-/** Picks the body from the layout context: board, list, cards, or the dense grid. */
-export function GridMain<T extends Record<string, unknown>>({
-  c,
-  getRowId,
-  renderCard,
-  renderListRow,
-  board,
-  dataTestId,
-  emptyState,
-  testIdPrefix,
-}: GridMainProps<T>): React.JSX.Element {
-  const { layout, zoom, density } = useDataViewsLayout();
+/**
+ * The body for one of the three HEADERLESS layouts, or `null` for the table.
+ *
+ * Split out from {@link GridMain} so the select-all strip is wrapped around the
+ * result exactly once instead of being repeated identically in every branch —
+ * which is also what keeps either function inside the line budget.
+ */
+function headerlessBody<T extends Record<string, unknown>>(
+  { c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }: GridMainProps<T>,
+  { layout, zoom, density }: ReturnType<typeof useDataViewsLayout>,
+): React.ReactNode | null {
   if (layout === "list" && renderListRow) {
     return (
-      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>
-        <ListBody
-          rows={c.matched}
-          renderListRow={renderListRow}
-          getRowId={getRowId}
-          selectedIds={c.selectedIds}
-          onToggleId={c.toggleId}
-          rowGap={DENSITY_ROW_PADDING[density]}
-          dataTestId={dataTestId}
-          emptyState={emptyState}
-        />
-      </Headerless>
+      <ListBody
+        rows={c.matched}
+        renderListRow={renderListRow}
+        getRowId={getRowId}
+        selectedIds={c.selectedIds}
+        onToggleId={c.toggleId}
+        rowGap={DENSITY_ROW_PADDING[density]}
+        group={listGroup}
+        density={density}
+        dataTestId={dataTestId}
+        emptyState={emptyState}
+      />
     );
   }
   if (layout === "board" && board && renderCard) {
     return (
-      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>
-        <DataViewsBoard
-          rows={c.matched}
-          board={board}
-          getRowId={getRowId}
-          renderCard={renderCard}
-          selectedIds={c.selectedIds}
-          onToggleId={c.toggleId}
-          // DENSITY, not zoom: the board's own knob in the Exibição tab is how
-          // wide its columns are, and it is the only sizing control the board
-          // has since the zoom slider was removed.
-          cardScale={DENSITY_BOARD_SCALE[density]}
-          dataTestId={dataTestId}
-        />
-      </Headerless>
+      <DataViewsBoard
+        rows={c.matched}
+        board={board}
+        getRowId={getRowId}
+        renderCard={renderCard}
+        selectedIds={c.selectedIds}
+        onToggleId={c.toggleId}
+        // DENSITY, not zoom: the board's own knob in the Exibição tab is how
+        // wide its columns are, and it is the only sizing control the board
+        // has since the zoom slider was removed.
+        cardScale={DENSITY_BOARD_SCALE[density]}
+        dataTestId={dataTestId}
+      />
     );
   }
   if (layout === "cards" && renderCard) {
+    return (
+      <CardBody
+        rows={c.matched}
+        renderCard={renderCard}
+        getRowId={getRowId}
+        selectedIds={c.selectedIds}
+        onToggleId={c.toggleId}
+        minCardWidth={cardMinWidthForZoom(zoom)}
+        maxColumns={DENSITY_CARD_COLUMNS[density]}
+        cardScale={cardScaleForZoom(zoom)}
+        dataTestId={dataTestId}
+        emptyState={emptyState}
+      />
+    );
+  }
+  return null;
+}
+
+/** Picks the body from the layout context: board, list, cards, or the dense grid. */
+export function GridMain<T extends Record<string, unknown>>(props: GridMainProps<T>): React.JSX.Element {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
     return (
       <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>
-        <CardBody
-          rows={c.matched}
-          renderCard={renderCard}
-          getRowId={getRowId}
-          selectedIds={c.selectedIds}
-          onToggleId={c.toggleId}
-          minCardWidth={cardMinWidthForZoom(zoom)}
-          maxColumns={DENSITY_CARD_COLUMNS[density]}
-          cardScale={cardScaleForZoom(zoom)}
-          dataTestId={dataTestId}
-          emptyState={emptyState}
-        />
+        {body}
       </Headerless>
     );
   }
@@ -335,7 +386,7 @@ export function GridMain<T extends Record<string, unknown>>({
       sortBy={c.state.sortBy}
       onChangeSortBy={(next: GridSort[]) => c.patch({ sortBy: next })}
       sortMode={c.serverMode ? "server" : "client"}
-      rowPadding={DENSITY_ROW_PADDING[density]}
+      rowPadding={DENSITY_ROW_PADDING[layoutState.density]}
       dataTestId={dataTestId}
       emptyState={emptyState}
     />

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -14,6 +14,7 @@ import {
 } from "./data-views-layout-context";
 import { FilterDialog, GridFilterPanel } from "./data-views-filter-panel";
 import { GridMain } from "./data-views-grid-bodies";
+import type { ListGroupConfig } from "./list-card-rails";
 import { InlineFilterControls } from "./data-views-inline-bar";
 import { toOverflowFields, useFilterOverflow, type OverflowSplit } from "./data-views-overflow";
 import { ShellToolbar } from "./data-views-shell-toolbar";
@@ -238,6 +239,8 @@ interface GridShellProps<T extends Record<string, unknown>> {
   board?: BoardConfig<T>;
   /** Opt-in "Lista" layout: one full-width, entity-rendered row per record. */
   renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
+  /** The Lista's shared columns, so its rows line up by construction. */
+  listGroup?: ListGroupConfig<T>;
   /** The page-level partition rendered as tabs under the toolbar. */
   scopes?: ScopeConfig[];
   /**
@@ -340,6 +343,7 @@ function ShellStack<T extends Record<string, unknown>>({
               getRowId={props.getRowId}
               renderCard={props.renderCard}
               renderListRow={props.renderListRow}
+              listGroup={props.listGroup}
               board={props.board}
               dataTestId={dataTestId}
               testIdPrefix={testIdPrefix}

package/src/components/data-display/DataViews/data-views-overflow.ts

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 
+import { splitToFit, useMeasuredWidth } from "../../utility/Overflow";
 import {
   estimateWidth,
   furnitureCost,
@@ -106,26 +107,6 @@ export function toOverflowFields<T extends Record<string, unknown>>(
 }
 
 
-/** Observe the bar's width. Returns 0 until the first measurement lands. */
-function useBarWidth(): { barRef: React.RefObject<HTMLDivElement | null>; width: number } {
-  const barRef = useRef<HTMLDivElement | null>(null);
-  const [width, setWidth] = useState(0);
-  useEffect(() => {
-    const element = barRef.current;
-    // jsdom has no ResizeObserver, and neither does an SSR pass — with no
-    // measurement the hook keeps every control inline, which is the honest
-    // fallback: nothing is hidden behind a menu nobody can see.
-    if (!element || typeof ResizeObserver === "undefined") return undefined;
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) setWidth(entry.contentRect.width);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-  return { barRef, width };
-}
-
 /** Is this control carrying a value the operator set? */
 function isActiveField<T extends Record<string, unknown>>(
   field: OverflowField<T>,
@@ -167,24 +148,11 @@ function splitFilters<T extends Record<string, unknown>>(
   /** Is the bar already down to icons? "Mais" shrinks with everything else. */
   compact: boolean,
 ): Split<T> {
-  const none: OverflowField<T>[] = [];
-  const widthOf = (field: OverflowField<T>): number => fieldWidth(field, pills, ranges);
-  const cost = (fields: OverflowField<T>[]): number =>
-    fields.reduce((sum, field) => sum + widthOf(field) + GAP, 0);
   const active = all.filter((field) => isActiveField(field, pills, ranges));
   const idle = all.filter((field) => !isActiveField(field, pills, ranges));
 
   // "Limpar" rides the end of the cluster whenever anything is applied.
   const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
-  let available = width - furniture - clearCost;
-  if (cost(all) <= available) {
-    return { inline: all, overflow: none, used: cost(all) + clearCost };
-  }
-
-  // There IS an overflow, so its button now costs room too — at the width it
-  // will actually have, which on a phone is the icon-and-badge one.
-  const overflowButton = compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton;
-  available -= overflowButton;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -197,22 +165,21 @@ function splitFilters<T extends Record<string, unknown>>(
   // vanished silently: the trigger goes to the applied tone and says how many
   // are in there (see `MoreTrigger`), which is the same signal the pill itself
   // was carrying. A control you scroll off-screen carries no signal at all.
-  const keep = new Set<string>();
-  for (const field of [...active, ...idle]) {
-    const next = widthOf(field) + GAP;
-    if (next > available) continue;
-    available -= next;
-    keep.add(field.id);
-  }
-  // Rendered in the DECLARED order, not the applied-first one: which controls
-  // are visible may change with the width, but the ones that stay must not
-  // reshuffle under the operator's cursor.
-  const inline = all.filter((field) => keep.has(field.id));
-  return {
-    inline,
-    overflow: all.filter((field) => !keep.has(field.id)),
-    used: cost(inline) + overflowButton + clearCost,
-  };
+  //
+  // The keep-what-fits loop itself is `splitToFit` (`utility/Overflow`) — the
+  // one part of this that is not filter-shaped, and the part a second cluster
+  // in the design system would otherwise have had to reimplement.
+  const split = splitToFit(all, {
+    widthOf: (field) => fieldWidth(field, pills, ranges),
+    keyOf: (field) => field.id,
+    gap: GAP,
+    available: width - furniture - clearCost,
+    // The overflow button at the width it will actually have, which on a phone
+    // is the icon-and-badge one.
+    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,
+    priority: [...active, ...idle],
+  });
+  return { ...split, used: split.used + clearCost };
 }
 
 /**
@@ -363,7 +330,12 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
   /** Whether "Exportar" is on the bar — see `rightClusterCost`. */
   hasExport = true,
 ): OverflowSplit<T> {
-  const { barRef, width } = useBarWidth();
+  // The measurement is `useMeasuredWidth` (`utility/Overflow`): the same
+  // ResizeObserver every collapsing cluster in the design system reads, so
+  // there is one loop to get right rather than one per bar. `0` until the
+  // first measurement lands (and forever under SSR or jsdom), which
+  // `computeSplit` reads as "degrade nothing".
+  const { ref: barRef, width } = useMeasuredWidth<HTMLDivElement>();
   const signature = JSON.stringify({
     ids: all.map((field) => field.id),
     pills,

package/src/components/data-display/DataViews/index.ts

@@ -22,6 +22,10 @@ export {
   type ListCardCellConfig,
   DEFAULT_CELL_WIDTH,
 } from "./list-card-cells";
+// The list's columns declared at the TABLE, not per card — which is what makes
+// a Lista line up by construction. Without it a consumer can still hand a cell
+// config to each row, and they agree until one row carries a wider value.
+export type { ListGroupConfig } from "./list-card-rails";
 // Published by a drag container so a row can draw the marker; a consumer wiring
 // its own DnD needs the type to build the value.
 export { DropIndicator } from "./data-views-drag";

package/src/components/data-display/DataViews/list-card-rails.tsx

@@ -223,6 +223,35 @@ export function cellRailCount(cells: number): number {
   return CELL_FIXED_RAILS + cells + 1;
 }
 
+/**
+ * A {@link ListCardGroup}'s configuration, as a value a caller can pass around.
+ *
+ * The same fields the group takes as props, named once so a table can accept
+ * "the list's columns" as a single prop and hand them straight over. It is what
+ * makes a list line up BY CONSTRUCTION rather than by convention: without it
+ * every row resolves its own tracks from its own copy of the config, which
+ * agrees with its neighbours right until one row carries an unusually wide value.
+ */
+export interface ListGroupConfig<T extends Record<string, unknown>> {
+  /**
+   * The cells every row renders. Supplying these replaces the named-slot layout
+   * (title/subtitle/meta/value/status) for the rows inside.
+   */
+  cells?: readonly ListCardCellConfig<T>[];
+  /**
+   * How many labelled pairs the rows carry, in the named-slot layout. The group
+   * renders its children opaquely and cannot count them.
+   */
+  metaColumns?: number;
+  /** Override individual rails; anything omitted keeps its default. */
+  rails?: Partial<ListRails>;
+  /**
+   * Hold the drag and select gutters open even when nothing uses them. On by
+   * default, so a selectable list and a read-only one still line up.
+   */
+  reserveGutters?: boolean;
+}
+
 /**
  * A list of {@link BaseListCard}s that share one set of columns.
  *

package/src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx

@@ -3,17 +3,20 @@ import { forwardRef } from 'react';
 
 import { useDateTimeParts } from './DateTimeDisplay.hooks';
 import type { DateTimeDisplayProps } from './DateTimeDisplay.types';
+import type { SizeValue } from '../../../tokens/scales';
 
 /**
  * Get font sizes based on size prop
  */
-function getFontSizes(size: 'small' | 'medium' | 'large') {
+function getFontSizes(size: SizeValue) {
   switch (size) {
-    case 'small':
+    case 'xs':
+    case 'sm':
       return { date: '0.75rem', time: '0.65rem' };
-    case 'large':
+    case 'lg':
+    case 'xl':
       return { date: '1rem', time: '0.875rem' };
-    case 'medium':
+    case 'md':
     default:
       return { date: '0.875rem', time: '0.75rem' };
   }
@@ -81,7 +84,7 @@ export const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>
       dateFormat = 'short',
       timeFormat = '12h',
       showTimezone = false,
-      size = 'medium',
+      size = 'md',
       showTooltip = true,
       tooltipContent,
       sx,

package/src/components/data-display/DateTimeDisplay/DateTimeDisplay.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { SxProps, Theme } from '@mui/material';
 
 export interface DateTimeDisplayProps {
@@ -25,7 +26,7 @@ export interface DateTimeDisplayProps {
    * Size variant
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   /**
    * Whether to show a tooltip with full date/time
    * @default true

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { TooltipProps as MuiTooltipProps } from '@mui/material';
 
 export interface InteractiveTooltipProps extends Omit<MuiTooltipProps, 'variant' | 'title'> {
@@ -19,7 +20,7 @@ export interface InteractiveTooltipProps extends Omit<MuiTooltipProps, 'variant'
   /**
    * Size of the tooltip
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
   /**
    * Maximum width of the tooltip

package/src/components/data-display/LoadingState/LoadingState.types.ts

@@ -1,5 +1,6 @@
+import type { SizeValue } from '../../../tokens/scales';
 export type LoadingStateVariant = 'spinner' | 'skeleton';
-export type LoadingStateSize = 'sm' | 'md' | 'lg';
+export type LoadingStateSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
 export interface LoadingStateProps {
   /**

package/src/components/data-display/Progress/Progress.types.ts

@@ -1,7 +1,8 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { LinearProgressProps } from '@mui/material';
 
 export type ProgressVariant = 'linear' | 'circular' | 'segmented' | 'gradient' | 'glass';
-export type ProgressSize = 'sm' | 'md' | 'lg';
+export type ProgressSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
 export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'color'> {
   /**
@@ -17,7 +18,7 @@ export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'co
   /**
    * The color of the progress
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * Whether the progress should have a glow effect

package/src/components/data-display/Sheet/Sheet.body.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { SheetContent, SheetFooter, SheetHeader } from './Sheet.parts';
 import type { SheetProps } from './Sheet.types';
+import { muiColor } from '../../../tokens/scales';
 
 export interface SheetBodyProps extends Pick<
   SheetProps,
@@ -50,7 +51,7 @@ const SheetLoading: React.FC<Pick<SheetBodyProps, 'color'>> = ({ color }) => (
       minHeight: 200,
     }}
   >
-    <CircularProgress color={color} />
+    <CircularProgress color={color === undefined ? undefined : muiColor(color, 'inherit')} />
   </Box>
 );
 

package/src/components/data-display/Sheet/Sheet.styles.ts

@@ -4,6 +4,7 @@ import type React from 'react';
 
 import { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';
 import type { SheetProps } from './Sheet.types';
+import { accentFor } from '../../../tokens/scales';
 
 type Position = NonNullable<SheetProps['position']>;
 type Variant = NonNullable<SheetProps['variant']>;
@@ -140,7 +141,7 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
                 135deg,
                 ${theme.palette.background.paper} 0%,
                 ${alpha(accent, 0.08)} 50%,
-                ${alpha(theme.palette[color]?.dark || accent, 0.12)} 100%
+                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%
               )`
       : theme.palette.background.paper,
     position: 'relative' as const,
@@ -211,7 +212,7 @@ const baseSurface = (input: VariantStyleInput, accent: string) => {
 
 const variantStyles = (input: VariantStyleInput) => {
   const { theme, variant, color, position, glow, pulse, rounded } = input;
-  const accent = theme.palette[color]?.main || theme.palette.primary.main;
+  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;
 
   return {
     ...baseSurface(input, accent),

package/src/components/data-display/Sheet/Sheet.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties,ReactNode } from 'react';
 
 export interface SheetProps {
@@ -8,8 +9,12 @@ export interface SheetProps {
   description?: string;
   position?: 'top' | 'bottom' | 'left' | 'right';
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'draggable';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  /**
+   * The house scale, plus `full`. `full` is not a size on the scale — it is
+   * "the whole viewport", so it extends rather than replaces.
+   */
+  size?: SizeValue | 'full';
+  color?: Exclude<ColorValue, 'neutral'>;
   glow?: boolean;
   pulse?: boolean;
   glass?: boolean;

package/src/components/data-display/Stepper/Stepper.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { ReactNode } from 'react';
 
 export interface Step {
@@ -40,7 +41,7 @@ export interface StepperProps {
    * takes far less vertical space — useful above the fold on mobile checkouts.
    * @default 'md'
    */
-  size?: 'sm' | 'md';
+  size?: Extract<SizeValue, 'sm' | 'md'>;
   
   /**
    * Navigation variant controlling step access

package/src/components/data-display/Table/Table.styles.ts

@@ -46,7 +46,7 @@ const getStripeColorFromTheme = (theme: { palette: { primary: { main: string };
     info: theme.palette.info.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
-    error: theme.palette.error.main,
+    danger: theme.palette.error.main,
     neutral: theme.palette.action.hover };
   return colorMap[stripeColor];
 };

package/src/components/data-display/Table/Table.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue } from '../../../tokens/scales';
 import type { TableProps as MuiTableProps } from '@mui/material';
 import type React from 'react';
 
@@ -57,7 +58,8 @@ export interface SelectionConfig {
   rowKeyExtractor?: (rowData: Record<string, unknown>, index: number) => string | number;
 }
 
-export type TableStripeColor = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
+/** The full house vocabulary — a stripe can take any accent, or none. */
+export type TableStripeColor = ColorValue;
 
 export interface TableProps extends Omit<MuiTableProps, 'variant'> {
   /**

package/src/components/data-display/Tooltip/Tooltip.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { TooltipProps as MuiTooltipProps } from '@mui/material';
 
 export interface TooltipProps extends Omit<MuiTooltipProps, 'variant'> {
@@ -19,7 +20,7 @@ export interface TooltipProps extends Omit<MuiTooltipProps, 'variant'> {
   /**
    * Size of the tooltip
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
   /**
    * Maximum width of the tooltip