@moises.ai/design-system 3.6.26 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.6.26",
+  "version": "3.7.0",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ContextMenu/CanvasContextMenu.jsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames'
+import { ContextMenu as ContextMenuRadix } from 'radix-ui'
+import React, { forwardRef, memo } from 'react'
+
+import { createRenderItem, styles } from '../../lib/menu'
+
+const renderOption = createRenderItem(ContextMenuRadix)
+
+/**
+ * Variant of ContextMenu for programmatic opening from non-DOM event sources
+ * (e.g. Pixi canvas). Instead of wrapping a visible trigger element, it exposes
+ * a ref to an internal hidden div that can receive a synthetic `contextmenu` event.
+ *
+ * Usage:
+ *   const triggerRef = useRef(null)
+ *   triggerRef.current?.dispatchEvent(
+ *     new MouseEvent('contextmenu', { bubbles: true, clientX: x, clientY: y })
+ *   )
+ *   ...
+ *   <CanvasContextMenu ref={triggerRef} options={[...]}>
+ *     {children}  // rendered between trigger and content, inside the same Root
+ *   </CanvasContextMenu>
+ */
+export const CanvasContextMenu = memo(
+  forwardRef(function CanvasContextMenu(
+    {
+      children,
+      options,
+      className,
+      size = '2',
+      onSelectionChange,
+      closeOnSelect = true,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      // The outer div catches the bubbling contextmenu event AFTER Radix has already
+      // processed it on the trigger, suppressing the browser's native context menu
+      // without interfering with Radix's own handler.
+      <div onContextMenu={(e) => e.preventDefault()} style={{ display: 'contents' }}>
+        <ContextMenuRadix.Root>
+          <ContextMenuRadix.Trigger asChild>
+            <div
+              ref={ref}
+              style={{ position: 'fixed', width: 0, height: 0, pointerEvents: 'none' }}
+            />
+          </ContextMenuRadix.Trigger>
+          {children}
+          {options?.length > 0 && (
+            <ContextMenuRadix.Content
+              className={classNames(styles.menuContent, className)}
+              side={props.side}
+              align={props.align}
+              sideOffset={5}
+              alignOffset={0}
+              onCloseAutoFocus={(event) => {
+                event.preventDefault()
+              }}
+              onClick={(event) => event.stopPropagation()}
+            >
+              {options?.map((option) =>
+                renderOption(option, size, onSelectionChange, closeOnSelect),
+              )}
+            </ContextMenuRadix.Content>
+          )}
+        </ContextMenuRadix.Root>
+      </div>
+    )
+  }),
+)
+
+CanvasContextMenu.displayName = 'CanvasContextMenu'

package/src/icons/EmailIcon.jsx

@@ -0,0 +1,28 @@
+export const EmailIcon = ({ width = 20, height = 20, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M3.33 3.33h13.34c.92 0 1.66.75 1.66 1.67v10c0 .92-.74 1.67-1.66 1.67H3.33c-.92 0-1.66-.75-1.66-1.67V5c0-.92.74-1.67 1.66-1.67z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18.33 5l-8.33 5.83L1.67 5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+EmailIcon.displayName = 'EmailIcon'

package/src/icons/EyeIcon.jsx

@@ -0,0 +1,30 @@
+export const EyeIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M0.667 8s2.666-5.333 7.333-5.333C12.667 2.667 15.333 8 15.333 8s-2.666 5.333-7.333 5.333C3.333 13.333.667 8 .667 8z"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <circle
+      cx="8"
+      cy="8"
+      r="2"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+EyeIcon.displayName = 'EyeIcon'

package/src/icons/EyeOffIcon.jsx

@@ -0,0 +1,28 @@
+export const EyeOffIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M9.41 9.41a2 2 0 11-2.83-2.83M6.59 2.89A6.5 6.5 0 018 2.67c4.67 0 7.33 5.33 7.33 5.33a12.1 12.1 0 01-1.44 2.18m-3.18 1.64A6.5 6.5 0 018 13.33C3.33 13.33.67 8 .67 8a12.1 12.1 0 013.15-3.81"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M.667.667l14.666 14.666"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+EyeOffIcon.displayName = 'EyeOffIcon'

package/src/icons.jsx

@@ -343,3 +343,6 @@ export { GlobeIcon } from './icons/GlobeIcon'
 export { DotsVertical2Icon } from './icons/DotsVertical2Icon'
 export { EditIcon } from './icons/EditIcon'
 export { UnlockIcon } from './icons/UnlockIcon'
+export { EmailIcon } from './icons/EmailIcon'
+export { EyeIcon } from './icons/EyeIcon'
+export { EyeOffIcon } from './icons/EyeOffIcon'

package/src/index.jsx

@@ -81,6 +81,7 @@ export { Callout } from './components/Callout/Callout'
 export { Card as CardWidget } from './components/Card/Card'
 export { Checkbox } from './components/Checkbox/Checkbox'
 export { CigarBar } from './components/CigarBar/CigarBar'
+export { CanvasContextMenu } from './components/ContextMenu/CanvasContextMenu'
 export { ContextMenu } from './components/ContextMenu/ContextMenu'
 export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'