@siyahi/ui 0.1.9-next.31 → 0.1.9-next.32

package/DESIGN.md

@@ -51,9 +51,10 @@ a meaning:
   colour, not separate hues.
 - **Colour marks exceptions.** The one stat tile or table row that needs a look
   is marked by the page: `tone: "negative"` or `"warning"` on a `SectionCards`
-  item, `data-tone="negative"` or `"warning"` on a `TableRow`. It takes a faint
-  wash of the colour over the card (7% in light, 12% in dark), and a tile an
-  outline of it. The page decides, never the sign: a falling cost is good news.
+  or `MetricStrip` item, `data-tone="negative"` or `"warning"` on a `TableRow`,
+  and `getRowTone` on a `DataTableBody`, returning the tone for the row. It
+  takes a faint wash of the colour over the card (7% in light, 12% in dark),
+  and a tile or figure an outline of it. The page decides, never the sign: a falling cost is good news.
   Mark one or two; a page where every row is washed marks nothing.
 
 ## Surfaces

package/agents/examples/data-table.tsx

@@ -36,6 +36,9 @@ const products: Product[] = [
   { product: "Desk lamp", category: "Lighting", units: 900, revenue: 255600, change: 0.009 },
 ];
 
+// The page's own rule for a product that needs a look; a falling figure alone would not be one.
+const tone = (product: Product): "warning" | undefined => (product.units < 50 ? "warning" : undefined);
+
 // One click sorts largest (or Z) first; the title comes from meta.label.
 const header = () => <DataTableSortHeader />;
 
@@ -87,7 +90,7 @@ export default function DataTableExample() {
           </DataTableToolbarSection>
           <DataTable aria-label="Products">
             <DataTableHeader />
-            <DataTableBody />
+            <DataTableBody getRowTone={tone} />
           </DataTable>
         </DataTableRoot>
       </CardContent>

package/agents/examples/metric-strip.tsx

@@ -25,6 +25,8 @@ export default function MetricStripExample() {
       change: -61200,
       changeFormat: "money",
       trend: [14200, -3800, 9100, 2600, -18400, -61200],
+      // The one figure on the strip that needs a look, marked by the page: a falling margin alone would not be.
+      tone: "negative",
     },
     { label: "Gift cards", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
     { label: "Products", value: count(42), note: "3 added in Oct", trend: [38, 39, 39, 40, 39, 42] },

package/dist/components/registry/dashboardcn/kpi-row-card.d.ts

@@ -13,6 +13,8 @@ export interface MetricStripItem {
   note?: React$1.ReactNode;
   /** Recent values, oldest first, drawn as a sparkline beside the figure. */
   trend?: number[];
+  /** Marks the figure as the exception on the page: a faint wash of the colour and an outline of it. */
+  tone?: "negative" | "warning";
 }
 export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
   title?: React$1.ReactNode;

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -39,6 +39,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 					className: "-me-px -mb-px flex flex-wrap",
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
+						"data-tone": item.tone,
 						className: cn("flex min-w-0 flex-col gap-1.5 border-e border-b px-4 py-4", columns),
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "truncate font-mono text-2xs tracking-wider text-muted-foreground uppercase",

package/dist/components/registry/niko-table/core/data-table-structure.d.ts

@@ -40,8 +40,15 @@ export interface DataTableBodyProps<TData extends RowData> {
    * Wrap the callback in `useCallback` so memoized rows don't re-render.
    */
   renderRowContextMenu?: (row: TData) => React.ReactNode;
+  /**
+   * Mark the row that needs a look, such as a holding in deep loss: return
+   * `"negative"` or `"warning"` and the row takes a faint wash of that
+   * colour, as a `TableRow` with `data-tone` does; `undefined` leaves it
+   * plain. The page decides, never the sign. Mark one or two rows.
+   */
+  getRowTone?: (row: TData) => "negative" | "warning" | undefined;
 }
-export declare function DataTableBody<TData extends RowData>({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold, onRowClick, getRowMemoKey, renderRowContextMenu }: DataTableBodyProps<TData>): React.JSX.Element;
+export declare function DataTableBody<TData extends RowData>({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold, onRowClick, getRowMemoKey, renderRowContextMenu, getRowTone }: DataTableBodyProps<TData>): React.JSX.Element;
 export declare namespace DataTableBody {
   var displayName: string;
 }

package/dist/components/registry/niko-table/core/data-table-structure.js

@@ -27,7 +27,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 	const flexColumnIds = resolveFlexColumnIds(table, !isCompact);
 	const columnSizing = table.state.columnSizing;
 	return /* @__PURE__ */ jsx(TableHeader, {
-		className: cn(sticky && "sticky top-0 z-30 bg-card", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
+		className: cn(sticky && "sticky top-0 z-30 bg-(--table-fill)", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
 		children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
 			const isFlex = flexColumnIds.has(header.column.id);
 			const headerStyle = {
@@ -62,7 +62,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 DataTableHeader.displayName = "DataTableHeader";
 /** Fade-pulse animation applied to a flashing cell (keyframe in the provider). */
 const FLASH_ANIMATION = "niko-row-flash 1.2s ease-out";
-const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isCompact, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu }) {
+const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isCompact, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu, tone }) {
 	const expandCell = isExpanded && expandColumnId ? row.getAllCells().find((c) => c.column.id === expandColumnId) : void 0;
 	const visibleCells = row.getVisibleCells();
 	const rowElement = /* @__PURE__ */ jsx(TableRow, {
@@ -72,8 +72,10 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 		"data-parity": displayIndex % 2 === 0 ? "even" : "odd",
 		"data-expanded": isExpanded ? "true" : void 0,
 		"data-state": isSelected ? "selected" : void 0,
+		"data-tone": tone,
 		className: cn(isClickable && "cursor-pointer", "group data-[context-menu-open]:bg-muted/50"),
 		children: visibleCells.map((cell) => {
+			const pinned = !isCompact && cell.column.getIsPinned();
 			const flashing = isRowFlashing || flashingCellKeys.has(flashCellKey(row.id, cell.column.id));
 			const cellStyle = {
 				width: columnWidths.get(cell.column.id),
@@ -84,8 +86,9 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 				"data-flash": flashing ? "true" : void 0,
 				"data-col-id": cell.column.id,
 				"data-numeric": cell.column.columnDef.meta?.variant === "number" || void 0,
+				"data-pinned": pinned || void 0,
 				style: cellStyle,
-				className: cn(!cell.getIsGrouped() && "truncate", !isCompact && cell.column.getIsPinned() && "bg-linear-to-r group-hover:from-muted/50 group-hover:to-muted/50 group-data-[context-menu-open]:from-muted/50 group-data-[context-menu-open]:to-muted/50 group-data-[state=selected]:from-muted group-data-[state=selected]:to-muted"),
+				className: cn(!cell.getIsGrouped() && "truncate", pinned && "bg-linear-to-r group-hover:from-muted/50 group-hover:to-muted/50 group-data-[context-menu-open]:from-muted/50 group-data-[context-menu-open]:to-muted/50 group-data-[state=selected]:from-muted group-data-[state=selected]:to-muted"),
 				children: renderCellContent(cell)
 			}, cell.id);
 		})
@@ -102,7 +105,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 	}) })] });
 });
 BodyRow.displayName = "BodyRow";
-function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold = 50, onRowClick, getRowMemoKey, renderRowContextMenu }) {
+function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold = 50, onRowClick, getRowMemoKey, renderRowContextMenu, getRowTone }) {
 	const { table, columns, isLoading, flashingRowIds, flashingCellKeys, registerRowScroller, headerMinWidths, isCompact } = useDataTable();
 	const { rows } = table.getRowModel();
 	const containerRef = React.useRef(null);
@@ -245,7 +248,8 @@ function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolle
 			rowMemoKey: getRowMemoKey ? getRowMemoKey(row.original) : "",
 			isRowFlashing: flashingRowIds.has(row.id),
 			flashingCellKeys,
-			renderRowContextMenu: resolvedRenderRowContextMenu
+			renderRowContextMenu: resolvedRenderRowContextMenu,
+			tone: getRowTone?.(row.original)
 		}, row.id)) : null, children]
 	});
 }

package/dist/components/registry/niko-table/lib/styles.js

@@ -16,7 +16,7 @@ const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true)
 		maxWidth: columnSize,
 		flexShrink: 0,
 		zIndex: isHeader ? 20 : 10,
-		backgroundColor: "var(--card)",
+		backgroundColor: "var(--table-fill)",
 		boxShadow: isLeft ? "inset -1px 0 0 0 var(--border)" : "inset 1px 0 0 0 var(--border)"
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.31",
+  "version": "0.1.9-next.32",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/styles/siyahi.css

@@ -555,12 +555,13 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
 }
 
 /*
- * An exception the page marks, a stat tile (SectionCard's tone) or a table
- * row (<TableRow data-tone="negative">), takes a faint wash of its colour over
- * the card, and a tile an outline of it, so the one figure needing attention
+ * An exception the page marks, a stat tile (SectionCard's tone), a MetricStrip
+ * figure (its item's tone) or a table row (<TableRow data-tone="negative">, a
+ * DataTableBody's getRowTone), takes a faint wash of its colour over the card,
+ * and a tile or figure an outline of it, so the one figure needing attention
  * stands out of a run of neutral ones. Unlayered, to outrank a row's hover band.
  */
-:is([data-slot="card"], [data-slot="table-row"]) {
+:is([data-slot="card"], [data-slot="metric-strip-item"], [data-slot="table-row"]) {
   &[data-tone="negative"] {
     --exception: var(--negative);
   }
@@ -568,12 +569,33 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
     --exception: var(--warning);
   }
 }
-[data-slot="card"]:is([data-tone="negative"], [data-tone="warning"]) {
+:is([data-slot="card"], [data-slot="metric-strip-item"]):is([data-tone="negative"], [data-tone="warning"]) {
   background-color: color-mix(in oklab, var(--exception) var(--wash), var(--card));
+}
+[data-slot="card"]:is([data-tone="negative"], [data-tone="warning"]) {
   --tw-ring-color: color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
 }
+/*
+ * A figure's outline lies on the four hairlines around it, as a tile's ring does: its neighbours' rules before and
+ * above it, and its own end and bottom rules, which sit outside the padding box the inset counts from.
+ */
+[data-slot="metric-strip-item"]:is([data-tone="negative"], [data-tone="warning"]) {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border: 1px solid color-mix(in oklab, var(--exception) var(--wash-edge), transparent);
+    pointer-events: none;
+  }
+}
+/* A pinned cell paints the card under itself (niko-table's lib/styles), so it lays the row's wash over that. */
 [data-slot="table-row"]:is([data-tone="negative"], [data-tone="warning"]) {
-  background-color: color-mix(in oklab, var(--exception) var(--wash), transparent);
+  --row-wash: color-mix(in oklab, var(--exception) var(--wash), transparent);
+  background-color: var(--row-wash);
+  & > [data-pinned] {
+    background-image: linear-gradient(var(--row-wash), var(--row-wash));
+  }
 }
 
 /*
@@ -615,6 +637,14 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
     border-color: transparent;
   }
 }
+/*
+ * The opaque fill a data table's sticky header and pinned cells paint, so rows
+ * scrolling under them stay hidden: the colour under the table, the card it
+ * sits in or, on an open surface, whose cards have no fill, the page.
+ */
+[data-slot="table-container"] {
+  --table-fill: var(--card);
+}
 
 /*
  * A series in a forecast is drawn twice (LineChartCard, AreaChartCard): solid
@@ -804,6 +834,9 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
 }
 
 @scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
+  [data-slot="table-container"] {
+    --table-fill: var(--background);
+  }
   [data-slot="card"] {
     background: none;
     --tw-ring-color: transparent;