@jcsoftdev/ui 0.1.6 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,102 @@
+# Changelog
+
+## 0.2.0 (2026-10-11)
+
+Zero runtime dependencies, a published headless layer, per-part customization and a configurable
+class merge. This release has breaking changes, listed below.
+
+### Highlights
+
+- **Zero runtime dependencies.** `dependencies` is gone; only the `react` and `react-dom` 19 peers
+  remain. Removed: `@radix-ui/react-*` (dialog, popover, dropdown-menu, tabs, toggle-group, switch,
+  checkbox, radio-group, progress, avatar, slot), `cmdk`, `sonner`, `lucide-react`, `clsx` and
+  `tailwind-merge`. The replacements are in-house and covered by keyboard, ARIA and browser tests.
+  Attributions are in `THIRD_PARTY_NOTICES.md`.
+- **New `@jcsoftdev/ui/primitives` entry** (ESM, typed): `DialogPrimitive`, `PopoverPrimitive`,
+  `PopperPrimitive`, `MenuPrimitive`, `CommandPrimitive`, `Portal`, `usePresence`,
+  `useFocusScope`, `useDismissableLayer`, `useLayer`, `LAYER_BRANCH_ATTRIBUTE`,
+  `computePlacement` (with geometry types) and `commandScore` / `CommandFilter`. Internals are not
+  importable. Single-primitive imports tree-shake.
+- **`classNames` per part** on about 100 styled components (typed `ClassNames<Part>` and exported
+  `XxxPart` types). Merge order is kit, then `classNames.root`, then `className`.
+- **`createCn` / `extendCn`**: a per-instance class merge configured with your own text, spacing,
+  radius and shadow tokens, plus custom class groups and conflicts. The default `cn` is unchanged.
+  The kit's own tokens are derived from `styles/theme.css` at build time.
+- **Exported variant maps**: `buttonClasses`, `buttonVariantClasses`, `buttonSizeClasses`,
+  `chipToneClasses`, `eventToneClasses`, `dayChipToneClasses`.
+- **Font-size tokens**: `type.sizeScale` in the tokens file generates `--text-fs-95` to
+  `--text-fs-440`; components use `text-fs-*` instead of `text-[Npx]`.
+- **`ink-3` darkened** in the light theme (`#666673`) to clear 4.5:1 contrast on `surface-2`. This
+  is global: anything using the token gets darker text.
+- **Icons** are an in-house set at `@jcsoftdev/ui/icons`, one tree-shakeable component per icon
+  (a single icon bundles in under 1 KB).
+- **Toaster** is in-house with the same `toast`, `toast.success`, `toast.error`, `toast.dismiss`
+  and action API.
+
+### Breaking changes
+
+Types and imports
+
+- Radix prop types are no longer exported or leaked. `DropdownMenuContent` and `ContextMenuContent`
+  types come from the in-house `MenuPrimitive`.
+- `LucideIcon` is a deprecated alias of the new `IconComponent` type. Import icons from
+  `@jcsoftdev/ui/icons` (the icon set is vendored; `lucide-react` is no longer installed for you).
+- `ToasterProps` is owned by the package: `position`, `duration`, `visibleToasts`, `className`,
+  `label`, plus `container` and `dir`. Other `sonner` props are gone, and there are no `info` or
+  `warning` toast tones.
+
+CSS variables, selectors and attributes
+
+- `--radix-popover-content-*` and `--radix-dropdown-menu-content-*` are now `--ui-popper-*`
+  (`--ui-popper-available-width|height`, `--ui-popper-anchor-width|height`,
+  `--ui-popper-transform-origin`).
+- `[data-radix-popper-content-wrapper]` is now `[data-ui-popper-wrapper]`.
+- `--cmdk-list-height` is now `--ui-command-list-height`; `[cmdk-*]` attributes are now
+  `data-ui-command-*` (for example `[cmdk-group-heading]` is `[data-ui-command-group-heading]`).
+- `data-disabled` on command items is present-only (it used to be `"true"` / `"false"`).
+- Transform-origin semantics follow the in-house popper.
+
+Props and behavior
+
+- Removed from popper and popover content: `asChild`, `forceMount` on `Portal`,
+  `updatePositionStrategy` and `onPlaced`. Menus no longer take `loop`: they always loop.
+- `aria-controls` on popover and menu triggers is present only while the content is open.
+- Menu `onSelect` receives a plain `Event`. Tab now closes a menu. ArrowUp on a closed menu
+  trigger opens it on the last item (new).
+- Command: `Separator` is `aria-hidden` (no `role="separator"`); `Loading` should be rendered
+  beside `List`; `Command.Dialog` keeps `overlayClassName`, `contentClassName` and `container`, but
+  Radix dialog props are not accepted.
+- Nodes appended to `body` after a modal opens are not hidden from assistive technology, and live
+  regions stay reachable under a modal. See the primitives guide.
+- Part names: Dialog and Drawer `classNames.content` is `root`; Toaster `message` is `title`;
+  StatusPill `led` is `dot`. `overlayClassName` / `closeClassName` on Dialog and Drawer content
+  were never released and are not available; `Carousel.slideClassName` remains.
+- Merge order for `className` against `classNames.root` is now `className` last.
+
+### Migration from 0.1.x
+
+1. Upgrade to `@jcsoftdev/ui@0.2.0`. Your own dependencies on `lucide-react`, `clsx`,
+   `tailwind-merge`, `sonner` or `@radix-ui/*` are no longer pulled in by the kit; keep them only if
+   your app imports them directly.
+2. Replace `import { X } from "lucide-react"` with `import { X } from "@jcsoftdev/ui/icons"` where
+   you pass icons to kit components (the `LucideIcon` type still works as an alias of
+   `IconComponent`).
+3. Search your CSS for `--radix-popover-content-*`, `--radix-dropdown-menu-content-*`,
+   `[data-radix-popper-content-wrapper]`, `--cmdk-list-height` and `[cmdk-*]`, and rename them as
+   listed under "Breaking changes".
+4. If you passed Radix or `sonner` props through `Popover`, menus, `Command.Dialog` or `Toaster`,
+   drop the ones listed as removed; `className` now wins over `classNames.root`.
+5. Check light-theme text that uses `ink-3`: it is darker now (`#666673`).
+6. Optional: use `classNames` per part, `createCn` / `extendCn` for your own tokens, and
+   `@jcsoftdev/ui/primitives` for headless building blocks.
+
+### Other changes
+
+- `Dialog`, `Drawer`, `Popover`, `HoverCard`, `DropdownMenu`, `ContextMenu` and `CommandPalette`
+  keep their public API; `DropdownMenu` gains `CheckboxItem`, `Group`, `Sub`, `SubTrigger`,
+  `SubContent`, `Arrow` and `container`; `Popover` gains `PopoverArrow` and `container`.
+- `RadioOption.disabled` is supported.
+- The Toaster section carries the layer-branch attribute, so toast clicks never dismiss a dialog.
+- Package `files` now include `CHANGELOG.md` and `THIRD_PARTY_NOTICES.md`.
+- New checks in CI: `check:dist-imports` (the unbundled dist loads under plain Node) and
+  `check:docs-examples` (the primitives guide compiles).

package/README.md

@@ -1,6 +1,6 @@
 # @jcsoftdev/ui
 
-Token-driven React 19 component library: Radix primitives, Tailwind CSS v4, no runtime CSS-in-JS.
+Token-driven React 19 component library: zero runtime dependencies, Tailwind CSS v4, no runtime CSS-in-JS.
 The whole look (colors for light/dark themes, brand palettes, type, radius, shadows, font) comes from
 **one tokens JSON file**. Change the file, rebuild the theme, and every component follows.
 
@@ -98,6 +98,14 @@ A custom tokens file must define the same names as `tokens/default.json`; copy i
 
 Switching at runtime: set `data-theme="light|dark"` (remove it for "system") and `data-accent="<palette-id>"` on `<html>`.
 
+## Customization
+
+Every styled component can be restyled without forking it: override the CSS variables, pass
+`classNames={{ part: "..." }}` for the inner parts (`className` still targets the root; your
+classes win on conflicts), reuse the exported variant maps (`buttonClasses`, `buttonVariantClasses`,
+`chipToneClasses`, ...), and use `createCn` / `extendCn` for your own theme tokens. Full guide:
+https://ui.jcsoftdev.com/docs/customization/
+
 ## Touch density
 
 `data-density="touch"` is the preset for phones operated with a thumb: controls and small buttons are
@@ -185,15 +193,15 @@ carries `data-row-key`; `rowClassName` applies to both layouts.
 The package is unbundled ESM, `"sideEffects": ["**/*.css"]`, and every component has its own entry point:
 
 ```ts
-import { Button } from "@jcsoftdev/ui/atoms/button";   // only Button + Radix Slot + cn()
-import { Dialog } from "@jcsoftdev/ui/overlays/dialog"; // only the Dialog + @radix-ui/react-dialog
+import { Button } from "@jcsoftdev/ui/atoms/button";   // only Button + Slot + cn()
+import { Dialog } from "@jcsoftdev/ui/overlays/dialog"; // only the Dialog + the dialog primitive
 import { Chip, Avatar } from "@jcsoftdev/ui/atoms";     // group entry: still tree-shakes
 ```
 
-Entries: `atoms`, `forms`, `overlays`, `navigation`, `containers`, `states`, `shell`, `palette`, `calendar`, `charts`, `utils`
-(each also as `<group>/<component>`), plus `styles/*` and `tokens/*`. Runtime dependencies (Radix, lucide-react,
-cmdk, sonner) are regular `dependencies`, so a consumer that imports one component only bundles that component's
-dependencies. Components that need state are marked `"use client"`.
+Entries: `atoms`, `forms`, `overlays`, `navigation`, `containers`, `states`, `shell`, `palette`, `calendar`, `charts`, `utils`, `icons`
+(each also as `<group>/<component>`), plus `styles/*` and `tokens/*`. The package has no runtime
+dependencies (only the `react` and `react-dom` peers), so a consumer that imports one component only bundles that
+component's own code. Components that need state are marked `"use client"`.
 
 Tailwind needs to see the class names inside the package: add `@source "…/node_modules/@jcsoftdev/ui/dist";`
 (see Quickstart). Each component's styling is plain Tailwind classes over tokens; there are no per-component CSS files.
@@ -214,3 +222,16 @@ The `source` export condition points at `src/*/index.ts` for consumers that want
 - English identifiers; every visible string and aria label is a prop. Defaults are English and can be localized in one place with `UiStringsProvider`.
 - Relative imports use the `.js` extension; components import specific component entries, never group barrels.
 - No literal colors in components, no `dark:` variants; dark mode is a token concern.
+
+
+## Headless primitives
+
+`@jcsoftdev/ui/primitives` publishes the unstyled behavior under the overlays (`DialogPrimitive`, `PopoverPrimitive`, `PopperPrimitive`, `MenuPrimitive`, `CommandPrimitive`, `Portal` and the layer hooks) so you can bring your own markup and styles. Importing one primitive does not bundle the others. See the [guide](https://ui.jcsoftdev.com/docs/primitives).
+
+## Icons
+
+`@jcsoftdev/ui/icons` exports every icon as its own tree-shakeable component (`import { Check } from "@jcsoftdev/ui/icons"`). The SVG sources in `icons/svg` are vendored from [Lucide](https://lucide.dev) (ISC, see `icons/LICENSE-lucide`); regenerate the components with `pnpm build:icons`.
+
+## Third-party notices
+
+The package has no runtime dependencies. Icon sources are vendored from Lucide (ISC, with Feather MIT portions), and the class merge engine, command scorer and overlay behavior are derived from or modeled on tailwind-merge, cmdk and Radix UI (MIT). Attributions and license texts are in [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md).

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,66 @@
+# Third-party notices
+
+`@jcsoftdev/ui` has no runtime dependencies. The code below was written for this package, but
+it is derived from, or ports the behavior and constants of, the following open-source projects.
+Their licenses require the notices to be kept.
+
+## Lucide icons (ISC) and Feather (MIT)
+
+The SVG sources in `icons/svg`, and the generated components in `src/icons` and
+`dist/icons`, are vendored from [Lucide](https://lucide.dev) (lucide-react 1.53.0).
+
+- Copyright (c) 2026 Lucide Icons and Contributors, ISC License.
+- A subset of the icons derives from Feather: Copyright (c) 2013-present Cole Bemis, MIT License.
+
+The full license text, including the list of Feather-derived icons, ships in
+`icons/LICENSE-lucide`.
+
+## tailwind-merge (MIT)
+
+The class merge engine (`src/utils/class-merge.ts`, `class-groups.ts`, `class-validators.ts`) is a
+new implementation that reproduces the conflict groups and resolution rules of
+[tailwind-merge](https://github.com/dcastil/tailwind-merge) 3.x, and its output was verified
+against that library. The class group table follows its structure.
+
+Copyright (c) 2021 Dany Castillo, MIT License.
+
+## cmdk and command-score (MIT)
+
+The command menu (`src/primitives/command`) is a new implementation with the behavior and API shape
+of [cmdk](https://github.com/pacocoursey/cmdk) (Copyright (c) 2022 Paco Coursey). The scorer
+(`score.ts`) uses the scoring constants and approach of
+[command-score](https://github.com/superhuman/command-score) (Copyright (c) 2017 Superhuman Labs
+Inc.), as vendored by cmdk.
+
+## Radix UI and sonner (MIT, behavior reference)
+
+The dialog, popover, menu, tabs, switch, checkbox, radio group, progress, avatar and slot behavior,
+and the toast API, follow the documented behavior and WAI-ARIA patterns of
+[Radix UI Primitives](https://github.com/radix-ui/primitives) (Copyright (c) 2022 WorkOS) and
+[sonner](https://github.com/emilkowalski/sonner) (Copyright (c) 2023 Emil Kowalski). No source
+files from those projects are bundled; they are no longer dependencies.
+
+## MIT License
+
+Applies to Feather, tailwind-merge, cmdk, command-score, Radix UI and sonner above, each with the
+copyright holder named in its section.
+
+```text
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/ai/attachment/attachment.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type AttachmentStatus = "done" | "uploading" | "error";
 export type AttachmentVariant = "chip" | "preview";
+export type AttachmentPart = "root" | "thumbnail" | "text" | "name" | "detail" | "progress" | "remove";
 export interface AttachmentProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "children"> {
     name: string;
     /** Pre-formatted size, e.g. `240 KB`. */
@@ -14,6 +16,8 @@ export interface AttachmentProps extends Omit<ComponentPropsWithoutRef<"fieldset
     variant?: AttachmentVariant;
     /** Shows the remove button. */
     onRemove?: () => void;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<AttachmentPart>;
 }
 /** File chip or preview tile for prompt attachments, with an optional remove button. */
-export declare function Attachment({ name, size, previewSrc, status, progress, variant, onRemove, className, ...props }: AttachmentProps): import("react").JSX.Element;
+export declare function Attachment({ name, size, previewSrc, status, progress, variant, onRemove, className, classNames, ...props }: AttachmentProps): import("react").JSX.Element;

package/dist/ai/attachment/attachment.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlert, FileText, X } from "lucide-react";
+import { CircleAlert, FileText, X } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { IconAction } from "../internal/icon-action.js";
 function Attachment({
@@ -11,6 +11,7 @@ function Attachment({
   variant = "chip",
   onRemove,
   className,
+  classNames,
   ...props
 }) {
   const preview = variant === "preview";
@@ -24,6 +25,7 @@ function Attachment({
         "relative flex min-w-0 max-w-full items-center gap-density-sm bg-surface-control text-ink border-control shadow-control",
         preview ? "w-40 flex-col items-stretch rounded-card p-1.5" : "h-control-sm rounded-button pl-1.5 pr-1",
         status === "error" && "text-danger",
+        classNames?.root,
         className
       ),
       ...props,
@@ -33,17 +35,22 @@ function Attachment({
           {
             className: cn(
               "grid shrink-0 place-items-center overflow-hidden rounded-badge bg-surface-sunken",
-              preview ? "h-20 w-full" : "size-6"
+              preview ? "h-20 w-full" : "size-6",
+              classNames?.thumbnail
             ),
             children: thumb
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: "grid min-w-0 flex-1 leading-tight", children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate text-meta font-medium", children: name }),
+        /* @__PURE__ */ jsxs("span", { className: cn("grid min-w-0 flex-1 leading-tight", classNames?.text), children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate text-meta font-medium", classNames?.name), children: name }),
           detail && (preview || status !== "done") ? /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn("truncate text-meta", status === "error" ? "text-danger" : "text-ink-3"),
+              className: cn(
+                "truncate text-meta",
+                status === "error" ? "text-danger" : "text-ink-3",
+                classNames?.detail
+              ),
               children: detail
             }
           ) : null
@@ -56,7 +63,10 @@ function Attachment({
             "aria-valuemin": 0,
             "aria-valuemax": 100,
             "aria-valuenow": Math.round(progress),
-            className: "absolute inset-x-1.5 bottom-0.5 h-0.5 overflow-hidden rounded-badge bg-track",
+            className: cn(
+              "absolute inset-x-1.5 bottom-0.5 h-0.5 overflow-hidden rounded-badge bg-track",
+              classNames?.progress
+            ),
             children: /* @__PURE__ */ jsx(
               "span",
               {
@@ -73,7 +83,8 @@ function Attachment({
             onClick: onRemove,
             className: cn(
               "size-5",
-              preview && "absolute right-2.5 top-2.5 bg-surface-overlay shadow-control"
+              preview && "absolute right-2.5 top-2.5 bg-surface-overlay shadow-control",
+              classNames?.remove
             ),
             children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
           }

package/dist/ai/chain-of-thought/chain-of-thought.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type ThoughtStatus = "pending" | "active" | "done";
 export interface ThoughtStep {
     id: string;
@@ -6,6 +7,7 @@ export interface ThoughtStep {
     detail?: ReactNode;
     status?: ThoughtStatus;
 }
+export type ChainOfThoughtPart = "root" | "title" | "duration" | "list" | "step" | "rail" | "marker" | "label" | "detail";
 export interface ChainOfThoughtProps {
     steps: ThoughtStep[];
     /** Header text; while any step is `active` it shimmers. */
@@ -16,6 +18,8 @@ export interface ChainOfThoughtProps {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ChainOfThoughtPart>;
 }
 /** Collapsible list of reasoning steps with a status rail. */
-export declare function ChainOfThought({ steps, title, duration, open, defaultOpen, onOpenChange, className, }: ChainOfThoughtProps): import("react").JSX.Element;
+export declare function ChainOfThought({ steps, title, duration, open, defaultOpen, onOpenChange, className, classNames, }: ChainOfThoughtProps): import("react").JSX.Element;

package/dist/ai/chain-of-thought/chain-of-thought.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Brain, Check } from "lucide-react";
+import { Brain, Check } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { Disclosure } from "../internal/disclosure.js";
 import { TextShimmer } from "../text-shimmer/text-shimmer.js";
@@ -10,7 +10,8 @@ function ChainOfThought({
   open,
   defaultOpen = false,
   onOpenChange,
-  className
+  className,
+  classNames
 }) {
   const active = steps.some((step) => step.status === "active");
   return /* @__PURE__ */ jsx(
@@ -18,6 +19,7 @@ function ChainOfThought({
     {
       className: cn(
         "@container/thought min-w-0 rounded-card bg-surface-sunken p-2 text-ink",
+        classNames?.root,
         className
       ),
       children: /* @__PURE__ */ jsx(
@@ -28,55 +30,75 @@ function ChainOfThought({
           onOpenChange,
           header: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Brain, { "aria-hidden": true, className: "size-3.5 shrink-0 text-ink-3" }),
-            active ? /* @__PURE__ */ jsxs(TextShimmer, { className: "truncate text-meta font-medium", children: [
+            active ? /* @__PURE__ */ jsxs(TextShimmer, { className: cn("truncate text-meta font-medium", classNames?.title), children: [
               title,
               "\u2026"
-            ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-meta font-medium text-ink-2", children: title }),
-            duration ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-meta text-ink-3", children: duration }) : null
+            ] }) : /* @__PURE__ */ jsx("span", { className: cn("truncate text-meta font-medium text-ink-2", classNames?.title), children: title }),
+            duration ? /* @__PURE__ */ jsx("span", { className: cn("ml-auto shrink-0 text-meta text-ink-3", classNames?.duration), children: duration }) : null
           ] }),
-          children: /* @__PURE__ */ jsx("ol", { className: "grid gap-0 pt-density-sm", children: steps.map((step, index) => {
+          children: /* @__PURE__ */ jsx("ol", { className: cn("grid gap-0 pt-density-sm", classNames?.list), children: steps.map((step, index) => {
             const status = step.status ?? "done";
             const last = index === steps.length - 1;
-            return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-density-sm pb-density last:pb-0", children: [
-              last ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute bottom-0 left-[9px] top-5 w-px bg-line" }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: cn(
-                    "relative mt-0.5 grid size-[19px] shrink-0 place-items-center rounded-full",
-                    status === "done" && "bg-success-soft text-success",
-                    status === "active" && "bg-accent-soft text-accent-ink",
-                    status === "pending" && "bg-surface-2 text-ink-3"
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cn(
+                  "relative flex gap-density-sm pb-density last:pb-0",
+                  classNames?.step
+                ),
+                children: [
+                  last ? null : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "absolute bottom-0 left-2.25 top-5 w-px bg-line",
+                        classNames?.rail
+                      )
+                    }
                   ),
-                  children: status === "done" ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(
                     "span",
                     {
+                      "aria-hidden": true,
                       className: cn(
-                        "size-1.5 rounded-full bg-current",
-                        status === "active" && "animate-pulse"
+                        "relative mt-0.5 grid size-4.75 shrink-0 place-items-center rounded-full",
+                        status === "done" && "bg-success-soft text-success",
+                        status === "active" && "bg-accent-soft text-accent-ink",
+                        status === "pending" && "bg-surface-2 text-ink-3",
+                        classNames?.marker
+                      ),
+                      children: status === "done" ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "size-1.5 rounded-full bg-current",
+                            status === "active" && "animate-pulse"
+                          )
+                        }
                       )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [
-                /* @__PURE__ */ jsxs(
-                  "p",
-                  {
-                    className: cn(
-                      "break-words text-meta font-medium",
-                      status === "pending" ? "text-ink-3" : "text-ink"
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: cn("grid min-w-0 flex-1 gap-0.5", classNames?.label), children: [
+                    /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        className: cn(
+                          "break-words text-meta font-medium",
+                          status === "pending" ? "text-ink-3" : "text-ink"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: status === "done" ? "Completado: " : status === "active" ? "En curso: " : "Pendiente: " }),
+                          step.label
+                        ]
+                      }
                     ),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: status === "done" ? "Completado: " : status === "active" ? "En curso: " : "Pendiente: " }),
-                      step.label
-                    ]
-                  }
-                ),
-                step.detail ? /* @__PURE__ */ jsx("div", { className: "break-words text-meta text-ink-2", children: step.detail }) : null
-              ] })
-            ] }, step.id);
+                    step.detail ? /* @__PURE__ */ jsx("div", { className: cn("break-words text-meta text-ink-2", classNames?.detail), children: step.detail }) : null
+                  ] })
+                ]
+              },
+              step.id
+            );
           }) })
         }
       )

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

@@ -1,3 +1,4 @@
+import type { ClassNames } from "../../utils/class-names.js";
 export interface ChatListItem {
     id: string;
     title: string;
@@ -6,6 +7,7 @@ export interface ChatListItem {
     preview?: string;
     unread?: boolean;
 }
+export type ChatListPart = "root" | "newButton" | "empty" | "group" | "groupTitle" | "list" | "item" | "row" | "title" | "preview" | "delete";
 export interface ChatListProps {
     items: ChatListItem[];
     activeId?: string;
@@ -19,6 +21,8 @@ export interface ChatListProps {
     label?: string;
     emptyText?: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ChatListPart>;
 }
 /** Sidebar list of conversations grouped by date (Hoy, Ayer, Últimos 7 días…). */
-export declare function ChatList({ items, activeId, onSelect, onNew, onDelete, now, label, emptyText, className, }: ChatListProps): import("react").JSX.Element;
+export declare function ChatList({ items, activeId, onSelect, onNew, onDelete, now, label, emptyText, className, classNames, }: ChatListProps): import("react").JSX.Element;