@jcsoftdev/ui 0.1.7 → 0.2.0

package/dist/ai/markdown/markdown.js

@@ -4,17 +4,17 @@ import { cn } from "../../utils/cn.js";
 import { CodeBlock } from "../code-block/code-block.js";
 import { AiKeyframes } from "../internal/keyframes.js";
 import { parseMarkdown } from "./parse.js";
-function Caret() {
+function Caret({ cx }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
       "aria-hidden": true,
-      className: "ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] bg-current",
+      className: cn("ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] bg-current", cx.caret),
       style: { animation: "ui-ai-caret 1s steps(1) infinite" }
     }
   );
 }
-function renderInline(nodes) {
+function renderInline(nodes, cx) {
   return nodes.map((node, index) => {
     const key = index;
     switch (node.t) {
@@ -26,15 +26,18 @@ function renderInline(nodes) {
         return /* @__PURE__ */ jsx(
           "code",
           {
-            className: "rounded-badge bg-surface-sunken px-1 py-0.5 font-mono text-[0.9em]",
+            className: cn(
+              "rounded-badge bg-surface-sunken px-1 py-0.5 font-mono text-[0.9em]",
+              cx.inlineCode
+            ),
             children: node.v
           },
           key
         );
       case "strong":
-        return /* @__PURE__ */ jsx("strong", { children: renderInline(node.c) }, key);
+        return /* @__PURE__ */ jsx("strong", { children: renderInline(node.c, cx) }, key);
       case "em":
-        return /* @__PURE__ */ jsx("em", { children: renderInline(node.c) }, key);
+        return /* @__PURE__ */ jsx("em", { children: renderInline(node.c, cx) }, key);
       case "link":
         return node.href ? /* @__PURE__ */ jsx(
           "a",
@@ -42,11 +45,14 @@ function renderInline(nodes) {
             href: node.href,
             target: "_blank",
             rel: "noopener noreferrer nofollow",
-            className: "text-accent-ink underline underline-offset-2 focus-visible:focus-ring",
-            children: renderInline(node.c)
+            className: cn(
+              "text-accent-ink underline underline-offset-2 focus-visible:focus-ring",
+              cx.link
+            ),
+            children: renderInline(node.c, cx)
           },
           key
-        ) : /* @__PURE__ */ jsx("span", { children: renderInline(node.c) }, key);
+        ) : /* @__PURE__ */ jsx("span", { children: renderInline(node.c, cx) }, key);
       default:
         return null;
     }
@@ -61,19 +67,19 @@ const HEADINGS = {
   6: "text-meta font-semibold text-ink-2"
 };
 const ALIGN = { left: "text-left", center: "text-center", right: "text-right" };
-function renderBlock(block, key, caret) {
-  const tail = caret ? /* @__PURE__ */ jsx(Caret, {}) : null;
+function renderBlock(block, key, caret, cx) {
+  const tail = caret ? /* @__PURE__ */ jsx(Caret, { cx }) : null;
   switch (block.t) {
     case "heading": {
       const Tag = `h${block.level}`;
-      return /* @__PURE__ */ jsxs(Tag, { className: HEADINGS[block.level], children: [
-        renderInline(block.c),
+      return /* @__PURE__ */ jsxs(Tag, { className: cn(HEADINGS[block.level], cx.heading), children: [
+        renderInline(block.c, cx),
         tail
       ] }, key);
     }
     case "p":
-      return /* @__PURE__ */ jsxs("p", { children: [
-        renderInline(block.c),
+      return /* @__PURE__ */ jsxs("p", { className: cx.paragraph, children: [
+        renderInline(block.c, cx),
         tail
       ] }, key);
     case "list": {
@@ -82,13 +88,13 @@ function renderBlock(block, key, caret) {
         Tag,
         {
           start: block.ordered && block.start !== 1 ? block.start : void 0,
-          className: cn("grid gap-1 pl-5", block.ordered ? "list-decimal" : "list-disc"),
+          className: cn("grid gap-1 pl-5", block.ordered ? "list-decimal" : "list-disc", cx.list),
           children: block.items.map((item, index) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: list items are positional
-            /* @__PURE__ */ jsxs("li", { className: "pl-1", children: [
-              renderInline(item.c),
-              caret && index === block.items.length - 1 && item.children.length === 0 ? /* @__PURE__ */ jsx(Caret, {}) : null,
-              item.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 grid gap-1", children: renderBlocks(item.children, caret && index === block.items.length - 1) }) : null
+            /* @__PURE__ */ jsxs("li", { className: cn("pl-1", cx.listItem), children: [
+              renderInline(item.c, cx),
+              caret && index === block.items.length - 1 && item.children.length === 0 ? /* @__PURE__ */ jsx(Caret, { cx }) : null,
+              item.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 grid gap-1", children: renderBlocks(item.children, caret && index === block.items.length - 1, cx) }) : null
             ] }, index)
           ))
         },
@@ -101,55 +107,79 @@ function renderBlock(block, key, caret) {
         tail
       ] }, key);
     case "quote":
-      return /* @__PURE__ */ jsx("blockquote", { className: "grid gap-2 border-l-2 border-accent-line pl-3 text-ink-2", children: renderBlocks(block.c, caret) }, key);
+      return /* @__PURE__ */ jsx(
+        "blockquote",
+        {
+          className: cn("grid gap-2 border-l-2 border-accent-line pl-3 text-ink-2", cx.quote),
+          children: renderBlocks(block.c, caret, cx)
+        },
+        key
+      );
     case "hr":
-      return /* @__PURE__ */ jsx("hr", { className: "border-0 border-t-divider" }, key);
+      return /* @__PURE__ */ jsx("hr", { className: cn("border-0 border-t-divider", cx.rule) }, key);
     case "table":
-      return /* @__PURE__ */ jsx("div", { className: "max-w-full overflow-x-auto rounded-card border-card shadow-card", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-meta", children: [
-        /* @__PURE__ */ jsx("thead", { className: "bg-surface-sunken", children: /* @__PURE__ */ jsx("tr", { children: block.head.map((cell, col) => /* @__PURE__ */ jsx(
-          "th",
-          {
-            scope: "col",
-            className: cn(
-              "px-3 py-1.5 font-semibold",
-              block.align[col] ? ALIGN[block.align[col]] : "text-left"
-            ),
-            children: renderInline(cell)
-          },
-          col
-        )) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, r) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: rows are positional
-          /* @__PURE__ */ jsx("tr", { className: "border-t-divider", children: row.map((cell, col) => /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: cn(
-                "px-3 py-1.5",
-                block.align[col] ? ALIGN[block.align[col]] : "text-left"
-              ),
-              children: renderInline(cell)
-            },
-            col
-          )) }, r)
-        )) })
-      ] }) }, key);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "max-w-full overflow-x-auto rounded-card border-card shadow-card",
+            cx.tableWrapper
+          ),
+          children: /* @__PURE__ */ jsxs("table", { className: cn("w-full border-collapse text-meta", cx.table), children: [
+            /* @__PURE__ */ jsx("thead", { className: cn("bg-surface-sunken", cx.tableHead), children: /* @__PURE__ */ jsx("tr", { children: block.head.map((cell, col) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                className: cn(
+                  "px-3 py-1.5 font-semibold",
+                  block.align[col] ? ALIGN[block.align[col]] : "text-left",
+                  cx.tableHeaderCell
+                ),
+                children: renderInline(cell, cx)
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, r) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: rows are positional
+              /* @__PURE__ */ jsx("tr", { className: cn("border-t-divider", cx.tableRow), children: row.map((cell, col) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn(
+                    "px-3 py-1.5",
+                    block.align[col] ? ALIGN[block.align[col]] : "text-left",
+                    cx.tableCell
+                  ),
+                  children: renderInline(cell, cx)
+                },
+                col
+              )) }, r)
+            )) })
+          ] })
+        },
+        key
+      );
   }
 }
-function renderBlocks(blocks, caret) {
+function renderBlocks(blocks, caret, cx) {
   return blocks.map(
-    (block, index) => renderBlock(block, index, caret && index === blocks.length - 1)
+    (block, index) => renderBlock(block, index, caret && index === blocks.length - 1, cx)
   );
 }
-function Markdown({ children, streaming, className }) {
+function Markdown({ children, streaming, className, classNames }) {
+  const cx = classNames ?? {};
   const blocks = parseMarkdown(children);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("grid min-w-0 gap-density break-words text-body leading-relaxed", className),
+      className: cn(
+        "grid min-w-0 gap-density break-words text-body leading-relaxed",
+        className,
+        cx.root
+      ),
       children: [
         streaming ? /* @__PURE__ */ jsx(AiKeyframes, {}) : null,
-        renderBlocks(blocks, Boolean(streaming)),
-        streaming && blocks.length === 0 ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Caret, {}) }) : null
+        renderBlocks(blocks, Boolean(streaming), cx),
+        streaming && blocks.length === 0 ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Caret, { cx }) }) : null
       ]
     }
   );

package/dist/ai/message-actions/message-actions.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
 import { useState } from "react";
+import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { IconAction } from "../internal/icon-action.js";
 import { useCopy } from "../internal/use-copy.js";

package/dist/ai/prompt-input/prompt-input.d.ts

@@ -1,4 +1,6 @@
 import { type ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type PromptInputPart = "root" | "box" | "attachments" | "textarea" | "toolbar" | "actions" | "send" | "stop" | "hint";
 export interface PromptInputProps {
     value?: string;
     defaultValue?: string;
@@ -21,9 +23,11 @@ export interface PromptInputProps {
     /** Hint line under the field. */
     hint?: ReactNode;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<PromptInputPart>;
 }
 /**
  * Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot
  * and a stop button while a response streams.
  */
-export declare function PromptInput({ value: valueProp, defaultValue, onValueChange, onSubmit, streaming, onStop, placeholder, label, disabled, maxRows, attachments, actions, hint, className, }: PromptInputProps): import("react").JSX.Element;
+export declare function PromptInput({ value: valueProp, defaultValue, onValueChange, onSubmit, streaming, onStop, placeholder, label, disabled, maxRows, attachments, actions, hint, className, classNames, }: PromptInputProps): import("react").JSX.Element;

package/dist/ai/prompt-input/prompt-input.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowUp, Square } from "lucide-react";
 import {
   useLayoutEffect,
   useRef,
   useState
 } from "react";
+import { ArrowUp, Square } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { shouldSubmit } from "./keys.js";
 function PromptInput({
@@ -22,7 +22,8 @@ function PromptInput({
   attachments,
   actions,
   hint,
-  className
+  className,
+  classNames
 }) {
   const [state, setState] = useState(defaultValue);
   const value = valueProp ?? state;
@@ -63,47 +64,78 @@ function PromptInput({
     else submit();
   };
   const canSend = value.trim().length > 0 && !disabled;
-  return /* @__PURE__ */ jsxs("form", { onSubmit: onFormSubmit, className: cn("@container/prompt grid min-w-0 gap-1", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-density-sm rounded-card bg-surface-control p-2 text-ink border-control shadow-control focus-within:focus-ring", children: [
-      attachments ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-density-sm", children: attachments }) : null,
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: area,
-          rows: 1,
-          value,
-          disabled,
-          "aria-label": label,
-          placeholder,
-          onChange: (event) => set(event.target.value),
-          onKeyDown,
-          className: "block max-h-none w-full min-w-0 resize-none bg-transparent px-1 py-1 text-body leading-normal text-ink outline-none placeholder:text-ink-3 disabled:cursor-not-allowed"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-density-sm", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-density-sm", children: actions }),
-        streaming ? /* @__PURE__ */ jsx(
-          "button",
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: onFormSubmit,
+      className: cn("@container/prompt grid min-w-0 gap-1", classNames?.root, className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "submit",
-            "aria-label": "Detener respuesta",
-            className: "inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-ink text-bg pressable focus-visible:focus-ring",
-            children: /* @__PURE__ */ jsx(Square, { "aria-hidden": true, className: "size-3.5 fill-current" })
+            className: cn(
+              "grid gap-density-sm rounded-card bg-surface-control p-2 text-ink border-control shadow-control focus-within:focus-ring",
+              classNames?.box
+            ),
+            children: [
+              attachments ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-density-sm", classNames?.attachments), children: attachments }) : null,
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref: area,
+                  rows: 1,
+                  value,
+                  disabled,
+                  "aria-label": label,
+                  placeholder,
+                  onChange: (event) => set(event.target.value),
+                  onKeyDown,
+                  className: cn(
+                    "block max-h-none w-full min-w-0 resize-none bg-transparent px-1 py-1 text-body leading-normal text-ink outline-none placeholder:text-ink-3 disabled:cursor-not-allowed",
+                    classNames?.textarea
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn("flex items-center justify-between gap-density-sm", classNames?.toolbar),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-density-sm", classNames?.actions), children: actions }),
+                    streaming ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        "aria-label": "Detener respuesta",
+                        className: cn(
+                          "inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-ink text-bg pressable focus-visible:focus-ring",
+                          classNames?.stop
+                        ),
+                        children: /* @__PURE__ */ jsx(Square, { "aria-hidden": true, className: "size-3.5 fill-current" })
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        "aria-label": "Enviar mensaje",
+                        disabled: !canSend,
+                        className: cn(
+                          "inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-accent text-on-accent pressable focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-45",
+                          classNames?.send
+                        ),
+                        children: /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": true, className: "size-4" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
-        ) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            "aria-label": "Enviar mensaje",
-            disabled: !canSend,
-            className: "inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-accent text-on-accent pressable focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-45",
-            children: /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": true, className: "size-4" })
-          }
-        )
-      ] })
-    ] }),
-    hint ? /* @__PURE__ */ jsx("p", { className: "px-1 text-meta text-ink-3", children: hint }) : null
-  ] });
+        ),
+        hint ? /* @__PURE__ */ jsx("p", { className: cn("px-1 text-meta text-ink-3", classNames?.hint), children: hint }) : null
+      ]
+    }
+  );
 }
 export {
   PromptInput

package/dist/ai/source/source.d.ts

@@ -1,4 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type SourcePart = "root" | "index" | "host" | "card" | "cardHost" | "cardTitle" | "cardSnippet";
 export interface SourceProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "title"> {
     /** Citation number shown in the chip. */
     index?: number;
@@ -7,6 +9,8 @@ export interface SourceProps extends Omit<ComponentPropsWithoutRef<"a">, "href"
     url: string;
     /** Short excerpt shown in the hover preview. */
     snippet?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<SourcePart>;
 }
 /** Citation chip with a hover/focus preview of the source (title, host and excerpt). */
-export declare function Source({ index, title, url, snippet, className, ...props }: SourceProps): import("react").JSX.Element;
+export declare function Source({ index, title, url, snippet, className, classNames, ...props }: SourceProps): import("react").JSX.Element;

package/dist/ai/source/source.js

@@ -13,16 +13,34 @@ function hostOf(url) {
     return url;
   }
 }
-function Source({ index, title, url, snippet, className, ...props }) {
+function Source({
+  index,
+  title,
+  url,
+  snippet,
+  className,
+  classNames,
+  ...props
+}) {
   const href = safeHref(url);
   const host = hostOf(url);
   const chipClass = cn(
     "inline-flex h-control-sm min-w-0 max-w-full items-center gap-1.5 rounded-badge bg-surface-control px-2 text-meta text-ink-2 no-underline border-control shadow-control pressable hover:text-ink focus-visible:focus-ring",
+    classNames?.root,
     className
   );
   const chip = /* @__PURE__ */ jsxs(Fragment, { children: [
-    index != null ? /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center rounded-badge bg-accent-soft text-[10px] font-bold text-accent-ink", children: index }) : null,
-    /* @__PURE__ */ jsx("span", { className: "truncate", children: host })
+    index != null ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "grid size-4 shrink-0 place-items-center rounded-badge bg-accent-soft text-fs-100 font-bold text-accent-ink",
+          classNames?.index
+        ),
+        children: index
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { className: cn("truncate", classNames?.host), children: host })
   ] });
   return /* @__PURE__ */ jsxs(HoverCard, { children: [
     /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: href ? /* @__PURE__ */ jsx(
@@ -36,11 +54,20 @@ function Source({ index, title, url, snippet, className, ...props }) {
         children: chip
       }
     ) : /* @__PURE__ */ jsx("button", { type: "button", className: chipClass, children: chip }) }),
-    /* @__PURE__ */ jsxs(HoverCardContent, { className: "@container/source w-72 max-w-[calc(100vw-1rem)] rounded-popover bg-surface-overlay p-3 text-ink shadow-overlay border-control surface-overlay", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-meta text-ink-3", children: host }),
-      /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-body font-semibold", children: title }),
-      snippet ? /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-4 text-meta text-ink-2", children: snippet }) : null
-    ] })
+    /* @__PURE__ */ jsxs(
+      HoverCardContent,
+      {
+        className: cn(
+          "@container/source w-72 max-w-[calc(100vw-1rem)] rounded-popover bg-surface-overlay p-3 text-ink shadow-overlay border-control surface-overlay",
+          classNames?.card
+        ),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: cn("text-meta text-ink-3", classNames?.cardHost), children: host }),
+          /* @__PURE__ */ jsx("p", { className: cn("mt-0.5 line-clamp-2 text-body font-semibold", classNames?.cardTitle), children: title }),
+          snippet ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 line-clamp-4 text-meta text-ink-2", classNames?.cardSnippet), children: snippet }) : null
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/ai/tool-call/tool-call.d.ts

@@ -1,4 +1,6 @@
+import type { ClassNames } from "../../utils/class-names.js";
 export type ToolCallStatus = "pending" | "running" | "done" | "error";
+export type ToolCallPart = "root" | "header" | "body" | "name" | "status" | "panel" | "section" | "sectionTitle" | "code" | "error";
 export interface ToolCallProps {
     /** Tool identifier, e.g. `buscar_turnos`. */
     name: string;
@@ -13,6 +15,8 @@ export interface ToolCallProps {
     duration?: string;
     defaultOpen?: boolean;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ToolCallPart>;
 }
 /** Collapsible tool invocation with status, JSON arguments and JSON result. */
-export declare function ToolCall({ name, status, args, result, error, duration, defaultOpen, className, }: ToolCallProps): import("react").JSX.Element;
+export declare function ToolCall({ name, status, args, result, error, duration, defaultOpen, className, classNames, }: ToolCallProps): import("react").JSX.Element;

package/dist/ai/tool-call/tool-call.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, CircleAlert, Clock, LoaderCircle, Wrench } from "lucide-react";
 import { useMemo } from "react";
+import { Check, CircleAlert, Clock, LoaderCircle, Wrench } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { CodeBlock } from "../code-block/code-block.js";
 import { Disclosure } from "../internal/disclosure.js";
@@ -26,7 +26,8 @@ function ToolCall({
   error,
   duration,
   defaultOpen = false,
-  className
+  className,
+  classNames
 }) {
   const info = STATUS[status];
   const argsText = useMemo(() => args === void 0 ? null : pretty(args), [args]);
@@ -36,42 +37,63 @@ function ToolCall({
     {
       className: cn(
         "@container/tool min-w-0 rounded-card bg-surface-card p-2 text-ink border-card shadow-card",
+        classNames?.root,
         className
       ),
       children: /* @__PURE__ */ jsx(
         Disclosure,
         {
           defaultOpen,
+          triggerClassName: classNames?.header,
           header: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Wrench, { "aria-hidden": true, className: "size-3.5 shrink-0 text-ink-3" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-meta font-medium", children: name }),
-            /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex shrink-0 items-center gap-1 text-meta", info.tone), children: [
-              /* @__PURE__ */ jsx(StatusIcon, { status }),
-              /* @__PURE__ */ jsx("span", { className: "hidden @xs/tool:inline", children: info.label }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only @xs/tool:hidden", children: info.label }),
-              duration ? /* @__PURE__ */ jsxs("span", { className: "hidden text-ink-3 @sm/tool:inline", children: [
-                "\xB7 ",
-                duration
-              ] }) : null
-            ] })
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("min-w-0 truncate font-mono text-meta font-medium", classNames?.name),
+                children: name
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "ml-auto flex shrink-0 items-center gap-1 text-meta",
+                  info.tone,
+                  classNames?.status
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(StatusIcon, { status }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden @xs/tool:inline", children: info.label }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only @xs/tool:hidden", children: info.label }),
+                  duration ? /* @__PURE__ */ jsxs("span", { className: "hidden text-ink-3 @sm/tool:inline", children: [
+                    "\xB7 ",
+                    duration
+                  ] }) : null
+                ]
+              }
+            )
           ] }),
-          panelClassName: "grid gap-density-sm",
-          children: /* @__PURE__ */ jsxs("div", { className: "grid gap-density-sm pt-density-sm", children: [
-            argsText ? /* @__PURE__ */ jsxs("section", { "aria-label": "Argumentos", className: "grid gap-1", children: [
-              /* @__PURE__ */ jsx("h4", { className: "text-meta font-semibold text-ink-2", children: "Argumentos" }),
-              /* @__PURE__ */ jsx(CodeBlock, { code: argsText, language: "json" })
+          panelClassName: cn("grid gap-density-sm", classNames?.panel),
+          children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-density-sm pt-density-sm", classNames?.body), children: [
+            argsText ? /* @__PURE__ */ jsxs("section", { "aria-label": "Argumentos", className: cn("grid gap-1", classNames?.section), children: [
+              /* @__PURE__ */ jsx("h4", { className: cn("text-meta font-semibold text-ink-2", classNames?.sectionTitle), children: "Argumentos" }),
+              /* @__PURE__ */ jsx(CodeBlock, { code: argsText, language: "json", className: classNames?.code })
             ] }) : null,
             status === "error" && error ? /* @__PURE__ */ jsx(
               "p",
               {
                 role: "alert",
-                className: "rounded-badge bg-danger-soft px-2 py-1 text-meta text-danger",
+                className: cn(
+                  "rounded-badge bg-danger-soft px-2 py-1 text-meta text-danger",
+                  classNames?.error
+                ),
                 children: error
               }
             ) : null,
-            resultText ? /* @__PURE__ */ jsxs("section", { "aria-label": "Resultado", className: "grid gap-1", children: [
-              /* @__PURE__ */ jsx("h4", { className: "text-meta font-semibold text-ink-2", children: "Resultado" }),
-              /* @__PURE__ */ jsx(CodeBlock, { code: resultText, language: "json" })
+            resultText ? /* @__PURE__ */ jsxs("section", { "aria-label": "Resultado", className: cn("grid gap-1", classNames?.section), children: [
+              /* @__PURE__ */ jsx("h4", { className: cn("text-meta font-semibold text-ink-2", classNames?.sectionTitle), children: "Resultado" }),
+              /* @__PURE__ */ jsx(CodeBlock, { code: resultText, language: "json", className: classNames?.code })
             ] }) : null
           ] })
         }

package/dist/atoms/avatar/avatar.d.ts

@@ -1,11 +1,15 @@
+import { type ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type AvatarSize = "md" | "lg";
-export interface AvatarProps {
+export type AvatarPart = "root" | "image" | "fallback";
+export interface AvatarProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
     /** Full name: used for the initials fallback and as the accessible name. */
     name: string;
     src?: string;
     size?: AvatarSize;
     /** Fills the avatar with the accent color (e.g. the current user). */
     highlighted?: boolean;
-    className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<AvatarPart>;
 }
-export declare function Avatar({ name, src, size, highlighted, className }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ name, src, size, highlighted, className, classNames, ...props }: AvatarProps): import("react").JSX.Element;