@moises.ai/design-system 4.19.7 → 4.19.8

package/package.json

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

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 {

package/src/components/Select/Select.stories.jsx

@@ -1,6 +1,8 @@
 import { Flex } from '@radix-ui/themes'
 import { Select } from './Select'
 import { useState } from 'react'
+import { LockIcon, StarIcon } from '../../icons'
+import { GearIcon } from '@radix-ui/react-icons'
 
 export default {
   title: 'Components/Select',
@@ -41,6 +43,8 @@ import { Select } from '@moises.ai/design-system'
   items: {
     value: string, // Value of the option (required)
     label: string, // Label of the option (required)
+    disabled?: boolean, // Disables this option (still visible in the menu)
+    rightIcon?: ReactNode, // Optional icon displayed on the right side
     aiDetected?: boolean, // Shows ✦ icon before label if true (optional)
     extra?: string | ReactNode, // Extra text or element after label (optional)
   }[], // List of items to display in the select
@@ -52,11 +56,13 @@ import { Select } from '@moises.ai/design-system'
   size?: '1' | '2' | '3', // Size variant of the select (default: '2')
   variant?: 'soft' | 'ghost', // Visual style variant (default: 'soft')
   disabled?: boolean, // Whether the select is disabled (default: false)
+  allowClickWhenDisabled?: boolean, // Keeps disabled look, opens menu with disabled options, fires onFocus on open (e.g. paywall)
   className?: string, // Additional CSS class name
   readOnly?: boolean, // Whether the select is read-only (default: false)
   maxHeight?: string, // Max height of the dropdown (e.g. '200px')
   showSelectIndicator?: boolean, // Show the default Radix select indicator (default: false)
   maxWidth?: string, // Max width of the select (e.g. '300px')
+  onFocus?: () => void, // Called when opening while disabled + allowClickWhenDisabled
 }
 \`\`\`
       `,
@@ -81,6 +87,12 @@ import { Select } from '@moises.ai/design-system'
       description: 'Whether the select is disabled',
       defaultValue: false,
     },
+    allowClickWhenDisabled: {
+      control: 'boolean',
+      description:
+        'When true with disabled, keeps disabled look, opens menu with disabled options, and fires onFocus on open',
+      defaultValue: false,
+    },
     showSelectIndicator: {
       control: 'boolean',
       description: 'Whether to show the default Radix select indicator',
@@ -191,6 +203,64 @@ export const Disabled = {
   decorators: [withFlexContainer],
 }
 
+export const AllowClickWhenDisabled = {
+  render: () => {
+    const [lastAction, setLastAction] = useState('none yet')
+
+    return (
+      <Flex direction="column" gap="2" width="300px">
+        <Select
+          title="Instrument"
+          info="Looks disabled, opens menu and fires onFocus"
+          defaultValue="bass"
+          size="2"
+          disabled
+          allowClickWhenDisabled
+          items={[
+            { value: 'bass', label: 'Bass' },
+            { value: 'guitar', label: 'Guitar' },
+            { value: 'piano', label: 'Piano' },
+          ]}
+          onFocus={() => {
+            setLastAction('activated (focus)')
+            alert('paywall opened')
+          }}
+        />
+        <div style={{ fontSize: 14, color: '#4b5563' }}>
+          Last action: {lastAction}
+        </div>
+      </Flex>
+    )
+  },
+}
+
+export const WithRightIcon = {
+  args: {
+    title: 'Instrument',
+    defaultValue: 'bass',
+    size: '2',
+    items: [
+      {
+        value: 'bass',
+        label: 'Bass',
+        rightIcon: <LockIcon width={14} height={14} />,
+      },
+      {
+        value: 'guitar',
+        label: 'Guitar',
+        rightIcon: <StarIcon width={14} height={14} />,
+      },
+      {
+        value: 'piano',
+        label: 'Piano',
+        rightIcon: <GearIcon width={14} height={14} />,
+      },
+      { value: 'drums', label: 'Drums' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
 export const DisabledGhost = {
   args: {
     title: 'Instrument',

package/src/components/TextField/TextField.jsx

@@ -12,6 +12,7 @@ export const TextField = ({
   className,
   disabled,
   readOnly,
+  allowClickWhenDisabled = false,
   size = '2',
   Icon,
   focusRing = false,
@@ -23,6 +24,7 @@ export const TextField = ({
   aiDetected = false,
   textAlign = 'left',
   style,
+  onFocus,
   ...props
 }) => {
   // legacy Icon prop is kept for backwards compatibility.
@@ -31,6 +33,8 @@ export const TextField = ({
     (Icon ? <Icon width={16} height={16} className={styles.icon} /> : null)
 
   const chars = String(value ?? '').length
+  const isDisabled = Boolean(disabled)
+  const isDisabledClickable = isDisabled && Boolean(allowClickWhenDisabled)
 
   return (
     <Flex direction="column" width="100%" height="100%" gap="1">
@@ -42,39 +46,61 @@ export const TextField = ({
           {info && <TooltipWithInfoIcon content={info} />}
         </Flex>
       )}
-      <TextFieldRadix.Root
-        size={size}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        className={classNames(styles.TextField, className, {
-          [styles.Disabled]: disabled,
-          [styles.ReadOnly]: readOnly,
-          [styles.focusRing]: focusRing || error,
-          [styles.errorText]: error,
-          [styles[`size${size}`]]: size,
-          [styles.alignCenter]: textAlign === 'center',
-          [styles.alignLeft]: textAlign === 'left',
-        })}
-        style={{
-          ...(aiDetected && { '--ai-chars': chars }),
-          ...style,
-        }}
-        readOnly={readOnly}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        {...props}
-      >
-        {resolvedStartSlot && (
-          <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
-        )}
-        {aiDetected && (
-          <span className={styles.aiDetected} aria-hidden>
-            <span className={styles.aiDetectedMark}>✦</span>
-          </span>
+      <div className={styles.fieldWrapper}>
+        <TextFieldRadix.Root
+          size={size}
+          value={value}
+          onChange={isDisabledClickable ? undefined : onChange}
+          placeholder={placeholder}
+          className={classNames(styles.TextField, className, {
+            [styles.Disabled]: isDisabled,
+            [styles.ReadOnly]: readOnly && !isDisabled,
+            [styles.focusRing]: focusRing || error,
+            [styles.errorText]: error,
+            [styles[`size${size}`]]: size,
+            [styles.alignCenter]: textAlign === 'center',
+            [styles.alignLeft]: textAlign === 'left',
+          })}
+          style={{
+            ...(aiDetected && { '--ai-chars': chars }),
+            ...style,
+          }}
+          autoFocus={autoFocus}
+          {...props}
+          onFocus={isDisabledClickable ? undefined : onFocus}
+          readOnly={readOnly}
+          disabled={isDisabled}
+        >
+          {resolvedStartSlot && (
+            <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
+          )}
+          {aiDetected && (
+            <span className={styles.aiDetected} aria-hidden>
+              <span className={styles.aiDetectedMark}>✦</span>
+            </span>
+          )}
+          {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
+        </TextFieldRadix.Root>
+        {isDisabledClickable && (
+          <button
+            type="button"
+            className={styles.disabledClickOverlay}
+            aria-label={title || placeholder || 'Activate'}
+            tabIndex={0}
+            onPointerDown={(event) => {
+              // Prevent focus so dialogs/alerts don't restore focus and re-trigger.
+              event.preventDefault()
+              onFocus?.(event)
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                onFocus?.(event)
+              }
+            }}
+          />
         )}
-        {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
-      </TextFieldRadix.Root>
+      </div>
       {secondaryText && (
         <Text
           size="1"

package/src/components/TextField/TextField.module.css

@@ -77,6 +77,27 @@
   cursor: default;
 }
 
+.fieldWrapper {
+  position: relative;
+  width: 100%;
+}
+
+.disabledClickOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  cursor: default;
+}
+
+.disabledClickOverlay:focus {
+  outline: none;
+}
+
 .ReadOnly {
   background-color: var(--neutral-alpha-2) !important;
   color: var(--neutral-12);

package/src/components/TextField/TextField.stories.jsx

@@ -66,6 +66,15 @@ const MyComponent = () => (
         defaultValue: { summary: 'false' },
       },
     },
+    allowClickWhenDisabled: {
+      control: 'boolean',
+      description:
+        'When true with disabled, keeps the disabled look and blocks typing, but still allows focus (e.g. paywall via onFocus)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     readOnly: {
       control: 'boolean',
       description: 'Whether the input is read-only',
@@ -238,6 +247,32 @@ export const Disabled = {
   },
 }
 
+export const AllowClickWhenDisabled = {
+  render: (args) => {
+    const [lastAction, setLastAction] = React.useState('none yet')
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <TextField
+          {...args}
+          disabled
+          allowClickWhenDisabled
+          value="Looks disabled, click to activate"
+          onFocus={() => {
+            setLastAction('activated (focus)')
+            action('activated (focus)')()
+            alert('paywall opened')
+          }}
+        />
+        <div style={{ fontSize: 14, color: '#4b5563' }}>Last action: {lastAction}</div>
+      </div>
+    )
+  },
+  args: {
+    ...Default.args,
+  },
+}
+
 export const ReadOnly = {
   args: {
     ...Default.args,