@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-1rfwbyyc.js

@@ -0,0 +1,361 @@
+import {
+  defaultLocale,
+  fieldLabel,
+  dividedColumns,
+  ScrollColumn
+} from "./components-9jvzzvt1.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.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((first) => {
+    const from = new Date(startTime);
+    const last = addMonths(from, total - count);
+    return first < from ? from : first > last ? last : startOfMonth(first);
+  }, [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: cn2("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 = useSize2();
+  const pill = modifiers.selected && !modifiers.range_middle;
+  return /* @__PURE__ */ jsx("button", {
+    ref,
+    ...props,
+    className: cn2("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 Calendar2({
+  locale = defaultLocale,
+  size,
+  columnsSide = "end",
+  extraColumns,
+  extraColumnsSide = "end",
+  className,
+  ...props
+}) {
+  const sizeClasses = useSize2(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 ? cn2(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: cn2("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: cn2("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: cn2("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: cn2("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(SizeProvider2, {
+    size,
+    children: content
+  }) : content;
+}
+var calendar_default = Calendar2;
+
+export { Calendar2, calendar_default };

package/dist/shared/components-1v7rxytx.js

@@ -0,0 +1,30 @@
+// lib/springs.ts
+var spring2 = {
+  fast: {
+    type: "spring",
+    duration: 0.08,
+    bounce: 0,
+    exit: { duration: 0.06 }
+  },
+  moderate: {
+    type: "spring",
+    duration: 0.16,
+    bounce: 0,
+    exit: { duration: 0.12 }
+  },
+  slow: {
+    type: "spring",
+    duration: 0.24,
+    bounce: 0.12,
+    exit: { duration: 0.16 }
+  },
+  goo: {
+    type: "spring",
+    visualDuration: 0.25,
+    bounce: 0.15,
+    exit: { type: "spring", visualDuration: 0.2, bounce: 0 }
+  }
+};
+var exitFallbackMs2 = (tier) => Math.round(("duration" in tier.exit ? tier.exit.duration : tier.exit.visualDuration) * 1000) + 100;
+
+export { spring2, exitFallbackMs2 };

package/dist/shared/components-1xekx2hx.js

@@ -0,0 +1,215 @@
+import {
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  shapeMap
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2
+} from "./components-59efxjd9.js";
+import {
+  ScrollArea2
+} from "./components-hawvy2qz.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  DropdownContext,
+  MenuItem2,
+  DropdownLabel2,
+  DropdownSeparator2
+} from "./components-nh8tma1n.js";
+import {
+  popupScrollAreaClass,
+  popupViewportClass,
+  isDisabledRow
+} from "./components-vynjtrk6.js";
+
+// components/overlays/context-menu/index.tsx
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var shape = shapeMap.rounded;
+var ContextMenuContext = createContext({ open: false, origin: { current: {} } });
+var ShortcutContext = createContext(undefined);
+function RowShortcut() {
+  const shortcut = useContext(ShortcutContext);
+  const compact = useSize2().variant === "compact";
+  if (!shortcut)
+    return null;
+  return /* @__PURE__ */ jsx("kbd", {
+    className: cn2("shrink-0 pl-4 font-sans text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
+    children: shortcut
+  });
+}
+function renderMenuItem({
+  radio,
+  checkbox,
+  checked,
+  disabled,
+  label,
+  closeOnClick,
+  onClick,
+  element,
+  children
+}) {
+  return radio || checkbox ? /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+    checked,
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    render: element,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(RowShortcut, {})
+    ]
+  }) : /* @__PURE__ */ jsxs(ContextMenuPrimitive.Item, {
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    render: element,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(RowShortcut, {})
+    ]
+  });
+}
+var ContextMenuItem2 = forwardRef(({ shortcut, ...props }, ref) => /* @__PURE__ */ jsx(ShortcutContext.Provider, {
+  value: shortcut,
+  children: /* @__PURE__ */ jsx(MenuItem2, {
+    ref,
+    ...props
+  })
+}));
+ContextMenuItem2.displayName = "ContextMenuItem";
+var ContextMenuContent2 = forwardRef(({ from = "pointer", effect, hideSource, tier = "moderate", container, className, children }, ref) => {
+  const { open, origin } = useContext(ContextMenuContext);
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const level = Math.min(useSurface2() + 2, 8);
+  const containerRef = useRef(null);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
+  const { activeIndex, setActiveIndex, handlers, registerItem, remeasure } = hover;
+  useEffect(() => {
+    if (open)
+      remeasure();
+    else
+      setActiveIndex(null);
+  }, [open, remeasure, setActiveIndex]);
+  const rows = useMemo(() => ({ registerItem, activeIndex, inMenu: true, renderMenuItem }), [registerItem, activeIndex]);
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, {
+    container: container ?? undefined,
+    children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Positioner, {
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Popup, {
+        ref: morph.popupRef,
+        onMouseEnter: handlers.onMouseEnter,
+        onMouseMove: handlers.onMouseMove,
+        onMouseLeave: handlers.onMouseLeave,
+        onClick: handlers.onClick,
+        onFocus: (e) => {
+          const index = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+          if (index != null)
+            setActiveIndex(Number(index));
+        },
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            setActiveIndex(null);
+        },
+        className: "relative select-none outline-none",
+        children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+          value: level,
+          children: /* @__PURE__ */ jsx(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[3],
+            radius: shape.container,
+            className: cn2("flex w-56 max-h-[min(480px,var(--available-height))] flex-col overflow-hidden", shape.container, className),
+            children: /* @__PURE__ */ jsx(ScrollArea2, {
+              className: popupScrollAreaClass,
+              viewportClassName: cn2(popupViewportClass, "scroll-fade"),
+              children: /* @__PURE__ */ jsxs("div", {
+                ref: containerRef,
+                className: "relative flex flex-col p-1",
+                children: [
+                  /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+                    hover,
+                    hidden: !open,
+                    className: shape.bg
+                  }),
+                  /* @__PURE__ */ jsx(DropdownContext.Provider, {
+                    value: rows,
+                    children
+                  })
+                ]
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+ContextMenuContent2.displayName = "ContextMenuContent";
+function ContextMenu2({ open, defaultOpen = false, onOpenChange, disabled = false, size, children }) {
+  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin();
+  const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
+  const root = /* @__PURE__ */ jsx(ContextMenuContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Root, {
+      open: current,
+      disabled,
+      onOpenChange: (next, details) => {
+        if (next)
+          capture(details);
+        setCurrent(next);
+      },
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+}
+ContextMenu2.Trigger = ContextMenuPrimitive.Trigger;
+ContextMenu2.Content = ContextMenuContent2;
+ContextMenu2.Item = ContextMenuItem2;
+ContextMenu2.Label = DropdownLabel2;
+ContextMenu2.Separator = DropdownSeparator2;
+var context_menu_default = ContextMenu2;
+
+export { ContextMenuItem2, ContextMenuContent2, ContextMenu2, context_menu_default };

package/dist/shared/components-39jq9va1.js

@@ -0,0 +1,86 @@
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  button_default
+} from "./components-b2wyq2cq.js";
+import {
+  MorphPart2,
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  opensInPlace,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+
+// primitives/morph/index.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Morph2({
+  from = "trigger",
+  effect = "goo",
+  tier = "slow",
+  hideSource = false,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  label = "Open",
+  className,
+  children
+}) {
+  const [shown, setShown] = useControllableState(open, defaultOpen, onOpenChange);
+  const [mounted, setMounted] = useState(shown);
+  if (shown && !mounted)
+    setMounted(true);
+  const { origin, capture } = useMorphOrigin();
+  const morph = useMorph(shown, origin, { from, effect, tier, hideSource }, () => setMounted(false));
+  const shape = useShape();
+  const level = Math.min(useSurface2() + 2, 8);
+  const inPlace = opensInPlace({ effect, hideSource });
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn2("relative inline-flex flex-col items-center", className),
+    children: [
+      /* @__PURE__ */ jsx(button_default, {
+        variant: "secondary",
+        "aria-expanded": shown,
+        onClick: (event) => {
+          if (!shown)
+            capture({ trigger: event.currentTarget, event: event.nativeEvent });
+          setShown(!shown);
+        },
+        children: shown ? "Close" : label
+      }),
+      mounted && /* @__PURE__ */ jsx("div", {
+        ref: morph.popupRef,
+        className: inPlace ? "absolute top-0 left-0 z-10" : "absolute top-full left-1/2 z-10 mt-3 -translate-x-1/2",
+        onClick: inPlace ? () => setShown(false) : undefined,
+        children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+          value: level,
+          children: /* @__PURE__ */ jsx(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[level],
+            radius: shape.container,
+            className: "w-56 p-4",
+            children
+          })
+        })
+      })
+    ]
+  });
+}
+Morph2.Part = MorphPart2;
+export { Morph2 };