@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/{components-8snj490h.js → components-wwd363me.js}

@@ -1,35 +1,36 @@
+"use client";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  GooIndicator
-} from "./components-chacnk61.js";
+  GooIndicator2
+} from "./components-pw06rbxq.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
 import {
-  IndexedRows,
-  useRowIndex
-} from "./components-ta7shw28.js";
+  IndexedRows2,
+  useRowIndex2
+} from "./components-r8eqs7gz.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-dcc02hs2.js";
 
 // components/inputs/switch/index.tsx
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
@@ -75,12 +76,15 @@ var Switch2 = forwardRef(({
   onToggle,
   onCheckedChange,
   disabled = false,
+  name,
+  value,
+  required = false,
   thumbTransition,
   size,
   className,
   ...props
 }, ref) => {
-  const [isChecked, setChecked] = useControllableState(checked, defaultChecked, onCheckedChange);
+  const [isChecked, setChecked] = useControllableState2(checked, defaultChecked, onCheckedChange);
   const toggle = useCallback(() => {
     setChecked((prev) => !prev);
     onToggle?.();
@@ -88,7 +92,7 @@ var Switch2 = forwardRef(({
   const labelId = useId();
   const descriptionId = useId();
   const group = useContext(SwitchGroupContext);
-  const index = useRowIndex();
+  const index = useRowIndex2();
   const rowRef = useRef(null);
   useRegisterFluidHoverItem2(disabled ? undefined : group?.registerItem, index, rowRef);
   const end = trackSide === "end" || !!group;
@@ -174,6 +178,53 @@ var Switch2 = forwardRef(({
     }
     pointerStart.current = null;
   }, [setDragX]);
+  const trackClass = cn2("relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent");
+  const thumbElement = /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+    className: "pointer-events-none absolute inset-0",
+    children: /* @__PURE__ */ jsx(GooIndicator2, {
+      rect: thumb,
+      className: "rounded-full bg-thumb",
+      shadow: "shadow-thumb",
+      transition: dragX === null ? thumbTransition ?? spring2.moderate : false
+    })
+  });
+  if (label === undefined && !group) {
+    return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
+      ref: (node) => {
+        rowRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      checked: isChecked,
+      onCheckedChange: () => {
+        if (didDrag.current)
+          return;
+        toggle();
+      },
+      disabled,
+      name,
+      value,
+      required,
+      onPointerEnter: (e) => {
+        if (e.pointerType === "mouse")
+          setHovered(true);
+      },
+      onPointerLeave: () => setHovered(false),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
+      className: cn2(trackClass, "touch-none", disabled && "opacity-50 pointer-events-none", className),
+      style: {
+        width: m.trackWidth,
+        height: m.trackHeight
+      },
+      ...props,
+      children: thumbElement
+    });
+  }
   return /* @__PURE__ */ jsxs("div", {
     ref: (node) => {
       rowRef.current = node;
@@ -201,25 +252,20 @@ var Switch2 = forwardRef(({
     children: [
       /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
         checked: isChecked,
-        "aria-labelledby": labelId,
+        "aria-labelledby": label === undefined ? undefined : labelId,
         "aria-describedby": description ? descriptionId : undefined,
         disabled,
+        name,
+        value,
+        required,
         tabIndex: 0,
-        className: cn2("relative shrink-0 rounded-full outline-none cursor-pointer", end && "order-last", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent"),
+        className: cn2(trackClass, end && "order-last"),
         style: {
           width: m.trackWidth,
           height: m.trackHeight
         },
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
-          className: "pointer-events-none absolute inset-0",
-          children: /* @__PURE__ */ jsx(GooIndicator, {
-            rect: thumb,
-            className: "rounded-full bg-thumb",
-            shadow: "shadow-thumb",
-            transition: dragX === null ? thumbTransition ?? spring2.moderate : false
-          })
-        })
+        children: thumbElement
       }),
       /* @__PURE__ */ jsxs("span", {
         className: cn2("flex min-w-0 flex-col gap-1", end && "flex-1"),
@@ -247,7 +293,7 @@ Switch2.displayName = "Switch";
 var SwitchGroup2 = forwardRef(({ children, size, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const hover = useFluidHover2(containerRef, { gapClick: false });
-  const shape = useShape();
+  const shape = useShape2();
   const count = Children.toArray(children).filter(isValidElement).length;
   const group = /* @__PURE__ */ jsx(SwitchGroupContext.Provider, {
     value: { registerItem: hover.registerItem, activeIndex: hover.activeIndex, count },
@@ -270,7 +316,7 @@ var SwitchGroup2 = forwardRef(({ children, size, className, ...props }, ref) =>
           hover,
           className: cn2("z-0", shape.container)
         }),
-        /* @__PURE__ */ jsx(IndexedRows, {
+        /* @__PURE__ */ jsx(IndexedRows2, {
           children
         })
       ]

package/dist/shared/{components-5pnw8183.js → components-xcwvgcrd.js}

@@ -1,21 +1,22 @@
+"use client";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   button_default
-} from "./components-b2wyq2cq.js";
+} from "./components-7d4r7hh1.js";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  useIcon2
+} from "./components-jqpefjsn.js";
 import {
   tooltip_default
-} from "./components-ng72k97e.js";
+} from "./components-q03cktx8.js";
 import {
   SidebarTrigger2,
   SidebarInput2,
@@ -23,13 +24,13 @@ import {
   SidebarMenuItem2,
   SidebarMenuButton2,
   sidebar_default
-} from "./components-qmmjx1qw.js";
+} from "./components-bn42vq6d.js";
 import {
   MenuItem2,
   DropdownMenu2,
   DropdownTrigger2,
   DropdownContent2
-} from "./components-a86dytt0.js";
+} from "./components-c96g82th.js";
 
 // blocks/sidebar-app/index.tsx
 import { useState } from "react";
@@ -69,7 +70,7 @@ var NAV_SECTIONS = [
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SidebarSearchField({ placeholder = "Search…", shortcut = "⌘K", ...props }) {
   const iconSize = useSize2().icon;
-  const SearchIcon = useIcon("search");
+  const SearchIcon = useIcon2("search");
   return /* @__PURE__ */ jsxs2("div", {
     className: "group/search relative",
     children: [
@@ -100,7 +101,7 @@ var SIDEBAR_MENU_POPUP = `min-w-[240px] w-[calc(var(--anchor-width)_+_10px)] ${S
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SidebarUserFooter({ name, avatar, menu, className }) {
   const iconSize = useSize2().icon;
-  const ChevronsUpDown = useIcon("chevrons-up-down");
+  const ChevronsUpDown = useIcon2("chevrons-up-down");
   return /* @__PURE__ */ jsx3(SidebarMenu2, {
     "aria-label": "User",
     className: cn2(className),
@@ -153,7 +154,7 @@ function SidebarWorkspaceHeader({
   defaultCheckedIndex
 }) {
   const iconSize = useSize2().icon;
-  const ChevronDown = useIcon("chevron-down");
+  const ChevronDown = useIcon2("chevron-down");
   const tileSlot = /* @__PURE__ */ jsx4("span", {
     "aria-hidden": true,
     className: "pointer-events-none absolute left-1.5 top-1/2 -translate-y-1/2",
@@ -210,7 +211,7 @@ function SidebarWorkspaceHeader({
   });
 }
 function WorkspaceTile({ children, className }) {
-  const shape = useShape();
+  const shape = useShape2();
   return /* @__PURE__ */ jsx4("span", {
     className: cn2("flex size-5 shrink-0 items-center justify-center bg-foreground text-micro-compact weight-semibold text-background", shape.bgRadius >= 20 ? "rounded-full" : "rounded-md", className),
     children
@@ -220,14 +221,14 @@ function WorkspaceTile({ children, className }) {
 // blocks/sidebar-app/index.tsx
 import { jsx as jsx5, jsxs as jsxs5, Fragment } from "react/jsx-runtime";
 function AppSidebar({ variant, side, className, value, onValueChange }) {
-  const PlusIcon = useIcon("plus");
-  const PencilIcon = useIcon("pencil");
-  const MoreVerticalIcon = useIcon("more-vertical");
-  const LinkIcon = useIcon("link");
-  const UserIcon = useIcon("user");
-  const SettingsIcon = useIcon("settings");
-  const ArrowLeftIcon = useIcon("arrow-left");
-  const MoonIcon = useIcon("moon");
+  const PlusIcon = useIcon2("plus");
+  const PencilIcon = useIcon2("pencil");
+  const MoreVerticalIcon = useIcon2("more-vertical");
+  const LinkIcon = useIcon2("link");
+  const UserIcon = useIcon2("user");
+  const SettingsIcon = useIcon2("settings");
+  const ArrowLeftIcon = useIcon2("arrow-left");
+  const MoonIcon = useIcon2("moon");
   return /* @__PURE__ */ jsxs5(sidebar_default, {
     variant,
     side,

package/dist/shared/components-xdqmt6ed.js

@@ -0,0 +1,20 @@
+// components/inputs/select/variants.ts
+import { cva } from "class-variance-authority";
+var triggerVariants2 = cva([
+  "group inline-flex items-center justify-between outline-none cursor-pointer",
+  "transition-all duration-fast",
+  "disabled:opacity-50 disabled:pointer-events-none",
+  "focus-visible:ring-1 focus-visible:ring-focus-ring"
+], {
+  variants: {
+    variant: {
+      bordered: "border border-border bg-transparent text-foreground hover:bg-hover",
+      borderless: "border border-transparent bg-transparent text-foreground hover:bg-hover"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  }
+});
+
+export { triggerVariants2 };

package/dist/shared/{components-h2ajmhwn.js → components-y1w3a6wx.js}

@@ -1,25 +1,39 @@
+"use client";
+import {
+  fieldIconClasses2,
+  fieldAdornmentClasses2,
+  FIELD_ADORNMENT_ICON2,
+  FIELD_ACTION2,
+  FIELD_ACTION_RADIUS2,
+  fieldActionClasses2
+} from "./components-124epb7f.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  fieldIconClasses,
-  FieldStateContext,
-  useFieldBox,
-  focusControlOnPress
-} from "./components-raknhppb.js";
+  FieldStateContext2,
+  useFieldBox2,
+  focusControlOnPress2
+} from "./components-6zng858q.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
+import {
+  Label2
+} from "./components-adkarj8n.js";
 
 // components/inputs/input/index.tsx
 import { Field } from "@base-ui/react/field";
@@ -27,6 +41,7 @@ import {
   createContext,
   forwardRef,
   useContext,
+  useLayoutEffect,
   useMemo,
   useRef
 } from "react";
@@ -40,29 +55,40 @@ function useInputGroup() {
 }
 var Input2 = forwardRef(({
   icon: Icon,
+  startAdornment,
+  endAdornment,
   value: valueProp,
   defaultValue = "",
   onChange: onChangeProp,
   variant = "borderless",
   invalid,
   disabled,
+  readOnly,
+  required,
+  type = "text",
+  onSelect,
   size,
   className,
   ...props
 }, ref) => {
-  const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp);
+  const [value, onChange] = useControllableState2(valueProp, defaultValue, onChangeProp);
   const inputRef = useRef(null);
-  const box = useFieldBox({ variant, invalid, disabled, size });
+  const box = useFieldBox2({ variant, invalid, disabled, readOnly, required, size });
   const { size: sizeClasses, props: boxProps } = box;
+  const keepSelection = useSelectionAcrossType(inputRef, type);
   return /* @__PURE__ */ jsxs("div", {
-    onMouseDown: focusControlOnPress(inputRef),
+    onMouseDown: focusControlOnPress2(inputRef),
     ...boxProps,
     className: cn2(boxProps.className, "flex items-center", sizeClasses.gap, sizeClasses.control, className),
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,
         strokeWidth: 1.5,
-        className: fieldIconClasses
+        className: fieldIconClasses2
+      }),
+      /* @__PURE__ */ jsx(InputAdornment2, {
+        size,
+        children: startAdornment
       }),
       /* @__PURE__ */ jsx(Field.Control, {
         ref: (node) => {
@@ -73,39 +99,85 @@ var Input2 = forwardRef(({
           else if (ref)
             ref.current = input;
         },
-        type: "text",
+        type,
+        onSelect: (e) => {
+          keepSelection(e.currentTarget);
+          onSelect?.(e);
+        },
         value,
         onChange: (e) => onChange(e.target.value),
         disabled: box.disabled,
+        readOnly: box.readOnly,
+        required: box.required,
         "aria-invalid": box.invalid || undefined,
-        className: cn2("w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
+        className: cn2("w-full min-w-0 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
         ...props
+      }),
+      /* @__PURE__ */ jsx(InputAdornment2, {
+        size,
+        children: endAdornment
       })
     ]
   });
 });
 Input2.displayName = "Input";
-var Label2 = forwardRef(({ children, invalid, size, className, ...props }, ref) => {
+function useSelectionAcrossType(input, type) {
+  const selection = useRef([null, null]);
+  const lastType = useRef(type);
+  useLayoutEffect(() => {
+    if (lastType.current === type)
+      return;
+    lastType.current = type;
+    const el = input.current;
+    const [start, end] = selection.current;
+    if (!el || start === null || el.ownerDocument.activeElement !== el)
+      return;
+    const restore = () => {
+      try {
+        el.setSelectionRange(start, end);
+      } catch {}
+    };
+    restore();
+    const frame = requestAnimationFrame(restore);
+    return () => cancelAnimationFrame(frame);
+  }, [input, type]);
+  return (el) => {
+    selection.current = [el.selectionStart, el.selectionEnd];
+  };
+}
+function InputAdornment2({ children, size, className }) {
   const sizeClasses = useSize2(size);
-  const compact = sizeClasses.variant === "compact";
-  return /* @__PURE__ */ jsxs("label", {
+  if (children == null || children === false || children === "")
+    return null;
+  const node = /* @__PURE__ */ jsx("span", {
+    className: cn2(fieldAdornmentClasses2, FIELD_ADORNMENT_ICON2[sizeClasses.variant], sizeClasses.gap, sizeClasses.text, className),
+    children
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: node
+  }) : node;
+}
+var InputAction2 = forwardRef(({ label, icon: Icon, children, size, className, onMouseDown, ...props }, ref) => {
+  const sizeClasses = useSize2(size);
+  const shape = useShape2();
+  return /* @__PURE__ */ jsx("button", {
     ref,
-    className: cn2("inline-grid", sizeClasses.text, "data-[disabled]:opacity-50", compact ? "pl-2" : "pl-2.5", className),
+    type: "button",
+    "aria-label": label,
+    onMouseDown: (e) => {
+      onMouseDown?.(e);
+      e.preventDefault();
+    },
+    className: cn2(fieldActionClasses2, FIELD_ACTION2[sizeClasses.variant], FIELD_ACTION_RADIUS2[shape.variant], className),
     ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "col-start-1 row-start-1 invisible weight-semibold",
-        "aria-hidden": "true",
-        children
-      }),
-      /* @__PURE__ */ jsx("span", {
-        className: cn2("col-start-1 row-start-1", invalid ? "text-destructive" : "text-muted-foreground", "weight-normal"),
-        children
-      })
-    ]
+    children: Icon ? /* @__PURE__ */ jsx(Icon, {
+      size: sizeClasses.icon,
+      strokeWidth: 1.5
+    }) : children
   });
 });
-Label2.displayName = "Label";
+InputAction2.displayName = "InputAction";
 var InputGroup2 = forwardRef(({ children, size, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const { activeIndex, handlers, registerItem } = useFluidHover2(containerRef);
@@ -160,7 +232,7 @@ var InputField = forwardRef(({ label, labelHidden, index, error, disabled, child
           children: label
         })
       }),
-      /* @__PURE__ */ jsx(FieldStateContext.Provider, {
+      /* @__PURE__ */ jsx(FieldStateContext2.Provider, {
         value: fieldState,
         children: children ?? /* @__PURE__ */ jsx(Input2, {
           invalid: !!error,
@@ -180,4 +252,4 @@ InputField.displayName = "InputField";
 Object.assign(InputGroup2, { Field: InputField });
 var input_default = Input2;
 
-export { Input2, Label2, InputGroup2, input_default };
+export { Input2, InputAdornment2, InputAction2, InputGroup2, input_default };

package/dist/shared/{components-ar66gnt0.js → components-y6578b8h.js}

@@ -1,51 +1,54 @@
+"use client";
 import {
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  MorphSurface2
+} from "./components-4y816hwp.js";
 import {
-  shapeMap
-} from "./components-cv16mryv.js";
+  popupScrollAreaClass2,
+  popupViewportClass2,
+  isDisabledRow2
+} from "./components-h6p86be3.js";
+import {
+  shapeMap2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   useFluidHover2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   ScrollArea2
-} from "./components-hawvy2qz.js";
+} from "./components-2z48g4fp.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
 import {
   DropdownContext,
   MenuItem2,
   DropdownLabel2,
   DropdownSeparator2
-} from "./components-a86dytt0.js";
-import {
-  popupScrollAreaClass,
-  popupViewportClass,
-  isDisabledRow
-} from "./components-vynjtrk6.js";
+} from "./components-c96g82th.js";
 
 // components/overlays/context-menu/index.tsx
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
@@ -59,7 +62,7 @@ import {
   useRef
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var shape = shapeMap.rounded;
+var shape = shapeMap2.rounded;
 var ContextMenuContext = createContext({ open: false, origin: { current: {} } });
 var ShortcutContext = createContext(undefined);
 function RowShortcut() {
@@ -116,11 +119,11 @@ var ContextMenuItem2 = forwardRef(({ shortcut, ...props }, ref) => /* @__PURE__
 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 });
+  const morph = useMorph2(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 hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
   const { activeIndex, setActiveIndex, handlers, registerItem, remeasure } = hover;
   useEffect(() => {
     if (open)
@@ -151,15 +154,15 @@ var ContextMenuContent2 = forwardRef(({ from = "pointer", effect, hideSource, ti
         className: "relative select-none outline-none",
         children: /* @__PURE__ */ jsx(SurfaceProvider2, {
           value: level,
-          children: /* @__PURE__ */ jsx(MorphSurface, {
+          children: /* @__PURE__ */ jsx(MorphSurface2, {
             morph,
-            bg: SURFACE_BG[level],
-            shadow: SURFACE_SHADOW[3],
+            bg: SURFACE_BG2[level],
+            shadow: SURFACE_SHADOW2[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"),
+              className: popupScrollAreaClass2,
+              viewportClassName: cn2(popupViewportClass2, "scroll-fade"),
               children: /* @__PURE__ */ jsxs("div", {
                 ref: containerRef,
                 className: "relative flex flex-col p-1",
@@ -184,8 +187,8 @@ var ContextMenuContent2 = forwardRef(({ from = "pointer", effect, hideSource, ti
 });
 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 [current, setCurrent] = useControllableState2(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin2();
   const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
   const root = /* @__PURE__ */ jsx(ContextMenuContext.Provider, {
     value: ctx,