@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/ButtonGroup/ButtonGroupItem.tsx

@@ -0,0 +1,74 @@
+import { type ReactNode } from 'react';
+import clsx from 'clsx';
+import { useButtonGroupContext, type ButtonGroupSize } from './context';
+import styles from './ButtonGroup.module.scss';
+
+export interface ButtonGroupItemProps {
+  /** Value emitted to `onValueChange` when this item is selected. */
+  value: string;
+  /** Per-item disabled. Group-level disabled is OR-merged. */
+  disabled?: boolean;
+  /** className merges onto the rendered <button>. */
+  className?: string;
+  /**
+   * Accessible name for the radio, when the visible text is an abbreviation
+   * (`S` / `M` / `L` → "Small tiles"). Start it with the visible text where you
+   * can ("S, small tiles") so voice-control users can say what they see
+   * (WCAG 2.5.3). Omit it when `children` already reads as a full name.
+   */
+  'aria-label'?: string;
+  /** id(s) of element(s) describing the option — forwarded to the radio. */
+  'aria-describedby'?: string;
+  children: ReactNode;
+}
+
+const sizeClass: Record<ButtonGroupSize, string> = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+/**
+ * Segmented-mode item. Renders `<button role="radio">` with roving tabindex.
+ * @see docs/components/ButtonGroup.md
+ */
+export function ButtonGroupItem({
+  value,
+  disabled = false,
+  className,
+  children,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+}: ButtonGroupItemProps) {
+  const ctx = useButtonGroupContext('Item');
+
+  const isSelected = ctx.value === value;
+  const effectiveDisabled = disabled || ctx.disabled;
+
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={isSelected}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-disabled={effectiveDisabled || undefined}
+      // Selected item holds the tab stop; when NOTHING is selected the group
+      // would otherwise have no tab stop at all and be unreachable by keyboard
+      // (#499). APG: the first radio takes focus when none is checked.
+      tabIndex={isSelected || ctx.rovingFallbackValue === value ? 0 : -1}
+      data-selected={isSelected ? '' : undefined}
+      data-value={value}
+      onClick={() => {
+        if (effectiveDisabled) return;
+        if (isSelected) return;
+        ctx.onValueChange(value);
+      }}
+      onKeyDown={(e) => ctx.handleItemKeyDown(e, value)}
+      className={clsx(styles.item, sizeClass[ctx.size], className)}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/ButtonGroup/context.ts

@@ -0,0 +1,45 @@
+import { createContext, useContext, type KeyboardEvent } from 'react';
+import type { ButtonSize } from '../Button';
+
+/** Matches Button's size scale. */
+export type ButtonGroupSize = ButtonSize;
+
+export interface ButtonGroupContextValue {
+  /** Currently-selected value. Set when in segmented mode. */
+  value: string;
+  /** Fires on selection change. */
+  onValueChange: (next: string) => void;
+  /** Group-level size, propagated to Items via context. */
+  size: ButtonGroupSize;
+  /** Group-level disabled. Individual Items can also be disabled. */
+  disabled: boolean;
+  /** Item delegates its keydown to the parent for Arrow/Home/End handling. */
+  handleItemKeyDown: (e: KeyboardEvent<HTMLButtonElement>, value: string) => void;
+  /**
+   * Value of the item that should hold the group's single tab stop when
+   * NOTHING is selected, or `null` when something is.
+   *
+   * The roving tabindex was `isSelected ? 0 : -1`, so a group whose `value`
+   * matched no item — the ordinary initial state of a single-select group with
+   * nothing chosen — gave every item `tabIndex={-1}` and the radiogroup itself
+   * none. Tab skipped the whole control, and since the arrow keys live on the
+   * items, roving navigation could never be entered either: a WCAG 2.1.1
+   * failure for the unselected state. WAI-ARIA APG: "If no radio button is
+   * checked, the first radio button in the group receives focus."
+   *
+   * Resolved from the DOM rather than from registration order, for the same
+   * reason `handleItemKeyDown` queries the DOM — consumer-reordered children
+   * must be walked in their actual visual order.
+   */
+  rovingFallbackValue: string | null;
+}
+
+export const ButtonGroupContext = createContext<ButtonGroupContextValue | null>(null);
+
+export function useButtonGroupContext(componentName: string): ButtonGroupContextValue {
+  const ctx = useContext(ButtonGroupContext);
+  if (!ctx) {
+    throw new Error(`<ButtonGroup.${componentName}> must be used inside <ButtonGroup>.`);
+  }
+  return ctx;
+}

package/src/components/ButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupSize, ButtonGroupItemProps } from './ButtonGroup';

package/src/components/Calendar/AgendaView.module.scss

@@ -0,0 +1,231 @@
+@use '../../styles/mixins' as *;
+@use './Calendar.tokens';
+
+.agenda {
+  display: flex;
+  flex-direction: column;
+  padding: var(--calendar-agenda-padding-y) 0;
+}
+
+.empty {
+  padding: var(--calendar-agenda-empty-padding);
+  text-align: center;
+  font-size: var(--calendar-agenda-empty-font-size);
+  color: var(--calendar-agenda-empty-fg);
+}
+
+// Each dayGroup carries its own bottom padding (in place of `gap` on
+// `.agenda`) so the today-group's accent borders extend down through the
+// spacing area, all the way to the next day-header's top border.
+// `gap` provides the breathing room between the dayHeader and the rows.
+// `padding-bottom` matches that gap so the space below the last row
+// equals the space above the first row.
+.dayGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-agenda-day-group-gap);
+  padding-bottom: var(--calendar-agenda-day-group-padding-bottom);
+  border-left: var(--border-width) solid var(--calendar-border-color);
+  border-right: var(--border-width) solid var(--calendar-border-color);
+}
+
+// The last day-group has no "next" header to provide its closing
+// horizontal line — add an explicit bottom border so the list reads as
+// closed at the bottom edge.
+.dayGroup:last-child {
+  border-bottom: var(--border-width) solid var(--calendar-border-color);
+}
+
+// Today's group swaps its grey side borders for the accent color so the
+// current day is framed in blue on all four edges (together with the
+// accent top/bottom on `.dayHeader`).
+.todayGroup {
+  position: relative;
+  border-left-color: var(--calendar-accent);
+  border-right-color: var(--calendar-accent);
+}
+
+// Today's side borders end exactly at the next day-header's accent top
+// border. This pseudo-element draws a 1px accent strip spanning the full
+// width of the today-group just below it, so the bottom-left and
+// bottom-right corners both meet the next header's horizontal line
+// cleanly instead of stopping a pixel short.
+.todayGroup::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--border-width) * -1);
+  height: var(--border-width);
+  background: var(--calendar-accent);
+}
+
+// Today's day-header band gets an accent tint + accent border so the
+// current day is instantly findable when the agenda list is long. The
+// rows area stays untinted so event tone dots keep their contrast.
+.todayGroup .dayHeader {
+  background: var(--calendar-agenda-day-header-bg-today);
+  border-top-color: var(--calendar-agenda-day-header-border-today);
+  border-bottom-color: var(--calendar-agenda-day-header-border-today);
+  color: var(--calendar-agenda-day-header-fg-today);
+}
+
+// The next day-group's top border continues the today accent so the
+// vertical left-border line lands cleanly on a matching horizontal one,
+// instead of meeting a plain grey rule.
+.todayGroup + .dayGroup .dayHeader {
+  border-top-color: var(--calendar-agenda-day-header-border-today);
+}
+
+// Day-header reads as a full-width banded row. Top + bottom borders frame
+// the band so it doesn't float against an empty row gap; subtle fill
+// reinforces the day-group boundary visually.
+.dayHeader {
+  padding: var(--calendar-agenda-day-header-padding);
+  background: var(--calendar-agenda-day-header-bg);
+  border-top: var(--border-width) solid var(--calendar-border-color);
+  border-bottom: var(--border-width) solid var(--calendar-border-color);
+  font-size: var(--calendar-agenda-day-header-font-size);
+  font-weight: var(--calendar-agenda-day-header-font-weight);
+  color: var(--calendar-agenda-day-header-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-agenda-rows-gap);
+  padding-left: var(--calendar-agenda-rows-padding-left);
+}
+
+.rowButton {
+  display: grid;
+  grid-template-columns: var(--calendar-agenda-row-gutter-width) auto 1fr;
+  align-items: center;
+  gap: var(--calendar-agenda-row-gap);
+  width: 100%;
+  padding: var(--calendar-agenda-row-padding);
+  border: none;
+  border-radius: var(--calendar-agenda-row-radius);
+
+  // background-COLOR, not the shorthand: this is (0,1,0), the same as
+  // `.striped`, so the shorthand would reset the band's background-image and
+  // lose only by source order. The UA button style needs background-color reset
+  // anyway; background-image is already none.
+  background-color: transparent;
+  font-family: inherit;
+  font-size: var(--calendar-agenda-row-font-size);
+  color: var(--calendar-agenda-row-fg);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--calendar-agenda-row-transition-bg);
+
+  &:hover:not(:disabled) {
+    // background-COLOR, not the shorthand: this rule is `.rowButton:hover:not(…)`
+    // at specificity (0,3,0), so the shorthand reset `background-image` to none
+    // and erased `.striped`'s band (0,1,0) on hover. Unlike the chip and the
+    // block, `.rowButton` has `border: none`, so there was no border left to
+    // carry even a sliver — the state signal vanished entirely.
+    background-color: var(--calendar-agenda-row-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.timeGutter {
+  font-size: var(--calendar-agenda-time-font-size);
+  color: var(--calendar-agenda-time-fg);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.allDay {
+  font-style: normal;
+  font-weight: var(--calendar-agenda-all-day-font-weight);
+  color: var(--calendar-agenda-all-day-fg);
+}
+
+// The tone dot sits between gutter and body to color-code the event
+// without tinting the whole row (which would clash with the today-group
+// accent and the hover background).
+.toneDot {
+  width: var(--calendar-agenda-tone-dot-size);
+  height: var(--calendar-agenda-tone-dot-size);
+  border-radius: var(--calendar-agenda-tone-dot-radius);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.body {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-agenda-body-gap);
+}
+
+.title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--calendar-agenda-title-font-weight);
+  color: var(--calendar-agenda-title-fg);
+}
+
+// ── Per-event palette color (CalendarEvent.color) ──────────────────────────
+// The agenda row is never filled — tinting it would clash with the today-group
+// accent and the hover background (see .toneDot above) — so `color` drives the
+// leading dot instead, and a non-neutral `tone` still gets its edge stripe.
+.colored {
+  // The agenda row is never filled, so `color` drives the leading dot (which
+  // inherits currentColor) rather than a background.
+  color: var(--calendar-event-color-fg, currentColor);
+}
+
+.striped {
+  // Gradient, not an inset box-shadow: `:focus-visible` on this button USED TO
+  // own box-shadow for the focus ring, and would have erased the stripe
+  // outright — and unlike the chip and the block, `.rowButton` has
+  // `border: none`, so there is no border left to carry a fallback sliver.
+  // Keyboard-focusing a row would have wiped the state signal completely.
+  // Since #505 the ring is an outline, so the box-shadow slot is FREE and the
+  // reason above is no longer forcing. This row's ring is also outset (nothing
+  // here clips), so the stripe survives focus intact — unlike TimedEvent, where
+  // the inset ring covers the outer 2px of its 4px tone band. The gradient
+  // stays because nothing requires changing it, not because anything still
+  // demands it; say that rather than inventing a live reason.
+  // (Two earlier versions of this note did exactly that, borrowing TimedEvent's
+  // reasons — surviving a hover `filter: brightness()`, then composing with a
+  // drag shadow. This file has neither.)
+  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)
+  );
+}
+
+// Tone -> color of the dot (via currentColor inheritance).
+.neutral {
+  color: var(--calendar-agenda-tone-neutral);
+}
+
+.accent {
+  color: var(--calendar-agenda-tone-accent);
+}
+
+.success {
+  color: var(--calendar-agenda-tone-success);
+}
+
+.warning {
+  color: var(--calendar-agenda-tone-warning);
+}
+
+.danger {
+  color: var(--calendar-agenda-tone-danger);
+}

package/src/components/Calendar/AgendaView.tsx

@@ -0,0 +1,214 @@
+import { useMemo, type MouseEvent } from 'react';
+import clsx from 'clsx';
+import { useLocale } from '../../i18n/useLocale';
+import { useTranslation } from '../../i18n/useTranslation';
+import { formatDayLong, formatTime } from '../../calendar';
+import { startOfDay } from '../../calendar/dateMath';
+import type { Day } from '../../calendar/types';
+import { formatEventDuration } from './utils';
+import type { CalendarEvent, RenderEvent } from './types';
+import { resolveEventColor } from './eventColor';
+import styles from './AgendaView.module.scss';
+
+export interface AgendaViewProps {
+  /** One `Day` per calendar day in the agenda window (inclusive at both ends). */
+  days: readonly Day[];
+  /** Localized range label for the agenda window (e.g., "May 18 – 24, 2026"). */
+  rangeLabel: string;
+  /** Events to project into the window. Multi-day events appear under every day they span. */
+  events: readonly CalendarEvent[];
+  /** Override locale (otherwise reads `useLocale()`). */
+  locale?: string;
+  /** Fires when the user clicks an event row. */
+  onEventClick?: (event: CalendarEvent) => void;
+  /** Optional custom event renderer (see `RenderEvent`). */
+  renderEvent?: RenderEvent;
+}
+
+interface AgendaRow {
+  event: CalendarEvent;
+  /** True when this row represents an `allDay` or multi-day event. */
+  isAllDay: boolean;
+  /** Pre-formatted duration ("30m", "1h", "3d") — locale-independent. */
+  duration: string;
+}
+
+interface DayGroup {
+  day: Day;
+  rows: AgendaRow[];
+}
+
+/**
+ * Internal: agenda (list) view for `<Calendar view='agenda'>`. Projects the
+ * cursor's current-week event window into a chronological list grouped by
+ * day. Days without events are hidden so the list stays scannable.
+ *
+ * - Multi-day events appear under every day they span, each row marked
+ *   `asAllDay` so the time gutter shows "All day" instead of a clock time.
+ * - Single-day timed events show the start time in the gutter.
+ * - Within a day: all-day events first, then timed events by start time.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `AgendaView` directly — use the
+ * `Calendar` shell with `view='agenda'` (or `defaultView='agenda'`). The
+ * shell owns cursor / locale / labels and dispatches into this component.
+ */
+export function AgendaView({
+  days,
+  rangeLabel,
+  events,
+  locale: localeOverride,
+  onEventClick,
+  renderEvent,
+}: AgendaViewProps) {
+  const contextLocale = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const t = useTranslation();
+
+  const groups = useMemo(() => buildDayGroups(days, events), [days, events]);
+
+  if (groups.length === 0) {
+    return (
+      <div className={styles.agenda} role="list" aria-label={rangeLabel}>
+        <p className={styles.empty}>{t('calendar.agendaEmpty')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.agenda} role="list" aria-label={rangeLabel}>
+      {groups.map(({ day, rows }) => (
+        <div
+          key={day.key}
+          role="listitem"
+          className={clsx(styles.dayGroup, day.isToday && styles.todayGroup)}
+        >
+          <h3 className={styles.dayHeader}>{formatDayLong(day.date, locale)}</h3>
+          <div className={styles.rows}>
+            {rows.map((row) => (
+              <AgendaRowItem
+                key={`${day.key}-${row.event.id}`}
+                row={row}
+                locale={locale}
+                allDayLabel={t('calendar.allDay')}
+                onClick={onEventClick}
+                renderEvent={renderEvent}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface AgendaRowItemProps {
+  row: AgendaRow;
+  locale: string;
+  allDayLabel: string;
+  onClick?: (event: CalendarEvent) => void;
+  renderEvent?: RenderEvent;
+}
+
+function AgendaRowItem({ row, locale, allDayLabel, onClick, renderEvent }: AgendaRowItemProps) {
+  const { event, isAllDay, duration } = row;
+  const { toneClass, hasStripe, style: colorStyle } = resolveEventColor(event);
+  const startLabel = isAllDay ? undefined : formatTime(event.startsAt, locale);
+  const endLabel = !isAllDay && event.endsAt ? formatTime(event.endsAt, locale) : undefined;
+  const timeLabel =
+    !isAllDay && endLabel && endLabel !== startLabel ? `${startLabel} – ${endLabel}` : startLabel;
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onClick?.(event);
+  };
+
+  const customContent = renderEvent
+    ? renderEvent(event, {
+        view: 'agenda',
+        asAllDay: isAllDay,
+        timeLabel: isAllDay ? undefined : timeLabel,
+        duration,
+      })
+    : null;
+
+  return (
+    <button
+      type="button"
+      className={clsx(
+        styles.rowButton,
+        toneClass && styles[toneClass],
+        colorStyle && styles.colored,
+        hasStripe && styles.striped,
+      )}
+      style={colorStyle}
+      onClick={handleClick}
+    >
+      <span className={styles.timeGutter}>
+        {isAllDay ? <em className={styles.allDay}>{allDayLabel}</em> : timeLabel}
+      </span>
+      <span className={styles.toneDot} aria-hidden="true" />
+      <span className={styles.body}>
+        {customContent !== null ? (
+          customContent
+        ) : (
+          <span className={styles.title}>{event.title}</span>
+        )}
+      </span>
+    </button>
+  );
+}
+
+/**
+ * Group events by day across the agenda window. Multi-day events appear
+ * under every day they span. Empty days are dropped. Within a day rows
+ * are sorted: all-day first (by startsAt), then timed events by startsAt.
+ */
+function buildDayGroups(days: readonly Day[], events: readonly CalendarEvent[]): DayGroup[] {
+  if (days.length === 0 || events.length === 0) return [];
+
+  // Pre-normalize each event into row data once.
+  interface Normalized {
+    event: CalendarEvent;
+    startDayMs: number;
+    endDayMs: number;
+    isAllDay: boolean;
+    isMultiDay: boolean;
+  }
+  const normalized: Normalized[] = events.map((ev) => {
+    const startDayMs = startOfDay(ev.startsAt).getTime();
+    const endDayMs = ev.endsAt ? startOfDay(ev.endsAt).getTime() : startDayMs;
+    const isAllDayProp = ev.allDay === true;
+    const isMultiDay = endDayMs > startDayMs;
+    // Multi-day events render with an "All day" gutter regardless of allDay
+    // flag — there's no single time that's meaningful across the span.
+    return {
+      event: ev,
+      startDayMs,
+      endDayMs,
+      isAllDay: isAllDayProp || isMultiDay,
+      isMultiDay,
+    };
+  });
+
+  const groups: DayGroup[] = [];
+  for (const day of days) {
+    const dayMs = startOfDay(day.date).getTime();
+    const dayEvents = normalized.filter((n) => n.startDayMs <= dayMs && dayMs <= n.endDayMs);
+    if (dayEvents.length === 0) continue;
+
+    // Sort: allDay/multi-day first by startsAt, then timed by startsAt.
+    dayEvents.sort((a, b) => {
+      if (a.isAllDay !== b.isAllDay) return a.isAllDay ? -1 : 1;
+      return a.event.startsAt.getTime() - b.event.startsAt.getTime();
+    });
+
+    const rows: AgendaRow[] = dayEvents.map((n) => ({
+      event: n.event,
+      isAllDay: n.isAllDay,
+      duration: formatEventDuration(n.event.startsAt, n.event.endsAt, n.isAllDay),
+    }));
+    groups.push({ day, rows });
+  }
+  return groups;
+}

package/src/components/Calendar/AllDayBand.module.scss

@@ -0,0 +1,18 @@
+@use './Calendar.tokens';
+
+.band {
+  display: grid;
+  gap: var(--calendar-all-day-band-gap);
+  padding: var(--calendar-all-day-band-padding-y) 0;
+  border-bottom: var(--border-width) solid var(--calendar-border-color);
+  background: var(--calendar-all-day-band-bg);
+}
+
+.gutter {
+  border-right: var(--border-width) solid var(--calendar-border-color);
+}
+
+.barSlot {
+  min-width: 0;
+  padding: 0 var(--calendar-all-day-band-bar-slot-padding-x);
+}

package/src/components/Calendar/AllDayBand.tsx

@@ -0,0 +1,75 @@
+import { EventChip } from './EventChip';
+import type { AllDayBar, CalendarEvent, CalendarView, RenderEvent } from './types';
+import styles from './AllDayBand.module.scss';
+
+export interface AllDayBandProps {
+  /** Bars produced by `layoutEventsForHourGrid`. */
+  bars: readonly AllDayBar[];
+  /** Number of day columns the band spans (1 or 7). */
+  columnCount: number;
+  /** Pixel width of the hour-gutter on the left (band aligns with the hour-grid columns). */
+  gutterWidth: number;
+  /** Which view contains this band — passed to `renderEvent` (`'week'` or `'day'`). */
+  view?: CalendarView;
+  /** Optional custom event renderer (replaces the chip's default inner content). */
+  renderEvent?: RenderEvent;
+  /** Fires when an all-day chip is clicked; receives the `CalendarEvent`. */
+  onEventClick?: (event: CalendarEvent) => void;
+}
+
+/**
+ * Internal: the all-day event band rendered above the hour grid. Multi-day
+ * events span columns as continuous bars; the left gutter is empty so the
+ * band aligns visually with the hour-grid columns below.
+ *
+ * @remarks
+ * **When NOT to use:** Do not render `AllDayBand` directly in application code —
+ * it is an internal building block consumed by `WeekView`/`DayView`. Use `Calendar`
+ * from the design system and pass events via the `events` prop.
+ */
+export function AllDayBand({
+  bars,
+  columnCount,
+  gutterWidth,
+  view = 'week',
+  renderEvent,
+  onEventClick,
+}: AllDayBandProps) {
+  if (bars.length === 0) return null;
+  const maxLane = bars.reduce((m, b) => Math.max(m, b.lane), 0);
+
+  return (
+    <div
+      className={styles.band}
+      style={{
+        gridTemplateColumns: `${gutterWidth}px repeat(${columnCount}, 1fr)`,
+        gridTemplateRows: `repeat(${maxLane + 1}, auto)`,
+      }}
+    >
+      <div
+        className={styles.gutter}
+        style={{ gridColumn: 1, gridRow: `1 / span ${maxLane + 1}` }}
+      />
+      {bars.map((bar) => (
+        <div
+          key={bar.event.id}
+          className={styles.barSlot}
+          style={{
+            // +2 because column 1 is the gutter; day index 0 → outer column 2
+            gridColumn: `${bar.startCol + 2} / ${bar.endCol + 3}`,
+            gridRow: bar.lane + 1,
+          }}
+        >
+          <EventChip
+            event={bar.event}
+            continuesLeft={bar.continuesLeft}
+            continuesRight={bar.continuesRight}
+            view={view}
+            renderEvent={renderEvent}
+            onClick={(ev) => onEventClick?.(ev)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Calendar/Calendar.module.scss

@@ -0,0 +1,23 @@
+@use './Calendar.tokens';
+
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-gap);
+  font-family: inherit;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--calendar-header-gap);
+}
+
+.title {
+  /* stylelint-disable-next-line property-disallowed-list -- neutralizing UA <h2> default, not component layout */
+  margin: 0;
+  font-size: var(--calendar-title-font-size);
+  font-weight: var(--calendar-title-font-weight);
+  color: var(--calendar-title-fg);
+}