noecosystem-design 0.1.0

package/packages/ui/src/calendar-system.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, test } from 'vitest';
+
+import {
+  fromCalendarDate,
+  getDaysInJalaliMonth,
+  getDaysInMonth,
+  getPersianYMD,
+  isJalaliLeapYear,
+  jalaliToDateUTC,
+  toCalendarDate,
+} from './calendar-system';
+
+describe('isJalaliLeapYear — Intl source of truth', () => {
+  test('1403 is leap (Esfand 30 exists), 1404 is not', () => {
+    expect(isJalaliLeapYear(1403)).toBe(true);
+    expect(getDaysInJalaliMonth(1403, 12)).toBe(30);
+    // 1403-12-30 should map to 2025-03-20
+    expect(jalaliToDateUTC(1403, 12, 30).toISOString()).toBe('2025-03-20T00:00:00.000Z');
+    expect(getPersianYMD(new Date('2025-03-20T00:00:00Z'))).toEqual({
+      year: 1403,
+      month: 12,
+      day: 30,
+    });
+  });
+  test('1404 is not leap', () => {
+    expect(isJalaliLeapYear(1404)).toBe(false);
+    expect(getDaysInJalaliMonth(1404, 12)).toBe(29);
+    expect(() => jalaliToDateUTC(1404, 12, 30)).toThrow();
+    expect(new Date('2026-03-20T00:00:00Z')).toEqual(jalaliToDateUTC(1404, 12, 29));
+  });
+  test('1400-1408 brute force via Intl', () => {
+    // Verify 1403 and 1408 are leap per Intl, others not in that window
+    expect(isJalaliLeapYear(1400)).toBe(false);
+    expect(isJalaliLeapYear(1401)).toBe(false);
+    expect(isJalaliLeapYear(1402)).toBe(false);
+    expect(isJalaliLeapYear(1408)).toBe(true);
+  });
+});
+
+describe('Jalali round-trip', () => {
+  test('Date -> Persian YMD -> Date round-trip for range 2020-2030', () => {
+    for (let y = 2020; y <= 2030; y++) {
+      for (let m = 0; m < 12; m++) {
+        const d = new Date(Date.UTC(y, m, 15));
+        const ymd = toCalendarDate(d, 'persian');
+        const back = fromCalendarDate(ymd.year, ymd.month, ymd.day, 'persian');
+        expect(back.toISOString()).toBe(d.toISOString());
+      }
+    }
+  });
+  test('Gregorian round-trip', () => {
+    const d = new Date(Date.UTC(2025, 0, 15));
+    const ymd = toCalendarDate(d, 'gregory');
+    expect(ymd).toEqual({ year: 2025, month: 1, day: 15 });
+    expect(fromCalendarDate(2025, 1, 15, 'gregory').toISOString()).toBe(d.toISOString());
+  });
+  test('timezone/UTC: fromCalendarDate always UTC', () => {
+    const d = fromCalendarDate(1403, 12, 30, 'persian');
+    expect(d.getUTCHours()).toBe(0);
+    expect(d.getUTCMinutes()).toBe(0);
+    expect(d.getUTCSeconds()).toBe(0);
+    expect(d.toISOString()).toBe('2025-03-20T00:00:00.000Z');
+  });
+  test('getDaysInMonth gregorian vs jalali', () => {
+    expect(getDaysInMonth(2024, 2, 'gregory')).toBe(29); // leap
+    expect(getDaysInMonth(2025, 2, 'gregory')).toBe(28);
+    expect(getDaysInMonth(1403, 12, 'persian')).toBe(30);
+    expect(getDaysInMonth(1404, 12, 'persian')).toBe(29);
+  });
+});
+
+describe('Calendar weekday offset', () => {
+  test('firstWeekday for Persian vs Gregorian uses known Gregorian weekday', () => {
+    // 2025-01-01 is Wednesday (UTCDay 3). For gregory calendar, firstWeekday = 3.
+    // For persian, same Gregorian date 2025-01-01 corresponds to 1403-10-12, but firstWeekday for a Persian month is (greg+1)%7
+    const gregJan1 = fromCalendarDate(2025, 1, 1, 'gregory');
+    expect(gregJan1.getUTCDay()).toBe(3); // Wednesday
+    expect(gregJan1.getUTCDay()).toBe(3);
+    const persianOffset = (gregJan1.getUTCDay() + 1) % 7;
+    expect(persianOffset).toBe(4); // Thursday column in Persian week (Sat=0)
+    // Verify 1403-12-01 = 2025-02-19 is Wednesday as well (UTCDay 3) -> persian offset 4
+    const first14031201 = fromCalendarDate(1403, 12, 1, 'persian');
+    expect(first14031201.getUTCDay()).toBe(3);
+    expect((first14031201.getUTCDay() + 1) % 7).toBe(4);
+  });
+  test('timezone: fromCalendarDate is UTC midnight and round-trips via UTC', () => {
+    const d = fromCalendarDate(1403, 12, 30, 'persian');
+    expect(d.toISOString()).toBe('2025-03-20T00:00:00.000Z');
+    expect(d.getUTCHours()).toBe(0);
+    expect(d.getUTCMinutes()).toBe(0);
+    // getPersianYMD is UTC-based, so local TZ does not shift date
+    const ymd = getPersianYMD(new Date('2025-03-20T12:00:00Z'));
+    expect(ymd).toEqual({ year: 1403, month: 12, day: 30 });
+  });
+  test('end of month: daysInMonth for all months and leap boundaries', () => {
+    // 1403 Esfand 30 exists, 1404 Esfand 29 is last
+    expect(getDaysInJalaliMonth(1403, 6)).toBe(31);
+    expect(getDaysInJalaliMonth(1403, 11)).toBe(30);
+    expect(getDaysInJalaliMonth(1403, 12)).toBe(30);
+    expect(getDaysInJalaliMonth(1404, 12)).toBe(29);
+    expect(getDaysInMonth(2024, 2, 'gregory')).toBe(29);
+  });
+});

package/packages/ui/src/calendar-system.ts

@@ -0,0 +1,120 @@
+/**
+ * Calendar system abstraction — separated from locale formatting.
+ * Supports `gregory` (default) and `persian` (Jalali) via Intl `ca-*` and binary search.
+ * Adapted from injast-core `src/utils/dateHelpers.ts` and `WheelDatePicker.tsx` (Jalali logic),
+ * but decoupled from MUI and from locale formatters. Locale formatting (numbers, month names)
+ * is handled via `Intl.DateTimeFormat` with the consumer's locale, not the calendar system.
+ * Jalali support is extension-point: `calendar="persian"` is available, default is `gregory` unless locale `fa` opts in.
+ */
+
+export type CalendarSystem = 'gregory' | 'persian';
+
+const persianDateFormatter = new Intl.DateTimeFormat('en-US-u-ca-persian', {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  timeZone: 'UTC',
+});
+
+export function getPersianYMD(date: Date): { year: number; month: number; day: number } {
+  const parts = persianDateFormatter.formatToParts(date);
+  const year = Number(parts.find((p) => p.type === 'year')?.value);
+  const month = Number(parts.find((p) => p.type === 'month')?.value);
+  const day = Number(parts.find((p) => p.type === 'day')?.value);
+  if (!year || !month || !day) throw new Error('Failed to parse Persian date');
+  return { year, month, day };
+}
+
+/** Convert Jalali (y,m,d) to JS Date (UTC) via binary search — no jalaali-js needed, uses Intl. */
+export function jalaliToDateUTC(jy: number, jm: number, jd: number): Date {
+  const DAY_MS = 24 * 60 * 60 * 1000;
+  const approxYear = jy + 621;
+  let lowDay = Math.floor(Date.UTC(approxYear - 2, 0, 1) / DAY_MS);
+  let highDay = Math.floor(Date.UTC(approxYear + 2, 11, 31) / DAY_MS);
+  while (lowDay <= highDay) {
+    const midDay = Math.floor((lowDay + highDay) / 2);
+    const midDate = new Date(midDay * DAY_MS);
+    const { year, month, day } = getPersianYMD(midDate);
+    if (year === jy && month === jm && day === jd) return midDate;
+    const isBefore =
+      year < jy || (year === jy && month < jm) || (year === jy && month === jm && day < jd);
+    if (isBefore) lowDay = midDay + 1;
+    else highDay = midDay - 1;
+  }
+  throw new Error('Invalid Jalali date');
+}
+
+/** Jalali leap year — derived from Intl `ca-persian` (source of truth), not approximate 128-year formula. */
+export function isJalaliLeapYear(jy: number): boolean {
+  try {
+    const d = jalaliToDateUTC(jy, 12, 30);
+    const ymd = getPersianYMD(d);
+    return ymd.year === jy && ymd.month === 12 && ymd.day === 30;
+  } catch {
+    return false;
+  }
+}
+
+export function getDaysInJalaliMonth(jy: number, jm: number): number {
+  if (jm <= 6) return 31;
+  if (jm <= 11) return 30;
+  return isJalaliLeapYear(jy) ? 30 : 29;
+}
+
+export function getDaysInGregorianMonth(year: number, month: number): number {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+
+export function toCalendarDate(
+  date: Date,
+  calendar: CalendarSystem,
+): { year: number; month: number; day: number } {
+  if (calendar === 'persian') return getPersianYMD(date);
+  return { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1, day: date.getUTCDate() };
+}
+
+export function fromCalendarDate(
+  year: number,
+  month: number,
+  day: number,
+  calendar: CalendarSystem,
+): Date {
+  if (calendar === 'persian') return jalaliToDateUTC(year, month, day);
+  return new Date(Date.UTC(year, month - 1, day));
+}
+
+export function getDaysInMonth(year: number, month: number, calendar: CalendarSystem): number {
+  return calendar === 'persian'
+    ? getDaysInJalaliMonth(year, month)
+    : getDaysInGregorianMonth(year, month);
+}
+
+export const PERSIAN_MONTHS = [
+  { value: 1, label: 'فروردین' },
+  { value: 2, label: 'اردیبهشت' },
+  { value: 3, label: 'خرداد' },
+  { value: 4, label: 'تیر' },
+  { value: 5, label: 'مرداد' },
+  { value: 6, label: 'شهریور' },
+  { value: 7, label: 'مهر' },
+  { value: 8, label: 'آبان' },
+  { value: 9, label: 'آذر' },
+  { value: 10, label: 'دی' },
+  { value: 11, label: 'بهمن' },
+  { value: 12, label: 'اسفند' },
+] as const;
+
+export const GREGORIAN_MONTHS = [
+  { value: 1, label: 'January' },
+  { value: 2, label: 'February' },
+  { value: 3, label: 'March' },
+  { value: 4, label: 'April' },
+  { value: 5, label: 'May' },
+  { value: 6, label: 'June' },
+  { value: 7, label: 'July' },
+  { value: 8, label: 'August' },
+  { value: 9, label: 'September' },
+  { value: 10, label: 'October' },
+  { value: 11, label: 'November' },
+  { value: 12, label: 'December' },
+] as const;

package/packages/ui/src/calendar.browser.test.tsx

@@ -0,0 +1,52 @@
+import { expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+
+import { Calendar } from './calendar';
+
+test('Calendar keyboard navigation stays scoped when two calendars are mounted', async () => {
+  await render(
+    <div>
+      <div data-testid="cal1">
+        <Calendar value={new Date('2025-03-15T00:00:00Z')} onValueChange={() => {}} />
+      </div>
+      <div data-testid="cal2">
+        <Calendar value={new Date('2025-03-15T00:00:00Z')} onValueChange={() => {}} />
+      </div>
+    </div>,
+  );
+
+  const cal1 = document.querySelector('[data-testid="cal1"]') as HTMLElement;
+  const cal2 = document.querySelector('[data-testid="cal2"]') as HTMLElement;
+  const day15Cal1 = cal1.querySelector('[data-day="15"]') as HTMLButtonElement;
+  const day16Cal1 = cal1.querySelector('[data-day="16"]') as HTMLButtonElement;
+  const day16Cal2 = cal2.querySelector('[data-day="16"]') as HTMLButtonElement;
+
+  expect(day15Cal1).toBeTruthy();
+  expect(day16Cal1).toBeTruthy();
+  day15Cal1.focus();
+  await expect.element(day15Cal1).toHaveFocus();
+
+  await userEvent.keyboard('{ArrowRight}');
+
+  await expect.element(day16Cal1).toHaveFocus();
+  expect(document.activeElement).not.toBe(day16Cal2);
+});
+
+test('Calendar respects min/max — out-of-range days are disabled', async () => {
+  await render(
+    <Calendar
+      value={new Date('2025-03-15T00:00:00Z')}
+      min={new Date('2025-03-10T00:00:00Z')}
+      max={new Date('2025-03-20T00:00:00Z')}
+    />,
+  );
+
+  const day9 = document.querySelector('[data-day="9"]') as HTMLButtonElement | null;
+  const day10 = document.querySelector('[data-day="10"]') as HTMLButtonElement;
+  const day21 = document.querySelector('[data-day="21"]') as HTMLButtonElement | null;
+
+  if (day9) await expect.element(day9).toBeDisabled();
+  await expect.element(day10).not.toBeDisabled();
+  if (day21) await expect.element(day21).toBeDisabled();
+});

package/packages/ui/src/calendar.tsx

@@ -0,0 +1,339 @@
+import { ChevronIcon } from '@noe/icons';
+import * as React from 'react';
+import { Button } from './button';
+import {
+  type CalendarSystem,
+  fromCalendarDate,
+  getDaysInMonth,
+  PERSIAN_MONTHS,
+  toCalendarDate,
+} from './calendar-system';
+import { cn } from './lib/cn';
+import { t } from './lib/i18n-messages';
+
+export type { CalendarSystem };
+
+export interface CalendarProps
+  extends Omit<React.ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
+  calendar?: CalendarSystem;
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (date: Date | null) => void;
+  locale?: string | undefined;
+  min?: Date | null | undefined;
+  max?: Date | null | undefined;
+  /** i18n labels */
+  labels?: {
+    previousMonth?: string;
+    nextMonth?: string;
+  };
+}
+
+/**
+ * Calendar — month grid with navigation, calendar-system abstraction (gregory/persian).
+ * Calendar system (year/month/day) is separate from locale formatting (month names, numbers).
+ * Jalali logic is from injast-core (Intl ca-persian + binary search), no jalaali-js dep.
+ * Tokenized, RTL-safe (logical gap, `dir` propagation), keyboard navigable, respects reduced-motion.
+ * Semantics: uses <table> with <thead>/<tbody> to satisfy a11y and avoid hydration mismatches.
+ */
+export function Calendar({
+  calendar = 'gregory',
+  value,
+  defaultValue,
+  onValueChange,
+  locale,
+  min,
+  max,
+  labels,
+  className,
+  ...props
+}: CalendarProps) {
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = React.useState<Date | null>(defaultValue ?? null);
+  const selected = isControlled ? (value ?? null) : internal;
+
+  const today = React.useMemo(() => new Date(), []);
+  const initial = selected ?? today;
+  const initialCal = toCalendarDate(initial, calendar);
+  const [viewYear, setViewYear] = React.useState(initialCal.year);
+  const [viewMonth, setViewMonth] = React.useState(initialCal.month);
+
+  React.useEffect(() => {
+    if (selected) {
+      const cal = toCalendarDate(selected, calendar);
+      setViewYear(cal.year);
+      setViewMonth(cal.month);
+    }
+  }, [selected, calendar]);
+
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth, calendar);
+  const firstDayDate = fromCalendarDate(viewYear, viewMonth, 1, calendar);
+  const gregWeekday = firstDayDate.getUTCDay(); // 0=Sun
+  // Persian week starts Saturday. Gregorian starts Sunday.
+  const firstWeekday = calendar === 'persian' ? (gregWeekday + 1) % 7 : gregWeekday;
+
+  const monthLabel =
+    calendar === 'persian'
+      ? (PERSIAN_MONTHS.find((m) => m.value === viewMonth)?.label ?? String(viewMonth))
+      : new Intl.DateTimeFormat(locale ?? 'en-US', { month: 'long', timeZone: 'UTC' }).format(
+          new Date(Date.UTC(viewYear, viewMonth - 1, 1)),
+        );
+
+  const yearLabel = new Intl.NumberFormat(
+    locale ?? (calendar === 'persian' ? 'fa-IR' : 'en-US'),
+  ).format(viewYear);
+
+  const canPrev = React.useMemo(() => {
+    if (!min) return true;
+    const prevMonth = viewMonth === 1 ? 12 : viewMonth - 1;
+    const prevYear = viewMonth === 1 ? viewYear - 1 : viewYear;
+    const lastDay = getDaysInMonth(prevYear, prevMonth, calendar);
+    const prevDate = fromCalendarDate(prevYear, prevMonth, lastDay, calendar);
+    return prevDate >= min;
+  }, [min, viewMonth, viewYear, calendar]);
+
+  const canNext = React.useMemo(() => {
+    if (!max) return true;
+    const nextMonth = viewMonth === 12 ? 1 : viewMonth + 1;
+    const nextYear = viewMonth === 12 ? viewYear + 1 : viewYear;
+    const nextDate = fromCalendarDate(nextYear, nextMonth, 1, calendar);
+    return nextDate <= max;
+  }, [max, viewMonth, viewYear, calendar]);
+
+  const onPrev = () => {
+    if (!canPrev) return;
+    if (viewMonth === 1) {
+      setViewYear((y) => y - 1);
+      setViewMonth(12);
+    } else setViewMonth((m) => m - 1);
+  };
+  const onNext = () => {
+    if (!canNext) return;
+    if (viewMonth === 12) {
+      setViewYear((y) => y + 1);
+      setViewMonth(1);
+    } else setViewMonth((m) => m + 1);
+  };
+
+  const onSelect = (day: number) => {
+    const date = fromCalendarDate(viewYear, viewMonth, day, calendar);
+    if (min && date < min) return;
+    if (max && date > max) return;
+    if (!isControlled) setInternal(date);
+    onValueChange?.(date);
+  };
+
+  const weekdays =
+    locale?.startsWith('fa') || calendar === 'persian'
+      ? ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']
+      : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+  // Build weeks: array of 7-cell rows
+  const weeks: (number | null)[][] = [];
+  let day = 1;
+  for (let w = 0; w < 6; w++) {
+    const week: (number | null)[] = [];
+    for (let c = 0; c < 7; c++) {
+      const cellIndex = w * 7 + c;
+      if (cellIndex < firstWeekday || day > daysInMonth) week.push(null);
+      else {
+        week.push(day);
+        day++;
+      }
+    }
+    weeks.push(week);
+    if (day > daysInMonth) break;
+  }
+
+  const prevLabel = labels?.previousMonth ?? t(locale, 'calendar.previousMonth');
+  const nextLabel = labels?.nextMonth ?? t(locale, 'calendar.nextMonth');
+  const tableRef = React.useRef<HTMLTableElement>(null);
+
+  // Roving tabindex: focus selected day, else today, else first day
+  const getTabIndex = (d: number) => {
+    if (selected) {
+      const cal = toCalendarDate(selected, calendar);
+      if (cal.year === viewYear && cal.month === viewMonth && cal.day === d) return 0;
+    }
+    const t = toCalendarDate(today, calendar);
+    if (t.year === viewYear && t.month === viewMonth && t.day === d) return 0;
+    if (!selected && t.year !== viewYear) return d === 1 ? 0 : -1;
+    return -1;
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = (e) => {
+    const active = document.activeElement as HTMLElement | null;
+    const currentDay = active?.getAttribute('data-day');
+    if (!currentDay) return;
+    const d = Number(currentDay);
+    if (Number.isNaN(d)) return;
+    let targetDay: number | null = null;
+    let targetMonth = viewMonth;
+    let targetYear = viewYear;
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        targetDay = d + 1;
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        targetDay = d - 1;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        targetDay = d - 7;
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        targetDay = d + 7;
+        break;
+      case 'Home':
+        e.preventDefault();
+        targetDay = 1;
+        break;
+      case 'End':
+        e.preventDefault();
+        targetDay = daysInMonth;
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        if (viewMonth === 1) {
+          targetYear = viewYear - 1;
+          targetMonth = 12;
+        } else targetMonth = viewMonth - 1;
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        if (viewMonth === 12) {
+          targetYear = viewYear + 1;
+          targetMonth = 1;
+        } else targetMonth = viewMonth + 1;
+        break;
+      default:
+        return;
+    }
+    if (e.key === 'PageUp' || e.key === 'PageDown') {
+      if (targetMonth !== viewMonth || targetYear !== viewYear) {
+        setViewYear(targetYear);
+        setViewMonth(targetMonth);
+      }
+      return;
+    }
+    if (targetDay !== null) {
+      if (targetDay < 1 || targetDay > daysInMonth) {
+        // navigate to adjacent month
+        if (targetDay < 1 && canPrev) onPrev();
+        else if (targetDay > daysInMonth && canNext) onNext();
+        return;
+      }
+      const scope = tableRef.current ?? document;
+      const nextBtn = scope.querySelector<HTMLButtonElement>(`[data-day="${targetDay}"]`);
+      nextBtn?.focus();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-[18rem] rounded-md border border-border bg-surface-raised p-3 shadow-raised',
+        className,
+      )}
+      data-slot="calendar"
+      data-calendar={calendar}
+      {...props}
+    >
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={prevLabel}
+          disabled={!canPrev}
+          onClick={onPrev}
+        >
+          <ChevronIcon direction="backward" className="size-4" />
+        </Button>
+        <div className="text-sm font-medium text-foreground" dir="auto">
+          {monthLabel} {yearLabel}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={nextLabel}
+          disabled={!canNext}
+          onClick={onNext}
+        >
+          <ChevronIcon direction="forward" className="size-4" />
+        </Button>
+      </div>
+      <table
+        ref={tableRef}
+        aria-label={`${monthLabel} ${yearLabel}`}
+        className="w-full border-collapse"
+        onKeyDown={handleKeyDown}
+      >
+        <thead>
+          <tr className="grid grid-cols-7 gap-1">
+            {weekdays.map((d) => (
+              <th
+                key={d}
+                scope="col"
+                className="py-1 text-center text-xs font-medium text-muted-foreground"
+              >
+                {d}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="flex flex-col gap-1">
+          {weeks.map((week, wi) => (
+            <tr key={`week-${wi}`} className="grid grid-cols-7 gap-1">
+              {week.map((d, ci) =>
+                d === null ? (
+                  <td key={`empty-${wi}-${ci}`} aria-hidden="true" />
+                ) : (
+                  (() => {
+                    const date = fromCalendarDate(viewYear, viewMonth, d, calendar);
+                    const calSelected = selected ? toCalendarDate(selected, calendar) : null;
+                    const isSelected =
+                      !!calSelected &&
+                      calSelected.year === viewYear &&
+                      calSelected.month === viewMonth &&
+                      calSelected.day === d;
+                    const t = toCalendarDate(today, calendar);
+                    const isToday = t.year === viewYear && t.month === viewMonth && t.day === d;
+                    const disabled = (min && date < min) || (max && date > max) || false;
+                    return (
+                      <td key={d} className="flex justify-center">
+                        <button
+                          type="button"
+                          data-day={d}
+                          tabIndex={getTabIndex(d)}
+                          aria-pressed={isSelected}
+                          aria-current={isToday ? 'date' : undefined}
+                          disabled={Boolean(disabled)}
+                          onClick={() => onSelect(d)}
+                          className={cn(
+                            'flex size-8 items-center justify-center rounded-md text-sm tabular-nums focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:opacity-30',
+                            isSelected
+                              ? 'bg-accent text-accent-foreground'
+                              : isToday
+                                ? 'border border-accent text-accent'
+                                : 'text-foreground hover:bg-muted',
+                          )}
+                        >
+                          {new Intl.NumberFormat(
+                            locale ?? (calendar === 'persian' ? 'fa-IR' : 'en-US'),
+                          ).format(d)}
+                        </button>
+                      </td>
+                    );
+                  })()
+                ),
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/ui/src/card.tsx

@@ -0,0 +1,63 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export function Card({ className, ...props }: React.ComponentProps<'section'>) {
+  return (
+    <section
+      className={cn(
+        'flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-foreground',
+        className,
+      )}
+      data-slot="card"
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: React.ComponentProps<'header'>) {
+  return (
+    <header
+      className={cn('flex flex-col gap-2 px-6 pt-6', className)}
+      data-slot="card-header"
+      {...props}
+    />
+  );
+}
+
+export function CardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
+  return (
+    <h3
+      className={cn('font-heading text-lg font-semibold leading-snug tracking-tight', className)}
+      data-slot="card-title"
+      {...props}
+    />
+  );
+}
+
+export function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      className={cn('m-0 text-sm leading-normal text-muted-foreground', className)}
+      data-slot="card-description"
+      {...props}
+    />
+  );
+}
+
+export function CardPanel({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('px-6 py-5', className)} data-slot="card-panel" {...props} />;
+}
+
+export function CardFooter({ className, ...props }: React.ComponentProps<'footer'>) {
+  return (
+    <footer
+      className={cn(
+        'flex items-center gap-2 border-t border-border bg-surface-sunken/50 px-6 py-4',
+        className,
+      )}
+      data-slot="card-footer"
+      {...props}
+    />
+  );
+}