@ankhorage/zora 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.4.0
+
+### Minor Changes
+
+- 037b931: Make RadioGroup manifest-authorable with normalized value bindings and events, and add a card-style presentation that preserves single-choice radio semantics.
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/components/radio/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,SAAS,CAAC;AAqDjE;;GAEG;AACH,eAAO,MAAM,UAAU,GAtDE,MAAM,SAAS,MAAM,8DAsDe,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,SAAS,CAAC;AA6DjE;;GAEG;AACH,eAAO,MAAM,UAAU,GA3DE,MAAM,SAAS,MAAM,8DA2De,CAAC"}

package/dist/components/radio/RadioGroup.js

@@ -1,17 +1,24 @@
-import { Radio } from '@ankhorage/surface';
+import { Radio, useTheme } from '@ankhorage/surface';
 import React from 'react';
 import { View } from 'react-native';
 import { Stack } from '../../foundation';
+import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
-function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap = 's', color = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, interactionPolicy, }) {
+import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
+/***
+ * Resolves the themed radio-group presentation within the active ZORA scope.
+ */
+function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap, presentation = 'inline', color, size, invalid = false, readOnly = false, disabled = false, testID, interactionPolicy, }) {
     const isHorizontal = orientation === 'horizontal';
+    const themeFields = useZoraThemeRecipe('RadioGroup');
+    const recipe = resolveRadioGroupThemeRecipe({ gap, color, size, themeFields });
     return (<View testID={testID} accessibilityRole="radiogroup" style={{
             flexDirection: isHorizontal ? 'row' : 'column',
             flexWrap: isHorizontal ? 'wrap' : 'nowrap',
         }}>
-      <Stack direction={isHorizontal ? 'row' : 'column'} gap={gap} wrap={isHorizontal ? 'wrap' : 'nowrap'}>
-        {options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size} color={color} onSelect={onValueChange} interactionPolicy={interactionPolicy}/>))}
+      <Stack direction={isHorizontal ? 'row' : 'column'} gap={recipe.gap} wrap={isHorizontal ? 'wrap' : 'nowrap'}>
+        {options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={recipe.size} color={recipe.color} orientation={orientation} presentation={presentation} onSelect={onValueChange} interactionPolicy={interactionPolicy}/>))}
       </Stack>
     </View>);
 }
@@ -19,16 +26,29 @@ function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange,
  * Renders a group of radio options for selecting a single value.
  */
 export const RadioGroup = withZoraThemeScope(RadioGroupInner);
-function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size, color, onSelect, interactionPolicy, }) {
+/***
+ * Renders one option through the single Surface Radio interaction boundary.
+ */
+function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size, color, orientation, presentation, onSelect, interactionPolicy, }) {
+    const { theme } = useTheme();
     const passive = interactionPolicy === 'passive';
-    return (<Radio interactionPolicy={interactionPolicy} checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} color={color} testID={option.testID} onCheckedChange={(nextChecked) => {
+    const isCard = presentation === 'card';
+    return (<Radio interactionPolicy={interactionPolicy} checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} color={color} testID={option.testID} bg={isCard
+            ? checked
+                ? theme.semantics.selection.background
+                : theme.semantics.surface.default
+            : undefined} borderColor={isCard
+            ? checked
+                ? theme.semantics.selection.border
+                : theme.semantics.border.default
+            : undefined} borderWidth={isCard ? 1 : undefined} p={isCard ? 'm' : undefined} radius={isCard ? 'l' : undefined} width={isCard && orientation === 'vertical' ? '100%' : undefined} onCheckedChange={(nextChecked) => {
             if (passive)
                 return;
             if (nextChecked)
                 onSelect(option.value);
         }}>
       <Stack gap="xs">
-        <Text>{option.label}</Text>
+        <Text weight={isCard ? 'semiBold' : undefined}>{option.label}</Text>
         {option.description ? (<Text emphasis="muted" variant="caption">
             {option.description}
           </Text>) : null}

package/dist/components/radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Radio } from '@ankhorage/surface';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Text } from '../text';\nimport type { RadioGroupOption, RadioGroupProps } from './types';\n\nfunction RadioGroupInner<TValue extends string>({\n  themeId: _themeId,\n  mode: _mode,\n  value,\n  onValueChange,\n  options,\n  orientation = 'vertical',\n  gap = 's',\n  color = 'primary',\n  size = 'm',\n  invalid = false,\n  readOnly = false,\n  disabled = false,\n  testID,\n  interactionPolicy,\n}: RadioGroupProps<TValue>) {\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <View\n      testID={testID}\n      accessibilityRole=\"radiogroup\"\n      style={{\n        flexDirection: isHorizontal ? 'row' : 'column',\n        flexWrap: isHorizontal ? 'wrap' : 'nowrap',\n      }}\n    >\n      <Stack\n        direction={isHorizontal ? 'row' : 'column'}\n        gap={gap}\n        wrap={isHorizontal ? 'wrap' : 'nowrap'}\n      >\n        {options.map((option) => (\n          <RadioGroupItem\n            key={option.value}\n            option={option}\n            checked={value === option.value}\n            disabled={disabled || option.disabled === true}\n            invalid={invalid}\n            readOnly={readOnly}\n            size={size}\n            color={color}\n            onSelect={onValueChange}\n            interactionPolicy={interactionPolicy}\n          />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\n/***\n * Renders a group of radio options for selecting a single value.\n */\nexport const RadioGroup = withZoraThemeScope(RadioGroupInner);\n\nfunction RadioGroupItem<TValue extends string>({\n  option,\n  checked,\n  disabled,\n  invalid,\n  readOnly,\n  size,\n  color,\n  onSelect,\n  interactionPolicy,\n}: {\n  option: RadioGroupOption<TValue>;\n  checked: boolean;\n  disabled: boolean;\n  invalid: boolean;\n  readOnly: boolean;\n  size: NonNullable<RadioGroupProps<TValue>['size']>;\n  color: NonNullable<RadioGroupProps<TValue>['color']>;\n  onSelect: (value: TValue) => void;\n  interactionPolicy: RadioGroupProps<TValue>['interactionPolicy'];\n}) {\n  const passive = interactionPolicy === 'passive';\n\n  return (\n    <Radio\n      interactionPolicy={interactionPolicy}\n      checked={checked}\n      disabled={disabled}\n      invalid={invalid}\n      readOnly={readOnly}\n      size={size}\n      color={color}\n      testID={option.testID}\n      onCheckedChange={(nextChecked) => {\n        if (passive) return;\n        if (nextChecked) onSelect(option.value);\n      }}\n    >\n      <Stack gap=\"xs\">\n        <Text>{option.label}</Text>\n        {option.description ? (\n          <Text emphasis=\"muted\" variant=\"caption\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Radio>\n  );\n}\n"]}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Radio, useTheme } from '@ankhorage/surface';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Stack } from '../../foundation';\nimport { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Text } from '../text';\nimport { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';\nimport type { RadioGroupOption, RadioGroupProps } from './types';\n\n/***\n * Resolves the themed radio-group presentation within the active ZORA scope.\n */\nfunction RadioGroupInner<TValue extends string>({\n  themeId: _themeId,\n  mode: _mode,\n  value,\n  onValueChange,\n  options,\n  orientation = 'vertical',\n  gap,\n  presentation = 'inline',\n  color,\n  size,\n  invalid = false,\n  readOnly = false,\n  disabled = false,\n  testID,\n  interactionPolicy,\n}: RadioGroupProps<TValue>) {\n  const isHorizontal = orientation === 'horizontal';\n  const themeFields = useZoraThemeRecipe('RadioGroup');\n  const recipe = resolveRadioGroupThemeRecipe({ gap, color, size, themeFields });\n\n  return (\n    <View\n      testID={testID}\n      accessibilityRole=\"radiogroup\"\n      style={{\n        flexDirection: isHorizontal ? 'row' : 'column',\n        flexWrap: isHorizontal ? 'wrap' : 'nowrap',\n      }}\n    >\n      <Stack\n        direction={isHorizontal ? 'row' : 'column'}\n        gap={recipe.gap}\n        wrap={isHorizontal ? 'wrap' : 'nowrap'}\n      >\n        {options.map((option) => (\n          <RadioGroupItem\n            key={option.value}\n            option={option}\n            checked={value === option.value}\n            disabled={disabled || option.disabled === true}\n            invalid={invalid}\n            readOnly={readOnly}\n            size={recipe.size}\n            color={recipe.color}\n            orientation={orientation}\n            presentation={presentation}\n            onSelect={onValueChange}\n            interactionPolicy={interactionPolicy}\n          />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\n/***\n * Renders a group of radio options for selecting a single value.\n */\nexport const RadioGroup = withZoraThemeScope(RadioGroupInner);\n\n/***\n * Renders one option through the single Surface Radio interaction boundary.\n */\nfunction RadioGroupItem<TValue extends string>({\n  option,\n  checked,\n  disabled,\n  invalid,\n  readOnly,\n  size,\n  color,\n  orientation,\n  presentation,\n  onSelect,\n  interactionPolicy,\n}: {\n  option: RadioGroupOption<TValue>;\n  checked: boolean;\n  disabled: boolean;\n  invalid: boolean;\n  readOnly: boolean;\n  size: NonNullable<RadioGroupProps<TValue>['size']>;\n  color: NonNullable<RadioGroupProps<TValue>['color']>;\n  orientation: NonNullable<RadioGroupProps<TValue>['orientation']>;\n  presentation: NonNullable<RadioGroupProps<TValue>['presentation']>;\n  onSelect: (value: TValue) => void;\n  interactionPolicy: RadioGroupProps<TValue>['interactionPolicy'];\n}) {\n  const { theme } = useTheme();\n  const passive = interactionPolicy === 'passive';\n  const isCard = presentation === 'card';\n\n  return (\n    <Radio\n      interactionPolicy={interactionPolicy}\n      checked={checked}\n      disabled={disabled}\n      invalid={invalid}\n      readOnly={readOnly}\n      size={size}\n      color={color}\n      testID={option.testID}\n      bg={\n        isCard\n          ? checked\n            ? theme.semantics.selection.background\n            : theme.semantics.surface.default\n          : undefined\n      }\n      borderColor={\n        isCard\n          ? checked\n            ? theme.semantics.selection.border\n            : theme.semantics.border.default\n          : undefined\n      }\n      borderWidth={isCard ? 1 : undefined}\n      p={isCard ? 'm' : undefined}\n      radius={isCard ? 'l' : undefined}\n      width={isCard && orientation === 'vertical' ? '100%' : undefined}\n      onCheckedChange={(nextChecked) => {\n        if (passive) return;\n        if (nextChecked) onSelect(option.value);\n      }}\n    >\n      <Stack gap=\"xs\">\n        <Text weight={isCard ? 'semiBold' : undefined}>{option.label}</Text>\n        {option.description ? (\n          <Text emphasis=\"muted\" variant=\"caption\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Radio>\n  );\n}\n"]}

package/dist/components/radio/meta.d.ts

@@ -3,15 +3,214 @@ export declare const radioMeta: {
     readonly category: "component";
     readonly directManifestNode: false;
     readonly allowedChildren: readonly [];
-    readonly note: "Form control component; not represented as a manifest node in v1.";
+    readonly note: "Composition-level radio control; author repeated single-choice UI through RadioGroup.";
     readonly props: {};
 };
 export declare const radioGroupMeta: {
     readonly name: "RadioGroup";
     readonly category: "component";
-    readonly directManifestNode: false;
+    readonly description: "Single-choice group with inline or card presentation while preserving radio semantics.";
+    readonly directManifestNode: true;
     readonly allowedChildren: readonly [];
-    readonly note: "Form control component; not represented as a manifest node in v1.";
-    readonly props: {};
+    readonly blueprint: {
+        readonly label: "Radio group";
+        readonly defaultProps: {
+            readonly value: "option-b";
+            readonly options: readonly [{
+                readonly value: "option-a";
+                readonly label: "First option";
+                readonly description: "Supporting detail";
+            }, {
+                readonly value: "option-b";
+                readonly label: "Second option";
+                readonly description: "Supporting detail";
+            }, {
+                readonly value: "option-c";
+                readonly label: "Third option";
+                readonly description: "Supporting detail";
+            }];
+            readonly orientation: "vertical";
+            readonly presentation: "inline";
+            readonly invalid: false;
+            readonly readOnly: false;
+            readonly disabled: false;
+        };
+    };
+    readonly bindings: {
+        readonly props: {
+            readonly value: {
+                readonly label: "Value";
+                readonly description: "Currently selected option value.";
+                readonly value: {
+                    readonly type: "string";
+                };
+                readonly acceptsFallback: true;
+                readonly acceptsTransforms: true;
+            };
+            readonly disabled: {
+                readonly label: "Disabled";
+                readonly description: "Whether the complete radio group is disabled.";
+                readonly value: {
+                    readonly type: "boolean";
+                };
+                readonly acceptsFallback: true;
+                readonly acceptsTransforms: true;
+            };
+        };
+        readonly events: {
+            readonly valueChange: {
+                readonly label: "Value change";
+                readonly description: "Runs when the selected radio value changes.";
+                readonly payload: {
+                    readonly eventType: "radioGroup.valueChange";
+                    readonly fields: readonly [{
+                        readonly path: "value";
+                        readonly type: "string";
+                        readonly label: "Value";
+                    }];
+                };
+            };
+        };
+    };
+    readonly events: {
+        readonly valueChange: {
+            readonly label: "Value change";
+            readonly eventType: "radioGroup.valueChange";
+            readonly description: "Emitted when the selected radio value changes.";
+            readonly payloadFields: readonly [{
+                readonly path: "value";
+                readonly type: "string";
+                readonly label: "Value";
+            }];
+        };
+    };
+    readonly props: {
+        readonly value: {
+            readonly type: "string";
+            readonly category: "State";
+            readonly label: "Value";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly options: {
+            readonly type: "array";
+            readonly category: "Content";
+            readonly label: "Options";
+            readonly itemSchema: readonly [{
+                readonly key: "value";
+                readonly schema: {
+                    readonly type: "string";
+                    readonly category: "Content";
+                    readonly label: "Value";
+                };
+            }, {
+                readonly key: "label";
+                readonly schema: {
+                    readonly type: "string";
+                    readonly category: "Content";
+                    readonly label: "Label";
+                };
+            }, {
+                readonly key: "description";
+                readonly schema: {
+                    readonly type: "string";
+                    readonly category: "Content";
+                    readonly label: "Description";
+                };
+            }, {
+                readonly key: "disabled";
+                readonly schema: {
+                    readonly type: "boolean";
+                    readonly category: "State";
+                    readonly label: "Disabled";
+                    readonly default: false;
+                };
+            }];
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly orientation: {
+            readonly type: "enum";
+            readonly category: "Layout";
+            readonly label: "Orientation";
+            readonly enum: readonly ["horizontal", "vertical"];
+            readonly default: "vertical";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly gap: {
+            readonly type: "enum";
+            readonly category: "Layout";
+            readonly label: "Gap";
+            readonly enum: readonly ["xs", "s", "m", "l"];
+            readonly authoring: {
+                readonly authority: "theme";
+                readonly scope: "component";
+                readonly allowInstanceOverride: true;
+            };
+        };
+        readonly presentation: {
+            readonly type: "enum";
+            readonly category: "Style";
+            readonly label: "Presentation";
+            readonly enum: readonly ["inline", "card"];
+            readonly default: "inline";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly color: {
+            readonly type: "enum";
+            readonly category: "Style";
+            readonly label: "Color";
+            readonly enum: readonly ["primary", "secondary", "tertiary", "quaternary", "neutral", "success", "warning", "error", "info", "danger"];
+            readonly authoring: {
+                readonly authority: "theme";
+                readonly scope: "component";
+                readonly allowInstanceOverride: true;
+            };
+        };
+        readonly size: {
+            readonly type: "enum";
+            readonly category: "Style";
+            readonly label: "Size";
+            readonly enum: readonly ["s", "m", "l"];
+            readonly authoring: {
+                readonly authority: "theme";
+                readonly scope: "component";
+                readonly allowInstanceOverride: true;
+            };
+        };
+        readonly invalid: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Invalid";
+            readonly default: false;
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly readOnly: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Read only";
+            readonly default: false;
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Disabled";
+            readonly default: false;
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+    };
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/components/radio/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/radio/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;CAOgB,CAAC;AAEvC,eAAO,MAAM,cAAc;;;;;;;CAOW,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/radio/meta.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;CAOgB,CAAC;AAEvC,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKW,CAAC"}

package/dist/components/radio/meta.js

@@ -1,17 +1,181 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+const themeAuthoring = {
+    authority: 'theme',
+    scope: 'component',
+    allowInstanceOverride: true,
+};
 export const radioMeta = {
     name: 'Radio',
     category: 'component',
     directManifestNode: false,
     allowedChildren: [],
-    note: 'Form control component; not represented as a manifest node in v1.',
+    note: 'Composition-level radio control; author repeated single-choice UI through RadioGroup.',
     props: {},
 };
 export const radioGroupMeta = {
     name: 'RadioGroup',
     category: 'component',
-    directManifestNode: false,
+    description: 'Single-choice group with inline or card presentation while preserving radio semantics.',
+    directManifestNode: true,
     allowedChildren: [],
-    note: 'Form control component; not represented as a manifest node in v1.',
-    props: {},
+    blueprint: {
+        label: 'Radio group',
+        defaultProps: {
+            value: 'option-b',
+            options: [
+                { value: 'option-a', label: 'First option', description: 'Supporting detail' },
+                { value: 'option-b', label: 'Second option', description: 'Supporting detail' },
+                { value: 'option-c', label: 'Third option', description: 'Supporting detail' },
+            ],
+            orientation: 'vertical',
+            presentation: 'inline',
+            invalid: false,
+            readOnly: false,
+            disabled: false,
+        },
+    },
+    bindings: {
+        props: {
+            value: {
+                label: 'Value',
+                description: 'Currently selected option value.',
+                value: { type: 'string' },
+                acceptsFallback: true,
+                acceptsTransforms: true,
+            },
+            disabled: {
+                label: 'Disabled',
+                description: 'Whether the complete radio group is disabled.',
+                value: { type: 'boolean' },
+                acceptsFallback: true,
+                acceptsTransforms: true,
+            },
+        },
+        events: {
+            valueChange: {
+                label: 'Value change',
+                description: 'Runs when the selected radio value changes.',
+                payload: {
+                    eventType: 'radioGroup.valueChange',
+                    fields: [{ path: 'value', type: 'string', label: 'Value' }],
+                },
+            },
+        },
+    },
+    events: {
+        valueChange: {
+            label: 'Value change',
+            eventType: 'radioGroup.valueChange',
+            description: 'Emitted when the selected radio value changes.',
+            payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+    },
+    props: {
+        value: {
+            type: 'string',
+            category: 'State',
+            label: 'Value',
+            authoring: { authority: 'instance' },
+        },
+        options: {
+            type: 'array',
+            category: 'Content',
+            label: 'Options',
+            itemSchema: [
+                {
+                    key: 'value',
+                    schema: {
+                        type: 'string',
+                        category: 'Content',
+                        label: 'Value',
+                    },
+                },
+                {
+                    key: 'label',
+                    schema: {
+                        type: 'string',
+                        category: 'Content',
+                        label: 'Label',
+                    },
+                },
+                {
+                    key: 'description',
+                    schema: {
+                        type: 'string',
+                        category: 'Content',
+                        label: 'Description',
+                    },
+                },
+                {
+                    key: 'disabled',
+                    schema: {
+                        type: 'boolean',
+                        category: 'State',
+                        label: 'Disabled',
+                        default: false,
+                    },
+                },
+            ],
+            authoring: { authority: 'instance' },
+        },
+        orientation: {
+            type: 'enum',
+            category: 'Layout',
+            label: 'Orientation',
+            enum: ['horizontal', 'vertical'],
+            default: 'vertical',
+            authoring: { authority: 'instance' },
+        },
+        gap: {
+            type: 'enum',
+            category: 'Layout',
+            label: 'Gap',
+            enum: ['xs', 's', 'm', 'l'],
+            authoring: themeAuthoring,
+        },
+        presentation: {
+            type: 'enum',
+            category: 'Style',
+            label: 'Presentation',
+            enum: ['inline', 'card'],
+            default: 'inline',
+            authoring: { authority: 'instance' },
+        },
+        color: {
+            type: 'enum',
+            category: 'Style',
+            label: 'Color',
+            enum: [...ZORA_COLORS],
+            authoring: themeAuthoring,
+        },
+        size: {
+            type: 'enum',
+            category: 'Style',
+            label: 'Size',
+            enum: ['s', 'm', 'l'],
+            authoring: themeAuthoring,
+        },
+        invalid: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Invalid',
+            default: false,
+            authoring: { authority: 'instance' },
+        },
+        readOnly: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Read only',
+            default: false,
+            authoring: { authority: 'instance' },
+        },
+        disabled: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Disabled',
+            default: false,
+            authoring: { authority: 'instance' },
+        },
+    },
 };
 //# sourceMappingURL=meta.js.map

package/dist/components/radio/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/radio/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,mEAAmE;IACzE,KAAK,EAAE,EAAE;CAC2B,CAAC;AAEvC,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,mEAAmE;IACzE,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const radioMeta = {\n  name: 'Radio',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Form control component; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n\nexport const radioGroupMeta = {\n  name: 'RadioGroup',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Form control component; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n"]}
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/radio/meta.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZORA_COLORS } from '../../internal/colorModel';\nimport type { ZoraComponentMeta } from '../../metadata';\n\nconst themeAuthoring = {\n  authority: 'theme',\n  scope: 'component',\n  allowInstanceOverride: true,\n} as const;\n\nexport const radioMeta = {\n  name: 'Radio',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Composition-level radio control; author repeated single-choice UI through RadioGroup.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n\nexport const radioGroupMeta = {\n  name: 'RadioGroup',\n  category: 'component',\n  description:\n    'Single-choice group with inline or card presentation while preserving radio semantics.',\n  directManifestNode: true,\n  allowedChildren: [],\n  blueprint: {\n    label: 'Radio group',\n    defaultProps: {\n      value: 'option-b',\n      options: [\n        { value: 'option-a', label: 'First option', description: 'Supporting detail' },\n        { value: 'option-b', label: 'Second option', description: 'Supporting detail' },\n        { value: 'option-c', label: 'Third option', description: 'Supporting detail' },\n      ],\n      orientation: 'vertical',\n      presentation: 'inline',\n      invalid: false,\n      readOnly: false,\n      disabled: false,\n    },\n  },\n  bindings: {\n    props: {\n      value: {\n        label: 'Value',\n        description: 'Currently selected option value.',\n        value: { type: 'string' },\n        acceptsFallback: true,\n        acceptsTransforms: true,\n      },\n      disabled: {\n        label: 'Disabled',\n        description: 'Whether the complete radio group is disabled.',\n        value: { type: 'boolean' },\n        acceptsFallback: true,\n        acceptsTransforms: true,\n      },\n    },\n    events: {\n      valueChange: {\n        label: 'Value change',\n        description: 'Runs when the selected radio value changes.',\n        payload: {\n          eventType: 'radioGroup.valueChange',\n          fields: [{ path: 'value', type: 'string', label: 'Value' }],\n        },\n      },\n    },\n  },\n  events: {\n    valueChange: {\n      label: 'Value change',\n      eventType: 'radioGroup.valueChange',\n      description: 'Emitted when the selected radio value changes.',\n      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],\n    },\n  },\n  props: {\n    value: {\n      type: 'string',\n      category: 'State',\n      label: 'Value',\n      authoring: { authority: 'instance' },\n    },\n    options: {\n      type: 'array',\n      category: 'Content',\n      label: 'Options',\n      itemSchema: [\n        {\n          key: 'value',\n          schema: {\n            type: 'string',\n            category: 'Content',\n            label: 'Value',\n          },\n        },\n        {\n          key: 'label',\n          schema: {\n            type: 'string',\n            category: 'Content',\n            label: 'Label',\n          },\n        },\n        {\n          key: 'description',\n          schema: {\n            type: 'string',\n            category: 'Content',\n            label: 'Description',\n          },\n        },\n        {\n          key: 'disabled',\n          schema: {\n            type: 'boolean',\n            category: 'State',\n            label: 'Disabled',\n            default: false,\n          },\n        },\n      ],\n      authoring: { authority: 'instance' },\n    },\n    orientation: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Orientation',\n      enum: ['horizontal', 'vertical'],\n      default: 'vertical',\n      authoring: { authority: 'instance' },\n    },\n    gap: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Gap',\n      enum: ['xs', 's', 'm', 'l'],\n      authoring: themeAuthoring,\n    },\n    presentation: {\n      type: 'enum',\n      category: 'Style',\n      label: 'Presentation',\n      enum: ['inline', 'card'],\n      default: 'inline',\n      authoring: { authority: 'instance' },\n    },\n    color: {\n      type: 'enum',\n      category: 'Style',\n      label: 'Color',\n      enum: [...ZORA_COLORS],\n      authoring: themeAuthoring,\n    },\n    size: {\n      type: 'enum',\n      category: 'Style',\n      label: 'Size',\n      enum: ['s', 'm', 'l'],\n      authoring: themeAuthoring,\n    },\n    invalid: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Invalid',\n      default: false,\n      authoring: { authority: 'instance' },\n    },\n    readOnly: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Read only',\n      default: false,\n      authoring: { authority: 'instance' },\n    },\n    disabled: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Disabled',\n      default: false,\n      authoring: { authority: 'instance' },\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/components/radio/resolveRadioGroupThemeRecipe.d.ts

@@ -0,0 +1,20 @@
+import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
+import type { ZoraColor } from '../../internal/colorModel';
+import type { RadioGroupProps } from './types';
+type RadioGroupGap = NonNullable<RadioGroupProps<string>['gap']>;
+type RadioGroupSize = NonNullable<RadioGroupProps<string>['size']>;
+/***
+ * Resolves RadioGroup presentation props from instance overrides and the active theme recipe.
+ */
+export declare function resolveRadioGroupThemeRecipe(input: {
+    readonly gap?: RadioGroupGap;
+    readonly color?: ZoraColor;
+    readonly size?: RadioGroupSize;
+    readonly themeFields: Readonly<Record<string, ThemeRecipeOverrideValue>>;
+}): {
+    readonly gap: RadioGroupGap;
+    readonly color: "primary" | "secondary" | "tertiary" | "quaternary" | "neutral" | "error" | "success" | "warning" | "info" | "danger";
+    readonly size: RadioGroupSize;
+};
+export {};
+//# sourceMappingURL=resolveRadioGroupThemeRecipe.d.ts.map

package/dist/components/radio/resolveRadioGroupThemeRecipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveRadioGroupThemeRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/radio/resolveRadioGroupThemeRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,aAAa,GAAG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,KAAK,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEnE;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,KAAK,EAAE;IAClD,QAAQ,CAAC,GAAG,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC,CAAC;CAC1E;;;;EAMA"}

package/dist/components/radio/resolveRadioGroupThemeRecipe.js

@@ -0,0 +1,34 @@
+/***
+ * Resolves RadioGroup presentation props from instance overrides and the active theme recipe.
+ */
+export function resolveRadioGroupThemeRecipe(input) {
+    return {
+        gap: input.gap ?? readGap(input.themeFields.gap) ?? 's',
+        color: input.color ?? readColor(input.themeFields.color) ?? 'primary',
+        size: input.size ?? readSize(input.themeFields.size) ?? 'm',
+    };
+}
+/*** Reads a valid RadioGroup gap from a theme recipe value. */
+function readGap(value) {
+    if (value === 'xs' || value === 's' || value === 'm' || value === 'l')
+        return value;
+    return undefined;
+}
+/*** Reads a valid ZORA color from a theme recipe value. */
+function readColor(value) {
+    if (value === 'primary' || value === 'secondary' || value === 'tertiary')
+        return value;
+    if (value === 'quaternary' || value === 'neutral' || value === 'danger')
+        return value;
+    if (value === 'success' || value === 'warning' || value === 'error' || value === 'info') {
+        return value;
+    }
+    return undefined;
+}
+/*** Reads a valid RadioGroup control size from a theme recipe value. */
+function readSize(value) {
+    if (value === 's' || value === 'm' || value === 'l')
+        return value;
+    return undefined;
+}
+//# sourceMappingURL=resolveRadioGroupThemeRecipe.js.map

package/dist/components/radio/resolveRadioGroupThemeRecipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveRadioGroupThemeRecipe.js","sourceRoot":"","sources":["../../../src/components/radio/resolveRadioGroupThemeRecipe.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,MAAM,UAAU,4BAA4B,CAAC,KAK5C;IACC,OAAO;QACL,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,GAAG;QACvD,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,SAAS;QACrE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,GAAG;KACnD,CAAC;AACb,CAAC;AAED,+DAA+D;AAC/D,SAAS,OAAO,CAAC,KAA2C;IAC1D,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,GAAG;QAAE,OAAO,KAAK,CAAC;IACpF,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,2DAA2D;AAC3D,SAAS,SAAS,CAAC,KAA2C;IAC5D,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,UAAU;QAAE,OAAO,KAAK,CAAC;IACvF,IAAI,KAAK,KAAK,YAAY,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IACtF,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACxF,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,wEAAwE;AACxE,SAAS,QAAQ,CAAC,KAA2C;IAC3D,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,GAAG;QAAE,OAAO,KAAK,CAAC;IAClE,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';\n\nimport type { ZoraColor } from '../../internal/colorModel';\nimport type { RadioGroupProps } from './types';\n\ntype RadioGroupGap = NonNullable<RadioGroupProps<string>['gap']>;\ntype RadioGroupSize = NonNullable<RadioGroupProps<string>['size']>;\n\n/***\n * Resolves RadioGroup presentation props from instance overrides and the active theme recipe.\n */\nexport function resolveRadioGroupThemeRecipe(input: {\n  readonly gap?: RadioGroupGap;\n  readonly color?: ZoraColor;\n  readonly size?: RadioGroupSize;\n  readonly themeFields: Readonly<Record<string, ThemeRecipeOverrideValue>>;\n}) {\n  return {\n    gap: input.gap ?? readGap(input.themeFields.gap) ?? 's',\n    color: input.color ?? readColor(input.themeFields.color) ?? 'primary',\n    size: input.size ?? readSize(input.themeFields.size) ?? 'm',\n  } as const;\n}\n\n/*** Reads a valid RadioGroup gap from a theme recipe value. */\nfunction readGap(value: ThemeRecipeOverrideValue | undefined): RadioGroupGap | undefined {\n  if (value === 'xs' || value === 's' || value === 'm' || value === 'l') return value;\n  return undefined;\n}\n\n/*** Reads a valid ZORA color from a theme recipe value. */\nfunction readColor(value: ThemeRecipeOverrideValue | undefined): ZoraColor | undefined {\n  if (value === 'primary' || value === 'secondary' || value === 'tertiary') return value;\n  if (value === 'quaternary' || value === 'neutral' || value === 'danger') return value;\n  if (value === 'success' || value === 'warning' || value === 'error' || value === 'info') {\n    return value;\n  }\n  return undefined;\n}\n\n/*** Reads a valid RadioGroup control size from a theme recipe value. */\nfunction readSize(value: ThemeRecipeOverrideValue | undefined): RadioGroupSize | undefined {\n  if (value === 's' || value === 'm' || value === 'l') return value;\n  return undefined;\n}\n"]}

package/dist/components/radio/themeRecipeMeta.d.ts

@@ -0,0 +1,26 @@
+export declare const radioGroupThemeRecipeMeta: {
+    readonly name: "RadioGroup";
+    readonly kind: "component";
+    readonly description: "Maps shared selection-control presentation choices into RadioGroup defaults.";
+    readonly fields: {
+        readonly gap: {
+            readonly type: "choice";
+            readonly label: "Gap";
+            readonly options: readonly ["xs", "s", "m", "l"];
+            readonly default: "s";
+        };
+        readonly color: {
+            readonly type: "choice";
+            readonly label: "Color";
+            readonly options: readonly ["primary", "secondary", "tertiary", "quaternary", "neutral", "success", "warning", "error", "info", "danger"];
+            readonly default: "primary";
+        };
+        readonly size: {
+            readonly type: "choice";
+            readonly label: "Size";
+            readonly options: readonly ["s", "m", "l"];
+            readonly default: "m";
+        };
+    };
+};
+//# sourceMappingURL=themeRecipeMeta.d.ts.map

package/dist/components/radio/themeRecipeMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeRecipeMeta.d.ts","sourceRoot":"","sources":["../../../src/components/radio/themeRecipeMeta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;CAwBE,CAAC"}

package/dist/components/radio/themeRecipeMeta.js

@@ -0,0 +1,27 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+export const radioGroupThemeRecipeMeta = {
+    name: 'RadioGroup',
+    kind: 'component',
+    description: 'Maps shared selection-control presentation choices into RadioGroup defaults.',
+    fields: {
+        gap: {
+            type: 'choice',
+            label: 'Gap',
+            options: ['xs', 's', 'm', 'l'],
+            default: 's',
+        },
+        color: {
+            type: 'choice',
+            label: 'Color',
+            options: ZORA_COLORS,
+            default: 'primary',
+        },
+        size: {
+            type: 'choice',
+            label: 'Size',
+            options: ['s', 'm', 'l'],
+            default: 'm',
+        },
+    },
+};
+//# sourceMappingURL=themeRecipeMeta.js.map

package/dist/components/radio/themeRecipeMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeRecipeMeta.js","sourceRoot":"","sources":["../../../src/components/radio/themeRecipeMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,8EAA8E;IAC3F,MAAM,EAAE;QACN,GAAG,EAAE;YACH,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YAC9B,OAAO,EAAE,GAAG;SACb;QACD,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,OAAO,EAAE,GAAG;SACb;KACF;CACqC,CAAC","sourcesContent":["import { ZORA_COLORS } from '../../internal/colorModel';\nimport type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';\n\nexport const radioGroupThemeRecipeMeta = {\n  name: 'RadioGroup',\n  kind: 'component',\n  description: 'Maps shared selection-control presentation choices into RadioGroup defaults.',\n  fields: {\n    gap: {\n      type: 'choice',\n      label: 'Gap',\n      options: ['xs', 's', 'm', 'l'],\n      default: 's',\n    },\n    color: {\n      type: 'choice',\n      label: 'Color',\n      options: ZORA_COLORS,\n      default: 'primary',\n    },\n    size: {\n      type: 'choice',\n      label: 'Size',\n      options: ['s', 'm', 'l'],\n      default: 'm',\n    },\n  },\n} as const satisfies ZoraThemeRecipeMeta;\n"]}

package/dist/components/radio/types.d.ts

@@ -16,5 +16,6 @@ export interface RadioGroupProps<TValue extends string> extends ZoraBaseProps, P
     options: readonly RadioGroupOption<TValue>[];
     orientation?: 'horizontal' | 'vertical';
     gap?: 'xs' | 's' | 'm' | 'l';
+    presentation?: 'inline' | 'card';
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/radio/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/radio/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;CAAG;AAEjG,MAAM,WAAW,gBAAgB,CAAC,MAAM,SAAS,MAAM;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe,CAAC,MAAM,SAAS,MAAM,CACpD,SACE,aAAa,EACb,IAAI,CACF,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC,EAC3C,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CACvD;IACH,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/radio/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;CAAG;AAEjG,MAAM,WAAW,gBAAgB,CAAC,MAAM,SAAS,MAAM;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe,CAAC,MAAM,SAAS,MAAM,CACpD,SACE,aAAa,EACb,IAAI,CACF,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC,EAC3C,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CACvD;IACH,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAClC"}

package/dist/components/radio/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/radio/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RadioProps as SurfaceRadioProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface RadioProps extends ZoraBaseProps, Omit<SurfaceRadioProps, 'mode' | 'themeId'> {}\n\nexport interface RadioGroupOption<TValue extends string> {\n  value: TValue;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\nexport interface RadioGroupProps<TValue extends string>\n  extends\n    ZoraBaseProps,\n    Pick<\n      Omit<SurfaceRadioProps, 'mode' | 'themeId'>,\n      'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'\n    > {\n  value: TValue;\n  onValueChange: (value: TValue) => void;\n  options: readonly RadioGroupOption<TValue>[];\n  orientation?: 'horizontal' | 'vertical';\n  gap?: 'xs' | 's' | 'm' | 'l';\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/radio/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RadioProps as SurfaceRadioProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface RadioProps extends ZoraBaseProps, Omit<SurfaceRadioProps, 'mode' | 'themeId'> {}\n\nexport interface RadioGroupOption<TValue extends string> {\n  value: TValue;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\nexport interface RadioGroupProps<TValue extends string>\n  extends\n    ZoraBaseProps,\n    Pick<\n      Omit<SurfaceRadioProps, 'mode' | 'themeId'>,\n      'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'\n    > {\n  value: TValue;\n  onValueChange: (value: TValue) => void;\n  options: readonly RadioGroupOption<TValue>[];\n  orientation?: 'horizontal' | 'vertical';\n  gap?: 'xs' | 's' | 'm' | 'l';\n  presentation?: 'inline' | 'card';\n}\n"]}

package/dist/metadata/themeRecipeMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeRecipeMeta.d.ts","sourceRoot":"","sources":["../../src/metadata/themeRecipeMeta.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,EAAE,2BAMpC,CAAC"}
+{"version":3,"file":"themeRecipeMeta.d.ts","sourceRoot":"","sources":["../../src/metadata/themeRecipeMeta.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,EAAE,2BAOpC,CAAC"}

package/dist/metadata/themeRecipeMeta.js

@@ -1,12 +1,14 @@
 import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';
 import { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';
 import { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';
+import { radioGroupThemeRecipeMeta } from '../components/radio/themeRecipeMeta';
 import { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';
 import { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';
 export const ZORA_THEME_RECIPE_META = {
     Button: buttonThemeRecipeMeta,
     Card: cardThemeRecipeMeta,
     Heading: headingThemeRecipeMeta,
+    RadioGroup: radioGroupThemeRecipeMeta,
     Text: textThemeRecipeMeta,
     Panel: panelThemeRecipeMeta,
 };

package/dist/metadata/themeRecipeMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeRecipeMeta.js","sourceRoot":"","sources":["../../src/metadata/themeRecipeMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGzE,MAAM,CAAC,MAAM,sBAAsB,GAAgC;IACjE,MAAM,EAAE,qBAAqB;IAC7B,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,sBAAsB;IAC/B,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';\nimport { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';\nimport { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';\nimport { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';\nimport { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';\nimport type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';\n\nexport const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {\n  Button: buttonThemeRecipeMeta,\n  Card: cardThemeRecipeMeta,\n  Heading: headingThemeRecipeMeta,\n  Text: textThemeRecipeMeta,\n  Panel: panelThemeRecipeMeta,\n};\n"]}
+{"version":3,"file":"themeRecipeMeta.js","sourceRoot":"","sources":["../../src/metadata/themeRecipeMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGzE,MAAM,CAAC,MAAM,sBAAsB,GAAgC;IACjE,MAAM,EAAE,qBAAqB;IAC7B,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,sBAAsB;IAC/B,UAAU,EAAE,yBAAyB;IACrC,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';\nimport { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';\nimport { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';\nimport { radioGroupThemeRecipeMeta } from '../components/radio/themeRecipeMeta';\nimport { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';\nimport { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';\nimport type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';\n\nexport const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {\n  Button: buttonThemeRecipeMeta,\n  Card: cardThemeRecipeMeta,\n  Heading: headingThemeRecipeMeta,\n  RadioGroup: radioGroupThemeRecipeMeta,\n  Text: textThemeRecipeMeta,\n  Panel: panelThemeRecipeMeta,\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/components/radio/RadioGroup.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from 'bun:test';
+
+import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
+
+test('resolves RadioGroup theme defaults while preserving instance overrides', () => {
+  expect(resolveRadioGroupThemeRecipe({ themeFields: {} })).toEqual({
+    gap: 's',
+    color: 'primary',
+    size: 'm',
+  });
+
+  expect(
+    resolveRadioGroupThemeRecipe({
+      gap: 'l',
+      color: 'danger',
+      size: 's',
+      themeFields: { gap: 'xs', color: 'secondary', size: 'l' },
+    }),
+  ).toEqual({ gap: 'l', color: 'danger', size: 's' });
+});
+
+test('card presentation stays on the RadioGroup and Surface Radio semantic path', async () => {
+  const source = await Bun.file('src/components/radio/RadioGroup.tsx').text();
+
+  expect(source).toContain('accessibilityRole="radiogroup"');
+  expect(source).toContain('checked={value === option.value}');
+  expect(source).toContain('<Radio');
+  expect(source).toContain("const isCard = presentation === 'card';");
+  expect(source).not.toContain('<Button');
+  expect(source).not.toContain('SelectableItem');
+});

package/src/components/radio/RadioGroup.tsx

@@ -1,12 +1,17 @@
-import { Radio } from '@ankhorage/surface';
+import { Radio, useTheme } from '@ankhorage/surface';
 import React from 'react';
 import { View } from 'react-native';
 
 import { Stack } from '../../foundation';
+import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
+import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
 import type { RadioGroupOption, RadioGroupProps } from './types';
 
+/***
+ * Resolves the themed radio-group presentation within the active ZORA scope.
+ */
 function RadioGroupInner<TValue extends string>({
   themeId: _themeId,
   mode: _mode,
@@ -14,9 +19,10 @@ function RadioGroupInner<TValue extends string>({
   onValueChange,
   options,
   orientation = 'vertical',
-  gap = 's',
-  color = 'primary',
-  size = 'm',
+  gap,
+  presentation = 'inline',
+  color,
+  size,
   invalid = false,
   readOnly = false,
   disabled = false,
@@ -24,6 +30,8 @@ function RadioGroupInner<TValue extends string>({
   interactionPolicy,
 }: RadioGroupProps<TValue>) {
   const isHorizontal = orientation === 'horizontal';
+  const themeFields = useZoraThemeRecipe('RadioGroup');
+  const recipe = resolveRadioGroupThemeRecipe({ gap, color, size, themeFields });
 
   return (
     <View
@@ -36,7 +44,7 @@ function RadioGroupInner<TValue extends string>({
     >
       <Stack
         direction={isHorizontal ? 'row' : 'column'}
-        gap={gap}
+        gap={recipe.gap}
         wrap={isHorizontal ? 'wrap' : 'nowrap'}
       >
         {options.map((option) => (
@@ -47,8 +55,10 @@ function RadioGroupInner<TValue extends string>({
             disabled={disabled || option.disabled === true}
             invalid={invalid}
             readOnly={readOnly}
-            size={size}
-            color={color}
+            size={recipe.size}
+            color={recipe.color}
+            orientation={orientation}
+            presentation={presentation}
             onSelect={onValueChange}
             interactionPolicy={interactionPolicy}
           />
@@ -63,6 +73,9 @@ function RadioGroupInner<TValue extends string>({
  */
 export const RadioGroup = withZoraThemeScope(RadioGroupInner);
 
+/***
+ * Renders one option through the single Surface Radio interaction boundary.
+ */
 function RadioGroupItem<TValue extends string>({
   option,
   checked,
@@ -71,6 +84,8 @@ function RadioGroupItem<TValue extends string>({
   readOnly,
   size,
   color,
+  orientation,
+  presentation,
   onSelect,
   interactionPolicy,
 }: {
@@ -81,10 +96,14 @@ function RadioGroupItem<TValue extends string>({
   readOnly: boolean;
   size: NonNullable<RadioGroupProps<TValue>['size']>;
   color: NonNullable<RadioGroupProps<TValue>['color']>;
+  orientation: NonNullable<RadioGroupProps<TValue>['orientation']>;
+  presentation: NonNullable<RadioGroupProps<TValue>['presentation']>;
   onSelect: (value: TValue) => void;
   interactionPolicy: RadioGroupProps<TValue>['interactionPolicy'];
 }) {
+  const { theme } = useTheme();
   const passive = interactionPolicy === 'passive';
+  const isCard = presentation === 'card';
 
   return (
     <Radio
@@ -96,13 +115,31 @@ function RadioGroupItem<TValue extends string>({
       size={size}
       color={color}
       testID={option.testID}
+      bg={
+        isCard
+          ? checked
+            ? theme.semantics.selection.background
+            : theme.semantics.surface.default
+          : undefined
+      }
+      borderColor={
+        isCard
+          ? checked
+            ? theme.semantics.selection.border
+            : theme.semantics.border.default
+          : undefined
+      }
+      borderWidth={isCard ? 1 : undefined}
+      p={isCard ? 'm' : undefined}
+      radius={isCard ? 'l' : undefined}
+      width={isCard && orientation === 'vertical' ? '100%' : undefined}
       onCheckedChange={(nextChecked) => {
         if (passive) return;
         if (nextChecked) onSelect(option.value);
       }}
     >
       <Stack gap="xs">
-        <Text>{option.label}</Text>
+        <Text weight={isCard ? 'semiBold' : undefined}>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}

package/src/components/radio/meta.ts

@@ -1,19 +1,185 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
 import type { ZoraComponentMeta } from '../../metadata';
 
+const themeAuthoring = {
+  authority: 'theme',
+  scope: 'component',
+  allowInstanceOverride: true,
+} as const;
+
 export const radioMeta = {
   name: 'Radio',
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Form control component; not represented as a manifest node in v1.',
+  note: 'Composition-level radio control; author repeated single-choice UI through RadioGroup.',
   props: {},
 } as const satisfies ZoraComponentMeta;
 
 export const radioGroupMeta = {
   name: 'RadioGroup',
   category: 'component',
-  directManifestNode: false,
+  description:
+    'Single-choice group with inline or card presentation while preserving radio semantics.',
+  directManifestNode: true,
   allowedChildren: [],
-  note: 'Form control component; not represented as a manifest node in v1.',
-  props: {},
+  blueprint: {
+    label: 'Radio group',
+    defaultProps: {
+      value: 'option-b',
+      options: [
+        { value: 'option-a', label: 'First option', description: 'Supporting detail' },
+        { value: 'option-b', label: 'Second option', description: 'Supporting detail' },
+        { value: 'option-c', label: 'Third option', description: 'Supporting detail' },
+      ],
+      orientation: 'vertical',
+      presentation: 'inline',
+      invalid: false,
+      readOnly: false,
+      disabled: false,
+    },
+  },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Currently selected option value.',
+        value: { type: 'string' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+      disabled: {
+        label: 'Disabled',
+        description: 'Whether the complete radio group is disabled.',
+        value: { type: 'boolean' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        description: 'Runs when the selected radio value changes.',
+        payload: {
+          eventType: 'radioGroup.valueChange',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'radioGroup.valueChange',
+      description: 'Emitted when the selected radio value changes.',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  props: {
+    value: {
+      type: 'string',
+      category: 'State',
+      label: 'Value',
+      authoring: { authority: 'instance' },
+    },
+    options: {
+      type: 'array',
+      category: 'Content',
+      label: 'Options',
+      itemSchema: [
+        {
+          key: 'value',
+          schema: {
+            type: 'string',
+            category: 'Content',
+            label: 'Value',
+          },
+        },
+        {
+          key: 'label',
+          schema: {
+            type: 'string',
+            category: 'Content',
+            label: 'Label',
+          },
+        },
+        {
+          key: 'description',
+          schema: {
+            type: 'string',
+            category: 'Content',
+            label: 'Description',
+          },
+        },
+        {
+          key: 'disabled',
+          schema: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Disabled',
+            default: false,
+          },
+        },
+      ],
+      authoring: { authority: 'instance' },
+    },
+    orientation: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Orientation',
+      enum: ['horizontal', 'vertical'],
+      default: 'vertical',
+      authoring: { authority: 'instance' },
+    },
+    gap: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Gap',
+      enum: ['xs', 's', 'm', 'l'],
+      authoring: themeAuthoring,
+    },
+    presentation: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Presentation',
+      enum: ['inline', 'card'],
+      default: 'inline',
+      authoring: { authority: 'instance' },
+    },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [...ZORA_COLORS],
+      authoring: themeAuthoring,
+    },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['s', 'm', 'l'],
+      authoring: themeAuthoring,
+    },
+    invalid: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Invalid',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    readOnly: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Read only',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+  },
 } as const satisfies ZoraComponentMeta;

package/src/components/radio/resolveRadioGroupThemeRecipe.ts

@@ -0,0 +1,45 @@
+import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
+
+import type { ZoraColor } from '../../internal/colorModel';
+import type { RadioGroupProps } from './types';
+
+type RadioGroupGap = NonNullable<RadioGroupProps<string>['gap']>;
+type RadioGroupSize = NonNullable<RadioGroupProps<string>['size']>;
+
+/***
+ * Resolves RadioGroup presentation props from instance overrides and the active theme recipe.
+ */
+export function resolveRadioGroupThemeRecipe(input: {
+  readonly gap?: RadioGroupGap;
+  readonly color?: ZoraColor;
+  readonly size?: RadioGroupSize;
+  readonly themeFields: Readonly<Record<string, ThemeRecipeOverrideValue>>;
+}) {
+  return {
+    gap: input.gap ?? readGap(input.themeFields.gap) ?? 's',
+    color: input.color ?? readColor(input.themeFields.color) ?? 'primary',
+    size: input.size ?? readSize(input.themeFields.size) ?? 'm',
+  } as const;
+}
+
+/*** Reads a valid RadioGroup gap from a theme recipe value. */
+function readGap(value: ThemeRecipeOverrideValue | undefined): RadioGroupGap | undefined {
+  if (value === 'xs' || value === 's' || value === 'm' || value === 'l') return value;
+  return undefined;
+}
+
+/*** Reads a valid ZORA color from a theme recipe value. */
+function readColor(value: ThemeRecipeOverrideValue | undefined): ZoraColor | undefined {
+  if (value === 'primary' || value === 'secondary' || value === 'tertiary') return value;
+  if (value === 'quaternary' || value === 'neutral' || value === 'danger') return value;
+  if (value === 'success' || value === 'warning' || value === 'error' || value === 'info') {
+    return value;
+  }
+  return undefined;
+}
+
+/*** Reads a valid RadioGroup control size from a theme recipe value. */
+function readSize(value: ThemeRecipeOverrideValue | undefined): RadioGroupSize | undefined {
+  if (value === 's' || value === 'm' || value === 'l') return value;
+  return undefined;
+}

package/src/components/radio/themeRecipeMeta.ts

@@ -0,0 +1,28 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
+
+export const radioGroupThemeRecipeMeta = {
+  name: 'RadioGroup',
+  kind: 'component',
+  description: 'Maps shared selection-control presentation choices into RadioGroup defaults.',
+  fields: {
+    gap: {
+      type: 'choice',
+      label: 'Gap',
+      options: ['xs', 's', 'm', 'l'],
+      default: 's',
+    },
+    color: {
+      type: 'choice',
+      label: 'Color',
+      options: ZORA_COLORS,
+      default: 'primary',
+    },
+    size: {
+      type: 'choice',
+      label: 'Size',
+      options: ['s', 'm', 'l'],
+      default: 'm',
+    },
+  },
+} as const satisfies ZoraThemeRecipeMeta;

package/src/components/radio/types.ts

@@ -25,4 +25,5 @@ export interface RadioGroupProps<TValue extends string>
   options: readonly RadioGroupOption<TValue>[];
   orientation?: 'horizontal' | 'vertical';
   gap?: 'xs' | 's' | 'm' | 'l';
+  presentation?: 'inline' | 'card';
 }

package/src/metadata/componentMeta.test.ts

@@ -126,6 +126,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'EmptyState',
       'Hero',
       'Button',
+      'RadioGroup',
       'ThemeModeToggle',
       'Input',
       'Textarea',
@@ -198,6 +199,26 @@ describe('ZORA_COMPONENT_META invariants', () => {
     expect(ZORA_COMPONENT_META.Image.props.alt?.authoring).toEqual({ authority: 'instance' });
   });
 
+  test('RadioGroup is a direct manifest leaf with card presentation and normalized value events', () => {
+    const radioGroup = ZORA_COMPONENT_META.RadioGroup;
+
+    expect(radioGroup.directManifestNode).toBe(true);
+    expect(radioGroup.allowedChildren).toEqual([]);
+    expect(radioGroup.props.presentation?.enum).toEqual(['inline', 'card']);
+    expect(radioGroup.props.options?.type).toBe('array');
+    expect(radioGroup.props.options?.itemSchema?.map((item) => item.key)).toEqual([
+      'value',
+      'label',
+      'description',
+      'disabled',
+    ]);
+    expect(radioGroup.bindings?.props?.value?.value).toEqual({ type: 'string' });
+    expect(radioGroup.events?.valueChange?.eventType).toBe('radioGroup.valueChange');
+    expect(radioGroup.events?.valueChange?.payloadFields).toEqual([
+      { path: 'value', type: 'string', label: 'Value' },
+    ]);
+  });
+
   test('ThemeModeToggle is a direct manifest leaf with serializable defaults', () => {
     expect(ZORA_COMPONENT_META.ThemeModeToggle.directManifestNode).toBe(true);
     expect(ZORA_COMPONENT_META.ThemeModeToggle.allowedChildren).toEqual([]);

package/src/metadata/themeRecipeMeta.test.ts

@@ -11,6 +11,7 @@ describe('ZORA_THEME_RECIPE_META', () => {
       'Button',
       'Card',
       'Heading',
+      'RadioGroup',
       'Text',
       'Panel',
     ]);
@@ -50,6 +51,9 @@ describe('ZORA_THEME_RECIPE_META', () => {
   test('keeps recipe defaults aligned with existing runtime behavior', () => {
     expect(ZORA_THEME_RECIPE_META.Button?.fields.size?.default).toBe('l');
     expect(ZORA_THEME_RECIPE_META.Card?.fields.padding?.default).toBeUndefined();
+    expect(ZORA_THEME_RECIPE_META.RadioGroup?.fields.gap?.default).toBe('s');
+    expect(ZORA_THEME_RECIPE_META.RadioGroup?.fields.color?.default).toBe('primary');
+    expect(ZORA_THEME_RECIPE_META.RadioGroup?.fields.size?.default).toBe('m');
     expect(ZORA_THEME_RECIPE_META.Text?.fields.weight?.default).toBeUndefined();
     expect(ZORA_THEME_RECIPE_META.Heading?.fields.size?.default).toBeUndefined();
   });

package/src/metadata/themeRecipeMeta.ts

@@ -1,6 +1,7 @@
 import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';
 import { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';
 import { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';
+import { radioGroupThemeRecipeMeta } from '../components/radio/themeRecipeMeta';
 import { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';
 import { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';
 import type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';
@@ -9,6 +10,7 @@ export const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {
   Button: buttonThemeRecipeMeta,
   Card: cardThemeRecipeMeta,
   Heading: headingThemeRecipeMeta,
+  RadioGroup: radioGroupThemeRecipeMeta,
   Text: textThemeRecipeMeta,
   Panel: panelThemeRecipeMeta,
 };