@moises.ai/design-system 4.19.6 → 4.19.7

package/package.json

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

package/src/components/ContextMenu/ContextMenu.stories.jsx

@@ -67,6 +67,7 @@ The \`options\` prop accepts an array of objects with the following types:
   icon: <Icon />, // Optional, icon displayed before the label
   onClick: () => {}, // Function called when clicked
   disabled: false, // Optional, disables the item when true
+  allowClickWhenDisabled: false, // Optional, keeps disabled look but still fires onClick (e.g. paywall)
   keybinding: '⌘C', // Optional, displays a keyboard shortcut
   rightIcon: <Icon />, // Optional, icon displayed on the right side
   color: 'red' | 'cyan', // Optional: custom color for this item
@@ -114,6 +115,7 @@ The \`options\` prop accepts an array of objects with the following types:
   checked: true, // Whether the checkbox is checked (always reserves space for checkmark)
   onChange: (checked) => {}, // Function called when toggled, receives new checked state
   disabled: false, // Optional, disables the checkbox when true
+  allowClickWhenDisabled: false, // Optional, keeps disabled look but still allows interaction (e.g. paywall)
   keybinding: '⌘C', // Optional, displays a keyboard shortcut
   rightIcon: <Icon />, // Optional, icon displayed on the right side
   color: 'red' | 'cyan', // Optional: custom color for this checkbox item
@@ -310,6 +312,69 @@ export const StayOpenAfterSelect = {
   },
 }
 
+export const AllowClickWhenDisabled = {
+  render: () => {
+    const [lastAction, setLastAction] = useState('none yet')
+
+    const options = [
+      {
+        type: 'item',
+        key: 'edit',
+        label: 'Edit',
+        onClick: () => setLastAction('Edit'),
+      },
+      {
+        type: 'item',
+        key: 'disabled',
+        label: 'Disabled (no click)',
+        disabled: true,
+        onClick: () => setLastAction('Disabled item clicked'),
+      },
+      {
+        type: 'item',
+        key: 'premium',
+        label: 'Premium feature',
+        secondaryText: 'Looks disabled, still clickable',
+        secondaryTextPosition: 'bottom',
+        disabled: true,
+        allowClickWhenDisabled: true,
+        onClick: () => setLastAction('Paywall opened'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'checkbox',
+        key: 'premium-checkbox',
+        label: 'Premium checkbox',
+        checked: false,
+        disabled: true,
+        allowClickWhenDisabled: true,
+        onChange: () => setLastAction('Paywall opened from checkbox'),
+      },
+    ]
+
+    return (
+      <Flex direction="column" gap="2" align="center" height="320px">
+        <ContextMenu options={options}>
+          <Flex
+            justify="center"
+            align="center"
+            style={{
+              padding: '50px',
+              border: '1px dashed gray',
+              borderRadius: '8px',
+            }}
+          >
+            Right-click here
+          </Flex>
+        </ContextMenu>
+        <div style={{ fontSize: '14px', color: '#4b5563' }}>
+          Last action: {lastAction}
+        </div>
+      </Flex>
+    )
+  },
+}
+
 const ItemPlaygroundComponent = ({
   size,
   // Item 1
@@ -321,6 +386,7 @@ const ItemPlaygroundComponent = ({
   item1Keybinding,
   item1ShowRightIcon,
   item1Disabled,
+  item1AllowClickWhenDisabled,
   item1Color,
   // Item 2
   item2Type,
@@ -331,6 +397,7 @@ const ItemPlaygroundComponent = ({
   item2Keybinding,
   item2ShowRightIcon,
   item2Disabled,
+  item2AllowClickWhenDisabled,
   item2Color,
   // Submenu
   showSubmenu,
@@ -343,6 +410,7 @@ const ItemPlaygroundComponent = ({
   subItemShowIcon,
   subItemKeybinding,
   subItemDisabled,
+  subItemAllowClickWhenDisabled,
 }) => {
   const [item1IsChecked, setItem1IsChecked] = useState(false)
   const [item2IsChecked, setItem2IsChecked] = useState(true)
@@ -358,6 +426,7 @@ const ItemPlaygroundComponent = ({
     keybinding: item1Keybinding || undefined,
     rightIcon: item1ShowRightIcon ? <DotsVerticalIcon /> : undefined,
     disabled: item1Disabled,
+    allowClickWhenDisabled: item1AllowClickWhenDisabled,
     color: item1Color === 'default' ? undefined : item1Color,
     ...(item1Type === 'checkbox'
       ? {
@@ -379,6 +448,7 @@ const ItemPlaygroundComponent = ({
     keybinding: item2Keybinding || undefined,
     rightIcon: item2ShowRightIcon ? <DotsVerticalIcon /> : undefined,
     disabled: item2Disabled,
+    allowClickWhenDisabled: item2AllowClickWhenDisabled,
     color: item2Color === 'default' ? undefined : item2Color,
     ...(item2Type === 'checkbox'
       ? {
@@ -399,6 +469,7 @@ const ItemPlaygroundComponent = ({
     icon: subItemShowIcon ? <GearIcon /> : undefined,
     keybinding: subItemKeybinding || undefined,
     disabled: subItemDisabled,
+    allowClickWhenDisabled: subItemAllowClickWhenDisabled,
     ...(subItemType === 'checkbox'
       ? {
           checked: subItemIsChecked,
@@ -467,6 +538,7 @@ export const Playground = {
     item1Keybinding: '⌘ C',
     item1ShowRightIcon: true,
     item1Disabled: false,
+    item1AllowClickWhenDisabled: false,
     item1Color: 'default',
     // Item 2
     item2Type: 'checkbox',
@@ -477,6 +549,7 @@ export const Playground = {
     item2Keybinding: '⌘ S',
     item2ShowRightIcon: false,
     item2Disabled: false,
+    item2AllowClickWhenDisabled: false,
     item2Color: 'default',
     // Submenu
     showSubmenu: true,
@@ -489,6 +562,7 @@ export const Playground = {
     subItemShowIcon: false,
     subItemKeybinding: '',
     subItemDisabled: false,
+    subItemAllowClickWhenDisabled: false,
   },
   argTypes: {
     size: {
@@ -540,6 +614,11 @@ export const Playground = {
       description: 'Disabled state',
       table: { category: 'Item 1' },
     },
+    item1AllowClickWhenDisabled: {
+      control: { type: 'boolean' },
+      description: 'Keep disabled look but still allow click',
+      table: { category: 'Item 1' },
+    },
     item1Color: {
       options: ['default', 'red', 'cyan'],
       control: { type: 'select' },
@@ -589,6 +668,11 @@ export const Playground = {
       description: 'Disabled state',
       table: { category: 'Item 2' },
     },
+    item2AllowClickWhenDisabled: {
+      control: { type: 'boolean' },
+      description: 'Keep disabled look but still allow click',
+      table: { category: 'Item 2' },
+    },
     item2Color: {
       options: ['default', 'red', 'cyan'],
       control: { type: 'select' },
@@ -652,6 +736,12 @@ export const Playground = {
       table: { category: 'Sub Item' },
       if: { arg: 'showSubmenu' },
     },
+    subItemAllowClickWhenDisabled: {
+      control: { type: 'boolean' },
+      description: 'Keep disabled look but still allow click',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
   },
   render: (args) => <ItemPlaygroundComponent {...args} />,
 }

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -79,6 +79,7 @@ The \`options\` prop accepts an array of objects with the following types:
   icon: <Icon />, // Optional, icon displayed before the label
   onClick: () => {}, // Function called when clicked
   disabled: false, // Optional, disables the item when true
+  allowClickWhenDisabled: false, // Optional, keeps disabled look but still fires onClick (e.g. paywall)
   keybinding: '⌘C', // Optional, displays a keyboard shortcut
   rightIcon: <Icon />, // Optional, icon displayed on the right side
   color: 'red' | 'cyan', // Optional: custom color for this item
@@ -127,6 +128,7 @@ The \`options\` prop accepts an array of objects with the following types:
   checked: true, // Whether the checkbox is checked (always reserves space for checkmark)
   onChange: (checked) => {}, // Function called when toggled, receives new checked state
   disabled: false, // Optional, disables the checkbox when true
+  allowClickWhenDisabled: false, // Optional, keeps disabled look but still allows interaction (e.g. paywall)
   keybinding: '⌘C', // Optional, displays a keyboard shortcut
   rightIcon: <Icon />, // Optional, icon displayed on the right side
   color: 'red' | 'cyan', // Optional: custom color for this checkbox item
@@ -559,6 +561,66 @@ export const CustomWithSwitch = {
   },
 }
 
+export const AllowClickWhenDisabled = {
+  render: () => {
+    const [lastAction, setLastAction] = useState('none yet')
+
+    const options = [
+      {
+        type: 'item',
+        key: 'edit',
+        label: 'Edit',
+        onClick: () => setLastAction('Edit'),
+      },
+      {
+        type: 'item',
+        key: 'disabled',
+        label: 'Disabled (no click)',
+        disabled: true,
+        onClick: () => setLastAction('Disabled item clicked'),
+      },
+      {
+        type: 'item',
+        key: 'premium',
+        label: 'Premium feature',
+        secondaryText: 'Looks disabled, still clickable',
+        secondaryTextPosition: 'bottom',
+        disabled: true,
+        allowClickWhenDisabled: true,
+        onClick: () => setLastAction('Paywall opened'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'checkbox',
+        key: 'premium-checkbox',
+        label: 'Premium checkbox',
+        checked: false,
+        disabled: true,
+        allowClickWhenDisabled: true,
+        onChange: () => setLastAction('Paywall opened from checkbox'),
+      },
+    ]
+
+    return (
+      <Flex direction="column" gap="2" align="center" height="320px">
+        <DropdownMenu
+          side="bottom"
+          align="end"
+          trigger={
+            <IconButton>
+              <DotsVerticalIcon />
+            </IconButton>
+          }
+          options={options}
+        />
+        <div style={{ fontSize: '14px', color: '#4b5563' }}>
+          Last action: {lastAction}
+        </div>
+      </Flex>
+    )
+  },
+}
+
 const ItemPlaygroundComponent = ({
   size,
   // Item 1
@@ -570,6 +632,7 @@ const ItemPlaygroundComponent = ({
   item1Keybinding,
   item1ShowRightIcon,
   item1Disabled,
+  item1AllowClickWhenDisabled,
   item1Color,
   // Item 2
   item2Type,
@@ -580,6 +643,7 @@ const ItemPlaygroundComponent = ({
   item2Keybinding,
   item2ShowRightIcon,
   item2Disabled,
+  item2AllowClickWhenDisabled,
   item2Color,
   // Submenu
   showSubmenu,
@@ -592,6 +656,7 @@ const ItemPlaygroundComponent = ({
   subItemShowIcon,
   subItemKeybinding,
   subItemDisabled,
+  subItemAllowClickWhenDisabled,
 }) => {
   const [item1IsChecked, setItem1IsChecked] = useState(false)
   const [item2IsChecked, setItem2IsChecked] = useState(true)
@@ -607,6 +672,7 @@ const ItemPlaygroundComponent = ({
     keybinding: item1Keybinding || undefined,
     rightIcon: item1ShowRightIcon ? <DotsVerticalIcon /> : undefined,
     disabled: item1Disabled,
+    allowClickWhenDisabled: item1AllowClickWhenDisabled,
     color: item1Color === 'default' ? undefined : item1Color,
     ...(item1Type === 'checkbox'
       ? {
@@ -628,6 +694,7 @@ const ItemPlaygroundComponent = ({
     keybinding: item2Keybinding || undefined,
     rightIcon: item2ShowRightIcon ? <DotsVerticalIcon /> : undefined,
     disabled: item2Disabled,
+    allowClickWhenDisabled: item2AllowClickWhenDisabled,
     color: item2Color === 'default' ? undefined : item2Color,
     ...(item2Type === 'checkbox'
       ? {
@@ -648,6 +715,7 @@ const ItemPlaygroundComponent = ({
     icon: subItemShowIcon ? <GearIcon /> : undefined,
     keybinding: subItemKeybinding || undefined,
     disabled: subItemDisabled,
+    allowClickWhenDisabled: subItemAllowClickWhenDisabled,
     ...(subItemType === 'checkbox'
       ? {
         checked: subItemIsChecked,
@@ -712,6 +780,7 @@ export const Playground = {
     item1Keybinding: '⌘ C',
     item1ShowRightIcon: true,
     item1Disabled: false,
+    item1AllowClickWhenDisabled: false,
     item1Color: 'default',
     // Item 2
     item2Type: 'checkbox',
@@ -722,6 +791,7 @@ export const Playground = {
     item2Keybinding: '⌘ S',
     item2ShowRightIcon: false,
     item2Disabled: false,
+    item2AllowClickWhenDisabled: false,
     item2Color: 'default',
     // Submenu
     showSubmenu: true,
@@ -734,6 +804,7 @@ export const Playground = {
     subItemShowIcon: false,
     subItemKeybinding: '',
     subItemDisabled: false,
+    subItemAllowClickWhenDisabled: false,
   },
   argTypes: {
     size: {
@@ -785,6 +856,11 @@ export const Playground = {
       description: 'Disabled state',
       table: { category: 'Item 1' },
     },
+    item1AllowClickWhenDisabled: {
+      control: { type: 'boolean' },
+      description: 'Keep disabled look but still allow click',
+      table: { category: 'Item 1' },
+    },
     item1Color: {
       options: ['default', 'red', 'cyan'],
       control: { type: 'select' },
@@ -834,6 +910,11 @@ export const Playground = {
       description: 'Disabled state',
       table: { category: 'Item 2' },
     },
+    item2AllowClickWhenDisabled: {
+      control: { type: 'boolean' },
+      description: 'Keep disabled look but still allow click',
+      table: { category: 'Item 2' },
+    },
     item2Color: {
       options: ['default', 'red', 'cyan'],
       control: { type: 'select' },
@@ -897,6 +978,12 @@ export const Playground = {
       table: { category: 'Sub Item' },
       if: { arg: 'showSubmenu' },
     },
+    subItemAllowClickWhenDisabled: {
+      control: { type: 'boolean' },
+      description: 'Keep disabled look but still allow click',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
   },
   render: (args) => <ItemPlaygroundComponent {...args} />,
 }

package/src/icons/ArrowRightIcon.jsx

@@ -5,7 +5,7 @@ export const ArrowRightIcon = ({
   ...props
 }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" {...props} aria-label="Arrow Right Icon">
-  <path d="M13.1429 19L20 12L13.1429 5M18.8571 12L4 12" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M13.1429 19L20 12L13.1429 5M18.8571 12L4 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
 )
 

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

@@ -137,10 +137,9 @@
   }
 }
 
-.menuItem[data-disabled] {
+.menuItem[data-disabled],
+.menuItemDisabledClickable {
   color: var(--neutral-alpha-7);
-  cursor: not-allowed;
-  pointer-events: none;
 
   & .label,
   & .secondaryTextBottom,
@@ -159,6 +158,15 @@
   }
 }
 
+.menuItem[data-disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.menuItemDisabledClickable {
+  cursor: pointer;
+}
+
 .menuSeparator {
   height: 1px;
   background-color: var(--neutral-alpha-3);
@@ -298,6 +306,10 @@
   background-color: var(--neutral-alpha-3);
 }
 
+.menuItem.menuItemDisabledClickable[data-highlighted] {
+  background-color: transparent;
+}
+
 .menuSubContent {
   min-width: 242px;
 }

package/src/lib/menu/renderItem.jsx

@@ -18,6 +18,11 @@ export const createRenderItem = (MenuPrimitives) => {
     closeMenu,
     showSelectedItemBackground = true,
   ) => {
+    const isDisabled = Boolean(opt.disabled)
+    const allowClickWhenDisabled = Boolean(opt.allowClickWhenDisabled)
+    const isRadixDisabled = isDisabled && !allowClickWhenDisabled
+    const isDisabledClickable = isDisabled && allowClickWhenDisabled
+
     switch (opt.type) {
       case 'custom':
         return (
@@ -27,13 +32,17 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles.menuCustomRender,
               styles[`menuItem-size-${size}`],
+              {
+                [styles.menuItemDisabledClickable]: isDisabledClickable,
+              },
             )}
             onSelect={(event) => {
               if (!closeOnSelect) {
                 event.preventDefault()
               }
             }}
-            disabled={opt.disabled}
+            disabled={isRadixDisabled}
+            aria-disabled={isDisabledClickable || undefined}
             asChild
           >
             {opt.customRender(closeMenu)}
@@ -104,8 +113,9 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles[`menuItem-size-${size}`],
               {
-                [styles.red]: opt.color === 'red' && !opt.disabled,
-                [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+                [styles.red]: opt.color === 'red' && !isDisabled,
+                [styles.cyan]: opt.color === 'cyan' && !isDisabled,
+                [styles.menuItemDisabledClickable]: isDisabledClickable,
               },
             )}
             onSelect={(event) => {
@@ -115,7 +125,8 @@ export const createRenderItem = (MenuPrimitives) => {
               opt.onClick?.()
               onSelectionChange?.(opt)
             }}
-            disabled={opt.disabled}
+            disabled={isRadixDisabled}
+            aria-disabled={isDisabledClickable || undefined}
           >
             {opt.icon && <span className={styles.leftIcon}>{opt.icon}</span>}
             <div className={styles.labelContainer}>
@@ -163,11 +174,13 @@ export const createRenderItem = (MenuPrimitives) => {
                 [styles.menuItemSelected]:
                   opt.checked && showSelectedItemBackground,
                 [styles[`menuItem-size-${size}`]]: size,
-                [styles.red]: opt.color === 'red' && !opt.disabled,
-                [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+                [styles.red]: opt.color === 'red' && !isDisabled,
+                [styles.cyan]: opt.color === 'cyan' && !isDisabled,
+                [styles.menuItemDisabledClickable]: isDisabledClickable,
               },
             )}
-            disabled={opt.disabled}
+            disabled={isRadixDisabled}
+            aria-disabled={isDisabledClickable || undefined}
           >
             <span className={styles.checkboxIndicatorSlot}>
               <MenuPrimitives.ItemIndicator