@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/containers/item-card-group/item-card-group.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 function ItemCardGroup({
   title,
@@ -7,56 +7,101 @@ function ItemCardGroup({
   items,
   selectedId,
   className,
+  classNames,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: cn("@container/item-group flex min-w-0 flex-col gap-density-sm", className),
       ...props,
+      className: cn(
+        "@container/item-group flex min-w-0 flex-col gap-density-sm",
+        classNames?.root,
+        className
+      ),
       children: [
-        title || description ? /* @__PURE__ */ jsxs("header", { className: "flex min-w-0 flex-col px-1", children: [
-          title ? /* @__PURE__ */ jsx("h3", { className: "truncate text-card-title text-ink", children: title }) : null,
-          description ? /* @__PURE__ */ jsx("p", { className: "m-0 text-ink-3 text-meta", children: description }) : null
+        title || description ? /* @__PURE__ */ jsxs("header", { className: cn("flex min-w-0 flex-col px-1", classNames?.header), children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: cn("truncate text-card-title text-ink", classNames?.title), children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: cn("m-0 text-ink-3 text-meta", classNames?.description), children: description }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col overflow-hidden rounded-card border-card surface-card p-0 shadow-card", children: items.map((item, index) => {
-          const selected = item.id === selectedId;
-          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-            item.leading ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-ink-2 [&_svg]:size-5", children: item.leading }) : null,
-            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
-              /* @__PURE__ */ jsx("span", { className: "truncate text-row-title text-ink", children: item.title }),
-              item.description ? /* @__PURE__ */ jsx("span", { className: "truncate text-ink-3 text-meta", children: item.description }) : null
-            ] }),
-            item.trailing ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-density-sm text-ink-2 text-meta", children: item.trailing }) : null,
-            item.onSelect ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-ink-3", "aria-hidden": "true" }) : null
-          ] });
-          const rowClass = cn(
-            "flex min-h-control w-full min-w-0 items-center gap-density px-control-x py-density-sm",
-            index > 0 && "border-t-divider",
-            selected && "bg-accent-soft shadow-selected"
-          );
-          return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: item.onSelect ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: item.disabled,
-              "aria-current": selected ? "true" : void 0,
-              onClick: item.onSelect,
-              className: cn(
-                rowClass,
-                "pressable cursor-pointer text-left hover:bg-surface-2 focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50"
-              ),
-              children: body
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-current": selected ? "true" : void 0,
-              className: cn(rowClass, item.disabled && "opacity-50"),
-              children: body
-            }
-          ) }, item.id);
-        }) })
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn(
+              "m-0 flex list-none flex-col overflow-hidden rounded-card border-card surface-card p-0 shadow-card",
+              classNames?.list
+            ),
+            children: items.map((item, index) => {
+              const selected = item.id === selectedId;
+              const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+                item.leading ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center text-ink-2 [&_svg]:size-5",
+                      classNames?.leading
+                    ),
+                    children: item.leading
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-1 flex-col text-left", classNames?.text), children: [
+                  /* @__PURE__ */ jsx("span", { className: cn("truncate text-row-title text-ink", classNames?.itemTitle), children: item.title }),
+                  item.description ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn("truncate text-ink-3 text-meta", classNames?.itemDescription),
+                      children: item.description
+                    }
+                  ) : null
+                ] }),
+                item.trailing ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center gap-density-sm text-ink-2 text-meta",
+                      classNames?.trailing
+                    ),
+                    children: item.trailing
+                  }
+                ) : null,
+                item.onSelect ? /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    className: cn("size-4 shrink-0 text-ink-3", classNames?.chevron),
+                    "aria-hidden": "true"
+                  }
+                ) : null
+              ] });
+              const rowClass = cn(
+                "flex min-h-control w-full min-w-0 items-center gap-density px-control-x py-density-sm",
+                index > 0 && "border-t-divider",
+                selected && "bg-accent-soft shadow-selected",
+                classNames?.row
+              );
+              return /* @__PURE__ */ jsx("li", { className: cn("min-w-0", classNames?.item), children: item.onSelect ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: item.disabled,
+                  "aria-current": selected ? "true" : void 0,
+                  onClick: item.onSelect,
+                  className: cn(
+                    rowClass,
+                    "pressable cursor-pointer text-left hover:bg-surface-2 focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  ),
+                  children: body
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-current": selected ? "true" : void 0,
+                  className: cn(rowClass, item.disabled && "opacity-50"),
+                  children: body
+                }
+              ) }, item.id);
+            })
+          }
+        )
       ]
     }
   );

package/dist/containers/kanban/index.d.ts

@@ -1,2 +1,2 @@
-export { Kanban, type KanbanProps } from "./kanban.js";
+export { Kanban, type KanbanPart, type KanbanProps } from "./kanban.js";
 export { dropIndex, type KanbanCardData, type KanbanColumnData, type KanbanKey, type KanbanMove, keyboardTarget, locateCard, type MoveOptions, moveCard, type WipStatus, wipStatus, } from "./model.js";

package/dist/containers/kanban/kanban.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { type KanbanCardData, type KanbanColumnData, type KanbanMove } from "./model.js";
+export type KanbanPart = "root" | "board" | "column" | "columnHeader" | "columnTitle" | "count" | "cards" | "card" | "grip" | "empty" | "indicator" | "ghost";
 export interface KanbanProps {
     /** Controlled board. Pair with `onColumnsChange`. */
     columns?: KanbanColumnData[];
@@ -13,10 +15,12 @@ export interface KanbanProps {
     emptyLabel?: string;
     "aria-label"?: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<KanbanPart>;
 }
 /**
  * Board of columns with draggable cards and WIP limits. Pointer: drag a card (touch: use the
  * grip). Keyboard: Space or Enter picks a card up, arrows move it, Space or Enter drops it,
  * Escape cancels. Moves are announced in a live region.
  */
-export declare function Kanban({ columns: controlled, defaultColumns, onColumnsChange, enforceLimit, renderCard, emptyLabel, className, "aria-label": ariaLabel, }: KanbanProps): import("react").JSX.Element;
+export declare function Kanban({ columns: controlled, defaultColumns, onColumnsChange, enforceLimit, renderCard, emptyLabel, className, classNames, "aria-label": ariaLabel, }: KanbanProps): import("react").JSX.Element;

package/dist/containers/kanban/kanban.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { GripVertical } from "lucide-react";
 import {
   useCallback,
   useId,
@@ -10,6 +9,7 @@ import {
 } from "react";
 import { Avatar } from "../../atoms/avatar/avatar.js";
 import { Chip } from "../../atoms/chip/chip.js";
+import { GripVertical } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   dropIndex,
@@ -39,6 +39,7 @@ function Kanban({
   renderCard,
   emptyLabel = "Sin tarjetas",
   className,
+  classNames,
   "aria-label": ariaLabel = "Tablero"
 }) {
   const [internal, setInternal] = useState(defaultColumns);
@@ -191,7 +192,7 @@ function Kanban({
       "div",
       {
         ref: rootRef,
-        className: cn("@container/kanban min-w-0", className),
+        className: cn("@container/kanban min-w-0", classNames?.root, className),
         onBlur: (event) => {
           const next = event.relatedTarget;
           if (grabbedId && next && !rootRef.current?.contains(next)) {
@@ -208,7 +209,10 @@ function Kanban({
             {
               role: "group",
               "aria-label": ariaLabel,
-              className: "flex snap-x snap-mandatory items-start gap-density overflow-x-auto pb-2",
+              className: cn(
+                "flex snap-x snap-mandatory items-start gap-density overflow-x-auto pb-2",
+                classNames?.board
+              ),
               children: shown.map((column) => {
                 const state = wipStatus(column.cards.length, column.wipLimit);
                 const targetHere = drag?.target?.columnId === column.id ? drag.target.index : null;
@@ -218,7 +222,7 @@ function Kanban({
                   "li",
                   {
                     "aria-hidden": "true",
-                    className: "h-1 shrink-0 rounded-badge bg-accent",
+                    className: cn("h-1 shrink-0 rounded-badge bg-accent", classNames?.indicator),
                     "data-drop-indicator": ""
                   },
                   key
@@ -245,7 +249,8 @@ function Kanban({
                         className: cn(
                           "pressable relative flex cursor-grab select-none gap-1 rounded-input border-card surface-card p-density shadow-card focus-visible:focus-ring",
                           isDragged && "opacity-40",
-                          grabbed && "shadow-selected"
+                          grabbed && "shadow-selected",
+                          classNames?.card
                         ),
                         children: [
                           /* @__PURE__ */ jsx(
@@ -253,7 +258,10 @@ function Kanban({
                             {
                               "data-grip": "",
                               "aria-hidden": "true",
-                              className: "-ml-1 flex w-4 shrink-0 touch-none items-start pt-0.5 text-ink-3",
+                              className: cn(
+                                "-ml-1 flex w-4 shrink-0 touch-none items-start pt-0.5 text-ink-3",
+                                classNames?.grip
+                              ),
                               children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
                             }
                           ),
@@ -269,23 +277,63 @@ function Kanban({
                   {
                     "data-column-id": column.id,
                     "aria-label": column.title,
-                    className: "flex w-[min(18rem,85cqw)] shrink-0 snap-start flex-col gap-density-sm rounded-card bg-surface-sunken p-density-sm @4xl/kanban:w-auto @4xl/kanban:min-w-56 @4xl/kanban:flex-1",
+                    className: cn(
+                      "flex w-[min(18rem,85cqw)] shrink-0 snap-start flex-col gap-density-sm rounded-card bg-surface-sunken p-density-sm @4xl/kanban:w-auto @4xl/kanban:min-w-56 @4xl/kanban:flex-1",
+                      classNames?.column
+                    ),
                     children: [
-                      /* @__PURE__ */ jsxs("header", { className: "flex min-w-0 items-center justify-between gap-density-sm px-1 pt-1", children: [
-                        /* @__PURE__ */ jsx("h3", { className: "min-w-0 truncate text-card-title text-ink", children: column.title }),
-                        /* @__PURE__ */ jsx(
-                          Chip,
-                          {
-                            tone: state === "over" ? "danger" : state === "at-limit" ? "warning" : "neutral",
-                            "aria-label": column.wipLimit === void 0 ? `${column.cards.length} tarjetas` : `${column.cards.length} de ${column.wipLimit} tarjetas, l\xEDmite de trabajo en curso`,
-                            children: column.wipLimit === void 0 ? column.cards.length : `${column.cards.length}/${column.wipLimit}`
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxs("ul", { className: "m-0 flex min-h-16 list-none flex-col gap-density-sm p-0", children: [
-                        items,
-                        column.cards.length === 0 && targetHere === null ? /* @__PURE__ */ jsx("li", { className: "px-1 py-density text-center text-ink-3 text-meta", children: emptyLabel }) : null
-                      ] })
+                      /* @__PURE__ */ jsxs(
+                        "header",
+                        {
+                          className: cn(
+                            "flex min-w-0 items-center justify-between gap-density-sm px-1 pt-1",
+                            classNames?.columnHeader
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "h3",
+                              {
+                                className: cn(
+                                  "min-w-0 truncate text-card-title text-ink",
+                                  classNames?.columnTitle
+                                ),
+                                children: column.title
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Chip,
+                              {
+                                className: classNames?.count,
+                                tone: state === "over" ? "danger" : state === "at-limit" ? "warning" : "neutral",
+                                "aria-label": column.wipLimit === void 0 ? `${column.cards.length} tarjetas` : `${column.cards.length} de ${column.wipLimit} tarjetas, l\xEDmite de trabajo en curso`,
+                                children: column.wipLimit === void 0 ? column.cards.length : `${column.cards.length}/${column.wipLimit}`
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "ul",
+                        {
+                          className: cn(
+                            "m-0 flex min-h-16 list-none flex-col gap-density-sm p-0",
+                            classNames?.cards
+                          ),
+                          children: [
+                            items,
+                            column.cards.length === 0 && targetHere === null ? /* @__PURE__ */ jsx(
+                              "li",
+                              {
+                                className: cn(
+                                  "px-1 py-density text-center text-ink-3 text-meta",
+                                  classNames?.empty
+                                ),
+                                children: emptyLabel
+                              }
+                            ) : null
+                          ]
+                        }
+                      )
                     ]
                   },
                   column.id
@@ -297,7 +345,10 @@ function Kanban({
             "div",
             {
               "aria-hidden": "true",
-              className: "pointer-events-none fixed z-90 rotate-1 rounded-input border-card surface-card p-density shadow-overlay",
+              className: cn(
+                "pointer-events-none fixed z-90 rotate-1 rounded-input border-card surface-card p-density shadow-overlay",
+                classNames?.ghost
+              ),
               style: {
                 left: drag.x - drag.offsetX,
                 top: drag.y - drag.offsetY,

package/dist/containers/kpi/kpi.d.ts

@@ -1,6 +1,8 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type KpiVariant = "default" | "danger";
-export interface KpiProps {
+export type KpiPart = "root" | "label" | "value" | "suffix" | "description";
+export interface KpiProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** Short label describing the metric. */
     label: ReactNode;
     /** Highlighted number, already formatted by the consumer. */
@@ -10,6 +12,7 @@ export interface KpiProps {
     /** Optional subtext. */
     description?: ReactNode;
     variant?: KpiVariant;
-    className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<KpiPart>;
 }
-export declare function Kpi({ label, value, suffix, description, variant, className, }: KpiProps): import("react").JSX.Element;
+export declare function Kpi({ label, value, suffix, description, variant, className, classNames, ...props }: KpiProps): import("react").JSX.Element;

package/dist/containers/kpi/kpi.js

@@ -6,31 +6,45 @@ function Kpi({
   suffix,
   description,
   variant = "default",
-  className
+  className,
+  classNames,
+  ...props
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       className: cn(
-        "@container/kpi flex min-w-0 flex-col gap-0.5 bg-surface px-[18px] py-3.5",
+        "@container/kpi flex min-w-0 flex-col gap-0.5 bg-surface px-4.5 py-3.5",
+        classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "break-words font-semibold text-[12px] text-ink-2", children: label }),
+        /* @__PURE__ */ jsx("span", { className: cn("break-words font-semibold text-fs-120 text-ink-2", classNames?.label), children: label }),
         /* @__PURE__ */ jsxs(
           "span",
           {
             className: cn(
-              "break-words text-kpi-number tabular-nums @max-[9rem]/kpi:text-[22px]",
-              variant === "danger" ? "text-danger" : "text-ink"
+              "break-words text-kpi-number tabular-nums @max-[9rem]/kpi:text-fs-220",
+              variant === "danger" ? "text-danger" : "text-ink",
+              classNames?.value
             ),
             children: [
               value,
-              suffix ? /* @__PURE__ */ jsx("small", { className: "ml-1 font-semibold text-[14px] text-ink-3 tracking-normal", children: suffix }) : null
+              suffix ? /* @__PURE__ */ jsx(
+                "small",
+                {
+                  className: cn(
+                    "ml-1 font-semibold text-fs-140 text-ink-3 tracking-normal",
+                    classNames?.suffix
+                  ),
+                  children: suffix
+                }
+              ) : null
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsx("span", { className: "break-words text-[12px] text-ink-3", children: description }) : null
+        description ? /* @__PURE__ */ jsx("span", { className: cn("break-words text-fs-120 text-ink-3", classNames?.description), children: description }) : null
       ]
     }
   );

package/dist/containers/kpi-group/index.d.ts

@@ -1 +1 @@
-export { KpiGroup, type KpiGroupItem, type KpiGroupProps } from "./kpi-group.js";
+export { KpiGroup, type KpiGroupItem, type KpiGroupPart, type KpiGroupProps } from "./kpi-group.js";

package/dist/containers/kpi-group/kpi-group.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import type { NumberFormatConfig } from "../../atoms/number-value/format.js";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface KpiGroupItem {
     id: string;
     label: ReactNode;
@@ -13,13 +14,16 @@ export interface KpiGroupItem {
     invertTrend?: boolean;
     description?: ReactNode;
 }
+export type KpiGroupPart = "root" | "list" | "item" | "label" | "value" | "trend" | "description";
 export interface KpiGroupProps extends Omit<ComponentPropsWithoutRef<"dl">, "children"> {
     items: KpiGroupItem[];
     /** Animate numeric values counting up. */
     animate?: boolean;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root wrapper and is merged last. */
+    classNames?: ClassNames<KpiGroupPart>;
 }
 /**
  * Metrics that belong together in one card, divided by hairlines. Columns follow the
  * container width: 1, 2 or 4 across.
  */
-export declare function KpiGroup({ items, animate, className, ...props }: KpiGroupProps): import("react").JSX.Element;
+export declare function KpiGroup({ items, animate, className, classNames, ...props }: KpiGroupProps): import("react").JSX.Element;

package/dist/containers/kpi-group/kpi-group.js

@@ -2,36 +2,64 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberValue } from "../../atoms/number-value/number-value.js";
 import { TrendChip } from "../../atoms/trend-chip/trend-chip.js";
 import { cn } from "../../utils/cn.js";
-function KpiGroup({ items, animate = true, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("@container/kpi-group min-w-0", className), children: /* @__PURE__ */ jsx(
+function KpiGroup({
+  items,
+  animate = true,
+  className,
+  classNames,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/kpi-group min-w-0", classNames?.root, className), children: /* @__PURE__ */ jsx(
     "dl",
     {
-      className: "m-0 grid grid-cols-1 gap-px overflow-hidden rounded-card border-card bg-divider shadow-card @sm/kpi-group:grid-cols-2 @3xl/kpi-group:grid-cols-4",
       ...props,
-      children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "surface-card flex min-w-0 flex-col gap-density-sm p-card", children: [
-        /* @__PURE__ */ jsx("dt", { className: "truncate font-semibold text-ink-2 text-meta", children: item.label }),
-        /* @__PURE__ */ jsxs("dd", { className: "m-0 flex min-w-0 flex-col gap-density-sm", children: [
-          /* @__PURE__ */ jsx("span", { className: "break-words text-kpi-number text-ink tabular-nums", children: typeof item.value === "number" ? /* @__PURE__ */ jsx(
-            NumberValue,
-            {
-              value: item.value,
-              format: item.format,
-              duration: animate ? 900 : 0,
-              animateOnMount: animate
-            }
-          ) : item.value }),
-          item.trend !== void 0 ? /* @__PURE__ */ jsx(
-            TrendChip,
-            {
-              value: item.trend,
-              invert: item.invertTrend,
-              label: item.trendLabel,
-              className: "w-fit"
-            }
-          ) : null,
-          item.description ? /* @__PURE__ */ jsx("span", { className: "break-words text-ink-3 text-meta", children: item.description }) : null
-        ] })
-      ] }, item.id))
+      className: cn(
+        "m-0 grid grid-cols-1 gap-px overflow-hidden rounded-card border-card bg-divider shadow-card @sm/kpi-group:grid-cols-2 @3xl/kpi-group:grid-cols-4",
+        classNames?.list
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "surface-card flex min-w-0 flex-col gap-density-sm p-card",
+            classNames?.item
+          ),
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: cn("truncate font-semibold text-ink-2 text-meta", classNames?.label), children: item.label }),
+            /* @__PURE__ */ jsxs("dd", { className: "m-0 flex min-w-0 flex-col gap-density-sm", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "break-words text-kpi-number text-ink tabular-nums",
+                    classNames?.value
+                  ),
+                  children: typeof item.value === "number" ? /* @__PURE__ */ jsx(
+                    NumberValue,
+                    {
+                      value: item.value,
+                      format: item.format,
+                      duration: animate ? 900 : 0,
+                      animateOnMount: animate
+                    }
+                  ) : item.value
+                }
+              ),
+              item.trend !== void 0 ? /* @__PURE__ */ jsx(
+                TrendChip,
+                {
+                  value: item.trend,
+                  invert: item.invertTrend,
+                  label: item.trendLabel,
+                  className: cn("w-fit", classNames?.trend)
+                }
+              ) : null,
+              item.description ? /* @__PURE__ */ jsx("span", { className: cn("break-words text-ink-3 text-meta", classNames?.description), children: item.description }) : null
+            ] })
+          ]
+        },
+        item.id
+      ))
     }
   ) });
 }

package/dist/containers/page-header/page-header.js

@@ -10,7 +10,7 @@ function PageHeader({ className, ...props }) {
   );
 }
 function PageHeaderEyebrow({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-semibold text-[12px] text-ink-3", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-semibold text-fs-120 text-ink-3", className), ...props });
 }
 function PageHeaderTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -25,7 +25,7 @@ function PageHeaderLede({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "p",
     {
-      className: cn("mt-[5px] max-w-[68ch] break-words text-lede text-ink-2", className),
+      className: cn("mt-1.25 max-w-[68ch] break-words text-lede text-ink-2", className),
       ...props
     }
   );

package/dist/containers/responsive-list/responsive-list.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface ResponsiveListColumn<T> {
     key: string;
     header: string;
@@ -7,6 +8,7 @@ export interface ResponsiveListColumn<T> {
     primary?: boolean;
     align?: "start" | "end";
 }
+export type ResponsiveListPart = "root" | "tableWrapper" | "cards" | "card" | "cardTitle" | "cardDetails" | "cardDetail" | "cardLabel" | "cardValue" | "actions";
 export interface ResponsiveListProps<T> {
     /** Accessible name of the table and of the card list. */
     caption: string;
@@ -19,6 +21,8 @@ export interface ResponsiveListProps<T> {
     actionsHeader?: string;
     rowClassName?: (item: T) => string | undefined;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ResponsiveListPart>;
 }
 /** A table from `md` up and a stack of cards below it, from one column definition. */
-export declare function ResponsiveList<T>({ caption, items, columns, rowKey, renderActions, actionsHeader, rowClassName, className, }: ResponsiveListProps<T>): import("react").JSX.Element;
+export declare function ResponsiveList<T>({ caption, items, columns, rowKey, renderActions, actionsHeader, rowClassName, className, classNames, }: ResponsiveListProps<T>): import("react").JSX.Element;