@cdx-ui/components 0.1.1 → 0.1.3

package/lib/module/components/Radio/styles.js

@@ -2,12 +2,14 @@
 
 import { Platform } from 'react-native';
 import { cva } from '@cdx-ui/utils';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
-export const radioRootVariants = cva(['flex-row items-center gap-2', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR,
+import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/constants';
+export const radioRootVariants = cva(['flex-row items-center gap-2', DISABLED_OPACITY, DISABLED_CURSOR, 'data-[readonly=true]:cursor-default',
 // Suppress default :focus-visible outline on the role="radio" Pressable;
 // focus ring is drawn on the indicator instead of wrapping the whole control.
 'web:outline-none web:focus:outline-none web:focus-visible:outline-none']);
-export const radioIndicatorVariants = cva(['items-center justify-center', 'rounded-[var(--border-radius-round)]', 'border-[length:var(--border-width-selected)]', 'h-5 w-5', 'bg-surface-primary', 'data-[checked=false]:border-content-secondary', 'data-[checked=true]:border-stroke-action', 'data-[invalid=true]:border-stroke-danger', Platform.select({
+export const radioIndicatorVariants = cva(['items-center justify-center', 'rounded-[var(--border-radius-round)]', 'border-[length:var(--border-width-selected)]', 'h-5 w-5',
+// Figma: indicator fill is transparent; selection reads via border + inner dot only.
+'bg-transparent', 'data-[checked=false]:border-content-secondary', 'data-[checked=true]:border-stroke-action', 'data-[invalid=true]:border-stroke-danger', Platform.select({
   web: [TRANSITION_COLORS, 'group',
   // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
   'data-[hover=true]:data-[checked=false]:bg-content-secondary/[0.08]',
@@ -15,19 +17,33 @@ export const radioIndicatorVariants = cva(['items-center justify-center', 'round
   'data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-surface-danger-strong/[0.08]', 'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover', 'data-[hover=true]:data-[invalid=true]:border-surface-danger-strong-hover',
   // Active — CSS :active (web root does not track press via data-active).
   // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
-  'web:active:data-[hover=true]:data-[checked=false]:border-stroke-hover', 'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active', 'web:data-[focus-visible=true]:outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' '),
+  'web:active:data-[hover=true]:data-[checked=false]:border-stroke-hover', 'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
+  // Focus ring — applies to read-only as well (focusable + aria-readonly).
+  'web:data-[focus-visible=true]:outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  // Read-only — Figma: transparent fill + content-tertiary border (checked and unchecked).
+  // After hover/active so equal-or-higher specificity keeps the static treatment.
+  // Invalid is not a Figma readonly variant; retain danger so error remains visible.
+  'data-[readonly=true]:data-[checked=false]:border-content-tertiary', 'data-[readonly=true]:data-[checked=true]:border-content-tertiary', 'data-[readonly=true]:data-[invalid=true]:border-stroke-danger', 'data-[readonly=true]:data-[hover=true]:data-[checked=false]:bg-transparent', 'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-transparent', 'data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary', 'data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary', 'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:border-stroke-danger', 'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary', 'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary', 'web:active:data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-stroke-danger', 'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-stroke-danger'].join(' '),
   default: [
   // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
   // Use single-condition data-[field-state=...] selectors (emitted by RadioIndicator).
-  'data-[field-state=active]:border-stroke-hover', 'data-[field-state=invalid-active]:border-surface-danger-strong-active', 'data-[field-state=checked-active]:border-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active'].join(' ')
+  'data-[field-state=readonly-unchecked]:border-content-tertiary', 'data-[field-state=readonly-checked]:border-content-tertiary', 'data-[field-state=readonly-unchecked-invalid]:border-stroke-danger', 'data-[field-state=readonly-checked-invalid]:border-stroke-danger', 'data-[field-state=active]:border-stroke-hover', 'data-[field-state=invalid-active]:border-surface-danger-strong-active', 'data-[field-state=checked-active]:border-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active'].join(' ')
 })]);
-export const radioInnerDotVariants = cva(['rounded-[var(--border-radius-round)]', 'h-2.5 w-2.5', 'scale-0', 'data-[checked=true]:scale-100', 'bg-surface-action-strong', 'data-[invalid=true]:bg-surface-danger-strong', Platform.select({
+export const radioInnerDotVariants = cva(['rounded-[var(--border-radius-round)]', 'overflow-hidden', 'h-2.5 w-2.5',
+// Opacity (not scale): iOS compositing of scale-0 views samples the parent ring, so the
+// checked fill never paints and the dot looks content-tertiary instead of content-primary.
+'opacity-0', 'data-[checked=true]:opacity-100', 'bg-surface-action-strong', 'data-[invalid=true]:bg-surface-danger-strong', Platform.select({
   web: ['data-[hover=true]:bg-surface-action-strong-hover', 'data-[hover=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
   // Active via group-active on indicator (inner dot is not the :active target).
-  'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active', 'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active'].join(' '),
-  default: ['data-[field-state=checked-active]:bg-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active'].join(' ')
+  'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active', 'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+  // Read-only checked — Figma: content-primary dot; invalid retains danger.
+  'data-[readonly=true]:data-[checked=true]:bg-content-primary', 'data-[readonly=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong', 'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:bg-content-primary', 'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong'].join(' '),
+  default: ['data-[field-state=checked-active]:bg-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
+  // `!` beats the base `bg-surface-action-strong` — Uniwind native does not cascade
+  // data-attribute backgrounds over an unconditional bg on the same View.
+  'data-[readonly=true]:bg-content-primary!', 'data-[field-state=readonly-checked]:bg-content-primary!', 'data-[field-state=readonly-checked-invalid]:bg-surface-danger-strong!'].join(' ')
 })]);
-export const radioLabelVariants = cva(['body-md', 'text-content-primary']);
+export const radioLabelVariants = cva(['body-md', 'text-content-primary', 'data-[disabled=true]:text-content-tertiary', 'data-[readonly=true]:cursor-default']);
 export const radioGroupVariants = cva([], {
   variants: {
     direction: {

package/lib/module/components/Radio/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","cva","DISABLED_CURSOR","TRANSITION_COLORS","radioRootVariants","radioIndicatorVariants","select","web","join","default","radioInnerDotVariants","radioLabelVariants","radioGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Radio/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,wBAAwB;AAE3E,OAAO,MAAMC,iBAAiB,GAAGH,GAAG,CAAC,CACnC,6BAA6B,EAC7B,wDAAwD,EACxDC,eAAe;AACf;AACA;AACA,wEAAwE,CACzE,CAAC;AAEF,OAAO,MAAMG,sBAAsB,GAAGJ,GAAG,CAAC,CACxC,6BAA6B,EAC7B,sCAAsC,EACtC,8CAA8C,EAC9C,SAAS,EACT,oBAAoB,EACpB,+CAA+C,EAC/C,0CAA0C,EAC1C,0CAA0C,EAC1CD,QAAQ,CAACM,MAAM,CAAC;EACdC,GAAG,EAAE,CACHJ,iBAAiB,EACjB,OAAO;EACP;EACA,oEAAoE;EACpE;EACA,4FAA4F,EAC5F,0EAA0E,EAC1E,0EAA0E;EAC1E;EACA;EACA,uEAAuE,EACvE,2GAA2G,EAC3G,sFAAsF,EACtF,0GAA0G,EAC1G,4CAA4C,EAC5C,kIAAkI,CACnI,CAACK,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA,+CAA+C,EAC/C,uEAAuE,EACvE,uEAAuE,EACvE,+EAA+E,CAChF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEF,OAAO,MAAME,qBAAqB,GAAGT,GAAG,CAAC,CACvC,sCAAsC,EACtC,aAAa,EACb,SAAS,EACT,+BAA+B,EAC/B,0BAA0B,EAC1B,8CAA8C,EAC9CD,QAAQ,CAACM,MAAM,CAAC;EACdC,GAAG,EAAE,CACH,kDAAkD,EAClD,sEAAsE;EACtE;EACA,wFAAwF,EACxF,4GAA4G,CAC7G,CAACC,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE,CACP,mEAAmE,EACnE,2EAA2E,CAC5E,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEF,OAAO,MAAMG,kBAAkB,GAAGV,GAAG,CAAC,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAC;AAE1E,OAAO,MAAMW,kBAAkB,GAAGX,GAAG,CAAC,EAAE,EAAE;EACxCY,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IAAEH,SAAS,EAAE;EAAS;AACzC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Platform","cva","DISABLED_CURSOR","DISABLED_OPACITY","TRANSITION_COLORS","radioRootVariants","radioIndicatorVariants","select","web","join","default","radioInnerDotVariants","radioLabelVariants","radioGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Radio/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,wBAAwB;AAE7F,OAAO,MAAMC,iBAAiB,GAAGJ,GAAG,CAAC,CACnC,6BAA6B,EAC7BE,gBAAgB,EAChBD,eAAe,EACf,qCAAqC;AACrC;AACA;AACA,wEAAwE,CACzE,CAAC;AAEF,OAAO,MAAMI,sBAAsB,GAAGL,GAAG,CAAC,CACxC,6BAA6B,EAC7B,sCAAsC,EACtC,8CAA8C,EAC9C,SAAS;AACT;AACA,gBAAgB,EAChB,+CAA+C,EAC/C,0CAA0C,EAC1C,0CAA0C,EAC1CD,QAAQ,CAACO,MAAM,CAAC;EACdC,GAAG,EAAE,CACHJ,iBAAiB,EACjB,OAAO;EACP;EACA,oEAAoE;EACpE;EACA,4FAA4F,EAC5F,0EAA0E,EAC1E,0EAA0E;EAC1E;EACA;EACA,uEAAuE,EACvE,2GAA2G,EAC3G,sFAAsF,EACtF,0GAA0G;EAC1G;EACA,4CAA4C,EAC5C,kIAAkI;EAClI;EACA;EACA;EACA,mEAAmE,EACnE,kEAAkE,EAClE,+DAA+D,EAC/D,4EAA4E,EAC5E,gGAAgG,EAChG,qFAAqF,EACrF,oFAAoF,EACpF,iFAAiF,EACjF,gGAAgG,EAChG,+FAA+F,EAC/F,iHAAiH,EACjH,gHAAgH,CACjH,CAACK,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA,+DAA+D,EAC/D,6DAA6D,EAC7D,oEAAoE,EACpE,kEAAkE,EAClE,+CAA+C,EAC/C,uEAAuE,EACvE,uEAAuE,EACvE,+EAA+E,CAChF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEF,OAAO,MAAME,qBAAqB,GAAGV,GAAG,CAAC,CACvC,sCAAsC,EACtC,iBAAiB,EACjB,aAAa;AACb;AACA;AACA,WAAW,EACX,iCAAiC,EACjC,0BAA0B,EAC1B,8CAA8C,EAC9CD,QAAQ,CAACO,MAAM,CAAC;EACdC,GAAG,EAAE,CACH,kDAAkD,EAClD,sEAAsE;EACtE;EACA,wFAAwF,EACxF,4GAA4G;EAC5G;EACA,6DAA6D,EAC7D,uFAAuF,EACvF,gGAAgG,EAChG,0HAA0H,CAC3H,CAACC,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE,CACP,mEAAmE,EACnE,2EAA2E;EAC3E;EACA;EACA,0CAA0C,EAC1C,yDAAyD,EACzD,uEAAuE,CACxE,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEF,OAAO,MAAMG,kBAAkB,GAAGX,GAAG,CAAC,CACpC,SAAS,EACT,sBAAsB,EACtB,4CAA4C,EAC5C,qCAAqC,CACtC,CAAC;AAEF,OAAO,MAAMY,kBAAkB,GAAGZ,GAAG,CAAC,EAAE,EAAE;EACxCa,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IAAEH,SAAS,EAAE;EAAS;AACzC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Switch/styles.js

@@ -6,10 +6,10 @@ import { cva } from '@cdx-ui/utils';
 // NATIVE — Uniwind className bindings for RN Switch
 // =============================================================================
 
-export const switchThumbColorVariants = cva(['accent-white'], {
+export const switchThumbColorVariants = cva(['accent-surface-primary'], {
   variants: {
     isDisabled: {
-      true: 'accent-gray-200',
+      true: 'accent-surface-neutral-subtle',
       false: ''
     }
   },
@@ -17,10 +17,10 @@ export const switchThumbColorVariants = cva(['accent-white'], {
     isDisabled: false
   }
 });
-export const switchTrackOnVariants = cva(['accent-blue-500'], {
+export const switchTrackOnVariants = cva(['accent-surface-action-strong'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-500',
+      true: 'accent-surface-danger-strong',
       false: ''
     }
   },
@@ -28,10 +28,10 @@ export const switchTrackOnVariants = cva(['accent-blue-500'], {
     isInvalid: false
   }
 });
-export const switchTrackOffVariants = cva(['accent-gray-300'], {
+export const switchTrackOffVariants = cva(['accent-surface-neutral-subtle'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-300',
+      true: 'accent-surface-danger-subtle',
       false: ''
     }
   },
@@ -39,10 +39,10 @@ export const switchTrackOffVariants = cva(['accent-gray-300'], {
     isInvalid: false
   }
 });
-export const switchIosBgVariants = cva(['accent-gray-300'], {
+export const switchIosBgVariants = cva(['accent-surface-neutral-subtle'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-300',
+      true: 'accent-surface-danger-subtle',
       false: ''
     }
   },
@@ -55,7 +55,7 @@ export const switchIosBgVariants = cva(['accent-gray-300'], {
 // WEB — Tailwind classes for custom Pressable toggle
 // =============================================================================
 
-export const switchTrackVariants = cva(['flex-row items-center rounded-full cursor-pointer', 'transition-colors duration-200', 'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed', 'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50', 'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50'], {
+export const switchTrackVariants = cva(['flex-row items-center rounded-full cursor-pointer', 'transition-colors duration-200', 'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed', 'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-stroke-focus/50', 'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger/50'], {
   variants: {
     size: {
       sm: 'w-9 h-5 p-0.5',
@@ -70,8 +70,8 @@ export const switchTrackVariants = cva(['flex-row items-center rounded-full curs
 export const switchWebTrackColorVariants = cva([], {
   variants: {
     isChecked: {
-      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
-      false: 'bg-gray-300 data-[hover=true]:bg-gray-400'
+      true: 'bg-surface-action-strong data-[hover=true]:bg-surface-action-strong-hover',
+      false: 'bg-surface-neutral-subtle data-[hover=true]:bg-surface-neutral-subtle-hover'
     },
     isInvalid: {
       true: '',
@@ -81,18 +81,18 @@ export const switchWebTrackColorVariants = cva([], {
   compoundVariants: [{
     isChecked: true,
     isInvalid: true,
-    className: 'bg-red-500 data-[hover=true]:bg-red-600'
+    className: 'bg-surface-danger-strong data-[hover=true]:bg-surface-danger-strong-hover'
   }, {
     isChecked: false,
     isInvalid: true,
-    className: 'bg-red-300 data-[hover=true]:bg-red-400'
+    className: 'bg-surface-danger-subtle data-[hover=true]:bg-surface-danger-subtle-hover'
   }],
   defaultVariants: {
     isChecked: false,
     isInvalid: false
   }
 });
-export const switchThumbVariants = cva(['rounded-full bg-white shadow-sm', 'transition-transform duration-200'], {
+export const switchThumbVariants = cva(['rounded-full bg-surface-primary shadow-sm', 'transition-transform duration-200'], {
   variants: {
     size: {
       sm: 'w-4 h-4',

package/lib/module/components/Switch/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["cva","switchThumbColorVariants","variants","isDisabled","true","false","defaultVariants","switchTrackOnVariants","isInvalid","switchTrackOffVariants","switchIosBgVariants","switchTrackVariants","size","sm","md","lg","switchWebTrackColorVariants","isChecked","compoundVariants","className","switchThumbVariants"],"sourceRoot":"../../../../src","sources":["components/Switch/styles.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["cva","switchThumbColorVariants","variants","isDisabled","true","false","defaultVariants","switchTrackOnVariants","isInvalid","switchTrackOffVariants","switchIosBgVariants","switchTrackVariants","size","sm","md","lg","switchWebTrackColorVariants","isChecked","compoundVariants","className","switchThumbVariants"],"sourceRoot":"../../../../src","sources":["components/Switch/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/figma/Field.Radio.figma.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5531-6635
+// source=packages/components/src/components/Field/index.tsx
+// component=Field
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const showLabel = instance.getBoolean('Show Label?');
+const showHelperText = instance.getBoolean('Show Helper Text?');
+const showErrorText = instance.getBoolean('Show Error Text?');
+
+// Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
+// Map "false" to undefined so renderProp omits them from the snippet.
+// isFocused is a runtime interaction state and is intentionally omitted.
+const isInvalid = instance.getEnum('isInvalid', {
+  true: true,
+  false: undefined
+});
+const isDisabled = instance.getEnum('isDisabled', {
+  true: true,
+  false: undefined
+});
+const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
+const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
+const labelText = instance.findText('{label}', {
+  traverseInstances: true
+}).textContent;
+const helperText = instance.findText('{HelperText}', {
+  traverseInstances: true
+}).textContent;
+const errorText = instance.findText('{ErrorText}', {
+  traverseInstances: true
+}).textContent;
+const radioGroup = instance.findInstance('Radio.Group');
+let radioGroupSnippet;
+if (radioGroup?.type === 'INSTANCE') {
+  radioGroupSnippet = radioGroup.executeTemplate().example;
+}
+export default {
+  id: 'field-radio',
+  // Only import Field here; the nested Radio.Group template provides its own "import { Radio } …" line.
+  // Code Connect merges the two separate import statements from the same package automatically.
+  imports: ["import { Field } from '@cdx-ui/components'"],
+  example: figma.code`
+<Field${isInvalidProp}${isDisabledProp}>
+  ${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
+  ${radioGroupSnippet}
+  ${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
+  ${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
+</Field>`
+};
+//# sourceMappingURL=Field.Radio.figma.js.map

package/lib/module/figma/Field.Radio.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","radioGroup","findInstance","radioGroupSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Radio.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,UAAU,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,aAAa,CAAC;AACvD,IAAIC,iBAA8D;AAClE,IAAIF,UAAU,EAAEG,IAAI,KAAK,UAAU,EAAE;EACnCD,iBAAiB,GAAGF,UAAU,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AAC1D;AAEA,eAAe;EACbC,EAAE,EAAE,aAAa;EACjB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,iBAAiB;AACrB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}

package/lib/module/figma/Radio.Group.figma.js

@@ -0,0 +1,18 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5531-5344
+// source=packages/components/src/components/Radio/index.tsx
+// component=Radio.Group
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const optionsSlot = instance.getSlot('options');
+const optionsChildren = optionsSlot ? figma.helpers.react.renderChildren(optionsSlot) : null;
+export default {
+  id: 'radio-group',
+  imports: ["import { Radio } from '@cdx-ui/components'"],
+  example: figma.code`
+<Radio.Group>
+  ${optionsChildren}
+</Radio.Group>`
+};
+//# sourceMappingURL=Radio.Group.figma.js.map

package/lib/module/figma/Radio.Group.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","optionsSlot","getSlot","optionsChildren","helpers","react","renderChildren","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Radio.Group.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,CAAC;AAC/C,MAAMC,eAAe,GAAGF,WAAW,GAAGH,KAAK,CAACM,OAAO,CAACC,KAAK,CAACC,cAAc,CAACL,WAAW,CAAC,GAAG,IAAI;AAE5F,eAAe;EACbM,EAAE,EAAE,aAAa;EACjBC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAEX,KAAK,CAACY,IAAI;AACrB;AACA,IAAIP,eAAe;AACnB;AACA,CAAC","ignoreList":[]}

package/lib/module/figma/Radio.figma.js

@@ -6,28 +6,34 @@
 import figma from 'figma';
 const instance = figma.selectedInstance;
 
-// Enum-as-boolean: isDisabled and isInvalid are VARIANT properties in Figma (string values "true"/"false").
-// Rendered via renderProp so JSX formatting matches Code Connect conventions.
+// Enum-as-boolean: isDisabled, isInvalid, and isReadOnly are VARIANT properties in Figma (string values "true"/"false").
+// Map "false" to undefined so renderProp omits them from the snippet.
+// isChecked, isHovered, and isFocused are runtime/visual states and are intentionally omitted.
 const isDisabled = instance.getEnum('isDisabled', {
   true: true,
-  false: false
+  false: undefined
 });
 const isInvalid = instance.getEnum('isInvalid', {
   true: true,
-  false: false
+  false: undefined
+});
+const isReadOnly = instance.getEnum('isReadOnly', {
+  true: true,
+  false: undefined
 });
 const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
 const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
+const isReadOnlyProp = figma.helpers.react.renderProp('isReadOnly', isReadOnly);
 const showLabel = instance.getEnum('Show Label?', {
   true: true,
   false: false
 });
-const labelText = instance.findText('Label').textContent;
+const labelText = instance.findText('Radio.Label').textContent;
 export default {
   id: 'radio',
   imports: ["import { Radio } from '@cdx-ui/components'"],
   example: figma.code`
-<Radio value="option"${isDisabledProp}${isInvalidProp}>
+<Radio value="option"${isDisabledProp}${isInvalidProp}${isReadOnlyProp}>
   ${showLabel ? figma.code`<Radio.Label>${labelText}</Radio.Label>` : null}
 </Radio>`
 };

package/lib/module/figma/Radio.figma.js.map

@@ -1 +1 @@
-{"version":3,"names":["figma","instance","selectedInstance","isDisabled","getEnum","true","false","isInvalid","isDisabledProp","helpers","react","renderProp","isInvalidProp","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Radio.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,UAAU,GAAGF,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,SAAS,GAAGN,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAME,cAAc,GAAGR,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAER,UAAU,CAAC;AAC/E,MAAMS,aAAa,GAAGZ,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEJ,SAAS,CAAC;AAE5E,MAAMM,SAAS,GAAGZ,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMQ,SAAS,GAAIb,QAAQ,CAACc,QAAQ,CAAC,OAAO,CAAC,CAAgCC,WAAW;AAExF,eAAe;EACbC,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAEnB,KAAK,CAACoB,IAAI;AACrB,uBAAuBZ,cAAc,GAAGI,aAAa;AACrD,IAAIC,SAAS,GAAGb,KAAK,CAACoB,IAAI,gBAAgBN,SAAS,gBAAgB,GAAG,IAAI;AAC1E;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["figma","instance","selectedInstance","isDisabled","getEnum","true","false","undefined","isInvalid","isReadOnly","isDisabledProp","helpers","react","renderProp","isInvalidProp","isReadOnlyProp","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Radio.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,UAAU,GAAGF,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAME,UAAU,GAAGR,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMG,cAAc,GAAGV,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEV,UAAU,CAAC;AAC/E,MAAMW,aAAa,GAAGd,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAC5E,MAAMO,cAAc,GAAGf,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMO,SAAS,GAAGf,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMW,SAAS,GAAIhB,QAAQ,CAACiB,QAAQ,CAAC,aAAa,CAAC,CAAgCC,WAAW;AAE9F,eAAe;EACbC,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAEtB,KAAK,CAACuB,IAAI;AACrB,uBAAuBb,cAAc,GAAGI,aAAa,GAAGC,cAAc;AACtE,IAAIC,SAAS,GAAGhB,KAAK,CAACuB,IAAI,gBAAgBN,SAAS,gBAAgB,GAAG,IAAI;AAC1E;AACA,CAAC","ignoreList":[]}

package/lib/typescript/components/Radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAc5B,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,6FAeb,CAAC;AAoBH,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,sGAgDnB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAiBf,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,UAAU,kGA0Cf,CAAC;AAQF,KAAK,sBAAsB,GAAG,OAAO,SAAS,GAAG;IAC/C,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAIZ,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAc5B,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,6FAeb,CAAC;AAoBH,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,sGAwDnB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAyBf,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,UAAU,kGA0Cf,CAAC;AAQF,KAAK,sBAAsB,GAAG,OAAO,SAAS,GAAG;IAC/C,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAIZ,sBAAsB,CAAC"}

package/lib/typescript/components/Radio/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,oFAO5B,CAAC;AAEH,eAAO,MAAM,sBAAsB,oFAqCjC,CAAC;AAEH,eAAO,MAAM,qBAAqB,oFAoBhC,CAAC;AAEH,eAAO,MAAM,kBAAkB,oFAA2C,CAAC;AAE3E,eAAO,MAAM,kBAAkB;;8EAQ7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,oFAQ5B,CAAC;AAEH,eAAO,MAAM,sBAAsB,oFA0DjC,CAAC;AAEH,eAAO,MAAM,qBAAqB,oFAiChC,CAAC;AAEH,eAAO,MAAM,kBAAkB,oFAK7B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;8EAQ7B,CAAC"}

package/lib/typescript/components/Switch/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAMvD,eAAO,MAAM,wBAAwB;;8EAQnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAQhC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;8EAQjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAQ9B,CAAC;AAMH,eAAO,MAAM,mBAAmB;;8EAoB/B,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;8EAmBtC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAwB/B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAMvD,eAAO,MAAM,wBAAwB;;8EAQnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAQhC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;8EAQjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAQ9B,CAAC;AAMH,eAAO,MAAM,mBAAmB;;8EAoB/B,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;8EA2BtC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAwB/B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/lib/typescript/figma/Field.Radio.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Field.Radio.figma.d.ts.map

package/lib/typescript/figma/Field.Radio.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.Radio.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Field.Radio.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA6C1B,wBAYE"}

package/lib/typescript/figma/Radio.Group.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Radio.Group.figma.d.ts.map

package/lib/typescript/figma/Radio.Group.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.Group.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Radio.Group.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAO1B,wBAOE"}

package/lib/typescript/figma/Radio.figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Radio.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAwB1B,wBAOE"}
+{"version":3,"file":"Radio.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Radio.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA8B1B,wBAOE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -81,10 +81,10 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/icons": "0.1.1",
-    "@cdx-ui/primitives": "0.1.1",
-    "@cdx-ui/utils": "0.1.1",
-    "@cdx-ui/formatters": "0.1.1"
+    "@cdx-ui/formatters": "0.1.3",
+    "@cdx-ui/utils": "0.1.3",
+    "@cdx-ui/primitives": "0.1.3",
+    "@cdx-ui/icons": "0.1.3"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Radio/index.tsx

@@ -74,10 +74,11 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
       useRadioContext();
 
     const checkState = isChecked ? 'checked' : 'unchecked';
-    const fieldState =
-      INDICATOR_STATES[
-        `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
-      ];
+    const fieldState = isReadOnly
+      ? (`readonly-${checkState}${isInvalid ? '-invalid' : ''}` as const)
+      : INDICATOR_STATES[
+          `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
+        ];
 
     const computedClassName = cn(radioIndicatorVariants(), className);
     const Comp = asChild ? Slot : View;
@@ -104,11 +105,18 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
         )}
       >
         <View
-          className={cn(radioInnerDotVariants())}
+          collapsable={false}
+          className={cn(
+            radioInnerDotVariants(),
+            // Native: unconditional bg so Uniwind does not have to win a data-attribute
+            // background over `bg-surface-action-strong` (web keeps compound selectors).
+            isReadOnly && isChecked && !isInvalid && 'bg-content-primary',
+          )}
           {...dataAttributes({
             checked: isChecked,
             invalid: isInvalid,
             hover: isHovered,
+            readonly: isReadOnly,
             fieldState,
           })}
         />
@@ -132,6 +140,7 @@ export interface RadioLabelProps extends TextProps {
 
 const RadioLabel = forwardRef<Text, RadioLabelProps>(
   ({ asChild, className, children, style, ...props }, ref) => {
+    const { isDisabled, isReadOnly } = useRadioContext();
     const computedClassName = cn(radioLabelVariants(), className);
     const Comp = asChild ? Slot : Text;
 
@@ -141,7 +150,14 @@ const RadioLabel = forwardRef<Text, RadioLabelProps>(
         className={computedClassName}
         style={style}
         {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'radio-label' }))}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'radio-label',
+            disabled: isDisabled,
+            readonly: isReadOnly,
+          }),
+        )}
       >
         {children}
       </Comp>

package/src/components/Radio/styles.ts

@@ -1,11 +1,12 @@
 import { Platform } from 'react-native';
 import { cva } from '@cdx-ui/utils';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/constants';
 
 export const radioRootVariants = cva([
   'flex-row items-center gap-2',
-  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_OPACITY,
   DISABLED_CURSOR,
+  'data-[readonly=true]:cursor-default',
   // Suppress default :focus-visible outline on the role="radio" Pressable;
   // focus ring is drawn on the indicator instead of wrapping the whole control.
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
@@ -16,7 +17,8 @@ export const radioIndicatorVariants = cva([
   'rounded-[var(--border-radius-round)]',
   'border-[length:var(--border-width-selected)]',
   'h-5 w-5',
-  'bg-surface-primary',
+  // Figma: indicator fill is transparent; selection reads via border + inner dot only.
+  'bg-transparent',
   'data-[checked=false]:border-content-secondary',
   'data-[checked=true]:border-stroke-action',
   'data-[invalid=true]:border-stroke-danger',
@@ -36,12 +38,32 @@ export const radioIndicatorVariants = cva([
       'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active',
       'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active',
       'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
+      // Focus ring — applies to read-only as well (focusable + aria-readonly).
       'web:data-[focus-visible=true]:outline-none',
       'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+      // Read-only — Figma: transparent fill + content-tertiary border (checked and unchecked).
+      // After hover/active so equal-or-higher specificity keeps the static treatment.
+      // Invalid is not a Figma readonly variant; retain danger so error remains visible.
+      'data-[readonly=true]:data-[checked=false]:border-content-tertiary',
+      'data-[readonly=true]:data-[checked=true]:border-content-tertiary',
+      'data-[readonly=true]:data-[invalid=true]:border-stroke-danger',
+      'data-[readonly=true]:data-[hover=true]:data-[checked=false]:bg-transparent',
+      'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-transparent',
+      'data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary',
+      'data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary',
+      'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:border-stroke-danger',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-stroke-danger',
+      'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-stroke-danger',
     ].join(' '),
     default: [
       // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
       // Use single-condition data-[field-state=...] selectors (emitted by RadioIndicator).
+      'data-[field-state=readonly-unchecked]:border-content-tertiary',
+      'data-[field-state=readonly-checked]:border-content-tertiary',
+      'data-[field-state=readonly-unchecked-invalid]:border-stroke-danger',
+      'data-[field-state=readonly-checked-invalid]:border-stroke-danger',
       'data-[field-state=active]:border-stroke-hover',
       'data-[field-state=invalid-active]:border-surface-danger-strong-active',
       'data-[field-state=checked-active]:border-surface-action-strong-active',
@@ -52,9 +74,12 @@ export const radioIndicatorVariants = cva([
 
 export const radioInnerDotVariants = cva([
   'rounded-[var(--border-radius-round)]',
+  'overflow-hidden',
   'h-2.5 w-2.5',
-  'scale-0',
-  'data-[checked=true]:scale-100',
+  // Opacity (not scale): iOS compositing of scale-0 views samples the parent ring, so the
+  // checked fill never paints and the dot looks content-tertiary instead of content-primary.
+  'opacity-0',
+  'data-[checked=true]:opacity-100',
   'bg-surface-action-strong',
   'data-[invalid=true]:bg-surface-danger-strong',
   Platform.select({
@@ -64,15 +89,30 @@ export const radioInnerDotVariants = cva([
       // Active via group-active on indicator (inner dot is not the :active target).
       'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
       'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      // Read-only checked — Figma: content-primary dot; invalid retains danger.
+      'data-[readonly=true]:data-[checked=true]:bg-content-primary',
+      'data-[readonly=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong',
+      'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:bg-content-primary',
+      'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong',
     ].join(' '),
     default: [
       'data-[field-state=checked-active]:bg-surface-action-strong-active',
       'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
+      // `!` beats the base `bg-surface-action-strong` — Uniwind native does not cascade
+      // data-attribute backgrounds over an unconditional bg on the same View.
+      'data-[readonly=true]:bg-content-primary!',
+      'data-[field-state=readonly-checked]:bg-content-primary!',
+      'data-[field-state=readonly-checked-invalid]:bg-surface-danger-strong!',
     ].join(' '),
   }),
 ]);
 
-export const radioLabelVariants = cva(['body-md', 'text-content-primary']);
+export const radioLabelVariants = cva([
+  'body-md',
+  'text-content-primary',
+  'data-[disabled=true]:text-content-tertiary',
+  'data-[readonly=true]:cursor-default',
+]);
 
 export const radioGroupVariants = cva([], {
   variants: {