@cloudgrid-io/ui 0.40.0 → 0.42.0

package/dist/ui/table.d.ts

@@ -1,4 +1,31 @@
 import * as React from "react";
+/**
+ * The 2026 Figma list (#383): the Users table in the Admin frame, node
+ * 7406:5146. An N3 13px header with no rule under it, then rounded rows 2px
+ * apart, every other one on N1 at half strength, starting with the first.
+ *
+ * ## Rounded zebra rows on a real <table>
+ *
+ * This stays a `<table>`, so a screen reader keeps announcing rows and columns.
+ * Two things a table does not do on its own are done like this:
+ *
+ * - **The 2px between rows** is `border-separate` with `border-spacing: 0 2px`.
+ *   Spacing is the only gap a table can put between rows. It also adds 2px
+ *   above the header and below the last row, at the table's outer edges.
+ * - **The 12px corner** is on the CELLS, not the row: the first cell rounds
+ *   its left corners and the last its right. A `<tr>` cannot clip its own
+ *   background to its cells' corners, so the row paints nothing. Every ground
+ *   (zebra, hover, selected) is painted by the cells, keyed off the row through
+ *   `group/row`, so the corners clip it.
+ *
+ * Horizontal rhythm: the frame's rows are auto-layout with padding 12 and a
+ * 16px gap. Cells get 8px each side (8 + 8 = 16 between neighbours), and the
+ * first and last cell take 12 at the row's two ends.
+ *
+ * Row states, cell grounds over the zebra: hover (and a row whose menu is
+ * open) takes N1 at full strength, `bg-page`; `data-state="selected"` takes
+ * the primary tint, `bg-brand-tint`.
+ */
 declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;

package/dist/ui/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAapE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAgBpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAapE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAcrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}

package/dist/ui/table.js

@@ -2,26 +2,59 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The 2026 Figma list (#383): the Users table in the Admin frame, node
+ * 7406:5146. An N3 13px header with no rule under it, then rounded rows 2px
+ * apart, every other one on N1 at half strength, starting with the first.
+ *
+ * ## Rounded zebra rows on a real <table>
+ *
+ * This stays a `<table>`, so a screen reader keeps announcing rows and columns.
+ * Two things a table does not do on its own are done like this:
+ *
+ * - **The 2px between rows** is `border-separate` with `border-spacing: 0 2px`.
+ *   Spacing is the only gap a table can put between rows. It also adds 2px
+ *   above the header and below the last row, at the table's outer edges.
+ * - **The 12px corner** is on the CELLS, not the row: the first cell rounds
+ *   its left corners and the last its right. A `<tr>` cannot clip its own
+ *   background to its cells' corners, so the row paints nothing. Every ground
+ *   (zebra, hover, selected) is painted by the cells, keyed off the row through
+ *   `group/row`, so the corners clip it.
+ *
+ * Horizontal rhythm: the frame's rows are auto-layout with padding 12 and a
+ * 16px gap. Cells get 8px each side (8 + 8 = 16 between neighbours), and the
+ * first and last cell take 12 at the row's two ends.
+ *
+ * Row states, cell grounds over the zebra: hover (and a row whose menu is
+ * open) takes N1 at full strength, `bg-page`; `data-state="selected"` takes
+ * the primary tint, `bg-brand-tint`.
+ */
 function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-body-sm", className), ...props }) }));
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom border-separate border-spacing-x-0 border-spacing-y-0.5 text-body-sm text-ink", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
-    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
+    return (_jsx("thead", { "data-slot": "table-header", className: className, ...props }));
 }
 function TableBody({ className, ...props }) {
-    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+    return (_jsx("tbody", { "data-slot": "table-body", className: className, ...props }));
 }
 function TableFooter({ className, ...props }) {
     return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 }
 function TableRow({ className, ...props }) {
-    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+    return (_jsx("tr", { "data-slot": "table-row", className: cn(
+        // No ground of its own: see the docblock on Table. The cells read
+        // the row's parity, hover and selection through this group.
+        "group/row", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn("px-2 py-2 text-left align-middle text-caption font-normal whitespace-nowrap text-steel first:pl-3 last:pr-3 [&:has([role=checkbox])]:pr-0", className), ...props }));
 }
 function TableCell({ className, ...props }) {
-    return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("px-2 py-2 align-middle whitespace-nowrap transition-colors first:rounded-l-md first:pl-3 last:rounded-r-md last:pr-3 [&:has([role=checkbox])]:pr-0", 
+        // The zebra, then the states over it. Odd first: the first body row
+        // is tinted.
+        "group-odd/row:bg-page/50 group-hover/row:bg-page group-has-aria-expanded/row:bg-page group-data-[state=selected]/row:bg-brand-tint", className), ...props }));
 }
 function TableCaption({ className, ...props }) {
     return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-body-sm text-muted-foreground", className), ...props }));

package/dist/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACnE,OAAO,CACL,2BACY,iBAAiB,EAC3B,SAAS,EAAC,iCAAiC,YAE3C,6BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,KAC1D,KAAK,GACT,GACE,CACP,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KACvC,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACvE,OAAO,CACL,6BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,yDAAyD,EACzD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACnE,OAAO,CACL,0BACY,WAAW,EACrB,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACL,+BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,KAC/D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACnE,OAAO,CACL,2BACY,iBAAiB,EAC3B,SAAS,EAAC,iCAAiC,YAE3C,6BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CACV,KACG,KAAK,GACT,GACE,CACP,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACvE,OAAO,CACL,6BACY,YAAY,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,6BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,yDAAyD,EACzD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACnE,OAAO,CACL,0BACY,WAAW,EACrB,SAAS,EAAE,EAAE;QACX,kEAAkE;QAClE,4DAA4D;QAC5D,WAAW,EACX,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,2IAA2I,EAC3I,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACpE,OAAO,CACL,0BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,oJAAoJ;QACpJ,oEAAoE;QACpE,aAAa;QACb,oIAAoI,EACpI,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACL,+BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,KAC/D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}

package/dist/ui/tabs.d.ts

@@ -49,7 +49,7 @@ import { type VariantProps } from "class-variance-authority";
 declare function scrollActiveTabIntoView(list: HTMLElement | null | undefined): void;
 declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | "pill" | null | undefined;
+    variant?: "pill" | "line" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ref, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",