@moises.ai/design-system 3.7.1 → 3.7.2

package/package.json

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

package/src/components/ContextMenu/ContextMenu.jsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react'
 import { ContextMenu as ContextMenuRadix } from 'radix-ui'
 import classNames from 'classnames'
-
 import { createRenderItem, styles } from '../../lib/menu'
 
 const renderOption = createRenderItem(ContextMenuRadix)

package/src/components/ProfileMenu/ProfileMenu.stories.jsx

@@ -1,4 +1,4 @@
-import { Flex } from '../../index'
+import { Flex, Text } from '../../index'
 import { ProfileMenu } from './ProfileMenu'
 
 export default {
@@ -15,6 +15,34 @@ export const Default = {
       plan: 'Premium',
     },
     menuOptions: [
+      {
+        type: 'custom',
+        key: 'credits-header',
+        customRender: () => <div key="credits-header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="showActiveTrigger">
+            <div>
+              <Text style={{ fontSize: 14, fontWeight: 'normal', lineHeight: '20px' }}>Credits:</Text>{` `}
+              <Text style={{ color: '#fff', fontSize: 14, fontWeight: 400 }}>45</Text>
+              <Text style={{ color: '#fff', fontSize: 14, fontWeight: 400, marginLeft: 4 }}>/60</Text >
+            </div>
+            <button
+              type="button"
+              aria-label="Upgrade"
+              title="Upgrade"
+              style={{ border: 'none', cursor: 'pointer', backgroundColor: '#00dae8', color: '#061415', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
+              onClick={() => {
+                alert('Upgrade clicked')
+              }}
+            >
+              Upgrade
+            </button>
+          </div>
+        </div>
+      },
+      {
+        type: 'separator',
+        key: 'separator-credits',
+      },
       {
         type: 'item',
         key: 'account-settings',

package/src/lib/menu/Menu.module.css

@@ -5,7 +5,8 @@
   min-width: 151px;
   background-color: var(--panel-solid) !important;
   padding: 4px;
-  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
   z-index: 9999;
   border: 1px solid var(--neutral-alpha-3);
   animation-duration: 400ms;
@@ -84,8 +85,9 @@
 .menuPortal {
   border-radius: 8px;
   border: 1px solid var(--neutral-alpha-3);
-  background: #18191B;
-  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  background: #18191b;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
 }
 
 .menuItem {
@@ -271,6 +273,13 @@
   }
 }
 
+.menuCustomRender,
+.menuSubTrigger[data-highlighted]:is(.menuCustomRender),
+.menuItem[data-highlighted]:is(.menuCustomRender) {
+  background-color: transparent;
+  cursor: default;
+}
+
 .menuItem[data-state='open'],
 .menuTrigger[data-state='open']:not(.showActiveTrigger),
 .menuTrigger[data-highlighted]:not(.showActiveTrigger) {
@@ -409,4 +418,3 @@
     color: var(--aqua-dark-alpha-11);
   }
 }
-

package/src/lib/menu/renderItem.jsx

@@ -18,16 +18,23 @@ export const createRenderItem = (MenuPrimitives) => {
     switch (opt.type) {
       case 'custom':
         return (
-          <div
+          <MenuPrimitives.Item
             key={opt.key}
             className={classNames(
               styles.menuItem,
+              styles.menuCustomRender,
               styles[`menuItem-size-${size}`],
             )}
-            data-disabled={opt.disabled ? '' : undefined}
+            onSelect={(event) => {
+              if (!closeOnSelect) {
+                event.preventDefault()
+              }
+            }}
+            disabled={opt.disabled}
+            asChild
           >
             {opt.customRender()}
-          </div>
+          </MenuPrimitives.Item>
         )
 
       case 'separator':