@neynar/ui 0.3.1 → 0.5.0

package/src/components/ui/stories/calendar.stories.tsx

@@ -1,374 +1,597 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import type { DateRange as DateRangeType } from "react-day-picker";
+import { CalendarIcon, TrendingUpIcon, BarChart3Icon } from "lucide-react";
+import { addDays, format, subDays } from "date-fns";
+
 import { Calendar } from "../calendar";
+import { Button } from "../button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+import { Label } from "../label";
 
-const meta = {
-  title: "Form & Input/Calendar",
+const meta: Meta<typeof Calendar> = {
+  title: "Components/Form & Field/Calendar",
   component: Calendar,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A comprehensive date selection calendar component built on react-day-picker. Supports single dates, date ranges, multiple dates, and flexible validation rules with full accessibility features.",
-      },
-    },
   },
   argTypes: {
     mode: {
-      control: { type: "select" },
+      control: "select",
       options: ["single", "multiple", "range"],
-      description: "The selection mode of the calendar",
+      description: "Selection mode for dates",
     },
     showOutsideDays: {
-      control: { type: "boolean" },
-      description: "Whether to show days outside the current month",
+      control: "boolean",
+      description: "Show days from previous/next months",
     },
     captionLayout: {
-      control: { type: "select" },
-      options: ["label", "dropdown-buttons", "dropdown"],
-      description: "Layout mode for the month/year caption",
+      control: "select",
+      options: ["label", "dropdown", "dropdown-months", "dropdown-years"],
+      description: "Layout style for month/year caption",
     },
     buttonVariant: {
-      control: { type: "select" },
+      control: "select",
       options: [
         "default",
-        "destructive",
         "outline",
         "secondary",
         "ghost",
+        "destructive",
         "link",
       ],
-      description: "Variant for the navigation buttons",
-    },
-    numberOfMonths: {
-      control: { type: "number", min: 1, max: 12 },
-      description: "Number of months to display simultaneously",
+      description: "Visual style variant for navigation buttons",
     },
     disabled: {
-      control: { type: "boolean" },
-      description: "Whether the calendar is disabled",
+      control: "boolean",
+      description: "Disable all date selection",
     },
-    fromYear: {
-      control: { type: "number" },
-      description: "Earliest year for dropdown selection",
+    numberOfMonths: {
+      control: "number",
+      description: "Number of months to display",
+      min: 1,
+      max: 12,
     },
-    toYear: {
-      control: { type: "number" },
-      description: "Latest year for dropdown selection",
+    showWeekNumber: {
+      control: "boolean",
+      description: "Show week numbers",
     },
   },
-  args: {
-    showOutsideDays: true,
-    captionLayout: "label",
-    buttonVariant: "ghost",
-    numberOfMonths: 1,
-  },
-} satisfies Meta<typeof Calendar>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Calendar>;
 
 /**
- * Interactive playground for testing all calendar features and configurations.
- * Use the controls panel to experiment with different props and see real-time changes.
+ * API Analytics Date Range - A realistic scenario showing the Calendar component
+ * in the context of selecting date ranges for viewing API usage analytics in the
+ * Neynar Dashboard.
  */
-export const Interactive: Story = {
-  render: (args) => {
-    const [date, setDate] = useState<Date | undefined>();
-    const [dateRange, setDateRange] = useState<DateRangeType | undefined>();
-    const [multipleDates, setMultipleDates] = useState<Date[] | undefined>([]);
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function AnalyticsDateRangePicker() {
+      const [dateRange, setDateRange] = useState<{ from: Date; to?: Date }>({
+        from: subDays(new Date(), 7),
+        to: new Date(),
+      });
 
-    // Handle different selection modes
-    const getSelected = () => {
-      switch (args.mode) {
-        case "range":
-          return dateRange;
-        case "multiple":
-          return multipleDates;
-        default:
-          return date;
-      }
-    };
+      const formatDateRange = () => {
+        if (!dateRange?.from) return "Select date range";
+        if (!dateRange.to) return format(dateRange.from, "MMM dd, yyyy");
+        return `${format(dateRange.from, "MMM dd, yyyy")} - ${format(dateRange.to, "MMM dd, yyyy")}`;
+      };
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleSelect = (selected: any) => {
-      switch (args.mode) {
-        case "range":
-          setDateRange(selected);
-          break;
-        case "multiple":
-          setMultipleDates(selected);
-          break;
-        default:
-          setDate(selected);
-          break;
-      }
-    };
+      return (
+        <div className="w-full max-w-4xl space-y-6">
+          {/* Header */}
+          <div className="space-y-2">
+            <h2 className="text-lg font-semibold">API Usage Analytics</h2>
+            <p className="text-muted-foreground text-sm">
+              View your API request metrics and usage patterns over time.
+            </p>
+          </div>
 
-    const getSelectedText = () => {
-      switch (args.mode) {
-        case "range":
-          if (dateRange?.from && dateRange?.to) {
-            return `${dateRange.from.toLocaleDateString()} - ${dateRange.to.toLocaleDateString()}`;
-          }
-          if (dateRange?.from) {
-            return `From: ${dateRange.from.toLocaleDateString()}`;
-          }
-          return "No range selected";
-        case "multiple":
-          return multipleDates?.length
-            ? `${multipleDates.length} dates selected: ${multipleDates
-                .slice(0, 3)
-                .map((d) => d.toLocaleDateString())
-                .join(", ")}${multipleDates.length > 3 ? "..." : ""}`
-            : "No dates selected";
-        default:
-          return date
-            ? `Selected: ${date.toLocaleDateString()}`
-            : "No date selected";
-      }
-    };
+          {/* Date Range Selector Card */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <CalendarIcon className="size-5" />
+                Select Date Range
+              </CardTitle>
+              <CardDescription>
+                Choose a time period to analyze your API usage metrics
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Current Selection */}
+              <div className="border-border bg-muted/50 flex items-center justify-between rounded-lg border p-4">
+                <div className="flex items-center gap-3">
+                  <div className="bg-primary/10 text-primary rounded-md p-2">
+                    <BarChart3Icon className="size-5" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">Selected Period</p>
+                    <p className="text-muted-foreground text-sm">
+                      {formatDateRange()}
+                    </p>
+                  </div>
+                </div>
+                {dateRange?.from && dateRange?.to && (
+                  <div className="text-right">
+                    <p className="text-sm font-medium">
+                      {Math.ceil(
+                        (dateRange.to.getTime() - dateRange.from.getTime()) /
+                          (1000 * 60 * 60 * 24) +
+                          1,
+                      )}{" "}
+                      days
+                    </p>
+                    <p className="text-muted-foreground text-xs">in range</p>
+                  </div>
+                )}
+              </div>
 
-    return (
-      <div className="space-y-4">
-        <Calendar
-          {...args}
-          // @ts-expect-error - selected is not typed correctly
-          selected={getSelected()}
-          onSelect={handleSelect}
-          className="rounded-md border"
-        />
-        <div className="text-sm text-muted-foreground max-w-md">
-          <strong>Current Selection:</strong> {getSelectedText()}
+              {/* Quick Presets */}
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Quick Presets</Label>
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setDateRange({
+                        from: subDays(new Date(), 7),
+                        to: new Date(),
+                      })
+                    }
+                  >
+                    Last 7 days
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setDateRange({
+                        from: subDays(new Date(), 30),
+                        to: new Date(),
+                      })
+                    }
+                  >
+                    Last 30 days
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setDateRange({
+                        from: subDays(new Date(), 90),
+                        to: new Date(),
+                      })
+                    }
+                  >
+                    Last 90 days
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setDateRange({ from: new Date(), to: new Date() })
+                    }
+                  >
+                    Today
+                  </Button>
+                </div>
+              </div>
+
+              {/* Calendar */}
+              <div className="flex justify-center">
+                <Calendar
+                  mode="range"
+                  selected={dateRange}
+                  onSelect={(range) =>
+                    range?.from &&
+                    setDateRange({ from: range.from, to: range.to })
+                  }
+                  numberOfMonths={2}
+                  disabled={(date) => date > new Date()}
+                />
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex justify-end gap-2 border-t pt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setDateRange({ from: new Date() })}
+                >
+                  Clear
+                </Button>
+                <Button>
+                  <TrendingUpIcon data-icon="inline-start" />
+                  View Analytics
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
         </div>
-      </div>
-    );
-  },
-  args: {
-    mode: "single",
+      );
+    }
+
+    return <AnalyticsDateRangePicker />;
   },
 };
 
 /**
- * Comprehensive showcase of all calendar variants and configurations.
- * Demonstrates different selection modes, layouts, and styling options.
+ * Complete design system reference showing all Calendar modes, caption layouts,
+ * and configuration options.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => {
-    const [singleDate, setSingleDate] = useState<Date | undefined>(new Date());
-    const [dateRange, setDateRange] = useState<DateRangeType | undefined>();
-    const [multipleDates, setMultipleDates] = useState<Date[] | undefined>([]);
+    function SingleDateExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar mode="single" selected={selected} onSelect={setSelected} />
+      );
+    }
+
+    function RangeDateExample() {
+      const [selected, setSelected] = useState<{ from: Date; to?: Date }>({
+        from: subDays(new Date(), 7),
+        to: new Date(),
+      });
+      return (
+        <Calendar
+          mode="range"
+          selected={selected}
+          onSelect={(range) =>
+            range?.from && setSelected({ from: range.from, to: range.to })
+          }
+        />
+      );
+    }
+
+    function MultipleDateExample() {
+      const [selected, setSelected] = useState<Date[]>([
+        new Date(),
+        addDays(new Date(), 2),
+        addDays(new Date(), 5),
+      ]);
+      return (
+        <Calendar
+          mode="multiple"
+          selected={selected}
+          onSelect={(dates) => dates && setSelected(dates)}
+          required
+        />
+      );
+    }
+
+    function TwoMonthsExample() {
+      const [selected, setSelected] = useState<{ from: Date; to?: Date }>({
+        from: subDays(new Date(), 7),
+        to: new Date(),
+      });
+      return (
+        <Calendar
+          mode="range"
+          selected={selected}
+          onSelect={(range) =>
+            range?.from && setSelected({ from: range.from, to: range.to })
+          }
+          numberOfMonths={2}
+        />
+      );
+    }
+
+    function DropdownCaptionExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+          captionLayout="dropdown"
+          fromYear={2020}
+          toYear={2030}
+        />
+      );
+    }
+
+    function DropdownMonthsExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+          captionLayout="dropdown-months"
+          fromYear={2020}
+          toYear={2030}
+        />
+      );
+    }
+
+    function DropdownYearsExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+          captionLayout="dropdown-years"
+          fromYear={2020}
+          toYear={2030}
+        />
+      );
+    }
+
+    function WeekNumbersExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+          showWeekNumber
+        />
+      );
+    }
+
+    function DisabledDatesExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+          disabled={(date) =>
+            date < new Date() || date > addDays(new Date(), 30)
+          }
+        />
+      );
+    }
+
+    function HiddenOutsideDaysExample() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+      return (
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+          showOutsideDays={false}
+        />
+      );
+    }
 
     return (
-      <div className="space-y-8 max-w-6xl">
-        <div>
-          <h3 className="text-lg font-semibold mb-4">Selection Modes</h3>
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Single Date</h4>
-              <Calendar
-                mode="single"
-                selected={singleDate}
-                onSelect={setSingleDate}
-                className="rounded-md border"
-              />
+      <div className="w-full max-w-6xl space-y-12">
+        {/* Selection Modes */}
+        <section className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Selection Modes</h3>
+            <p className="text-muted-foreground text-sm">
+              Different modes for single date, date range, or multiple date
+              selection.
+            </p>
+          </div>
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            <div className="space-y-3">
+              <div>
+                <p className="font-medium">Single Date</p>
+                <p className="text-muted-foreground text-xs">Select one date</p>
+              </div>
+              <SingleDateExample />
             </div>
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Date Range</h4>
-              <Calendar
-                mode="range"
-                selected={dateRange}
-                onSelect={setDateRange}
-                className="rounded-md border"
-              />
+            <div className="space-y-3">
+              <div>
+                <p className="font-medium">Date Range</p>
+                <p className="text-muted-foreground text-xs">
+                  Select start and end dates
+                </p>
+              </div>
+              <RangeDateExample />
             </div>
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Multiple Dates</h4>
-              <Calendar
-                mode="multiple"
-                selected={multipleDates}
-                onSelect={setMultipleDates}
-                className="rounded-md border"
-              />
+            <div className="space-y-3">
+              <div>
+                <p className="font-medium">Multiple Dates</p>
+                <p className="text-muted-foreground text-xs">
+                  Select multiple individual dates
+                </p>
+              </div>
+              <MultipleDateExample />
             </div>
           </div>
-        </div>
+        </section>
 
-        <div>
-          <h3 className="text-lg font-semibold mb-4">Caption Layouts</h3>
-          <div className="grid gap-6 md:grid-cols-2">
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Dropdown Navigation</h4>
-              <Calendar
-                mode="single"
-                captionLayout="dropdown"
-                fromYear={2020}
-                toYear={2030}
-                className="rounded-md border"
-              />
-            </div>
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Two Months</h4>
-              <Calendar
-                mode="range"
-                numberOfMonths={2}
-                className="rounded-md border"
-              />
-            </div>
+        {/* Caption Layouts */}
+        <section className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Caption Layouts</h3>
+            <p className="text-muted-foreground text-sm">
+              Different styles for the month/year header with label or dropdown
+              navigation.
+            </p>
           </div>
-        </div>
-
-        <div>
-          <h3 className="text-lg font-semibold mb-4">Button Variants</h3>
-          <div className="grid gap-6 md:grid-cols-3">
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Outline Buttons</h4>
-              <Calendar
-                mode="single"
-                buttonVariant="outline"
-                className="rounded-md border"
-              />
-            </div>
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Secondary Buttons</h4>
-              <Calendar
-                mode="single"
-                buttonVariant="secondary"
-                className="rounded-md border"
-              />
+          <div className="grid gap-8 md:grid-cols-2">
+            <div className="space-y-3">
+              <div>
+                <p className="font-medium">Label Caption (Default)</p>
+                <p className="text-muted-foreground text-xs">
+                  Simple text label with arrows
+                </p>
+              </div>
+              <SingleDateExample />
             </div>
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium">Default Buttons</h4>
-              <Calendar
-                mode="single"
-                buttonVariant="default"
-                className="rounded-md border"
-              />
+            <div className="space-y-3">
+              <div>
+                <p className="font-medium">Dropdown Caption</p>
+                <p className="text-muted-foreground text-xs">
+                  Dropdown selectors for month and year
+                </p>
+              </div>
+              <DropdownCaptionExample />
             </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * Real-world usage example showing the calendar in a typical application context.
- * Demonstrates integration with forms, validation, and user workflows.
- */
-export const InContext: Story = {
-  render: () => {
-    const [checkIn, setCheckIn] = useState<Date | undefined>();
-    const [checkOut, setCheckOut] = useState<Date | undefined>();
-    const [eventDates, setEventDates] = useState<Date[] | undefined>([]);
-    const [birthdayDate, setBirthdayDate] = useState<Date | undefined>();
-
-    const today = new Date();
-    const maxCheckoutDate = new Date();
-    maxCheckoutDate.setMonth(today.getMonth() + 6);
-
-    return (
-      <div className="space-y-8 max-w-4xl">
-        <div className="rounded-lg border p-6 bg-card">
-          <h3 className="text-lg font-semibold mb-4">Hotel Booking System</h3>
-          <div className="grid gap-6 md:grid-cols-2">
             <div className="space-y-3">
-              <label className="text-sm font-medium">Check-in Date</label>
-              <Calendar
-                mode="single"
-                selected={checkIn}
-                onSelect={setCheckIn}
-                disabled={(date) => date < today}
-                className="rounded-md border"
-              />
-              <p className="text-xs text-muted-foreground">
-                {checkIn
-                  ? `Check-in: ${checkIn.toLocaleDateString()}`
-                  : "Select check-in date"}
-              </p>
+              <div>
+                <p className="font-medium">Dropdown Months Only</p>
+                <p className="text-muted-foreground text-xs">
+                  Month dropdown with year label
+                </p>
+              </div>
+              <DropdownMonthsExample />
             </div>
             <div className="space-y-3">
-              <label className="text-sm font-medium">Check-out Date</label>
-              <Calendar
-                mode="single"
-                selected={checkOut}
-                onSelect={setCheckOut}
-                disabled={(date: Date) => {
-                  return Boolean(
-                    date < (checkIn || today) ||
-                      date > maxCheckoutDate ||
-                      (checkIn && date <= checkIn),
-                  );
-                }}
-                className="rounded-md border"
-              />
-              <p className="text-xs text-muted-foreground">
-                {checkOut
-                  ? `Check-out: ${checkOut.toLocaleDateString()}`
-                  : "Select check-out date"}
-              </p>
+              <div>
+                <p className="font-medium">Dropdown Years Only</p>
+                <p className="text-muted-foreground text-xs">
+                  Year dropdown with month label
+                </p>
+              </div>
+              <DropdownYearsExample />
             </div>
           </div>
-        </div>
+        </section>
+
+        {/* Multiple Months */}
+        <section className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Multiple Months</h3>
+            <p className="text-muted-foreground text-sm">
+              Display multiple months side-by-side for easier range selection.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <TwoMonthsExample />
+          </div>
+        </section>
 
-        <div className="rounded-lg border p-6 bg-card">
-          <h3 className="text-lg font-semibold mb-4">
-            Event Planning Dashboard
-          </h3>
-          <div className="grid gap-6 md:grid-cols-2">
+        {/* Additional Features */}
+        <section className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Additional Features</h3>
+            <p className="text-muted-foreground text-sm">
+              Week numbers, disabled dates, and outside day visibility options.
+            </p>
+          </div>
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            <div className="space-y-3">
+              <div>
+                <p className="font-medium">Week Numbers</p>
+                <p className="text-muted-foreground text-xs">
+                  Show ISO week numbers
+                </p>
+              </div>
+              <WeekNumbersExample />
+            </div>
             <div className="space-y-3">
-              <label className="text-sm font-medium">Meeting Dates</label>
-              <Calendar
-                mode="multiple"
-                selected={eventDates}
-                onSelect={setEventDates}
-                disabled={(date) =>
-                  date < today || date.getDay() === 0 || date.getDay() === 6
-                }
-                className="rounded-md border"
-              />
-              <p className="text-xs text-muted-foreground">
-                {eventDates?.length
-                  ? `${eventDates.length} meeting dates selected`
-                  : "Select weekdays for meetings"}
-              </p>
+              <div>
+                <p className="font-medium">Disabled Dates</p>
+                <p className="text-muted-foreground text-xs">
+                  Restrict selectable dates
+                </p>
+              </div>
+              <DisabledDatesExample />
             </div>
             <div className="space-y-3">
-              <label className="text-sm font-medium">
-                Team Member Birthday
-              </label>
-              <Calendar
-                mode="single"
-                selected={birthdayDate}
-                onSelect={setBirthdayDate}
-                captionLayout="dropdown"
-                fromYear={1950}
-                toYear={new Date().getFullYear()}
-                className="rounded-md border"
-              />
-              <p className="text-xs text-muted-foreground">
-                {birthdayDate
-                  ? `Birthday: ${birthdayDate.toLocaleDateString()}`
-                  : "Select birthday date"}
-              </p>
+              <div>
+                <p className="font-medium">Hidden Outside Days</p>
+                <p className="text-muted-foreground text-xs">
+                  Hide days from adjacent months
+                </p>
+              </div>
+              <HiddenOutsideDaysExample />
             </div>
           </div>
-        </div>
+        </section>
 
-        <div className="rounded-lg border p-6 bg-card">
-          <h3 className="text-lg font-semibold mb-4">Features Demonstrated</h3>
-          <ul className="text-sm text-muted-foreground space-y-1">
-            <li>• Date validation and restrictions</li>
-            <li>• Weekend/business day filtering</li>
-            <li>• Multiple selection modes</li>
-            <li>• Dropdown navigation for large date ranges</li>
-            <li>• Real-time feedback and state management</li>
-            <li>• Accessible form integration</li>
-          </ul>
-        </div>
+        {/* Button Variants */}
+        <section className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">
+              Navigation Button Variants
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Customize the appearance of navigation arrow buttons.
+            </p>
+          </div>
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {(
+              [
+                "default",
+                "outline",
+                "secondary",
+                "ghost",
+                "destructive",
+                "link",
+              ] as const
+            ).map((variant) => {
+              function ButtonVariantExample() {
+                const [selected, setSelected] = useState<Date | undefined>(
+                  new Date(),
+                );
+                return (
+                  <Calendar
+                    mode="single"
+                    selected={selected}
+                    onSelect={setSelected}
+                    buttonVariant={variant}
+                  />
+                );
+              }
+
+              return (
+                <div key={variant} className="space-y-3">
+                  <div>
+                    <p className="font-medium capitalize">{variant} Buttons</p>
+                    <p className="text-muted-foreground text-xs">
+                      Navigation button variant
+                    </p>
+                  </div>
+                  <ButtonVariantExample />
+                </div>
+              );
+            })}
+          </div>
+        </section>
       </div>
     );
   },
 };
+
+/**
+ * Interactive playground for testing Calendar props.
+ */
+export const Interactive: Story = {
+  args: {
+    mode: "single",
+    showOutsideDays: true,
+    captionLayout: "label",
+    buttonVariant: "ghost",
+  },
+  render: (args) => {
+    function InteractiveCalendar() {
+      const [selected, setSelected] = useState<Date | undefined>(new Date());
+
+      return (
+        <Calendar
+          {...args}
+          mode="single"
+          selected={selected}
+          onSelect={setSelected}
+        />
+      );
+    }
+
+    return <InteractiveCalendar />;
+  },
+};