@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/x/calendar-x.tsx

@@ -0,0 +1,1910 @@
+import { eachYearOfInterval, startOfYear, endOfYear, eachMonthOfInterval, isBefore, isAfter, addDays, subDays, startOfMonth, subMonths, endOfMonth, addMonths, subYears } from "date-fns";
+import { enUS, hi } from 'react-day-picker/locale'
+import { formatDateRange } from "little-date";
+import { format } from 'date-fns'
+import { PlusIcon, CalendarIcon, ClockIcon, ChevronDownIcon, CircleCheckIcon } from "lucide-react";
+import { useState, useId, useEffect, useRef } from "react";
+import { type DateRange } from 'react-day-picker'
+import { SelectValue, Input, Select, ScrollArea, Collapsible, Card, CardTitle, CardDescription, cn, Label, CardHeader, CardAction, CardContent, CardFooter, CalendarDayButton, Button, SelectTrigger, SelectContent, SelectItem, CollapsibleTrigger, CollapsibleContent, Calendar, calendarNavButtonVariants, calendarDayButtonVariants, calendarVariants } from "~/components/catalyst-ui";
+import type { CaptionLabelProps, MonthGridProps } from 'react-day-picker'
+
+/**
+* ★ ━━━━ ☆ ━━━━ CalendarX ━━━━ ☆ ━━━━ ★
+* type CalendarXType = 
+*   | 'default' | 'MultiMonth' | 'WeekNumber'                          // Basic Variants
+*   | 'RangeSingleMonth' | 'RangeCalendarMultiMonth' | 'RangeWithMinimumDays'  // Range Selection
+*   | 'MultiSelect' | 'CustomSelectDay' | 'CustomRangeSelect'           // Selection Types
+*   | 'DisableDay' | 'DisabledWeekends'                                // Disabled Dates
+*   | 'WithMonthYearDropdown' | 'RightYearMonth' | 'LeftYearMonth'     // Navigation & Layout
+*   | 'WithTodayMonthButton' | 'VariableSize' | 'WithAdvanceSelection'
+*   | 'WithDateInput' | 'WithTimeInput'                                // Input Integration
+*   | 'WithPresets' | 'WithRangePresets'                               // Quick Presets
+*   | 'CalendarAppointmentBooking' | 'EventList' | 'Pricing' | 'Localization'  // Specialized
+* 
+* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
+* 
+* ★ ━━━━━━━━━ Basic Calendar Variants ━━━━━━━━━ ★
+* ```jsx
+* // Default Calendar - Single date selection
+* <CalendarX 
+*   calendar="default"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Multi Month - Display multiple months
+* <CalendarX 
+*   calendar="MultiMonth"
+*   date={singleDate}
+*   setDate={setSingleDate}
+*   numOfMonths={2}
+* />
+* 
+* // With Week Numbers - Show week numbers
+* <CalendarX 
+*   calendar="WeekNumber"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Range Selection ━━━━━━━━━ ★
+* ```jsx
+* // Single Month Range - Select a date range
+* <CalendarX 
+*   calendar="RangeSingleMonth"
+*   dateRange={rangeDate}
+*   setDateRange={setRangeDate}
+* />
+* 
+* // Multi Month Range - Range across months
+* <CalendarX 
+*   calendar="RangeCalendarMultiMonth"
+*   dateRange={rangeDate}
+*   setDateRange={setRangeDate}
+*   numOfMonths={2}
+* />
+* 
+* // Minimum Days Range - Minimum 5 days selection
+* <CalendarX 
+*   calendar="RangeWithMinimumDays"
+*   dateRange={rangeDate}
+*   setDateRange={setRangeDate}
+*   min={5}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Selection Types ━━━━━━━━━ ★
+* ```jsx
+* // Multiple Selection - Select up to 5 dates
+* <CalendarX 
+*   calendar="MultiSelect"
+*   dates={multiDates}
+*   setDates={setMultiDates}
+* />
+* 
+* // Custom Day Selection - Custom styling for selected days
+* <CalendarX 
+*   calendar="CustomSelectDay"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Custom Range Selection - Styled range with start/end markers
+* <CalendarX 
+*   calendar="CustomRangeSelect"
+*   dateRange={rangeDate}
+*   setDateRange={setRangeDate}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Disabled Dates ━━━━━━━━━ ★
+* ```jsx
+* // Disable Past Dates - Dates before specific date are disabled
+* <CalendarX 
+*   calendar="DisableDay"
+*   date={singleDate}
+*   setDate={setSingleDate}
+*   before={new Date(2025, 5, 12)}
+* />
+* 
+* // Disable Weekends - Saturdays and Sundays disabled
+* <CalendarX 
+*   calendar="DisabledWeekends"
+*   dateRange={rangeDate}
+*   setDateRange={setRangeDate}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Navigation & Layout ━━━━━━━━━ ★
+* ```jsx
+* // With Dropdowns - Month/Year dropdown selection
+* <CalendarX 
+*   calendar="WithMonthYearDropdown"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Right Navigation - Navigation on the right side
+* <CalendarX 
+*   calendar="RightYearMonth"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Left Navigation - Navigation on the left side
+* <CalendarX 
+*   calendar="LeftYearMonth"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // With Today Button - Quick navigation to today
+* <CalendarX 
+*   calendar="WithTodayMonthButton"
+*   date={singleDate}
+*   setDate={setSingleDate}
+*   month={month}
+*   setMonth={setMonth}
+* />
+* 
+* // Variable Size - Custom cell sizes
+* <CalendarX 
+*   calendar="VariableSize"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Advanced Selection - Year/month grid view
+* <CalendarX 
+*   calendar="WithAdvanceSelection"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Input Integration ━━━━━━━━━ ★
+* ```jsx
+* // With Date Input - Type or pick a date
+* <CalendarX calendar="WithDateInput" />
+* 
+* // With Time Input - Select date and time
+* <CalendarX 
+*   calendar="WithTimeInput"
+*   date={singleDate}
+*   setDate={setSingleDate}
+*   time={time}
+*   setTime={setTime}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Quick Presets ━━━━━━━━━ ★
+* ```jsx
+* // Date Presets - Quick date selections
+* <CalendarX 
+*   calendar="WithPresets"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Range Presets - Common range selections
+* <CalendarX calendar="WithRangePresets" />
+* ```
+* 
+* ★ ━━━━━━━━━ Specialized Calendars ━━━━━━━━━ ★
+* ```jsx
+* // Appointment Booking - Book appointments with time slots
+* <CalendarX 
+*   calendar="CalendarAppointmentBooking"
+*   date={singleDate}
+*   setDate={setSingleDate}
+*   selectedTime={selectedTime}
+*   setSelectedTime={setSelectedTime}
+* />
+* 
+* // Event List Calendar - View events for selected date
+* <CalendarX 
+*   calendar="EventList"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Pricing Calendar - Dynamic pricing per date
+* <CalendarX 
+*   calendar="Pricing"
+*   date={singleDate}
+*   setDate={setSingleDate}
+* />
+* 
+* // Localization - Hindi and English support
+* <CalendarX 
+*   calendar="Localization"
+*   dateRange={rangeDate}
+*   setDateRange={setRangeDate}
+*   locale={locale}
+*   setLocale={setLocale}
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
+* 
+* CalendarX Props:
+* - `calendar`: CalendarXType - Specifies which variant to use
+* - `date`: Date | undefined - Selected single date (for single selection variants)
+* - `setDate`: (date: Date | undefined) => void - Single date change callback
+* - `dateRange`: { from: Date; to: Date } - Date range object (for range variants)
+* - `setDateRange`: (range: { from: Date; to: Date }) => void - Range change callback
+* - `dates`: Date[] - Array of selected dates (for multi-select variants)
+* - `setDates`: (dates: Date[]) => void - Multi-date change callback
+* - `numOfMonths`: number - Number of months to display
+* - `min`: number - Minimum number of days required (for range variants)
+* - `before`: Date - Disable dates before this date
+* - `month`: Date - Current month view
+* - `setMonth`: (month: Date) => void - Month change callback
+* - `time`: string - Selected time string (for time input variants)
+* - `setTime`: (time: string) => void - Time change callback
+* - `selectedTime`: string - Selected appointment time (for booking variants)
+* - `setSelectedTime`: (time: string) => void - Appointment time callback
+* - `locale`: 'en' | 'hi' - Language locale (for localization variants)
+* - `setLocale`: (locale: 'en' | 'hi') => void - Locale change callback
+* - `className`: string - Additional CSS classes
+* 
+* ★ ━━━━━━━━━ State Setup Examples ━━━━━━━━━ ★
+* ```typescript
+* // Single date selection
+* const [singleDate, setSingleDate] = useState<Date | undefined>(new Date(2025, 5, 15));
+* 
+* // Date range selection
+* const [rangeDate, setRangeDate] = useState({
+*   from: new Date(2025, 5, 4),
+*   to: new Date(2025, 5, 17)
+* });
+* 
+* // Multiple date selection
+* const [multiDates, setMultiDates] = useState<Date[]>([
+*   new Date(2025, 5, 12),
+*   new Date(2025, 5, 17),
+*   new Date(2025, 5, 20)
+* ]);
+* 
+* // Time selection
+* const [time, setTime] = useState('12:00:00');
+* 
+* // Locale selection
+* const [locale, setLocale] = useState<'en' | 'hi'>('en');
+* ```
+* 
+* ★ ━━━━━━━━━ Basic Usage ━━━━━━━━━ ★
+* ```javascript
+* import { useState } from "react";
+* import { CalendarX } from "./CalendarX";
+* 
+* function App() {
+*   const [date, setDate] = useState<Date | undefined>(new Date());
+* 
+*   // Default calendar
+*   return <CalendarX date={date} setDate={setDate} />;
+*   
+*   // Specific variant
+*   return <CalendarX calendar="MultiMonth" date={date} setDate={setDate} />;
+* }
+* ```
+* 
+*/
+
+export function CalendarX({ calendar = 'default', children, ...props }: any) {
+  switch (calendar) {
+    case 'MultiMonth': // Multi month calendar
+      return <MultiMonth {...props} />
+    case 'RangeSingleMonth': // Single month calendar with range selection
+      return <RangeSingleMonth {...props} />
+    case 'RangeCalendarMultiMonth':  // Multi month calendar with range selection
+      return <RangeCalendarMultiMonth {...props} />
+    case 'RangeWithMinimumDays':  // Minimum 5 days selection
+      return <RangeWithMinimumDays {...props} />
+    case 'DisableDay':  // Disabled day calendar
+      return <DisableDay {...props} />
+    case 'DisabledWeekends':  // Disabled weekend calendar
+      return <DisabledWeekends {...props} />
+    case 'Localization':  // Localize calendar
+      return <Localization {...props} />
+    case 'WithMonthYearDropdown':  // Month and year dropdown calendar
+      return <WithMonthYearDropdown {...props} />
+    case 'VariableSize':  // Variable size calendar
+      return <VariableSize {...props} />
+    case 'EventList':  // Calendar with event list
+      return <EventList {...props} />
+    case 'MultiSelect':  // Multi day select calendar
+      return <MultiSelect {...props} />
+    case 'CustomSelectDay':  // Custom day select calendar 
+      return <CustomSelectDay {...props} />
+    case 'CustomRangeSelect':  // Custom range selection calendar
+      return <CustomRangeSelect {...props} />
+    case 'RightYearMonth':  // Right side month year navigation calendar
+      return <RightYearMonth {...props} />
+    case 'LeftYearMonth':  // Left side month year navigation calendar
+      return <LeftYearMonth {...props} />
+    case 'WeekNumber':  // Week number calendar
+      return <WeekNumber {...props} />
+    case 'WithTodayMonthButton':  // Calendar with today button
+      return <WithTodayMonthButton {...props} />
+    case 'WithDateInput':  // Calendar with date input
+      return <WithDateInput {...props} />
+    case 'WithTimeInput':  // Calendar with time input
+      return <WithTimeInput {...props} />
+    case 'WithAdvanceSelection':  // Calendar with advance selection
+      return <WithAdvanceSelection {...props} />
+    case 'WithPresets':  // Calendar with presets
+      return <WithPresets {...props} />
+    case 'WithRangePresets':  // Range calendar with presets
+      return <WithRangePresets {...props} />
+    case 'CalendarAppointmentBooking':  // Appointment calendar
+      return <AppointmentBooking {...props} />
+    case 'Pricing':  // Calendar with pricing
+      return <Pricing {...props} />
+    default:
+      <DefaultCalendar {...props} />
+      break;
+  }
+}
+
+function DefaultCalendar({ date = new Date(), setDate, className, variant, size }) {
+  return (
+    <div>
+      <Calendar mode='single' defaultMonth={date} selected={date} onSelect={setDate} className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)} />
+    </div>
+  )
+}
+const MultiMonth = ({ date = new Date(), setDate, numOfMonths = 2, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        defaultMonth={date}
+        numberOfMonths={numOfMonths}
+        selected={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+      />
+    </div>
+  )
+}
+const RangeSingleMonth = ({
+  dateRange = {
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 17)
+  },
+  setDateRange,
+  className, variant, size
+}) => {
+  return (
+    <div>
+      <Calendar
+        mode='range'
+        selected={dateRange}
+        defaultMonth={dateRange?.from}
+        onSelect={setDateRange}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+      />
+      <p className='text-muted-foreground mt-3 text-center text-xs' role='region'>
+
+      </p>
+    </div>
+  )
+}
+const RangeCalendarMultiMonth = ({
+  dateRange = {
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 17)
+  }, setDateRange,
+  numOfMonths = 2, className, variant, size
+}) => {
+  return (
+    <div>
+      <Calendar
+        mode='range'
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={numOfMonths}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+      />
+    </div>
+  )
+}
+const RangeWithMinimumDays = ({
+  dateRange = {
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 17)
+  }, setDateRange,
+  numOfMonths = 2,
+  min = 5,
+  className, variant, size
+}) => {
+
+  return (
+    <div>
+      <Calendar
+        mode='range'
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={numOfMonths}
+        min={min}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+      />
+    </div>
+  )
+}
+const DisableDay = ({ date = new Date(2025, 5, 18), setDate, className, variant, size, before = new Date(2025, 5, 12) }) => {
+
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        disabled={{
+          before: before
+        }}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+      />
+    </div>
+  )
+}
+const DisabledWeekends = ({ dateRange = {
+  from: new Date(2025, 5, 4),
+  to: new Date(2025, 5, 17)
+}, setDateRange,
+  className, variant, size, dayOfWeek = [0, 6] }) => {
+  return (
+    <div>
+      <Calendar
+        mode='range'
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        disabled={{ dayOfWeek: dayOfWeek }}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+        excludeDisabled
+      />
+    </div>
+  )
+}
+const localizedStrings = {
+  en: {
+    title: 'Book an appointment',
+    description: 'Select the dates for your appointment'
+  },
+  hi: {
+    title: 'अपॉइंटमेंट बुक करें',
+    description: 'अपनी अपॉइंटमेंट के लिए तारीखें चुनें'
+  }
+} as const
+function Localization({
+  dateRange = {
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 17)
+  }, setDateRange,
+  className, variant, size,
+  locale = 'en',
+  setLocale
+}) {
+  return (
+    <div>
+      <Card className='w-xxs shadow-none'>
+        <CardHeader className='border border-border-b'>
+          <CardTitle>{localizedStrings[locale].title}</CardTitle>
+          <CardDescription>{localizedStrings[locale].description}</CardDescription>
+          <CardAction>
+            <Select value={locale} onValueChange={value => setLocale(value as keyof typeof localizedStrings)}>
+              <SelectTrigger className='w-[100px]' aria-label='Select language'>
+                <SelectValue placeholder='Language' />
+              </SelectTrigger>
+              <SelectContent align='end'>
+                <SelectItem value='hi'>Hindi</SelectItem>
+                <SelectItem value='en'>English</SelectItem>
+              </SelectContent>
+            </Select>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <Calendar
+            mode='range'
+            selected={dateRange}
+            onSelect={setDateRange}
+            defaultMonth={dateRange?.from}
+            locale={locale === 'hi' ? hi : enUS}
+            numerals={locale === 'hi' ? 'deva' : 'latn'}
+            className={cn(calendarVariants({ variant, size }), 'w-full bg-transparent p-0', className)}
+            buttonVariant='outline'
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+const WithMonthYearDropdown = ({ date = new Date(), setDate, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-md border border-border', className)}
+        captionLayout='dropdown'
+      />
+    </div>
+  )
+}
+const VariableSize = ({ date = new Date(), setDate, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]', className)}
+      />
+      <p className='text-muted-foreground mt-3 text-center text-xs' role='region'>
+
+      </p>
+    </div>
+  )
+}
+const EventList = ({ date = new Date(), setDate, className, variant, size, events = [
+  {
+    title: 'Team Sync Meeting',
+    from: '2025-06-12T09:00:00',
+    to: '2025-06-12T10:00:00'
+  },
+  {
+    title: 'Design Review',
+    from: '2025-06-12T11:30:00',
+    to: '2025-06-12T12:30:00'
+  },
+  {
+    title: 'Client Presentation',
+    from: '2025-06-12T14:00:00',
+    to: '2025-06-12T15:00:00'
+  }
+] }) => {
+  return (
+    <div>
+      <Card className='w-2xs py-4'>
+        <CardContent className='px-4'>
+          <Calendar
+            mode='single'
+            selected={date}
+            onSelect={setDate}
+            className={cn(calendarVariants({ variant, size }), 'w-full bg-transparent p-0', className)}
+            required
+          />
+        </CardContent>
+        <CardFooter className='flex flex-col items-start gap-3 border border-border-t px-4 !pt-4'>
+          <div className='flex w-full items-center justify-between px-1'>
+            <div className='text-sm font-medium'>
+              {date?.toLocaleDateString('en-US', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric'
+              })}
+            </div>
+            <Button variant='ghost' size='icon' className='size-6' title='Add Event'>
+              <PlusIcon />
+              <span className='sr-only'>Add Event</span>
+            </Button>
+          </div>
+          <div className='flex w-full flex-col gap-2'>
+            {events.map(event => (
+              <div
+                key={event.title}
+                className='bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full'
+              >
+                <div className='font-medium'>{event.title}</div>
+                <div className='text-muted-foreground text-xs'>
+                  {formatDateRange(new Date(event.from), new Date(event.to))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardFooter>
+      </Card>
+
+    </div>
+  )
+}
+const MultiSelect = ({ dates = [new Date(2025, 5, 12), new Date(2025, 5, 17)], setDates, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='multiple'
+        required selected={dates}
+        onSelect={setDates} max={5}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+      />
+    </div>
+  )
+}
+const CustomSelectDay = ({ date = new Date(), setDate, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border', className)}
+        classNames={{
+          day_button:
+            'rounded-full! data-[selected-single=true]:bg-sky-600! data-[selected-single=true]:text-white! data-[selected-single=true]:dark:bg-sky-400! data-[selected-single=true]:group-data-[focused=true]/day:ring-sky-600/20 data-[selected-single=true]:dark:group-data-[focused=true]/day:ring-sky-400/40',
+          today: 'rounded-full! bg-accent!'
+        }}
+      />
+    </div>
+  )
+}
+const CustomRangeSelect = ({
+  dateRange = {
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 17)
+  },
+  setDateRange,
+  className, variant, size
+}) => {
+  return (
+    <div>
+      <Calendar
+        mode='range'
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        className={cn(calendarVariants({ variant, size }), 'rounded-md border border-border', className)}
+        classNames={{
+          range_start: 'bg-sky-600/20 dark:bg-sky-400/10 rounded-l-full',
+          range_end: 'bg-sky-600/20 dark:bg-sky-400/10 rounded-r-full',
+          day_button:
+            'data-[range-end=true]:rounded-full! data-[range-start=true]:rounded-full! data-[range-start=true]:bg-sky-600! data-[range-start=true]:text-white! data-[range-start=true]:dark:bg-sky-400! data-[range-start=true]:group-data-[focused=true]/day:ring-sky-600/20 data-[range-start=true]:dark:group-data-[focused=true]/day:ring-sky-400/40 data-[range-end=true]:bg-sky-600! data-[range-end=true]:text-white! data-[range-end=true]:dark:bg-sky-400! data-[range-end=true]:group-data-[focused=true]/day:ring-sky-600/20 data-[range-end=true]:dark:group-data-[focused=true]/day:ring-sky-400/40 data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-sky-600/20 data-[range-middle=true]:dark:bg-sky-400/10 hover:rounded-full',
+          today:
+            'data-[selected=true]:rounded-l-none! rounded-full bg-accent! data-[selected=true]:bg-sky-600/20! dark:data-[selected=true]:bg-sky-400/10! [&_button[data-range-middle=true]]:bg-transparent!'
+        }}
+      />
+    </div>
+  )
+}
+const RightYearMonth = ({ date = new Date(), setDate, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        defaultMonth={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-md border border-border', className)}
+        classNames={{
+          month_caption: 'flex items-center h-8 justify-start',
+          nav: 'flex justify-end absolute w-full items-center'
+        }}
+      />
+    </div>
+  )
+}
+const LeftYearMonth = ({ date = new Date(), setDate, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        defaultMonth={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-md border border-border', className)}
+        classNames={{
+          month_caption: 'flex items-center h-8 justify-end',
+          nav: 'flex justify-start absolute w-full items-center'
+        }}
+      />
+    </div>
+  )
+}
+const WeekNumber = ({ date = new Date(), setDate, className, variant, size }) => {
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border shadow-sm', className)}
+        showWeekNumber
+      />
+    </div>
+  )
+}
+const WithTodayMonthButton = ({
+  date = new Date(),
+  setDate,
+  month = new Date(),
+  setMonth,
+  className,
+  variant,
+  size
+}) => {
+  return (
+    <div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Book the show</CardTitle>
+          <CardDescription>Find a date</CardDescription>
+          <CardAction>
+            <Button
+              size='sm'
+              variant='outline'
+              onClick={() => {
+                setMonth(new Date())
+                setDate(new Date())
+              }}
+            >
+              Today
+            </Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <Calendar
+            mode='single'
+            month={month}
+            onMonthChange={setMonth}
+            selected={date}
+            onSelect={setDate}
+            className=''
+            className={cn(calendarVariants({ variant, size }), 'bg-transparent p-0', className)}
+          />
+        </CardContent>
+      </Card>
+
+    </div>
+  )
+}
+
+const WithDateInput = ({ today = new Date(), className, variant, size }) => {
+  const id = useId()
+  const [month, setMonth] = useState(today)
+  const [date, setDate] = useState<Date | undefined>(today)
+  const [inputValue, setInputValue] = useState('')
+
+  const handleDayPickerSelect = (date: Date | undefined) => {
+    if (!date) {
+      setInputValue('')
+      setDate(undefined)
+    } else {
+      setDate(date)
+      setMonth(date)
+      setInputValue(format(date, 'yyyy-MM-dd'))
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+
+    setInputValue(value)
+
+    if (value) {
+      const parsedDate = new Date(value)
+
+      setDate(parsedDate)
+      setMonth(parsedDate)
+    } else {
+      setDate(undefined)
+    }
+  }
+
+  useEffect(() => {
+    setInputValue(format(today, 'yyyy-MM-dd'))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div>
+      <Card className='gap-5 py-5'>
+        <CardHeader className='flex items-center border border-border-b px-3 !pb-3'>
+          <Label htmlFor={id} className='shrink-0 text-xs'>
+            Enter date
+          </Label>
+          <div className='relative grow'>
+            <Input
+              id={id}
+              type='date'
+              value={inputValue}
+              onChange={handleInputChange}
+              className='peer appearance-none pl-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+              aria-label='Select date'
+            />
+            <div className='text-muted-foreground/80 pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+              <CalendarIcon size={16} aria-hidden='true' />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className='px-5'>
+          <Calendar
+            mode='single'
+            selected={date}
+            onSelect={handleDayPickerSelect}
+            month={month}
+            onMonthChange={setMonth}
+            className={cn(calendarVariants({ variant, size }), 'bg-transparent p-0', className)}
+          />
+        </CardContent>
+      </Card>
+
+    </div>
+  )
+}
+const WithTimeInput = ({ date = new Date(), setDate, time = '12:00:00', setTime, className, variant, size }) => {
+  const id = useId()
+
+  return (
+    <div>
+      <Card className='gap-5 py-5'>
+        <CardHeader className='flex items-center border border-border-b px-3 !pb-3'>
+          <Label htmlFor={id} className='text-xs'>
+            Enter time
+          </Label>
+          <div className='relative grow'>
+            <Input
+              id={id}
+              type='time'
+              step='1'
+              value={time}
+              onChange={setTime}
+              className='peer appearance-none pl-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+            />
+            <div className='text-muted-foreground/80 pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+              <ClockIcon size={16} aria-hidden='true' />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className='px-5'>
+          <Calendar
+            mode='single'
+            selected={date}
+            onSelect={setDate}
+            className={cn(calendarVariants({ variant, size }), 'bg-transparent p-0', className)}
+          />
+        </CardContent>
+      </Card>
+      <p className='text-muted-foreground mt-4 text-center text-xs' role='region'>
+
+      </p>
+    </div>
+  )
+}
+const WithAdvanceSelection = ({ today = new Date(), startDate = new Date(1980, 6), endDate = new Date(2030, 6), className, variant, size }) => {
+  const [month, setMonth] = useState(today)
+  const [date, setDate] = useState<Date | undefined>(today)
+  const [isYearView, setIsYearView] = useState(false)
+
+  const years = eachYearOfInterval({
+    start: startOfYear(startDate),
+    end: endOfYear(endDate)
+  })
+
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        onSelect={setDate}
+        month={month}
+        onMonthChange={setMonth}
+        defaultMonth={new Date()}
+        startMonth={startDate}
+        endMonth={endDate}
+        className={cn(calendarVariants({ variant, size }), 'overflow-hidden rounded-md border border-border p-2', className)}
+        classNames={{
+          month_caption: 'ml-2.5 mr-20 justify-start',
+          nav: 'flex absolute w-fit right-0 items-center'
+        }}
+        components={{
+          CaptionLabel: (props: CaptionLabelProps) => (
+            <CaptionLabel isYearView={isYearView} setIsYearView={setIsYearView} {...props} />
+          ),
+          MonthGrid: (props: MonthGridProps) => {
+            return (
+              <MonthGrid
+                className={props.className}
+                isYearView={isYearView}
+                setIsYearView={setIsYearView}
+                startDate={startDate}
+                endDate={endDate}
+                years={years}
+                currentYear={month.getFullYear()}
+                currentMonth={month.getMonth()}
+                onMonthSelect={(selectedMonth: Date) => {
+                  setMonth(selectedMonth)
+                  setIsYearView(false)
+                }}
+              >
+                {props.children}
+              </MonthGrid>
+            )
+          }
+        }}
+      />
+
+    </div>
+  )
+}
+
+function MonthGrid({
+  className,
+  children,
+  isYearView,
+  startDate,
+  endDate,
+  years,
+  currentYear,
+  currentMonth,
+  onMonthSelect
+}: {
+  className?: string
+  children: React.ReactNode
+  isYearView: boolean
+  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>
+  startDate: Date
+  endDate: Date
+  years: Date[]
+  currentYear: number
+  currentMonth: number
+  onMonthSelect: (date: Date) => void
+}) {
+  const currentYearRef = useRef<HTMLDivElement>(null)
+  const currentMonthButtonRef = useRef<HTMLButtonElement>(null)
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isYearView && currentYearRef.current && scrollAreaRef.current) {
+      const viewport = scrollAreaRef.current.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement
+
+      if (viewport) {
+        const yearTop = currentYearRef.current.offsetTop
+
+        viewport.scrollTop = yearTop
+      }
+
+      setTimeout(() => {
+        currentMonthButtonRef.current?.focus()
+      }, 100)
+    }
+  }, [isYearView])
+
+  return (
+    <div className='relative'>
+      <table className={className}>{children}</table>
+      {isYearView && (
+        <div className='bg-background absolute inset-0 z-20 -mx-2 -mb-2'>
+          <ScrollArea ref={scrollAreaRef} className='h-full'>
+            {years.map(year => {
+              const months = eachMonthOfInterval({
+                start: startOfYear(year),
+                end: endOfYear(year)
+              })
+
+              const isCurrentYear = year.getFullYear() === currentYear
+
+              return (
+                <div key={year.getFullYear()} ref={isCurrentYear ? currentYearRef : undefined}>
+                  <CollapsibleYear title={year.getFullYear().toString()} open={isCurrentYear}>
+                    <div className='grid grid-cols-3 gap-2'>
+                      {months.map(month => {
+                        const isDisabled = isBefore(month, startDate) || isAfter(month, endDate)
+                        const isCurrentMonth = month.getMonth() === currentMonth && year.getFullYear() === currentYear
+
+                        return (
+                          <Button
+                            key={month.getTime()}
+                            ref={isCurrentMonth ? currentMonthButtonRef : undefined}
+                            variant={isCurrentMonth ? 'default' : 'outline'}
+                            size='sm'
+                            className='h-7'
+                            disabled={isDisabled}
+                            onClick={() => onMonthSelect(month)}
+                          >
+                            {format(month, 'MMM')}
+                          </Button>
+                        )
+                      })}
+                    </div>
+                  </CollapsibleYear>
+                </div>
+              )
+            })}
+          </ScrollArea>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CaptionLabel({
+  children,
+  isYearView,
+  setIsYearView
+}: {
+  isYearView: boolean
+  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>
+} & React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <Button
+      className='data-[state=open]:text-muted-foreground/80 -ms-2 flex items-center gap-2 text-sm font-medium hover:bg-transparent [&[data-state=open]>svg]:rotate-180'
+      variant='ghost'
+      size='sm'
+      onClick={() => setIsYearView(prev => !prev)}
+      data-state={isYearView ? 'open' : 'closed'}
+    >
+      {children}
+      <ChevronDownIcon
+        className='text-muted-foreground/80 shrink-0 transition-transform duration-200'
+        aria-hidden='true'
+      />
+    </Button>
+  )
+}
+
+function CollapsibleYear({ title, children, open }: { title: string; children: React.ReactNode; open?: boolean }) {
+  return (
+    <Collapsible className='border border-border-t px-2 py-1.5' defaultOpen={open}>
+      <CollapsibleTrigger asChild>
+        <Button
+          className='flex w-full justify-start gap-2 text-sm font-medium hover:bg-transparent [&[data-state=open]>svg]:rotate-180'
+          variant='ghost'
+          size='sm'
+        >
+          <ChevronDownIcon
+            className='text-muted-foreground/80 shrink-0 transition-transform duration-200'
+            aria-hidden='true'
+          />
+          {title}
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className='data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden px-3 py-1 text-sm transition-all'>
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+const WithPresets = ({
+  date = new Date(),
+  setDate,
+  className,
+  variant,
+  size,
+  presets = [
+    { label: 'Today', value: 0 },
+    { label: 'Yesterday', value: -1 },
+    { label: 'Tomorrow', value: 1 },
+    { label: 'In 3 days', value: 3 },
+    { label: 'In a week', value: 7 },
+    { label: 'In 2 weeks', value: 14 }
+  ] }) => {
+  return (
+    <div>
+      <Card className='max-w-xs py-4'>
+        <CardContent className='px-4'>
+          <Calendar
+            mode='single'
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            className={cn(calendarVariants({ variant, size }), 'w-full bg-transparent p-0', className)}
+          />
+        </CardContent>
+        <CardFooter className='flex flex-wrap gap-2 border border-border-t px-4 !pt-4'>
+          {presets.map(preset => (
+            <Button
+              key={preset.value}
+              variant='outline'
+              size='sm'
+              className='flex-1'
+              onClick={() => {
+                const newDate = addDays(new Date(), preset.value)
+
+                setDate(newDate)
+              }}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </CardFooter>
+      </Card>
+
+    </div>
+  )
+}
+const WithRangePresets = ({ today = new Date(), className, variant, size }) => {
+
+  const yesterday = {
+    from: subDays(today, 1),
+    to: subDays(today, 1)
+  }
+
+  const tomorrow = {
+    from: today,
+    to: addDays(today, 1)
+  }
+
+  const last7Days = {
+    from: subDays(today, 6),
+    to: today
+  }
+
+  const next7Days = {
+    from: addDays(today, 1),
+    to: addDays(today, 7)
+  }
+
+  const last30Days = {
+    from: subDays(today, 29),
+    to: today
+  }
+
+  const monthToDate = {
+    from: startOfMonth(today),
+    to: today
+  }
+
+  const lastMonth = {
+    from: startOfMonth(subMonths(today, 1)),
+    to: endOfMonth(subMonths(today, 1))
+  }
+
+  const nextMonth = {
+    from: startOfMonth(addMonths(today, 1)),
+    to: endOfMonth(addMonths(today, 1))
+  }
+
+  const yearToDate = {
+    from: startOfYear(today),
+    to: today
+  }
+
+  const lastYear = {
+    from: startOfYear(subYears(today, 1)),
+    to: endOfYear(subYears(today, 1))
+  }
+
+  const [month, setMonth] = useState(today)
+  const [date, setDate] = useState<DateRange | undefined>(last7Days)
+
+  return (
+    <div>
+      <Card className='max-w-xs py-4'>
+        <CardContent className='px-4'>
+          <Calendar
+            mode='range'
+            selected={date}
+            onSelect={newDate => {
+              if (newDate) {
+                setDate(newDate)
+              }
+            }}
+            month={month}
+            onMonthChange={setMonth}
+            className={cn(calendarVariants({ variant, size }), 'w-full bg-transparent p-0', className)}
+          />
+        </CardContent>
+        <CardFooter className='flex flex-wrap gap-2 border border-border-t px-4 !pt-4'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate({
+                from: today,
+                to: today
+              })
+              setMonth(today)
+            }}
+          >
+            Today
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(yesterday)
+              setMonth(yesterday.to)
+            }}
+          >
+            Yesterday
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(tomorrow)
+              setMonth(tomorrow.to)
+            }}
+          >
+            Tomorrow
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(last7Days)
+              setMonth(last7Days.to)
+            }}
+          >
+            Last 7 days
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(next7Days)
+              setMonth(next7Days.to)
+            }}
+          >
+            Next 7 days
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(last30Days)
+              setMonth(last30Days.to)
+            }}
+          >
+            Last 30 days
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(monthToDate)
+              setMonth(monthToDate.to)
+            }}
+          >
+            Month to date
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(lastMonth)
+              setMonth(lastMonth.to)
+            }}
+          >
+            Last month
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(nextMonth)
+              setMonth(nextMonth.to)
+            }}
+          >
+            Next month
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(yearToDate)
+              setMonth(yearToDate.to)
+            }}
+          >
+            Year to date
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setDate(lastYear)
+              setMonth(lastYear.to)
+            }}
+          >
+            Last year
+          </Button>
+        </CardFooter>
+      </Card>
+
+    </div>
+  )
+}
+const AppointmentBooking = ({
+  date = new Date(),
+  setDate,
+  selectedTime = '10:00',
+  setSelectedTime,
+  className,
+  variant,
+  size,
+  timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+  }),
+  bookedDates = Array.from({ length: 3 }, (_, i) => new Date(2025, 5, 17 + i)),
+
+}) => {
+
+  return (
+    <div>
+      <Card className='gap-0 p-0'>
+        <CardHeader className='flex h-max justify-center border border-border-b !p-4'>
+          <CardTitle>Book your appointment</CardTitle>
+        </CardHeader>
+        <CardContent className='relative p-0 md:pr-48'>
+          <div className='p-6'>
+            <Calendar
+              mode='single'
+              selected={date}
+              onSelect={setDate}
+              defaultMonth={date}
+              disabled={bookedDates}
+              showOutsideDays={false}
+              modifiers={{
+                booked: bookedDates
+              }}
+              modifiersClassNames={{
+                booked: '[&>button]:line-through opacity-100'
+              }}
+              className={cn(calendarVariants({ variant, size }), 'bg-transparent p-0 [--cell-size:--spacing(10)]', className)}
+              formatters={{
+                formatWeekdayName: date => {
+                  return date.toLocaleString('en-US', { weekday: 'short' })
+                }
+              }}
+            />
+          </div>
+          <div className='inset-y-0 right-0 flex w-full flex-col gap-4 border border-border-t max-md:h-60 md:absolute md:w-48 md:border border-border-t-0 md:border border-border-l'>
+            <ScrollArea className='h-full'>
+              <div className='flex flex-col gap-2 p-6'>
+                {timeSlots.map(time => (
+                  <Button
+                    key={time}
+                    variant={selectedTime === time ? 'default' : 'outline'}
+                    onClick={() => setSelectedTime(time)}
+                    className='w-full shadow-none'
+                  >
+                    {time}
+                  </Button>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        </CardContent>
+        <CardFooter className='flex flex-col gap-4 border border-border-t px-6 !py-5 md:flex-row'>
+          <div className='flex items-center gap-2 text-sm'>
+            {date && selectedTime ? (
+              <>
+                <CircleCheckIcon className='size-5 stroke-green-600 dark:stroke-green-400' />
+                <span>
+                  Your meeting is booked for{' '}
+                  <span className='font-medium'>
+                    {' '}
+                    {date?.toLocaleDateString('en-US', {
+                      weekday: 'long',
+                      day: 'numeric',
+                      month: 'long'
+                    })}{' '}
+                  </span>
+                  at <span className='font-medium'>{selectedTime}</span>.
+                </span>
+              </>
+            ) : (
+              <>Select a date and time for your meeting.</>
+            )}
+          </div>
+          <Button disabled={!date || !selectedTime} className='w-full md:ml-auto md:w-auto' variant='outline'>
+            Continue
+          </Button>
+        </CardFooter>
+      </Card>
+
+    </div>
+  )
+}
+
+
+const Pricing = ({ date = new Date(), setDate, className, variant, size, getPrice = null }) => {
+
+  function getPriceForDate(date: Date) {
+    const seed = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate()
+
+    const val = (seed * 9301 + 49297) % 233280
+
+    return Math.floor(50 + (val / 233280) * 200)
+  }
+
+  return (
+    <div>
+      <Calendar
+        mode='single'
+        selected={date}
+        onSelect={setDate}
+        showOutsideDays={false}
+        className={cn(calendarVariants({ variant, size }), 'rounded-lg border border-border [--cell-size:--spacing(12)]', className)}
+        components={{
+          DayButton: ({ children, modifiers, day, ...props }) => {
+            const price = getPrice ? getPrice() : getPriceForDate(day.date)
+            const isGreen = price < 100
+
+            return (
+              <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+                {children}
+                {!modifiers.outside && (
+                  <span className={isGreen ? 'text-green-600 dark:text-green-400' : ''}>${price}</span>
+                )}
+              </CalendarDayButton>
+            )
+          }
+        }}
+        disabled={{ before: new Date() }}
+      />
+
+    </div>
+  )
+}
+
+
+
+export  function CalendarXDemo() {
+  const [singleDate, setSingleDate] = useState<Date | undefined>(new Date(2025, 5, 15));
+  const [rangeDate, setRangeDate] = useState({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 17)
+  });
+  const [multiDates, setMultiDates] = useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 5, 17),
+    new Date(2025, 5, 20)
+  ]);
+  const [locale, setLocale] = useState<'en' | 'hi'>('en');
+  const [time, setTime] = useState('12:00:00');
+  const [selectedTime, setSelectedTime] = useState('10:00');
+  const [month, setMonth] = useState(new Date(2025, 5));
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto bg-background">
+      <header className="mb-12">
+        <h1 className="text-4xl font-bold mb-2">CalendarX Demo</h1>
+        <p className="text-muted-foreground">
+          A comprehensive collection of calendar variants built with Catalyst UI and React Day Picker
+        </p>
+      </header>
+
+      <div className="space-y-12">
+        {/* Section 1: Basic Calendar Variants */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Basic Calendar Variants</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Default Calendar</h3>
+              <p className="text-sm text-muted-foreground mb-2">Single date selection</p>
+              <CalendarX 
+                calendar="default"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Multi Month</h3>
+              <p className="text-sm text-muted-foreground mb-2">Display multiple months</p>
+              <CalendarX 
+                calendar="MultiMonth"
+                date={singleDate}
+                setDate={setSingleDate}
+                numOfMonths={2}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">With Week Numbers</h3>
+              <p className="text-sm text-muted-foreground mb-2">Show week numbers</p>
+              <CalendarX 
+                calendar="WeekNumber"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 2: Range Selection */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Range Selection</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Single Month Range</h3>
+              <p className="text-sm text-muted-foreground mb-2">Select a date range</p>
+              <CalendarX 
+                calendar="RangeSingleMonth"
+                dateRange={rangeDate}
+                setDateRange={setRangeDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Multi Month Range</h3>
+              <p className="text-sm text-muted-foreground mb-2">Range across months</p>
+              <CalendarX 
+                calendar="RangeCalendarMultiMonth"
+                dateRange={rangeDate}
+                setDateRange={setRangeDate}
+                numOfMonths={2}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Minimum Days Range</h3>
+              <p className="text-sm text-muted-foreground mb-2">Minimum 5 days selection</p>
+              <CalendarX 
+                calendar="RangeWithMinimumDays"
+                dateRange={rangeDate}
+                setDateRange={setRangeDate}
+                min={5}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 3: Selection Types */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Selection Types</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Multiple Selection</h3>
+              <p className="text-sm text-muted-foreground mb-2">Select up to 5 dates</p>
+              <CalendarX 
+                calendar="MultiSelect"
+                dates={multiDates}
+                setDates={setMultiDates}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Custom Day Selection</h3>
+              <p className="text-sm text-muted-foreground mb-2">Custom styling for selected days</p>
+              <CalendarX 
+                calendar="CustomSelectDay"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Custom Range Selection</h3>
+              <p className="text-sm text-muted-foreground mb-2">Styled range with start/end markers</p>
+              <CalendarX 
+                calendar="CustomRangeSelect"
+                dateRange={rangeDate}
+                setDateRange={setRangeDate}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 4: Disabled Dates */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Disabled Dates</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Disable Past Dates</h3>
+              <p className="text-sm text-muted-foreground mb-2">Dates before June 12, 2025 are disabled</p>
+              <CalendarX 
+                calendar="DisableDay"
+                date={singleDate}
+                setDate={setSingleDate}
+                before={new Date(2025, 5, 12)}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Disable Weekends</h3>
+              <p className="text-sm text-muted-foreground mb-2">Saturdays and Sundays disabled</p>
+              <CalendarX 
+                calendar="DisabledWeekends"
+                dateRange={rangeDate}
+                setDateRange={setRangeDate}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 5: Navigation & Layout */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Navigation & Layout</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">With Dropdowns</h3>
+              <p className="text-sm text-muted-foreground mb-2">Month/Year dropdown selection</p>
+              <CalendarX 
+                calendar="WithMonthYearDropdown"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Right Navigation</h3>
+              <p className="text-sm text-muted-foreground mb-2">Navigation on the right side</p>
+              <CalendarX 
+                calendar="RightYearMonth"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Left Navigation</h3>
+              <p className="text-sm text-muted-foreground mb-2">Navigation on the left side</p>
+              <CalendarX 
+                calendar="LeftYearMonth"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">With Today Button</h3>
+              <p className="text-sm text-muted-foreground mb-2">Quick navigation to today</p>
+              <CalendarX 
+                calendar="WithTodayMonthButton"
+                date={singleDate}
+                setDate={setSingleDate}
+                month={month}
+                setMonth={setMonth}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Variable Size</h3>
+              <p className="text-sm text-muted-foreground mb-2">Custom cell sizes</p>
+              <CalendarX 
+                calendar="VariableSize"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Advanced Selection</h3>
+              <p className="text-sm text-muted-foreground mb-2">Year/month grid view</p>
+              <CalendarX 
+                calendar="WithAdvanceSelection"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 6: Input Integration */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Input Integration</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">With Date Input</h3>
+              <p className="text-sm text-muted-foreground mb-2">Type or pick a date</p>
+              <CalendarX 
+                calendar="WithDateInput"
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">With Time Input</h3>
+              <p className="text-sm text-muted-foreground mb-2">Select date and time</p>
+              <CalendarX 
+                calendar="WithTimeInput"
+                date={singleDate}
+                setDate={setSingleDate}
+                time={time}
+                setTime={setTime}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 7: Presets */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Quick Presets</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Date Presets</h3>
+              <p className="text-sm text-muted-foreground mb-2">Quick date selections</p>
+              <CalendarX 
+                calendar="WithPresets"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Range Presets</h3>
+              <p className="text-sm text-muted-foreground mb-2">Common range selections</p>
+              <CalendarX 
+                calendar="WithRangePresets"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 8: Specialized Calendars */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Specialized Calendars</h2>
+          <div className="grid grid-cols-1 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Appointment Booking</h3>
+              <p className="text-sm text-muted-foreground mb-2">Book appointments with time slots</p>
+              <CalendarX 
+                calendar="CalendarAppointmentBooking"
+                date={singleDate}
+                setDate={setSingleDate}
+                selectedTime={selectedTime}
+                setSelectedTime={setSelectedTime}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Event List Calendar</h3>
+              <p className="text-sm text-muted-foreground mb-2">View events for selected date</p>
+              <CalendarX 
+                calendar="EventList"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Pricing Calendar</h3>
+              <p className="text-sm text-muted-foreground mb-2">Dynamic pricing per date</p>
+              <CalendarX 
+                calendar="Pricing"
+                date={singleDate}
+                setDate={setSingleDate}
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Localization</h3>
+              <p className="text-sm text-muted-foreground mb-2">Hindi and English support</p>
+              <CalendarX 
+                calendar="Localization"
+                dateRange={rangeDate}
+                setDateRange={setRangeDate}
+                locale={locale}
+                setLocale={setLocale}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 9: Usage Examples */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Usage Examples</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="p-6 border rounded-lg bg-card">
+              <h3 className="font-medium mb-4">Booking System Example</h3>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h4 className="font-medium">Select Check-in Date</h4>
+                    <p className="text-sm text-muted-foreground">Choose your arrival date</p>
+                  </div>
+                  <CalendarX 
+                    calendar="DisableDay"
+                    date={singleDate}
+                    setDate={setSingleDate}
+                    before={new Date()}
+                    className="w-[280px]"
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h4 className="font-medium">Select Check-out Date</h4>
+                    <p className="text-sm text-muted-foreground">Choose your departure date</p>
+                  </div>
+                  <CalendarX 
+                    calendar="RangeSingleMonth"
+                    dateRange={rangeDate}
+                    setDateRange={setRangeDate}
+                    className="w-[280px]"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 border rounded-lg bg-card">
+              <h3 className="font-medium mb-4">Team Planning Example</h3>
+              <div className="space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="flex-1">
+                    <h4 className="font-medium">Available Dates</h4>
+                    <p className="text-sm text-muted-foreground">Select available dates for team meetings</p>
+                    <CalendarX 
+                      calendar="MultiSelect"
+                      dates={multiDates}
+                      setDates={setMultiDates}
+                      className="mt-2"
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-medium">Meeting Duration</h4>
+                    <CalendarX 
+                      calendar="WithTimeInput"
+                      date={singleDate}
+                      setDate={setSingleDate}
+                      time={time}
+                      setTime={setTime}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 10: Usage Instructions */}
+        <section className="mt-12 p-6 border rounded-lg bg-muted/30">
+          <h2 className="text-2xl font-semibold mb-4">Usage</h2>
+          <div className="space-y-4">
+            <div>
+              <h3 className="font-medium mb-2">Basic Usage</h3>
+              <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+{`import { useState } from "react";
+import { CalendarX } from "./CalendarX";
+
+function App() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  // Default calendar
+  return <CalendarX date={date} setDate={setDate} />;
+  
+  // Specific variant
+  return <CalendarX calendar="MultiMonth" date={date} setDate={setDate} />;
+}`}
+              </pre>
+            </div>
+            
+            <div>
+              <h3 className="font-medium mb-2">Common Props</h3>
+              <ul className="list-disc pl-5 space-y-1 text-sm">
+                <li><code>calendar</code>: Specifies which variant to use</li>
+                <li><code>date</code>/<code>setDate</code>: For single date selection</li>
+                <li><code>dateRange</code>/<code>setDateRange</code>: For range selection</li>
+                <li><code>dates</code>/<code>setDates</code>: For multiple date selection</li>
+                <li><code>numOfMonths</code>: Number of months to display</li>
+                <li><code>className</code>: Additional CSS classes</li>
+                <li><code>variant</code>/<code>size</code>: Catalyst UI variant/size props</li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="font-medium mb-2">Range Selection Example</h3>
+              <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+{`const [rangeDate, setRangeDate] = useState({
+  from: new Date(2025, 5, 4),
+  to: new Date(2025, 5, 17)
+});
+
+return (
+  <CalendarX 
+    calendar="RangeSingleMonth"
+    dateRange={rangeDate}
+    setDateRange={setRangeDate}
+  />
+);`}
+              </pre>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+