@moises.ai/design-system 4.19.6 → 4.19.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.19.6",
+  "version": "4.19.8",
   "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/components/Select/Select.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import {
   Box,
   Flex,
@@ -7,7 +7,8 @@ import {
   Tooltip,
   Separator,
 } from '@radix-ui/themes'
-import { InfoIcon } from '../../icons'
+import { Select as SelectPrimitive } from 'radix-ui'
+import { CheckIcon, InfoIcon } from '../../icons'
 import styles from './Select.module.css'
 import classNames from 'classnames'
 
@@ -22,17 +23,56 @@ export const Select = ({
   size = '2',
   variant = 'soft',
   disabled = false,
+  allowClickWhenDisabled = false,
   readOnly = false,
   maxHeight = 'auto',
   showSelectIndicator = true,
   maxWidth = '100%',
   placeholder = null,
+  onFocus,
+  onOpenChange,
   ...props
 }) => {
   const resolvedValue = value === null ? '' : value
   const resolvedDefaultValue =
     defaultValue === null ? undefined : defaultValue
 
+  const isDisabled = Boolean(disabled)
+  const isDisabledClickable = isDisabled && Boolean(allowClickWhenDisabled)
+  const isRadixDisabled = (isDisabled && !allowClickWhenDisabled) || readOnly
+
+  const [open, setOpen] = useState(false)
+  const suppressCloseRef = useRef(false)
+
+  const handleOpenChange = (nextOpen) => {
+    if (!isDisabledClickable) {
+      onOpenChange?.(nextOpen)
+      return
+    }
+
+    if (nextOpen) {
+      setOpen(true)
+      onOpenChange?.(true)
+      // Keep menu open while onFocus runs (e.g. alert/paywall steals focus).
+      suppressCloseRef.current = true
+      setTimeout(() => {
+        onFocus?.()
+        setTimeout(() => {
+          suppressCloseRef.current = false
+        }, 50)
+      }, 0)
+      return
+    }
+
+    if (suppressCloseRef.current) {
+      setOpen(true)
+      return
+    }
+
+    setOpen(false)
+    onOpenChange?.(false)
+  }
+
   return (
     <Box width="100%">
       {title && (
@@ -53,8 +93,10 @@ export const Select = ({
           defaultValue={resolvedDefaultValue}
           value={resolvedValue}
           className={classNames(className)}
-          disabled={disabled || readOnly}
           {...props}
+          disabled={isRadixDisabled}
+          open={isDisabledClickable ? open : props.open}
+          onOpenChange={handleOpenChange}
         >
           <SelectRadix.Trigger
             variant={variant}
@@ -64,6 +106,7 @@ export const Select = ({
             className={classNames(styles.selectTrigger, {
               [styles.ghost]: variant === 'ghost',
               [styles.soft]: variant === 'soft',
+              [styles.triggerDisabled]: isDisabledClickable,
             })}
           />
           <SelectRadix.Content
@@ -72,52 +115,86 @@ export const Select = ({
             style={{ height: maxHeight }}
           >
             <SelectRadix.Group>
-              {items.map((item) =>
-                item.type === 'separator' ? (
-                  <Separator
-                    key={item.value}
-                    my="2"
-                    style={{
-                      width: '100%',
-                      background: 'var(--neutral-alpha-4)',
-                    }}
-                  />
-                ) : (
-                  <SelectRadix.Item
+              {items.map((item) => {
+                if (item.type === 'separator') {
+                  return (
+                    <Separator
+                      key={item.value}
+                      my="2"
+                      style={{
+                        width: '100%',
+                        background: 'var(--neutral-alpha-4)',
+                      }}
+                    />
+                  )
+                }
+
+                const itemDisabled =
+                  isDisabledClickable || Boolean(item.disabled) || readOnly
+
+                return (
+                  <SelectPrimitive.Item
                     key={item.value}
                     value={item.value}
-                    className={classNames(styles.selectItem, {
+                    className={classNames('rt-SelectItem', styles.selectItem, {
                       [styles.hideIndicator]: !showSelectIndicator,
                       [styles.size1]: size === '1',
                       [styles.size2]: size === '2',
                     })}
-                    disabled={disabled || readOnly}
+                    disabled={itemDisabled}
                   >
-                    <span className={styles.itemLabel}>
-                      <Text size={size} style={{ color: 'var(--neutral-12)' }}>
-                        {item.label}
-                      </Text>
-                      {item.aiDetected && (
-                        <span className={styles.aiDetected} aria-hidden>
-                          ✦
-                        </span>
-                      )}
-                      {item.extra && (
+                    <SelectPrimitive.ItemIndicator className="rt-SelectItemIndicator">
+                      <CheckIcon
+                        className="rt-SelectItemIndicatorIcon"
+                        width={16}
+                        height={16}
+                      />
+                    </SelectPrimitive.ItemIndicator>
+                    <SelectPrimitive.ItemText className={styles.itemText}>
+                      <span className={styles.itemLabel}>
                         <Text
                           size={size}
-                          className={styles.extra}
                           style={{
-                            color: 'var(--neutral-alpha-9)',
+                            color: itemDisabled
+                              ? 'var(--neutral-alpha-9)'
+                              : 'var(--neutral-12)',
                           }}
                         >
-                          {' '}
-                          {item.extra}
+                          {item.label}
                         </Text>
-                      )}
-                    </span>
-                  </SelectRadix.Item>
-                ),
-              )}
+                        {item.aiDetected && (
+                          <span className={styles.aiDetected} aria-hidden>
+                            ✦
+                          </span>
+                        )}
+                        {item.extra && (
+                          <Text
+                            size={size}
+                            className={styles.extra}
+                            style={{
+                              color: 'var(--neutral-alpha-9)',
+                            }}
+                          >
+                            {' '}
+                            {item.extra}
+                          </Text>
+                        )}
+                      </span>
+                    </SelectPrimitive.ItemText>
+                    {item.rightIcon && (
+                      <span className={styles.rightSlot}>
+                        <span
+                          className={classNames(styles.rightIcon, {
+                            [styles.rightIconDisabled]: itemDisabled,
+                          })}
+                        >
+                          {item.rightIcon}
+                        </span>
+                      </span>
+                    )}
+                  </SelectPrimitive.Item>
+                )
+              })}
             </SelectRadix.Group>
           </SelectRadix.Content>
         </SelectRadix.Root>

package/src/components/Select/Select.module.css

@@ -75,7 +75,7 @@
 .selectTrigger.soft {
   background-color: var(--neutral-alpha-2) ;
 
-  &:hover:not([disabled]) {
+  &:hover:not([disabled]):not(.triggerDisabled) {
     background-color: var(--neutral-alpha-3);
   }
 }
@@ -92,7 +92,7 @@
 .selectTrigger.ghost {
   background-color: transparent;
 
-  &:hover:not([disabled]) {
+  &:hover:not([disabled]):not(.triggerDisabled) {
     background-color: var(--neutral-alpha-2);
   }
 }
@@ -102,6 +102,8 @@
 
 /* List items */
 .selectItem {
+  width: 100%;
+  padding-right: 12px;
   &:hover {
     background-color: var(--neutral-alpha-2);
   }
@@ -115,19 +117,31 @@
 /* Disabled styles */
 .selectTrigger.soft {
   color: var(--white);
-  &:disabled {
+  &:disabled,
+  &.triggerDisabled {
     color: var(--neutral-alpha-9);
     background-color: var(--neutral-alpha-2);
-}}
+  }
+}
 
 .selectTrigger.ghost {
   color: var(--white);
-  &:disabled {
+  &:disabled,
+  &.triggerDisabled {
     color: var(--neutral-alpha-9);
     background-color: transparent;
   }
 }
 
+.selectTrigger.soft.triggerDisabled[aria-expanded='true'],
+.selectTrigger.ghost.triggerDisabled[aria-expanded='true'] {
+  background-color: var(--neutral-alpha-2);
+}
+
+.selectTrigger.ghost.triggerDisabled[aria-expanded='true'] {
+  background-color: transparent;
+}
+
 .hideIndicator :global(.rt-SelectItemIndicator) {
   display: none;
 }
@@ -147,8 +161,44 @@
   padding: 12px 15px;
 }
 
+.itemText {
+  flex: 1;
+  min-width: 0;
+}
+
 .itemLabel {
   line-height: 1;
+  min-width: 0;
+}
+
+.rightSlot {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  height: 18px;
+  color: var(--neutral-alpha-11);
+}
+
+.rightIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-11);
+}
+
+.rightIcon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rightIconDisabled {
+  color: var(--neutral-alpha-7);
+}
+
+.rightIconDisabled > svg {
+  color: var(--neutral-alpha-7);
 }
 
 .aiDetected {