@urbicon-ui/blocks 6.1.4

package/dist/components/Calendar/CalendarEventPopover.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import type { CalendarEvent } from './calendar.types';
+
+  interface CalendarEventPopoverInternalProps {
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+  }
+
+  let { events, onEventClick }: CalendarEventPopoverInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+</script>
+
+<div class={slot('eventPopover')}>
+  {#each events as event (event.id)}
+    {@const category = event.categoryId ? ctx.getCategoryById(event.categoryId) : undefined}
+    <button
+      type="button"
+      class={slot('eventPopoverItem')}
+      onclick={(e) => {
+        e.stopPropagation();
+        onEventClick?.(event);
+      }}
+    >
+      <span
+        class="size-2 shrink-0 rounded-full"
+        style={category?.color
+          ? `background-color: ${category.color}`
+          : 'background-color: var(--color-text-tertiary)'}
+      ></span>
+      <span class="text-text-primary truncate font-medium">{event.title}</span>
+      {#if event.description}
+        <span class="text-text-secondary ml-auto truncate">{event.description}</span>
+      {/if}
+    </button>
+  {/each}
+</div>

package/dist/components/Calendar/CalendarEventPopover.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarEvent } from './calendar.types';
+interface CalendarEventPopoverInternalProps {
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+}
+declare const CalendarEventPopover: import("svelte").Component<CalendarEventPopoverInternalProps, {}, "">;
+type CalendarEventPopover = ReturnType<typeof CalendarEventPopover>;
+export default CalendarEventPopover;

package/dist/components/Calendar/CalendarEventRenderer.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getCalendarContext } from './calendar.context';
+  import type { CalendarEvent, EventDayInfo, EventItemContext } from './calendar.types';
+  import CalendarEventItem from './CalendarEventItem.svelte';
+
+  interface CalendarEventRendererInternalProps {
+    info: EventDayInfo;
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+  }
+
+  let { info, eventItem, onEventClick }: CalendarEventRendererInternalProps = $props();
+
+  const ctx = getCalendarContext();
+
+  const category = $derived(
+    info.event.categoryId ? ctx.getCategoryById(info.event.categoryId) : undefined
+  );
+
+  const context: EventItemContext = $derived({
+    event: info.event,
+    category,
+    dayIndex: info.totalDays > 1 ? info.dayIndex : undefined,
+    totalDays: info.totalDays > 1 ? info.totalDays : undefined,
+    isStart: info.totalDays > 1 ? info.isStart : undefined,
+    isEnd: info.totalDays > 1 ? info.isEnd : undefined
+  });
+</script>
+
+{#if eventItem}
+  {@render eventItem(context)}
+{:else}
+  <CalendarEventItem
+    event={info.event}
+    {category}
+    dayIndex={context.dayIndex}
+    totalDays={context.totalDays}
+    isStart={context.isStart}
+    isEnd={context.isEnd}
+    {onEventClick}
+  />
+{/if}

package/dist/components/Calendar/CalendarEventRenderer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { CalendarEvent, EventDayInfo, EventItemContext } from './calendar.types';
+interface CalendarEventRendererInternalProps {
+    info: EventDayInfo;
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+}
+declare const CalendarEventRenderer: import("svelte").Component<CalendarEventRendererInternalProps, {}, "">;
+type CalendarEventRenderer = ReturnType<typeof CalendarEventRenderer>;
+export default CalendarEventRenderer;

package/dist/components/Calendar/CalendarGrid.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import type { Snippet } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { getWeekNumber, toIso } from '../../date';
+  import { getMultiDayEventLayout } from './calendar.engine';
+  import { swipeable } from '../../utils/swipeable';
+  import type { CalendarEvent, DayCellContext } from './calendar.types';
+  import CalendarWeekdayHeader from './CalendarWeekdayHeader.svelte';
+  import CalendarDay from './CalendarDay.svelte';
+  import CalendarMultiDayBar from './CalendarMultiDayBar.svelte';
+
+  const bt = useBlocksI18n();
+
+  interface CalendarGridInternalProps {
+    dayCell?: Snippet<[DayCellContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+  }
+
+  let { dayCell, onEventClick, class: className = '' }: CalendarGridInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  const gridKey = $derived(`${ctx.displayedYear}-${ctx.displayedMonth}`);
+
+  // Compute multi-day bar layout
+  const multiDayLayout = $derived(getMultiDayEventLayout(ctx.events as CalendarEvent[], ctx.grid));
+
+  // Map event IDs to events for quick lookup
+  const eventById = $derived.by(() => {
+    const map = new Map<string, CalendarEvent>(); // eslint-disable-line svelte/prefer-svelte-reactivity
+    for (const e of ctx.events) {
+      map.set(e.id, e);
+    }
+    return map;
+  });
+
+  const barHeight = $derived(ctx.size === 'sm' ? 16 : ctx.size === 'lg' ? 24 : 20);
+  const barGap = 2;
+
+  // Keyboard navigation handler
+  /* eslint-disable svelte/prefer-svelte-reactivity -- local Date copies for keyboard nav */
+  function handleKeydown(e: KeyboardEvent) {
+    const current = new Date(ctx.focusedDate);
+    let newDate: Date | null = null;
+
+    switch (e.key) {
+      case 'ArrowRight':
+        newDate = new Date(current);
+        newDate.setDate(current.getDate() + 1);
+        break;
+      case 'ArrowLeft':
+        newDate = new Date(current);
+        newDate.setDate(current.getDate() - 1);
+        break;
+      case 'ArrowDown':
+        newDate = new Date(current);
+        newDate.setDate(current.getDate() + 7);
+        break;
+      case 'ArrowUp':
+        newDate = new Date(current);
+        newDate.setDate(current.getDate() - 7);
+        break;
+      case 'Home':
+        if (e.ctrlKey || e.metaKey) {
+          newDate = new Date(ctx.displayedYear, ctx.displayedMonth, 1);
+        } else {
+          newDate = new Date(current);
+          newDate.setDate(current.getDate() - ((current.getDay() - ctx.weekStartsOn + 7) % 7));
+        }
+        break;
+      case 'End':
+        if (e.ctrlKey || e.metaKey) {
+          newDate = new Date(ctx.displayedYear, ctx.displayedMonth + 1, 0);
+        } else {
+          newDate = new Date(current);
+          newDate.setDate(
+            current.getDate() + (6 - ((current.getDay() - ctx.weekStartsOn + 7) % 7))
+          );
+        }
+        break;
+      case 'PageDown':
+        newDate = new Date(current);
+        newDate.setMonth(current.getMonth() + 1);
+        break;
+      case 'PageUp':
+        newDate = new Date(current);
+        newDate.setMonth(current.getMonth() - 1);
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        ctx.selectDate(ctx.focusedDate);
+        return;
+      case 'Escape':
+        return;
+      default:
+        return;
+    }
+
+    if (newDate) {
+      e.preventDefault();
+      ctx.setFocusedDate(newDate);
+
+      requestAnimationFrame(() => {
+        const dateStr = `${newDate!.getFullYear()}-${String(newDate!.getMonth() + 1).padStart(2, '0')}-${String(newDate!.getDate()).padStart(2, '0')}`;
+        const button = (e.currentTarget as HTMLElement)?.querySelector(
+          `[data-date="${dateStr}"]`
+        ) as HTMLElement;
+        button?.focus();
+      });
+    }
+  }
+  /* eslint-enable svelte/prefer-svelte-reactivity */
+</script>
+
+<div
+  class={slot('grid', className)}
+  role="grid"
+  tabindex={0}
+  aria-label={bt('calendar.calendarGrid')}
+  onkeydown={handleKeydown}
+  onmouseleave={() => ctx.setHoveredDate(null)}
+  style="overflow: hidden; position: relative;"
+  {@attach swipeable({
+    onSwipeLeft: () => ctx.navigate(1),
+    onSwipeRight: () => ctx.navigate(-1),
+    enabled: ctx.swipeable
+  })}
+>
+  <CalendarWeekdayHeader />
+
+  <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">
+    {#key gridKey}
+      <div
+        in:fly={ctx.shouldAnimate && ctx.navDirection
+          ? { x: ctx.navDirection === 'forward' ? 40 : -40, duration: 200 }
+          : { duration: 0 }}
+        out:fly={ctx.shouldAnimate && ctx.navDirection
+          ? { x: ctx.navDirection === 'forward' ? -40 : 40, duration: 150 }
+          : { duration: 0 }}
+      >
+        {#each ctx.grid as week, weekIdx (week[0] ? toIso(week[0]) : weekIdx)}
+          {@const weekLayout = multiDayLayout[weekIdx]}
+          {@const maxBarRow =
+            weekLayout?.segments.length > 0
+              ? Math.max(...weekLayout.segments.map((s) => s.row)) + 1
+              : 0}
+          {@const _barAreaHeight = maxBarRow * (barHeight + barGap)}
+
+          {#if weekLayout && weekLayout.segments.length > 0}
+            <div
+              class={slot('multiDayBarContainer')}
+              style="grid-template-columns: repeat({ctx.showWeekNumbers
+                ? 8
+                : 7}, minmax(0, 1fr)); grid-template-rows: repeat({maxBarRow}, auto);"
+            >
+              {#each weekLayout.segments as seg (seg.eventId + '-' + weekIdx)}
+                {@const event = eventById.get(seg.eventId)}
+                {@const colOffset = ctx.showWeekNumbers ? 1 : 0}
+                {#if event}
+                  <CalendarMultiDayBar
+                    {event}
+                    startCol={seg.startCol + colOffset}
+                    spanCols={seg.spanCols}
+                    isFirstSegment={seg.isFirstSegment}
+                    isLastSegment={seg.isLastSegment}
+                    row={seg.row}
+                    {onEventClick}
+                  />
+                {/if}
+              {/each}
+            </div>
+          {/if}
+
+          <div class="{slot('weekRow')} {ctx.showWeekNumbers ? 'grid-cols-8' : ''}" role="row">
+            {#if ctx.showWeekNumbers}
+              <span class={slot('weekNumber')} role="rowheader">
+                {getWeekNumber(week[3])}
+              </span>
+            {/if}
+            {#each week as date (date.toISOString())}
+              <CalendarDay {date} {dayCell} {onEventClick} />
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {/key}
+  </div>
+</div>

package/dist/components/Calendar/CalendarGrid.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { CalendarEvent, DayCellContext } from './calendar.types';
+interface CalendarGridInternalProps {
+    dayCell?: Snippet<[DayCellContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+}
+declare const CalendarGrid: import("svelte").Component<CalendarGridInternalProps, {}, "">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/components/Calendar/CalendarHeader.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { Tooltip } from '../../primitives/Tooltip';
+  import { Popover } from '../../primitives/Popover';
+  import { SegmentGroup, SegmentItem } from '../../primitives/SegmentGroup';
+  import { Button } from '../../primitives/Button';
+  import ChevronLeftIcon from '../../icons/ChevronLeftIcon.svelte';
+  import ChevronRightIcon from '../../icons/ChevronRightIcon.svelte';
+  import ChevronDownIcon from '../../icons/ChevronDownIcon.svelte';
+  import CalendarIcon from '../../icons/CalendarIcon.svelte';
+  import { getCalendarContext } from './calendar.context';
+  import { formatMonthShort } from '../../date';
+  import type { CalendarHeaderProps, CalendarSlotName, CalendarViewMode } from './index';
+
+  const bt = useBlocksI18n();
+
+  let {
+    children,
+    showToday = true,
+    showViewSwitcher = true,
+    class: className = '',
+    unstyled: unstyledProp,
+    slotClasses: slotClassesProp = {},
+    ...restProps
+  }: CalendarHeaderProps = $props();
+
+  const ctx = getCalendarContext();
+
+  function slot(key: CalendarSlotName, extra?: string) {
+    const overrides = [
+      ctx.slotClasses?.[key],
+      slotClassesProp?.[key as keyof typeof slotClassesProp],
+      extra
+    ]
+      .filter(Boolean)
+      .join(' ');
+    const isUnstyled = unstyledProp ?? ctx.unstyled;
+    if (isUnstyled) return overrides;
+    const styles = ctx.styles as Record<CalendarSlotName, (args: { class: string }) => string>;
+    return styles[key]?.({ class: overrides }) ?? overrides;
+  }
+
+  // View-aware aria-labels for navigation buttons
+  const prevLabel = $derived.by(() => {
+    switch (ctx.view) {
+      case 'month':
+        return bt('calendar.previousMonth');
+      case 'year':
+        return bt('calendar.previousYear');
+      case 'week':
+        return bt('calendar.previousWeek');
+      case 'day':
+        return bt('calendar.previousDay');
+      case 'agenda':
+        return bt('calendar.previousMonth');
+    }
+  });
+
+  const nextLabel = $derived.by(() => {
+    switch (ctx.view) {
+      case 'month':
+        return bt('calendar.nextMonth');
+      case 'year':
+        return bt('calendar.nextYear');
+      case 'week':
+        return bt('calendar.nextWeek');
+      case 'day':
+        return bt('calendar.nextDay');
+      case 'agenda':
+        return bt('calendar.nextMonth');
+    }
+  });
+
+  // View switcher config — filtered by ctx.views
+  const allViewButtons = [
+    { view: 'month' as const, label: () => bt('calendar.viewMonth'), shortLabel: 'M' },
+    { view: 'week' as const, label: () => bt('calendar.viewWeek'), shortLabel: 'W' },
+    { view: 'day' as const, label: () => bt('calendar.viewDay'), shortLabel: 'T' },
+    { view: 'year' as const, label: () => bt('calendar.viewYear'), shortLabel: 'J' },
+    { view: 'agenda' as const, label: () => bt('calendar.viewAgenda'), shortLabel: 'A' }
+  ];
+  const viewButtons = $derived(allViewButtons.filter((vb) => ctx.views.includes(vb.view)));
+
+  // Map calendar size to SegmentGroup size
+  const viewSwitcherSize = $derived(
+    ctx.size === 'sm' ? ('sm' as const) : ctx.size === 'md' ? ('sm' as const) : ('md' as const)
+  );
+
+  // Nav button icon size based on calendar size
+  const navIconSize = $derived(ctx.size === 'sm' ? 14 : 16);
+  const pickerIconSize = $derived(ctx.size === 'sm' ? 12 : 14);
+
+  // Month/Year Quick-Pick
+  let monthPickerOpen = $state(false);
+  // eslint-disable-next-line svelte/prefer-writable-derived -- needs both external sync and local mutation
+  let pickerYear = $state(ctx.displayedYear);
+
+  // Keep pickerYear in sync when navigation changes
+  $effect(() => {
+    pickerYear = ctx.displayedYear;
+  });
+
+  // Close picker when calendar becomes disabled
+  $effect(() => {
+    if (ctx.disabled) monthPickerOpen = false;
+  });
+
+  const months = $derived(
+    Array.from({ length: 12 }, (_, i) => ({
+      index: i,
+      label: formatMonthShort(i, ctx.locale),
+      isCurrent: i === ctx.displayedMonth && pickerYear === ctx.displayedYear
+    }))
+  );
+
+  function selectMonth(month: number) {
+    ctx.goToMonth(month, pickerYear);
+    if (ctx.view === 'year') ctx.setView('month');
+    monthPickerOpen = false;
+  }
+</script>
+
+{#if children}
+  <div class={slot('header', className)} {...restProps}>
+    {@render children()}
+  </div>
+{:else}
+  <div class={slot('header', className)} {...restProps}>
+    <div class={slot('nav')}>
+      <Button
+        unstyled
+        mint="none"
+        class={slot('navButton')}
+        onclick={() => ctx.navigate(-1)}
+        disabled={!ctx.canGoBack || ctx.disabled}
+        aria-label={prevLabel}
+      >
+        <ChevronLeftIcon size={navIconSize} />
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <Popover bind:open={monthPickerOpen} placement="bottom">
+        {#snippet trigger()}
+          <button
+            type="button"
+            class={[
+              slot('title'),
+              'hover:text-primary inline-flex cursor-pointer items-center gap-1 transition-colors',
+              ctx.disabled && 'pointer-events-none cursor-not-allowed opacity-50'
+            ]}
+            aria-expanded={monthPickerOpen}
+            aria-haspopup="dialog"
+            disabled={ctx.disabled}
+          >
+            {ctx.headerTitle}
+            <ChevronDownIcon
+              size={pickerIconSize}
+              class="transition-transform {monthPickerOpen ? 'rotate-180' : ''}"
+            />
+          </button>
+        {/snippet}
+        <div class="min-w-48 p-3">
+          <div class="mb-2 flex items-center justify-between">
+            <Button
+              unstyled
+              mint="none"
+              class={slot('navButton')}
+              onclick={() => pickerYear--}
+              aria-label={bt('calendar.previousYear')}
+            >
+              <ChevronLeftIcon size={pickerIconSize} />
+            </Button>
+            <span class="text-text-primary font-semibold tabular-nums">{pickerYear}</span>
+            <Button
+              unstyled
+              mint="none"
+              class={slot('navButton')}
+              onclick={() => pickerYear++}
+              aria-label={bt('calendar.nextYear')}
+            >
+              <ChevronRightIcon size={pickerIconSize} />
+            </Button>
+          </div>
+          <div class="grid grid-cols-3 gap-1">
+            {#each months as m (m.index)}
+              <Button
+                unstyled
+                mint="none"
+                class="text-text-primary rounded-md px-2 py-1.5 text-sm transition-colors
+                  {m.isCurrent
+                  ? 'bg-primary-subtle ring-primary text-primary font-semibold ring-1'
+                  : 'hover:bg-surface-hover'}
+                  focus-visible:ring-primary/50 focus-visible:ring-2 focus-visible:outline-none"
+                onclick={() => selectMonth(m.index)}
+              >
+                {m.label}
+              </Button>
+            {/each}
+          </div>
+        </div>
+      </Popover>
+    </div>
+
+    <div class="flex items-center gap-1">
+      {#if showViewSwitcher}
+        <SegmentGroup
+          value={ctx.view}
+          size={viewSwitcherSize}
+          disabled={ctx.disabled}
+          onValueChange={(v) => ctx.setView(v as CalendarViewMode)}
+          ariaLabel={bt('calendar.viewSwitcher')}
+        >
+          {#each viewButtons as vb (vb.view)}
+            <SegmentItem value={vb.view}>
+              {ctx.size === 'sm' ? vb.shortLabel : vb.label()}
+            </SegmentItem>
+          {/each}
+        </SegmentGroup>
+      {/if}
+
+      {#if showToday}
+        <Tooltip label={bt('calendar.today')}>
+          <Button
+            unstyled
+            mint="none"
+            class="{slot('navButton')} ml-1"
+            onclick={() => ctx.goToToday()}
+            disabled={ctx.disabled}
+            aria-label={bt('calendar.today')}
+          >
+            <CalendarIcon size={navIconSize} />
+          </Button>
+        </Tooltip>
+      {/if}
+
+      <Button
+        unstyled
+        mint="none"
+        class={slot('navButton')}
+        onclick={() => ctx.navigate(1)}
+        disabled={!ctx.canGoForward || ctx.disabled}
+        aria-label={nextLabel}
+      >
+        <ChevronRightIcon size={navIconSize} />
+      </Button>
+    </div>
+  </div>
+{/if}

package/dist/components/Calendar/CalendarHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarHeaderProps } from './index';
+declare const CalendarHeader: import("svelte").Component<CalendarHeaderProps, {}, "">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;

package/dist/components/Calendar/CalendarLegend.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+
+  const bt = useBlocksI18n();
+
+  interface CalendarLegendInternalProps {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+  }
+
+  let { orientation = 'horizontal', class: className = '' }: CalendarLegendInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+</script>
+
+{#if ctx.categories.length > 0}
+  <div
+    class="{slot('legend', className)} {orientation === 'vertical' ? 'flex-col items-start' : ''}"
+    role="list"
+    aria-label={bt('calendar.legend')}
+  >
+    {#each ctx.categories as category (category.id)}
+      <div class={slot('legendItem')} role="listitem">
+        <span
+          class={slot('legendDot')}
+          style="background-color: {category.color}"
+          aria-hidden="true"
+        ></span>
+        <span class={slot('legendLabel')}>{category.label}</span>
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/components/Calendar/CalendarLegend.svelte.d.ts

@@ -0,0 +1,7 @@
+interface CalendarLegendInternalProps {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+declare const CalendarLegend: import("svelte").Component<CalendarLegendInternalProps, {}, "">;
+type CalendarLegend = ReturnType<typeof CalendarLegend>;
+export default CalendarLegend;