@inf-monkeys-tech/monkeys-design 2.0.3 → 2.0.5-canary.355.1.955340d

package/dist/components/agent-workbench/index.js

@@ -423,8 +423,8 @@ function getMonkeysProviderContexts() {
 }
 var providerContexts = getMonkeysProviderContexts();
 var MonkeysLocaleContext = providerContexts.locale;
-providerContexts.theme;
-providerContexts.direction;
+var MonkeysThemeContext = providerContexts.theme;
+var MonkeysDirectionContext = providerContexts.direction;
 providerContexts.environment;
 function useMonkeysLocale() {
   return React5.useContext(MonkeysLocaleContext);
@@ -432,9 +432,45 @@ function useMonkeysLocale() {
 function useMonkeysLocaleMessages() {
   return React5.useContext(MonkeysLocaleContext).messages;
 }
+function useMonkeysComponentAttributes() {
+  const locale = React5.useContext(MonkeysLocaleContext);
+  const theme = React5.useContext(MonkeysThemeContext);
+  const direction = React5.useContext(MonkeysDirectionContext);
+  const providerActive = locale.provided || theme.provided || direction.provided;
+  return React5.useMemo(
+    () => providerActive ? {
+      dir: direction.direction,
+      "data-monkeys-direction": direction.direction,
+      "data-monkeys-locale": locale.locale,
+      "data-monkeys-theme": theme.themeId,
+      "data-monkeys-theme-mode": theme.resolvedTheme?.colorMode
+    } : {},
+    [
+      direction.direction,
+      locale.locale,
+      providerActive,
+      theme.resolvedTheme?.colorMode,
+      theme.themeId
+    ]
+  );
+}
 function cn(...parts) {
   return tailwindMerge.twMerge(parts.filter(Boolean).join(" "));
 }
+
+// src/components/primitives/internal/overlaySurface.ts
+var overlaySurfaceRoleClassNames = {
+  // Keep the public utilities in the built stylesheet and tailwind-merge graph.
+  menu: "monkeys-overlay-surface--menu bg-menu-surface text-popover-foreground",
+  dialog: "monkeys-overlay-surface--dialog bg-dialog-surface text-foreground"
+};
+function getOverlaySurfaceClassName(role, options = {}) {
+  return [
+    "monkeys-overlay-surface",
+    overlaySurfaceRoleClassNames[role],
+    options.rounded === false ? void 0 : "monkeys-overlay-surface--rounded"
+  ].filter(Boolean).join(" ");
+}
 function cn2(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
@@ -807,18 +843,26 @@ var TabsContent = React5__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TabsContent.displayName = "TabsContent";
-var TooltipContent = React5__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  TooltipPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
+var TooltipContent = React5__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+  const componentAttributes = useMonkeysComponentAttributes();
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipPrimitive__namespace.Content,
+    {
+      ...componentAttributes,
+      ...props,
+      ref,
+      sideOffset,
+      "data-monkeys-component": "tooltip",
+      "data-slot": "content",
+      "data-surface": "menu",
+      className: cn(
+        "z-50 overflow-hidden border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        getOverlaySurfaceClassName("menu"),
+        className
+      )
+    }
+  ) });
+});
 TooltipContent.displayName = "TooltipContent";
 var Input = React5__namespace.forwardRef(({ className, appearance = "standard", type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
@@ -969,7 +1013,7 @@ var InputGroupTextarea = React5__namespace.forwardRef(({ className, ...props },
 ));
 InputGroupTextarea.displayName = "InputGroupTextarea";
 var menuItemClassName = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
-var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var menuContentClassName = `z-50 min-w-[8rem] overflow-hidden border p-1 ${getOverlaySurfaceClassName("menu")} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`;
 var DropdownMenu2 = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
 var DropdownMenuSubTrigger = React5__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
@@ -978,11 +1022,17 @@ var DropdownMenuSubTrigger = React5__namespace.forwardRef(({ className, inset, c
 ] }));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
 var DropdownMenuSubContent = React5__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
+  ({ className, ...props }, ref) => {
+    const componentAttributes = useMonkeysComponentAttributes();
+    return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubContent, { ...componentAttributes, ...props, ref, "data-monkeys-component": "dropdown-menu", "data-slot": "content", "data-surface": "menu", className: cn(menuContentClassName, className) });
+  }
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 var DropdownMenuContent = React5__namespace.forwardRef(
-  ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
+  ({ className, sideOffset = 4, ...props }, ref) => {
+    const componentAttributes = useMonkeysComponentAttributes();
+    return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Content, { ...componentAttributes, ...props, ref, sideOffset, "data-monkeys-component": "dropdown-menu", "data-slot": "content", "data-surface": "menu", className: cn(menuContentClassName, className) }) });
+  }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
 var DropdownMenuItem = React5__namespace.forwardRef(
@@ -1029,11 +1079,14 @@ var SelectScrollDownButton = React5__namespace.forwardRef(
 );
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
 var SelectContent = React5__namespace.forwardRef(
-  ({ className, children, position = "popper", viewportClassName, disableTriggerViewportSizing = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Content, { ref, position, className: cn(menuContentClassName, "relative max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", position === "popper" && !disableTriggerViewportSizing && "h-[var(--radix-select-trigger-height)]", viewportClassName), children }),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
-  ] }) })
+  ({ className, children, position = "popper", viewportClassName, disableTriggerViewportSizing = false, ...props }, ref) => {
+    const componentAttributes = useMonkeysComponentAttributes();
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Content, { ...componentAttributes, ...props, ref, position, "data-monkeys-component": "select", "data-slot": "content", "data-surface": "menu", className: cn(menuContentClassName, "relative max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", position === "popper" && !disableTriggerViewportSizing && "h-[var(--radix-select-trigger-height)]", viewportClassName), children }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+    ] }) });
+  }
 );
 SelectContent.displayName = "SelectContent";
 var SelectLabel = React5__namespace.forwardRef(
@@ -1056,17 +1109,24 @@ var SelectSeparator = React5__namespace.forwardRef(
 SelectSeparator.displayName = "SelectSeparator";
 var Sheet = DialogPrimitive__namespace.Root;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "theme-overlay-backdrop fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
+var SheetOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => {
+  const componentAttributes = useMonkeysComponentAttributes();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      ...componentAttributes,
+      ...props,
+      ref,
+      "data-monkeys-component": "sheet",
+      "data-slot": "overlay",
+      "data-monkeys-overlay": true,
+      className: cn(
+        "theme-overlay-backdrop fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )
+    }
+  );
+});
 SheetOverlay.displayName = "SheetOverlay";
 var sideClassNames = {
   top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -1074,28 +1134,37 @@ var sideClassNames = {
   bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
   left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
 };
-var SheetContent = React5__namespace.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
-    {
-      ref,
-      className: cn(
-        "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
-        sideClassNames[side],
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] }),
-        children
-      ]
-    }
-  )
-] }));
+var SheetContent = React5__namespace.forwardRef(({ side = "right", className, children, ...props }, ref) => {
+  const componentAttributes = useMonkeysComponentAttributes();
+  return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        ...componentAttributes,
+        ...props,
+        ref,
+        "data-monkeys-component": "sheet",
+        "data-slot": "content",
+        "data-surface": "dialog",
+        "data-monkeys-dialog-content": true,
+        className: cn(
+          "fixed z-50 gap-4 p-6 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+          getOverlaySurfaceClassName("dialog", { rounded: false }),
+          sideClassNames[side],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-dialog-surface transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
+});
 SheetContent.displayName = "SheetContent";
 var SheetTitle = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
 SheetTitle.displayName = "SheetTitle";