@molecule/app-class-schedule-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/ClassSchedule.d.ts

@@ -0,0 +1,103 @@
+import type { ReactElement, ReactNode } from 'react';
+/**
+ * A single event on the weekly schedule grid.
+ *
+ * `start` and `end` are minute offsets from midnight (`0`–`1440`). For
+ * example a class running 09:00–10:30 is `{ start: 540, end: 630 }`.
+ */
+export interface ScheduleEvent {
+    /** Stable identifier (used as React key + passed to click handlers). */
+    id: string;
+    /** ISO weekday: `0` = Sunday, `1` = Monday … `6` = Saturday. */
+    weekday: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Start time in minutes from midnight (e.g. `540` = 09:00). */
+    start: number;
+    /** End time in minutes from midnight (e.g. `630` = 10:30). */
+    end: number;
+    /** Primary label rendered inside the event tile. */
+    title: ReactNode;
+    /** Secondary line — typically room or location. */
+    subtitle?: ReactNode;
+    /** Tertiary line — typically teacher or instructor. */
+    meta?: ReactNode;
+    /** Optional accent color applied as a left border on the tile. */
+    accentColor?: string;
+}
+/**
+ * Empty-slot click payload — `weekday` plus the start of the clicked hour
+ * (in minutes from midnight, snapped down to the row).
+ */
+export interface ScheduleSlot {
+    weekday: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Hour-of-day boundary in minutes (e.g. `540` for the 09:00 row). */
+    start: number;
+}
+/** Props for the {@link ClassSchedule} weekly timetable component. */
+export interface ClassScheduleProps {
+    /** Events to render. */
+    events: ScheduleEvent[];
+    /** First day-of-week (`0` = Sunday, `1` = Monday). Defaults to `1`. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Visible hour range as `[startHour, endHour]` in 24-hour clock. Defaults to `[8, 18]`. */
+    dayHours?: [number, number];
+    /** Pixel height of one hour row. Defaults to `60`. */
+    cellHeight?: number;
+    /** Whether to show Saturday + Sunday columns. Defaults to `true`. */
+    showWeekendCols?: boolean;
+    /** Locale for weekday name formatting (passes through to `Intl.DateTimeFormat`). */
+    locale?: string;
+    /** Called when an event tile is clicked. */
+    onEventClick?: (event: ScheduleEvent) => void;
+    /** Called when an empty grid cell is clicked. */
+    onSlotClick?: (slot: ScheduleSlot) => void;
+    /** Extra classes for the root container. */
+    className?: string;
+}
+/**
+ * Format a minute-of-day value (0–1440) as `HH:MM` 24-hour clock.
+ *
+ * @param minutes - Minutes from midnight.
+ * @returns Zero-padded `HH:MM` string.
+ */
+export declare function formatHourLabel(minutes: number): string;
+/**
+ * Lay out events that share a weekday into non-overlapping side-by-side
+ * lanes. Each event gets a `lane` index (0…N) and a `lanes` count for the
+ * group it belongs to so the caller can compute width/left as
+ * `width = (1/lanes) * 100%` / `left = (lane/lanes) * 100%`.
+ *
+ * @param events - Events occurring on a single weekday.
+ * @returns Array of `{ event, lane, lanes }` records, in input order.
+ */
+export declare function assignLanes<E extends {
+    start: number;
+    end: number;
+}>(events: E[]): Array<{
+    event: E;
+    lane: number;
+    lanes: number;
+}>;
+/**
+ * Weekly class-schedule grid. Renders a 7-column (or 5-column when
+ * `showWeekendCols` is `false`) timetable with hour rows down the left
+ * and absolutely positioned event tiles inside each day column. Events
+ * that overlap on the same weekday are split into side-by-side lanes.
+ *
+ * Suitable for school timetables, virtual-classroom schedules, gym
+ * class calendars, conference tracks, or any weekly recurring time
+ * grid.
+ *
+ * @param props - Component props.
+ * @param props.events - Events to render.
+ * @param props.weekStartsOn - First day-of-week (`0` Sun, `1` Mon).
+ * @param props.dayHours - Visible hour range `[start, end]`.
+ * @param props.cellHeight - Pixel height per hour row.
+ * @param props.showWeekendCols - Hide Sat + Sun when `false`.
+ * @param props.locale - Locale for weekday names.
+ * @param props.onEventClick - Click handler for event tiles.
+ * @param props.onSlotClick - Click handler for empty grid cells.
+ * @param props.className - Extra classes for the root container.
+ * @returns The rendered schedule grid.
+ */
+export declare function ClassSchedule({ events, weekStartsOn, dayHours, cellHeight, showWeekendCols, locale, onEventClick, onSlotClick, className, }: ClassScheduleProps): ReactElement;
+//# sourceMappingURL=ClassSchedule.d.ts.map

package/dist/ClassSchedule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassSchedule.d.ts","sourceRoot":"","sources":["../src/ClassSchedule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKpD;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAA;IACV,gEAAgE;IAChE,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAClC,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAA;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAA;IAChB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAClC,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,sEAAsE;AACtE,MAAM,WAAW,kBAAkB;IACjC,wBAAwB;IACxB,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC3B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oFAAoF;IACpF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC1C,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAClE,MAAM,EAAE,CAAC,EAAE,GACV,KAAK,CAAC;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAgClD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,YAAgB,EAChB,QAAkB,EAClB,UAAe,EACf,eAAsB,EACtB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,GAAG,YAAY,CA4NnC"}

package/dist/ClassSchedule.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+const MINUTES_PER_HOUR = 60;
+const WEEKEND_DAYS = new Set([0, 6]);
+/**
+ * Format a minute-of-day value (0–1440) as `HH:MM` 24-hour clock.
+ *
+ * @param minutes - Minutes from midnight.
+ * @returns Zero-padded `HH:MM` string.
+ */
+export function formatHourLabel(minutes) {
+    const h = Math.floor(minutes / MINUTES_PER_HOUR);
+    const m = minutes % MINUTES_PER_HOUR;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+/**
+ * Lay out events that share a weekday into non-overlapping side-by-side
+ * lanes. Each event gets a `lane` index (0…N) and a `lanes` count for the
+ * group it belongs to so the caller can compute width/left as
+ * `width = (1/lanes) * 100%` / `left = (lane/lanes) * 100%`.
+ *
+ * @param events - Events occurring on a single weekday.
+ * @returns Array of `{ event, lane, lanes }` records, in input order.
+ */
+export function assignLanes(events) {
+    const sorted = events
+        .map((event, originalIndex) => ({ event, originalIndex }))
+        .sort((a, b) => a.event.start - b.event.start || a.event.end - b.event.end);
+    const groups = [];
+    let current = [];
+    let currentMaxEnd = -Infinity;
+    for (const { event, originalIndex } of sorted) {
+        if (event.start >= currentMaxEnd && current.length > 0) {
+            groups.push(current);
+            current = [];
+            currentMaxEnd = -Infinity;
+        }
+        // Find lowest free lane in `current`.
+        const taken = new Set(current.filter((a) => a.event.end > event.start).map((a) => a.lane));
+        let lane = 0;
+        while (taken.has(lane))
+            lane++;
+        current.push({ event, lane, originalIndex });
+        if (event.end > currentMaxEnd)
+            currentMaxEnd = event.end;
+    }
+    if (current.length > 0)
+        groups.push(current);
+    const result = [];
+    for (const group of groups) {
+        const lanes = group.reduce((max, a) => Math.max(max, a.lane + 1), 1);
+        for (const a of group)
+            result.push({ ...a, lanes });
+    }
+    result.sort((a, b) => a.originalIndex - b.originalIndex);
+    return result.map(({ event, lane, lanes }) => ({ event, lane, lanes }));
+}
+/**
+ * Weekly class-schedule grid. Renders a 7-column (or 5-column when
+ * `showWeekendCols` is `false`) timetable with hour rows down the left
+ * and absolutely positioned event tiles inside each day column. Events
+ * that overlap on the same weekday are split into side-by-side lanes.
+ *
+ * Suitable for school timetables, virtual-classroom schedules, gym
+ * class calendars, conference tracks, or any weekly recurring time
+ * grid.
+ *
+ * @param props - Component props.
+ * @param props.events - Events to render.
+ * @param props.weekStartsOn - First day-of-week (`0` Sun, `1` Mon).
+ * @param props.dayHours - Visible hour range `[start, end]`.
+ * @param props.cellHeight - Pixel height per hour row.
+ * @param props.showWeekendCols - Hide Sat + Sun when `false`.
+ * @param props.locale - Locale for weekday names.
+ * @param props.onEventClick - Click handler for event tiles.
+ * @param props.onSlotClick - Click handler for empty grid cells.
+ * @param props.className - Extra classes for the root container.
+ * @returns The rendered schedule grid.
+ */
+export function ClassSchedule({ events, weekStartsOn = 1, dayHours = [8, 18], cellHeight = 60, showWeekendCols = true, locale, onEventClick, onSlotClick, className, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const [startHour, endHour] = dayHours;
+    const safeStart = Math.max(0, Math.min(23, Math.floor(startHour)));
+    const safeEnd = Math.max(safeStart + 1, Math.min(24, Math.floor(endHour)));
+    const startMinutes = safeStart * MINUTES_PER_HOUR;
+    const endMinutes = safeEnd * MINUTES_PER_HOUR;
+    const totalMinutes = endMinutes - startMinutes;
+    const hourCount = safeEnd - safeStart;
+    // Column ordering: rotate weekdays so `weekStartsOn` is first.
+    const allWeekdays = [0, 1, 2, 3, 4, 5, 6];
+    const rotated = [
+        ...allWeekdays.slice(weekStartsOn),
+        ...allWeekdays.slice(0, weekStartsOn),
+    ];
+    const visibleWeekdays = showWeekendCols ? rotated : rotated.filter((d) => !WEEKEND_DAYS.has(d));
+    // Localized weekday header. Use a known reference Sunday (1970-01-04 was a Sunday)
+    // so each weekday number maps to a real Date the formatter can render.
+    const weekdayFmt = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+    /**
+     * Returns the localized short weekday name for a given ISO weekday number.
+     *
+     * @param weekday - ISO weekday number (0 = Sunday … 6 = Saturday).
+     * @returns Localized short weekday name, e.g. `"Mon"`.
+     */
+    function weekdayLabel(weekday) {
+        // 1970-01-04 = Sunday → add `weekday` days to get the right name.
+        return weekdayFmt.format(new Date(Date.UTC(1970, 0, 4 + weekday)));
+    }
+    // Group events by weekday + run lane assignment per day.
+    const eventsByDay = new Map();
+    for (const event of events) {
+        if (!visibleWeekdays.includes(event.weekday))
+            continue;
+        const list = eventsByDay.get(event.weekday) ?? [];
+        list.push(event);
+        eventsByDay.set(event.weekday, list);
+    }
+    const totalHeightPx = hourCount * cellHeight;
+    return (_jsx("div", { className: cm.cn(className), "data-mol-id": "class-schedule", role: "grid", "aria-label": t('classSchedule.aria.region', {}, { defaultValue: 'Weekly class schedule' }), children: _jsxs("div", { className: cm.cn(cm.grid({ cols: visibleWeekdays.length + 1, gap: 'none' })), style: {
+                gridTemplateColumns: `auto repeat(${visibleWeekdays.length}, minmax(0, 1fr))`,
+            }, children: [_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.fontWeight('semibold'), cm.sp('p', 2)), "aria-hidden": "true" }), visibleWeekdays.map((weekday) => (_jsx("div", { role: "columnheader", "data-mol-id": "class-schedule-day-header", "data-weekday": weekday, className: cm.cn(cm.textSize('xs'), cm.fontWeight('semibold'), cm.textCenter, cm.sp('p', 2)), children: weekdayLabel(weekday) }, `head-${weekday}`))), _jsx("div", { "data-mol-id": "class-schedule-time-axis", className: cm.cn(cm.position('relative')), style: { height: `${totalHeightPx}px` }, children: Array.from({ length: hourCount }).map((_, i) => {
+                        const hourMinutes = startMinutes + i * MINUTES_PER_HOUR;
+                        return (_jsx("div", { "data-mol-id": "class-schedule-hour-label", className: cm.cn(cm.textSize('xs'), cm.sp('px', 2)), style: {
+                                position: 'absolute',
+                                top: `${i * cellHeight}px`,
+                                height: `${cellHeight}px`,
+                                right: 0,
+                                left: 0,
+                                textAlign: 'right',
+                            }, children: formatHourLabel(hourMinutes) }, `hour-${i}`));
+                    }) }), visibleWeekdays.map((weekday) => {
+                    const dayEvents = eventsByDay.get(weekday) ?? [];
+                    const laned = assignLanes(dayEvents);
+                    return (_jsxs("div", { role: "presentation", "data-mol-id": "class-schedule-day-column", "data-weekday": weekday, className: cm.cn(cm.position('relative')), style: { height: `${totalHeightPx}px` }, children: [Array.from({ length: hourCount }).map((_, i) => {
+                                const slotStart = startMinutes + i * MINUTES_PER_HOUR;
+                                return (_jsx("button", { type: "button", "data-mol-id": "class-schedule-slot", "data-weekday": weekday, "data-start": slotStart, "aria-label": t('classSchedule.aria.slot', { weekday: weekdayLabel(weekday), time: formatHourLabel(slotStart) }, { defaultValue: 'Empty slot, {{weekday}} {{time}}' }), onClick: () => onSlotClick?.({ weekday, start: slotStart }), style: {
+                                        position: 'absolute',
+                                        top: `${i * cellHeight}px`,
+                                        left: 0,
+                                        right: 0,
+                                        height: `${cellHeight}px`,
+                                        background: 'transparent',
+                                        border: 0,
+                                        padding: 0,
+                                        cursor: onSlotClick ? 'pointer' : 'default',
+                                    } }, `slot-${weekday}-${i}`));
+                            }), laned.map(({ event, lane, lanes }) => {
+                                const eventStart = Math.max(event.start, startMinutes);
+                                const eventEnd = Math.min(event.end, endMinutes);
+                                if (eventEnd <= eventStart)
+                                    return null;
+                                const topPx = ((eventStart - startMinutes) / totalMinutes) * totalHeightPx;
+                                const heightPx = ((eventEnd - eventStart) / totalMinutes) * totalHeightPx;
+                                const leftPct = (lane / lanes) * 100;
+                                const widthPct = (1 / lanes) * 100;
+                                return (_jsxs("button", { type: "button", "data-mol-id": "class-schedule-event", "data-event-id": event.id, "aria-label": t('classSchedule.aria.event', {
+                                        weekday: weekdayLabel(weekday),
+                                        start: formatHourLabel(event.start),
+                                        end: formatHourLabel(event.end),
+                                    }, { defaultValue: '{{weekday}} {{start}} – {{end}}' }), onClick: () => onEventClick?.(event), className: cm.cn(cm.flex({ direction: 'col', align: 'start' }), cm.sp('p', 1), cm.textSize('xs'), cm.fontWeight('semibold')), style: {
+                                        position: 'absolute',
+                                        top: `${topPx}px`,
+                                        height: `${heightPx}px`,
+                                        left: `calc(${leftPct}% + 2px)`,
+                                        width: `calc(${widthPct}% - 4px)`,
+                                        overflow: 'hidden',
+                                        textAlign: 'left',
+                                        cursor: onEventClick ? 'pointer' : 'default',
+                                        borderLeft: event.accentColor ? `3px solid ${event.accentColor}` : undefined,
+                                    }, children: [_jsx("span", { "data-mol-id": "class-schedule-event-title", children: event.title }), event.subtitle && (_jsx("span", { "data-mol-id": "class-schedule-event-subtitle", className: cm.cn(cm.textSize('xs'), cm.fontWeight('normal')), children: event.subtitle })), event.meta && (_jsx("span", { "data-mol-id": "class-schedule-event-meta", className: cm.cn(cm.textSize('xs'), cm.fontWeight('normal')), children: event.meta }))] }, event.id));
+                            })] }, `col-${weekday}`));
+                })] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Weekly class-schedule grid.
+ *
+ * Renders a 7-day × N-hour time grid with absolutely positioned event
+ * tiles inside each day column. Overlapping events on the same weekday
+ * are split into side-by-side lanes. Click handlers fire separately for
+ * event tiles and empty time slots.
+ *
+ * Designed for school timetables, virtual classroom schedules, gym /
+ * studio class calendars, conference tracks, and any other weekly
+ * recurring time-of-day grid.
+ *
+ * @example
+ * ```tsx
+ * import { ClassSchedule } from '@molecule/app-class-schedule-react'
+ *
+ * <ClassSchedule
+ *   events={[
+ *     { id: 'math',  weekday: 1, start: 9 * 60,  end: 10 * 60, title: 'Math 101', subtitle: 'Room 4B' },
+ *     { id: 'eng',   weekday: 3, start: 11 * 60, end: 12 * 60, title: 'English',  subtitle: 'Room 12' },
+ *   ]}
+ *   onEventClick={(e) => console.log('clicked', e.id)}
+ *   onSlotClick={(s) => console.log('empty slot', s)}
+ * />
+ * ```
+ *
+ * @remarks
+ * Pair with `@molecule/app-locales-class-schedule` for translations
+ * in 79 languages. All styling routes through `getClassMap()`; all
+ * user-facing text routes through `t()`.
+ *
+ * @module
+ */
+export * from './ClassSchedule.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,cAAc,oBAAoB,CAAA"}

package/dist/index.js

@@ -0,0 +1,34 @@
+/**
+ * Weekly class-schedule grid.
+ *
+ * Renders a 7-day × N-hour time grid with absolutely positioned event
+ * tiles inside each day column. Overlapping events on the same weekday
+ * are split into side-by-side lanes. Click handlers fire separately for
+ * event tiles and empty time slots.
+ *
+ * Designed for school timetables, virtual classroom schedules, gym /
+ * studio class calendars, conference tracks, and any other weekly
+ * recurring time-of-day grid.
+ *
+ * @example
+ * ```tsx
+ * import { ClassSchedule } from '@molecule/app-class-schedule-react'
+ *
+ * <ClassSchedule
+ *   events={[
+ *     { id: 'math',  weekday: 1, start: 9 * 60,  end: 10 * 60, title: 'Math 101', subtitle: 'Room 4B' },
+ *     { id: 'eng',   weekday: 3, start: 11 * 60, end: 12 * 60, title: 'English',  subtitle: 'Room 12' },
+ *   ]}
+ *   onEventClick={(e) => console.log('clicked', e.id)}
+ *   onSlotClick={(s) => console.log('empty slot', s)}
+ * />
+ * ```
+ *
+ * @remarks
+ * Pair with `@molecule/app-locales-class-schedule` for translations
+ * in 79 languages. All styling routes through `getClassMap()`; all
+ * user-facing text routes through `t()`.
+ *
+ * @module
+ */
+export * from './ClassSchedule.js';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@molecule/app-class-schedule-react",
+  "version": "1.0.0",
+  "description": "Weekly class-schedule grid — 7-day × N-hour time grid with absolutely positioned events, click-event vs click-empty-slot dispatch, side-by-side stacking for overlaps",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "class-schedule",
+    "weekly-schedule",
+    "timetable",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-i18n": "1.0.0",
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "jsdom": "30.0.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}