@intinyagroup/calendar 0.1.1-alpha.22 → 0.1.1-alpha.24

package/dist/DatePicker.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
-  import * as Popover from '@intinyagroup/ui';
-  import { Button, Input } from '@intinyagroup/ui';
-  import Calendar, { type CalendarDate } from './Calendar.svelte';
-  import { Calendar as CalendarIcon, X } from 'lucide-svelte';
-  import { cn } from '@intinyagroup/ui/utils';
+  import {
+    Popover as PopoverRoot,
+    PopoverTrigger,
+    PopoverContent,
+    Button,
+    Input,
+  } from "@intinyagroup/ui";
+  const Popover = {
+    Root: PopoverRoot,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+  };
+  import Calendar, { type CalendarDate } from "./Calendar.svelte";
+  import { Calendar as CalendarIcon, X } from "lucide-svelte";
+  import { cn } from "@intinyagroup/ui/utils";
 
   let {
     value = $bindable(null),
-    placeholder = 'Select date...',
+    placeholder = "Select date...",
     disabled = false,
     class: className,
     onSelect,
@@ -22,9 +32,13 @@
   let open = $state(false);
 
   function formatDateDisplay(date: CalendarDate | null): string {
-    if (!date) return '';
+    if (!date) return "";
     const d = new Date(date.year, date.month, date.day);
-    return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+    return d.toLocaleDateString("en-GB", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
   }
 
   function handleSelect(date: CalendarDate) {
@@ -45,14 +59,14 @@
       <button
         {...props}
         class={cn(
-          'flex h-10 w-full items-center justify-between rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 py-2 text-sm text-[var(--ui-foreground)] transition-colors cursor-pointer',
-          'hover:border-[var(--ui-primary)]/50 focus:border-[var(--ui-primary)] focus:ring-2 focus:ring-[var(--ui-ring)]/20',
-          disabled && 'opacity-50 cursor-not-allowed',
-          className
+          "flex h-10 w-full items-center justify-between rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 py-2 text-sm text-[var(--ui-foreground)] transition-colors cursor-pointer",
+          "hover:border-[var(--ui-primary)]/50 focus:border-[var(--ui-primary)] focus:ring-2 focus:ring-[var(--ui-ring)]/20",
+          disabled && "opacity-50 cursor-not-allowed",
+          className,
         )}
         {disabled}
       >
-        <span class={cn(!value && 'text-[var(--ui-muted-foreground)]')}>
+        <span class={cn(!value && "text-[var(--ui-muted-foreground)]")}>
           {value ? formatDateDisplay(value) : placeholder}
         </span>
         <CalendarIcon class="size-4 text-[var(--ui-muted-foreground)]" />

package/dist/DatePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CalendarDate } from './Calendar.svelte';
+import { type CalendarDate } from "./Calendar.svelte";
 type $$ComponentProps = {
     value?: CalendarDate | null;
     placeholder?: string;

package/dist/DateRangePicker.svelte

@@ -329,6 +329,7 @@
 
           <div
             role="gridcell"
+            tabindex="-1"
             aria-selected={isEdge}
             class={cn(
               "relative py-0.5 flex items-center justify-center",

package/dist/EventCalendar.svelte

@@ -27,8 +27,13 @@
     format,
   } from "date-fns";
   import { id as localeId, enUS as localeEn } from "date-fns/locale";
+  import {
+    expandRecurringEvents,
+    type CalendarRecurrence,
+    type CalendarResource,
+  } from "./recurrence";
 
-  export type CalendarView = "month" | "week" | "day";
+  export type CalendarView = "month" | "week" | "day" | "resourceTimeline";
 
   export type CalendarEvent = {
     id: string;
@@ -38,6 +43,10 @@
     color?: string;
     description?: string;
     allDay?: boolean;
+    /** Optional minimal recurrence. See CalendarRecurrence for supported semantics. */
+    recurrence?: CalendarRecurrence;
+    /** Resource row used by resourceTimeline view. */
+    resourceId?: string;
   };
 
   let {
@@ -48,6 +57,9 @@
     timeZone,
     firstDayOfWeek = 0, // 0 = Sunday, 1 = Monday
     enableEventModal = true,
+    resources = [],
+    resourceTimelineStartHour = 0,
+    resourceTimelineEndHour = 24,
     class: className,
     onEventClick,
     onDateClick,
@@ -62,6 +74,9 @@
     timeZone?: string;
     firstDayOfWeek?: number;
     enableEventModal?: boolean;
+    resources?: CalendarResource[];
+    resourceTimelineStartHour?: number;
+    resourceTimelineEndHour?: number;
     class?: string;
     onEventClick?: (event: CalendarEvent) => void;
     onDateClick?: (date: Date) => void;
@@ -300,6 +315,78 @@
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
   }
+  const visibleRange = $derived.by(() => {
+    if (view === "month") {
+      const start = startOfWeek(startOfMonth(currentDate), { weekStartsOn });
+      const end = endOfWeek(endOfMonth(currentDate), { weekStartsOn });
+      return { start, end };
+    }
+    if (view === "week") {
+      return {
+        start: startOfWeek(currentDate, { weekStartsOn }),
+        end: endOfWeek(currentDate, { weekStartsOn }),
+      };
+    }
+    return {
+      start: new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        currentDate.getDate(),
+      ),
+      end: new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        currentDate.getDate() + 1,
+      ),
+    };
+  });
+
+  // Recurrence expansion stays viewport-bounded, preserving existing event APIs.
+  const displayEvents = $derived(
+    expandRecurringEvents(events, visibleRange.start, visibleRange.end),
+  );
+
+  function getResourceEvents(resourceId: string): CalendarEvent[] {
+    return displayEvents.filter((event) => {
+      if (event.resourceId !== resourceId) return false;
+      const start = new Date(event.start);
+      const end = new Date(event.end);
+      const dayStart = new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        currentDate.getDate(),
+      );
+      const dayEnd = new Date(dayStart.getTime() + 24 * 60 * 60 * 1000);
+      return end >= dayStart && start <= dayEnd;
+    });
+  }
+
+  function timelinePosition(date: Date): number {
+    const start = Math.min(23, Math.max(0, resourceTimelineStartHour));
+    const end = Math.max(start + 1, Math.min(24, resourceTimelineEndHour));
+    const total = (end - start) * 60;
+    const local = getTimeInZone(date).hours * 60 + getTimeInZone(date).minutes;
+    return ((local - start * 60) / total) * 100;
+  }
+
+  function timelineWidth(event: CalendarEvent): number {
+    const start = Math.min(23, Math.max(0, resourceTimelineStartHour));
+    const end = Math.max(start + 1, Math.min(24, resourceTimelineEndHour));
+    const total = (end - start) * 60;
+    const begin = getTimeInZone(new Date(event.start));
+    const finish = getTimeInZone(new Date(event.end));
+    const duration = Math.max(
+      15,
+      finish.hours * 60 + finish.minutes - (begin.hours * 60 + begin.minutes),
+    );
+    return (duration / total) * 100;
+  }
+
+  const timelineHours = $derived.by(() => {
+    const start = Math.min(23, Math.max(0, resourceTimelineStartHour));
+    const end = Math.max(start + 1, Math.min(24, resourceTimelineEndHour));
+    return Array.from({ length: end - start }, (_, index) => start + index);
+  });
 
   type LayoutEvent = CalendarEvent & {
     colIndex: number;
@@ -421,9 +508,8 @@
   });
 
   function getEventsForDay(d: Date): CalendarEvent[] {
-    return events.filter((ev) => {
+    return displayEvents.filter((ev) => {
       if (isSameDay(new Date(ev.start), d)) return true;
-      // Multi-day spanning: check if date falls between start and end
       const s = new Date(ev.start);
       const e = new Date(ev.end);
       return d >= s && d <= e;
@@ -431,13 +517,13 @@
   }
 
   function getTimedEventsForDay(d: Date): CalendarEvent[] {
-    return events.filter(
+    return displayEvents.filter(
       (ev) => !isMultiDayOrAllDay(ev) && isSameDay(new Date(ev.start), d),
     );
   }
 
   function getAllDayEventsForWeek(days: Date[]): CalendarEvent[] {
-    return events.filter((ev) => {
+    return displayEvents.filter((ev) => {
       if (!isMultiDayOrAllDay(ev)) return false;
       const s = new Date(ev.start);
       const e = new Date(ev.end);
@@ -626,6 +712,19 @@
           <Clock class="size-4 sm:hidden" />
           <span class="hidden sm:inline">Day</span>
         </button>
+        <button
+          type="button"
+          onclick={() => (view = "resourceTimeline")}
+          class={cn(
+            "rounded-md px-2 sm:px-3 py-1 text-xs font-semibold transition-colors cursor-pointer",
+            view === "resourceTimeline"
+              ? "bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs"
+              : "text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]",
+          )}
+        >
+          <span class="hidden sm:inline">Resources</span>
+          <span class="sm:hidden">Rows</span>
+        </button>
       </div>
 
       {#if enableEventModal}
@@ -957,7 +1056,7 @@
         Swipe to see more days
       </div>
     {/if}
-  {:else}
+  {:else if view === "day"}
     <!-- DAY VIEW -->
     <div
       class="p-3 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 flex items-center justify-between"
@@ -1098,8 +1197,106 @@
         {/if}
       </div>
     </div>
+  {:else if view === "resourceTimeline"}
+    <div
+      class="border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 px-4 py-2 text-xs text-[var(--ui-muted-foreground)]"
+    >
+      Resource timeline · {format(currentDate, "dd MMMM yyyy", {
+        locale: activeDateFnsLocale,
+      })}
+    </div>
+    {#if resources.length === 0}
+      <div class="p-8 text-center text-sm text-[var(--ui-muted-foreground)]">
+        Add resources to render warehouse, user, or room schedules.
+      </div>
+    {:else}
+      <div class="overflow-x-auto">
+        <div class="min-w-[760px]">
+          <div
+            class="grid grid-cols-[180px_1fr] border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 text-[10px] font-semibold text-[var(--ui-muted-foreground)]"
+          >
+            <div class="border-r border-[var(--ui-border)] px-3 py-2">
+              Resource
+            </div>
+            <div
+              class="relative grid"
+              style="grid-template-columns: repeat({timelineHours.length}, minmax(0, 1fr));"
+            >
+              {#each timelineHours as hour}
+                <div
+                  class="border-r border-[var(--ui-border)] px-1 py-2 text-center"
+                >
+                  {String(hour).padStart(2, "0")}:00
+                </div>
+              {/each}
+            </div>
+          </div>
+          {#each resources as resource (resource.id)}
+            {@const resourceEvents = getResourceEvents(resource.id)}
+            <div
+              class="grid min-h-16 grid-cols-[180px_1fr] border-b border-[var(--ui-border)]"
+            >
+              <div class="border-r border-[var(--ui-border)] px-3 py-3">
+                <div class="text-xs font-semibold text-[var(--ui-foreground)]">
+                  {resource.label}
+                </div>
+                {#if resource.description}<div
+                    class="mt-0.5 truncate text-[10px] text-[var(--ui-muted-foreground)]"
+                  >
+                    {resource.description}
+                  </div>{/if}
+              </div>
+              <div
+                role="button"
+                tabindex="0"
+                class="relative min-h-16 bg-[var(--ui-card)]"
+                onclick={() => onDateClick?.(currentDate)}
+                onkeydown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    onDateClick?.(currentDate);
+                  }
+                }}
+              >
+                <div
+                  class="pointer-events-none absolute inset-0 grid"
+                  style="grid-template-columns: repeat({timelineHours.length}, minmax(0, 1fr));"
+                >
+                  {#each timelineHours as _hour}<div
+                      class="border-r border-[var(--ui-border)]/50"
+                    ></div>{/each}
+                </div>
+                {#each resourceEvents as ev (ev.id)}
+                  <button
+                    type="button"
+                    class="absolute top-2 h-12 min-w-4 truncate rounded px-2 text-left text-[10px] font-semibold text-white shadow-xs hover:opacity-90"
+                    style="left: {Math.max(
+                      0,
+                      timelinePosition(new Date(ev.start)),
+                    )}%; width: {Math.max(
+                      2,
+                      Math.min(100, timelineWidth(ev)),
+                    )}%; background-color: {ev.color ||
+                      resource.color ||
+                      'var(--ui-primary)'};"
+                    onclick={(event) => {
+                      event.stopPropagation();
+                      onEventClick?.(ev);
+                    }}
+                  >
+                    <span>{ev.title}</span>
+                    <span class="ml-1 font-normal opacity-80"
+                      >{formatTime(ev.start)}</span
+                    >
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
   {/if}
-
   <!-- Quick Event Creation Modal -->
   {#if modalOpen}
     <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/EventCalendar.svelte.d.ts

@@ -1,4 +1,5 @@
-export type CalendarView = "month" | "week" | "day";
+import { type CalendarRecurrence, type CalendarResource } from "./recurrence";
+export type CalendarView = "month" | "week" | "day" | "resourceTimeline";
 export type CalendarEvent = {
     id: string;
     title: string;
@@ -7,6 +8,10 @@ export type CalendarEvent = {
     color?: string;
     description?: string;
     allDay?: boolean;
+    /** Optional minimal recurrence. See CalendarRecurrence for supported semantics. */
+    recurrence?: CalendarRecurrence;
+    /** Resource row used by resourceTimeline view. */
+    resourceId?: string;
 };
 type $$ComponentProps = {
     events?: CalendarEvent[];
@@ -16,6 +21,9 @@ type $$ComponentProps = {
     timeZone?: string;
     firstDayOfWeek?: number;
     enableEventModal?: boolean;
+    resources?: CalendarResource[];
+    resourceTimelineStartHour?: number;
+    resourceTimelineEndHour?: number;
     class?: string;
     onEventClick?: (event: CalendarEvent) => void;
     onDateClick?: (date: Date) => void;

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-export { default as Calendar } from './Calendar.svelte';
-export { default as DatePicker } from './DatePicker.svelte';
-export { default as DateRangePicker } from './DateRangePicker.svelte';
-export { default as EventCalendar } from './EventCalendar.svelte';
-export type { CalendarDate } from './Calendar.svelte';
-export type { DateRange } from './DateRangePicker.svelte';
-export type { CalendarEvent, CalendarView } from './EventCalendar.svelte';
+export { default as Calendar } from "./Calendar.svelte";
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
+export { default as EventCalendar } from "./EventCalendar.svelte";
+export type { CalendarDate } from "./Calendar.svelte";
+export type { DateRange } from "./DateRangePicker.svelte";
+export type { CalendarEvent, CalendarView } from "./EventCalendar.svelte";
+export { expandRecurringEvent, expandRecurringEvents } from "./recurrence";
+export type { CalendarRecurrence, CalendarRecurrenceFrequency, CalendarResource, RecurringCalendarEvent, } from "./recurrence";

package/dist/index.js

@@ -1,4 +1,5 @@
-export { default as Calendar } from './Calendar.svelte';
-export { default as DatePicker } from './DatePicker.svelte';
-export { default as DateRangePicker } from './DateRangePicker.svelte';
-export { default as EventCalendar } from './EventCalendar.svelte';
+export { default as Calendar } from "./Calendar.svelte";
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
+export { default as EventCalendar } from "./EventCalendar.svelte";
+export { expandRecurringEvent, expandRecurringEvents } from "./recurrence";

package/dist/recurrence.d.ts

@@ -0,0 +1,31 @@
+import type { CalendarEvent } from "./EventCalendar";
+/** Supported recurrence frequencies. This is intentionally smaller than RFC 5545 RRULE. */
+export type CalendarRecurrenceFrequency = "daily" | "weekly" | "monthly" | "yearly";
+/**
+ * Minimal RRULE-like recurrence model.
+ *
+ * Only frequency, interval, until, and count are supported. BYDAY, BYMONTHDAY,
+ * EXDATE, timezone transition rules, and other RFC 5545 semantics are not
+ * implemented. `until` is inclusive and `count` counts generated occurrences.
+ */
+export type CalendarRecurrence = {
+    frequency: CalendarRecurrenceFrequency;
+    interval?: number;
+    until?: Date;
+    count?: number;
+};
+/** Resource displayed as a row in `resourceTimeline` view. */
+export type CalendarResource = {
+    id: string;
+    label: string;
+    description?: string;
+    color?: string;
+};
+export type RecurringCalendarEvent = CalendarEvent & {
+    recurrence?: CalendarRecurrence;
+    resourceId?: string;
+};
+/** Expand one event into occurrences intersecting inclusive range. */
+export declare function expandRecurringEvent(event: RecurringCalendarEvent, rangeStart: Date, rangeEnd: Date): CalendarEvent[];
+/** Expand recurring events for a calendar viewport. Non-recurring events pass through. */
+export declare function expandRecurringEvents(events: RecurringCalendarEvent[], rangeStart: Date, rangeEnd: Date): CalendarEvent[];

package/dist/recurrence.js

@@ -0,0 +1,57 @@
+function addOccurrence(date, recurrence) {
+    const result = new Date(date);
+    const interval = Math.max(1, Math.floor(recurrence.interval ?? 1));
+    if (recurrence.frequency === "daily")
+        result.setDate(result.getDate() + interval);
+    else if (recurrence.frequency === "weekly")
+        result.setDate(result.getDate() + interval * 7);
+    else if (recurrence.frequency === "monthly")
+        result.setMonth(result.getMonth() + interval);
+    else
+        result.setFullYear(result.getFullYear() + interval);
+    return result;
+}
+/** Expand one event into occurrences intersecting inclusive range. */
+export function expandRecurringEvent(event, rangeStart, rangeEnd) {
+    if (!event.recurrence)
+        return [event];
+    const recurrence = event.recurrence;
+    const duration = new Date(event.end).getTime() - new Date(event.start).getTime();
+    const until = recurrence.until
+        ? new Date(recurrence.until).getTime()
+        : Infinity;
+    const maxCount = recurrence.count === undefined
+        ? Infinity
+        : Math.max(0, Math.floor(recurrence.count));
+    const occurrences = [];
+    let occurrenceStart = new Date(event.start);
+    let index = 0;
+    // Guard malformed input while keeping expansion deterministic for UI rendering.
+    while (index < maxCount && occurrenceStart.getTime() <= until) {
+        const occurrenceEnd = new Date(occurrenceStart.getTime() + duration);
+        if (occurrenceEnd.getTime() >= rangeStart.getTime() &&
+            occurrenceStart.getTime() <= rangeEnd.getTime()) {
+            occurrences.push({
+                ...event,
+                id: index === 0 ? event.id : `${event.id}::${occurrenceStart.getTime()}`,
+                start: occurrenceStart,
+                end: occurrenceEnd,
+            });
+        }
+        index += 1;
+        const nextStart = addOccurrence(occurrenceStart, recurrence);
+        if (nextStart.getTime() <= occurrenceStart.getTime())
+            break;
+        occurrenceStart = nextStart;
+        // No need to iterate unbounded future occurrences after range end.
+        if (occurrenceStart.getTime() > rangeEnd.getTime() &&
+            !recurrence.until &&
+            recurrence.count === undefined)
+            break;
+    }
+    return occurrences;
+}
+/** Expand recurring events for a calendar viewport. Non-recurring events pass through. */
+export function expandRecurringEvents(events, rangeStart, rangeEnd) {
+    return events.flatMap((event) => expandRecurringEvent(event, rangeStart, rangeEnd));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intinyagroup/calendar",
-  "version": "0.1.1-alpha.22",
+  "version": "0.1.1-alpha.24",
   "description": "Calendar and DatePicker components for intinyagroup UI",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@intinyagroup/ui": "0.1.1-alpha.19",
+    "@intinyagroup/ui": "0.1.1-alpha.21",
     "date-fns": "^4.4.0",
     "lucide-svelte": "^1.0.1"
   },