@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-61ckf42z.js

@@ -0,0 +1,220 @@
+import {
+  slotRender
+} from "./components-5vxtcp88.js";
+import {
+  Button
+} from "./components-5pkcfprd.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphPartScope,
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  useSize,
+  useSizeVariant
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/dialog/index.tsx
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useImperativeHandle,
+  useMemo
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_OFFSET = 4;
+var DialogContext = createContext({
+  open: false,
+  origin: { current: {} }
+});
+var useDialogState = () => useContext(DialogContext);
+var DialogTrigger = forwardRef(({ render, asChild, children, ...props }, ref) => {
+  const el = slotRender(render, asChild, children);
+  return el ? /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+    ref,
+    render: el,
+    ...props
+  }) : /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+    ref,
+    ...props,
+    children
+  });
+});
+DialogTrigger.displayName = "DialogTrigger";
+var DialogClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
+  const el = slotRender(render, asChild, children);
+  return el ? /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+    ref,
+    render: el,
+    ...props
+  }) : /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+    ref,
+    ...props,
+    children
+  });
+});
+DialogClose.displayName = "DialogClose";
+var DialogContent = forwardRef(({
+  className,
+  children,
+  size = "sm",
+  container,
+  showCloseButton = true,
+  position = "center",
+  from,
+  effect,
+  hideSource,
+  tier,
+  ...props
+}, ref) => {
+  const XIcon = useIcon("x");
+  const shape = useShape();
+  const substrate = useSurface();
+  const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8);
+  const compact = useSize().variant === "compact";
+  const { open, origin } = useDialogState();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
+    container: container ?? undefined,
+    children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Backdrop, {
+        render: /* @__PURE__ */ jsx(motion.div, {
+          style: { opacity: morph.progress }
+        }),
+        className: cn(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
+      }),
+      /* @__PURE__ */ jsx(DialogPrimitive.Popup, {
+        ref: morph.popupRef,
+        ...props,
+        className: cn(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
+        children: /* @__PURE__ */ jsx(SurfaceProvider, {
+          value: dialogLevel,
+          children: /* @__PURE__ */ jsxs(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[dialogLevel],
+            shadow: SURFACE_SHADOW[dialogLevel],
+            radius: shape.container,
+            className: cn("p-6", className),
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+                render: /* @__PURE__ */ jsxs(Button, {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "absolute right-3 top-3",
+                  children: [
+                    /* @__PURE__ */ jsx(XIcon, {}),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "sr-only",
+                      children: "Close"
+                    })
+                  ]
+                })
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+});
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn("flex flex-col gap-1.5 mb-4", className),
+    ...props
+  });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn("flex justify-end gap-2 mt-6", className),
+    ...props
+  });
+}
+var DialogTitle = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSizeVariant() === "compact";
+  return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+    ref,
+    className: cn(compact ? "text-title-compact" : "text-title", "weight-bold text-foreground leading-tight", className),
+    ...props
+  });
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSizeVariant() === "compact";
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+    ref,
+    className: cn(compact ? "text-body-compact" : "text-body", "text-muted-foreground", className),
+    ...props
+  });
+});
+DialogDescription.displayName = "DialogDescription";
+function DialogState({ open, defaultOpen = false, onOpenChange, children }) {
+  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin();
+  const id = useId();
+  const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
+  const parts = useMemo(() => ({ id, open: current }), [id, current]);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(MorphPartScope.Provider, {
+      value: parts,
+      children: children({
+        open: current,
+        onOpenChange: (next, details) => {
+          if (next)
+            capture(details);
+          setCurrent(next);
+        }
+      })
+    })
+  });
+}
+function Dialog({ children, open, defaultOpen, onOpenChange, modal }) {
+  return /* @__PURE__ */ jsx(DialogState, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+      ...root,
+      modal,
+      children
+    })
+  });
+}
+Dialog.Trigger = DialogTrigger;
+Dialog.Content = DialogContent;
+Dialog.Header = DialogHeader;
+Dialog.Footer = DialogFooter;
+Dialog.Title = DialogTitle;
+Dialog.Description = DialogDescription;
+Dialog.Close = DialogClose;
+var dialog_default = Dialog;
+
+export { useDialogState, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogState, Dialog, dialog_default };

package/dist/shared/components-6hzwfmfd.js

@@ -0,0 +1,58 @@
+import {
+  badge_default
+} from "./components-9p8s8n5q.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/craft/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pane({ verdict, note, children }) {
+  const shape = useShape();
+  return /* @__PURE__ */ jsxs("figure", {
+    className: cn("row-span-2 m-0 grid min-w-0 grid-rows-subgrid gap-0 ring-1 ring-border", shape.container),
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "flex min-h-40 items-center justify-center p-4",
+        children
+      }),
+      /* @__PURE__ */ jsxs("figcaption", {
+        className: "flex items-start gap-2 border-t border-border px-4 py-3",
+        children: [
+          /* @__PURE__ */ jsx(badge_default, {
+            variant: "dot",
+            size: "compact",
+            color: verdict === "bad" ? "red" : "green",
+            children: verdict === "bad" ? "Bad" : "Good"
+          }),
+          note && /* @__PURE__ */ jsx("span", {
+            className: "text-caption text-muted-foreground",
+            children: note
+          })
+        ]
+      })
+    ]
+  });
+}
+function Craft({ bad, good, badNote, goodNote, className }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("grid w-full gap-3 sm:grid-cols-2", className),
+    children: [
+      /* @__PURE__ */ jsx(Pane, {
+        verdict: "bad",
+        note: badNote,
+        children: bad
+      }),
+      /* @__PURE__ */ jsx(Pane, {
+        verdict: "good",
+        note: goodNote,
+        children: good
+      })
+    ]
+  });
+}
+
+export { Craft };

package/dist/shared/components-6phwsry6.js

@@ -0,0 +1,361 @@
+import {
+  ScrollColumn,
+  defaultLocale,
+  dividedColumns,
+  fieldLabel
+} from "./components-x2xyckd5.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/date-time/calendar/index.tsx
+import {
+  addDays,
+  addYears,
+  endOfYear,
+  format as format2,
+  isSameYear,
+  startOfMonth as startOfMonth2,
+  startOfWeek,
+  startOfYear
+} from "date-fns";
+import { useCallback as useCallback2, useEffect, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { DayPicker } from "react-day-picker";
+
+// components/inputs/date-time/calendar/use-month-window.ts
+import { addMonths, differenceInCalendarMonths, format, startOfMonth } from "date-fns";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+var WINDOW = 25;
+var SHIFT = 12;
+var monthKey = (date) => format(date, "yyyy-MM");
+var findMonth = (scroller, key) => scroller.querySelector(`[data-calendar-month="${key}"]`);
+function useMonthWindow(start, end, anchor) {
+  const total = differenceInCalendarMonths(end, start) + 1;
+  const count = Math.min(WINDOW, total);
+  const startTime = start.getTime();
+  const clamp = useCallback((first2) => {
+    const from = new Date(startTime);
+    const last = addMonths(from, total - count);
+    return first2 < from ? from : first2 > last ? last : startOfMonth(first2);
+  }, [startTime, total, count]);
+  const [first, setFirst] = useState(() => clamp(addMonths(startOfMonth(anchor), -Math.floor(WINDOW / 2))));
+  const [visible, setVisible] = useState([]);
+  const [current, setCurrent] = useState();
+  const scrollerRef = useRef(null);
+  const firstRef = useRef(first);
+  firstRef.current = first;
+  const pending = useRef({ day: anchor });
+  const settling = useRef(false);
+  const topMonth = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller)
+      return;
+    const top = scroller.scrollTop;
+    return [...scroller.querySelectorAll("[data-calendar-month]")].find((el) => el.offsetTop + el.offsetHeight > top);
+  }, []);
+  const moveWindow = useCallback((nextFirst, target) => {
+    const next = clamp(nextFirst);
+    if (next.getTime() === firstRef.current.getTime())
+      return;
+    const scroller = scrollerRef.current;
+    const top = topMonth();
+    pending.current = {
+      month: target,
+      keep: scroller && top ? { key: top.dataset.calendarMonth ?? "", delta: top.offsetTop - scroller.scrollTop } : undefined
+    };
+    setFirst(next);
+  }, [clamp, topMonth]);
+  const centreDay = useCallback((date) => {
+    const scroller = scrollerRef.current;
+    const day = scroller?.querySelector(`[data-day="${format(date, "yyyy-MM-dd")}"]`);
+    if (!scroller || !day)
+      return;
+    const s = scroller.getBoundingClientRect();
+    const d = day.getBoundingClientRect();
+    const scale = s.height / scroller.offsetHeight || 1;
+    scroller.scrollTop += (d.top - s.top) / scale - (scroller.clientHeight - day.offsetHeight) / 2;
+  }, []);
+  const measure = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller)
+      return;
+    const top = scroller.scrollTop;
+    const bottom = top + scroller.clientHeight;
+    const shown = [...scroller.querySelectorAll("[data-calendar-month]")].map((el) => ({
+      key: el.dataset.calendarMonth ?? "",
+      height: Math.min(bottom, el.offsetTop + el.offsetHeight) - Math.max(top, el.offsetTop)
+    })).filter((m) => m.height > 0);
+    const inView = shown.map((m) => m.key);
+    setVisible((prev) => prev.join() === inView.join() ? prev : inView);
+    setCurrent(shown.reduce((a, m) => a && a.height >= m.height ? a : m, undefined)?.key);
+    if (settling.current)
+      return;
+    const margin = scroller.clientHeight;
+    if (top < margin)
+      moveWindow(addMonths(firstRef.current, -SHIFT));
+    else if (scroller.scrollHeight - bottom < margin)
+      moveWindow(addMonths(firstRef.current, SHIFT));
+  }, [moveWindow]);
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    const p = pending.current;
+    pending.current = null;
+    if (!scroller || !p)
+      return;
+    const target = p.month && findMonth(scroller, p.month);
+    const kept = p.keep && findMonth(scroller, p.keep.key);
+    if (target)
+      scroller.scrollTop = target.offsetTop;
+    else if (kept && p.keep)
+      scroller.scrollTop = kept.offsetTop - p.keep.delta;
+    else if (p.day)
+      centreDay(p.day);
+    measure();
+  }, [first]);
+  const jumpTo = useCallback((month, behavior = "smooth") => {
+    const scroller = scrollerRef.current;
+    const key = monthKey(month);
+    const el = scroller && findMonth(scroller, key);
+    if (!scroller || !el) {
+      moveWindow(addMonths(startOfMonth(month), -Math.floor(WINDOW / 2)), key);
+      return;
+    }
+    if (behavior === "smooth") {
+      settling.current = true;
+      const done = () => {
+        settling.current = false;
+        scroller.removeEventListener("scrollend", done);
+        measure();
+      };
+      scroller.addEventListener("scrollend", done);
+      setTimeout(done, 600);
+    }
+    scroller.scrollTo({ top: el.offsetTop, behavior });
+  }, [measure, moveWindow]);
+  const recentre = useCallback((month) => moveWindow(addMonths(startOfMonth(month), -Math.floor(WINDOW / 2))), [moveWindow]);
+  return { first, count, visible, current, scrollerRef, measure, jumpTo, recentre, centreDay };
+}
+
+// components/inputs/date-time/calendar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WEEKEND = { dayOfWeek: [0, 6] };
+function pickedDate(props) {
+  if (props.mode === "single")
+    return props.selected;
+  if (props.mode === "range")
+    return props.selected?.from;
+  return;
+}
+function Month({ calendarMonth, displayIndex: _, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    "data-calendar-month": monthKey(calendarMonth.date)
+  });
+}
+function Day({ day: _, modifiers, className, ...props }) {
+  const start = modifiers.range_start && !modifiers.range_end;
+  const end = modifiers.range_end && !modifiers.range_start;
+  return /* @__PURE__ */ jsx("td", {
+    ...props,
+    className: cn("relative p-0", !modifiers.hidden && modifiers.range_middle && "bg-active", !modifiers.hidden && modifiers.preview && !modifiers.selected && "bg-hover", (start || end) && "before:absolute before:inset-y-0 before:bg-active", start && "before:start-1/2 before:end-0", end && "before:start-0 before:end-1/2", className)
+  });
+}
+function DayButton({ day: _, modifiers, className, ...props }) {
+  const ref = useRef2(null);
+  useEffect(() => {
+    if (modifiers.focused)
+      ref.current?.focus();
+  }, [modifiers.focused]);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const pill = modifiers.selected && !modifiers.range_middle;
+  return /* @__PURE__ */ jsx("button", {
+    ref,
+    ...props,
+    className: cn("relative flex items-center justify-center tabular-nums outline-none cursor-pointer", "transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:cursor-default", sizeClasses.variant === "compact" ? "size-7" : "size-9", sizeClasses.text, shape.item, modifiers.weekend && "text-muted-foreground", modifiers.today && "after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full after:bg-current", pill ? "bg-foreground text-background weight-semibold hover:bg-foreground/90" : "enabled:hover:bg-hover", className)
+  });
+}
+function Calendar({
+  locale = defaultLocale,
+  size,
+  columnsSide = "end",
+  extraColumns,
+  extraColumnsSide = "end",
+  className,
+  ...props
+}) {
+  const sizeClasses = useSize(size);
+  const picked = pickedDate(props);
+  const today = useMemo(() => new Date, []);
+  const start = startOfMonth2(props.startMonth ?? startOfYear(addYears(today, -100)));
+  const end = startOfMonth2(props.endMonth ?? endOfYear(addYears(today, 50)));
+  const anchor = picked ?? props.month ?? props.defaultMonth ?? today;
+  const scroll = useMonthWindow(start, end, anchor);
+  const { jumpTo, visible } = scroll;
+  const currentKey = scroll.current ?? monthKey(anchor);
+  const yearInView = Number(currentKey.slice(0, 4));
+  const monthInView = Number(currentKey.slice(5, 7)) - 1;
+  const pickedTime = picked?.getTime();
+  const pickedRef = useRef2(pickedTime);
+  useEffect(() => {
+    if (pickedTime === pickedRef.current)
+      return;
+    pickedRef.current = pickedTime;
+    if (pickedTime !== undefined && !visible.includes(monthKey(new Date(pickedTime))))
+      jumpTo(new Date(pickedTime));
+  }, [pickedTime, jumpTo, visible]);
+  const rootRef = useRef2(null);
+  const [wide, setWide] = useState2(true);
+  const needed = useRef2(0);
+  useLayoutEffect2(() => {
+    const root = rootRef.current;
+    if (!root)
+      return;
+    const check = () => {
+      if (wide && root.scrollWidth > root.clientWidth + 1) {
+        needed.current = root.scrollWidth;
+        setWide(false);
+      } else if (!wide && root.clientWidth >= needed.current)
+        setWide(true);
+    };
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [wide]);
+  const turned = useRef2(wide);
+  useLayoutEffect2(() => {
+    if (turned.current === wide)
+      return;
+    turned.current = wide;
+    scroll.centreDay(picked ?? today);
+  });
+  const [hovered, setHovered] = useState2();
+  const from = props.mode === "range" ? props.selected?.from : undefined;
+  const previewing = from && props.mode === "range" && !props.selected?.to && hovered;
+  const preview = previewing ? hovered < from ? { from: hovered, to: from } : { from, to: hovered } : false;
+  const weekStartsOn = props.weekStartsOn ?? locale.options?.weekStartsOn ?? 0;
+  const weekdays = useMemo(() => {
+    const first = startOfWeek(today, { weekStartsOn });
+    return Array.from({ length: 7 }, (_, i) => addDays(first, i));
+  }, [today, weekStartsOn]);
+  const months = useMemo(() => Array.from({ length: 12 }, (_, m) => ({
+    value: m,
+    label: format2(new Date(2000, m, 1), "LLL", { locale }),
+    disabled: new Date(yearInView, m, 1) < start || new Date(yearInView, m, 1) > end
+  })), [locale, yearInView, start.getTime(), end.getTime()]);
+  const years = useMemo(() => Array.from({ length: end.getFullYear() - start.getFullYear() + 1 }, (_, i) => {
+    const year = start.getFullYear() + i;
+    return { value: year, label: String(year) };
+  }), [start.getFullYear(), end.getFullYear()]);
+  const jumpToYear = useCallback2((year) => jumpTo(new Date(year, monthInView, 1)), [jumpTo, monthInView]);
+  const orientation = wide ? "vertical" : "horizontal";
+  const column = wide ? "w-16 shrink-0" : "w-full";
+  const monthColumn = /* @__PURE__ */ jsx(ScrollColumn, {
+    label: fieldLabel(locale, "month"),
+    options: months,
+    value: picked && isSameYear(picked, new Date(yearInView, 0, 1)) ? picked.getMonth() : null,
+    follow: monthInView,
+    inView: (m) => m === monthInView,
+    onValueChange: (m) => jumpTo(new Date(yearInView, m, 1)),
+    orientation,
+    className: column
+  }, "month");
+  const yearColumn = /* @__PURE__ */ jsx(ScrollColumn, {
+    label: fieldLabel(locale, "year"),
+    options: years,
+    value: picked?.getFullYear() ?? null,
+    follow: yearInView,
+    inView: (y) => y === yearInView,
+    onValueChange: jumpToYear,
+    orientation,
+    className: column
+  }, "year");
+  const extras = extraColumns?.(orientation);
+  const before = [extraColumnsSide === "start" && extras, columnsSide === "start" && [yearColumn, monthColumn]];
+  const after = [columnsSide === "end" && [monthColumn, yearColumn], extraColumnsSide === "end" && extras];
+  const side = (place) => wide ? cn(dividedColumns, "h-full shrink-0 border-border", place === "start" ? "border-e" : "border-s") : "order-first flex w-full flex-col [&>*]:border-b [&>*]:border-border";
+  const grid = /* @__PURE__ */ jsxs("div", {
+    className: cn("flex min-h-0 shrink-0 flex-col", wide ? "h-full" : "flex-1 self-center"),
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        "aria-hidden": true,
+        className: "flex border-b border-border px-1 pb-1",
+        children: weekdays.map((day) => /* @__PURE__ */ jsx("span", {
+          className: cn("flex items-center justify-center text-caption", sizeClasses.variant === "compact" ? "w-7" : "w-9", "text-muted-foreground"),
+          children: format2(day, "EEEEEE", { locale })
+        }, day.getDay()))
+      }),
+      /* @__PURE__ */ jsx("div", {
+        ref: scroll.scrollerRef,
+        onScroll: scroll.measure,
+        className: "relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-1 scrollbar-hide scroll-fade [--scroll-fade-size:16px] [overflow-anchor:none]",
+        children: /* @__PURE__ */ jsx(DayPicker, {
+          ...props,
+          locale,
+          month: scroll.first,
+          numberOfMonths: scroll.count,
+          startMonth: start,
+          endMonth: end,
+          onMonthChange: scroll.recentre,
+          hideNavigation: true,
+          hideWeekdays: true,
+          showOutsideDays: false,
+          modifiers: { weekend: WEEKEND, preview, ...props.modifiers },
+          onDayMouseEnter: (date, modifiers, e) => {
+            setHovered(date);
+            props.onDayMouseEnter?.(date, modifiers, e);
+          },
+          onDayMouseLeave: (date, modifiers, e) => {
+            setHovered(undefined);
+            props.onDayMouseLeave?.(date, modifiers, e);
+          },
+          formatters: {
+            formatCaption: (month) => format2(month, isSameYear(month, today) ? "LLLL" : "LLLL y", { locale }),
+            ...props.formatters
+          },
+          components: { Month, Day, DayButton, ...props.components },
+          classNames: {
+            months: "flex flex-col",
+            month: "pb-2",
+            month_caption: cn("px-2 pt-2 pb-1 text-subtitle weight-semibold", sizeClasses.variant === "compact" && "text-subtitle-compact"),
+            month_grid: "border-collapse",
+            ...props.classNames
+          }
+        })
+      })
+    ]
+  });
+  const content = /* @__PURE__ */ jsxs("div", {
+    ref: rootRef,
+    dir: props.dir,
+    className: cn("flex w-max max-w-full overflow-hidden", wide ? "h-80 flex-row" : "h-[min(30rem,65dvh)] flex-col", className),
+    children: [
+      before.some(Boolean) ? /* @__PURE__ */ jsx("div", {
+        className: side("start"),
+        children: before
+      }) : null,
+      grid,
+      after.some(Boolean) ? /* @__PURE__ */ jsx("div", {
+        className: side("end"),
+        children: after
+      }) : null
+    ]
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: content
+  }) : content;
+}
+var calendar_default = Calendar;
+
+export { Calendar, calendar_default };