@jcsoftdev/ui 0.1.7 → 0.2.0

package/src/containers/hbars/hbars.tsx

@@ -110,10 +110,10 @@ export function HBars({
       >
         {rows.map((row) => (
           <Fragment key={row.id}>
-            <span className="truncate font-semibold text-[12.5px]">{row.name}</span>
-            <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%]">
+            <span className="truncate font-semibold text-fs-125">{row.name}</span>
+            <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%]">
               {paired ? (
-                <div className="flex h-[26px] w-full flex-col items-start justify-center gap-[3px]">
+                <div className="flex h-6.5 w-full flex-col items-start justify-center gap-0.75">
                   {row.values.map((value, index) => (
                     <div
                       key={series[index]?.id ?? index}
@@ -148,7 +148,7 @@ export function HBars({
             </div>
             <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",
               )}
@@ -164,7 +164,7 @@ export function HBars({
               {ticks.map((tick) => (
                 <span
                   key={tick.position}
-                  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}%` }}
                 >
                   {tick.label}

package/src/containers/item-card-group/index.ts

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

package/src/containers/item-card-group/item-card-group.tsx

@@ -1,5 +1,6 @@
-import { ChevronRight } from "lucide-react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { ChevronRight } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export interface ItemCardGroupItem {
@@ -15,12 +16,29 @@ export interface ItemCardGroupItem {
   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. */
@@ -30,42 +48,75 @@ export function ItemCardGroup({
   items,
   selectedId,
   className,
+  classNames,
   ...props
 }: ItemCardGroupProps) {
   return (
     <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,
+      )}
     >
       {title || description ? (
-        <header className="flex min-w-0 flex-col px-1">
-          {title ? <h3 className="truncate text-card-title text-ink">{title}</h3> : null}
-          {description ? <p className="m-0 text-ink-3 text-meta">{description}</p> : null}
+        <header className={cn("flex min-w-0 flex-col px-1", classNames?.header)}>
+          {title ? (
+            <h3 className={cn("truncate text-card-title text-ink", classNames?.title)}>{title}</h3>
+          ) : null}
+          {description ? (
+            <p className={cn("m-0 text-ink-3 text-meta", classNames?.description)}>{description}</p>
+          ) : null}
         </header>
       ) : null}
-      <ul className="m-0 flex list-none flex-col overflow-hidden rounded-card border-card surface-card p-0 shadow-card">
+      <ul
+        className={cn(
+          "m-0 flex list-none flex-col overflow-hidden rounded-card border-card surface-card p-0 shadow-card",
+          classNames?.list,
+        )}
+      >
         {items.map((item, index) => {
           const selected = item.id === selectedId;
           const body = (
             <>
               {item.leading ? (
-                <span className="flex shrink-0 items-center text-ink-2 [&_svg]:size-5">
+                <span
+                  className={cn(
+                    "flex shrink-0 items-center text-ink-2 [&_svg]:size-5",
+                    classNames?.leading,
+                  )}
+                >
                   {item.leading}
                 </span>
               ) : null}
-              <span className="flex min-w-0 flex-1 flex-col text-left">
-                <span className="truncate text-row-title text-ink">{item.title}</span>
+              <span className={cn("flex min-w-0 flex-1 flex-col text-left", classNames?.text)}>
+                <span className={cn("truncate text-row-title text-ink", classNames?.itemTitle)}>
+                  {item.title}
+                </span>
                 {item.description ? (
-                  <span className="truncate text-ink-3 text-meta">{item.description}</span>
+                  <span
+                    className={cn("truncate text-ink-3 text-meta", classNames?.itemDescription)}
+                  >
+                    {item.description}
+                  </span>
                 ) : null}
               </span>
               {item.trailing ? (
-                <span className="flex shrink-0 items-center gap-density-sm text-ink-2 text-meta">
+                <span
+                  className={cn(
+                    "flex shrink-0 items-center gap-density-sm text-ink-2 text-meta",
+                    classNames?.trailing,
+                  )}
+                >
                   {item.trailing}
                 </span>
               ) : null}
               {item.onSelect ? (
-                <ChevronRight className="size-4 shrink-0 text-ink-3" aria-hidden="true" />
+                <ChevronRight
+                  className={cn("size-4 shrink-0 text-ink-3", classNames?.chevron)}
+                  aria-hidden="true"
+                />
               ) : null}
             </>
           );
@@ -73,9 +124,10 @@ export function ItemCardGroup({
             "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 (
-            <li key={item.id} className="min-w-0">
+            <li key={item.id} className={cn("min-w-0", classNames?.item)}>
               {item.onSelect ? (
                 <button
                   type="button"

package/src/containers/kanban/index.ts

@@ -1,4 +1,4 @@
-export { Kanban, type KanbanProps } from "./kanban.js";
+export { Kanban, type KanbanPart, type KanbanProps } from "./kanban.js";
 export {
   dropIndex,
   type KanbanCardData,

package/src/containers/kanban/kanban.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { GripVertical } from "lucide-react";
 import {
   type KeyboardEvent,
   type ReactNode,
@@ -13,6 +12,8 @@ import {
 } from "react";
 import { Avatar } from "../../atoms/avatar/avatar.js";
 import { Chip } from "../../atoms/chip/chip.js";
+import { GripVertical } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   dropIndex,
@@ -26,6 +27,20 @@ import {
   wipStatus,
 } 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[];
@@ -39,6 +54,8 @@ 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>;
 }
 
 const KEYS: readonly string[] = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
@@ -89,6 +106,7 @@ export function Kanban({
   renderCard,
   emptyLabel = "Sin tarjetas",
   className,
+  classNames,
   "aria-label": ariaLabel = "Tablero",
 }: KanbanProps) {
   const [internal, setInternal] = useState(defaultColumns);
@@ -256,7 +274,7 @@ export function Kanban({
     // biome-ignore lint/a11y/noStaticElementInteractions: focus leaving the board cancels a held card
     <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 as Node | null;
         if (grabbedId && next && !rootRef.current?.contains(next)) {
@@ -277,7 +295,10 @@ export function Kanban({
       <div
         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,
+        )}
       >
         {shown.map((column) => {
           const state = wipStatus(column.cards.length, column.wipLimit);
@@ -288,7 +309,7 @@ export function Kanban({
             <li
               key={key}
               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=""
             />
           );
@@ -315,12 +336,16 @@ export function Kanban({
                     "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",
+                    classNames?.card,
                   )}
                 >
                   <span
                     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,
+                    )}
                   >
                     <GripVertical className="size-4" />
                   </span>
@@ -338,11 +363,27 @@ export function Kanban({
               key={column.id}
               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,
+              )}
             >
-              <header className="flex min-w-0 items-center justify-between gap-density-sm px-1 pt-1">
-                <h3 className="min-w-0 truncate text-card-title text-ink">{column.title}</h3>
+              <header
+                className={cn(
+                  "flex min-w-0 items-center justify-between gap-density-sm px-1 pt-1",
+                  classNames?.columnHeader,
+                )}
+              >
+                <h3
+                  className={cn(
+                    "min-w-0 truncate text-card-title text-ink",
+                    classNames?.columnTitle,
+                  )}
+                >
+                  {column.title}
+                </h3>
                 <Chip
+                  className={classNames?.count}
                   tone={state === "over" ? "danger" : state === "at-limit" ? "warning" : "neutral"}
                   aria-label={
                     column.wipLimit === undefined
@@ -355,10 +396,22 @@ export function Kanban({
                     : `${column.cards.length}/${column.wipLimit}`}
                 </Chip>
               </header>
-              <ul className="m-0 flex min-h-16 list-none flex-col gap-density-sm p-0">
+              <ul
+                className={cn(
+                  "m-0 flex min-h-16 list-none flex-col gap-density-sm p-0",
+                  classNames?.cards,
+                )}
+              >
                 {items}
                 {column.cards.length === 0 && targetHere === null ? (
-                  <li className="px-1 py-density text-center text-ink-3 text-meta">{emptyLabel}</li>
+                  <li
+                    className={cn(
+                      "px-1 py-density text-center text-ink-3 text-meta",
+                      classNames?.empty,
+                    )}
+                  >
+                    {emptyLabel}
+                  </li>
                 ) : null}
               </ul>
             </section>
@@ -368,7 +421,10 @@ export function Kanban({
       {drag && dragged ? (
         <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/src/containers/kpi/kpi.tsx

@@ -1,9 +1,12 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.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. */
@@ -13,7 +16,8 @@ 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 function Kpi({
@@ -23,30 +27,44 @@ export function Kpi({
   description,
   variant = "default",
   className,
+  classNames,
+  ...props
 }: KpiProps) {
   return (
     <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,
       )}
     >
-      <span className="break-words font-semibold text-[12px] text-ink-2">{label}</span>
+      <span className={cn("break-words font-semibold text-fs-120 text-ink-2", classNames?.label)}>
+        {label}
+      </span>
       <span
         className={cn(
-          "break-words text-kpi-number tabular-nums @max-[9rem]/kpi:text-[22px]",
+          "break-words text-kpi-number tabular-nums @max-[9rem]/kpi:text-fs-220",
           variant === "danger" ? "text-danger" : "text-ink",
+          classNames?.value,
         )}
       >
         {value}
         {suffix ? (
-          <small className="ml-1 font-semibold text-[14px] text-ink-3 tracking-normal">
+          <small
+            className={cn(
+              "ml-1 font-semibold text-fs-140 text-ink-3 tracking-normal",
+              classNames?.suffix,
+            )}
+          >
             {suffix}
           </small>
         ) : null}
       </span>
       {description ? (
-        <span className="break-words text-[12px] text-ink-3">{description}</span>
+        <span className={cn("break-words text-fs-120 text-ink-3", classNames?.description)}>
+          {description}
+        </span>
       ) : null}
     </div>
   );

package/src/containers/kpi-group/index.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/src/containers/kpi-group/kpi-group.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import type { NumberFormatConfig } from "../../atoms/number-value/format.js";
 import { NumberValue } from "../../atoms/number-value/number-value.js";
 import { TrendChip } from "../../atoms/trend-chip/trend-chip.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export interface KpiGroupItem {
@@ -18,28 +19,54 @@ export interface KpiGroupItem {
   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 function KpiGroup({ items, animate = true, className, ...props }: KpiGroupProps) {
+export function KpiGroup({
+  items,
+  animate = true,
+  className,
+  classNames,
+  ...props
+}: KpiGroupProps) {
   return (
-    <div className={cn("@container/kpi-group min-w-0", className)}>
+    <div className={cn("@container/kpi-group min-w-0", classNames?.root, className)}>
       <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}
+        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,
+        )}
       >
         {items.map((item) => (
-          <div key={item.id} className="surface-card flex min-w-0 flex-col gap-density-sm p-card">
-            <dt className="truncate font-semibold text-ink-2 text-meta">{item.label}</dt>
+          <div
+            key={item.id}
+            className={cn(
+              "surface-card flex min-w-0 flex-col gap-density-sm p-card",
+              classNames?.item,
+            )}
+          >
+            <dt className={cn("truncate font-semibold text-ink-2 text-meta", classNames?.label)}>
+              {item.label}
+            </dt>
             <dd className="m-0 flex min-w-0 flex-col gap-density-sm">
-              <span className="break-words text-kpi-number text-ink tabular-nums">
+              <span
+                className={cn(
+                  "break-words text-kpi-number text-ink tabular-nums",
+                  classNames?.value,
+                )}
+              >
                 {typeof item.value === "number" ? (
                   <NumberValue
                     value={item.value}
@@ -56,11 +83,13 @@ export function KpiGroup({ items, animate = true, className, ...props }: KpiGrou
                   value={item.trend}
                   invert={item.invertTrend}
                   label={item.trendLabel}
-                  className="w-fit"
+                  className={cn("w-fit", classNames?.trend)}
                 />
               ) : null}
               {item.description ? (
-                <span className="break-words text-ink-3 text-meta">{item.description}</span>
+                <span className={cn("break-words text-ink-3 text-meta", classNames?.description)}>
+                  {item.description}
+                </span>
               ) : null}
             </dd>
           </div>

package/src/containers/page-header/page-header.tsx

@@ -20,7 +20,7 @@ export function PageHeader({ className, ...props }: PageHeaderProps) {
 export type PageHeaderEyebrowProps = ComponentPropsWithoutRef<"div">;
 
 export function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {
-  return <div className={cn("mb-1 font-semibold text-[12px] text-ink-3", className)} {...props} />;
+  return <div className={cn("mb-1 font-semibold text-fs-120 text-ink-3", className)} {...props} />;
 }
 
 export type PageHeaderTitleProps = ComponentPropsWithoutRef<"h1">;
@@ -40,7 +40,7 @@ export type PageHeaderLedeProps = ComponentPropsWithoutRef<"p">;
 export function PageHeaderLede({ className, ...props }: PageHeaderLedeProps) {
   return (
     <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/src/containers/responsive-list/responsive-list.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useUiStrings } from "../../i18n/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   Table,
@@ -21,6 +22,18 @@ export interface ResponsiveListColumn<T> {
   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;
@@ -33,6 +46,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. */
@@ -45,14 +60,20 @@ export function ResponsiveList<T>({
   actionsHeader,
   rowClassName,
   className,
+  classNames,
 }: ResponsiveListProps<T>) {
   const strings = useUiStrings();
   const primary = columns.find((column) => column.primary) ?? columns[0];
   const details = columns.filter((column) => column !== primary);
 
   return (
-    <div className={cn("min-w-0", className)}>
-      <div className="hidden rounded-card border-card shadow-card surface-card md:block">
+    <div className={cn("min-w-0", classNames?.root, className)}>
+      <div
+        className={cn(
+          "hidden rounded-card border-card shadow-card surface-card md:block",
+          classNames?.tableWrapper,
+        )}
+      >
         <Table>
           <caption className="sr-only">{caption}</caption>
           <TableHead>
@@ -83,7 +104,9 @@ export function ResponsiveList<T>({
                 ))}
                 {renderActions ? (
                   <TableCell alignRight>
-                    <div className="flex flex-wrap justify-end gap-2">{renderActions(item)}</div>
+                    <div className={cn("flex flex-wrap justify-end gap-2", classNames?.actions)}>
+                      {renderActions(item)}
+                    </div>
                   </TableCell>
                 ) : null}
               </TableRow>
@@ -91,7 +114,10 @@ export function ResponsiveList<T>({
           </TableBody>
         </Table>
       </div>
-      <ul aria-label={caption} className="m-0 flex list-none flex-col gap-density p-0 md:hidden">
+      <ul
+        aria-label={caption}
+        className={cn("m-0 flex list-none flex-col gap-density p-0 md:hidden", classNames?.cards)}
+      >
         {items.map((item) => (
           <li
             key={rowKey(item)}
@@ -99,17 +125,36 @@ export function ResponsiveList<T>({
             className={cn(
               "flex min-w-0 flex-col gap-3 rounded-card border-card p-card shadow-card surface-card",
               rowClassName?.(item),
+              classNames?.card,
             )}
           >
-            <div className="min-w-0 font-semibold text-[15px] text-ink [overflow-wrap:anywhere]">
+            <div
+              className={cn(
+                "min-w-0 font-semibold text-fs-150 text-ink [overflow-wrap:anywhere]",
+                classNames?.cardTitle,
+              )}
+            >
               {primary?.cell(item)}
             </div>
             {details.length > 0 ? (
-              <dl className="m-0 flex flex-col gap-2">
+              <dl className={cn("m-0 flex flex-col gap-2", classNames?.cardDetails)}>
                 {details.map((column) => (
-                  <div key={column.key} className="flex items-baseline justify-between gap-4">
-                    <dt className="shrink-0 text-ink-3 text-meta">{column.header}</dt>
-                    <dd className="m-0 min-w-0 text-right text-body text-ink [overflow-wrap:anywhere]">
+                  <div
+                    key={column.key}
+                    className={cn(
+                      "flex items-baseline justify-between gap-4",
+                      classNames?.cardDetail,
+                    )}
+                  >
+                    <dt className={cn("shrink-0 text-ink-3 text-meta", classNames?.cardLabel)}>
+                      {column.header}
+                    </dt>
+                    <dd
+                      className={cn(
+                        "m-0 min-w-0 text-right text-body text-ink [overflow-wrap:anywhere]",
+                        classNames?.cardValue,
+                      )}
+                    >
                       {column.cell(item)}
                     </dd>
                   </div>
@@ -117,7 +162,9 @@ export function ResponsiveList<T>({
               </dl>
             ) : null}
             {renderActions ? (
-              <div className="flex flex-wrap gap-2">{renderActions(item)}</div>
+              <div className={cn("flex flex-wrap gap-2", classNames?.actions)}>
+                {renderActions(item)}
+              </div>
             ) : null}
           </li>
         ))}