@ankhorage/zora 4.3.0 → 4.4.1

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/allowedChildren.ts

@@ -10,6 +10,7 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'Image',
   'Button',
   'ButtonGroup',
+  'RadioGroup',
   'ThemeModeToggle',
   'Input',
   'Textarea',

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/radioGroupReachability.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from './index';
+
+const containers = [
+  ['Screen', ZORA_COMPONENT_META.Screen],
+  ['ScreenSection', ZORA_COMPONENT_META.ScreenSection],
+  ['Box', ZORA_COMPONENT_META.Box],
+  ['Stack', ZORA_COMPONENT_META.Stack],
+  ['Card', ZORA_COMPONENT_META.Card],
+  ['Panel', ZORA_COMPONENT_META.Panel],
+] as const;
+
+test('keeps manifest RadioGroup reachable through canonical container composition', () => {
+  expect(ZORA_COMPONENT_META.RadioGroup.directManifestNode).toBe(true);
+
+  for (const [name, metadata] of containers) {
+    expect(metadata.allowedChildren, `${name} should allow RadioGroup`).toContain('RadioGroup');
+  }
+});

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,
 };