@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-tad5h7ta.js

@@ -0,0 +1,346 @@
+import {
+  slotRender
+} from "./components-5vxtcp88.js";
+import {
+  button_default
+} from "./components-5pkcfprd.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  GooFilter
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  GOO_BLUR_RATIO,
+  holdExit
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  sizeMap
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/toast/index.tsx
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { ArrowRight, Check, CircleAlert, Info, LoaderCircle, X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICONS = {
+  success: Check,
+  loading: LoaderCircle,
+  error: X,
+  warning: CircleAlert,
+  info: Info,
+  action: ArrowRight
+};
+var TONES = {
+  success: "text-status-success bg-status-success/16",
+  loading: "text-status-loading bg-status-loading/16",
+  error: "text-status-error bg-status-error/16",
+  warning: "text-status-warning bg-status-warning/16",
+  info: "text-status-info bg-status-info/16",
+  action: "text-status-action bg-status-action/16"
+};
+var VIEWPORT = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 flex-col-reverse items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
+  "bottom-right": "bottom-4 right-4 flex-col-reverse items-end"
+};
+var PILL = sizeMap.default.controlHeight;
+var BLUR = PILL / 2 * GOO_BLUR_RATIO;
+var SNAP = { duration: 0 };
+var AUTO_EXPAND_MS = 150;
+var AUTO_COLLAPSE_BEFORE_MS = 2000;
+var ToastSettings = createContext({
+  position: "top-right",
+  timeout: 6000
+});
+function useToast() {
+  const manager = ToastPrimitive.useToastManager();
+  return useMemo(() => {
+    const options = ({ action, ...rest }, type) => ({
+      ...rest,
+      type,
+      actionProps: action && { children: action.label, onClick: action.onClick }
+    });
+    const show = (o) => manager.add(options(o, o.type ?? "info"));
+    return {
+      show,
+      success: (o) => show({ ...o, type: "success" }),
+      error: (o) => show({ ...o, type: "error" }),
+      warning: (o) => show({ ...o, type: "warning" }),
+      info: (o) => show({ ...o, type: "info" }),
+      promise: (promise, o) => manager.promise(promise, {
+        loading: options(o.loading, "loading"),
+        success: options(o.success, "success"),
+        error: options(o.error, "error")
+      }),
+      close: manager.close
+    };
+  }, [manager]);
+}
+function Shape({ box, className, shapeRef }) {
+  const reduced = useReduceMotion();
+  return /* @__PURE__ */ jsx(motion.div, {
+    ref: shapeRef,
+    "aria-hidden": true,
+    className: cn("pointer-events-none absolute top-0 left-0", className),
+    initial: false,
+    animate: { ...box },
+    transition: reduced ? SNAP : spring.slow
+  });
+}
+function ToastItem({ toast }) {
+  const { position, timeout } = useContext(ToastSettings);
+  const shape = useShape();
+  const level = Math.min(useSurface() + 2, 8);
+  const gooId = `toast-goo-${useId().replace(/:/g, "")}`;
+  const type = toast.type ?? "info";
+  const Icon = ICONS[type];
+  const top = position.startsWith("top");
+  const ending = toast.transitionStatus === "ending";
+  const hasBody = Boolean(toast.description || toast.actionProps);
+  const [hovered, setHovered] = useState(false);
+  const [auto, setAuto] = useState(false);
+  const expanded = hasBody && type !== "loading" && !ending && (hovered || auto);
+  const root = useRef(null);
+  const header = useRef(null);
+  const body = useRef(null);
+  const bodyShape = useRef(null);
+  const [size, setSize] = useState({ width: 0, pill: PILL, body: 0, radius: 0 });
+  useEffect(() => {
+    if (!hasBody || type === "loading")
+      return;
+    const life = toast.timeout ?? timeout;
+    const open = setTimeout(() => setAuto(true), AUTO_EXPAND_MS);
+    const close = life > 0 ? setTimeout(() => setAuto(false), Math.max(AUTO_EXPAND_MS, life - AUTO_COLLAPSE_BEFORE_MS)) : undefined;
+    return () => {
+      clearTimeout(open);
+      clearTimeout(close);
+    };
+  }, [hasBody, type, toast.timeout, timeout]);
+  useLayoutEffect(() => {
+    const measure = () => setSize({
+      width: root.current?.offsetWidth ?? 0,
+      pill: Math.max(PILL, header.current?.offsetWidth ?? 0),
+      body: body.current?.offsetHeight ?? 0,
+      radius: bodyShape.current ? Number.parseFloat(getComputedStyle(bodyShape.current).borderTopLeftRadius) || 0 : 0
+    });
+    const observer = new ResizeObserver(measure);
+    for (const el of [header.current, body.current])
+      if (el)
+        observer.observe(el);
+    measure();
+    return () => observer.disconnect();
+  }, [hasBody]);
+  useLayoutEffect(() => {
+    if (!ending || !root.current)
+      return;
+    const hold = holdExit(root.current, "moderate");
+    return () => hold.cancel();
+  }, [ending]);
+  const bodyHeight = expanded ? size.body : 0;
+  const height = PILL + bodyHeight;
+  const pillX = position.endsWith("left") ? 0 : position.endsWith("right") ? size.width - size.pill : (size.width - size.pill) / 2;
+  const pillHeight = PILL + Math.min(bodyHeight, size.radius);
+  const pill = { x: pillX, y: top ? 0 : height - pillHeight, width: size.pill, height: pillHeight };
+  const bodyBox = { x: 0, y: top ? PILL : 0, width: size.width, height: bodyHeight };
+  const reduced = useReduceMotion();
+  const away = reduced ? { opacity: 0 } : { opacity: 0, y: top ? -6 : 6, scale: 0.95 };
+  const move = reduced ? SNAP : spring.slow;
+  return /* @__PURE__ */ jsxs(ToastPrimitive.Root, {
+    ref: root,
+    toast,
+    swipeDirection: [top ? "up" : "down", position.endsWith("left") ? "left" : "right"],
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    render: /* @__PURE__ */ jsx(motion.div, {
+      initial: { ...away, height: PILL },
+      animate: ending ? { ...away, height } : { opacity: 1, y: 0, scale: 1, height },
+      transition: ending ? spring.moderate.exit : { ...spring.moderate, height: move }
+    }),
+    className: "relative w-[min(22rem,calc(100vw-2rem))] select-none outline-none [translate:var(--toast-swipe-movement-x)_var(--toast-swipe-movement-y)]",
+    children: [
+      /* @__PURE__ */ jsx(GooFilter, {
+        id: gooId,
+        blur: BLUR
+      }),
+      /* @__PURE__ */ jsx(Shape, {
+        box: pill,
+        className: cn("rounded-full", SURFACE_SHADOW[3])
+      }),
+      hasBody && /* @__PURE__ */ jsx(Shape, {
+        box: bodyBox,
+        className: cn(shape.container, SURFACE_SHADOW[3])
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0",
+        style: { filter: `url(#${gooId})` },
+        children: [
+          /* @__PURE__ */ jsx(Shape, {
+            box: pill,
+            className: cn("rounded-full", SURFACE_BG[level])
+          }),
+          hasBody && /* @__PURE__ */ jsx(Shape, {
+            box: bodyBox,
+            shapeRef: bodyShape,
+            className: cn(shape.container, SURFACE_BG[level])
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs(SurfaceProvider, {
+        value: level,
+        children: [
+          /* @__PURE__ */ jsx(motion.div, {
+            ref: header,
+            className: "absolute top-0 left-0 flex h-9 w-max items-center py-1.5 pr-4 pl-1.5",
+            initial: false,
+            animate: { x: pillX, y: top ? 0 : height - PILL },
+            transition: move,
+            children: /* @__PURE__ */ jsx(ToastPrimitive.Title, {
+              className: "relative inline-flex items-center whitespace-nowrap",
+              children: /* @__PURE__ */ jsx(AnimatePresence, {
+                mode: "popLayout",
+                initial: false,
+                children: /* @__PURE__ */ jsxs(motion.span, {
+                  className: "inline-flex items-center gap-2",
+                  initial: { opacity: 0, filter: "blur(4px)" },
+                  animate: { opacity: 1, filter: "blur(0px)" },
+                  exit: { opacity: 0, filter: "blur(4px)", transition: spring.moderate.exit },
+                  transition: spring.moderate,
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: cn("flex size-6 items-center justify-center rounded-full", TONES[type]),
+                      children: /* @__PURE__ */ jsx(Icon, {
+                        size: 14,
+                        strokeWidth: 2.5,
+                        className: type === "loading" ? "animate-spin" : undefined
+                      })
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "text-body weight-medium text-foreground",
+                      children: toast.title
+                    })
+                  ]
+                }, `${type}-${toast.title}`)
+              })
+            })
+          }),
+          hasBody && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute top-0 left-0 w-full overflow-hidden",
+            initial: false,
+            animate: { y: bodyBox.y, height: bodyHeight, opacity: expanded ? 1 : 0 },
+            transition: { ...move, opacity: expanded ? spring.slow : spring.slow.exit },
+            children: /* @__PURE__ */ jsxs("div", {
+              ref: body,
+              className: cn("flex flex-col items-start gap-3 p-4", top ? "pt-6" : "pb-6"),
+              children: [
+                /* @__PURE__ */ jsx(ToastPrimitive.Description, {
+                  className: "text-caption text-muted-foreground"
+                }),
+                toast.actionProps && /* @__PURE__ */ jsx(ToastPrimitive.Action, {
+                  render: /* @__PURE__ */ jsx(button_default, {
+                    size: "compact",
+                    variant: "secondary"
+                  })
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager();
+  return toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
+    toast
+  }, toast.id));
+}
+var ToastTrigger = forwardRef(({
+  title,
+  description,
+  type,
+  timeout,
+  action,
+  promise,
+  success,
+  error,
+  render,
+  asChild,
+  children,
+  onClick,
+  ...props
+}, ref) => {
+  const toast = useToast();
+  const el = slotRender(render, asChild, children);
+  const press = (event) => {
+    onClick?.(event);
+    if (promise) {
+      toast.promise(promise(), { loading: { title, description }, success: success ?? {}, error: error ?? {} }).catch(() => {});
+      return;
+    }
+    toast.show({ title, description, type, timeout, action });
+  };
+  return el ? cloneElement(el, { ...props, ref, onClick: press }) : /* @__PURE__ */ jsx("button", {
+    ref,
+    type: "button",
+    ...props,
+    onClick: press,
+    children
+  });
+});
+ToastTrigger.displayName = "ToastTrigger";
+function Toast({ position = "top-right", limit = 3, timeout = 6000, children }) {
+  const settings = useMemo(() => ({ position, timeout }), [position, timeout]);
+  return /* @__PURE__ */ jsx(ToastPrimitive.Provider, {
+    limit,
+    timeout,
+    children: /* @__PURE__ */ jsxs(ToastSettings.Provider, {
+      value: settings,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ToastPrimitive.Portal, {
+          children: /* @__PURE__ */ jsx(ToastPrimitive.Viewport, {
+            className: cn("fixed z-[60] flex flex-col gap-2 outline-none", VIEWPORT[position]),
+            children: /* @__PURE__ */ jsx(ToastList, {})
+          })
+        })
+      ]
+    })
+  });
+}
+Toast.Trigger = ToastTrigger;
+var toast_default = Toast;
+
+export { useToast, ToastTrigger, Toast, toast_default };

package/dist/shared/components-taxmgbnh.js

@@ -0,0 +1,120 @@
+import {
+  pad
+} from "./components-r4jt6hgd.js";
+import {
+  PickerInput,
+  PickerShell
+} from "./components-hzfp4tjb.js";
+import {
+  ScrollColumn,
+  defaultLocale,
+  dividedColumns,
+  fieldLabel
+} from "./components-x2xyckd5.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/date-time/duration-picker/index.tsx
+import { formatDuration } from "date-fns";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TYPED = /^\s*(\d{1,3})(?::(\d{1,2}))?\s*$/;
+function DurationPicker({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  maxHours = 99,
+  minuteStep = 1,
+  locale = defaultLocale,
+  placeholder,
+  disabled,
+  invalid,
+  size,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  id,
+  from,
+  effect,
+  hideSource,
+  tier,
+  className
+}) {
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const input = useRef(null);
+  const hours = value?.hours ?? 0;
+  const minutes = value?.minutes ?? 0;
+  const display = value ? hours || minutes ? formatDuration({ hours, minutes }, { locale, format: ["hours", "minutes"] }) : formatDuration({ minutes: 0 }, { locale, format: ["minutes"], zero: true }) : "";
+  const readDuration = (text) => {
+    if (!text.trim()) {
+      setValue(null);
+      return true;
+    }
+    const match = TYPED.exec(text);
+    const h = Number(match?.[1]);
+    const m = Number(match?.[2] ?? 0);
+    if (!match || h > maxHours || m > 59)
+      return false;
+    setValue({ hours: h, minutes: m });
+    return true;
+  };
+  const hourOptions = useMemo(() => Array.from({ length: maxHours + 1 }, (_, h) => ({ value: h, label: String(h) })), [maxHours]);
+  const minuteOptions = useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({
+    value: i * minuteStep,
+    label: pad(i * minuteStep)
+  })), [minuteStep]);
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled,
+    icon: "clock",
+    display,
+    placeholder,
+    header: /* @__PURE__ */ jsx(PickerInput, {
+      ref: input,
+      "aria-label": placeholder ?? "Duration",
+      placeholder: "0:00",
+      formatted: value ? `${hours}:${pad(minutes)}` : "",
+      onText: readDuration,
+      onEnter: () => setOpen(false),
+      className: "flex-1"
+    }),
+    initialFocus: input,
+    popupClassName: "w-[max(var(--anchor-width,0px),14rem)]",
+    id,
+    from,
+    effect,
+    hideSource,
+    tier,
+    className,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn(dividedColumns, "h-56"),
+      children: [
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "hour"),
+          options: hourOptions,
+          value: value ? hours : null,
+          onValueChange: (h) => setValue({ hours: h, minutes }),
+          className: "min-w-0 flex-1"
+        }),
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "minute"),
+          options: minuteOptions,
+          value: value ? minutes : null,
+          onValueChange: (m) => setValue({ hours, minutes: m }),
+          className: "min-w-0 flex-1"
+        })
+      ]
+    })
+  });
+}
+var duration_picker_default = DurationPicker;
+
+export { DurationPicker, duration_picker_default };

package/dist/shared/components-tm88ghva.js

@@ -0,0 +1,215 @@
+import {
+  DropdownContext,
+  DropdownLabel,
+  DropdownSeparator,
+  MenuItem
+} from "./components-40j34hdb.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  isDisabledRow,
+  popupScrollAreaClass,
+  popupViewportClass
+} from "./components-jw16snbn.js";
+import {
+  ScrollArea
+} from "./components-ed7cmssr.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover
+} from "./components-e46kf6cp.js";
+import {
+  shapeMap
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.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 = useSize().variant === "compact";
+  if (!shortcut)
+    return null;
+  return /* @__PURE__ */ jsx("kbd", {
+    className: cn("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 ContextMenuItem = forwardRef(({ shortcut, ...props }, ref) => /* @__PURE__ */ jsx(ShortcutContext.Provider, {
+  value: shortcut,
+  children: /* @__PURE__ */ jsx(MenuItem, {
+    ref,
+    ...props
+  })
+}));
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuContent = 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(useSurface() + 2, 8);
+  const containerRef = useRef(null);
+  const hover = useFluidHover(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(SurfaceProvider, {
+          value: level,
+          children: /* @__PURE__ */ jsx(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[3],
+            radius: shape.container,
+            className: cn("flex w-56 max-h-[min(480px,var(--available-height))] flex-col overflow-hidden", shape.container, className),
+            children: /* @__PURE__ */ jsx(ScrollArea, {
+              className: popupScrollAreaClass,
+              viewportClassName: cn(popupViewportClass, "scroll-fade"),
+              children: /* @__PURE__ */ jsxs("div", {
+                ref: containerRef,
+                className: "relative flex flex-col p-1",
+                children: [
+                  /* @__PURE__ */ jsx(FluidHoverHighlight, {
+                    hover,
+                    hidden: !open,
+                    className: shape.bg
+                  }),
+                  /* @__PURE__ */ jsx(DropdownContext.Provider, {
+                    value: rows,
+                    children
+                  })
+                ]
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+function ContextMenu({ 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(SizeProvider, {
+    size,
+    children: root
+  }) : root;
+}
+ContextMenu.Trigger = ContextMenuPrimitive.Trigger;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Item = ContextMenuItem;
+ContextMenu.Label = DropdownLabel;
+ContextMenu.Separator = DropdownSeparator;
+var context_menu_default = ContextMenu;
+
+export { ContextMenuItem, ContextMenuContent, ContextMenu, context_menu_default };