@intinyagroup/calendar 0.1.1-alpha.11

package/dist/Calendar.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+  import { Button } from '@intinyagroup/ui';
+  import { cn } from '@intinyagroup/ui/utils';
+
+  export type CalendarDate = { year: number; month: number; day: number };
+
+  let {
+    value = $bindable(null),
+    min = null,
+    max = null,
+    disabled = false,
+    class: className,
+    onSelect,
+  }: {
+    value?: CalendarDate | null;
+    min?: CalendarDate | null;
+    max?: CalendarDate | null;
+    disabled?: boolean;
+    class?: string;
+    onSelect?: (date: CalendarDate) => void;
+  } = $props();
+
+  const today = new Date();
+  let viewYear = $state(value?.year ?? today.getFullYear());
+  let viewMonth = $state(value?.month ?? today.getMonth());
+
+  const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+  const dayNames = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+  const daysInMonth = $derived(new Date(viewYear, viewMonth + 1, 0).getDate());
+  const firstDayOfMonth = $derived(new Date(viewYear, viewMonth, 1).getDay());
+
+  const calendarDays = $derived.by(() => {
+    const days: { day: number; currentMonth: boolean; date: CalendarDate }[] = [];
+    const prevMonthDays = new Date(viewYear, viewMonth, 0).getDate();
+    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+      const day = prevMonthDays - i;
+      const month = viewMonth === 0 ? 11 : viewMonth - 1;
+      const year = viewMonth === 0 ? viewYear - 1 : viewYear;
+      days.push({ day, currentMonth: false, date: { year, month, day } });
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push({ day, currentMonth: true, date: { year: viewYear, month: viewMonth, day } });
+    }
+    const remaining = 42 - days.length;
+    for (let day = 1; day <= remaining; day++) {
+      const month = viewMonth === 11 ? 0 : viewMonth + 1;
+      const year = viewMonth === 11 ? viewYear + 1 : viewYear;
+      days.push({ day, currentMonth: false, date: { year, month, day } });
+    }
+    return days;
+  });
+
+  function isSameDate(a: CalendarDate | null, b: CalendarDate) {
+    return a?.year === b.year && a?.month === b.month && a?.day === b.day;
+  }
+  function isToday(date: CalendarDate) {
+    return date.year === today.getFullYear() && date.month === today.getMonth() && date.day === today.getDate();
+  }
+  function isDisabled(date: CalendarDate) {
+    if (min && (date.year < min.year || (date.year === min.year && date.month < min.month) || (date.year === min.year && date.month === min.month && date.day < min.day))) return true;
+    if (max && (date.year > max.year || (date.year === max.year && date.month > max.month) || (date.year === max.year && date.month === max.month && date.day > max.day))) return true;
+    return false;
+  }
+  function prevMonth() { if (viewMonth === 0) { viewMonth = 11; viewYear--; } else { viewMonth--; } }
+  function nextMonth() { if (viewMonth === 11) { viewMonth = 0; viewYear++; } else { viewMonth++; } }
+  function selectDate(date: CalendarDate) { if (disabled || isDisabled(date)) return; value = date; onSelect?.(date); }
+  function goToday() { viewYear = today.getFullYear(); viewMonth = today.getMonth(); selectDate({ year: today.getFullYear(), month: today.getMonth(), day: today.getDate() }); }
+</script>
+
+<div class={cn('inline-flex flex-col rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] p-4 shadow-sm', className)}>
+  <div class="flex items-center justify-between mb-4">
+    <Button variant="ghost" size="sm" onclick={prevMonth} {disabled}><ChevronLeft class="size-4" /></Button>
+    <div class="flex items-center gap-2">
+      <span class="text-sm font-semibold text-[var(--ui-foreground)]">{monthNames[viewMonth]} {viewYear}</span>
+      <Button variant="ghost" size="sm" onclick={goToday} {disabled} class="text-xs h-6 px-2">Today</Button>
+    </div>
+    <Button variant="ghost" size="sm" onclick={nextMonth} {disabled}><ChevronRight class="size-4" /></Button>
+  </div>
+
+  <div class="grid grid-cols-7 gap-1 mb-2">
+    {#each dayNames as d}<div class="text-center text-[11px] font-medium text-[var(--ui-muted-foreground)] py-1">{d}</div>{/each}
+  </div>
+
+  <div class="grid grid-cols-7 gap-1">
+    {#each calendarDays as { day, currentMonth, date } (date.year + '-' + date.month + '-' + date.day)}
+      {@const isSelected = isSameDate(value, date)}
+      {@const isTodayDate = isToday(date)}
+      {@const isDisabledDate = isDisabled(date)}
+      <button
+        onclick={() => selectDate(date)}
+        disabled={disabled || isDisabledDate}
+        class="flex items-center justify-center size-9 rounded-lg text-sm transition-colors cursor-pointer
+          {isSelected ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] font-semibold' : ''}
+          {!isSelected && currentMonth ? 'text-[var(--ui-foreground)] hover:bg-[var(--ui-secondary)]' : ''}
+          {!isSelected && !currentMonth ? 'text-[var(--ui-muted-foreground)]/40' : ''}
+          {isTodayDate && !isSelected ? 'ring-2 ring-[var(--ui-primary)]/30 font-medium' : ''}
+          {isDisabledDate || disabled ? 'opacity-40 cursor-not-allowed' : ''}"
+      >{day}</button>
+    {/each}
+  </div>
+</div>

package/dist/Calendar.svelte.d.ts

@@ -0,0 +1,16 @@
+export type CalendarDate = {
+    year: number;
+    month: number;
+    day: number;
+};
+type $$ComponentProps = {
+    value?: CalendarDate | null;
+    min?: CalendarDate | null;
+    max?: CalendarDate | null;
+    disabled?: boolean;
+    class?: string;
+    onSelect?: (date: CalendarDate) => void;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/DatePicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import * as Popover from '@intinyagroup/ui';
+  import { Button, Input } from '@intinyagroup/ui';
+  import { Calendar, type CalendarDate } from '@intinyagroup/calendar';
+  import { Calendar as CalendarIcon, X } from 'lucide-svelte';
+  import { cn } from '@intinyagroup/grid-core/utils';
+
+  let {
+    value = $bindable(null),
+    placeholder = 'Select date...',
+    disabled = false,
+    class: className,
+    onSelect,
+  }: {
+    value?: CalendarDate | null;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    onSelect?: (date: CalendarDate) => void;
+  } = $props();
+
+  let open = $state(false);
+
+  function formatDateDisplay(date: CalendarDate | null): string {
+    if (!date) return '';
+    const d = new Date(date.year, date.month, date.day);
+    return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+  }
+
+  function handleSelect(date: CalendarDate) {
+    value = date;
+    onSelect?.(date);
+    open = false;
+  }
+
+  function clear() {
+    value = null;
+    onSelect?.(null as any);
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <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
+        )}
+        {disabled}
+      >
+        <span class={cn(!value && 'text-[var(--ui-muted-foreground)]')}>
+          {value ? formatDateDisplay(value) : placeholder}
+        </span>
+        <CalendarIcon class="size-4 text-[var(--ui-muted-foreground)]" />
+      </button>
+    {/snippet}
+  </Popover.Trigger>
+
+  <Popover.Content align="start" class="w-auto p-0">
+    <Calendar {value} onSelect={handleSelect} />
+    {#if value}
+      <div class="flex justify-end p-2 border-t border-[var(--ui-border)]">
+        <Button variant="ghost" size="sm" onclick={clear}>
+          <X class="size-3.5 mr-1" /> Clear
+        </Button>
+      </div>
+    {/if}
+  </Popover.Content>
+</Popover.Root>

package/dist/DatePicker.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type CalendarDate } from '@intinyagroup/calendar';
+type $$ComponentProps = {
+    value?: CalendarDate | null;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    onSelect?: (date: CalendarDate) => void;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/DateRangePicker.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+  import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, X } from 'lucide-svelte';
+  import { Button } from '@intinyagroup/ui';
+  import { cn } from '@intinyagroup/ui/utils';
+  import {
+    addMonths,
+    subMonths,
+    addDays,
+    subDays,
+    startOfMonth,
+    endOfMonth,
+    startOfWeek,
+    endOfWeek,
+    eachDayOfInterval,
+    isSameDay,
+    isSameMonth,
+    isWithinInterval,
+    isBefore,
+    format
+  } from 'date-fns';
+  import { id as localeId, enUS as localeEn } from 'date-fns/locale';
+
+  export type CalendarDate = { year: number; month: number; day: number };
+  export type DateRange = {
+    start: CalendarDate | null;
+    end: CalendarDate | null;
+  };
+
+  export type DateRangePreset = {
+    label: string;
+    range: DateRange;
+  };
+
+  let {
+    value = $bindable({ start: null, end: null }),
+    min = null,
+    max = null,
+    disabled = false,
+    placeholder = 'Select date range...',
+    locale = 'en-US',
+    firstDayOfWeek = 0, // 0 = Sunday, 1 = Monday
+    presets,
+    class: className,
+    onSelect,
+  }: {
+    value?: DateRange;
+    min?: CalendarDate | null;
+    max?: CalendarDate | null;
+    disabled?: boolean;
+    placeholder?: string;
+    locale?: string;
+    firstDayOfWeek?: number;
+    presets?: DateRangePreset[];
+    class?: string;
+    onSelect?: (range: DateRange) => void;
+  } = $props();
+
+  let isOpen = $state(false);
+  const today = new Date();
+
+  let viewDate = $state(
+    value?.start ? new Date(value.start.year, value.start.month, value.start.day) : today
+  );
+  let hoverDate = $state<Date | null>(null);
+
+  const activeDateFnsLocale = $derived(locale.startsWith('id') ? localeId : localeEn);
+  const weekStartsOn = $derived(firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6);
+
+  function toDate(d: CalendarDate | null): Date | null {
+    if (!d) return null;
+    return new Date(d.year, d.month, d.day);
+  }
+
+  function toCalendarDate(date: Date): CalendarDate {
+    return {
+      year: date.getFullYear(),
+      month: date.getMonth(),
+      day: date.getDate()
+    };
+  }
+
+  // Generate day names for header using date-fns
+  const dayNames = $derived.by(() => {
+    const start = startOfWeek(viewDate, { weekStartsOn });
+    return Array.from({ length: 7 }, (_, i) => {
+      return format(addDays(start, i), 'EEE', { locale: activeDateFnsLocale });
+    });
+  });
+
+  // Generate full calendar grid (days from start of week of month-start to end of week of month-end)
+  const calendarDays = $derived.by(() => {
+    const monthStart = startOfMonth(viewDate);
+    const monthEnd = endOfMonth(viewDate);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn });
+    const gridEnd = endOfWeek(monthEnd, { weekStartsOn });
+
+    const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+    return days.map((d) => ({
+      date: d,
+      calendarDate: toCalendarDate(d),
+      currentMonth: isSameMonth(d, viewDate)
+    }));
+  });
+
+  const startDateObj = $derived(toDate(value.start));
+  const endDateObj = $derived(toDate(value.end));
+
+  function handleDateClick(date: Date) {
+    if (disabled) return;
+
+    if (!startDateObj || (startDateObj && endDateObj)) {
+      value = { start: toCalendarDate(date), end: null };
+    } else if (startDateObj && !endDateObj) {
+      if (isBefore(date, startDateObj)) {
+        value = { start: toCalendarDate(date), end: toCalendarDate(startDateObj) };
+      } else {
+        value = { start: toCalendarDate(startDateObj), end: toCalendarDate(date) };
+      }
+      onSelect?.(value);
+      isOpen = false;
+    }
+  }
+
+  function prevMonth() {
+    viewDate = subMonths(viewDate, 1);
+  }
+
+  function nextMonth() {
+    viewDate = addMonths(viewDate, 1);
+  }
+
+  function formatDisplayDate(date: CalendarDate | null): string {
+    const d = toDate(date);
+    if (!d) return '';
+    return format(d, 'dd/MM/yyyy', { locale: activeDateFnsLocale });
+  }
+
+  const label = $derived.by(() => {
+    if (value.start && value.end) {
+      return `${formatDisplayDate(value.start)} - ${formatDisplayDate(value.end)}`;
+    }
+    if (value.start) {
+      return `${formatDisplayDate(value.start)} - ...`;
+    }
+    return placeholder;
+  });
+
+  function clearRange(e: MouseEvent) {
+    e.stopPropagation();
+    value = { start: null, end: null };
+    onSelect?.(value);
+  }
+
+  // Rich presets using date-fns intervals
+  const activePresets = $derived.by<DateRangePreset[]>(() => {
+    if (presets) return presets;
+
+    const y = today.getFullYear();
+
+    return [
+      {
+        label: 'Today',
+        range: { start: toCalendarDate(today), end: toCalendarDate(today) }
+      },
+      {
+        label: 'Next 7D',
+        range: { start: toCalendarDate(today), end: toCalendarDate(addDays(today, 7)) }
+      },
+      {
+        label: 'This Month',
+        range: { start: toCalendarDate(startOfMonth(today)), end: toCalendarDate(endOfMonth(today)) }
+      },
+      {
+        label: 'Last Month',
+        range: {
+          start: toCalendarDate(startOfMonth(subMonths(today, 1))),
+          end: toCalendarDate(endOfMonth(subMonths(today, 1)))
+        }
+      },
+      {
+        label: 'YTD',
+        range: { start: { year: y, month: 0, day: 1 }, end: toCalendarDate(today) }
+      }
+    ];
+  });
+</script>
+
+<div class={cn('relative inline-block w-full max-w-sm', className)}>
+  <button
+    type="button"
+    {disabled}
+    onclick={() => (isOpen = !isOpen)}
+    class={cn(
+      'flex h-10 w-full items-center justify-between rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 text-sm transition-colors text-left',
+      'hover:border-[var(--ui-border)] focus:outline-none focus:ring-2 focus:ring-[var(--ui-ring)]/20 focus:border-[var(--ui-primary)]',
+      disabled && 'opacity-50 cursor-not-allowed',
+      value.start ? 'text-[var(--ui-foreground)]' : 'text-[var(--ui-muted-foreground)]'
+    )}
+  >
+    <div class="flex items-center gap-2 truncate">
+      <CalendarIcon class="size-4 shrink-0 text-[var(--ui-muted-foreground)]" />
+      <span class="truncate">{label}</span>
+    </div>
+
+    {#if value.start && !disabled}
+      <button
+        type="button"
+        onclick={clearRange}
+        class="p-1 rounded-full hover:bg-[var(--ui-secondary)] text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]"
+        aria-label="Clear date range"
+      >
+        <X class="size-3.5" />
+      </button>
+    {/if}
+  </button>
+
+  {#if isOpen}
+    <!-- Backdrop for click outside -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="fixed inset-0 z-40" onclick={() => (isOpen = false)}></div>
+
+    <div
+      class="absolute left-0 top-full z-50 mt-1.5 w-80 rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] p-3.5 shadow-xl animate-in fade-in-50 zoom-in-95 select-none"
+    >
+      <!-- Header controls -->
+      <div class="flex items-center justify-between mb-3">
+        <Button variant="ghost" size="sm" class="size-7 p-0" onclick={prevMonth}>
+          <ChevronLeft class="size-4" />
+        </Button>
+        <span class="text-xs font-semibold text-[var(--ui-foreground)] capitalize">
+          {format(viewDate, 'MMMM yyyy', { locale: activeDateFnsLocale })}
+        </span>
+        <Button variant="ghost" size="sm" class="size-7 p-0" onclick={nextMonth}>
+          <ChevronRight class="size-4" />
+        </Button>
+      </div>
+
+      <!-- Day names -->
+      <div class="grid grid-cols-7 mb-1 text-center">
+        {#each dayNames as day}
+          <span class="text-[11px] font-semibold text-[var(--ui-muted-foreground)] py-1 capitalize">
+            {day}
+          </span>
+        {/each}
+      </div>
+
+      <!-- Calendar grid -->
+      <div class="grid grid-cols-7 gap-y-1">
+        {#each calendarDays as { date, calendarDate, currentMonth }}
+          {@const isStart = startDateObj ? isSameDay(startDateObj, date) : false}
+          {@const isEnd = endDateObj ? isSameDay(endDateObj, date) : false}
+          {@const activeRangeEnd = endDateObj || hoverDate}
+          {@const inRange =
+            startDateObj && activeRangeEnd
+              ? isWithinInterval(date, {
+                  start: isBefore(startDateObj, activeRangeEnd) ? startDateObj : activeRangeEnd,
+                  end: isBefore(startDateObj, activeRangeEnd) ? activeRangeEnd : startDateObj
+                })
+              : false}
+          {@const isEdge = isStart || isEnd}
+
+          <div
+            class={cn(
+              'relative py-0.5 flex items-center justify-center',
+              inRange && !isEdge && 'bg-[var(--ui-primary)]/10',
+              isStart && activeRangeEnd && !isSameDay(startDateObj, activeRangeEnd) && 'rounded-l-md bg-[var(--ui-primary)]/10',
+              isEnd && startDateObj && !isSameDay(startDateObj, endDateObj) && 'rounded-r-md bg-[var(--ui-primary)]/10'
+            )}
+            onmouseenter={() => {
+              if (startDateObj && !endDateObj) hoverDate = date;
+            }}
+          >
+            <button
+              type="button"
+              disabled={!currentMonth}
+              onclick={() => handleDateClick(date)}
+              class={cn(
+                'size-8 rounded-md text-xs font-medium transition-colors flex items-center justify-center cursor-pointer',
+                !currentMonth && 'opacity-20 cursor-default',
+                currentMonth && !isEdge && !inRange && 'hover:bg-[var(--ui-secondary)] text-[var(--ui-foreground)]',
+                inRange && !isEdge && 'text-[var(--ui-primary)] font-semibold',
+                isEdge && 'bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] font-bold shadow-xs'
+              )}
+            >
+              {date.getDate()}
+            </button>
+          </div>
+        {/each}
+      </div>
+
+      <!-- Presets quick buttons bar -->
+      <div class="flex flex-wrap items-center gap-1.5 border-t border-[var(--ui-border)] mt-3 pt-2.5">
+        {#each activePresets as preset}
+          <button
+            type="button"
+            onclick={() => {
+              value = preset.range;
+              onSelect?.(value);
+              isOpen = false;
+            }}
+            class="rounded-md border border-[var(--ui-border)] bg-[var(--ui-secondary)]/30 px-2 py-1 text-[10px] font-medium text-[var(--ui-foreground)] hover:bg-[var(--ui-secondary)] transition-colors cursor-pointer"
+          >
+            {preset.label}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/DateRangePicker.svelte.d.ts

@@ -0,0 +1,28 @@
+export type CalendarDate = {
+    year: number;
+    month: number;
+    day: number;
+};
+export type DateRange = {
+    start: CalendarDate | null;
+    end: CalendarDate | null;
+};
+export type DateRangePreset = {
+    label: string;
+    range: DateRange;
+};
+type $$ComponentProps = {
+    value?: DateRange;
+    min?: CalendarDate | null;
+    max?: CalendarDate | null;
+    disabled?: boolean;
+    placeholder?: string;
+    locale?: string;
+    firstDayOfWeek?: number;
+    presets?: DateRangePreset[];
+    class?: string;
+    onSelect?: (range: DateRange) => void;
+};
+declare const DateRangePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/EventCalendar.svelte

@@ -0,0 +1,568 @@
+<script lang="ts">
+  import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Clock, Plus, X } from 'lucide-svelte';
+  import { Button } from '@intinyagroup/ui';
+  import { cn } from '@intinyagroup/ui/utils';
+  import {
+    addMonths,
+    subMonths,
+    addWeeks,
+    subWeeks,
+    addDays,
+    subDays,
+    startOfMonth,
+    endOfMonth,
+    startOfWeek,
+    endOfWeek,
+    eachDayOfInterval,
+    isSameDay,
+    isSameMonth,
+    format
+  } from 'date-fns';
+  import { id as localeId, enUS as localeEn } from 'date-fns/locale';
+
+  export type CalendarView = 'month' | 'week' | 'day';
+
+  export type CalendarEvent = {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    color?: string;
+    description?: string;
+    allDay?: boolean;
+  };
+
+  let {
+    events = $bindable([]),
+    view = $bindable('month' as CalendarView),
+    currentDate = $bindable(new Date()),
+    locale = 'en-US',
+    timeZone,
+    firstDayOfWeek = 0, // 0 = Sunday, 1 = Monday
+    enableEventModal = true,
+    class: className,
+    onEventClick,
+    onDateClick,
+    onAddEvent,
+  }: {
+    events?: CalendarEvent[];
+    view?: CalendarView;
+    currentDate?: Date;
+    locale?: string;
+    timeZone?: string;
+    firstDayOfWeek?: number;
+    enableEventModal?: boolean;
+    class?: string;
+    onEventClick?: (event: CalendarEvent) => void;
+    onDateClick?: (date: Date) => void;
+    onAddEvent?: (newEvent: CalendarEvent) => void;
+  } = $props();
+
+  const activeDateFnsLocale = $derived(locale.startsWith('id') ? localeId : localeEn);
+  const weekStartsOn = $derived(firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6);
+
+  const activeTimeZone = $derived(
+    timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+  );
+
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+
+  // Day names localized and rotated according to firstDayOfWeek via date-fns
+  const dayNames = $derived.by(() => {
+    const start = startOfWeek(currentDate, { weekStartsOn });
+    return Array.from({ length: 7 }, (_, i) => {
+      return format(addDays(start, i), 'EEE', { locale: activeDateFnsLocale });
+    });
+  });
+
+  function isToday(d: Date): boolean {
+    return isSameDay(d, new Date());
+  }
+
+  function goPrev() {
+    if (view === 'month') currentDate = subMonths(currentDate, 1);
+    else if (view === 'week') currentDate = subWeeks(currentDate, 1);
+    else currentDate = subDays(currentDate, 1);
+  }
+
+  function goNext() {
+    if (view === 'month') currentDate = addMonths(currentDate, 1);
+    else if (view === 'week') currentDate = addWeeks(currentDate, 1);
+    else currentDate = addDays(currentDate, 1);
+  }
+
+  function goToday() {
+    currentDate = new Date();
+  }
+
+  // Month view calendar matrix using date-fns intervals
+  const monthDays = $derived.by(() => {
+    const monthStart = startOfMonth(currentDate);
+    const monthEnd = endOfMonth(currentDate);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn });
+    const gridEnd = endOfWeek(monthEnd, { weekStartsOn });
+
+    const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+    return days.map((d) => ({
+      date: d,
+      currentMonth: isSameMonth(d, currentDate)
+    }));
+  });
+
+  // Week view 7 days using date-fns
+  const weekDays = $derived.by(() => {
+    const start = startOfWeek(currentDate, { weekStartsOn });
+    return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+  });
+
+  function getEventsForDay(d: Date): CalendarEvent[] {
+    return events.filter((ev) => isSameDay(new Date(ev.start), d));
+  }
+
+  function getTimeInZone(date: Date): { hours: number; minutes: number } {
+    const parts = new Intl.DateTimeFormat('en-US', {
+      timeZone: activeTimeZone,
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: false
+    }).formatToParts(date);
+
+    let hours = 0;
+    let minutes = 0;
+    for (const p of parts) {
+      if (p.type === 'hour') hours = Number(p.value) % 24;
+      if (p.type === 'minute') minutes = Number(p.value);
+    }
+    return { hours, minutes };
+  }
+
+  function formatTime(date: Date): string {
+    return new Intl.DateTimeFormat(locale, {
+      timeZone: activeTimeZone,
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }).format(date);
+  }
+
+  const titleHeader = $derived.by(() => {
+    if (view === 'month') {
+      return format(currentDate, 'MMMM yyyy', { locale: activeDateFnsLocale });
+    }
+    if (view === 'week') {
+      const start = weekDays[0];
+      const end = weekDays[6];
+      const sStr = format(start, 'dd MMM', { locale: activeDateFnsLocale });
+      const eStr = format(end, 'dd MMM yyyy', { locale: activeDateFnsLocale });
+      return `${sStr} - ${eStr}`;
+    }
+    return format(currentDate, 'dd MMMM yyyy', { locale: activeDateFnsLocale });
+  });
+
+  // Event modal state
+  let modalOpen = $state(false);
+  let newEventTitle = $state('');
+  let newEventDate = $state(new Date());
+  let newEventStartTime = $state('09:00');
+  let newEventEndTime = $state('10:00');
+  let newEventColor = $state('#2563eb');
+  let newEventDescription = $state('');
+
+  const presetColors = ['#2563eb', '#7c3aed', '#059669', '#d97706', '#dc2626', '#0891b2', '#4b5563'];
+
+  function openCreateModal(date: Date) {
+    if (!enableEventModal) return;
+    newEventDate = new Date(date);
+    newEventTitle = '';
+    newEventStartTime = '09:00';
+    newEventEndTime = '10:00';
+    newEventColor = '#2563eb';
+    newEventDescription = '';
+    modalOpen = true;
+  }
+
+  function handleSaveEvent() {
+    if (!newEventTitle.trim()) return;
+
+    const [startH, startM] = newEventStartTime.split(':').map(Number);
+    const [endH, endM] = newEventEndTime.split(':').map(Number);
+
+    const startDate = new Date(newEventDate);
+    startDate.setHours(startH || 0, startM || 0, 0, 0);
+
+    const endDate = new Date(newEventDate);
+    endDate.setHours(endH || 0, endM || 0, 0, 0);
+
+    const newEv: CalendarEvent = {
+      id: `ev-${Date.now()}`,
+      title: newEventTitle.trim(),
+      start: startDate,
+      end: endDate,
+      color: newEventColor,
+      description: newEventDescription.trim() || undefined
+    };
+
+    events = [...events, newEv];
+    onAddEvent?.(newEv);
+    modalOpen = false;
+  }
+</script>
+
+<div class={cn('relative flex flex-col rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] shadow-xs overflow-hidden', className)}>
+  <!-- Toolbar Header -->
+  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--ui-border)] p-4 sm:px-6">
+    <div class="flex items-center gap-2">
+      <h2 class="text-base font-bold text-[var(--ui-foreground)] capitalize">{titleHeader}</h2>
+      <div class="flex items-center gap-1 ml-2">
+        <Button variant="outline" size="sm" class="size-8 p-0" onclick={goPrev}>
+          <ChevronLeft class="size-4" />
+        </Button>
+        <Button variant="outline" size="sm" class="px-2.5 h-8 text-xs font-semibold" onclick={goToday}>
+          Today
+        </Button>
+        <Button variant="outline" size="sm" class="size-8 p-0" onclick={goNext}>
+          <ChevronRight class="size-4" />
+        </Button>
+      </div>
+      <span class="inline-flex items-center rounded-md bg-[var(--ui-secondary)]/50 px-2 py-0.5 text-[10px] font-medium text-[var(--ui-muted-foreground)]">
+        {activeTimeZone}
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <!-- View selector tabs -->
+      <div class="inline-flex rounded-lg border border-[var(--ui-border)] bg-[var(--ui-secondary)]/30 p-1">
+        <button
+          type="button"
+          onclick={() => (view = 'month')}
+          class={cn(
+            'rounded-md px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
+            view === 'month' ? 'bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs' : 'text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]'
+          )}
+        >
+          Month
+        </button>
+        <button
+          type="button"
+          onclick={() => (view = 'week')}
+          class={cn(
+            'rounded-md px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
+            view === 'week' ? 'bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs' : 'text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]'
+          )}
+        >
+          Week
+        </button>
+        <button
+          type="button"
+          onclick={() => (view = 'day')}
+          class={cn(
+            'rounded-md px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
+            view === 'day' ? 'bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs' : 'text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]'
+          )}
+        >
+          Day
+        </button>
+      </div>
+
+      {#if enableEventModal}
+        <Button size="sm" class="gap-1.5 h-8 text-xs" onclick={() => openCreateModal(currentDate)}>
+          <Plus class="size-3.5" /> Add Event
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Calendar Content -->
+  {#if view === 'month'}
+    <!-- MONTH VIEW -->
+    <div class="grid grid-cols-7 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 text-center text-xs font-semibold text-[var(--ui-muted-foreground)] py-2">
+      {#each dayNames as day}
+        <div class="capitalize">{day}</div>
+      {/each}
+    </div>
+
+    <div class="grid grid-cols-7 divide-x divide-y divide-[var(--ui-border)]">
+      {#each monthDays as { date, currentMonth }}
+        {@const dayEvents = getEventsForDay(date)}
+        {@const todayActive = isToday(date)}
+
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          onclick={() => {
+            onDateClick?.(date);
+            openCreateModal(date);
+          }}
+          class={cn(
+            'min-h-[100px] p-2 flex flex-col gap-1 transition-colors hover:bg-[var(--ui-secondary)]/25 cursor-pointer',
+            !currentMonth && 'bg-[var(--ui-muted)]/15 opacity-50'
+          )}
+        >
+          <div class="flex items-center justify-between mb-1">
+            <span
+              class={cn(
+                'text-xs font-semibold size-6 flex items-center justify-center rounded-full',
+                todayActive ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]' : 'text-[var(--ui-foreground)]'
+              )}
+            >
+              {date.getDate()}
+            </span>
+            {#if dayEvents.length > 0}
+              <span class="text-[10px] text-[var(--ui-muted-foreground)] font-medium">
+                {dayEvents.length} ev
+              </span>
+            {/if}
+          </div>
+
+          <!-- Event pills -->
+          <div class="flex flex-col gap-1 overflow-hidden">
+            {#each dayEvents.slice(0, 3) as ev (ev.id)}
+              <button
+                type="button"
+                onclick={(e) => {
+                  e.stopPropagation();
+                  onEventClick?.(ev);
+                }}
+                class={cn(
+                  'truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium transition-opacity hover:opacity-85 text-white shadow-2xs',
+                  ev.color ? '' : 'bg-[var(--ui-primary)]'
+                )}
+                style={ev.color ? `background-color: ${ev.color};` : undefined}
+              >
+                {formatTime(ev.start)} {ev.title}
+              </button>
+            {/each}
+
+            {#if dayEvents.length > 3}
+              <span class="text-[10px] font-semibold text-[var(--ui-muted-foreground)] pl-1">
+                +{dayEvents.length - 3} more
+              </span>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else if view === 'week'}
+    <!-- WEEK VIEW -->
+    <div class="grid grid-cols-8 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 text-center text-xs font-semibold text-[var(--ui-muted-foreground)] py-2">
+      <div class="col-span-1">Time</div>
+      {#each weekDays as d, idx}
+        <div class="col-span-1 flex flex-col items-center">
+          <span class="capitalize">{dayNames[idx]}</span>
+          <span class={cn('size-6 flex items-center justify-center rounded-full text-xs mt-0.5', isToday(d) ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]' : '')}>
+            {d.getDate()}
+          </span>
+        </div>
+      {/each}
+    </div>
+
+    <div class="grid grid-cols-8 divide-x divide-[var(--ui-border)] max-h-[600px] overflow-y-auto">
+      <!-- Hours Column -->
+      <div class="col-span-1 divide-y divide-[var(--ui-border)]/50 text-right pr-2 text-[11px] font-medium text-[var(--ui-muted-foreground)]">
+        {#each hours as hour}
+          <div class="h-14 pt-1">{String(hour).padStart(2, '0')}:00</div>
+        {/each}
+      </div>
+
+      <!-- 7 Days Grid Columns -->
+      {#each weekDays as d}
+        {@const dayEvents = getEventsForDay(d)}
+        {@const isCurrentDay = isToday(d)}
+        {@const nowTime = getTimeInZone(new Date())}
+        {@const nowMinutes = nowTime.hours * 60 + nowTime.minutes}
+        {@const currentTimeTop = (nowMinutes / 60) * 56}
+
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          onclick={() => openCreateModal(d)}
+          class="col-span-1 divide-y divide-[var(--ui-border)]/50 relative hover:bg-[var(--ui-secondary)]/10 cursor-pointer"
+        >
+          {#each hours as _}
+            <div class="h-14"></div>
+          {/each}
+
+          <!-- Google Calendar style Current Time Red Line -->
+          {#if isCurrentDay}
+            <div
+              class="absolute inset-x-0 z-30 pointer-events-none flex items-center"
+              style="top: {currentTimeTop}px;"
+            >
+              <div class="size-2 rounded-full bg-red-500 -ml-1"></div>
+              <div class="h-0.5 w-full bg-red-500"></div>
+            </div>
+          {/if}
+
+          <!-- Render Event Boxes -->
+          {#each dayEvents as ev (ev.id)}
+            {@const evTime = getTimeInZone(new Date(ev.start))}
+            {@const topPos = (evTime.hours + evTime.minutes / 60) * 56}
+            <button
+              type="button"
+              onclick={(e) => {
+                e.stopPropagation();
+                onEventClick?.(ev);
+              }}
+              class="absolute inset-x-1 rounded p-1 text-left text-[11px] text-white shadow-xs transition-opacity hover:opacity-90 overflow-hidden z-10"
+              style="top: {topPos}px; height: 50px; background-color: {ev.color || 'var(--ui-primary)'};"
+            >
+              <div class="font-bold truncate">{ev.title}</div>
+              <div class="text-[9px] opacity-80">{formatTime(ev.start)} - {formatTime(ev.end)}</div>
+            </button>
+          {/each}
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <!-- DAY VIEW -->
+    <div class="p-3 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Clock class="size-4 text-[var(--ui-muted-foreground)]" />
+        <span class="text-sm font-semibold capitalize">{titleHeader}</span>
+      </div>
+      <span class="text-xs text-[var(--ui-muted-foreground)] font-medium">
+        {getEventsForDay(currentDate).length} event(s)
+      </span>
+    </div>
+
+    <div class="grid grid-cols-12 divide-x divide-[var(--ui-border)] max-h-[600px] overflow-y-auto">
+      <div class="col-span-2 divide-y divide-[var(--ui-border)]/50 text-right pr-3 text-xs font-medium text-[var(--ui-muted-foreground)]">
+        {#each hours as hour}
+          <div class="h-16 pt-2">{String(hour).padStart(2, '0')}:00</div>
+        {/each}
+      </div>
+
+      {@const isCurrentDay = isToday(currentDate)}
+      {@const nowTime = getTimeInZone(new Date())}
+      {@const nowMinutes = nowTime.hours * 60 + nowTime.minutes}
+      {@const currentTimeTop = (nowMinutes / 60) * 64}
+
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div
+        onclick={() => openCreateModal(currentDate)}
+        class="col-span-10 divide-y divide-[var(--ui-border)]/50 relative p-1 hover:bg-[var(--ui-secondary)]/10 cursor-pointer"
+      >
+        {#each hours as _}
+          <div class="h-16"></div>
+        {/each}
+
+        <!-- Google Calendar style Current Time Red Line -->
+        {#if isCurrentDay}
+          <div
+            class="absolute inset-x-0 z-30 pointer-events-none flex items-center"
+            style="top: {currentTimeTop}px;"
+          >
+            <div class="size-2.5 rounded-full bg-red-500 -ml-1"></div>
+            <div class="h-0.5 w-full bg-red-500"></div>
+          </div>
+        {/if}
+
+        {#each getEventsForDay(currentDate) as ev (ev.id)}
+          {@const evTime = getTimeInZone(new Date(ev.start))}
+          {@const topPos = (evTime.hours + evTime.minutes / 60) * 64}
+          <button
+            type="button"
+            onclick={(e) => {
+              e.stopPropagation();
+              onEventClick?.(ev);
+            }}
+            class="absolute inset-x-4 rounded-lg p-2 text-left text-white shadow-sm transition-opacity hover:opacity-90 flex flex-col justify-center z-10"
+            style="top: {topPos}px; height: 56px; background-color: {ev.color || 'var(--ui-primary)'};"
+          >
+            <div class="font-bold text-xs">{ev.title}</div>
+            <div class="text-[10px] opacity-80">{formatTime(ev.start)} - {formatTime(ev.end)} {#if ev.description}• {ev.description}{/if}</div>
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Quick Event Creation Modal -->
+  {#if modalOpen}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs p-4">
+      <div
+        onclick={(e) => e.stopPropagation()}
+        class="w-full max-w-md rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] p-5 shadow-2xl animate-in fade-in-50 zoom-in-95"
+      >
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-sm font-bold text-[var(--ui-foreground)]">Add New Event</h3>
+          <button
+            type="button"
+            onclick={() => (modalOpen = false)}
+            class="rounded-full p-1 text-[var(--ui-muted-foreground)] hover:bg-[var(--ui-secondary)] hover:text-[var(--ui-foreground)]"
+          >
+            <X class="size-4" />
+          </button>
+        </div>
+
+        <div class="space-y-3.5 text-xs">
+          <div>
+            <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Title</label>
+            <input
+              type="text"
+              bind:value={newEventTitle}
+              placeholder="Event title (e.g. Sprint Review)..."
+              class="h-9 w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 text-xs outline-none focus:border-[var(--ui-primary)]"
+              autofocus
+            />
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <div>
+              <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Start Time</label>
+              <input
+                type="time"
+                bind:value={newEventStartTime}
+                class="h-9 w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-2.5 text-xs outline-none focus:border-[var(--ui-primary)]"
+              />
+            </div>
+            <div>
+              <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">End Time</label>
+              <input
+                type="time"
+                bind:value={newEventEndTime}
+                class="h-9 w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-2.5 text-xs outline-none focus:border-[var(--ui-primary)]"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label class="block mb-1.5 font-semibold text-[var(--ui-muted-foreground)]">Tag Color</label>
+            <div class="flex items-center gap-2">
+              {#each presetColors as col}
+                <button
+                  type="button"
+                  onclick={() => (newEventColor = col)}
+                  class={cn(
+                    'size-6 rounded-full transition-transform hover:scale-110 cursor-pointer',
+                    newEventColor === col && 'ring-2 ring-offset-2 ring-[var(--ui-primary)]'
+                  )}
+                  style="background-color: {col};"
+                  aria-label="Select color {col}"
+                ></button>
+              {/each}
+            </div>
+          </div>
+
+          <div>
+            <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Description (optional)</label>
+            <textarea
+              bind:value={newEventDescription}
+              rows={2}
+              placeholder="Notes, agenda, or link..."
+              class="w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] p-2.5 text-xs outline-none focus:border-[var(--ui-primary)]"
+            ></textarea>
+          </div>
+        </div>
+
+        <div class="mt-5 flex items-center justify-end gap-2 border-t border-[var(--ui-border)] pt-3">
+          <Button variant="outline" size="sm" onclick={() => (modalOpen = false)}>Cancel</Button>
+          <Button size="sm" onclick={handleSaveEvent}>Save Event</Button>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/EventCalendar.svelte.d.ts

@@ -0,0 +1,26 @@
+export type CalendarView = 'month' | 'week' | 'day';
+export type CalendarEvent = {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    color?: string;
+    description?: string;
+    allDay?: boolean;
+};
+type $$ComponentProps = {
+    events?: CalendarEvent[];
+    view?: CalendarView;
+    currentDate?: Date;
+    locale?: string;
+    timeZone?: string;
+    firstDayOfWeek?: number;
+    enableEventModal?: boolean;
+    class?: string;
+    onEventClick?: (event: CalendarEvent) => void;
+    onDateClick?: (date: Date) => void;
+    onAddEvent?: (newEvent: CalendarEvent) => void;
+};
+declare const EventCalendar: import("svelte").Component<$$ComponentProps, {}, "events" | "view" | "currentDate">;
+type EventCalendar = ReturnType<typeof EventCalendar>;
+export default EventCalendar;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+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';

package/dist/index.js

@@ -0,0 +1,4 @@
+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';

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@intinyagroup/calendar",
+  "version": "0.1.1-alpha.11",
+  "description": "Calendar and DatePicker components for intinyagroup UI",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "svelte-package -o dist",
+    "check": "echo 'no check'",
+    "dev": "svelte-package -o dist -w"
+  },
+  "dependencies": {
+    "@intinyagroup/ui": "0.1.1-alpha.9",
+    "date-fns": "^4.4.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "svelte": "^5.55.2",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intinyagroup/ui.git",
+    "directory": "packages/calendar"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}