@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/atoms/switch/switch.js

@@ -1,19 +1,95 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { cn } from "../../utils/cn.js";
-function Switch({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SwitchPrimitive.Root,
-    {
-      className: cn(
-        "inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "relative block h-5 w-[34px] rounded-pill bg-line-strong transition-colors data-[state=checked]:bg-accent", children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "absolute top-[3px] left-[3px] block size-3.5 rounded-pill bg-surface transition-transform data-[state=checked]:translate-x-3.5" }) })
-    }
-  );
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { BubbleInput, useFormBubble, useFormReset } from "../../utils/form-bubble.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+function Switch({
+  className,
+  classNames,
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  required,
+  disabled,
+  name,
+  value = "on",
+  form,
+  onClick,
+  ref,
+  ...props
+}) {
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange
+  });
+  const bubble = useFormBubble(form);
+  const initialRef = useRef(checked);
+  useFormReset(bubble.control, form, () => setChecked(initialRef.current));
+  const composedRef = useComposedRefs(ref, bubble.setControl);
+  const state = checked ? "checked" : "unchecked";
+  const disabledAttr = disabled ? "" : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-required": required,
+        "data-state": state,
+        "data-disabled": disabledAttr,
+        disabled,
+        value,
+        ...props,
+        ref: composedRef,
+        className: cn(
+          "group inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
+          classNames?.root,
+          className
+        ),
+        onClick: composeHandlers(onClick, (event) => {
+          setChecked((prev) => !prev);
+          bubble.onControlClick(event);
+        }),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative block h-5 w-8.5 rounded-pill bg-line-strong transition-colors group-data-[state=checked]:bg-accent",
+              classNames?.track
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-state": state,
+                "data-disabled": disabledAttr,
+                className: cn(
+                  "absolute top-0.75 left-0.75 block size-3.5 rounded-pill bg-surface transition-transform data-[state=checked]:translate-x-3.5",
+                  classNames?.thumb
+                )
+              }
+            )
+          }
+        )
+      }
+    ),
+    bubble.isFormControl ? /* @__PURE__ */ jsx(
+      BubbleInput,
+      {
+        type: "checkbox",
+        checked,
+        bubble,
+        name,
+        value,
+        required,
+        disabled,
+        form
+      }
+    ) : null
+  ] });
 }
 export {
   Switch

package/dist/atoms/trend-chip/index.d.ts

@@ -1,2 +1,2 @@
 export { formatTrend, type TrendDirection, type TrendTone, trendDirection, trendTone, } from "./trend.js";
-export { TrendChip, type TrendChipProps } from "./trend-chip.js";
+export { TrendChip, type TrendChipPart, type TrendChipProps } from "./trend-chip.js";

package/dist/atoms/trend-chip/trend-chip.d.ts

@@ -1,4 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type TrendChipPart = "root" | "arrow" | "value" | "label";
 export interface TrendChipProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
     /** Change in percent, e.g. 12.5 for +12.5%. */
     value: number;
@@ -9,6 +11,8 @@ export interface TrendChipProps extends Omit<ComponentPropsWithoutRef<"span">, "
     /** Text after the number, e.g. "vs. semana pasada". */
     label?: string;
     locale?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<TrendChipPart>;
 }
 /** Compact change indicator: arrow, signed percent and a good/bad tone, never color alone. */
-export declare function TrendChip({ value, invert, epsilon, label, locale, className, ...props }: TrendChipProps): import("react").JSX.Element;
+export declare function TrendChip({ value, invert, epsilon, label, locale, className, classNames, ...props }: TrendChipProps): import("react").JSX.Element;

package/dist/atoms/trend-chip/trend-chip.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
+import { ArrowDownRight, ArrowRight, ArrowUpRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   formatTrend,
@@ -29,6 +29,7 @@ function TrendChip({
   label,
   locale,
   className,
+  classNames,
   ...props
 }) {
   const direction = trendDirection(value, epsilon);
@@ -41,14 +42,22 @@ function TrendChip({
       className: cn(
         "inline-flex h-6 max-w-full items-center gap-1 whitespace-nowrap rounded-badge px-2 font-[650] text-chip-text tabular-nums",
         toneClasses[tone],
+        classNames?.root,
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Arrow, { className: "size-3 shrink-0", "aria-hidden": "true", strokeWidth: 2.2 }),
+        /* @__PURE__ */ jsx(
+          Arrow,
+          {
+            className: cn("size-3 shrink-0", classNames?.arrow),
+            "aria-hidden": "true",
+            strokeWidth: 2.2
+          }
+        ),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${directionWords[direction]}, ${toneWords[tone]}: ` }),
-        /* @__PURE__ */ jsx("span", { children: text }),
-        label ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-normal opacity-80", children: label }) : null
+        /* @__PURE__ */ jsx("span", { className: classNames?.value, children: text }),
+        label ? /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate font-normal", classNames?.label), children: label }) : null
       ]
     }
   );

package/dist/brand/logo-forge.js

@@ -99,7 +99,7 @@ function Field({
     children
   ] });
 }
-const choiceBase = "inline-flex h-control-sm cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-chip px-3 font-semibold text-[12.5px] pressable focus-visible:focus-ring";
+const choiceBase = "inline-flex h-control-sm cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-chip px-3 font-semibold text-fs-125 pressable focus-visible:focus-ring";
 function choiceClass(on) {
   return cn(
     choiceBase,

package/dist/calendar/day-chip/day-chip.d.ts

@@ -1,8 +1,15 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import type { CalendarMarker } from "../internal/types.js";
-export interface DayChipProps {
+/** Class map behind each marker `tone`; exported so apps can extend or reuse it. */
+export declare const dayChipToneClasses: Readonly<Record<NonNullable<CalendarMarker["tone"]>, string>>;
+export type DayChipPart = "root" | "subtitle";
+export interface DayChipProps extends Omit<ComponentPropsWithRef<"button">, "children" | "title" | "onClick"> {
     marker: CalendarMarker;
     onOpen?: (id: string) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<DayChipPart>;
 }
 /** Compact single-line chip for a day marker. */
-export declare function DayChip({ marker, onOpen, className }: DayChipProps): import("react").JSX.Element;
+export declare function DayChip({ marker, onOpen, className, classNames, ...props }: DayChipProps): import("react").JSX.Element;

package/dist/calendar/day-chip/day-chip.js

@@ -1,18 +1,20 @@
 import { jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-const TONE = {
-  danger: "bg-danger text-on-accent",
+const dayChipToneClasses = {
+  danger: "bg-danger text-surface",
   accent: "bg-accent-soft text-accent-ink shadow-inset-accent"
 };
-function DayChip({ marker, onOpen, className }) {
+function DayChip({ marker, onOpen, className, classNames, ...props }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick: onOpen ? () => onOpen(marker.id) : void 0,
+      ...props,
       className: cn(
         "block w-full truncate rounded-xs px-1.5 py-0.5 text-left text-chip-text",
-        TONE[marker.tone ?? "accent"],
+        dayChipToneClasses[marker.tone ?? "accent"],
+        classNames?.root,
         className
       ),
       children: [
@@ -21,7 +23,7 @@ function DayChip({ marker, onOpen, className }) {
           " "
         ] }) : null,
         marker.title,
-        marker.subtitle ? /* @__PURE__ */ jsxs("span", { className: "font-normal opacity-80", children: [
+        marker.subtitle ? /* @__PURE__ */ jsxs("span", { className: cn("font-normal", classNames?.subtitle), children: [
           " \xB7 ",
           marker.subtitle
         ] }) : null
@@ -30,5 +32,6 @@ function DayChip({ marker, onOpen, className }) {
   );
 }
 export {
-  DayChip
+  DayChip,
+  dayChipToneClasses
 };

package/dist/calendar/day-chip/index.d.ts

@@ -1,2 +1,2 @@
 export type { CalendarMarker } from "../internal/types.js";
-export { DayChip, type DayChipProps } from "./day-chip.js";
+export { DayChip, type DayChipPart, type DayChipProps, dayChipToneClasses } from "./day-chip.js";

package/dist/calendar/day-chip/index.js

@@ -1,4 +1,5 @@
-import { DayChip } from "./day-chip.js";
+import { DayChip, dayChipToneClasses } from "./day-chip.js";
 export {
-  DayChip
+  DayChip,
+  dayChipToneClasses
 };

package/dist/calendar/event-block/event-block.d.ts

@@ -1,9 +1,16 @@
-import type { CalendarEvent } from "../internal/types.js";
-export interface EventBlockProps {
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+import type { CalendarEvent, CalendarTone } from "../internal/types.js";
+/** Class map behind each event `tone`; exported so apps can extend or reuse it. */
+export declare const eventToneClasses: Readonly<Record<CalendarTone, string>>;
+export type EventBlockPart = "root" | "layout" | "time" | "body" | "title" | "subtitle" | "trailing";
+export interface EventBlockProps extends Omit<ComponentPropsWithRef<"button">, "children" | "title" | "onClick"> {
     event: CalendarEvent;
     /** "detailed": time range, title and subtitle. "compact": one "time title" line. */
     variant?: "detailed" | "compact";
     onOpen?: (id: string) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<EventBlockPart>;
 }
-export declare function EventBlock({ event, variant, onOpen, className }: EventBlockProps): import("react").JSX.Element;
+export declare function EventBlock({ event, variant, onOpen, className, classNames, ...props }: EventBlockProps): import("react").JSX.Element;

package/dist/calendar/event-block/event-block.js

@@ -1,14 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-const TONE = {
+const eventToneClasses = {
   accent: "bg-accent-soft border-accent-line",
   neutral: "bg-surface-2 border-line-strong",
   success: "bg-success-soft border-success/35",
   danger: "bg-danger-soft border-danger/40",
   warning: "bg-warning-soft border-warning/40"
 };
-function EventBlock({ event, variant = "detailed", onOpen, className }) {
-  const tone = TONE[event.tone ?? "accent"];
+function EventBlock({
+  event,
+  variant = "detailed",
+  onOpen,
+  className,
+  classNames,
+  ...props
+}) {
+  const tone = eventToneClasses[event.tone ?? "accent"];
   const range = event.end ? `${event.start}\u2013${event.end}` : event.start;
   const srLabel = event.srLabel ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
     event.srLabel,
@@ -21,9 +28,11 @@ function EventBlock({ event, variant = "detailed", onOpen, className }) {
       {
         type: "button",
         onClick: handleClick,
+        ...props,
         className: cn(
           "block w-full truncate rounded-xs border px-1.5 py-0.5 text-left text-chip-text text-ink",
           tone,
+          classNames?.root,
           className
         ),
         children: [
@@ -40,9 +49,11 @@ function EventBlock({ event, variant = "detailed", onOpen, className }) {
     {
       type: "button",
       onClick: handleClick,
+      ...props,
       className: cn(
         "@container/event block w-full min-w-0 overflow-hidden rounded-event border px-2.5 py-2 text-left",
         tone,
+        classNames?.root,
         className
       ),
       children: [
@@ -53,15 +64,16 @@ function EventBlock({ event, variant = "detailed", onOpen, className }) {
             className: cn(
               "grid h-full grid-cols-[96px_minmax(0,1fr)_auto] items-center gap-x-2.5",
               "@max-[28rem]/event:grid-cols-[70px_minmax(0,1fr)]",
-              "@max-[9rem]/event:grid-cols-[minmax(0,1fr)] @max-[9rem]/event:gap-y-0.5"
+              "@max-[9rem]/event:grid-cols-[minmax(0,1fr)] @max-[9rem]/event:gap-y-0.5",
+              classNames?.layout
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap font-mono text-meta text-ink-2", children: range }),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-row-title text-ink", children: event.title }),
-                event.subtitle ? /* @__PURE__ */ jsx("span", { className: "block truncate text-meta text-ink-3", children: event.subtitle }) : null
+              /* @__PURE__ */ jsx("span", { className: cn("whitespace-nowrap font-mono text-meta text-ink-2", classNames?.time), children: range }),
+              /* @__PURE__ */ jsxs("span", { className: cn("min-w-0", classNames?.body), children: [
+                /* @__PURE__ */ jsx("span", { className: cn("block truncate text-row-title text-ink", classNames?.title), children: event.title }),
+                event.subtitle ? /* @__PURE__ */ jsx("span", { className: cn("block truncate text-meta text-ink-3", classNames?.subtitle), children: event.subtitle }) : null
               ] }),
-              event.trailing ? /* @__PURE__ */ jsx("span", { className: "@max-[28rem]/event:hidden", children: event.trailing }) : null
+              event.trailing ? /* @__PURE__ */ jsx("span", { className: cn("@max-[28rem]/event:hidden", classNames?.trailing), children: event.trailing }) : null
             ]
           }
         )
@@ -70,5 +82,6 @@ function EventBlock({ event, variant = "detailed", onOpen, className }) {
   );
 }
 export {
-  EventBlock
+  EventBlock,
+  eventToneClasses
 };

package/dist/calendar/event-block/index.d.ts

@@ -1,2 +1,2 @@
 export type { CalendarEvent, CalendarTone } from "../internal/types.js";
-export { EventBlock, type EventBlockProps } from "./event-block.js";
+export { EventBlock, type EventBlockPart, type EventBlockProps, eventToneClasses, } from "./event-block.js";

package/dist/calendar/event-block/index.js

@@ -1,4 +1,8 @@
-import { EventBlock } from "./event-block.js";
+import {
+  EventBlock,
+  eventToneClasses
+} from "./event-block.js";
 export {
-  EventBlock
+  EventBlock,
+  eventToneClasses
 };

package/dist/calendar/month-view/index.d.ts

@@ -1 +1 @@
-export { MonthView, type MonthViewProps } from "./month-view.js";
+export { MonthView, type MonthViewPart, type MonthViewProps } from "./month-view.js";

package/dist/calendar/month-view/month-view.d.ts

@@ -1,5 +1,7 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import { type WeekStart } from "../internal/date-utils.js";
 import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
+export type MonthViewPart = "root" | "weekday" | "day" | "dayNumber" | "items" | "more" | "dots" | "dot";
 export interface MonthViewProps {
     /** Any "YYYY-MM-DD" date inside the month to show. */
     month: string;
@@ -20,5 +22,7 @@ export interface MonthViewProps {
     /** Called with the day's date when the overflow button is clicked. */
     onSelectDate?: (date: string) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<MonthViewPart>;
 }
-export declare function MonthView({ month, today, events, markers, shadedDates, locale, weekStartsOn, formatMore, onOpenEvent, onOpenMarker, onSelectDate, className, }: MonthViewProps): import("react").JSX.Element;
+export declare function MonthView({ month, today, events, markers, shadedDates, locale, weekStartsOn, formatMore, onOpenEvent, onOpenMarker, onSelectDate, className, classNames, }: MonthViewProps): import("react").JSX.Element;

package/dist/calendar/month-view/month-view.js

@@ -24,16 +24,20 @@ function MonthView({
   onOpenEvent,
   onOpenMarker,
   onSelectDate,
-  className
+  className,
+  classNames
 }) {
   const monthIndex = parseDate(month).getUTCMonth();
   const days = monthGrid(month, weekStartsOn);
   const shaded = new Set(shadedDates);
-  return /* @__PURE__ */ jsxs("div", { className: cn("@container/month grid min-w-0 grid-cols-7", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("@container/month grid min-w-0 grid-cols-7", classNames?.root, className), children: [
     days.slice(0, 7).map((date) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: "min-w-0 truncate border-b-divider px-2.5 py-2 text-overline text-ink-3 @max-[40rem]/month:px-0.5 @max-[40rem]/month:text-center",
+        className: cn(
+          "min-w-0 truncate border-b-divider px-2.5 py-2 text-overline text-ink-3 @max-[40rem]/month:px-0.5 @max-[40rem]/month:text-center",
+          classNames?.weekday
+        ),
         children: formatWeekday(date, locale)
       },
       date
@@ -58,7 +62,8 @@ function MonthView({
           className: cn(
             "flex min-h-30 min-w-0 flex-col gap-0.75 border-b-divider border-l-divider p-1.5 @max-[40rem]/month:min-h-16 @max-[40rem]/month:items-center @max-[40rem]/month:p-0.5",
             shaded.has(date) && SHADED_DAY_CLASS,
-            outside && "opacity-45"
+            outside && "bg-surface-2/50",
+            classNames?.day
           ),
           children: [
             /* @__PURE__ */ jsx(
@@ -66,38 +71,59 @@ function MonthView({
               {
                 className: cn(
                   "grid h-5.5 min-w-6 place-items-center self-start rounded-xs font-mono text-chip-text text-ink-2",
-                  isToday && "bg-accent text-on-accent"
+                  isToday && "bg-accent text-on-accent",
+                  outside && "text-ink-3",
+                  classNames?.dayNumber
                 ),
                 children: parsed.getUTCDate()
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.75 @max-[40rem]/month:hidden", children: [
-              visible.map(
-                ({ kind, item }) => kind === "marker" ? /* @__PURE__ */ jsx(DayChip, { marker: item, onOpen: onOpenMarker }, item.id) : /* @__PURE__ */ jsx(EventBlock, { event: item, variant: "compact", onOpen: onOpenEvent }, item.id)
-              ),
-              hidden > 0 ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onSelectDate ? () => onSelectDate(date) : void 0,
-                  className: "px-1.5 text-left text-chip-text text-ink-3",
-                  children: formatMore(hidden)
-                }
-              ) : null
-            ] }),
-            items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "hidden flex-wrap justify-center gap-0.5 @max-[40rem]/month:flex", children: items.map(({ kind, item }) => /* @__PURE__ */ jsx(
-              "button",
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                type: "button",
-                "aria-label": item.title,
-                onClick: kind === "marker" ? onOpenMarker ? () => onOpenMarker(item.id) : void 0 : onOpenEvent ? () => onOpenEvent(item.id) : void 0,
                 className: cn(
-                  "size-2 rounded-avatar p-0",
-                  kind === "marker" ? item.tone === "danger" ? DOT_TONE.danger : DOT_TONE.accent : DOT_TONE[item.tone ?? "accent"]
-                )
-              },
-              item.id
-            )) }) : null
+                  "flex min-w-0 flex-col gap-0.75 @max-[40rem]/month:hidden",
+                  classNames?.items
+                ),
+                children: [
+                  visible.map(
+                    ({ kind, item }) => kind === "marker" ? /* @__PURE__ */ jsx(DayChip, { marker: item, onOpen: onOpenMarker }, item.id) : /* @__PURE__ */ jsx(EventBlock, { event: item, variant: "compact", onOpen: onOpenEvent }, item.id)
+                  ),
+                  hidden > 0 ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onSelectDate ? () => onSelectDate(date) : void 0,
+                      className: cn("px-1.5 text-left text-chip-text text-ink-3", classNames?.more),
+                      children: formatMore(hidden)
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            items.length > 0 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "hidden flex-wrap justify-center gap-0.5 @max-[40rem]/month:flex",
+                  classNames?.dots
+                ),
+                children: items.map(({ kind, item }) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": item.title,
+                    onClick: kind === "marker" ? onOpenMarker ? () => onOpenMarker(item.id) : void 0 : onOpenEvent ? () => onOpenEvent(item.id) : void 0,
+                    className: cn(
+                      "size-2 rounded-avatar p-0",
+                      kind === "marker" ? item.tone === "danger" ? DOT_TONE.danger : DOT_TONE.accent : DOT_TONE[item.tone ?? "accent"],
+                      classNames?.dot
+                    )
+                  },
+                  item.id
+                ))
+              }
+            ) : null
           ]
         },
         date

package/dist/calendar/timeline-view/index.d.ts

@@ -1 +1 @@
-export { TimelineView, type TimelineViewProps } from "./timeline-view.js";
+export { TimelineView, type TimelineViewPart, type TimelineViewProps } from "./timeline-view.js";

package/dist/calendar/timeline-view/timeline-view.d.ts

@@ -1,4 +1,6 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
+export type TimelineViewPart = "root" | "day" | "heading" | "weekday" | "date" | "items" | "empty";
 export interface TimelineViewProps {
     /** "YYYY-MM-DD" date highlighted as today; the view never computes it. */
     today: string;
@@ -15,5 +17,7 @@ export interface TimelineViewProps {
     onOpenEvent?: (id: string) => void;
     onOpenMarker?: (id: string) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<TimelineViewPart>;
 }
-export declare function TimelineView({ today, events, markers, hiddenDates, locale, todayLabel, emptyLabel, onOpenEvent, onOpenMarker, className, }: TimelineViewProps): import("react").JSX.Element;
+export declare function TimelineView({ today, events, markers, hiddenDates, locale, todayLabel, emptyLabel, onOpenEvent, onOpenMarker, className, classNames, }: TimelineViewProps): import("react").JSX.Element;

package/dist/calendar/timeline-view/timeline-view.js

@@ -22,10 +22,11 @@ function TimelineView({
   emptyLabel,
   onOpenEvent,
   onOpenMarker,
-  className
+  className,
+  classNames
 }) {
   const dates = visibleDates(today, events, markers, hiddenDates);
-  return /* @__PURE__ */ jsx("div", { className: cn("@container/timeline flex min-w-0 flex-col", className), children: dates.map((date) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/timeline flex min-w-0 flex-col", classNames?.root, className), children: dates.map((date) => {
     const isToday = date === today;
     const dayMarkers = markers.filter((marker) => marker.date === date);
     const dayEvents = events.filter((event) => event.date === date).sort((a, b) => a.start.localeCompare(b.start));
@@ -39,16 +40,29 @@ function TimelineView({
           "aria-label": isToday ? `${label} \xB7 ${todayLabel}` : label,
           "data-date": date,
           "data-today": isToday || void 0,
-          className: "grid grid-cols-[8rem_minmax(0,1fr)] gap-3.5 border-t-divider px-4 py-3.5 first:border-t-0 @max-[34rem]/timeline:grid-cols-[minmax(0,1fr)] @max-[34rem]/timeline:gap-y-2",
+          className: cn(
+            "grid grid-cols-[8rem_minmax(0,1fr)] gap-3.5 border-t-divider px-4 py-3.5 first:border-t-0 @max-[34rem]/timeline:grid-cols-[minmax(0,1fr)] @max-[34rem]/timeline:gap-y-2",
+            classNames?.day
+          ),
           children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("b", { className: cn("block text-row-title", isToday && "text-accent-ink"), children: label }),
-              /* @__PURE__ */ jsxs("span", { className: "text-meta text-ink-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: classNames?.heading, children: [
+              /* @__PURE__ */ jsx(
+                "b",
+                {
+                  className: cn(
+                    "block text-row-title",
+                    isToday && "text-accent-ink",
+                    classNames?.weekday
+                  ),
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: cn("text-meta text-ink-3", classNames?.date), children: [
                 formatMonthShort(date, locale),
                 isToday ? ` \xB7 ${todayLabel}` : ""
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-1.5", children: dayMarkers.length === 0 && dayEvents.length === 0 ? /* @__PURE__ */ jsx("span", { className: "py-2 text-meta text-ink-3", children: emptyLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-col gap-1.5", classNames?.items), children: dayMarkers.length === 0 && dayEvents.length === 0 ? /* @__PURE__ */ jsx("span", { className: cn("py-2 text-meta text-ink-3", classNames?.empty), children: emptyLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               dayMarkers.map((marker) => /* @__PURE__ */ jsx(DayChip, { marker, onOpen: onOpenMarker }, marker.id)),
               dayEvents.map((event) => /* @__PURE__ */ jsx(EventBlock, { event, onOpen: onOpenEvent }, event.id))
             ] }) })

package/dist/calendar/week-view/index.d.ts

@@ -1 +1 @@
-export { WeekView, type WeekViewProps } from "./week-view.js";
+export { WeekView, type WeekViewPart, type WeekViewProps } from "./week-view.js";

package/dist/calendar/week-view/week-view.d.ts

@@ -1,5 +1,7 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import { type WeekStart } from "../internal/date-utils.js";
 import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
+export type WeekViewPart = "root" | "scroll" | "header" | "dayHeader" | "allDayRow" | "allDayLabel" | "allDayCell" | "hourLabel" | "column" | "workingHours" | "event" | "nowLine";
 export interface WeekViewProps {
     /** Any "YYYY-MM-DD" date inside the week to show. */
     week: string;
@@ -22,5 +24,7 @@ export interface WeekViewProps {
     onOpenEvent?: (id: string) => void;
     onOpenMarker?: (id: string) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<WeekViewPart>;
 }
-export declare function WeekView({ week, today, currentTime, events, markers, shadedDates, workingHours, locale, weekStartsOn, allDayLabel, onOpenEvent, onOpenMarker, className, }: WeekViewProps): import("react").JSX.Element;
+export declare function WeekView({ week, today, currentTime, events, markers, shadedDates, workingHours, locale, weekStartsOn, allDayLabel, onOpenEvent, onOpenMarker, className, classNames, }: WeekViewProps): import("react").JSX.Element;