@jcsoftdev/ui 0.1.7 → 0.2.0

package/dist/ai/chat-list/chat-list.js

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Plus, Trash2 } from "lucide-react";
 import { useMemo } from "react";
 import { Button } from "../../atoms/button/button.js";
+import { Plus, Trash2 } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { IconAction } from "../internal/icon-action.js";
 import { groupByDate } from "./group.js";
@@ -15,76 +15,115 @@ function ChatList({
   now,
   label = "Conversaciones",
   emptyText = "A\xFAn no hay conversaciones.",
-  className
+  className,
+  classNames
 }) {
   const groups = useMemo(() => groupByDate(items, now ?? Date.now()), [items, now]);
   return /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": label,
-      className: cn("@container/chatlist grid min-w-0 content-start gap-density", className),
+      className: cn(
+        "@container/chatlist grid min-w-0 content-start gap-density",
+        classNames?.root,
+        className
+      ),
       children: [
-        onNew ? /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: onNew, className: "w-full", children: [
-          /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
-          "Nueva conversaci\xF3n"
-        ] }) : null,
-        groups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 text-meta text-ink-3", children: emptyText }) : null,
-        groups.map((group) => /* @__PURE__ */ jsxs("section", { "aria-labelledby": `chat-group-${group.id}`, className: "grid gap-0.5", children: [
-          /* @__PURE__ */ jsx(
-            "h3",
-            {
-              id: `chat-group-${group.id}`,
-              className: "px-2 text-overline font-semibold uppercase text-ink-3",
-              children: group.label
-            }
-          ),
-          /* @__PURE__ */ jsx("ul", { className: "grid gap-0.5", children: group.items.map((item) => {
-            const active = item.id === activeId;
-            return /* @__PURE__ */ jsxs("li", { className: "group/row relative", children: [
-              /* @__PURE__ */ jsxs(
-                "button",
+        onNew ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            onClick: onNew,
+            className: cn("w-full", classNames?.newButton),
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+              "Nueva conversaci\xF3n"
+            ]
+          }
+        ) : null,
+        groups.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("px-2 text-meta text-ink-3", classNames?.empty), children: emptyText }) : null,
+        groups.map((group) => /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-labelledby": `chat-group-${group.id}`,
+            className: cn("grid gap-0.5", classNames?.group),
+            children: [
+              /* @__PURE__ */ jsx(
+                "h3",
                 {
-                  type: "button",
-                  "aria-current": active ? "true" : void 0,
-                  onClick: () => onSelect?.(item.id),
+                  id: `chat-group-${group.id}`,
                   className: cn(
-                    "grid w-full min-w-0 cursor-pointer gap-0.5 rounded-button px-2 py-1.5 text-left pressable focus-visible:focus-ring",
-                    onDelete && "pr-9",
-                    active ? "bg-accent-soft text-ink" : "text-ink-2 hover:bg-surface-2 hover:text-ink"
+                    "px-2 text-overline font-semibold uppercase text-ink-3",
+                    classNames?.groupTitle
                   ),
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                      item.unread ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-accent" }),
-                        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Sin leer: " })
-                      ] }) : null,
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "truncate text-body",
-                            item.unread || active ? "font-semibold" : "font-medium"
-                          ),
-                          children: item.title
-                        }
-                      )
-                    ] }),
-                    item.preview ? /* @__PURE__ */ jsx("span", { className: "hidden truncate text-meta text-ink-3 @xs/chatlist:block", children: item.preview }) : null
-                  ]
+                  children: group.label
                 }
               ),
-              onDelete ? /* @__PURE__ */ jsx(
-                IconAction,
-                {
-                  label: `Eliminar ${item.title}`,
-                  onClick: () => onDelete(item.id),
-                  className: "absolute right-1 top-1/2 -translate-y-1/2 opacity-0 focus-visible:opacity-100 group-hover/row:opacity-100 group-focus-within/row:opacity-100",
-                  children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": true })
-                }
-              ) : null
-            ] }, item.id);
-          }) })
-        ] }, group.id))
+              /* @__PURE__ */ jsx("ul", { className: cn("grid gap-0.5", classNames?.list), children: group.items.map((item) => {
+                const active = item.id === activeId;
+                return /* @__PURE__ */ jsxs("li", { className: cn("group/row relative", classNames?.item), children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-current": active ? "true" : void 0,
+                      onClick: () => onSelect?.(item.id),
+                      className: cn(
+                        "grid w-full min-w-0 cursor-pointer gap-0.5 rounded-button px-2 py-1.5 text-left pressable focus-visible:focus-ring",
+                        onDelete && "pr-9",
+                        active ? "bg-accent-soft text-ink" : "text-ink-2 hover:bg-surface-2 hover:text-ink",
+                        classNames?.row
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                          item.unread ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-accent" }),
+                            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Sin leer: " })
+                          ] }) : null,
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "truncate text-body",
+                                item.unread || active ? "font-semibold" : "font-medium",
+                                classNames?.title
+                              ),
+                              children: item.title
+                            }
+                          )
+                        ] }),
+                        item.preview ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "hidden truncate text-meta text-ink-3 @xs/chatlist:block",
+                              classNames?.preview
+                            ),
+                            children: item.preview
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
+                  onDelete ? /* @__PURE__ */ jsx(
+                    IconAction,
+                    {
+                      label: `Eliminar ${item.title}`,
+                      onClick: () => onDelete(item.id),
+                      className: cn(
+                        "absolute right-1 top-1/2 -translate-y-1/2 opacity-0 focus-visible:opacity-100 group-hover/row:opacity-100 group-focus-within/row:opacity-100",
+                        classNames?.delete
+                      ),
+                      children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": true })
+                    }
+                  ) : null
+                ] }, item.id);
+              }) })
+            ]
+          },
+          group.id
+        ))
       ]
     }
   );

package/dist/ai/chat-message/chat-message.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type ChatRole = "user" | "assistant" | "system";
 export type ChatMessageStatus = "sending" | "streaming" | "done" | "error";
+export type ChatMessagePart = "root" | "avatar" | "content" | "bubble" | "error" | "time";
 export interface ChatMessageProps extends Omit<ComponentPropsWithoutRef<"article">, "content"> {
     author: ChatRole;
     /** Display name, also the avatar's accessible name. */
@@ -18,6 +20,8 @@ export interface ChatMessageProps extends Omit<ComponentPropsWithoutRef<"article
     footer?: ReactNode;
     /** Text of the failure line when `status` is `error`. */
     errorText?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ChatMessagePart>;
 }
 /** One chat turn: avatar, bubble, status, streaming caret and an optional footer slot. */
-export declare function ChatMessage({ author, name, avatarSrc, status, time, content, children, footer, errorText, className, ...props }: ChatMessageProps): import("react").JSX.Element;
+export declare function ChatMessage({ author, name, avatarSrc, status, time, content, children, footer, errorText, className, classNames, ...props }: ChatMessageProps): import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlert } from "lucide-react";
 import { Avatar } from "../../atoms/avatar/avatar.js";
+import { CircleAlert } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { Loader } from "../loader/loader.js";
 import { Markdown } from "../markdown/markdown.js";
@@ -15,6 +15,7 @@ function ChatMessage({
   footer,
   errorText = "No se pudo enviar el mensaje.",
   className,
+  classNames,
   ...props
 }) {
   const streaming = status === "streaming";
@@ -22,10 +23,19 @@ function ChatMessage({
     return /* @__PURE__ */ jsx(
       "article",
       {
-        className: cn("flex justify-center", className),
+        className: cn("flex justify-center", classNames?.root, className),
         "aria-label": name ?? "Sistema",
         ...props,
-        children: /* @__PURE__ */ jsx("p", { className: "max-w-full rounded-badge bg-surface-sunken px-3 py-1 text-center text-meta text-ink-3", children: children ?? content })
+        children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "max-w-full rounded-badge bg-surface-sunken px-3 py-1 text-center text-meta text-ink-3",
+              classNames?.bubble
+            ),
+            children: children ?? content
+          }
+        )
       }
     );
   }
@@ -40,6 +50,7 @@ function ChatMessage({
       className: cn(
         "@container/message flex min-w-0 gap-density-sm",
         user ? "flex-row-reverse" : "flex-row",
+        classNames?.root,
         className
       ),
       ...props,
@@ -50,7 +61,7 @@ function ChatMessage({
             name: name ?? (user ? "T\xFA" : "Asistente"),
             src: avatarSrc,
             highlighted: !user,
-            className: "mt-0.5"
+            className: cn("mt-0.5", classNames?.avatar)
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -58,7 +69,8 @@ function ChatMessage({
           {
             className: cn(
               "grid min-w-0 max-w-[92%] gap-1 @md/message:max-w-[80%]",
-              user && "justify-items-end"
+              user && "justify-items-end",
+              classNames?.content
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -68,16 +80,24 @@ function ChatMessage({
                     "min-w-0 max-w-full rounded-card px-3 py-2",
                     user ? "bg-accent-soft text-ink" : "bg-surface-card text-ink border-card shadow-card",
                     status === "error" && "bg-danger-soft",
-                    status === "sending" && "opacity-70"
+                    status === "sending" && "opacity-70",
+                    classNames?.bubble
                   ),
                   children: waiting ? /* @__PURE__ */ jsx(Loader, { size: "sm", label: "El asistente est\xE1 escribiendo" }) : body
                 }
               ),
-              status === "error" ? /* @__PURE__ */ jsxs("p", { role: "alert", className: "flex items-center gap-1 text-meta text-danger", children: [
-                /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": true, className: "size-3.5 shrink-0" }),
-                errorText
-              ] }) : null,
-              time || status === "sending" ? /* @__PURE__ */ jsx("p", { className: "text-meta text-ink-3", children: status === "sending" ? "Enviando\u2026" : time }) : null,
+              status === "error" ? /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  role: "alert",
+                  className: cn("flex items-center gap-1 text-meta text-danger", classNames?.error),
+                  children: [
+                    /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": true, className: "size-3.5 shrink-0" }),
+                    errorText
+                  ]
+                }
+              ) : null,
+              time || status === "sending" ? /* @__PURE__ */ jsx("p", { className: cn("text-meta text-ink-3", classNames?.time), children: status === "sending" ? "Enviando\u2026" : time }) : null,
               footer
             ]
           }

package/dist/ai/code-block/code-block.d.ts

@@ -1,3 +1,5 @@
+import type { ClassNames } from "../../utils/class-names.js";
+export type CodeBlockPart = "root" | "header" | "title" | "actions" | "pre" | "code";
 export interface CodeBlockProps {
     code: string;
     /** `ts`, `js`, `json`, `bash`, `go` or `sql` (aliases like `typescript` work); anything else is plain. */
@@ -7,6 +9,8 @@ export interface CodeBlockProps {
     /** Wrap long lines instead of scrolling horizontally. */
     wrap?: boolean;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<CodeBlockPart>;
 }
 /** Code with a language label, a copy button and a dependency-free syntax highlighter. */
-export declare function CodeBlock({ code, language, filename, wrap, className }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, language, filename, wrap, className, classNames, }: CodeBlockProps): import("react").JSX.Element;

package/dist/ai/code-block/code-block.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Copy } from "lucide-react";
 import { useMemo } from "react";
+import { Check, Copy } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { IconAction } from "../internal/icon-action.js";
 import { useCopy } from "../internal/use-copy.js";
@@ -26,7 +26,14 @@ const LABELS = {
   go: "Go",
   sql: "SQL"
 };
-function CodeBlock({ code, language, filename, wrap, className }) {
+function CodeBlock({
+  code,
+  language,
+  filename,
+  wrap,
+  className,
+  classNames
+}) {
   const { copied, copy } = useCopy();
   const tokens = useMemo(() => tokenize(code, language), [code, language]);
   const resolved = resolveLanguage(language);
@@ -36,32 +43,43 @@ function CodeBlock({ code, language, filename, wrap, className }) {
     {
       className: cn(
         "@container/code m-0 min-w-0 max-w-full overflow-hidden rounded-card bg-surface-sunken text-ink border-card shadow-card",
+        classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center justify-between gap-density-sm border-b-divider px-3 py-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-meta text-ink-3", children: title }),
-          /* @__PURE__ */ jsxs("span", { "aria-live": "polite", className: "flex items-center gap-1", children: [
-            copied ? /* @__PURE__ */ jsx("span", { className: "text-meta text-success", children: "Copiado" }) : null,
-            /* @__PURE__ */ jsx(
-              IconAction,
-              {
-                label: copied ? "C\xF3digo copiado" : "Copiar c\xF3digo",
-                onClick: () => copy(code),
-                children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "figcaption",
+          {
+            className: cn(
+              "flex items-center justify-between gap-density-sm border-b-divider px-3 py-1",
+              classNames?.header
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate font-mono text-meta text-ink-3", classNames?.title), children: title }),
+              /* @__PURE__ */ jsxs("span", { "aria-live": "polite", className: cn("flex items-center gap-1", classNames?.actions), children: [
+                copied ? /* @__PURE__ */ jsx("span", { className: "text-meta text-success", children: "Copiado" }) : null,
+                /* @__PURE__ */ jsx(
+                  IconAction,
+                  {
+                    label: copied ? "C\xF3digo copiado" : "Copiar c\xF3digo",
+                    onClick: () => copy(code),
+                    children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "pre",
           {
             tabIndex: 0,
             className: cn(
-              "m-0 p-3 font-mono text-[12.5px] leading-relaxed focus-visible:focus-ring",
-              wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto"
+              "m-0 p-3 font-mono text-fs-125 leading-relaxed focus-visible:focus-ring",
+              wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+              classNames?.pre
             ),
-            children: /* @__PURE__ */ jsx("code", { children: tokens.map((token, index) => /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx("code", { className: classNames?.code, children: tokens.map((token, index) => /* @__PURE__ */ jsx(
               "span",
               {
                 className: tokenClasses[token.type] || void 0,

package/dist/ai/conversation/conversation.d.ts

@@ -1,12 +1,16 @@
 import { type ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type ConversationPart = "root" | "scroller" | "content" | "jump";
 export interface ConversationProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** Accessible name of the message log. */
     label?: string;
     /** Label of the "jump to latest" button. */
     jumpLabel?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ConversationPart>;
 }
 /**
  * Scrollable message log that sticks to the bottom while new content streams in. Scrolling up
  * pauses the follow behavior and reveals a "jump to latest" button. Fills its parent's height.
  */
-export declare function Conversation({ label, jumpLabel, className, children, ...props }: ConversationProps): import("react").JSX.Element;
+export declare function Conversation({ label, jumpLabel, className, classNames, children, ...props }: ConversationProps): import("react").JSX.Element;

package/dist/ai/conversation/conversation.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowDown } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
 import { nextStuck, showJumpToLatest } from "./stick.js";
@@ -9,6 +9,7 @@ function Conversation({
   label = "Conversaci\xF3n",
   jumpLabel = "Ir al \xFAltimo mensaje",
   className,
+  classNames,
   children,
   ...props
 }) {
@@ -44,8 +45,12 @@ function Conversation({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("@container/conversation relative h-full min-h-0 min-w-0", className),
       ...props,
+      className: cn(
+        "@container/conversation relative h-full min-h-0 min-w-0",
+        classNames?.root,
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -57,8 +62,18 @@ function Conversation({
             "aria-relevant": "additions text",
             tabIndex: 0,
             onScroll,
-            className: "h-full overflow-y-auto overscroll-contain focus-visible:focus-ring",
-            children: /* @__PURE__ */ jsx("div", { ref: content, className: "mx-auto grid w-full max-w-3xl gap-density-lg p-card", children })
+            className: cn(
+              "h-full overflow-y-auto overscroll-contain focus-visible:focus-ring",
+              classNames?.scroller
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: content,
+                className: cn("mx-auto grid w-full max-w-3xl gap-density-lg p-card", classNames?.content),
+                children
+              }
+            )
           }
         ),
         jump ? /* @__PURE__ */ jsxs(
@@ -71,7 +86,10 @@ function Conversation({
               setJump(false);
               toBottom(!reduced);
             },
-            className: "absolute bottom-3 left-1/2 inline-flex h-control-sm -translate-x-1/2 cursor-pointer items-center gap-1.5 rounded-button bg-surface-overlay px-3 text-meta text-ink shadow-overlay border-control surface-overlay pressable focus-visible:focus-ring",
+            className: cn(
+              "absolute bottom-3 left-1/2 inline-flex h-control-sm -translate-x-1/2 cursor-pointer items-center gap-1.5 rounded-button bg-surface-overlay px-3 text-meta text-ink shadow-overlay border-control surface-overlay pressable focus-visible:focus-ring",
+              classNames?.jump
+            ),
             children: [
               /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": true, className: "size-3.5" }),
               /* @__PURE__ */ jsx("span", { className: "truncate", children: "M\xE1s reciente" })

package/dist/ai/internal/disclosure.d.ts

@@ -8,6 +8,8 @@ export interface DisclosureProps {
     onOpenChange?: (open: boolean) => void;
     className?: string;
     panelClassName?: string;
+    /** Classes for the header button. */
+    triggerClassName?: string;
 }
 /** Header button + animated panel. Closed content is `inert`, so it leaves the tab order. */
-export declare function Disclosure({ header, children, open: openProp, defaultOpen, onOpenChange, className, panelClassName, }: DisclosureProps): import("react").JSX.Element;
+export declare function Disclosure({ header, children, open: openProp, defaultOpen, onOpenChange, className, panelClassName, triggerClassName, }: DisclosureProps): import("react").JSX.Element;

package/dist/ai/internal/disclosure.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
 import { useId, useState } from "react";
+import { ChevronDown } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 function Disclosure({
   header,
@@ -10,7 +10,8 @@ function Disclosure({
   defaultOpen = false,
   onOpenChange,
   className,
-  panelClassName
+  panelClassName,
+  triggerClassName
 }) {
   const [state, setState] = useState(defaultOpen);
   const open = openProp ?? state;
@@ -27,7 +28,10 @@ function Disclosure({
         "aria-expanded": open,
         "aria-controls": panelId,
         onClick: toggle,
-        className: "flex w-full min-w-0 cursor-pointer items-center gap-density-sm rounded-button text-left focus-visible:focus-ring",
+        className: cn(
+          "flex w-full min-w-0 cursor-pointer items-center gap-density-sm rounded-button text-left focus-visible:focus-ring",
+          triggerClassName
+        ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-density-sm", children: header }),
           /* @__PURE__ */ jsx(

package/dist/ai/loader/loader.d.ts

@@ -1,5 +1,7 @@
+import type { ClassNames } from "../../utils/class-names.js";
 export type LoaderVariant = "dots" | "typing";
 export type LoaderSize = "sm" | "md";
+export type LoaderPart = "root" | "dots" | "dot" | "label";
 export interface LoaderProps {
     /** `dots` is the bare indicator; `typing` wraps it in a bubble with a label. */
     variant?: LoaderVariant;
@@ -7,6 +9,8 @@ export interface LoaderProps {
     /** Spoken label (`role="status"`); shown as text in the `typing` variant. */
     label?: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<LoaderPart>;
 }
 /** Animated waiting indicator. With reduced motion the dots stay still. */
-export declare function Loader({ variant, size, label, className, }: LoaderProps): import("react").JSX.Element;
+export declare function Loader({ variant, size, label, className, classNames, }: LoaderProps): import("react").JSX.Element;

package/dist/ai/loader/loader.js

@@ -8,13 +8,14 @@ function Loader({
   variant = "dots",
   size = "md",
   label = "Escribiendo\u2026",
-  className
+  className,
+  classNames
 }) {
   const reduced = usePrefersReducedMotion();
-  const dots = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex items-center gap-1", children: [0, 1, 2].map((n) => /* @__PURE__ */ jsx(
+  const dots = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("inline-flex items-center gap-1", classNames?.dots), children: [0, 1, 2].map((n) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("rounded-full bg-current opacity-60", dotSize[size]),
+      className: cn("rounded-full bg-current opacity-60", dotSize[size], classNames?.dot),
       style: reduced ? void 0 : { animation: "ui-ai-dot 1.2s ease-in-out infinite", animationDelay: `${n * 160}ms` }
     },
     n
@@ -26,12 +27,13 @@ function Loader({
       className: cn(
         "inline-flex items-center gap-density-sm text-ink-3",
         variant === "typing" && "rounded-card bg-surface-card px-control-x py-2 text-meta shadow-card border-card",
+        classNames?.root,
         className
       ),
       children: [
         /* @__PURE__ */ jsx(AiKeyframes, {}),
         dots,
-        variant === "typing" ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+        variant === "typing" ? /* @__PURE__ */ jsx("span", { className: classNames?.label, children: label }) : /* @__PURE__ */ jsx("span", { className: cn("sr-only", classNames?.label), children: label })
       ]
     }
   );

package/dist/ai/markdown/markdown.d.ts

@@ -1,12 +1,16 @@
+import type { ClassNames } from "../../utils/class-names.js";
+export type MarkdownPart = "root" | "heading" | "paragraph" | "list" | "listItem" | "inlineCode" | "link" | "quote" | "rule" | "tableWrapper" | "table" | "tableHead" | "tableHeaderCell" | "tableRow" | "tableCell" | "caret";
 export interface MarkdownProps {
     /** Markdown source. Raw HTML is shown as text; only http, https and mailto links are active. */
     children: string;
     /** Shows a blinking caret after the last character, for streaming answers. */
     streaming?: boolean;
     className?: string;
+    /** Per-element classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<MarkdownPart>;
 }
 /**
  * Safe Markdown renderer: headings, lists, emphasis, inline code, code fences, quotes, tables
  * and links. It builds React elements from a parsed AST, so no input ever reaches innerHTML.
  */
-export declare function Markdown({ children, streaming, className }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, streaming, className, classNames }: MarkdownProps): import("react").JSX.Element;