@intinyagroup/calendar 0.1.1-alpha.8 → 0.1.1

package/dist/Calendar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { ChevronLeft, ChevronRight } from 'lucide-svelte';
-  import { Button } from '@intinyagroup/ui';
-  import { cn } from '@intinyagroup/ui/utils';
+  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 };
 
@@ -25,13 +25,27 @@
   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 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 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;
@@ -40,7 +54,11 @@
       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 } });
+      days.push({
+        day,
+        currentMonth: true,
+        date: { year: viewYear, month: viewMonth, day },
+      });
     }
     const remaining = 42 - days.length;
     for (let day = 1; day <= remaining; day++) {
@@ -55,48 +73,142 @@
     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();
+    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;
+    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() }); }
+  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
+  class={cn(
+    "inline-flex flex-col rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] p-4 shadow-sm select-none",
+    className,
+  )}
+  style="min-width: 280px; max-width: 320px; box-sizing: border-box;"
+>
+  <div
+    class="flex items-center justify-between mb-4"
+    style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;"
+  >
+    <Button variant="ghost" size="sm" onclick={prevMonth} {disabled}
+      ><ChevronLeft class="size-4" /></Button
+    >
+    <div
+      class="flex items-center gap-2"
+      style="display: flex; align-items: center; gap: 0.5rem;"
+    >
+      <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>
+    <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
+    class="grid grid-cols-7 gap-1 mb-2 text-center"
+    style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.5rem; text-align: center;"
+  >
+    {#each dayNames as d}
+      <div
+        class="text-center text-[11px] font-medium text-[var(--ui-muted-foreground)] py-1"
+        style="text-align: center; font-size: 0.6875rem; padding: 0.25rem 0;"
+      >
+        {d}
+      </div>
+    {/each}
   </div>
 
-  <div class="grid grid-cols-7 gap-1">
-    {#each calendarDays as { day, currentMonth, date } (date.year + '-' + date.month + '-' + date.day)}
+  <div
+    class="grid grid-cols-7 gap-1"
+    style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem;"
+  >
+    {#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
+        type="button"
         onclick={() => selectDate(date)}
         disabled={disabled || isDisabledDate}
+        style="width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;"
         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' : ''}
+          {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>
+        >{day}</button
+      >
     {/each}
   </div>
 </div>

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 '@intinyagroup/calendar';
-  import { Calendar as CalendarIcon, X } from 'lucide-svelte';
-  import { cn } from '@intinyagroup/grid-core/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 '@intinyagroup/calendar';
+import { type CalendarDate } from "./Calendar.svelte";
 type $$ComponentProps = {
     value?: CalendarDate | null;
     placeholder?: string;

package/dist/DateRangePicker.svelte

@@ -0,0 +1,392 @@
+<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)}>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-disabled={disabled}
+    onclick={() => {
+      if (!disabled) isOpen = !isOpen;
+    }}
+    onkeydown={(e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        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 cursor-pointer select-none",
+      "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 pointer-events-none",
+      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={(e) => {
+          e.stopPropagation();
+          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}
+  </div>
+
+  {#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"
+        style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; margin-bottom: 0.25rem;"
+      >
+        {#each dayNames as day}
+          <span
+            class="text-[11px] font-semibold text-[var(--ui-muted-foreground)] py-1 capitalize"
+            style="text-align: center; font-size: 0.6875rem; padding: 0.25rem 0;"
+          >
+            {day}
+          </span>
+        {/each}
+      </div>
+
+      <!-- Calendar grid -->
+      <div
+        class="grid grid-cols-7 gap-y-1"
+        style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 0.25rem;"
+      >
+        {#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
+            role="gridcell"
+            tabindex="-1"
+            aria-selected={isEdge}
+            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>