@ankhorage/zora 4.4.1 → 4.5.0

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

@@ -1 +1 @@
-{"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"]}
+{"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 button group',\n    defaultProps: {\n      defaultValue: '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: 'card',\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    defaultValue: {\n      type: 'string',\n      category: 'State',\n      label: 'Initial value',\n      authoring: { authority: 'instance' },\n    },\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: 'iconSource',\n          schema: { type: 'media', category: 'Content', label: 'Icon', mediaKinds: ['image'] },\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    contentOrientation: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Option content orientation',\n      enum: ['horizontal', 'vertical'],\n      default: 'horizontal',\n      authoring: { authority: 'instance' },\n    },\n    columns: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Option columns',\n      enum: [1, 2, 3, 4],\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/resolveRadioOptionColors.d.ts

@@ -0,0 +1,10 @@
+import type { SurfaceTheme } from '@ankhorage/surface';
+import type { RadioGroupProps } from './types';
+/*** Resolve selection-card decoration from the requested semantic role and field state. */
+export declare function resolveRadioOptionColors(theme: SurfaceTheme, { color, invalid, disabled, }: Pick<RadioGroupProps<string>, 'color' | 'invalid' | 'disabled'>): {
+    accent: string;
+    onAccent: string;
+    border: string;
+    surface: string;
+};
+//# sourceMappingURL=resolveRadioOptionColors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveRadioOptionColors.d.ts","sourceRoot":"","sources":["../../../src/components/radio/resolveRadioOptionColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,2FAA2F;AAC3F,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,YAAY,EACnB,EACE,KAAiB,EACjB,OAAO,EACP,QAAQ,GACT,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;;;;;EAyBnE"}

package/dist/components/radio/resolveRadioOptionColors.js

@@ -0,0 +1,27 @@
+/*** Resolve selection-card decoration from the requested semantic role and field state. */
+export function resolveRadioOptionColors(theme, { color = 'primary', invalid, disabled, }) {
+    const roles = new Map([
+        ['primary', theme.semantics.action.primary],
+        ['secondary', theme.semantics.secondary],
+        ['tertiary', theme.semantics.accent],
+        ['quaternary', theme.semantics.highlight],
+        ['neutral', theme.semantics.action.neutral],
+        ['danger', theme.semantics.action.danger],
+        ['error', theme.semantics.error],
+        ['success', theme.semantics.success],
+        ['warning', theme.semantics.warning],
+        ['info', theme.semantics.info],
+    ]);
+    const role = roles.get(invalid ? 'error' : color) ?? theme.semantics.action.primary;
+    return {
+        accent: disabled ? theme.semantics.content.disabled : role.base,
+        onAccent: disabled ? theme.semantics.surface.disabled : role.onSolidText,
+        border: disabled
+            ? theme.semantics.border.subtle
+            : invalid
+                ? role.outline
+                : theme.semantics.border.default,
+        surface: disabled ? theme.semantics.surface.disabled : theme.semantics.surface.default,
+    };
+}
+//# sourceMappingURL=resolveRadioOptionColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveRadioOptionColors.js","sourceRoot":"","sources":["../../../src/components/radio/resolveRadioOptionColors.ts"],"names":[],"mappings":"AAIA,2FAA2F;AAC3F,MAAM,UAAU,wBAAwB,CACtC,KAAmB,EACnB,EACE,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,QAAQ,GACwD;IAElE,MAAM,KAAK,GAAG,IAAI,GAAG,CAAwB;QAC3C,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QAC3C,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QACxC,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;QACpC,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QACzC,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QAC3C,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QACzC,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QAChC,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACpC,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACpC,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;KAC/B,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IACpF,OAAO;QACL,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;QAC/D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW;QACxE,MAAM,EAAE,QAAQ;YACd,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM;YAC/B,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;QACpC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;KACvF,CAAC;AACJ,CAAC","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\n\nimport type { RadioGroupProps } from './types';\n\n/*** Resolve selection-card decoration from the requested semantic role and field state. */\nexport function resolveRadioOptionColors(\n  theme: SurfaceTheme,\n  {\n    color = 'primary',\n    invalid,\n    disabled,\n  }: Pick<RadioGroupProps<string>, 'color' | 'invalid' | 'disabled'>,\n) {\n  const roles = new Map<string, RoleSemantics>([\n    ['primary', theme.semantics.action.primary],\n    ['secondary', theme.semantics.secondary],\n    ['tertiary', theme.semantics.accent],\n    ['quaternary', theme.semantics.highlight],\n    ['neutral', theme.semantics.action.neutral],\n    ['danger', theme.semantics.action.danger],\n    ['error', theme.semantics.error],\n    ['success', theme.semantics.success],\n    ['warning', theme.semantics.warning],\n    ['info', theme.semantics.info],\n  ]);\n  const role = roles.get(invalid ? 'error' : color) ?? theme.semantics.action.primary;\n  return {\n    accent: disabled ? theme.semantics.content.disabled : role.base,\n    onAccent: disabled ? theme.semantics.surface.disabled : role.onSolidText,\n    border: disabled\n      ? theme.semantics.border.subtle\n      : invalid\n        ? role.outline\n        : theme.semantics.border.default,\n    surface: disabled ? theme.semantics.surface.disabled : theme.semantics.surface.default,\n  };\n}\n"]}

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

@@ -1,21 +1,31 @@
 import type { RadioProps as SurfaceRadioProps } from '@ankhorage/surface';
 import type React from 'react';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { IconProps } from '../icon';
 export interface RadioProps extends ZoraBaseProps, Omit<SurfaceRadioProps, 'mode' | 'themeId'> {
 }
 export interface RadioGroupOption<TValue extends string> {
     value: TValue;
     label: React.ReactNode;
     description?: React.ReactNode;
+    /** SVG media is resolved by the consuming runtime before rendering. */
+    iconSource?: Extract<IconProps, {
+        source: unknown;
+    }>['source'];
     disabled?: boolean;
     testID?: string;
 }
 export interface RadioGroupProps<TValue extends string> extends ZoraBaseProps, Pick<Omit<SurfaceRadioProps, 'mode' | 'themeId'>, 'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'> {
-    value: TValue;
-    onValueChange: (value: TValue) => void;
+    value?: TValue;
+    defaultValue?: TValue;
+    onValueChange?: (value: TValue) => void;
     options: readonly RadioGroupOption<TValue>[];
     orientation?: 'horizontal' | 'vertical';
     gap?: 'xs' | 's' | 'm' | 'l';
     presentation?: 'inline' | 'card';
+    /** Arrangement inside a selection card, independent of the group direction. */
+    contentOrientation?: 'horizontal' | 'vertical';
+    /** Equal-width card columns; omitted columns follow orientation. */
+    columns?: 1 | 2 | 3 | 4;
 }
 //# 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;IAC7B,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAClC"}
+{"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;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,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,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC/D,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,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,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;IACjC,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAC/C,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACzB"}

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  presentation?: 'inline' | 'card';\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';\nimport type { IconProps } from '../icon';\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  /** SVG media is resolved by the consuming runtime before rendering. */\n  iconSource?: Extract<IconProps, { source: unknown }>['source'];\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  defaultValue?: 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  /** Arrangement inside a selection card, independent of the group direction. */\n  contentOrientation?: 'horizontal' | 'vertical';\n  /** Equal-width card columns; omitted columns follow orientation. */\n  columns?: 1 | 2 | 3 | 4;\n}\n"]}

package/dist/constants/keyboard.d.ts

@@ -0,0 +1,3 @@
+/** Shared arrow-key offsets; string keys also permit lookup of unrelated keyboard events. */
+export declare const DIRECTION_MODIFIERS: ReadonlyMap<string, number>;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/constants/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/constants/keyboard.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAK1D,CAAC"}

package/dist/constants/keyboard.js

@@ -0,0 +1,8 @@
+/** Shared arrow-key offsets; string keys also permit lookup of unrelated keyboard events. */
+export const DIRECTION_MODIFIERS = new Map([
+    ['ArrowRight', 1],
+    ['ArrowDown', 1],
+    ['ArrowLeft', -1],
+    ['ArrowUp', -1],
+]);
+//# sourceMappingURL=keyboard.js.map

package/dist/constants/keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/constants/keyboard.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,MAAM,CAAC,MAAM,mBAAmB,GAAgC,IAAI,GAAG,CAAC;IACtE,CAAC,YAAY,EAAE,CAAC,CAAC;IACjB,CAAC,WAAW,EAAE,CAAC,CAAC;IAChB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IACjB,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC,CAAC","sourcesContent":["/** Shared arrow-key offsets; string keys also permit lookup of unrelated keyboard events. */\nexport const DIRECTION_MODIFIERS: ReadonlyMap<string, number> = new Map([\n  ['ArrowRight', 1],\n  ['ArrowDown', 1],\n  ['ArrowLeft', -1],\n  ['ArrowUp', -1],\n]);\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "4.4.1",
+  "version": "4.5.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

@@ -19,13 +19,17 @@ test('resolves RadioGroup theme defaults while preserving instance overrides', (
   ).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');
+test('icon radio options expose serializable authoring metadata', async () => {
+  const { radioGroupMeta } = await import('./meta');
+  expect(radioGroupMeta.directManifestNode).toBe(true);
+  expect(radioGroupMeta.blueprint.label).toBe('Radio button group');
+  expect(radioGroupMeta.blueprint.defaultProps.options.map((option) => option.value)).toContain(
+    radioGroupMeta.blueprint.defaultProps.defaultValue,
+  );
+  expect(
+    radioGroupMeta.props.options.itemSchema.find((field) => field.key === 'iconSource')?.schema,
+  ).toMatchObject({ type: 'media', mediaKinds: ['image'] });
+  expect(radioGroupMeta.props.columns.enum).toEqual([1, 2, 3, 4]);
+  expect(radioGroupMeta.props.contentOrientation.enum).toEqual(['horizontal', 'vertical']);
+  expect(radioGroupMeta.events.valueChange.eventType).toBe('radioGroup.valueChange');
 });

package/src/components/radio/RadioGroup.tsx

@@ -1,145 +1,117 @@
-import { Radio, useTheme } from '@ankhorage/surface';
+import { Radio } from '@ankhorage/surface';
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { Stack } from '../../foundation';
 import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
+import { RadioOptionControl } from './RadioOptionControl';
 import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
-import type { RadioGroupOption, RadioGroupProps } from './types';
+import type { RadioGroupProps } from './types';
 
-/***
- * Resolves the themed radio-group presentation within the active ZORA scope.
- */
+/*** Present one controlled single-choice group as inline radios or icon radio options. */
+export const RadioGroup = withZoraThemeScope(RadioGroupInner);
+
+/*** Resolve shared presentation once and preserve a single interaction boundary per option. */
 function RadioGroupInner<TValue extends string>({
   themeId: _themeId,
   mode: _mode,
-  value,
-  onValueChange,
-  options,
-  orientation = 'vertical',
-  gap,
-  presentation = 'inline',
-  color,
-  size,
-  invalid = false,
-  readOnly = false,
-  disabled = false,
-  testID,
-  interactionPolicy,
+  ...props
 }: RadioGroupProps<TValue>) {
-  const isHorizontal = orientation === 'horizontal';
+  const [localValue, setLocalValue] = React.useState(props.defaultValue);
+  const onValueChange = (next: TValue) => {
+    if (props.value === undefined) setLocalValue(next);
+    props.onValueChange?.(next);
+  };
+  const selectedProps = { ...props, value: props.value ?? localValue, onValueChange };
   const themeFields = useZoraThemeRecipe('RadioGroup');
-  const recipe = resolveRadioGroupThemeRecipe({ gap, color, size, themeFields });
+  const recipe = resolveRadioGroupThemeRecipe({ ...props, themeFields });
+  if (props.presentation !== 'card') return <RadioGroupInline {...selectedProps} {...recipe} />;
+  const columns =
+    props.columns ?? (props.orientation === 'horizontal' ? Math.max(1, props.options.length) : 1);
+  const rows = Array.from({ length: Math.ceil(props.options.length / columns) }, (_, index) =>
+    props.options.slice(index * columns, (index + 1) * columns),
+  );
+  return (
+    <View testID={props.testID} accessibilityRole="radiogroup">
+      <Stack gap={recipe.gap}>
+        {rows.map((options, index) => (
+          <Stack key={index} direction="row" gap={recipe.gap}>
+            {options.map((option) => (
+              <View key={option.value} style={styles.option}>
+                <RadioGroupItem {...selectedProps} {...recipe} option={option} />
+              </View>
+            ))}
+            {Array.from({ length: columns - options.length }, (_, slot) => (
+              <View key={`empty-${slot}`} style={styles.option} />
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    </View>
+  );
+}
 
+/*** Preserve ordinary radio wrapping independently of the icon-option grid. */
+function RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>) {
   return (
-    <View
-      testID={testID}
-      accessibilityRole="radiogroup"
-      style={{
-        flexDirection: isHorizontal ? 'row' : 'column',
-        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
-      }}
-    >
+    <View testID={props.testID} accessibilityRole="radiogroup">
       <Stack
-        direction={isHorizontal ? 'row' : 'column'}
-        gap={recipe.gap}
-        wrap={isHorizontal ? 'wrap' : 'nowrap'}
+        direction={props.orientation === 'horizontal' ? 'row' : 'column'}
+        gap={props.gap}
+        wrap="wrap"
       >
-        {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}
-          />
+        {props.options.map((option) => (
+          <RadioGroupItem key={option.value} {...props} option={option} />
         ))}
       </Stack>
     </View>
   );
 }
 
-/***
- * Renders a group of radio options for selecting a single value.
- */
-export const RadioGroup = withZoraThemeScope(RadioGroupInner);
-
-/***
- * Renders one option through the single Surface Radio interaction boundary.
- */
-function RadioGroupItem<TValue extends string>({
-  option,
-  checked,
-  disabled,
-  invalid,
-  readOnly,
-  size,
-  color,
-  orientation,
-  presentation,
-  onSelect,
-  interactionPolicy,
-}: {
-  option: RadioGroupOption<TValue>;
-  checked: boolean;
-  disabled: boolean;
-  invalid: boolean;
-  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';
-
+/*** Delegate icon options to their composed radio boundary and ordinary options to Surface Radio. */
+function RadioGroupItem<TValue extends string>(
+  props: RadioGroupProps<TValue> & {
+    option: RadioGroupProps<TValue>['options'][number];
+  },
+) {
+  const { option, value, onValueChange, interactionPolicy, color, size } = props;
+  const checked = value === option.value;
+  const inactive = props.disabled === true || option.disabled === true;
+  const readOnly = props.readOnly === true;
+  const invalid = props.invalid === true;
+  const onSelect = () => {
+    if (!inactive && !readOnly && interactionPolicy !== 'passive' && !checked)
+      onValueChange?.(option.value);
+  };
+  if (props.presentation === 'card') {
+    return (
+      <RadioOptionControl
+        {...props}
+        checked={checked}
+        disabled={inactive}
+        readOnly={readOnly}
+        invalid={invalid}
+        layout={props.contentOrientation ?? 'horizontal'}
+        onSelect={onSelect}
+      />
+    );
+  }
   return (
     <Radio
-      interactionPolicy={interactionPolicy}
       checked={checked}
-      disabled={disabled}
-      invalid={invalid}
+      disabled={inactive}
       readOnly={readOnly}
-      size={size}
+      invalid={invalid}
+      interactionPolicy={interactionPolicy}
       color={color}
+      size={size}
       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);
-      }}
+      onCheckedChange={onSelect}
     >
       <Stack gap="xs">
-        <Text weight={isCard ? 'semiBold' : undefined}>{option.label}</Text>
+        <Text>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}
@@ -149,3 +121,5 @@ function RadioGroupItem<TValue extends string>({
     </Radio>
   );
 }
+
+const styles = StyleSheet.create({ option: { flex: 1, minWidth: 0 } });

package/src/components/radio/RadioOptionControl.tsx

@@ -0,0 +1,192 @@
+import { useTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+
+import { Icon } from '../icon';
+import { Text } from '../text';
+import {
+  handleRadioOptionKeyDown,
+  type RadioOptionKeyboardTarget,
+} from './handleRadioOptionKeyDown';
+import { resolveRadioOptionColors } from './resolveRadioOptionColors';
+import type { RadioGroupProps } from './types';
+
+/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */
+export function RadioOptionControl<TValue extends string>(props: RadioOptionControlProps<TValue>) {
+  const { theme } = useTheme();
+  const { option, checked, disabled, readOnly, interactionPolicy, onSelect } = props;
+  const colors = resolveRadioOptionColors(theme, props);
+  const [focused, setFocused] = React.useState(false);
+  const keyboardProps =
+    Platform.OS === 'web' && !readOnly && !disabled && interactionPolicy !== 'passive'
+      ? {
+          onKeyDown: (event: React.KeyboardEvent<RadioOptionKeyboardTarget>) =>
+            handleRadioOptionKeyDown(event, onSelect),
+        }
+      : {};
+  const controlStyle = {
+    flex: 1,
+    width: '100%' as const,
+    minHeight: props.size === 'l' ? 84 : 44,
+    borderWidth: checked || focused ? 2 : 1,
+    borderColor: focused ? theme.semantics.border.focus : checked ? colors.accent : colors.border,
+    borderRadius: theme.radii.l,
+    backgroundColor: colors.surface,
+  };
+  return (
+    <Pressable
+      {...keyboardProps}
+      accessibilityRole="radio"
+      accessibilityState={{ checked, disabled }}
+      aria-checked={checked}
+      aria-disabled={disabled}
+      aria-readonly={readOnly}
+      disabled={disabled}
+      onPress={readOnly || interactionPolicy === 'passive' ? undefined : onSelect}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      testID={option.testID}
+      style={controlStyle}
+    >
+      {(state) => <RadioOptionControlBody {...props} pressed={state.pressed} />}
+    </Pressable>
+  );
+}
+
+/*** Arrange the icon, label and passive indicator within the native radio press target. */
+function RadioOptionControlBody<TValue extends string>(
+  props: RadioOptionControlProps<TValue> & { pressed: boolean },
+) {
+  const { theme } = useTheme();
+  const colors = resolveRadioOptionColors(theme, props);
+  const contentStyle = {
+    padding: props.size === 's' ? theme.spacing.s : props.size === 'm' ? 12 : theme.spacing.m,
+    gap:
+      props.layout === 'vertical' || !props.option.iconSource ? theme.spacing.s : theme.spacing.m,
+    ...(!props.option.iconSource ? { flexDirection: 'row-reverse' as const } : {}),
+    opacity: props.disabled ? 0.5 : props.pressed ? 0.7 : 1,
+  };
+  return (
+    <View
+      style={[
+        styles.content,
+        props.layout === 'vertical' ? styles.vertical : styles.horizontal,
+        contentStyle,
+      ]}
+    >
+      <RadioOptionControlContent {...props} />
+      {props.option.iconSource || props.checked ? (
+        <View style={props.layout === 'vertical' ? styles.corner : undefined}>
+          <RadioOptionControlIndicator
+            checked={props.checked}
+            accent={colors.accent}
+            onAccent={colors.onAccent}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+interface RadioOptionControlProps<TValue extends string> extends Pick<
+  RadioGroupProps<TValue>,
+  'color' | 'size' | 'interactionPolicy'
+> {
+  option: RadioGroupProps<TValue>['options'][number];
+  checked: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  layout: 'horizontal' | 'vertical';
+  onSelect: () => void;
+}
+
+/*** Keep decoration passive while allowing labels to wrap at narrow widths and large text sizes. */
+function RadioOptionControlContent<TValue extends string>({
+  option,
+  layout,
+  size,
+  color,
+  invalid,
+  disabled,
+}: RadioOptionControlProps<TValue>) {
+  const { theme } = useTheme();
+  const colors = resolveRadioOptionColors(theme, { color, invalid, disabled });
+  return (
+    <>
+      {option.iconSource ? (
+        <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+          <Icon source={option.iconSource} size={size === 'l' ? 36 : 28} color={colors.accent} />
+        </View>
+      ) : null}
+      <View style={layout === 'horizontal' ? styles.label : styles.centerLabel}>
+        <Text
+          variant={size === 'l' ? 'body' : 'bodySmall'}
+          weight="semiBold"
+          align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}
+        >
+          {option.label}
+        </Text>
+        {option.description ? (
+          <Text
+            emphasis="muted"
+            variant="bodySmall"
+            align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}
+          >
+            {option.description}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+}
+
+/*** Draw a passive check using themed geometry without requiring an application media asset. */
+function RadioOptionControlIndicator({
+  checked,
+  accent,
+  onAccent,
+}: {
+  checked: boolean;
+  accent: string;
+  onAccent: string;
+}) {
+  const indicatorStyle = { backgroundColor: checked ? accent : 'transparent' };
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[styles.indicator, indicatorStyle]}
+    >
+      {checked ? <View style={[styles.check, { borderColor: onAccent }]} /> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: { gap: 16, flex: 1, minWidth: 0 },
+  horizontal: { flexDirection: 'row', alignItems: 'center' },
+  vertical: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 24,
+  },
+  label: { flex: 1, minWidth: 0, gap: 4 },
+  centerLabel: { alignSelf: 'stretch', gap: 4 },
+  corner: { position: 'absolute', right: 8, top: 8 },
+  indicator: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  check: {
+    width: 7,
+    height: 12,
+    borderRightWidth: 2.5,
+    borderBottomWidth: 2.5,
+    transform: [{ rotate: '45deg' }, { translateY: -2 }],
+  },
+});