@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/Calendar/TimedEvent.css

@@ -0,0 +1,309 @@
+:root {
+  --calendar-gap: var(--space-3);
+  --calendar-header-gap: var(--space-3);
+  --calendar-title-font-size: var(--font-size-lg);
+  --calendar-title-font-weight: var(--font-weight-semibold);
+  --calendar-title-fg: var(--color-fg);
+  --calendar-border-color: var(--color-border);
+  --calendar-radius: var(--radius-md);
+  --calendar-bg: var(--color-bg);
+  --calendar-bg-subtle: var(--color-bg-subtle);
+  --calendar-bg-muted: var(--color-bg-muted);
+  --calendar-accent: var(--color-accent);
+  --calendar-accent-bg-subtle: var(--color-accent-bg-subtle);
+  --calendar-fg: var(--color-fg);
+  --calendar-fg-muted: var(--color-fg-muted);
+  --calendar-weekday-padding: var(--space-2);
+  --calendar-weekday-font-size: var(--font-size-xs);
+  --calendar-weekday-font-weight: var(--font-weight-medium);
+  --calendar-weekday-fg: var(--color-fg-muted);
+  --calendar-weekday-letter-spacing: var(--letter-spacing-caps);
+  --calendar-day-cell-min-height: var(--size-calendar-day-cell-min-height);
+  --calendar-day-cell-today-ring-width: var(--border-width-emphasis);
+  --calendar-day-cell-padding: var(--space-2);
+  --calendar-day-cell-opacity-other-month: var(--opacity-disabled);
+  --calendar-day-cell-number-font-size: var(--font-size-sm);
+  --calendar-day-cell-number-font-weight: var(--font-weight-medium);
+  --calendar-day-cell-number-fg: var(--color-fg);
+  --calendar-day-cell-today-fg: var(--color-accent);
+  --calendar-day-cell-today-font-weight: var(--font-weight-bold);
+  --calendar-bar-slot-padding: var(--space-1);
+  --calendar-more-chip-wrapper-padding: var(--space-1) var(--space-2);
+  --calendar-more-chip-padding: var(--space-1) var(--space-2);
+  --calendar-more-chip-radius: var(--radius-sm);
+  --calendar-more-chip-font-size: var(--font-size-xs);
+  --calendar-more-chip-fg: var(--color-fg-muted);
+  --calendar-more-chip-bg-hover: var(--color-bg-subtle);
+  --calendar-more-chip-fg-hover: var(--color-fg);
+  --calendar-event-chip-gap: var(--space-1);
+  --calendar-event-chip-padding-x: var(--space-2);
+  --calendar-event-chip-height: var(--space-5);
+  --calendar-event-chip-radius: var(--radius-sm);
+  --calendar-event-chip-font-size: var(--font-size-xs);
+  --calendar-event-chip-font-weight: var(--font-weight-medium);
+  --calendar-event-chip-transition-filter: var(--transition-fast);
+  --calendar-event-chip-transition-bg: var(--transition-fast);
+  --calendar-event-chip-time-opacity: var(--opacity-muted);
+  --calendar-event-chip-bg-neutral: var(--color-bg-subtle);
+  --calendar-event-chip-fg-neutral: var(--color-fg);
+  --calendar-event-chip-border-color-neutral: var(--color-border-strong);
+  --calendar-event-chip-bg-accent: var(--color-accent-bg-subtle);
+  --calendar-event-chip-fg-accent: var(--color-accent);
+  --calendar-event-chip-bg-success: var(--color-success-bg-subtle);
+  --calendar-event-chip-fg-success: var(--color-success);
+  --calendar-event-chip-bg-warning: var(--color-warning-bg-subtle);
+  --calendar-event-chip-fg-warning: var(--color-warning-strong);
+  --calendar-event-chip-bg-danger: var(--color-danger-bg-subtle);
+  --calendar-event-chip-fg-danger: var(--color-danger);
+  --calendar-event-chip-all-day-bg-neutral: var(--color-fg);
+  --calendar-event-chip-all-day-fg-neutral: var(--color-bg);
+  --calendar-event-chip-all-day-bg-accent: var(--color-accent);
+  --calendar-event-chip-all-day-fg-accent: var(--color-accent-fg);
+  --calendar-event-chip-all-day-bg-success: var(--color-success);
+  --calendar-event-chip-all-day-fg-success: var(--color-success-fg);
+  --calendar-event-chip-all-day-bg-warning: var(--color-warning);
+  --calendar-event-chip-all-day-fg-warning: var(--color-warning-fg);
+  --calendar-event-chip-all-day-bg-danger: var(--color-danger);
+  --calendar-event-chip-all-day-fg-danger: var(--color-danger-fg);
+  --calendar-event-color-stripe-width: var(--border-width-strong);
+  --calendar-event-stripe-accent: var(--color-accent);
+  --calendar-event-stripe-success: var(--color-success);
+  --calendar-event-stripe-warning: var(--color-warning-strong);
+  --calendar-event-stripe-danger: var(--color-danger);
+  --calendar-event-tooltip-gap: var(--space-1);
+  --calendar-event-tooltip-time-font-size: var(--font-size-xs);
+  --calendar-event-tooltip-time-font-weight: var(--font-weight-regular);
+  --calendar-event-tooltip-time-fg: var(--color-bg-subtle);
+  --calendar-event-tooltip-title-font-size: var(--font-size-sm);
+  --calendar-event-tooltip-title-font-weight: var(--font-weight-medium);
+  --calendar-event-tooltip-title-fg: var(--color-bg);
+  --calendar-timed-event-gap: var(--space-1);
+  --calendar-timed-event-padding: var(--space-1) var(--space-2);
+  --calendar-timed-event-radius: var(--radius-sm);
+  --calendar-timed-event-font-size: var(--font-size-xs);
+  --calendar-timed-event-font-weight: var(--font-weight-medium);
+  --calendar-timed-event-transition-position: var(--transition-base);
+  --calendar-timed-event-transition-filter: var(--transition-fast);
+  --calendar-timed-event-transition-bg: var(--transition-fast);
+  --calendar-timed-event-time-font-size: var(--font-size-xs);
+  --calendar-timed-event-time-font-weight: var(--font-weight-regular);
+  --calendar-timed-event-time-opacity: var(--opacity-muted);
+  --calendar-timed-event-bg-neutral: var(--color-bg-subtle);
+  --calendar-timed-event-fg-neutral: var(--color-fg);
+  --calendar-timed-event-border-color-neutral: var(--color-border-strong);
+  --calendar-timed-event-bg-accent: var(--color-accent-bg-subtle);
+  --calendar-timed-event-fg-accent: var(--color-accent);
+  --calendar-timed-event-bg-success: var(--color-success-bg-subtle);
+  --calendar-timed-event-fg-success: var(--color-success);
+  --calendar-timed-event-bg-warning: var(--color-warning-bg-subtle);
+  --calendar-timed-event-fg-warning: var(--color-warning-strong);
+  --calendar-timed-event-bg-danger: var(--color-danger-bg-subtle);
+  --calendar-timed-event-fg-danger: var(--color-danger);
+  --calendar-hour-grid-bg: var(--color-bg);
+  --calendar-hour-corner-bg: var(--color-bg-subtle);
+  --calendar-hour-column-header-padding: var(--space-2);
+  --calendar-hour-column-header-bg: var(--color-bg-subtle);
+  --calendar-hour-column-header-font-size: var(--font-size-xs);
+  --calendar-hour-column-header-font-weight: var(--font-weight-medium);
+  --calendar-hour-column-header-fg: var(--color-fg);
+  --calendar-hour-column-header-bg-weekend: var(--color-bg-muted);
+  --calendar-hour-column-header-bg-today: var(--color-accent-bg-subtle);
+  --calendar-hour-column-header-fg-today: var(--color-accent);
+  --calendar-hour-label-padding: var(--space-1) var(--space-2);
+  --calendar-hour-label-font-size: var(--font-size-xs);
+  --calendar-hour-label-fg: var(--color-fg-muted);
+  --calendar-hour-label-bg: var(--color-bg-subtle);
+  --calendar-hour-day-column-bg-weekend: var(--color-bg-muted);
+  --calendar-hour-separator-bg: var(--color-border);
+  --calendar-background-band-bg-unavailable: var(--color-bg-muted);
+  --calendar-background-band-bg-available: var(--color-success-bg-subtle);
+  --calendar-background-band-opacity: var(--opacity-muted);
+  --calendar-drag-block-opacity: var(--opacity-muted);
+  --calendar-drag-block-shadow: var(--shadow-lg);
+  --calendar-drag-invalid-outline: var(--color-danger);
+  --calendar-drag-invalid-outline-width: var(--border-width-emphasis);
+  --calendar-resize-handle-height: var(--space-2);
+  --calendar-resize-handle-bg-hover: var(--color-border-strong);
+  --calendar-now-line-height: var(--border-width-emphasis);
+  --calendar-now-line-bg: var(--color-danger);
+  --calendar-all-day-band-gap: var(--space-1);
+  --calendar-all-day-band-padding-y: var(--space-1);
+  --calendar-all-day-band-bg: var(--color-bg);
+  --calendar-all-day-band-bar-slot-padding-x: var(--space-1);
+  --calendar-agenda-padding-y: var(--space-3);
+  --calendar-agenda-empty-padding: var(--space-6);
+  --calendar-agenda-empty-font-size: var(--font-size-sm);
+  --calendar-agenda-empty-fg: var(--color-fg-muted);
+  --calendar-agenda-day-group-gap: var(--space-2);
+  --calendar-agenda-day-group-padding-bottom: var(--space-2);
+  --calendar-agenda-day-header-padding: var(--space-2) var(--space-3);
+  --calendar-agenda-day-header-bg: var(--color-bg-subtle);
+  --calendar-agenda-day-header-font-size: var(--font-size-md);
+  --calendar-agenda-day-header-font-weight: var(--font-weight-medium);
+  --calendar-agenda-day-header-fg: var(--color-fg);
+  --calendar-agenda-day-header-bg-today: var(--color-accent-bg-subtle);
+  --calendar-agenda-day-header-border-today: var(--color-accent);
+  --calendar-agenda-day-header-fg-today: var(--color-accent);
+  --calendar-agenda-rows-gap: var(--space-1);
+  --calendar-agenda-rows-padding-left: var(--space-3);
+  --calendar-agenda-row-gutter-width: var(--size-calendar-agenda-gutter);
+  --calendar-agenda-row-gap: var(--space-2);
+  --calendar-agenda-row-padding: var(--space-2) var(--space-3);
+  --calendar-agenda-row-radius: var(--radius-sm);
+  --calendar-agenda-row-font-size: var(--font-size-sm);
+  --calendar-agenda-row-fg: var(--color-fg);
+  --calendar-agenda-row-bg-hover: var(--color-bg-subtle);
+  --calendar-agenda-row-transition-bg: var(--transition-fast);
+  --calendar-agenda-time-font-size: var(--font-size-sm);
+  --calendar-agenda-time-fg: var(--color-fg-muted);
+  --calendar-agenda-all-day-font-weight: var(--font-weight-medium);
+  --calendar-agenda-all-day-fg: var(--color-fg);
+  --calendar-agenda-tone-dot-size: var(--space-2);
+  --calendar-agenda-tone-dot-radius: var(--radius-full);
+  --calendar-agenda-body-gap: var(--space-2);
+  --calendar-agenda-title-font-weight: var(--font-weight-medium);
+  --calendar-agenda-title-fg: var(--color-fg);
+  --calendar-agenda-tone-neutral: var(--color-border-strong);
+  --calendar-agenda-tone-accent: var(--color-accent);
+  --calendar-agenda-tone-success: var(--color-success);
+  --calendar-agenda-tone-warning: var(--color-warning-strong);
+  --calendar-agenda-tone-danger: var(--color-danger);
+}
+
+.TimedEvent__block__Dz8e7 {
+  position: absolute;
+  left: var(--cal-block-left, 0);
+  width: var(--cal-block-width, auto);
+  z-index: var(--cal-block-z, auto);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--calendar-timed-event-gap);
+  padding: var(--calendar-timed-event-padding);
+  border: var(--border-width) solid currentColor;
+  border-radius: var(--calendar-timed-event-radius);
+  font-family: inherit;
+  font-size: var(--calendar-timed-event-font-size);
+  font-weight: var(--calendar-timed-event-font-weight);
+  line-height: 1.2;
+  text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition: left var(--calendar-timed-event-transition-position), width var(--calendar-timed-event-transition-position), filter var(--calendar-timed-event-transition-filter), background var(--calendar-timed-event-transition-bg);
+}
+.TimedEvent__block__Dz8e7:hover:not(:disabled), .TimedEvent__block__Dz8e7:focus-visible {
+  left: 0;
+  width: 100%;
+  z-index: var(--cal-block-z-hover, auto);
+  filter: brightness(0.95);
+}
+.TimedEvent__block__Dz8e7:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: calc(-1 * var(--ring-offset));
+}
+
+.TimedEvent__movable__U1hpa {
+  cursor: grab;
+  touch-action: none;
+}
+
+.TimedEvent__dragging__S4Ht2 {
+  cursor: grabbing;
+  opacity: var(--calendar-drag-block-opacity);
+  box-shadow: var(--calendar-drag-block-shadow);
+  transition: none;
+}
+
+.TimedEvent__invalidDrop__sXl73 {
+  outline: var(--calendar-drag-invalid-outline-width) solid var(--calendar-drag-invalid-outline);
+  outline-offset: 0;
+}
+
+.TimedEvent__resizeHandle__84pqI {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--calendar-resize-handle-height);
+  cursor: ns-resize;
+  touch-action: none;
+}
+
+.TimedEvent__resizeHandle__84pqI:hover {
+  background: var(--calendar-resize-handle-bg-hover);
+}
+
+.TimedEvent__colored__Lh4Md {
+  background-color: var(--calendar-event-color-bg, transparent);
+  color: var(--calendar-event-color-fg, currentColor);
+}
+
+.TimedEvent__striped__YjR68 {
+  background-image: linear-gradient(to right, var(--calendar-event-stripe-color, currentColor) 0, var(--calendar-event-stripe-color, currentColor) var(--calendar-event-color-stripe-width), transparent var(--calendar-event-color-stripe-width));
+  border-left-color: var(--calendar-event-stripe-color, currentColor);
+}
+
+.TimedEvent__short__O3jHl {
+  flex-direction: row;
+  align-items: center;
+}
+
+.TimedEvent__time__1Gg_N {
+  font-size: var(--calendar-timed-event-time-font-size);
+  font-weight: var(--calendar-timed-event-time-font-weight);
+  opacity: var(--calendar-timed-event-time-opacity);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.TimedEvent__title__V3rkb {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.TimedEvent__tooltipBody__548tR {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-event-tooltip-gap);
+}
+
+.TimedEvent__tooltipTime__Pyue5 {
+  font-size: var(--calendar-event-tooltip-time-font-size);
+  font-weight: var(--calendar-event-tooltip-time-font-weight);
+  color: var(--calendar-event-tooltip-time-fg);
+}
+
+.TimedEvent__tooltipTitle___fnIe {
+  font-size: var(--calendar-event-tooltip-title-font-size);
+  font-weight: var(--calendar-event-tooltip-title-font-weight);
+  color: var(--calendar-event-tooltip-title-fg);
+}
+
+.TimedEvent__neutral__t39He {
+  background: var(--calendar-timed-event-bg-neutral);
+  color: var(--calendar-timed-event-fg-neutral);
+  border-color: var(--calendar-timed-event-border-color-neutral);
+}
+
+.TimedEvent__accent__NR-IP {
+  background: var(--calendar-timed-event-bg-accent);
+  color: var(--calendar-timed-event-fg-accent);
+}
+
+.TimedEvent__success__MyIKz {
+  background: var(--calendar-timed-event-bg-success);
+  color: var(--calendar-timed-event-fg-success);
+}
+
+.TimedEvent__warning__3aqrT {
+  background: var(--calendar-timed-event-bg-warning);
+  color: var(--calendar-timed-event-fg-warning);
+}
+
+.TimedEvent__danger__sfjP4 {
+  background: var(--calendar-timed-event-bg-danger);
+  color: var(--calendar-timed-event-fg-danger);
+}

package/dist/components/Calendar/TimedEvent.d.ts

@@ -0,0 +1,32 @@
+import { type MouseEvent, type PointerEvent } from 'react';
+import type { DragMode, DragPreview } from './useEventDrag.js';
+import type { CalendarEvent, CalendarView, RenderEvent, TimedEventBlock } from './types.js';
+export interface TimedEventProps {
+    /** Placed block produced by `layoutEventsForHourGrid`. */
+    block: TimedEventBlock;
+    /** Pixel height per hour row (matches the hour-grid scaffold). */
+    hourRowHeight: number;
+    /** Which view is rendering this chip (`'week'` or `'day'`). Passed to `renderEvent` for branching. */
+    view?: CalendarView;
+    /** Optional custom inner content. When set, replaces the default time + title spans. */
+    renderEvent?: RenderEvent;
+    /** Fires when the chip is clicked; receives the `CalendarEvent` and the raw click. */
+    onClick?: (event: CalendarEvent, e: MouseEvent<HTMLButtonElement>) => void;
+    /** The live drag placement for THIS block, when it is the one being dragged. */
+    preview?: DragPreview | null;
+    /** Whether the grid accepts move gestures (`onEventMove` is wired). */
+    canMove?: boolean;
+    /** Whether the grid accepts resize gestures (`onEventResize` is wired). */
+    canResize?: boolean;
+    /** Starts a pointer drag. Called from `pointerdown` on the block or its resize handle. */
+    onDragStart?: (block: TimedEventBlock, mode: DragMode, e: PointerEvent) => void;
+    /** Keyboard equivalent of a drag — whole snap steps, and whole columns for a move. */
+    onNudge?: (block: TimedEventBlock, delta: {
+        mode: DragMode;
+        steps: number;
+        columns?: number;
+    }) => void;
+    /** `id` of the visually-hidden element describing the keyboard drag shortcuts. */
+    dragHintId?: string;
+}
+export declare function TimedEvent({ block, hourRowHeight, view, renderEvent, onClick, preview, canMove, canResize, onDragStart, onNudge, dragHintId, }: TimedEventProps): import("react").JSX.Element;

package/dist/components/Calendar/TimedEvent.js

@@ -0,0 +1,157 @@
+'use client';
+import { useLocale } from "../../i18n/useLocale.js";
+import { formatTime } from "../../calendar/formatters.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { resolveEventColor } from "./eventColor.js";
+import { formatEventDuration } from "./utils.js";
+import TimedEvent_module_default from "./TimedEvent.module.js";
+import "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/Calendar/TimedEvent.tsx
+/**
+* Internal: a single timed-event block, absolutely positioned inside an
+* hour-grid day column. Tone-styled, wrapped in a Tooltip so the full
+* "time range + title" is reachable even when the chip is short.
+*
+* @remarks
+* **When NOT to use:** Do not render `TimedEvent` directly in application code —
+* it is an internal building block consumed by `HourGrid`. Use `Calendar` (or
+* `WeekView`/`DayView`) from the design system and pass events via the `events` prop.
+*/
+var MIN_BLOCK_HEIGHT_PX = 20;
+/** Percent of the day column each cascade lane is offset to the right. */
+var LANE_OFFSET_PERCENT = 10;
+/** Z-index used for the hovered / focused block — sits above any lane. */
+var HOVER_Z_INDEX = 100;
+function TimedEvent({ block, hourRowHeight, view = "week", renderEvent, onClick, preview = null, canMove = false, canResize = false, onDragStart, onNudge, dragHintId }) {
+	const locale = useLocale();
+	const { toneClass, hasStripe, style: colorStyle } = resolveEventColor(block.event);
+	const isDragging = preview !== null;
+	const startMinutes = preview ? preview.startMinutes : block.startMinutes;
+	const endMinutes = preview ? preview.endMinutes : block.endMinutes;
+	const top = startMinutes / 60 * hourRowHeight;
+	const rawHeight = (endMinutes - startMinutes) / 60 * hourRowHeight;
+	const height = Math.max(rawHeight, MIN_BLOCK_HEIGHT_PX);
+	const leftPercent = isDragging ? 0 : LANE_OFFSET_PERCENT * block.lane;
+	const zIndex = isDragging ? HOVER_Z_INDEX : block.lane + 1;
+	const displayStart = preview ? preview.startsAt : block.event.startsAt;
+	const displayEnd = preview ? preview.endsAt : block.event.endsAt;
+	const startLabel = formatTime(displayStart, locale);
+	const endLabel = displayEnd ? formatTime(displayEnd, locale) : null;
+	const timeLabel = !endLabel || endLabel === startLabel ? startLabel : `${startLabel} – ${endLabel}`;
+	const duration = formatEventDuration(displayStart, displayEnd);
+	const tooltipContent = /* @__PURE__ */ jsxs("span", {
+		className: TimedEvent_module_default.tooltipBody,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: TimedEvent_module_default.tooltipTime,
+			children: [
+				timeLabel,
+				" · ",
+				duration
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: TimedEvent_module_default.tooltipTitle,
+			children: block.event.title
+		})]
+	});
+	const handleClick = (e) => {
+		e.stopPropagation();
+		onClick?.(block.event, e);
+	};
+	const handlePointerDown = (e) => {
+		if (!canMove) return;
+		onDragStart?.(block, "move", e);
+	};
+	const handleHandlePointerDown = (e) => {
+		if (!canResize) return;
+		onDragStart?.(block, "resize", e);
+	};
+	const handleKeyDown = (e) => {
+		if (!e.altKey || !onNudge) return;
+		if (e.ctrlKey || e.metaKey) return;
+		const resize = e.shiftKey;
+		if (resize && !canResize) return;
+		if (!resize && !canMove) return;
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				e.stopPropagation();
+				onNudge(block, {
+					mode: resize ? "resize" : "move",
+					steps: -1
+				});
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				e.stopPropagation();
+				onNudge(block, {
+					mode: resize ? "resize" : "move",
+					steps: 1
+				});
+				break;
+			case "ArrowLeft":
+				if (resize) return;
+				e.preventDefault();
+				e.stopPropagation();
+				onNudge(block, {
+					mode: "move",
+					steps: 0,
+					columns: -1
+				});
+				break;
+			case "ArrowRight":
+				if (resize) return;
+				e.preventDefault();
+				e.stopPropagation();
+				onNudge(block, {
+					mode: "move",
+					steps: 0,
+					columns: 1
+				});
+		}
+	};
+	const isShort = height < 30;
+	const customContent = renderEvent ? renderEvent(block.event, {
+		view,
+		asAllDay: false,
+		timeLabel,
+		duration
+	}) : null;
+	const draggable = canMove || canResize;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltipContent,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: clsx(TimedEvent_module_default.block, toneClass && TimedEvent_module_default[toneClass], colorStyle && TimedEvent_module_default.colored, hasStripe && TimedEvent_module_default.striped, isShort && TimedEvent_module_default.short, canMove && TimedEvent_module_default.movable, isDragging && TimedEvent_module_default.dragging, preview?.invalid && TimedEvent_module_default.invalidDrop),
+			style: {
+				...colorStyle,
+				top,
+				height,
+				"--cal-block-left": `${leftPercent}%`,
+				"--cal-block-width": `${100 - leftPercent}%`,
+				"--cal-block-z": zIndex,
+				"--cal-block-z-hover": HOVER_Z_INDEX
+			},
+			"aria-describedby": draggable ? dragHintId : void 0,
+			"data-dragging": isDragging || void 0,
+			onClick: handleClick,
+			onPointerDown: handlePointerDown,
+			onKeyDown: draggable ? handleKeyDown : void 0,
+			children: [customContent !== null ? customContent : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: TimedEvent_module_default.time,
+				children: timeLabel
+			}), /* @__PURE__ */ jsx("span", {
+				className: TimedEvent_module_default.title,
+				children: block.event.title
+			})] }), canResize && /* @__PURE__ */ jsx("span", {
+				role: "presentation",
+				"aria-hidden": "true",
+				className: TimedEvent_module_default.resizeHandle,
+				onPointerDown: handleHandlePointerDown,
+				onClick: (e) => e.stopPropagation()
+			})]
+		})
+	});
+}
+export { TimedEvent };

package/dist/components/Calendar/TimedEvent.module.js

@@ -0,0 +1,41 @@
+import "./TimedEvent.css";
+// src/components/Calendar/TimedEvent.module.scss
+var block = "TimedEvent__block__Dz8e7";
+var movable = "TimedEvent__movable__U1hpa";
+var dragging = "TimedEvent__dragging__S4Ht2";
+var invalidDrop = "TimedEvent__invalidDrop__sXl73";
+var resizeHandle = "TimedEvent__resizeHandle__84pqI";
+var colored = "TimedEvent__colored__Lh4Md";
+var striped = "TimedEvent__striped__YjR68";
+var short = "TimedEvent__short__O3jHl";
+var time = "TimedEvent__time__1Gg_N";
+var title = "TimedEvent__title__V3rkb";
+var tooltipBody = "TimedEvent__tooltipBody__548tR";
+var tooltipTime = "TimedEvent__tooltipTime__Pyue5";
+var tooltipTitle = "TimedEvent__tooltipTitle___fnIe";
+var neutral = "TimedEvent__neutral__t39He";
+var accent = "TimedEvent__accent__NR-IP";
+var success = "TimedEvent__success__MyIKz";
+var warning = "TimedEvent__warning__3aqrT";
+var danger = "TimedEvent__danger__sfjP4";
+var TimedEvent_module_default = {
+	block,
+	movable,
+	dragging,
+	invalidDrop,
+	resizeHandle,
+	colored,
+	striped,
+	short,
+	time,
+	title,
+	tooltipBody,
+	tooltipTime,
+	tooltipTitle,
+	neutral,
+	accent,
+	success,
+	warning,
+	danger
+};
+export { accent, block, colored, danger, TimedEvent_module_default as default, dragging, invalidDrop, movable, neutral, resizeHandle, short, striped, success, time, title, tooltipBody, tooltipTime, tooltipTitle, warning };

package/dist/components/Calendar/ViewSwitcher.css

@@ -0,0 +1,3 @@
+.ViewSwitcher__switcher__u1Xk6 {
+  display: flex;
+}

package/dist/components/Calendar/ViewSwitcher.d.ts

@@ -0,0 +1,19 @@
+import type { CalendarView } from './types.js';
+export interface ViewSwitcherProps {
+    view: CalendarView;
+    onViewChange: (view: CalendarView) => void;
+    monthLabel: string;
+    weekLabel: string;
+    dayLabel: string;
+    agendaLabel: string;
+}
+/**
+ * Internal: segmented control for switching between month / week / day /
+ * agenda views. Uses the design system's `<Tabs>` for ARIA + keyboard
+ * navigation.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `ViewSwitcher` directly. It is composed
+ * by the `Calendar` shell. Use `<Calendar view ... onViewChange ...>`.
+ */
+export declare function ViewSwitcher({ view, onViewChange, monthLabel, weekLabel, dayLabel, agendaLabel, }: ViewSwitcherProps): import("react").JSX.Element;

package/dist/components/Calendar/ViewSwitcher.js

@@ -0,0 +1,49 @@
+'use client';
+import { Tabs } from "../Tabs/Tabs.js";
+import ViewSwitcher_module_default from "./ViewSwitcher.module.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/Calendar/ViewSwitcher.tsx
+/**
+* Internal: segmented control for switching between month / week / day /
+* agenda views. Uses the design system's `<Tabs>` for ARIA + keyboard
+* navigation.
+*
+* @remarks
+* **When NOT to use:** Do not render `ViewSwitcher` directly. It is composed
+* by the `Calendar` shell. Use `<Calendar view ... onViewChange ...>`.
+*/
+function ViewSwitcher({ view, onViewChange, monthLabel, weekLabel, dayLabel, agendaLabel }) {
+	const items = useMemo(() => [
+		{
+			id: "month",
+			label: monthLabel
+		},
+		{
+			id: "week",
+			label: weekLabel
+		},
+		{
+			id: "day",
+			label: dayLabel
+		},
+		{
+			id: "agenda",
+			label: agendaLabel
+		}
+	], [
+		monthLabel,
+		weekLabel,
+		dayLabel,
+		agendaLabel
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: ViewSwitcher_module_default.switcher,
+		children: /* @__PURE__ */ jsx(Tabs, {
+			activeId: view,
+			onChange: (id) => onViewChange(id),
+			items
+		})
+	});
+}
+export { ViewSwitcher };

package/dist/components/Calendar/ViewSwitcher.module.js

@@ -0,0 +1,5 @@
+import "./ViewSwitcher.css";
+// src/components/Calendar/ViewSwitcher.module.scss
+var switcher = "ViewSwitcher__switcher__u1Xk6";
+var ViewSwitcher_module_default = { switcher };
+export { ViewSwitcher_module_default as default, switcher };