@moises.ai/design-system 4.19.7 → 4.19.9

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,