@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/containers/data-grid/formula-bar.js

@@ -20,7 +20,7 @@ function FormulaBar({
       "span",
       {
         title: labels.cell,
-        className: "grid h-control-sm min-w-12 shrink-0 place-items-center rounded-xs bg-surface-2 px-2 font-[650] text-[12px] text-ink-2 tabular-nums",
+        className: "grid h-control-sm min-w-12 shrink-0 place-items-center rounded-xs bg-surface-2 px-2 font-[650] text-fs-120 text-ink-2 tabular-nums",
         children: [
           /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
             labels.cell,
@@ -30,7 +30,7 @@ function FormulaBar({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 font-[650] text-[13px] text-accent-ink italic", children: "fx" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 font-[650] text-fs-130 text-accent-ink italic", children: "fx" }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -55,12 +55,12 @@ function FormulaBar({
           }
         },
         className: cn(
-          "h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 font-mono text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none disabled:opacity-60",
+          "h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 font-mono text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none disabled:opacity-60",
           error && "border-danger"
         )
       }
     ),
-    error ? /* @__PURE__ */ jsx("span", { role: "alert", className: "shrink-0 text-[12px] text-danger", children: error }) : null
+    error ? /* @__PURE__ */ jsx("span", { role: "alert", className: "shrink-0 text-fs-120 text-danger", children: error }) : null
   ] });
 }
 export {

package/dist/containers/data-grid/grid-toolbar.js

@@ -12,11 +12,11 @@ import {
   Trash2,
   Undo2,
   X
-} from "lucide-react";
+} from "../../icons/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../overlays/popover/popover.js";
 import { cn } from "../../utils/cn.js";
 const DENSITIES = ["compact", "normal", "comfortable"];
-const buttonClass = "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
+const buttonClass = "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-fs-125 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
 function GridToolbar({
   labels,
   search,
@@ -64,7 +64,7 @@ function GridToolbar({
           value: search,
           placeholder: labels.searchPlaceholder,
           onChange: (event) => onSearch(event.target.value),
-          className: "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none"
+          className: "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none"
         }
       )
     ] }),
@@ -129,7 +129,7 @@ function GridToolbar({
         id
       );
     }),
-    /* @__PURE__ */ jsxs("p", { className: "mr-auto text-[12px] text-ink-3", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs("p", { className: "mr-auto text-fs-120 text-ink-3", "aria-live": "polite", children: [
       labels.rowsCount(rowCount),
       selectedCount ? ` \xB7 ${labels.selectedCount(selectedCount)}` : ""
     ] }),
@@ -186,7 +186,7 @@ function GridToolbar({
           type: "button",
           "aria-pressed": density === option,
           onClick: () => onDensity(option),
-          className: "h-full rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
+          className: "h-full rounded-xs px-2 font-[600] text-fs-120 text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
           children: labels.densities[option]
         },
         option
@@ -205,7 +205,7 @@ function GridToolbar({
             return /* @__PURE__ */ jsxs(
               "label",
               {
-                className: "flex min-h-8 items-center gap-2 rounded-xs px-1.5 text-[13px] text-ink hover:bg-surface-2",
+                className: "flex min-h-8 items-center gap-2 rounded-xs px-1.5 text-fs-130 text-ink hover:bg-surface-2",
                 children: [
                   /* @__PURE__ */ jsx(
                     "input",

package/dist/containers/data-grid/spreadsheet.demos.d.ts

@@ -3,7 +3,7 @@ import { type Venta } from "./data-grid.fixtures.js";
 import { type CellChange, type DataGridProps, type RowsChange } from "./data-grid.js";
 import type { CellValue, DataGridColumn } from "./types.js";
 export type SheetControls = Pick<DataGridProps<Venta>, "density" | "height">;
-export declare const note = "text-[12.5px] text-ink-3";
+export declare const note = "text-fs-125 text-ink-3";
 export declare function Stack({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/containers/data-grid/spreadsheet.demos.js

@@ -4,7 +4,7 @@ import { BARBEROS, seeded, ventaColumns, ventas } from "./data-grid.fixtures.js"
 import {
   DataGrid
 } from "./data-grid.js";
-const note = "text-[12.5px] text-ink-3";
+const note = "text-fs-125 text-ink-3";
 function Stack({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "grid gap-2", children });
 }

package/dist/containers/data-grid/tool-panel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp } from "lucide-react";
 import { useId } from "react";
+import { ArrowDown, ArrowUp } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 const AGGREGATES = ["sum", "avg", "count", "min", "max"];
 const EMPTY_PIVOT = {
@@ -11,11 +11,11 @@ const EMPTY_PIVOT = {
   value: "",
   aggregate: "sum"
 };
-const selectClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink focus-visible:border-accent focus-visible:outline-none";
+const selectClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-fs-130 text-ink focus-visible:border-accent focus-visible:outline-none";
 const iconButton = "grid size-6 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface hover:text-ink disabled:pointer-events-none disabled:opacity-30 [&_svg]:size-3.5";
 function Section({ title, children }) {
   return /* @__PURE__ */ jsxs("section", { className: "grid gap-1 border-b-divider p-2 last:border-b-0", children: [
-    /* @__PURE__ */ jsx("h3", { className: "px-1 pb-0.5 font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]", children: title }),
+    /* @__PURE__ */ jsx("h3", { className: "px-1 pb-0.5 font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]", children: title }),
     children
   ] });
 }
@@ -25,7 +25,7 @@ function Check({
   onChange,
   children
 }) {
-  return /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 min-w-0 flex-1 items-center gap-2 text-[13px] text-ink", children: [
+  return /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 min-w-0 flex-1 items-center gap-2 text-fs-130 text-ink", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -76,7 +76,7 @@ function GridToolPanel({
       "aria-label": labels.toolPanel,
       style: maxHeight ? { maxHeight } : void 0,
       className: cn(
-        "min-h-0 min-w-0 overflow-y-auto bg-surface-2/40 text-[13px] @max-2xl/grid:max-h-72 @max-2xl/grid:border-b-divider @2xl/grid:w-64 @2xl/grid:shrink-0 @2xl/grid:border-l-divider",
+        "min-h-0 min-w-0 overflow-y-auto bg-surface-2/40 text-fs-130 @max-2xl/grid:max-h-72 @max-2xl/grid:border-b-divider @2xl/grid:w-64 @2xl/grid:shrink-0 @2xl/grid:border-l-divider",
         className
       ),
       children: [
@@ -135,7 +135,7 @@ function GridToolPanel({
               children: column.header
             }
           ),
-          groupBy.includes(column.id) ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-ink-3 tabular-nums", children: groupBy.indexOf(column.id) + 1 }) : null
+          groupBy.includes(column.id) ? /* @__PURE__ */ jsx("span", { className: "text-fs-110 text-ink-3 tabular-nums", children: groupBy.indexOf(column.id) + 1 }) : null
         ] }, column.id)) }) }) : null,
         measures.length > 0 && dimensions.length > 1 ? /* @__PURE__ */ jsxs(Section, { title: labels.panelPivot, children: [
           /* @__PURE__ */ jsx(
@@ -149,7 +149,7 @@ function GridToolPanel({
           ),
           pivotOn ? /* @__PURE__ */ jsxs("div", { className: "grid gap-2 pt-1", children: [
             /* @__PURE__ */ jsxs("fieldset", { className: "grid gap-0.5 border-0 p-0", children: [
-              /* @__PURE__ */ jsx("legend", { className: "px-1 pb-0.5 text-[12px] text-ink-3", children: labels.pivotRows }),
+              /* @__PURE__ */ jsx("legend", { className: "px-1 pb-0.5 text-fs-120 text-ink-3", children: labels.pivotRows }),
               dimensions.filter((column) => column.id !== pivot.column).map((column) => /* @__PURE__ */ jsx("div", { className: "flex items-center px-1", children: /* @__PURE__ */ jsx(
                 Check,
                 {
@@ -162,7 +162,7 @@ function GridToolPanel({
               ) }, column.id))
             ] }),
             /* @__PURE__ */ jsxs("label", { className: "grid gap-1", htmlFor: `${id}-column`, children: [
-              /* @__PURE__ */ jsx("span", { className: "px-1 text-[12px] text-ink-3", children: labels.pivotColumn }),
+              /* @__PURE__ */ jsx("span", { className: "px-1 text-fs-120 text-ink-3", children: labels.pivotColumn }),
               /* @__PURE__ */ jsxs(
                 "select",
                 {
@@ -181,7 +181,7 @@ function GridToolPanel({
               )
             ] }),
             /* @__PURE__ */ jsxs("label", { className: "grid gap-1", htmlFor: `${id}-value`, children: [
-              /* @__PURE__ */ jsx("span", { className: "px-1 text-[12px] text-ink-3", children: labels.pivotValue }),
+              /* @__PURE__ */ jsx("span", { className: "px-1 text-fs-120 text-ink-3", children: labels.pivotValue }),
               /* @__PURE__ */ jsxs(
                 "select",
                 {
@@ -197,7 +197,7 @@ function GridToolPanel({
               )
             ] }),
             /* @__PURE__ */ jsxs("label", { className: "grid gap-1", htmlFor: `${id}-aggregate`, children: [
-              /* @__PURE__ */ jsx("span", { className: "px-1 text-[12px] text-ink-3", children: labels.pivotAggregate }),
+              /* @__PURE__ */ jsx("span", { className: "px-1 text-fs-120 text-ink-3", children: labels.pivotAggregate }),
               /* @__PURE__ */ jsx(
                 "select",
                 {
@@ -209,7 +209,7 @@ function GridToolPanel({
                 }
               )
             ] }),
-            pivotValid ? null : /* @__PURE__ */ jsx("p", { role: "status", className: "px-1 text-[12px] text-ink-3", children: labels.pivotIncomplete })
+            pivotValid ? null : /* @__PURE__ */ jsx("p", { role: "status", className: "px-1 text-fs-120 text-ink-3", children: labels.pivotIncomplete })
           ] }) : null
         ] }) : null
       ]

package/dist/containers/description-list/description-list.js

@@ -5,7 +5,7 @@ function DescriptionList({ className, ...props }) {
     "dl",
     {
       className: cn(
-        "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-[9px] text-[13px]",
+        "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2.25 text-fs-130",
         "[&_dt]:text-ink-3 [&_dd]:m-0 [&_dd]:min-w-0 [&_dd]:break-words [&_dd]:text-right [&_dd]:font-semibold",
         "@max-sm/dl:grid-cols-1 @max-sm/dl:gap-y-0.5 @max-sm/dl:[&_dd]:mb-2 @max-sm/dl:[&_dd]:text-left",
         className

package/dist/containers/facts/facts.js

@@ -6,8 +6,8 @@ function Facts({ className, ...props }) {
     {
       className: cn(
         "mt-3.5 grid grid-cols-3 gap-3.5 border-t-divider border-dashed pt-3.5",
-        "[&_dt]:font-semibold [&_dt]:text-[11.5px] [&_dt]:text-ink-3",
-        "[&_dd]:mt-0.5 [&_dd]:font-[620] [&_dd]:text-[13px]",
+        "[&_dt]:font-semibold [&_dt]:text-fs-115 [&_dt]:text-ink-3",
+        "[&_dd]:mt-0.5 [&_dd]:font-[620] [&_dd]:text-fs-130",
         "[&_dt]:break-words [&_dd]:break-words @max-[560px]/facts:grid-cols-1",
         className
       ),

package/dist/containers/file-tree/file-tree.d.ts

@@ -1,4 +1,6 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import { type FileTreeNode } from "./model.js";
+export type FileTreePart = "root" | "tree" | "item" | "chevron" | "icon" | "name";
 export interface FileTreeProps {
     nodes: FileTreeNode[];
     /** Accessible name of the tree. */
@@ -10,9 +12,11 @@ export interface FileTreeProps {
     defaultExpandedIds?: string[];
     onExpandedChange?: (ids: string[]) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<FileTreePart>;
 }
 /**
  * Expandable tree following the WAI-ARIA tree pattern: one tab stop with roving focus,
  * arrows to move and open/close, Home/End, type-ahead, Enter or Space to select.
  */
-export declare function FileTree({ nodes, label, selectedId: selectedProp, defaultSelectedId, onSelect, expandedIds: expandedProp, defaultExpandedIds, onExpandedChange, className, }: FileTreeProps): import("react").JSX.Element;
+export declare function FileTree({ nodes, label, selectedId: selectedProp, defaultSelectedId, onSelect, expandedIds: expandedProp, defaultExpandedIds, onExpandedChange, className, classNames, }: FileTreeProps): import("react").JSX.Element;

package/dist/containers/file-tree/file-tree.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
 import {
   ChevronRight,
   File,
@@ -8,8 +9,7 @@ import {
   FileText,
   Folder,
   FolderOpen
-} from "lucide-react";
-import { useMemo, useRef, useState } from "react";
+} from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   flattenTree,
@@ -40,7 +40,8 @@ function FileTree({
   expandedIds: expandedProp,
   defaultExpandedIds = [],
   onExpandedChange,
-  className
+  className,
+  classNames
 }) {
   const [selectedState, setSelectedState] = useState(defaultSelectedId);
   const [expandedState, setExpandedState] = useState(defaultExpandedIds);
@@ -94,60 +95,83 @@ function FileTree({
       if (match) focusRow(match);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("@container/tree min-w-0", className), children: /* @__PURE__ */ jsx("div", { ref: listRef, role: "tree", "aria-label": label, className: "flex flex-col gap-0.5", children: rows.map((row) => {
-    const isSelected = row.node.id === selected;
-    const Icon = row.isFolder ? row.expanded ? FolderOpen : Folder : iconFor(row.node.name);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "treeitem",
-        "data-node-id": row.node.id,
-        tabIndex: row.node.id === tabStop ? 0 : -1,
-        "aria-level": row.depth,
-        "aria-posinset": row.position,
-        "aria-setsize": row.setSize,
-        "aria-expanded": row.isFolder ? row.expanded : void 0,
-        "aria-selected": isSelected,
-        onKeyDown: (event) => {
-          if (event.target === event.currentTarget) onKeyDown(event, row);
-        },
-        onFocus: (event) => {
-          if (event.target === event.currentTarget) setFocusId(row.node.id);
-        },
-        onClick: () => {
-          select(row);
-          if (row.isFolder) toggle(row.node.id, !row.expanded);
-          setFocusId(row.node.id);
-        },
-        style: { paddingInlineStart: `calc(${row.depth - 1} * 1rem + var(--pad-control-x))` },
-        className: cn(
-          "pressable flex min-h-control-sm min-w-0 cursor-pointer items-center gap-density-sm rounded-button pe-control-x text-body text-ink outline-none hover:bg-surface-2 focus-visible:focus-ring",
-          isSelected && "bg-accent-soft font-semibold text-accent-ink shadow-selected"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-ink-3", children: row.isFolder ? /* @__PURE__ */ jsx(
-            ChevronRight,
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "size-3.5 transition-transform duration-(--motion-duration) ease-style",
-                row.expanded && "rotate-90"
-              )
-            }
-          ) : null }),
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              "aria-hidden": "true",
-              className: cn("size-4 shrink-0", row.isFolder ? "text-accent-ink" : "text-ink-3")
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: row.node.name })
-        ]
-      },
-      row.node.id
-    );
-  }) }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/tree min-w-0", classNames?.root, className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "tree",
+      "aria-label": label,
+      className: cn("flex flex-col gap-0.5", classNames?.tree),
+      children: rows.map((row) => {
+        const isSelected = row.node.id === selected;
+        const Icon = row.isFolder ? row.expanded ? FolderOpen : Folder : iconFor(row.node.name);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "treeitem",
+            "data-node-id": row.node.id,
+            tabIndex: row.node.id === tabStop ? 0 : -1,
+            "aria-level": row.depth,
+            "aria-posinset": row.position,
+            "aria-setsize": row.setSize,
+            "aria-expanded": row.isFolder ? row.expanded : void 0,
+            "aria-selected": isSelected,
+            onKeyDown: (event) => {
+              if (event.target === event.currentTarget) onKeyDown(event, row);
+            },
+            onFocus: (event) => {
+              if (event.target === event.currentTarget) setFocusId(row.node.id);
+            },
+            onClick: () => {
+              select(row);
+              if (row.isFolder) toggle(row.node.id, !row.expanded);
+              setFocusId(row.node.id);
+            },
+            style: { paddingInlineStart: `calc(${row.depth - 1} * 1rem + var(--pad-control-x))` },
+            className: cn(
+              "pressable flex min-h-control-sm min-w-0 cursor-pointer items-center gap-density-sm rounded-button pe-control-x text-body text-ink outline-none hover:bg-surface-2 focus-visible:focus-ring",
+              isSelected && "bg-accent-soft font-semibold text-accent-ink shadow-selected",
+              classNames?.item
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex size-4 shrink-0 items-center justify-center text-ink-3",
+                    classNames?.chevron
+                  ),
+                  children: row.isFolder ? /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      "aria-hidden": "true",
+                      className: cn(
+                        "size-3.5 transition-transform duration-(--motion-duration) ease-style",
+                        row.expanded && "rotate-90"
+                      )
+                    }
+                  ) : null
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "size-4 shrink-0",
+                    row.isFolder ? "text-accent-ink" : "text-ink-3",
+                    classNames?.icon
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", classNames?.name), children: row.node.name })
+            ]
+          },
+          row.node.id
+        );
+      })
+    }
+  ) });
 }
 export {
   FileTree

package/dist/containers/file-tree/index.d.ts

@@ -1,2 +1,2 @@
-export { FileTree, type FileTreeProps } from "./file-tree.js";
+export { FileTree, type FileTreePart, type FileTreeProps } from "./file-tree.js";
 export { ancestorsOf, type FileTreeNode, type FlatRow, flattenTree, folderIds, type TreeKey, type TreeStep, treeStep, typeahead, } from "./model.js";

package/dist/containers/generic-row/generic-row.js

@@ -5,7 +5,7 @@ function GenericRow({ className, ...props }) {
     "div",
     {
       className: cn(
-        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 border-t-divider px-4 py-[11px] first:border-t-0",
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 border-t-divider px-4 py-2.75 first:border-t-0",
         className
       ),
       ...props
@@ -16,10 +16,10 @@ function GenericRowContent({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("min-w-0", className), ...props });
 }
 function GenericRowTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("break-words font-[650] text-[13px]", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("break-words font-[650] text-fs-130", className), ...props });
 }
 function GenericRowMeta({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("break-words text-[12px] text-ink-3", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("break-words text-fs-120 text-ink-3", className), ...props });
 }
 export {
   GenericRow,

package/dist/containers/hbars/hbars.js

@@ -44,9 +44,9 @@ function HBars({
         ),
         children: [
           rows.map((row) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-[12.5px]", children: row.name }),
-            /* @__PURE__ */ jsxs("div", { className: "relative flex h-[22px] items-center border-r-divider bg-[linear-gradient(to_right,var(--line)_1px,transparent_1px)] [background-size:20%_100%]", children: [
-              paired ? /* @__PURE__ */ jsx("div", { className: "flex h-[26px] w-full flex-col items-start justify-center gap-[3px]", children: row.values.map((value, index) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-fs-125", children: row.name }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex h-5.5 items-center border-r-divider bg-[linear-gradient(to_right,var(--line)_1px,transparent_1px)] [background-size:20%_100%]", children: [
+              paired ? /* @__PURE__ */ jsx("div", { className: "flex h-6.5 w-full flex-col items-start justify-center gap-0.75", children: row.values.map((value, index) => /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "relative z-[1] flex h-2 overflow-hidden rounded-xs",
@@ -82,7 +82,7 @@ function HBars({
               "span",
               {
                 className: cn(
-                  "text-right font-semibold text-[12px] leading-none tabular-nums",
+                  "text-right font-semibold text-fs-120 leading-none tabular-nums",
                   paired && "leading-[1.25]",
                   row.tone === "danger" && "text-danger"
                 ),
@@ -95,7 +95,7 @@ function HBars({
             /* @__PURE__ */ jsx("div", { className: "relative h-4", children: ticks.map((tick) => /* @__PURE__ */ jsx(
               "span",
               {
-                className: "-translate-x-1/2 absolute font-medium text-[10.5px] text-ink-3 leading-none tabular-nums",
+                className: "-translate-x-1/2 absolute font-medium text-fs-105 text-ink-3 leading-none tabular-nums",
                 style: { left: `${tick.position}%` },
                 children: tick.label
               },

package/dist/containers/item-card-group/index.d.ts

@@ -1 +1 @@
-export { ItemCardGroup, type ItemCardGroupItem, type ItemCardGroupProps, } from "./item-card-group.js";
+export { ItemCardGroup, type ItemCardGroupItem, type ItemCardGroupPart, type ItemCardGroupProps, } from "./item-card-group.js";

package/dist/containers/item-card-group/item-card-group.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface ItemCardGroupItem {
     id: string;
     title: ReactNode;
@@ -11,12 +12,15 @@ export interface ItemCardGroupItem {
     onSelect?: () => void;
     disabled?: boolean;
 }
+export type ItemCardGroupPart = "root" | "header" | "title" | "description" | "list" | "item" | "row" | "leading" | "text" | "itemTitle" | "itemDescription" | "trailing" | "chevron";
 export interface ItemCardGroupProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
     title?: ReactNode;
     description?: ReactNode;
     items: ItemCardGroupItem[];
     /** Id of the highlighted row. */
     selectedId?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ItemCardGroupPart>;
 }
 /** Rows grouped inside a single card (settings, clients, services), with an optional heading. */
-export declare function ItemCardGroup({ title, description, items, selectedId, className, ...props }: ItemCardGroupProps): import("react").JSX.Element;
+export declare function ItemCardGroup({ title, description, items, selectedId, className, classNames, ...props }: ItemCardGroupProps): import("react").JSX.Element;