@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/charts/sankey-chart/sankey-chart.js

@@ -208,12 +208,12 @@ function DiffLegend({ labels }) {
     [labels.decrease, "var(--chart-down)", "1"],
     [labels.previous, "var(--ink-3)", "0.3"]
   ];
-  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-4 gap-y-0.5 p-0 text-[12px] text-ink-2", children: items.map(([name, color, opacity]) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-4 gap-y-0.5 p-0 text-fs-120 text-ink-2", children: items.map(([name, color, opacity]) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
     /* @__PURE__ */ jsx(
       "span",
       {
         "aria-hidden": "true",
-        className: "h-2 w-4 rounded-[3px]",
+        className: "h-2 w-4 rounded-xs",
         style: { background: color, opacity }
       }
     ),
@@ -446,7 +446,7 @@ function SankeyPlot({
                 x,
                 y: 12,
                 textAnchor: anchor,
-                className: "select-none font-bold text-[11px] uppercase tracking-wide",
+                className: "select-none font-bold text-fs-110 uppercase tracking-wide",
                 style: { fill: "var(--ink-3)" },
                 children: text
               },
@@ -792,7 +792,7 @@ function SankeyNodeLabels({ graph, format, inside, showValues, room, lit }) {
         y: twoLines ? y - 7 : y,
         dominantBaseline: "middle",
         textAnchor: end ? "end" : "start",
-        className: "font-semibold text-[12px] motion-safe:transition-opacity motion-safe:duration-150",
+        className: "font-semibold text-fs-120 motion-safe:transition-opacity motion-safe:duration-150",
         style: {
           fill: "var(--ink)",
           opacity: lit && !lit.has(node.id) ? 0.4 : 1
@@ -805,7 +805,7 @@ function SankeyNodeLabels({ graph, format, inside, showValues, room, lit }) {
             {
               x,
               dy: 15,
-              className: "font-bold text-[11px] tabular-nums",
+              className: "font-bold text-fs-110 tabular-nums",
               style: { fill: inside ? "var(--ink-2)" : "var(--ink-3)" },
               children: value
             }

package/dist/charts/slope-chart/slope-chart.js

@@ -282,7 +282,7 @@ function SlopePlot({
         height,
         className: "block overflow-visible",
         children: [
-          /* @__PURE__ */ jsxs("g", { className: "font-bold text-[11px]", style: { fill: "var(--ink-3)" }, children: [
+          /* @__PURE__ */ jsxs("g", { className: "font-bold text-fs-110", style: { fill: "var(--ink-3)" }, children: [
             /* @__PURE__ */ jsx("text", { x: xL, y: 12, textAnchor: "middle", children: fit(fromLabel, leftWidth + 40, 11) }),
             /* @__PURE__ */ jsx("text", { x: xR, y: 12, textAnchor: "middle", children: fit(toLabel, rightWidth + 40, 11) })
           ] }),

package/dist/charts/sparkline/sparkline.js

@@ -210,7 +210,7 @@ function Sparkline({
           "div",
           {
             "aria-hidden": "true",
-            className: "-translate-x-1/2 pointer-events-none absolute bottom-full z-10 mb-1.5 whitespace-nowrap rounded-popover surface-overlay px-2 py-1 font-bold text-[11px] text-ink tabular-nums shadow-overlay",
+            className: "-translate-x-1/2 pointer-events-none absolute bottom-full z-10 mb-1.5 whitespace-nowrap rounded-popover surface-overlay px-2 py-1 font-bold text-fs-110 text-ink tabular-nums shadow-overlay",
             style: { left: Math.min(Math.max(activePoint.x, 24), width - 24) },
             children: [
               categories?.[active] ? /* @__PURE__ */ jsx("span", { className: "mr-1.5 font-semibold text-ink-3", children: categories[active] }) : null,

package/dist/charts/stock-chart/stock-chart.js

@@ -289,7 +289,7 @@ function StockChart({
               setRange(rangeWindow(dates, preset));
             },
             className: cn(
-              "cursor-pointer rounded-button px-2 py-1 font-semibold text-[11.5px] tabular-nums outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-2.5",
+              "cursor-pointer rounded-button px-2 py-1 font-semibold text-fs-115 tabular-nums outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-2.5",
               activePreset?.id === preset.id ? "bg-surface text-ink shadow-xs" : "text-ink-3 hover:text-ink"
             ),
             children: preset.label

package/dist/charts/stock-chart/stock-drawing-layer.js

@@ -94,7 +94,7 @@ function DrawingShape({
         {
           x: 6,
           y: py - 5,
-          className: "font-semibold text-[10.5px] tabular-nums",
+          className: "font-semibold text-fs-105 tabular-nums",
           style: { fill: COLORS.horizontal },
           children: fmt(drawing.price)
         }
@@ -149,7 +149,7 @@ function DrawingShape({
         {
           x: left2 + 6,
           y: top + 14,
-          className: "font-bold text-[10.5px] tabular-nums",
+          className: "font-bold text-fs-105 tabular-nums",
           style: { fill: COLORS.range },
           children: [
             change > 0 ? "+" : "",
@@ -197,7 +197,7 @@ function DrawingShape({
             x: geometry.innerWidth - 4,
             y: py - 4,
             textAnchor: "end",
-            className: "font-semibold text-[10px] tabular-nums",
+            className: "font-semibold text-fs-100 tabular-nums",
             style: { fill: COLORS.fib },
             children: [
               level.ratio,
@@ -251,7 +251,7 @@ function MeasureShape({
         y: boxY + 11,
         dy: "0.34em",
         textAnchor: "middle",
-        className: "font-bold text-[10.5px] tabular-nums",
+        className: "font-bold text-fs-105 tabular-nums",
         style: { fill: "var(--surface)" },
         children: label
       }

package/dist/charts/stock-chart/stock-plot.js

@@ -669,7 +669,7 @@ function StockPlot({
                   y: top + 8,
                   dy: "0.34em",
                   textAnchor: "middle",
-                  className: "font-bold text-[10px]",
+                  className: "font-bold text-fs-100",
                   style: { fill: "var(--surface)" },
                   children: flag.label
                 }
@@ -677,7 +677,7 @@ function StockPlot({
             ] }, `${index}-${level}-${flag.label}`);
           }),
           lower && oscillator ? /* @__PURE__ */ jsxs("g", { transform: `translate(0,${lowerTop})`, children: [
-            /* @__PURE__ */ jsxs("text", { ...DECORATIVE, x: 0, y: -7, className: "fill-ink-3 font-semibold text-[10.5px]", children: [
+            /* @__PURE__ */ jsxs("text", { ...DECORATIVE, x: 0, y: -7, className: "fill-ink-3 font-semibold text-fs-105", children: [
               oscillator.name,
               (() => {
                 const index = active ?? view.length - 1;
@@ -990,7 +990,7 @@ function AxisTag({
         y: 0,
         dy: "0.34em",
         textAnchor: "middle",
-        className: "font-bold text-[10.5px] tabular-nums",
+        className: "font-bold text-fs-105 tabular-nums",
         style: { fill: "var(--surface)" },
         children: text
       }

package/dist/charts/stream-graph/stream-graph.js

@@ -342,7 +342,7 @@ function StreamPlot({
                   y: cy,
                   dy: "0.34em",
                   textAnchor: "middle",
-                  className: "pointer-events-none font-bold text-[12px]",
+                  className: "pointer-events-none font-bold text-fs-120",
                   strokeWidth: 3,
                   strokeLinejoin: "round",
                   style: {

package/dist/charts/sunburst-chart/sunburst-chart.js

@@ -426,7 +426,7 @@ function SegmentLabel({
       transform: `rotate(${rotate.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)})`,
       textAnchor: "middle",
       dominantBaseline: "central",
-      className: "pointer-events-none select-none font-semibold text-[11px]",
+      className: "pointer-events-none select-none font-semibold text-fs-110",
       style: { fill: ink, opacity: dimmed ? 0.4 : 1, transition: "opacity 150ms ease-out" },
       children: name
     }

package/dist/charts/timeline-chart/timeline-chart.js

@@ -77,7 +77,7 @@ const BarMark = memo(function BarMark2({
             x: x + 8,
             y: y + height / 2,
             dy: "0.34em",
-            className: "pointer-events-none font-bold text-[11px]",
+            className: "pointer-events-none font-bold text-fs-110",
             style: { fill: "var(--surface)" },
             children: text
           }
@@ -389,7 +389,7 @@ function TimelinePlot({
                 y: band.top + band.height / 2,
                 dy: "0.34em",
                 textAnchor: "end",
-                className: "font-semibold text-[12px]",
+                className: "font-semibold text-fs-120",
                 style: { fill: "var(--ink-2)" },
                 children: fitText(band.row.label, left - 18, 12)
               }
@@ -440,7 +440,7 @@ function TimelinePlot({
                 y: -MARGIN.top + 10,
                 dy: "0.34em",
                 textAnchor: "middle",
-                className: "font-bold text-[10px]",
+                className: "font-bold text-fs-100",
                 style: { fill: "var(--surface)" },
                 children: texts.now
               }

package/dist/charts/tree-chart/tree-card.js

@@ -26,19 +26,19 @@ function TreeCard({ node, state }) {
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "grid size-9 shrink-0 place-items-center overflow-hidden rounded-avatar font-bold text-[12px] text-ink",
+            className: "grid size-9 shrink-0 place-items-center overflow-hidden rounded-avatar font-bold text-fs-120 text-ink",
             style: { background: tint(node.color, 24) },
             children: node.image ? /* @__PURE__ */ jsx("img", { src: node.image, alt: "", className: "size-full object-cover", draggable: false }) : initials(node.name)
           }
         ),
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-[13px] text-ink leading-tight", children: node.name }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-fs-130 text-ink leading-tight", children: node.name }),
           node.subtitle || node.badge ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-            node.subtitle ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] text-ink-3 leading-tight", children: node.subtitle }) : null,
+            node.subtitle ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-fs-110 text-ink-3 leading-tight", children: node.subtitle }) : null,
             node.badge ? /* @__PURE__ */ jsx(
               "span",
               {
-                className: "max-w-[60%] shrink-0 truncate rounded-badge px-1.5 font-bold text-[10px] text-ink-2 leading-[16px]",
+                className: "max-w-[60%] shrink-0 truncate rounded-badge px-1.5 font-bold text-fs-100 text-ink-2 leading-4",
                 style: { background: tint(node.color, 16) },
                 children: node.badge
               }
@@ -55,7 +55,7 @@ function CountBadge({ state, color }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "grid h-[18px] min-w-[18px] shrink-0 place-items-center rounded-badge px-1 font-bold text-[10px] text-ink tabular-nums",
+      className: "grid h-4.5 min-w-4.5 shrink-0 place-items-center rounded-badge px-1 font-bold text-fs-100 text-ink tabular-nums",
       style: { background: tint(color, 22) },
       title: `+${state.descendants}`,
       children: state.descendants
@@ -82,7 +82,7 @@ function TreeChip({ node, state }) {
             style: { background: node.color }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-semibold text-[11px] text-ink leading-none", children: node.name }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-semibold text-fs-110 text-ink leading-none", children: node.name }),
         /* @__PURE__ */ jsx(CountBadge, { state, color: node.color })
       ]
     }

package/dist/charts/tree-chart/tree-chart.js

@@ -555,7 +555,7 @@ function TreePlot({
                         event.stopPropagation();
                         if (!panZoom.wasDrag()) toggle(node);
                       },
-                      className: "absolute top-0 left-0 grid h-5 min-w-5 cursor-pointer place-items-center rounded-badge border-divider bg-surface-control px-1 font-bold text-[10px] text-ink-2 tabular-nums shadow-control hover:text-ink",
+                      className: "absolute top-0 left-0 grid h-5 min-w-5 cursor-pointer place-items-center rounded-badge border-divider bg-surface-control px-1 font-bold text-fs-100 text-ink-2 tabular-nums shadow-control hover:text-ink",
                       style: {
                         transform: `translate(${tx}px, ${ty}px) translate(-50%, -50%)`,
                         opacity: pose.opacity,
@@ -645,7 +645,7 @@ function TreePlot({
                   stepMatch(event.shiftKey ? -1 : 1);
                 } else if (event.key === "Escape") onSearch("");
               },
-              className: "h-7 min-w-0 flex-1 border-0 bg-transparent px-1.5 text-[12px] text-ink outline-none placeholder:text-ink-3"
+              className: "h-7 min-w-0 flex-1 border-0 bg-transparent px-1.5 text-fs-120 text-ink outline-none placeholder:text-ink-3"
             }
           ),
           query ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -653,7 +653,7 @@ function TreePlot({
               "span",
               {
                 "aria-live": "polite",
-                className: "hidden shrink-0 px-1 text-[11px] text-ink-3 tabular-nums @sm/chart:inline",
+                className: "hidden shrink-0 px-1 text-fs-110 text-ink-3 tabular-nums @sm/chart:inline",
                 children: matches.length > 0 ? `${matchIndex + 1} ${labels.of} ${matches.length}` : labels.noMatches
               }
             ),
@@ -718,7 +718,7 @@ function TreePlot({
         "aria-label": labels.controls,
         className: "absolute top-2 right-2 flex items-center gap-1 rounded-control border-divider bg-surface-control p-0.5 shadow-control",
         children: [
-          /* @__PURE__ */ jsxs("span", { className: "hidden px-1.5 font-semibold text-[11px] text-ink-3 tabular-nums @sm/chart:inline", children: [
+          /* @__PURE__ */ jsxs("span", { className: "hidden px-1.5 font-semibold text-fs-110 text-ink-3 tabular-nums @sm/chart:inline", children: [
             Math.round(view.k * 100),
             "%"
           ] }),
@@ -728,7 +728,7 @@ function TreePlot({
         ]
       }
     ) : null,
-    wheelZoom === "modifier" ? /* @__PURE__ */ jsx("p", { className: "pointer-events-none absolute bottom-1.5 left-2 m-0 hidden text-[11px] text-ink-3 @md/chart:block", children: labels.zoomHint }) : null
+    wheelZoom === "modifier" ? /* @__PURE__ */ jsx("p", { className: "pointer-events-none absolute bottom-1.5 left-2 m-0 hidden text-fs-110 text-ink-3 @md/chart:block", children: labels.zoomHint }) : null
   ] });
 }
 function ToolButton({

package/dist/charts/treemap-chart/treemap-chart.js

@@ -307,7 +307,7 @@ const TreemapCells = memo(function TreemapCells2({
             {
               x: cell.x0 + 8,
               y: cell.y0 + 16,
-              className: "pointer-events-none select-none font-bold text-[12px]",
+              className: "pointer-events-none select-none font-bold text-fs-120",
               style: { fill: "var(--ink)" },
               children: [
                 label,
@@ -319,7 +319,7 @@ const TreemapCells = memo(function TreemapCells2({
             {
               x: cell.x0 + 8,
               y: cell.y0 + 18,
-              className: "pointer-events-none select-none font-semibold text-[12px]",
+              className: "pointer-events-none select-none font-semibold text-fs-120",
               style: { fill: ink },
               children: [
                 label,
@@ -328,7 +328,7 @@ const TreemapCells = memo(function TreemapCells2({
                   {
                     x: cell.x0 + 8,
                     dy: 17,
-                    className: "font-bold text-[11px] tabular-nums",
+                    className: "font-bold text-fs-110 tabular-nums",
                     style: { fill: ink, opacity: 0.78 },
                     children: value
                   }

package/dist/charts/waterfall-chart/waterfall-chart.js

@@ -282,7 +282,7 @@ function WaterfallPlot({
                 x: shape.x + x.bandwidth / 2,
                 y: shape.top - 6,
                 textAnchor: "middle",
-                className: "font-bold text-[11px] tabular-nums",
+                className: "font-bold text-fs-110 tabular-nums",
                 style: {
                   fill: shape.bar.kind === "increase" ? DIRECTION_COLORS.up : shape.bar.kind === "decrease" ? DIRECTION_COLORS.down : "var(--ink)",
                   opacity: active != null && active !== i ? 0.45 : 1
@@ -471,7 +471,7 @@ function HorizontalWaterfallPlot({
               x: shape.right + 6,
               y: shape.y + band.bandwidth / 2,
               dy: "0.34em",
-              className: "font-bold text-[11px] tabular-nums",
+              className: "font-bold text-fs-110 tabular-nums",
               style: {
                 fill: shape.bar.kind === "increase" ? DIRECTION_COLORS.up : shape.bar.kind === "decrease" ? DIRECTION_COLORS.down : "var(--ink)",
                 opacity: active != null && active !== i ? 0.45 : 1

package/dist/containers/action-bar/action-bar.d.ts

@@ -1,4 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type ActionBarPart = "root" | "count" | "actions" | "clear";
 export interface ActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** Number of selected items. The bar renders nothing while it is 0. */
     selectedCount: number;
@@ -13,6 +15,8 @@ export interface ActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "c
      * ancestor (a card, a table wrapper); `static` renders inline.
      */
     position?: "fixed" | "absolute" | "static";
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ActionBarPart>;
 }
 /** Floating toolbar for bulk actions on a selection. Announces the count politely. */
-export declare function ActionBar({ selectedCount, noun, onClear, children, position, className, onKeyDown, ...props }: ActionBarProps): import("react").JSX.Element | null;
+export declare function ActionBar({ selectedCount, noun, onClear, children, position, className, classNames, onKeyDown, ...props }: ActionBarProps): import("react").JSX.Element | null;

package/dist/containers/action-bar/action-bar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
+import { X } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 const positionClasses = {
   fixed: "fixed inset-x-0 bottom-4 mx-auto",
@@ -14,6 +14,7 @@ function ActionBar({
   children,
   position = "absolute",
   className,
+  classNames,
   onKeyDown,
   ...props
 }) {
@@ -34,23 +35,40 @@ function ActionBar({
       className: cn(
         "@container/action-bar z-40 flex w-fit max-w-[calc(100%-1rem)] flex-wrap items-center gap-density rounded-popover border-card surface-overlay bg-surface-overlay px-control-x py-density-sm shadow-overlay",
         positionClasses[position],
+        classNames?.root,
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("span", { "aria-live": "polite", className: "whitespace-nowrap font-semibold text-control text-ink", children: [
-          selectedCount,
-          " ",
-          selectedCount === 1 ? noun[0] : noun[1]
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-density-sm", children }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "aria-live": "polite",
+            className: cn("whitespace-nowrap font-semibold text-control text-ink", classNames?.count),
+            children: [
+              selectedCount,
+              " ",
+              selectedCount === 1 ? noun[0] : noun[1]
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex min-w-0 flex-wrap items-center gap-density-sm", classNames?.actions),
+            children
+          }
+        ),
         onClear ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             "aria-label": "Limpiar selecci\xF3n",
             onClick: onClear,
-            className: "pressable inline-flex size-control-sm cursor-pointer items-center justify-center rounded-button text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:focus-ring",
+            className: cn(
+              "pressable inline-flex size-control-sm cursor-pointer items-center justify-center rounded-button text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:focus-ring",
+              classNames?.clear
+            ),
             children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
           }
         ) : null

package/dist/containers/action-bar/index.d.ts

@@ -1 +1 @@
-export { ActionBar, type ActionBarProps } from "./action-bar.js";
+export { ActionBar, type ActionBarPart, type ActionBarProps } from "./action-bar.js";

package/dist/containers/banner/banner.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type BannerTone = "info" | "success" | "warning" | "danger";
+export type BannerPart = "root" | "icon" | "body" | "title" | "action";
 export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "title"> {
     tone?: BannerTone;
     /** Bold first line above the content. */
@@ -8,5 +10,7 @@ export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "role
     icon?: ReactNode;
     /** Actions on the right, e.g. a retry button. */
     action?: ReactNode;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<BannerPart>;
 }
-export declare function Banner({ tone, title, icon, action, className, children, ...props }: BannerProps): import("react").JSX.Element;
+export declare function Banner({ tone, title, icon, action, className, classNames, children, ...props }: BannerProps): import("react").JSX.Element;

package/dist/containers/banner/banner.js

@@ -25,6 +25,7 @@ function Banner({
   icon,
   action,
   className,
+  classNames,
   children,
   ...props
 }) {
@@ -34,18 +35,32 @@ function Banner({
     {
       role: toneRole[tone],
       className: cn(
-        "flex flex-wrap items-start gap-x-3 gap-y-2 rounded-banner px-3.5 py-3 text-[13px] text-ink",
+        "flex flex-wrap items-start gap-x-3 gap-y-2 rounded-banner px-3.5 py-3 text-fs-130 text-ink",
         toneClasses[tone],
+        classNames?.root,
         className
       ),
       ...props,
       children: [
-        resolvedIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 shrink-0", toneIconClasses[tone]), children: resolvedIcon }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-[1_1_14rem] break-words", children: [
-          title ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }) : null,
+        resolvedIcon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("mt-0.5 shrink-0", toneIconClasses[tone], classNames?.icon),
+            children: resolvedIcon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-[1_1_14rem] break-words", classNames?.body), children: [
+          title ? /* @__PURE__ */ jsx("p", { className: cn("font-semibold", classNames?.title), children: title }) : null,
           children
         ] }),
-        action ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center gap-1.5", children: action }) : null
+        action ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("ml-auto flex shrink-0 flex-wrap items-center gap-1.5", classNames?.action),
+            children: action
+          }
+        ) : null
       ]
     }
   );

package/dist/containers/card/card.js

@@ -17,7 +17,7 @@ function CardHeader({ className, ...props }) {
     "div",
     {
       className: cn(
-        "flex min-h-[50px] flex-wrap items-center gap-2.5 border-b-divider px-card py-3",
+        "flex min-h-12.5 flex-wrap items-center gap-2.5 border-b-divider px-card py-3",
         className
       ),
       ...props

package/dist/containers/carousel/carousel.d.ts

@@ -1,9 +1,13 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type CarouselPart = "root" | "track" | "slide" | "controls" | "previous" | "next" | "playPause" | "dots" | "dot";
 export interface CarouselProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
     children: ReactNode;
     /** Accessible name of the carousel. */
     label: string;
-    /** Classes for each slide's width. Default: 1 per view, 2 from 32rem, 3 from 48rem. */
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<CarouselPart>;
+    /** Classes for each slide's width. Default: 1 per view, 2 from 32rem, 3 from 48rem. Prefer `classNames.slide` to add classes without replacing this default. */
     slideClassName?: string;
     /** Wrap around at the ends. */
     loop?: boolean;
@@ -16,4 +20,4 @@ export interface CarouselProps extends Omit<ComponentPropsWithoutRef<"section">,
  * Scroll-snap carousel. Native scrolling and swipe work with no JS; buttons, dots, arrow keys
  * and optional autoplay are layered on top. Slides per view follow the container width.
  */
-export declare function Carousel({ children, label, slideClassName, loop, autoplay, showDots, showArrows, className, ...props }: CarouselProps): import("react").JSX.Element;
+export declare function Carousel({ children, label, slideClassName, loop, autoplay, showDots, showArrows, className, classNames, ...props }: CarouselProps): import("react").JSX.Element;

package/dist/containers/carousel/carousel.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react";
 import {
   Children,
   useCallback,
@@ -8,6 +7,7 @@ import {
   useRef,
   useState
 } from "react";
+import { ChevronLeft, ChevronRight, Pause, Play } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
 import { nearestIndex, stepIndex } from "./model.js";
@@ -21,6 +21,7 @@ function Carousel({
   showDots = true,
   showArrows = true,
   className,
+  classNames,
   ...props
 }) {
   const slides = Children.toArray(children);
@@ -84,7 +85,11 @@ function Carousel({
     {
       "aria-roledescription": "carrusel",
       "aria-label": label,
-      className: cn("@container/carousel flex min-w-0 flex-col gap-density", className),
+      className: cn(
+        "@container/carousel flex min-w-0 flex-col gap-density",
+        classNames?.root,
+        className
+      ),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       onFocus: () => setFocused(true),
@@ -100,7 +105,10 @@ function Carousel({
             "aria-label": `${label}: usa las flechas para cambiar de diapositiva`,
             onScroll: syncIndex,
             onKeyDown,
-            className: "relative flex snap-x snap-mandatory gap-density overflow-x-auto scroll-smooth rounded-card outline-none [scrollbar-width:none] focus-visible:focus-ring motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+            className: cn(
+              "relative flex snap-x snap-mandatory gap-density overflow-x-auto scroll-smooth rounded-card outline-none [scrollbar-width:none] focus-visible:focus-ring motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+              classNames?.track
+            ),
             children: slides.map((slide, i) => (
               // biome-ignore lint/a11y/useSemanticElements: slide of a carousel, not a form group
               /* @__PURE__ */ jsx(
@@ -110,7 +118,7 @@ function Carousel({
                   role: "group",
                   "aria-roledescription": "diapositiva",
                   "aria-label": `${i + 1} de ${count}`,
-                  className: cn("min-w-0 shrink-0 snap-start", slideClassName),
+                  className: cn("min-w-0 shrink-0 snap-start", slideClassName, classNames?.slide),
                   children: slide
                 },
                 i
@@ -118,7 +126,7 @@ function Carousel({
             ))
           }
         ),
-        count > 1 && (showArrows || showDots || interval > 0) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-density", children: [
+        count > 1 && (showArrows || showDots || interval > 0) ? /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-density", classNames?.controls), children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-sm", children: [
             showArrows ? /* @__PURE__ */ jsx(
               "button",
@@ -127,7 +135,7 @@ function Carousel({
                 "aria-label": "Diapositiva anterior",
                 disabled: !loop && index === 0,
                 onClick: () => step(-1),
-                className: iconButton,
+                className: cn(iconButton, classNames?.previous),
                 children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
               }
             ) : null,
@@ -138,25 +146,35 @@ function Carousel({
                 "aria-label": userPaused ? "Reanudar reproducci\xF3n autom\xE1tica" : "Pausar reproducci\xF3n autom\xE1tica",
                 "aria-pressed": userPaused,
                 onClick: () => setUserPaused((paused) => !paused),
-                className: iconButton,
+                className: cn(iconButton, classNames?.playPause),
                 children: userPaused ? /* @__PURE__ */ jsx(Play, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Pause, { className: "size-4", "aria-hidden": "true" })
               }
             ) : null
           ] }),
-          showDots ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center justify-center gap-1.5", children: slides.map((_, i) => /* @__PURE__ */ jsx(
-            "button",
+          showDots ? /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              "aria-label": `Ir a la diapositiva ${i + 1}`,
-              "aria-current": i === index ? "true" : void 0,
-              onClick: () => goTo(i),
               className: cn(
-                "h-2 cursor-pointer rounded-badge transition-all duration-(--motion-duration) ease-style focus-visible:focus-ring",
-                i === index ? "w-5 bg-accent" : "w-2 bg-line-strong hover:bg-ink-3"
-              )
-            },
-            i
-          )) }) : null,
+                "flex min-w-0 flex-wrap items-center justify-center gap-1.5",
+                classNames?.dots
+              ),
+              children: slides.map((_, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Ir a la diapositiva ${i + 1}`,
+                  "aria-current": i === index ? "true" : void 0,
+                  onClick: () => goTo(i),
+                  className: cn(
+                    "h-2 cursor-pointer rounded-badge transition-all duration-(--motion-duration) ease-style focus-visible:focus-ring",
+                    i === index ? "w-5 bg-accent" : "w-2 bg-line-strong hover:bg-ink-3",
+                    classNames?.dot
+                  )
+                },
+                i
+              ))
+            }
+          ) : null,
           showArrows ? /* @__PURE__ */ jsx(
             "button",
             {
@@ -164,7 +182,7 @@ function Carousel({
               "aria-label": "Diapositiva siguiente",
               disabled: !loop && index >= count - 1,
               onClick: () => step(1),
-              className: iconButton,
+              className: cn(iconButton, classNames?.next),
               children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
             }
           ) : null

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

@@ -1,2 +1,2 @@
-export { Carousel, type CarouselProps } from "./carousel.js";
+export { Carousel, type CarouselPart, type CarouselProps } from "./carousel.js";
 export { nearestIndex, stepIndex } from "./model.js";