@wealthx/shadcn 1.5.8 → 1.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.8",
+  "version": "1.5.10",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/appointment-calendar-view.tsx

@@ -50,12 +50,15 @@ export interface AppointmentCalendarViewProps {
   weekDays: AppointmentWeekDay[];
   /** Hours displayed in day/week view — defaults to [9..17] */
   hours?: number[];
-  /** ISO date used for Day view */
+  /** ISO date controlling which day/month is displayed — defaults to `today` */
+  viewDate?: string;
+  /** @deprecated Use `viewDate` instead */
   dayViewDate?: string;
   defaultView?: "day" | "week" | "month";
   onPrev?: () => void;
   onNext?: () => void;
   onToday?: () => void;
+  onViewChange?: (view: "day" | "week" | "month") => void;
   onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
   /** Slot rendered in the calendar toolbar right side (e.g. pending request button + new appointment button) */
   toolbarActions?: ReactNode;
@@ -335,16 +338,17 @@ function generateMonthGrid(year: number, month: number): (Date | null)[][] {
 
 function MonthView({
   appointments,
+  viewDate,
   today,
   onSelectAppointment,
 }: {
   appointments: AppointmentCalendarItem[];
+  viewDate: string;
   today: string;
   onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
 }) {
-  // Derive year/month from today prop
-  const todayDate = new Date(today + "T00:00:00");
-  const grid = generateMonthGrid(todayDate.getFullYear(), todayDate.getMonth());
+  const vd = new Date(viewDate + "T00:00:00");
+  const grid = generateMonthGrid(vd.getFullYear(), vd.getMonth());
   // Use local date parts — toISOString() converts to UTC first, which shifts the
   // date back 1 day for UTC+ timezones (e.g. UTC+7 shows Thu booking on Wed cell).
   const toIso = (d: Date) =>
@@ -430,15 +434,17 @@ export function AppointmentCalendarView({
   periodLabel,
   weekDays,
   hours = DEFAULT_HOURS,
+  viewDate,
   dayViewDate,
   defaultView = "week",
   onPrev,
   onNext,
   onToday,
+  onViewChange,
   onSelectAppointment,
   toolbarActions,
 }: AppointmentCalendarViewProps) {
-  const dayDate = dayViewDate ?? today;
+  const effectiveViewDate = viewDate ?? dayViewDate ?? today;
 
   return (
     <div className="flex flex-col border border-border bg-card">
@@ -473,7 +479,11 @@ export function AppointmentCalendarView({
 
       <Separator />
 
-      <Tabs defaultValue={defaultView} className="flex flex-col">
+      <Tabs
+        defaultValue={defaultView}
+        onValueChange={(v) => onViewChange?.(v as "day" | "week" | "month")}
+        className="flex flex-col"
+      >
         <div className="px-4 pt-3">
           <TabsList>
             <TabsTrigger value="day">Day</TabsTrigger>
@@ -481,16 +491,16 @@ export function AppointmentCalendarView({
             <TabsTrigger value="month">Month</TabsTrigger>
           </TabsList>
         </div>
-        <TabsContent value="day" className="mt-0">
+        <TabsContent value="day" className="mt-0 max-h-[75vh] overflow-y-auto">
           <DayView
             appointments={appointments}
-            date={dayDate}
+            date={effectiveViewDate}
             today={today}
             hours={hours}
             onSelectAppointment={onSelectAppointment}
           />
         </TabsContent>
-        <TabsContent value="week" className="mt-0">
+        <TabsContent value="week" className="mt-0 max-h-[75vh] overflow-y-auto">
           <WeekView
             appointments={appointments}
             weekDays={weekDays}
@@ -499,9 +509,13 @@ export function AppointmentCalendarView({
             onSelectAppointment={onSelectAppointment}
           />
         </TabsContent>
-        <TabsContent value="month" className="mt-0">
+        <TabsContent
+          value="month"
+          className="mt-0 max-h-[75vh] overflow-y-auto"
+        >
           <MonthView
             appointments={appointments}
+            viewDate={effectiveViewDate}
             today={today}
             onSelectAppointment={onSelectAppointment}
           />