@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/containers/responsive-list/responsive-list.js

@@ -18,50 +18,96 @@ function ResponsiveList({
   renderActions,
   actionsHeader,
   rowClassName,
-  className
+  className,
+  classNames
 }) {
   const strings = useUiStrings();
   const primary = columns.find((column) => column.primary) ?? columns[0];
   const details = columns.filter((column) => column !== primary);
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "hidden rounded-card border-card shadow-card surface-card md:block", children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
-      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
-        columns.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { scope: "col", alignRight: column.align === "end", children: column.header }, column.key)),
-        renderActions ? /* @__PURE__ */ jsx(TableHeaderCell, { scope: "col", alignRight: true, children: actionsHeader ?? strings.actions }) : null
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(
-        TableRow,
-        {
-          "data-row-key": rowKey(item),
-          className: rowClassName?.(item),
-          children: [
-            columns.map((column) => /* @__PURE__ */ jsx(TableCell, { alignRight: column.align === "end", children: column.cell(item) }, column.key)),
-            renderActions ? /* @__PURE__ */ jsx(TableCell, { alignRight: true, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2", children: renderActions(item) }) }) : null
-          ]
-        },
-        rowKey(item)
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsx("ul", { "aria-label": caption, className: "m-0 flex list-none flex-col gap-density p-0 md:hidden", children: items.map((item) => /* @__PURE__ */ jsxs(
-      "li",
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        "data-row-key": rowKey(item),
         className: cn(
-          "flex min-w-0 flex-col gap-3 rounded-card border-card p-card shadow-card surface-card",
-          rowClassName?.(item)
+          "hidden rounded-card border-card shadow-card surface-card md:block",
+          classNames?.tableWrapper
         ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 font-semibold text-[15px] text-ink [overflow-wrap:anywhere]", children: primary?.cell(item) }),
-          details.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "m-0 flex flex-col gap-2", children: details.map((column) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [
-            /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-ink-3 text-meta", children: column.header }),
-            /* @__PURE__ */ jsx("dd", { className: "m-0 min-w-0 text-right text-body text-ink [overflow-wrap:anywhere]", children: column.cell(item) })
-          ] }, column.key)) }) : null,
-          renderActions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: renderActions(item) }) : null
-        ]
-      },
-      rowKey(item)
-    )) })
+        children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
+            columns.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { scope: "col", alignRight: column.align === "end", children: column.header }, column.key)),
+            renderActions ? /* @__PURE__ */ jsx(TableHeaderCell, { scope: "col", alignRight: true, children: actionsHeader ?? strings.actions }) : null
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              "data-row-key": rowKey(item),
+              className: rowClassName?.(item),
+              children: [
+                columns.map((column) => /* @__PURE__ */ jsx(TableCell, { alignRight: column.align === "end", children: column.cell(item) }, column.key)),
+                renderActions ? /* @__PURE__ */ jsx(TableCell, { alignRight: true, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap justify-end gap-2", classNames?.actions), children: renderActions(item) }) }) : null
+              ]
+            },
+            rowKey(item)
+          )) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-label": caption,
+        className: cn("m-0 flex list-none flex-col gap-density p-0 md:hidden", classNames?.cards),
+        children: items.map((item) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-row-key": rowKey(item),
+            className: cn(
+              "flex min-w-0 flex-col gap-3 rounded-card border-card p-card shadow-card surface-card",
+              rowClassName?.(item),
+              classNames?.card
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "min-w-0 font-semibold text-fs-150 text-ink [overflow-wrap:anywhere]",
+                    classNames?.cardTitle
+                  ),
+                  children: primary?.cell(item)
+                }
+              ),
+              details.length > 0 ? /* @__PURE__ */ jsx("dl", { className: cn("m-0 flex flex-col gap-2", classNames?.cardDetails), children: details.map((column) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex items-baseline justify-between gap-4",
+                    classNames?.cardDetail
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("dt", { className: cn("shrink-0 text-ink-3 text-meta", classNames?.cardLabel), children: column.header }),
+                    /* @__PURE__ */ jsx(
+                      "dd",
+                      {
+                        className: cn(
+                          "m-0 min-w-0 text-right text-body text-ink [overflow-wrap:anywhere]",
+                          classNames?.cardValue
+                        ),
+                        children: column.cell(item)
+                      }
+                    )
+                  ]
+                },
+                column.key
+              )) }) : null,
+              renderActions ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", classNames?.actions), children: renderActions(item) }) : null
+            ]
+          },
+          rowKey(item)
+        ))
+      }
+    )
   ] });
 }
 export {

package/dist/containers/settings-layout/settings-layout.js

@@ -41,7 +41,7 @@ function SettingsLayoutNavItem({
       type,
       "aria-current": active ? "true" : void 0,
       className: cn(
-        "flex shrink-0 items-center gap-2.5 rounded-control px-2.5 py-[7px] font-medium text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink",
+        "flex shrink-0 items-center gap-2.5 rounded-control px-2.5 py-1.75 font-medium text-fs-130 text-ink-2 hover:bg-surface-2 hover:text-ink",
         active && "bg-accent-soft font-semibold text-accent-ink",
         className
       ),

package/dist/containers/settings-row/settings-row.d.ts

@@ -1,4 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type SettingsRowPart = "root" | "body" | "title" | "description" | "control";
 export interface SettingsRowProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
     title: ReactNode;
     description?: ReactNode;
@@ -6,5 +8,7 @@ export interface SettingsRowProps extends Omit<ComponentPropsWithoutRef<"div">,
     control?: ReactNode;
     /** Id for the title element, so the control can reference it with `aria-labelledby`. */
     titleId?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<SettingsRowPart>;
 }
-export declare function SettingsRow({ title, description, control, titleId, className, ...props }: SettingsRowProps): import("react").JSX.Element;
+export declare function SettingsRow({ title, description, control, titleId, className, classNames, ...props }: SettingsRowProps): import("react").JSX.Element;

package/dist/containers/settings-row/settings-row.js

@@ -6,22 +6,24 @@ function SettingsRow({
   control,
   titleId,
   className,
+  classNames,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex flex-wrap items-center justify-between gap-x-4 gap-y-2.5 border-t-divider px-4 py-[13px] first:border-t-0",
+        "flex flex-wrap items-center justify-between gap-x-4 gap-y-2.5 border-t-divider px-4 py-3.25 first:border-t-0",
+        classNames?.root,
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-[1_1_14rem] break-words", children: [
-          /* @__PURE__ */ jsx("p", { id: titleId, className: "font-semibold text-[13px]", children: title }),
-          description ? /* @__PURE__ */ jsx("p", { className: "max-w-[60ch] text-[12px] text-ink-3", children: description }) : null
+        /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-[1_1_14rem] break-words", classNames?.body), children: [
+          /* @__PURE__ */ jsx("p", { id: titleId, className: cn("font-semibold text-fs-130", classNames?.title), children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[60ch] text-fs-120 text-ink-3", classNames?.description), children: description }) : null
         ] }),
-        control ? /* @__PURE__ */ jsx("div", { className: "flex max-w-full shrink-0 items-center", children: control }) : null
+        control ? /* @__PURE__ */ jsx("div", { className: cn("flex max-w-full shrink-0 items-center", classNames?.control), children: control }) : null
       ]
     }
   );

package/dist/containers/table/table.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeftToLine, ArrowRightToLine, PinOff } from "lucide-react";
 import {
   createContext,
   useCallback,
@@ -10,6 +9,7 @@ import {
   useRef,
   useState
 } from "react";
+import { ArrowLeftToLine, ArrowRightToLine, PinOff } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   computePinOffsets,
@@ -139,7 +139,7 @@ function Table({
         "table",
         {
           ref: tableRef,
-          className: cn("w-full border-collapse text-[13px]", className),
+          className: cn("w-full border-collapse text-fs-130", className),
           ...props
         }
       )
@@ -228,7 +228,7 @@ function TableHeaderCell({
     "th",
     {
       className: cn(
-        "whitespace-nowrap border-b-divider px-4 py-2.5 text-left font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em] @max-sm/table:px-2.5",
+        "whitespace-nowrap border-b-divider px-4 py-2.5 text-left font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em] @max-sm/table:px-2.5",
         alignRight && "text-right",
         pinned.className,
         className
@@ -264,7 +264,7 @@ function TableCell({
     "td",
     {
       className: cn(
-        "px-4 py-[11px] align-middle @max-sm/table:px-2.5",
+        "px-4 py-2.75 align-middle @max-sm/table:px-2.5",
         alignRight && "text-right",
         pinned.className,
         className
@@ -303,7 +303,7 @@ function TableLinkRow({
               "a",
               {
                 href,
-                className: "block px-4 py-[11px] font-[650] text-ink no-underline before:absolute before:inset-0 before:content-[''] @max-sm/table:px-2.5",
+                className: "block px-4 py-2.75 font-[650] text-ink no-underline before:absolute before:inset-0 before:content-[''] @max-sm/table:px-2.5",
                 children: primary
               }
             )

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

@@ -1 +1 @@
-export { Timeline, type TimelineFeedItem, type TimelineFeedTone, type TimelineProps, } from "./timeline.js";
+export { Timeline, type TimelineFeedItem, type TimelineFeedTone, type TimelinePart, type TimelineProps, } from "./timeline.js";

package/dist/containers/timeline/timeline.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type TimelineFeedTone = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface TimelineFeedItem {
     id: string;
@@ -18,8 +19,11 @@ export interface TimelineFeedItem {
     /** Items with the same `group` sit under one heading (e.g. "Hoy"). */
     group?: string;
 }
+export type TimelinePart = "root" | "list" | "item" | "group" | "rail" | "marker" | "connector" | "content" | "header" | "title" | "time" | "actor" | "description";
 export interface TimelineProps extends Omit<ComponentPropsWithoutRef<"ol">, "children"> {
     items: TimelineFeedItem[];
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<TimelinePart>;
 }
 /** Vertical activity feed: marker rail on the left, grouped by day, newest first by convention. */
-export declare function Timeline({ items, className, ...props }: TimelineProps): import("react").JSX.Element;
+export declare function Timeline({ items, className, classNames, ...props }: TimelineProps): import("react").JSX.Element;

package/dist/containers/timeline/timeline.js

@@ -7,42 +7,93 @@ const markerClasses = {
   warning: "bg-warning-soft text-warning",
   danger: "bg-danger-soft text-danger"
 };
-function Timeline({ items, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("@container/timeline min-w-0", className), children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-col p-0", ...props, children: items.map((item, index) => {
+function Timeline({ items, className, classNames, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/timeline min-w-0", classNames?.root, className), children: /* @__PURE__ */ jsx("ol", { ...props, className: cn("m-0 flex list-none flex-col p-0", classNames?.list), children: items.map((item, index) => {
     const previous = items[index - 1];
     const last = index === items.length - 1;
     const tone = item.tone ?? "neutral";
-    return /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 flex-col", children: [
-      item.group && item.group !== previous?.group ? /* @__PURE__ */ jsx("h4", { className: "pb-density-sm text-ink-3 text-overline uppercase", children: item.group }) : null,
+    return /* @__PURE__ */ jsxs("li", { className: cn("flex min-w-0 flex-col", classNames?.item), children: [
+      item.group && item.group !== previous?.group ? /* @__PURE__ */ jsx(
+        "h4",
+        {
+          className: cn(
+            "pb-density-sm text-ink-3 text-overline uppercase",
+            classNames?.group
+          ),
+          children: item.group
+        }
+      ) : null,
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-density", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-col items-center", classNames?.rail), children: [
           /* @__PURE__ */ jsx(
             "span",
             {
               "aria-hidden": "true",
               className: cn(
                 "flex size-7 shrink-0 items-center justify-center rounded-badge [&_svg]:size-3.5",
-                markerClasses[tone]
+                markerClasses[tone],
+                classNames?.marker
               ),
               children: item.icon ?? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current" })
             }
           ),
-          last ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-px flex-1 bg-divider" })
+          last ? null : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("w-px flex-1 bg-divider", classNames?.connector)
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
               "flex min-w-0 flex-1 flex-col gap-1",
-              last ? "pb-0" : "pb-density-lg"
+              last ? "pb-0" : "pb-density-lg",
+              classNames?.content
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-density-sm", children: [
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-row-title text-ink", children: item.title }),
-                item.time ? /* @__PURE__ */ jsx("time", { dateTime: item.dateTime, className: "shrink-0 text-ink-3 text-meta", children: item.time }) : null
-              ] }),
-              item.actor ? /* @__PURE__ */ jsx("span", { className: "text-ink-3 text-meta", children: item.actor }) : null,
-              item.description ? /* @__PURE__ */ jsx("p", { className: "m-0 break-words text-body text-ink-2", children: item.description }) : null,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-wrap items-baseline gap-x-density-sm",
+                    classNames?.header
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 break-words text-row-title text-ink",
+                          classNames?.title
+                        ),
+                        children: item.title
+                      }
+                    ),
+                    item.time ? /* @__PURE__ */ jsx(
+                      "time",
+                      {
+                        dateTime: item.dateTime,
+                        className: cn("shrink-0 text-ink-3 text-meta", classNames?.time),
+                        children: item.time
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              item.actor ? /* @__PURE__ */ jsx("span", { className: cn("text-ink-3 text-meta", classNames?.actor), children: item.actor }) : null,
+              item.description ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "m-0 break-words text-body text-ink-2",
+                    classNames?.description
+                  ),
+                  children: item.description
+                }
+              ) : null,
               item.children
             ]
           }

package/dist/dashboards/layout.js

@@ -16,8 +16,8 @@ function CardGrid({ columns = 2, children }) {
 }
 function CardTitle({ title, subtitle }) {
   return /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-    /* @__PURE__ */ jsx("h2", { className: "m-0 break-words font-semibold text-[14px] text-ink", children: title }),
-    subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 break-words text-[12px] text-ink-3", children: subtitle }) : null
+    /* @__PURE__ */ jsx("h2", { className: "m-0 break-words font-semibold text-fs-140 text-ink", children: title }),
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 break-words text-fs-120 text-ink-3", children: subtitle }) : null
   ] });
 }
 function ChartCard({ title, subtitle, aside, height = 300, children }) {

package/dist/forms/accent-picker/accent-picker.d.ts

@@ -1,20 +1,23 @@
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { type ComponentPropsWithoutRef } from "react";
+import { type RadioGroupRootProps } from "../../atoms/radio-group/radio-group-primitive.js";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface AccentOption {
     value: string;
     label: string;
     /** Any CSS color value, typically a variable such as `var(--accent)`. */
     swatch: string;
 }
-export interface AccentPickerProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, "value" | "defaultValue" | "onValueChange"> {
+export type AccentPickerPart = "root" | "option" | "swatch";
+export interface AccentPickerProps extends Omit<RadioGroupRootProps, "value" | "defaultValue" | "onValueChange"> {
     options: AccentOption[];
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<AccentPickerPart>;
 }
 /**
  * Exclusive swatch picker. Controlled or uncontrolled; the root exposes
  * `data-accent` with the active option so consumers can read it. Applying the
  * value to the document is the consumer's responsibility.
  */
-export declare function AccentPicker({ options, value, defaultValue, onValueChange, className, ...props }: AccentPickerProps): import("react").JSX.Element;
+export declare function AccentPicker({ options, value, defaultValue, onValueChange, className, classNames, ...props }: AccentPickerProps): import("react").JSX.Element;

package/dist/forms/accent-picker/accent-picker.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { useState } from "react";
+import {
+  RadioGroupItem,
+  RadioGroupRoot
+} from "../../atoms/radio-group/radio-group-primitive.js";
 import { cn } from "../../utils/cn.js";
 function AccentPicker({
   options,
@@ -9,12 +12,13 @@ function AccentPicker({
   defaultValue,
   onValueChange,
   className,
+  classNames,
   ...props
 }) {
   const [internal, setInternal] = useState(() => defaultValue ?? options[0]?.value);
   const current = value ?? internal;
   return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
+    RadioGroupRoot,
     {
       "data-accent": current,
       value: current,
@@ -22,19 +26,22 @@ function AccentPicker({
         setInternal(next);
         onValueChange?.(next);
       },
-      className: cn("flex flex-wrap gap-2", className),
+      className: cn("flex flex-wrap gap-2", classNames?.root, className),
       ...props,
       children: options.map((option) => /* @__PURE__ */ jsxs(
-        RadioGroupPrimitive.Item,
+        RadioGroupItem,
         {
           value: option.value,
-          className: "flex items-center gap-2 rounded-control border-divider px-2.5 py-1.75 font-semibold text-chip-text text-ink data-[state=checked]:border-accent-ink data-[state=checked]:shadow-selected",
+          className: cn(
+            "flex items-center gap-2 rounded-control border-divider px-2.5 py-1.75 font-semibold text-chip-text text-ink data-[state=checked]:border-accent-ink data-[state=checked]:shadow-selected",
+            classNames?.option
+          ),
           children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 "aria-hidden": "true",
-                className: "size-3.5 shrink-0 rounded-xs",
+                className: cn("size-3.5 shrink-0 rounded-xs", classNames?.swatch),
                 style: { background: option.swatch }
               }
             ),

package/dist/forms/accent-picker/index.d.ts

@@ -1 +1 @@
-export { type AccentOption, AccentPicker, type AccentPickerProps, } from "./accent-picker.js";
+export { type AccentOption, AccentPicker, type AccentPickerPart, type AccentPickerProps, } from "./accent-picker.js";

package/dist/forms/checkbox-button-group/checkbox-button-group.d.ts

@@ -1,5 +1,7 @@
-import { type ButtonOption } from "../internal/button-option.js";
+import type { ClassNames } from "../../utils/class-names.js";
+import { type ButtonOption, type ButtonOptionPart } from "../internal/button-option.js";
 export type CheckboxButtonOption = ButtonOption;
+export type CheckboxButtonGroupPart = "root" | ButtonOptionPart;
 export interface CheckboxButtonGroupProps {
     options: CheckboxButtonOption[];
     value?: string[];
@@ -11,6 +13,8 @@ export interface CheckboxButtonGroupProps {
     "aria-label"?: string;
     "aria-labelledby"?: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<CheckboxButtonGroupPart>;
 }
 /** Multi-select where each option is a button-like card; native checkboxes underneath. */
-export declare function CheckboxButtonGroup({ options, value: valueProp, defaultValue, onValueChange, name, disabled, className, ...aria }: CheckboxButtonGroupProps): import("react").JSX.Element;
+export declare function CheckboxButtonGroup({ options, value: valueProp, defaultValue, onValueChange, name, disabled, className, classNames, ...aria }: CheckboxButtonGroupProps): import("react").JSX.Element;

package/dist/forms/checkbox-button-group/checkbox-button-group.js

@@ -2,7 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
-import { OptionShell, optionGridClass } from "../internal/button-option.js";
+import {
+  OptionShell,
+  optionGridClass
+} from "../internal/button-option.js";
 function CheckboxButtonGroup({
   options,
   value: valueProp,
@@ -11,6 +14,7 @@ function CheckboxButtonGroup({
   name,
   disabled,
   className,
+  classNames,
   ...aria
 }) {
   const [inner, setInner] = useState(defaultValue);
@@ -23,12 +27,18 @@ function CheckboxButtonGroup({
   return /* @__PURE__ */ jsx(
     "fieldset",
     {
-      className: cn("@container/options m-0 min-w-0 border-0 p-0", optionGridClass, className),
+      className: cn(
+        "@container/options m-0 min-w-0 border-0 p-0",
+        optionGridClass,
+        classNames?.root,
+        className
+      ),
       ...aria,
       children: options.map((option) => /* @__PURE__ */ jsx(
         OptionShell,
         {
           option,
+          classNames,
           input: /* @__PURE__ */ jsx(
             "input",
             {

package/dist/forms/checkbox-button-group/index.d.ts

@@ -1 +1 @@
-export { CheckboxButtonGroup, type CheckboxButtonGroupProps, type CheckboxButtonOption, } from "./checkbox-button-group.js";
+export { CheckboxButtonGroup, type CheckboxButtonGroupPart, type CheckboxButtonGroupProps, type CheckboxButtonOption, } from "./checkbox-button-group.js";

package/dist/forms/dropzone/dropzone.d.ts

@@ -1,8 +1,10 @@
+import type { ClassNames } from "../../utils/class-names.js";
 export type DropzoneRejectionReason = "type" | "size";
 export interface DropzoneRejection {
     file: File;
     reason: DropzoneRejectionReason;
 }
+export type DropzonePart = "root" | "icon" | "title" | "hint" | "browse";
 export interface DropzoneProps {
     onFiles: (files: File[]) => void;
     /** Called with the rejected files; the caller composes the user-facing message. */
@@ -15,5 +17,7 @@ export interface DropzoneProps {
     hint?: string;
     browseLabel: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<DropzonePart>;
 }
-export declare function Dropzone({ onFiles, onReject, acceptedTypes, maxSizeBytes, multiple, title, hint, browseLabel, className, }: DropzoneProps): import("react").JSX.Element;
+export declare function Dropzone({ onFiles, onReject, acceptedTypes, maxSizeBytes, multiple, title, hint, browseLabel, className, classNames, }: DropzoneProps): import("react").JSX.Element;

package/dist/forms/dropzone/dropzone.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Upload } from "lucide-react";
 import { useRef, useState } from "react";
+import { Upload } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 function isTypeAllowed(file, acceptedTypes) {
   if (!acceptedTypes || acceptedTypes.length === 0) return true;
@@ -32,7 +32,8 @@ function Dropzone({
   title,
   hint,
   browseLabel,
-  className
+  className,
+  classNames
 }) {
   const inputRef = useRef(null);
   const [dragging, setDragging] = useState(false);
@@ -59,6 +60,7 @@ function Dropzone({
         className: cn(
           "@container/dropzone flex min-w-0 flex-col items-center gap-1.5 rounded-tile border-[1.5px] border-line-control border-dashed bg-surface-2 p-3 text-center text-ink-2 @min-[360px]/dropzone:p-5.5",
           dragging && "border-accent-ink bg-accent-soft",
+          classNames?.root,
           className
         ),
         onDragOver: (event) => {
@@ -68,14 +70,32 @@ function Dropzone({
         onDragLeave: () => setDragging(false),
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx(Upload, { "aria-hidden": "true", className: "size-4.5 @min-[360px]/dropzone:size-5.5" }),
-          /* @__PURE__ */ jsx("b", { className: "max-w-full text-control [overflow-wrap:anywhere]", children: title }),
-          hint ? /* @__PURE__ */ jsx("span", { className: "max-w-full text-meta text-ink-3 [overflow-wrap:anywhere]", children: hint }) : null,
+          /* @__PURE__ */ jsx(
+            Upload,
+            {
+              "aria-hidden": "true",
+              className: cn("size-4.5 @min-[360px]/dropzone:size-5.5", classNames?.icon)
+            }
+          ),
+          /* @__PURE__ */ jsx("b", { className: cn("max-w-full text-control [overflow-wrap:anywhere]", classNames?.title), children: title }),
+          hint ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "max-w-full text-meta text-ink-3 [overflow-wrap:anywhere]",
+                classNames?.hint
+              ),
+              children: hint
+            }
+          ) : null,
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "mt-1 inline-flex h-control-sm max-w-full items-center justify-center rounded-input border-control bg-surface-control px-3 font-semibold text-chip-text hover:bg-surface-2",
+              className: cn(
+                "mt-1 inline-flex h-control-sm max-w-full items-center justify-center rounded-input border-control bg-surface-control px-3 font-semibold text-chip-text hover:bg-surface-2",
+                classNames?.browse
+              ),
               onClick: () => inputRef.current?.click(),
               children: browseLabel
             }

package/dist/forms/dropzone/index.d.ts

@@ -1 +1 @@
-export { Dropzone, type DropzoneProps, type DropzoneRejection, type DropzoneRejectionReason, } from "./dropzone.js";
+export { Dropzone, type DropzonePart, type DropzoneProps, type DropzoneRejection, type DropzoneRejectionReason, } from "./dropzone.js";