@payfit/unity-components 2.21.12 → 2.21.14

package/dist/esm/components/date-calendar/DateCalendar.js

@@ -1,149 +1,147 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { useState as c } from "react";
-import { today as I, getLocalTimeZone as m, isToday as T } from "@internationalized/date";
-import { uyTv as k } from "@payfit/unity-themes";
-import { Calendar as B, Heading as F, CalendarGrid as M, CalendarGridHeader as O, CalendarHeaderCell as W, CalendarGridBody as P, CalendarCell as R } from "react-aria-components";
-import { IconButton as f } from "../icon-button/IconButton.js";
-import { useMonthsList as Z } from "./hooks/useMonthsList.js";
-import { useYearsList as $ } from "./hooks/useYearsList.js";
-import { DateSegmentSelect as b } from "./parts/DateSegmentSelect.js";
-const q = k({
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { today as O, getLocalTimeZone as h, isToday as T } from "@internationalized/date";
+import { uyTv as j } from "@payfit/unity-themes";
+import { Calendar as k, Heading as F, CalendarGrid as R, CalendarGridHeader as P, CalendarHeaderCell as W, CalendarGridBody as Z, CalendarCell as $ } from "react-aria-components";
+import { useIntl as q } from "react-intl";
+import { IconButton as g } from "../icon-button/IconButton.js";
+import { calendarBase as w } from "./DateCalendar.variants.js";
+import { useMonthsList as z } from "./hooks/useMonthsList.js";
+import { useYearsList as A } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as C } from "./parts/DateSegmentSelect.js";
+const E = j({
+  extend: w,
   slots: {
-    base: "",
-    calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
-    dialogHeader: "uy:flex uy:items-center uy:h-500 uy:w-full",
-    dialogHeaderGroup: "uy:flex uy:items-center",
-    calendarGrid: "uy:border-separate uy:border-spacing-25 uy:w-full",
-    calendarHeaderCell: "uy:typography-body-small-strong uy:sm:typography-body-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
+    calendarGrid: "uy:border-spacing-25",
     calendarCell: [
-      // base styles
-      "uy:typography-body uy:relative uy:text-content-form-enabled uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:outline-hidden uy:cursor-pointer uy:rounded-circle uy:flex uy:items-center uy:justify-center",
-      // interaction states
-      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
-      // cells outside of current month
-      "uy:data-[outside-month]:text-content-neutral-disabled uy:data-[outside-month]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed uy:data-[unavailable]:text-content-neutral-disabled uy:data-[unavailable]:cursor-not-allowed",
       // selected cells
       "uy:data-[selected]:bg-surface-form-active uy:data-[selected]:text-content-inverted",
-      // "current day" (today) indicator
-      "uy:data-[today]:after:content-' ' uy:data-[today]:after:absolute uy:data-[today]:after:bottom-150 uy:data-[today]:after:w-100 uy:data-[today]:after:h-25 uy:data-[today]:after:bg-surface-primary-active uy:data-[today]:data-[selected]:after:bg-content-inverted"
+      // today dot turns white when selected
+      "uy:data-[today]:data-[selected]:after:bg-content-inverted"
     ]
   },
   variants: {
     isDisabled: {
       true: {
-        calendarHeaderCell: "uy:text-content-form-disabled"
+        calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selected]:text-content-neutral-disabled"
       }
     }
-  },
-  defaultVariants: {
-    isDisabled: !1
   }
 });
-function z({
-  value: u,
-  defaultValue: o,
-  minValue: r,
-  maxValue: d,
-  onChange: h,
-  onFocusChange: p,
+function J({
+  value: c,
+  defaultValue: d,
+  minValue: s,
+  maxValue: r,
+  onChange: f,
+  onFocusChange: b,
   ...t
 }) {
-  const g = I(m()), v = Z(), C = $({
-    startYear: r?.year,
-    endYear: d?.year
-  }), [x, D] = c(u ?? o ?? null), [l, n] = c(() => {
-    const e = u ?? o ?? g;
-    return r && e.compare(r) < 0 ? r : d && e.compare(d) > 0 ? d : e;
-  }), N = (e) => {
-    n(
-      (i) => i.set({ month: parseInt(e, 10) })
+  const m = q(), v = O(h()), p = z(), D = A({
+    startYear: s?.year,
+    endYear: r?.year
+  }), [N, G] = y(c ?? d ?? null), [i, o] = y(() => {
+    const e = c ?? d ?? v;
+    return s && e.compare(s) < 0 ? s : r && e.compare(r) > 0 ? r : e;
+  }), H = (e) => {
+    o(
+      (l) => l.set({ month: parseInt(e, 10) })
     );
-  }, H = (e) => {
-    n(
-      (i) => i.set({ year: parseInt(e, 10) })
+  }, L = (e) => {
+    o(
+      (l) => l.set({ year: parseInt(e, 10) })
     );
   }, {
-    base: w,
-    calendarWrapper: G,
-    dialogHeader: L,
-    dialogHeaderGroup: y,
-    calendarGrid: S,
+    base: M,
+    calendarWrapper: S,
+    dialogHeader: x,
+    dialogHeaderGroup: u,
+    calendarGrid: I,
     calendarHeaderCell: Y,
-    calendarCell: j
-  } = q({ isDisabled: t.isDisabled });
-  return /* @__PURE__ */ a("div", { className: w(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-    B,
+    calendarCell: B
+  } = E({
+    isDisabled: t.isDisabled,
+    isInteractive: !t.isDisabled && !t.isReadOnly
+  });
+  return /* @__PURE__ */ a("div", { className: M(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+    k,
     {
       ...t,
-      minValue: r,
-      maxValue: d,
-      value: x,
-      defaultValue: o,
+      minValue: s,
+      maxValue: r,
+      value: N,
+      defaultValue: d,
       onChange: (e) => {
-        D(e), h?.(e);
+        G(e), f?.(e);
       },
-      focusedValue: l,
+      focusedValue: i,
       onFocusChange: (e) => {
-        n(e), p?.(e);
+        o(e), b?.(e);
       },
-      children: /* @__PURE__ */ s("div", { className: G(), children: [
-        /* @__PURE__ */ s("header", { className: L(), children: [
+      children: /* @__PURE__ */ n("div", { className: S(), children: [
+        /* @__PURE__ */ n("header", { className: x(), children: [
           /* @__PURE__ */ a(F, { className: "uy:sr-only" }),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ n(
             "div",
             {
-              className: y({
+              className: u({
                 className: "uy:pl-100 uy:gap-200"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  b,
+                  C,
                   {
                     type: "month",
-                    items: v,
-                    value: l.month.toString(),
-                    onChange: N,
+                    items: p,
+                    value: i.month.toString(),
+                    onChange: H,
                     isDisabled: t.isDisabled
                   }
                 ),
                 /* @__PURE__ */ a(
-                  b,
+                  C,
                   {
                     type: "year",
-                    items: C,
-                    value: l.year.toString(),
-                    onChange: H,
+                    items: D,
+                    value: i.year.toString(),
+                    onChange: L,
                     isDisabled: t.isDisabled
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ n(
             "div",
             {
-              className: y({
+              className: u({
                 className: "uy:ml-auto uy:gap-100"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  f,
+                  g,
                   {
                     slot: "previous",
                     icon: "CaretLeftOutlined",
                     color: "neutral",
-                    label: "Previous",
+                    label: m.formatMessage({
+                      id: "unity:component:common:previous",
+                      defaultMessage: "Previous"
+                    }),
                     variant: "ghost",
                     isDisabled: t.isDisabled
                   }
                 ),
                 /* @__PURE__ */ a(
-                  f,
+                  g,
                   {
                     slot: "next",
                     icon: "CaretRightOutlined",
                     color: "neutral",
-                    label: "Next",
+                    label: m.formatMessage({
+                      id: "unity:component:common:next",
+                      defaultMessage: "Next"
+                    }),
                     variant: "ghost",
                     isDisabled: t.isDisabled
                   }
@@ -152,14 +150,14 @@ function z({
             }
           )
         ] }),
-        /* @__PURE__ */ s(M, { className: S(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a(O, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
-          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(
-            R,
+        /* @__PURE__ */ n(R, { className: I(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
+          /* @__PURE__ */ a(Z, { children: (e) => /* @__PURE__ */ a(
+            $,
             {
               date: e,
-              "data-today": T(e, m()) ? !0 : void 0,
-              className: j()
+              "data-today": T(e, h()) ? !0 : void 0,
+              className: B()
             }
           ) })
         ] })
@@ -167,7 +165,7 @@ function z({
     }
   ) });
 }
-z.displayName = "DateCalendar";
+J.displayName = "DateCalendar";
 export {
-  z as DateCalendar
+  J as DateCalendar
 };

package/dist/esm/components/date-calendar/DateCalendar.variants.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Base calendar styles shared between DateCalendar and DateRangeCalendar.
+ * Use `extend: calendarBase` in component-specific uyTv definitions.
+ */
+export declare const calendarBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            calendarHeaderCell: string;
+        };
+    };
+    isInteractive: {
+        true: {
+            calendarCell: string[];
+        };
+    };
+}, {
+    base: string;
+    calendarWrapper: string;
+    dialogHeader: string;
+    dialogHeaderGroup: string;
+    calendarGrid: string;
+    calendarHeaderCell: string;
+    calendarCell: string[];
+}, undefined, {
+    isDisabled: {
+        true: {
+            calendarHeaderCell: string;
+        };
+    };
+    isInteractive: {
+        true: {
+            calendarCell: string[];
+        };
+    };
+}, {
+    base: string;
+    calendarWrapper: string;
+    dialogHeader: string;
+    dialogHeaderGroup: string;
+    calendarGrid: string;
+    calendarHeaderCell: string;
+    calendarCell: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            calendarHeaderCell: string;
+        };
+    };
+    isInteractive: {
+        true: {
+            calendarCell: string[];
+        };
+    };
+}, {
+    base: string;
+    calendarWrapper: string;
+    dialogHeader: string;
+    dialogHeaderGroup: string;
+    calendarGrid: string;
+    calendarHeaderCell: string;
+    calendarCell: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/date-calendar/DateCalendar.variants.js

@@ -0,0 +1,42 @@
+import { uyTv as a } from "@payfit/unity-themes";
+const t = a({
+  slots: {
+    base: "",
+    calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
+    dialogHeader: "uy:flex uy:items-center uy:h-500 uy:w-full",
+    dialogHeaderGroup: "uy:flex uy:items-center",
+    calendarGrid: "uy:border-separate uy:w-full",
+    calendarHeaderCell: "uy:typography-body-small-strong uy:sm:typography-body-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
+    calendarCell: [
+      // base styles
+      "uy:typography-body uy:relative uy:text-content-form-enabled uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:outline-hidden uy:cursor-pointer uy:rounded-circle uy:flex uy:items-center uy:justify-center",
+      // cells outside of current month
+      "uy:data-[outside-month]:text-content-neutral-disabled uy:data-[outside-month]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed uy:data-[unavailable]:text-content-neutral-disabled uy:data-[unavailable]:cursor-not-allowed",
+      // "current day" (today) indicator — dot
+      "uy:data-[today]:after:content-[''] uy:data-[today]:after:absolute uy:data-[today]:after:bottom-[6px] uy:data-[today]:after:w-[6px] uy:data-[today]:after:h-[6px] uy:data-[today]:after:rounded-circle uy:data-[today]:after:bg-surface-primary-active"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarHeaderCell: "uy:text-content-form-disabled"
+      }
+    },
+    isInteractive: {
+      true: {
+        calendarCell: [
+          "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2",
+          // Disable hover on non-selectable cells
+          "uy:data-[disabled]:hover:bg-transparent uy:data-[unavailable]:hover:bg-transparent uy:data-[outside-month]:hover:bg-transparent"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isInteractive: !0
+  }
+});
+export {
+  t as calendarBase
+};

package/dist/esm/components/date-picker/parts/DateInput.d.ts

@@ -1,6 +1,34 @@
 import { CalendarDate } from '@internationalized/date';
 import { ReactElement } from 'react';
 import { DateFieldProps } from 'react-aria-components';
+export declare const dateSegment: import('tailwind-variants').TVReturnType<{
+    isPlaceholder: {
+        true: string;
+        false: string;
+    };
+    isLiteral: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25 uy:focus:text-content-inverted uy:data-[disabled]:text-content-form-disabled", {
+    isPlaceholder: {
+        true: string;
+        false: string;
+    };
+    isLiteral: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isPlaceholder: {
+        true: string;
+        false: string;
+    };
+    isLiteral: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25 uy:focus:text-content-inverted uy:data-[disabled]:text-content-form-disabled", unknown, unknown, undefined>>;
 export declare const dateInput: import('tailwind-variants').TVReturnType<{
     isInvalid: {
         true: {

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -14,7 +14,7 @@ const M = i({
       false: "uy:text-content-form-enabled"
     },
     isLiteral: {
-      true: "uy:text-content-form-enabled",
+      true: "uy:text-content-neutral-lowest-enabled",
       false: ""
     }
   }
@@ -61,13 +61,13 @@ function P({
   isDisabled: s,
   onClearButtonPress: d
 }) {
-  const t = I(), u = b(x), { dateValue: c } = u, { base: m, input: y, state: f } = N({
+  const t = I(), u = b(x), { dateValue: c } = u, { base: y, input: m, state: f } = N({
     isInvalid: !!o,
     isReadOnly: !!n,
     isDisabled: !!s
   }), p = c && !r && !n && !s;
-  return /* @__PURE__ */ l("div", { className: m(), children: [
-    /* @__PURE__ */ e(g, { className: y(), children: (a) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ l("div", { className: y(), children: [
+    /* @__PURE__ */ e(g, { className: m(), children: (a) => /* @__PURE__ */ e(
       v,
       {
         segment: a,
@@ -120,5 +120,6 @@ function P({
 P.displayName = "DateInput";
 export {
   P as DateInput,
-  N as dateInput
+  N as dateInput,
+  M as dateSegment
 };

package/dist/esm/components/date-range-calendar/DateRangeCalendar.d.ts

@@ -0,0 +1,22 @@
+import { DateValue } from '@internationalized/date';
+import { RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components';
+type PropsFromAriaRangeCalendar<TDate extends DateValue> = AriaRangeCalendarProps<TDate>;
+export type DateRangeCalendarProps<TDate extends DateValue> = PropsFromAriaRangeCalendar<TDate>;
+/**
+ * The `DateRangeCalendar` component displays a calendar grid and allows users to select a date range (start and end dates).
+ * @param {DateRangeCalendarProps} props - The props for the `DateRangeCalendar` component
+ * @example
+ * ```tsx
+ * import { DateRangeCalendar } from '@payfit/unity-components'
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * const [range, setRange] = useState({ start: new CalendarDate(2024, 1, 1), end: new CalendarDate(2024, 1, 15) })
+ * <DateRangeCalendar value={range} onChange={setRange} />
+ * ```
+ * @see {@link DateRangeCalendarProps} for all available props
+ */
+declare function DateRangeCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, onChange, onFocusChange, ...props }: DateRangeCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateRangeCalendar {
+    var displayName: string;
+}
+export { DateRangeCalendar };

package/dist/esm/components/date-range-calendar/DateRangeCalendar.js

@@ -0,0 +1,197 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { useState as L } from "react";
+import { today as M, getLocalTimeZone as h, isToday as R } from "@internationalized/date";
+import { uyTv as S } from "@payfit/unity-themes";
+import { RangeCalendar as Y, Heading as B, CalendarGrid as O, CalendarGridHeader as T, CalendarHeaderCell as j, CalendarGridBody as k, CalendarCell as F } from "react-aria-components";
+import { useIntl as P } from "react-intl";
+import { calendarBase as W } from "../date-calendar/DateCalendar.variants.js";
+import { useMonthsList as Z } from "../date-calendar/hooks/useMonthsList.js";
+import { useYearsList as $ } from "../date-calendar/hooks/useYearsList.js";
+import { DateSegmentSelect as m } from "../date-calendar/parts/DateSegmentSelect.js";
+import { IconButton as b } from "../icon-button/IconButton.js";
+const q = S({
+  extend: W,
+  slots: {
+    calendarGrid: [
+      "uy:border-spacing-y-25 uy:border-spacing-x-0",
+      // All <td> with selected cells need relative positioning for pseudo-elements
+      "uy:[&_td:has(>[data-selected])]:relative",
+      // Middle cells: full background on the <td>
+      "uy:[&_td:has(>[data-selected])]:bg-surface-primary-lowest",
+      // Start td: no bg, use :before for right-half band
+      "uy:[&_td:has(>[data-selection-start])]:bg-transparent",
+      "uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:content-[''] uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:absolute uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:top-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:right-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:w-1/2 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:h-full uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-primary-lowest",
+      // End td: no bg, use :before for left-half band
+      "uy:[&_td:has(>[data-selection-end])]:bg-transparent",
+      "uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:content-[''] uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:absolute uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:top-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:left-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:w-1/2 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:h-full uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-primary-lowest",
+      // Single day range — no band at all
+      "uy:[&_td:has(>[data-selection-start][data-selection-end])]:bg-transparent"
+    ],
+    calendarHeaderCell: "uy:text-center",
+    calendarCell: [
+      // selected cells (range middle) — bg is handled by the <td>, text stays default
+      "uy:data-[selected]:rounded-none",
+      // selection start — blue circle
+      "uy:data-[selection-start]:bg-surface-form-active uy:data-[selection-start]:text-content-inverted uy:data-[selection-start]:rounded-circle",
+      // selection end — blue circle
+      "uy:data-[selection-end]:bg-surface-form-active uy:data-[selection-end]:text-content-inverted uy:data-[selection-end]:rounded-circle",
+      // today dot turns white when on start/end cells
+      "uy:data-[today]:data-[selection-start]:after:bg-content-inverted uy:data-[today]:data-[selection-end]:after:bg-content-inverted"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarGrid: "uy:[&_td]:bg-transparent uy:[&_td]:before:hidden",
+        calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selection-start]:bg-transparent uy:data-[selection-start]:text-content-neutral-disabled uy:data-[selection-end]:bg-transparent uy:data-[selection-end]:text-content-neutral-disabled uy:cursor-not-allowed"
+      }
+    },
+    isInteractive: {
+      true: {
+        calendarCell: [
+          // selected middle cells (not start/end): hover shows a circle with primary-lowest-hover
+          "uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-primary-lowest-hover uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:rounded-circle"
+        ]
+      }
+    }
+  }
+});
+function z({
+  value: i,
+  defaultValue: c,
+  minValue: n,
+  maxValue: s,
+  onChange: f,
+  onFocusChange: g,
+  ...a
+}) {
+  const u = P(), p = M(h()), v = Z(), C = $({
+    startYear: n?.year,
+    endYear: s?.year
+  }), [r, o] = L(() => {
+    const e = i?.start ?? c?.start ?? p;
+    return n && e.compare(n) < 0 ? n : s && e.compare(s) > 0 ? s : e;
+  }), _ = (e) => {
+    o(
+      (l) => l.set({ month: parseInt(e, 10) })
+    );
+  }, D = (e) => {
+    o(
+      (l) => l.set({ year: parseInt(e, 10) })
+    );
+  }, {
+    base: N,
+    calendarWrapper: x,
+    dialogHeader: w,
+    dialogHeaderGroup: y,
+    calendarGrid: G,
+    calendarHeaderCell: H,
+    calendarCell: I
+  } = q({
+    isDisabled: a.isDisabled,
+    isInteractive: !a.isDisabled && !a.isReadOnly
+  });
+  return /* @__PURE__ */ t("div", { className: N(), "data-dd-privacy": "mask", children: /* @__PURE__ */ t(
+    Y,
+    {
+      ...a,
+      minValue: n,
+      maxValue: s,
+      value: i,
+      defaultValue: c,
+      onChange: f,
+      focusedValue: r,
+      onFocusChange: (e) => {
+        o(e), g?.(e);
+      },
+      children: /* @__PURE__ */ d("div", { className: x(), children: [
+        /* @__PURE__ */ d("header", { className: w(), children: [
+          /* @__PURE__ */ t(B, { className: "uy:sr-only" }),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: y({
+                className: "uy:pl-100 uy:gap-200"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  m,
+                  {
+                    type: "month",
+                    items: v,
+                    value: r.month.toString(),
+                    onChange: _,
+                    isDisabled: a.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  m,
+                  {
+                    type: "year",
+                    items: C,
+                    value: r.year.toString(),
+                    onChange: D,
+                    isDisabled: a.isDisabled
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: y({
+                className: "uy:ml-auto uy:gap-100"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  b,
+                  {
+                    slot: "previous",
+                    icon: "CaretLeftOutlined",
+                    color: "neutral",
+                    label: u.formatMessage({
+                      id: "unity:component:common:previous",
+                      defaultMessage: "Previous"
+                    }),
+                    variant: "ghost",
+                    isDisabled: a.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  b,
+                  {
+                    slot: "next",
+                    icon: "CaretRightOutlined",
+                    color: "neutral",
+                    label: u.formatMessage({
+                      id: "unity:component:common:next",
+                      defaultMessage: "Next"
+                    }),
+                    variant: "ghost",
+                    isDisabled: a.isDisabled
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d(O, { className: G(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ t(T, { children: (e) => /* @__PURE__ */ t(j, { className: H(), children: e }) }),
+          /* @__PURE__ */ t(k, { children: (e) => /* @__PURE__ */ t(
+            F,
+            {
+              date: e,
+              "data-today": R(e, h()) ? !0 : void 0,
+              className: I()
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+z.displayName = "DateRangeCalendar";
+export {
+  z as DateRangeCalendar
+};