@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/calendar.d.ts

@@ -1,326 +1,20 @@
+import { DayPicker, DayButton } from 'react-day-picker';
+import { Button } from './button';
 import * as React from "react";
-import { DayButton, DayPicker } from "react-day-picker";
-/**
- * Actual props type used by the Calendar component implementation
- * Uses react-day-picker's inferred types for perfect compatibility
- */
 type CalendarProps = React.ComponentProps<typeof DayPicker> & {
-    /**
-     * Button variant for navigation arrows and interactive elements
-     * @default "ghost"
-     */
-    buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    /** Visual style variant for navigation buttons. @default "ghost" */
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 };
 /**
- * Calendar - A comprehensive date selection calendar component
- *
- * A fully-featured calendar component built on react-day-picker that provides intuitive
- * date selection with extensive customization options. Supports single dates, date ranges,
- * multiple dates, and custom validation rules with built-in accessibility features.
- *
- * Built on the powerful react-day-picker library, this component provides a complete
- * calendar interface with advanced features like custom formatters, modifiers, disabled
- * dates, localization, and extensive styling options.
- *
- * @component
- *
- * @example Basic single date selection
- * ```tsx
- * const [date, setDate] = useState<Date | undefined>()
- *
- * <Calendar
- *   mode="single"
- *   selected={date}
- *   onSelect={setDate}
- *   className="rounded-md border"
- * />
- * ```
- *
- * @example Date range selection with two months
- * ```tsx
- * const [dateRange, setDateRange] = useState<DateRange | undefined>()
- *
- * <Calendar
- *   mode="range"
- *   selected={dateRange}
- *   onSelect={setDateRange}
- *   numberOfMonths={2}
- *   className="rounded-md border"
- * />
- * ```
- *
- * @example Multiple date selection with limits
- * ```tsx
- * const [dates, setDates] = useState<Date[] | undefined>()
- *
- * <Calendar
- *   mode="multiple"
- *   selected={dates}
- *   onSelect={setDates}
- *   min={2} // Minimum 2 dates required
- *   max={5} // Maximum 5 dates allowed
- *   className="rounded-md border"
- * />
- * ```
- *
- * @example Calendar with disabled dates and custom validation
- * ```tsx
- * <Calendar
- *   mode="single"
- *   selected={date}
- *   onSelect={setDate}
- *   disabled={[
- *     { before: new Date() }, // Disable past dates
- *     { dayOfWeek: [0, 6] }, // Disable weekends
- *     { from: new Date(2024, 0, 15), to: new Date(2024, 0, 20) } // Disable range
- *   ]}
- *   className="rounded-md border"
- * />
- * ```
- *
- * @example Calendar with month/year dropdowns and navigation limits
- * ```tsx
- * <Calendar
- *   mode="single"
- *   captionLayout="dropdown"
- *   selected={date}
- *   onSelect={setDate}
- *   fromYear={2020}
- *   toYear={2030}
- *   startMonth={new Date(2023, 0)} // Don't go before Jan 2023
- *   endMonth={new Date(2025, 11)} // Don't go past Dec 2025
- *   className="rounded-md border"
- * />
- * ```
- *
- * @example International calendar with custom locale
- * ```tsx
- * import { es } from 'date-fns/locale'
- *
- * <Calendar
- *   mode="single"
- *   selected={date}
- *   onSelect={setDate}
- *   locale={es} // Spanish locale
- *   weekStartsOn={1} // Start weeks on Monday
- *   dir="ltr"
- *   className="rounded-md border"
- * />
- * ```
- *
- * @example Calendar with custom formatters and styling
- * ```tsx
- * <Calendar
- *   mode="single"
- *   showWeekNumber
- *   formatters={{
- *     formatDay: (date) => date.getDate().toString(),
- *     formatWeekNumber: (weekNumber) => `W${weekNumber}`,
- *     formatMonthCaption: (date) =>
- *       date.toLocaleDateString('en', { month: 'long', year: 'numeric' })
- *   }}
- *   classNames={{
- *     day: "hover:bg-blue-100 transition-colors",
- *     selected: "bg-blue-500 text-white font-semibold",
- *     today: "bg-blue-100 font-bold"
- *   }}
- *   className="rounded-lg border-2 shadow-lg"
- * />
- * ```
- *
- * @example Calendar with custom modifiers and event handling
- * ```tsx
- * const holidays = [new Date(2024, 11, 25), new Date(2024, 0, 1)]
- * const weekends = { dayOfWeek: [0, 6] }
- *
- * <Calendar
- *   mode="single"
- *   modifiers={{
- *     holiday: holidays,
- *     weekend: weekends,
- *     available: (date) => availableDates.includes(date.toDateString())
- *   }}
- *   onDayClick={(day, modifiers) => {
- *     if (modifiers.holiday) {
- *       alert('Holiday selected!')
- *     }
- *   }}
- *   onWeekNumberClick={(weekNumber, dates) => {
- *     console.log(`Week ${weekNumber} contains:`, dates)
- *   }}
- *   classNames={{
- *     holiday: "bg-red-100 text-red-800",
- *     weekend: "bg-gray-100 text-gray-600",
- *     available: "bg-green-100 text-green-800"
- *   }}
- * />
- * ```
- *
- * @example Calendar with custom components
- * ```tsx
- * <Calendar
- *   mode="single"
- *   components={{
- *     DayContent: ({ date }) => (
- *       <div className="relative">
- *         {date.getDate()}
- *         {date.getDate() === 1 && (
- *           <span className="absolute -top-1 -right-1 text-xs">🎉</span>
- *         )}
- *       </div>
- *     ),
- *     MonthCaption: ({ displayMonth }) => (
- *       <div className="flex items-center justify-center py-2">
- *         <h2 className="text-lg font-bold text-blue-600">
- *           {displayMonth.toLocaleDateString('en', {
- *             month: 'long',
- *             year: 'numeric'
- *           })}
- *         </h2>
- *       </div>
- *     )
- *   }}
- * />
- * ```
- *
- * @example Advanced range selection with custom styling
- * ```tsx
- * const [dateRange, setDateRange] = useState<DateRange>()
- *
- * <Calendar
- *   mode="range"
- *   selected={dateRange}
- *   onSelect={setDateRange}
- *   numberOfMonths={2}
- *   showOutsideDays={false}
- *   fixedWeeks
- *   classNames={{
- *     range_start: "bg-blue-500 text-white rounded-l-md",
- *     range_end: "bg-blue-500 text-white rounded-r-md",
- *     range_middle: "bg-blue-100 text-blue-900",
- *     selected: "bg-blue-500 text-white"
- *   }}
- *   footer={dateRange && (
- *     <div className="p-3 border-t">
- *       <p className="text-sm text-gray-600">
- *         {dateRange.from && `From: ${dateRange.from.toLocaleDateString()}`}
- *         {dateRange.to && ` • To: ${dateRange.to.toLocaleDateString()}`}
- *         {dateRange.from && dateRange.to && (
- *           ` • ${Math.ceil((dateRange.to.getTime() - dateRange.from.getTime()) / (1000 * 60 * 60 * 24) + 1)} days`
- *         )}
- *       </p>
- *     </div>
- *   )}
- * />
- * ```
- *
- * @features
- * - **Selection Modes**: Single date, date ranges, multiple dates, or no selection
- * - **Navigation**: Month/year navigation with buttons or dropdowns, keyboard support
- * - **Validation**: Flexible date disabling, custom matchers, min/max constraints
- * - **Customization**: Custom formatters, modifiers, components, styling
- * - **Internationalization**: Full locale support, RTL languages, custom week start
- * - **Accessibility**: WCAG 2.1 AA compliant, screen reader support, keyboard navigation
- * - **Performance**: Optimized rendering, minimal re-renders, efficient DOM updates
- *
- * @accessibility
- * - **Keyboard Navigation**:
- *   - Arrow keys navigate between dates
- *   - Page Up/Down navigate months
- *   - Home/End navigate to start/end of week
- *   - Ctrl+Page Up/Down navigate years
- *   - Enter/Space select dates
- *   - Escape closes popover/dropdown states
- * - **Screen Reader Support**:
- *   - Comprehensive ARIA labels and descriptions
- *   - Live region announcements for month changes
- *   - Proper role and state management
- *   - Selected dates and ranges announced clearly
- * - **Focus Management**:
- *   - Visible focus indicators with 3px ring
- *   - Focus restoration after month navigation
- *   - Logical tab order through interactive elements
- *   - Trapped focus in dropdown modes
- * - **Standards Compliance**:
- *   - WCAG 2.1 AA color contrast requirements
- *   - Proper heading structure and landmarks
- *   - Compatible with screen readers and assistive technology
- * - **RTL Support**:
- *   - Right-to-left text direction support
- *   - Mirrored navigation button orientation
- *   - Locale-aware date formatting
- *
- * @performance
- * - **Optimized Rendering**: Minimal re-renders through memoization and efficient state management
- * - **Large Date Ranges**: Efficiently handles calendars spanning multiple months and years
- * - **Event Handling**: Debounced and optimized event handlers for smooth interactions
- * - **Memory Management**: Proper cleanup and garbage collection for long-running applications
- * - **Bundle Size**: Tree-shakeable with minimal runtime overhead
- *
- * @styling
- * - **Design System Integration**: Built with shadcn/ui design tokens and Tailwind CSS
- * - **CSS Custom Properties**: Supports `--cell-size` and other CSS variables for sizing
- * - **Theming**: Dark mode support and custom theme integration
- * - **Responsive**: Mobile-friendly with touch interactions and responsive layouts
- * - **Customizable**: Override any visual aspect through classNames, components, or CSS
- *
- * @browser-support
- * - **Modern Browsers**: Chrome 91+, Firefox 90+, Safari 15+, Edge 91+
- * - **Mobile**: iOS Safari 15+, Android Chrome 91+
- * - **Accessibility**: Compatible with NVDA, JAWS, VoiceOver screen readers
- *
- * @see {@link CalendarDayButton} Individual day button component with custom styling
- * @see {@link CalendarProps} Complete props interface with TypeScript definitions
- * @see {@link https://react-day-picker.js.org/} react-day-picker documentation for advanced configuration
- * @see {@link https://ui.shadcn.com/docs/components/calendar} shadcn/ui Calendar documentation
- * @see {@link https://date-fns.org/docs/I18n} date-fns internationalization guide
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/} WAI-ARIA Authoring Practices Guide
- * @since 1.0.0
+ * Calendar component for date selection with single, range, or multiple modes.
+ * Built on react-day-picker with customizable appearance and navigation.
  */
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>;
 /**
- * CalendarDayButton - Individual day button component for calendar dates
- *
- * Renders a single interactive day button with appropriate styling for different states
- * including selected, today, disabled, and range selection indicators. This component
- * is used internally by the Calendar component but can be customized if needed.
- *
- * @component
- * @example
- * ```tsx
- * // Used internally by Calendar component
- * <CalendarDayButton
- *   day={dayObject}
- *   modifiers={{
- *     selected: true,
- *     today: false,
- *     disabled: false,
- *     range_start: false,
- *     range_end: false,
- *     range_middle: false
- *   }}
- * />
- * ```
- *
- * @param day - The day object containing date information from react-day-picker
- * @param modifiers - State modifiers object controlling appearance and behavior
- * @param modifiers.selected - Whether this day is currently selected
- * @param modifiers.today - Whether this day represents today's date
- * @param modifiers.disabled - Whether this day is disabled for selection
- * @param modifiers.range_start - Whether this day is the start of a date range
- * @param modifiers.range_end - Whether this day is the end of a date range
- * @param modifiers.range_middle - Whether this day is in the middle of a date range
- * @param modifiers.focused - Whether this day currently has keyboard focus
- *
- * @accessibility
- * - **Keyboard Navigation**: Fully keyboard accessible with arrow key support
- * - **Screen Reader Support**: Announces date and selection state to assistive technology
- * - **Focus Management**: Proper focus indicators and focus restoration
- * - **State Announcement**: Clear visual and auditory feedback for selection states
- *
- * @since 1.0.0
+ * Internal day button component with range and selection state styling.
+ * Handles focus management and applies appropriate styles for single, range, and multiple selection modes.
  */
-declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
-export { Calendar, CalendarDayButton };
-export type { CalendarProps };
+declare function CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton, type CalendarProps, type CalendarDayButtonProps, };
 //# sourceMappingURL=calendar.d.ts.map

package/dist/components/ui/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,SAAS,EACT,SAAS,EAIV,MAAM,kBAAkB,CAAC;AAioB1B;;;GAGG;AACH,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC5D;;;OAGG;IACH,aAAa,CAAC,EACV,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyQG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,aAAa,2CAqKf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CA+BxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAC;AAOhE,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC5D,oEAAoE;IACpE,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,aAAa,2CA0Jf;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAErE;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CA8BxB;AAED,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,KAAK,aAAa,EAClB,KAAK,sBAAsB,GAC5B,CAAC"}

package/dist/components/ui/calendar.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { getDefaultClassNames, DayPicker } from "react-day-picker";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants, Button } from "./button.js";
+import ChevronLeft from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import ChevronRight from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import ChevronDown from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label" ? "text-sm" : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeft, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Calendar,
+  CalendarDayButton
+};
+//# sourceMappingURL=calendar.js.map

package/dist/components/ui/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sources":["../../../src/components/ui/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronDownIcon,\n} from \"lucide-react\";\n\ntype CalendarProps = React.ComponentProps<typeof DayPicker> & {\n  /** Visual style variant for navigation buttons. @default \"ghost\" */\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n};\n\n/**\n * Calendar component for date selection with single, range, or multiple modes.\n * Built on react-day-picker with customizable appearance and navigation.\n */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: CalendarProps) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months,\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown,\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label,\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header,\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end,\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled,\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          );\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            );\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            );\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          );\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\ntype CalendarDayButtonProps = React.ComponentProps<typeof DayButton>;\n\n/**\n * Internal day button component with range and selection state styling.\n * Handles focus management and applies appropriate styles for single, range, and multiple selection modes.\n */\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: CalendarDayButtonProps) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Calendar,\n  CalendarDayButton,\n  type CalendarProps,\n  type CalendarDayButtonProps,\n};\n"],"names":["props","ChevronRightIcon"],"mappings":";;;;;;;;;AA0BA;AAAkB;AAChB;AACA;AACkB;AACF;AACA;AAChB;AACA;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACC;AACW;AACT;AACO;AACA;AACP;AAAA;AAEF;AACY;AAEyC;AAChD;AAAA;AAEO;AAC8B;AAChC;AACN;AACkB;AAAA;AAE2C;AAC1D;AACH;AACkB;AAAA;AAEH;AAC0B;AACzC;AACkB;AAAA;AAEP;AAC8B;AACzC;AACkB;AAAA;AAEL;AACb;AACkB;AAAA;AAET;AACT;AACkB;AAAA;AAEL;AACb;AACkB;AAAA;AAEV;AACR;AACkB;AAAA;AAEL;AACb;AAGI;AACc;AAAA;AAEb;AACwC;AACtC;AACP;AACkB;AAAA;AAE+B;AAC/B;AAClB;AACkB;AAAA;AAEP;AACX;AACkB;AAAA;AAEf;AACH;AAGI;AACc;AAAA;AAEP;AACX;AACkB;AAAA;AAE2C;AACpD;AACT;AACkB;AAAA;AAEb;AACL;AACkB;AAAA;AAEX;AACP;AACkB;AAAA;AAEV;AACR;AACkB;AAAA;AAE4B;AAC7C;AAAA;AAEO;AAER;AACE;AAAC;AAAA;AACW;AACL;AACkB;AACnBA;AAAA;AAAA;AAGV;AAEE;AACE;AACkE;AAIpE;AACE;AACE;AAACC;AAAA;AACkC;AAC7BD;AAAA;AAAA;AAKV;AACkE;AAEpE;AACW;AAET;AAKE;AAEJ;AACG;AAAA;AAED;AAAA;AAGV;AAQA;AAA2B;AACzB;AACA;AACA;AAEF;AACE;AAEA;AACA;AACE;AAAoC;AAGtC;AACE;AAAC;AAAA;AACS;AACH;AACc;AAKN;AAEe;AACF;AACG;AAClB;AACT;AACkB;AAClB;AAAA;AAEE;AAAA;AAGV;;;;;"}