@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/DateRangePicker/DateRangePicker.types.d.ts

@@ -0,0 +1,127 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { CalendarPanelClassNames, DayPickerClassNames } from './components/CalendarPanel/CalendarPanel.types';
+import { DateTimeInputsClassNames } from './components/DateTimeInputs/DateTimeInputs.types';
+import { PresetLabels, PresetPanelClassNames } from './components/PresetPanel/PresetPanel.types';
+import { dateRangePickerVariants } from './DateRangePicker.variants';
+import { DateRange, DateRangePreset, DateRangeWithTime, TimeRange } from './contexts';
+export type { DateRange, DateRangePreset, DateRangeWithTime, TimeRange };
+export type { CalendarPanelClassNames, DateTimeInputsClassNames, DayPickerClassNames, PresetLabels, PresetPanelClassNames, };
+/**
+ * Props for the DateRangePicker component.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   defaultRange={{ from: new Date(), to: new Date() }}
+ *   onRangeChange={(range) => console.log(range)}
+ * />
+ * ```
+ */
+export type Props = VariantProps<typeof dateRangePickerVariants> & {
+    /** Initial date range */
+    defaultRange?: DateRange;
+    /** Initial time range */
+    defaultTime?: TimeRange;
+    /** Initially selected preset (default: 'custom') */
+    defaultPreset?: DateRangePreset;
+    /** Callback when the range changes (includes time) */
+    onRangeChange?: (range: DateRangeWithTime) => void;
+    /** Callback when the date changes (start or end date, without time) */
+    onDateChange?: (range: DateRange) => void;
+    /** Time format: '12' for 12-hour or '24' for 24-hour */
+    timeFormat?: '12' | '24';
+    /** Whether to show time inputs (default: true) */
+    showTime?: boolean;
+    /** Theme override */
+    theme?: Theme;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Form field name (used for hidden inputs: {name}-start and {name}-end) */
+    name?: string;
+    /** Label for the component */
+    label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Animation duration in milliseconds for month transitions (default: 400) */
+    animationDuration?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Specific days that cannot be selected */
+    blockedDays?: Date[];
+    /** Months that cannot be selected (all days in these months will be disabled) */
+    blockedMonths?: {
+        year: number;
+        month: number;
+    }[];
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Hide navigation arrows when they are disabled (default: false) */
+    hideDisabledNavigation?: boolean;
+    /** Show days from previous/next month in the calendar grid (default: false) */
+    showOutsideDays?: boolean;
+    /**
+     * Navigation mode for the calendar months (default: 'independent')
+     * - 'independent': Each month has its own navigation arrows and can move independently
+     *   (first month cannot go on or past second month and vice versa)
+     * - 'together': Both months navigate together (prev/next moves both by one month)
+     */
+    navigationMode?: 'independent' | 'together';
+    /** Aria label for the calendar container (default: 'Date range picker calendar') */
+    ariaLabelCalendar?: string;
+    /** Aria label for previous month button in together mode (default: 'Previous month') */
+    ariaLabelPrevMonth?: string;
+    /** Aria label for next month button in together mode (default: 'Next month') */
+    ariaLabelNextMonth?: string;
+    /** Aria label for previous month button for start date in independent mode (default: 'Previous month for start date') */
+    ariaLabelPrevMonthStart?: string;
+    /** Aria label for next month button for start date in independent mode (default: 'Next month for start date') */
+    ariaLabelNextMonthStart?: string;
+    /** Aria label for previous month button for end date in independent mode (default: 'Previous month for end date') */
+    ariaLabelPrevMonthEnd?: string;
+    /** Aria label for next month button for end date in independent mode (default: 'Next month for end date') */
+    ariaLabelNextMonthEnd?: string;
+    /** Label for start date input (default: 'Start date') */
+    labelStartDate?: string;
+    /** Label for end date input (default: 'End date') */
+    labelEndDate?: string;
+    /** Label for time inputs (default: 'Time') */
+    labelTime?: string;
+    /** Aria label for start date input (default: 'Start date') */
+    ariaLabelStartDate?: string;
+    /** Aria label for end date input (default: 'End date') */
+    ariaLabelEndDate?: string;
+    /** Error message for invalid date format (default: 'Invalid date') */
+    errorInvalidDate?: string;
+    /** Error message for unavailable date (default: 'Date is not available') */
+    errorDateNotAvailable?: string;
+    /** Whether to show the preset panel (default: true) */
+    showPresets?: boolean;
+    /** Label for the time period section (default: 'Time period') */
+    labelTimePeriod?: string;
+    /** Aria label for the time period section (default: 'Time period options') */
+    ariaLabelTimePeriod?: string;
+    /** Custom labels for preset options */
+    presetLabels?: PresetLabels;
+    /** Custom class names for different parts of the component */
+    classNames?: DateRangePickerClassNames;
+};
+/** @deprecated Use Props instead */
+export type DateRangePickerProps = Props;
+/** Custom class names for different parts of the DateRangePicker component */
+export type DateRangePickerClassNames = {
+    /** Class name for the main container */
+    container?: string;
+    /** Class name for the right panel (contains inputs and calendar) */
+    rightPanel?: string;
+    /** Class names for the preset panel */
+    presetPanel?: PresetPanelClassNames;
+    /** Class names for the date/time inputs section */
+    dateTimeInputs?: DateTimeInputsClassNames;
+    /** Class names for the calendar panel */
+    calendarPanel?: CalendarPanelClassNames;
+};

package/dist/components/DateRangePicker/DateRangePicker.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const dateRangePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const rightPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/DateRangePicker/DateRangePicker.variants.js

@@ -0,0 +1,25 @@
+import { t as a } from "../../dist-DtEbXv47.js";
+var r = a([
+  "flex",
+  "rounded-xl",
+  "max-w-fit",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "shadow",
+  "dark:shadow-metal-50/5",
+  "pt-4.5",
+  "pb-3.5",
+  "px-4"
+]), t = a([
+  "flex",
+  "flex-col",
+  "pt-4",
+  "gap-6",
+  "pr-4",
+  "items-center"
+]);
+export {
+  r as dateRangePickerVariants,
+  t as rightPanelVariants
+};

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { CalendarPanelProps } from './CalendarPanel.types';
+export declare const CalendarPanel: FC<CalendarPanelProps>;

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.js

@@ -0,0 +1,80 @@
+import '../../../../style.css';import '../../../../CalendarPanel.css';/* empty css                         */
+import { useDateRangePicker as B } from "../../contexts/date-range-picker.hook.js";
+import { createDisabledMatcher as E } from "../../utils/disabled-dates.js";
+import { IndependentModeCalendar as F } from "./components/IndependentModeCalendar/IndependentModeCalendar.js";
+import { TogetherModeCalendar as G } from "./components/TogetherModeCalendar/TogetherModeCalendar.js";
+import { useMemo as H } from "react";
+import { jsx as x } from "react/jsx-runtime";
+var J = ({ className: a, calendarWidth: n = 550, ariaLabelCalendar: o = "Date range picker calendar", ariaLabelPrevMonth: u = "Previous month", ariaLabelNextMonth: D = "Next month", ariaLabelPrevMonthStart: M = "Previous month for start date", ariaLabelNextMonthStart: R = "Next month for start date", ariaLabelPrevMonthEnd: b = "Previous month for end date", ariaLabelNextMonthEnd: k = "Next month for end date", classNames: r }) => {
+  const { animationDuration: i, blockedDays: d, blockedMonths: g, canLeftNavigateNext: y, canLeftNavigatePrev: C, canNavigateNext: v, canNavigatePrev: s, canRightNavigateNext: L, canRightNavigatePrev: S, disabled: e, displayedMonths: m, hideDisabledNavigation: c, maxDate: h, minDate: l, navigationMode: t, range: f, showOutsideDays: p, navigateLeftNext: j, navigateLeftPrev: w, navigateNextMonth: I, navigatePrevMonth: O, navigateRightNext: T, navigateRightPrev: q, setRange: z } = B(), N = H(() => E({
+    blockedDays: d,
+    blockedMonths: g,
+    minDate: l,
+    maxDate: h
+  }), [
+    d,
+    g,
+    l,
+    h
+  ]), P = (A) => {
+    z(A);
+  };
+  return t === "independent" ? /* @__PURE__ */ x(F, {
+    className: a,
+    calendarWidth: n,
+    ariaLabelCalendar: o,
+    ariaLabelPrevMonthStart: M,
+    ariaLabelNextMonthStart: R,
+    ariaLabelPrevMonthEnd: b,
+    ariaLabelNextMonthEnd: k,
+    classNames: r,
+    range: f,
+    onRangeSelect: P,
+    disabled: e,
+    disabledMatcher: N,
+    showOutsideDays: p,
+    hideDisabledNavigation: c,
+    canLeftNavigatePrev: C,
+    canLeftNavigateNext: y,
+    canRightNavigatePrev: S,
+    canRightNavigateNext: L,
+    navigateLeftPrev: w,
+    navigateLeftNext: j,
+    navigateRightPrev: q,
+    navigateRightNext: T,
+    carouselProps: {
+      displayedMonths: m,
+      animationDuration: i,
+      navigationMode: t
+    }
+  }) : /* @__PURE__ */ x(G, {
+    className: a,
+    calendarWidth: n,
+    ariaLabelCalendar: o,
+    ariaLabelPrevMonth: u,
+    ariaLabelNextMonth: D,
+    classNames: r,
+    range: f,
+    onRangeSelect: P,
+    disabled: e,
+    disabledMatcher: N,
+    showOutsideDays: p,
+    hideDisabledNavigation: c,
+    canNavigatePrev: s,
+    canNavigateNext: v,
+    carouselProps: {
+      displayedMonths: m,
+      animationDuration: i,
+      disabled: e,
+      canNavigatePrev: s,
+      canNavigateNext: v,
+      navigationMode: t,
+      navigatePrevMonth: O,
+      navigateNextMonth: I
+    }
+  });
+};
+J.displayName = "DateRangePickerCalendarPanel";
+export {
+  J as CalendarPanel
+};

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.types.d.ts

@@ -0,0 +1,79 @@
+export type CalendarPanelClassNames = {
+    /** Root container */
+    root?: string;
+    /** Navigation bar container */
+    navigation?: string;
+    /** Navigation group (contains prev button + month title + next button) */
+    navGroup?: string;
+    /** Navigation buttons */
+    navButton?: string;
+    /** Disabled navigation buttons */
+    navButtonDisabled?: string;
+    /** Month title text */
+    monthTitle?: string;
+    /** Divider line between month header and calendar grid */
+    divider?: string;
+    /** Calendar grids container */
+    gridContainer?: string;
+    /** Individual calendar grid */
+    grid?: string;
+    /** Day picker specific class names */
+    dayPicker?: DayPickerClassNames;
+};
+/** Class names for DayPicker calendar elements */
+export type DayPickerClassNames = {
+    /** Root container of the day picker */
+    root?: string;
+    /** Months container */
+    months?: string;
+    /** Individual month container */
+    month?: string;
+    /** Calendar table */
+    table?: string;
+    /** Table head with weekday names */
+    weekdays?: string;
+    /** Individual weekday header cell */
+    weekday?: string;
+    /** Table body with weeks */
+    weeks?: string;
+    /** Individual day cell */
+    day?: string;
+    /** Day button inside each cell */
+    dayButton?: string;
+    /** Selected day(s) */
+    selected?: string;
+    /** Start of the selected range */
+    rangeStart?: string;
+    /** End of the selected range */
+    rangeEnd?: string;
+    /** Days between range start and end */
+    rangeMiddle?: string;
+    /** Today's date */
+    today?: string;
+    /** Disabled days */
+    disabled?: string;
+    /** Days outside the current month */
+    outside?: string;
+};
+export type CalendarPanelProps = {
+    className?: string;
+    /** Width of the calendar panel in pixels (default: 550) */
+    calendarWidth?: number;
+    /** Aria label for the calendar container (default: 'Date range picker calendar') */
+    ariaLabelCalendar?: string;
+    /** Aria label for previous month button in together mode (default: 'Previous month') */
+    ariaLabelPrevMonth?: string;
+    /** Aria label for next month button in together mode (default: 'Next month') */
+    ariaLabelNextMonth?: string;
+    /** Aria label for previous month button for start date in independent mode (default: 'Previous month for start date') */
+    ariaLabelPrevMonthStart?: string;
+    /** Aria label for next month button for start date in independent mode (default: 'Next month for start date') */
+    ariaLabelNextMonthStart?: string;
+    /** Aria label for previous month button for end date in independent mode (default: 'Previous month for end date') */
+    ariaLabelPrevMonthEnd?: string;
+    /** Aria label for next month button for end date in independent mode (default: 'Next month for end date') */
+    ariaLabelNextMonthEnd?: string;
+    /** Custom class names for styling */
+    classNames?: CalendarPanelClassNames;
+};
+export type SlideDirection = 'left' | 'right' | null;

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const calendarPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavigationVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavGroupVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavButtonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarNavButtonDisabledVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarMonthTitleVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarGridContainerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const calendarGridVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/DateRangePicker/components/CalendarPanel/CalendarPanel.variants.js

@@ -0,0 +1,56 @@
+import { t as a } from "../../../../dist-DtEbXv47.js";
+var t = a([
+  "flex",
+  "flex-col",
+  "items-center",
+  "w-full"
+]), r = a([
+  "flex",
+  "items-center",
+  "justify-between",
+  "w-138"
+]), n = a([
+  "flex",
+  "items-center",
+  "w-64.75"
+]), l = a([
+  "flex",
+  "items-center",
+  "justify-center",
+  "p-2",
+  "rounded-full",
+  "cursor-pointer",
+  "text-slate-500",
+  "dark:text-metal-300",
+  "hover:bg-slate-100",
+  "dark:hover:bg-metal-700",
+  "transition-colors"
+]), i = a([
+  "opacity-45",
+  "cursor-not-allowed",
+  "hover:bg-transparent"
+]), s = a([
+  "flex-1",
+  "text-center",
+  "text-base",
+  "font-medium",
+  "text-slate-700",
+  "dark:text-white",
+  "leading-6"
+]), o = a([
+  "flex",
+  "gap-8",
+  "py-4",
+  "w-138",
+  "justify-center"
+]), c = a(["w-64.75"]);
+export {
+  o as calendarGridContainerVariants,
+  c as calendarGridVariants,
+  s as calendarMonthTitleVariants,
+  i as calendarNavButtonDisabledVariants,
+  l as calendarNavButtonVariants,
+  n as calendarNavGroupVariants,
+  r as calendarNavigationVariants,
+  t as calendarPanelVariants
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarDivider/CalendarDivider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './CalendarDivider.types';
+export declare const CalendarDivider: FC<Props>;

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarDivider/CalendarDivider.js

@@ -0,0 +1,10 @@
+import { t as r } from "../../../../../../utils-DHuiYnx1.js";
+import { jsx as e } from "react/jsx-runtime";
+var i = ({ className: a }) => /* @__PURE__ */ e("div", {
+  className: r("absolute", "left-0", "right-0", "top-14", "h-px", "bg-slate-200", "dark:bg-metal-700", a),
+  "aria-hidden": "true"
+});
+i.displayName = "CalendarDivider";
+export {
+  i as CalendarDivider
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarDivider/CalendarDivider.types.d.ts

@@ -0,0 +1,3 @@
+export type Props = {
+    className?: string;
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './CalendarMonth.types';
+export declare const CalendarMonth: FC<Props>;

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.js

@@ -0,0 +1,38 @@
+import { t as n } from "../../../../../../utils-DHuiYnx1.js";
+import { t as c } from "../../../../../../DayPicker-CNWQ1Oyd.js";
+import { getMonthName as d } from "../../../../utils/validation.js";
+import { calendarMonthTitleVariants as f } from "../../CalendarPanel.variants.js";
+import { s as h } from "../../../../../../constants-D96yCePL.js";
+import { useMemo as p } from "react";
+import { jsx as r, jsxs as M } from "react/jsx-runtime";
+var y = (e) => `${d(e.getMonth())} ${e.getFullYear()}`, N = ({ month: e, range: a, onRangeSelect: i, disabled: o, disabledMatcher: s, showOutsideDays: m, classNames: t }) => {
+  const l = p(() => h(t?.dayPicker), [t?.dayPicker]);
+  return /* @__PURE__ */ M("div", {
+    style: { width: 259 },
+    children: [/* @__PURE__ */ r("div", {
+      className: "flex items-center justify-center mb-8 h-6",
+      children: /* @__PURE__ */ r("span", {
+        className: n(f(), "flex-1 text-center", t?.monthTitle),
+        children: y(e)
+      })
+    }), /* @__PURE__ */ r(c, {
+      mode: "range",
+      selected: {
+        from: a.from,
+        to: a.to
+      },
+      onSelect: i,
+      month: e,
+      numberOfMonths: 1,
+      disabled: s || o,
+      hideNavigation: !0,
+      animate: !1,
+      showOutsideDays: m,
+      classNames: l
+    })]
+  }, `${e.getFullYear()}-${e.getMonth()}`);
+};
+N.displayName = "CalendarMonth";
+export {
+  N as CalendarMonth
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.types.d.ts

@@ -0,0 +1,17 @@
+import { DateRange, Matcher } from 'react-day-picker';
+import { DayPickerClassNames } from '../../CalendarPanel.types';
+export type Props = {
+    month: Date;
+    range: {
+        from?: Date;
+        to?: Date;
+    };
+    onRangeSelect: (range: DateRange | undefined) => void;
+    disabled?: boolean;
+    disabledMatcher?: Matcher | Matcher[];
+    showOutsideDays?: boolean;
+    classNames?: {
+        monthTitle?: string;
+        dayPicker?: DayPickerClassNames;
+    };
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './IndependentModeCalendar.types';
+export declare const IndependentModeCalendar: FC<Props>;

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.js

@@ -0,0 +1,185 @@
+import { t as a } from "../../../../../../utils-DHuiYnx1.js";
+import { t as X } from "../../../../../../proxy-uLtw-ZML.js";
+import { CalendarDivider as Y } from "../CalendarDivider/CalendarDivider.js";
+import { calendarGridContainerVariants as Z, calendarPanelVariants as O } from "../../CalendarPanel.variants.js";
+import "../../../../../../constants-D96yCePL.js";
+import { CalendarMonth as s } from "../CalendarMonth/CalendarMonth.js";
+import { useIndependentCarousel as tt } from "../../hooks/useIndependentCarousel.js";
+import { NavigationButton as c } from "../NavigationButton/NavigationButton.js";
+import { useCallback as nt, useMemo as N } from "react";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+var et = ({ className: k, calendarWidth: b = 550, ariaLabelCalendar: x = "Date range picker calendar", ariaLabelPrevMonthStart: T = "Previous month for start date", ariaLabelNextMonthStart: B = "Next month for start date", ariaLabelPrevMonthEnd: R = "Previous month for end date", ariaLabelNextMonthEnd: w = "Next month for end date", classNames: t, range: i, onRangeSelect: v, disabled: e, disabledMatcher: r, showOutsideDays: o, hideDisabledNavigation: h, canLeftNavigatePrev: z, canLeftNavigateNext: A, canRightNavigatePrev: L, canRightNavigateNext: I, navigateLeftPrev: S, navigateLeftNext: D, navigateRightPrev: M, navigateRightNext: P, carouselProps: f }) => {
+  const { calendarHeight: y, enableLeftTransition: W, enableRightTransition: H, isLeftAnimating: p, isRightAnimating: u, leftAnimateTransform: j, leftCarouselRef: G, leftInternalMonth: V, leftNextMonth: _, leftPrevMonth: $, rightAnimateTransform: E, rightCarouselRef: q, rightInternalMonth: F, rightNextMonth: J, rightPrevMonth: K, getLeftTransform: Q, getRightTransform: U } = tt(f), l = nt((g) => {
+    g && v({
+      from: g.from,
+      to: g.to
+    });
+  }, [v]), C = N(() => t?.dayPicker, [t?.dayPicker]), m = N(() => ({
+    monthTitle: t?.monthTitle,
+    dayPicker: C
+  }), [t?.monthTitle, C]);
+  return /* @__PURE__ */ n("div", {
+    className: a(O({ className: k }), t?.root),
+    children: /* @__PURE__ */ d("div", {
+      className: a(Z(), "relative", t?.gridContainer),
+      style: { width: b },
+      children: [/* @__PURE__ */ n(Y, { className: t?.divider }), /* @__PURE__ */ d(X.div, {
+        className: "flex gap-8",
+        role: "application",
+        "aria-label": x,
+        initial: !1,
+        animate: { height: y },
+        transition: {
+          duration: f.animationDuration / 1e3,
+          ease: [
+            0.25,
+            0.1,
+            0.25,
+            1
+          ]
+        },
+        children: [/* @__PURE__ */ d("div", {
+          style: { width: 259 },
+          className: "relative overflow-hidden",
+          children: [
+            /* @__PURE__ */ n(c, {
+              direction: "prev",
+              onClick: S,
+              disabled: e,
+              isAnimating: p,
+              canNavigate: z,
+              hideWhenDisabled: h,
+              className: a("absolute left-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton),
+              disabledClassName: t?.navButtonDisabled,
+              ariaLabel: T,
+              size: "small"
+            }),
+            /* @__PURE__ */ n(c, {
+              direction: "next",
+              onClick: D,
+              disabled: e,
+              isAnimating: p,
+              canNavigate: A,
+              hideWhenDisabled: h,
+              className: a("absolute right-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton),
+              disabledClassName: t?.navButtonDisabled,
+              ariaLabel: B,
+              size: "small"
+            }),
+            /* @__PURE__ */ d("div", {
+              ref: G,
+              className: a("flex", W && j && "konstruct-drp-carousel-transition"),
+              style: {
+                "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
+                width: 3 * 259,
+                transform: Q(),
+                willChange: "transform"
+              },
+              children: [
+                /* @__PURE__ */ n(s, {
+                  month: $,
+                  range: i,
+                  onRangeSelect: l,
+                  disabled: e,
+                  disabledMatcher: r,
+                  showOutsideDays: o,
+                  classNames: m
+                }),
+                /* @__PURE__ */ n(s, {
+                  month: V,
+                  range: i,
+                  onRangeSelect: l,
+                  disabled: e,
+                  disabledMatcher: r,
+                  showOutsideDays: o,
+                  classNames: m
+                }),
+                /* @__PURE__ */ n(s, {
+                  month: _,
+                  range: i,
+                  onRangeSelect: l,
+                  disabled: e,
+                  disabledMatcher: r,
+                  showOutsideDays: o,
+                  classNames: m
+                })
+              ]
+            })
+          ]
+        }), /* @__PURE__ */ d("div", {
+          style: { width: 259 },
+          className: "relative overflow-hidden",
+          children: [
+            /* @__PURE__ */ n(c, {
+              direction: "prev",
+              onClick: M,
+              disabled: e,
+              isAnimating: u,
+              canNavigate: L,
+              hideWhenDisabled: h,
+              className: a("absolute left-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton),
+              disabledClassName: t?.navButtonDisabled,
+              ariaLabel: R,
+              size: "small"
+            }),
+            /* @__PURE__ */ n(c, {
+              direction: "next",
+              onClick: P,
+              disabled: e,
+              isAnimating: u,
+              canNavigate: I,
+              hideWhenDisabled: h,
+              className: a("absolute right-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton),
+              disabledClassName: t?.navButtonDisabled,
+              ariaLabel: w,
+              size: "small"
+            }),
+            /* @__PURE__ */ d("div", {
+              ref: q,
+              className: a("flex", H && E && "konstruct-drp-carousel-transition"),
+              style: {
+                "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
+                width: 3 * 259,
+                transform: U(),
+                willChange: "transform"
+              },
+              children: [
+                /* @__PURE__ */ n(s, {
+                  month: K,
+                  range: i,
+                  onRangeSelect: l,
+                  disabled: e,
+                  disabledMatcher: r,
+                  showOutsideDays: o,
+                  classNames: m
+                }),
+                /* @__PURE__ */ n(s, {
+                  month: F,
+                  range: i,
+                  onRangeSelect: l,
+                  disabled: e,
+                  disabledMatcher: r,
+                  showOutsideDays: o,
+                  classNames: m
+                }),
+                /* @__PURE__ */ n(s, {
+                  month: J,
+                  range: i,
+                  onRangeSelect: l,
+                  disabled: e,
+                  disabledMatcher: r,
+                  showOutsideDays: o,
+                  classNames: m
+                })
+              ]
+            })
+          ]
+        })]
+      })]
+    })
+  });
+};
+et.displayName = "IndependentModeCalendar";
+export {
+  et as IndependentModeCalendar
+};