@ankhorage/zora 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 4.5.0
+
+### Minor Changes
+
+- f53e341: Add SVG icon options, equal-width columns and content orientation to RadioGroup. Support local initial selection through defaultValue, accessible icon radio controls on web and native, and a directly insertable Radio button group blueprint for Studio.
+
+## 4.4.1
+
+### Patch Changes
+
+- 0349716: Allow manifest-authorable RadioGroup nodes inside the canonical screen and container composition contract.
+
 ## 4.4.0
 
 ### Minor Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # ZORA
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v4.2.2](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v4.4.1](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
 
 Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
 

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

@@ -2,7 +2,7 @@ export declare const cardMeta: {
     readonly name: "Card";
     readonly category: "component";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Card";
         readonly defaultProps: {

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import type { RadioGroupProps } from './types';
-/***
- * Renders a group of radio options for selecting a single value.
- */
+/*** Present one controlled single-choice group as inline radios or icon radio options. */
 export declare const RadioGroup: <TValue extends string>(props: RadioGroupProps<TValue>) => React.ReactElement | null;
 //# sourceMappingURL=RadioGroup.d.ts.map

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;AAQ1B,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,SAAS,CAAC;AA6DjE;;GAEG;AACH,eAAO,MAAM,UAAU,GA3DE,MAAM,SAAS,MAAM,8DA2De,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,0FAA0F;AAC1F,eAAO,MAAM,UAAU,GAGE,MAAM,SAAS,MAAM,8DAHe,CAAC"}

package/dist/components/radio/RadioGroup.js

@@ -1,58 +1,70 @@
-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';
-/***
- * 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';
+/*** 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({ themeId: _themeId, mode: _mode, ...props }) {
+    const [localValue, setLocalValue] = React.useState(props.defaultValue);
+    const onValueChange = (next) => {
+        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 });
-    return (<View testID={testID} accessibilityRole="radiogroup" style={{
-            flexDirection: isHorizontal ? 'row' : 'column',
-            flexWrap: isHorizontal ? 'wrap' : 'nowrap',
-        }}>
-      <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}/>))}
+    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>);
 }
-/***
- * 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({ option, checked, disabled, invalid, readOnly, size, color, orientation, presentation, onSelect, interactionPolicy, }) {
-    const { theme } = useTheme();
-    const passive = interactionPolicy === 'passive';
-    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);
-        }}>
+/*** Preserve ordinary radio wrapping independently of the icon-option grid. */
+function RadioGroupInline(props) {
+    return (<View testID={props.testID} accessibilityRole="radiogroup">
+      <Stack direction={props.orientation === 'horizontal' ? 'row' : 'column'} gap={props.gap} wrap="wrap">
+        {props.options.map((option) => (<RadioGroupItem key={option.value} {...props} option={option}/>))}
+      </Stack>
+    </View>);
+}
+/*** Delegate icon options to their composed radio boundary and ordinary options to Surface Radio. */
+function RadioGroupItem(props) {
+    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 checked={checked} disabled={inactive} readOnly={readOnly} invalid={invalid} interactionPolicy={interactionPolicy} color={color} size={size} testID={option.testID} 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}
           </Text>) : null}
       </Stack>
     </Radio>);
 }
+const styles = StyleSheet.create({ option: { flex: 1, minWidth: 0 } });
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAG9E;;GAEG;AACH,SAAS,eAAe,CAAwB,EAC9C,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,GAAG,UAAU,EACxB,GAAG,EACH,YAAY,GAAG,QAAQ,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,iBAAiB,GACO;IACxB,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAC;IAClD,MAAM,WAAW,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,4BAA4B,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;IAE/E,OAAO,CACL,CAAC,IAAI,CACH,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,YAAY,CAC9B,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YAC9C,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SAC3C,CAAC,CAEF;MAAA,CAAC,KAAK,CACJ,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC3C,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAChB,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAEvC;QAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAChC,QAAQ,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,CAC/C,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,aAAa,CAAC,CACxB,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,EACrC,CACH,CAAC,CACJ;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAE9D;;GAEG;AACH,SAAS,cAAc,CAAwB,EAC7C,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,iBAAiB,GAalB;IACC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,iBAAiB,KAAK,SAAS,CAAC;IAChD,MAAM,MAAM,GAAG,YAAY,KAAK,MAAM,CAAC;IAEvC,OAAO,CACL,CAAC,KAAK,CACJ,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACtB,EAAE,CAAC,CACD,MAAM;YACJ,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,UAAU;gBACtC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YACnC,CAAC,CAAC,SACN,CAAC,CACD,WAAW,CAAC,CACV,MAAM;YACJ,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM;gBAClC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;YAClC,CAAC,CAAC,SACN,CAAC,CACD,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACpC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAC5B,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CACjC,KAAK,CAAC,CAAC,MAAM,IAAI,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CACjE,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE;YAC/B,IAAI,OAAO;gBAAE,OAAO;YACpB,IAAI,WAAW;gBAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC,CAEF;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;QAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CACnE;QAAA,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CACpB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CACtC;YAAA,CAAC,MAAM,CAAC,WAAW,CACrB;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC","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"]}
+{"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 { StyleSheet, View } from 'react-native';\n\nimport { Stack } from '../../foundation';\nimport { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Text } from '../text';\nimport { RadioOptionControl } from './RadioOptionControl';\nimport { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';\nimport type { RadioGroupProps } from './types';\n\n/*** Present one controlled single-choice group as inline radios or icon radio options. */\nexport const RadioGroup = withZoraThemeScope(RadioGroupInner);\n\n/*** Resolve shared presentation once and preserve a single interaction boundary per option. */\nfunction RadioGroupInner<TValue extends string>({\n  themeId: _themeId,\n  mode: _mode,\n  ...props\n}: RadioGroupProps<TValue>) {\n  const [localValue, setLocalValue] = React.useState(props.defaultValue);\n  const onValueChange = (next: TValue) => {\n    if (props.value === undefined) setLocalValue(next);\n    props.onValueChange?.(next);\n  };\n  const selectedProps = { ...props, value: props.value ?? localValue, onValueChange };\n  const themeFields = useZoraThemeRecipe('RadioGroup');\n  const recipe = resolveRadioGroupThemeRecipe({ ...props, themeFields });\n  if (props.presentation !== 'card') return <RadioGroupInline {...selectedProps} {...recipe} />;\n  const columns =\n    props.columns ?? (props.orientation === 'horizontal' ? Math.max(1, props.options.length) : 1);\n  const rows = Array.from({ length: Math.ceil(props.options.length / columns) }, (_, index) =>\n    props.options.slice(index * columns, (index + 1) * columns),\n  );\n  return (\n    <View testID={props.testID} accessibilityRole=\"radiogroup\">\n      <Stack gap={recipe.gap}>\n        {rows.map((options, index) => (\n          <Stack key={index} direction=\"row\" gap={recipe.gap}>\n            {options.map((option) => (\n              <View key={option.value} style={styles.option}>\n                <RadioGroupItem {...selectedProps} {...recipe} option={option} />\n              </View>\n            ))}\n            {Array.from({ length: columns - options.length }, (_, slot) => (\n              <View key={`empty-${slot}`} style={styles.option} />\n            ))}\n          </Stack>\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\n/*** Preserve ordinary radio wrapping independently of the icon-option grid. */\nfunction RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>) {\n  return (\n    <View testID={props.testID} accessibilityRole=\"radiogroup\">\n      <Stack\n        direction={props.orientation === 'horizontal' ? 'row' : 'column'}\n        gap={props.gap}\n        wrap=\"wrap\"\n      >\n        {props.options.map((option) => (\n          <RadioGroupItem key={option.value} {...props} option={option} />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\n/*** Delegate icon options to their composed radio boundary and ordinary options to Surface Radio. */\nfunction RadioGroupItem<TValue extends string>(\n  props: RadioGroupProps<TValue> & {\n    option: RadioGroupProps<TValue>['options'][number];\n  },\n) {\n  const { option, value, onValueChange, interactionPolicy, color, size } = props;\n  const checked = value === option.value;\n  const inactive = props.disabled === true || option.disabled === true;\n  const readOnly = props.readOnly === true;\n  const invalid = props.invalid === true;\n  const onSelect = () => {\n    if (!inactive && !readOnly && interactionPolicy !== 'passive' && !checked)\n      onValueChange?.(option.value);\n  };\n  if (props.presentation === 'card') {\n    return (\n      <RadioOptionControl\n        {...props}\n        checked={checked}\n        disabled={inactive}\n        readOnly={readOnly}\n        invalid={invalid}\n        layout={props.contentOrientation ?? 'horizontal'}\n        onSelect={onSelect}\n      />\n    );\n  }\n  return (\n    <Radio\n      checked={checked}\n      disabled={inactive}\n      readOnly={readOnly}\n      invalid={invalid}\n      interactionPolicy={interactionPolicy}\n      color={color}\n      size={size}\n      testID={option.testID}\n      onCheckedChange={onSelect}\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\nconst styles = StyleSheet.create({ option: { flex: 1, minWidth: 0 } });\n"]}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { RadioGroupProps } from './types';
+/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */
+export declare function RadioOptionControl<TValue extends string>(props: RadioOptionControlProps<TValue>): React.JSX.Element;
+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;
+}
+export {};
+//# sourceMappingURL=RadioOptionControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOptionControl.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioOptionControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,oGAAoG;AACpG,wBAAgB,kBAAkB,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,qBAuC/F;AAqCD,UAAU,uBAAuB,CAAC,MAAM,SAAS,MAAM,CAAE,SAAQ,IAAI,CACnE,eAAe,CAAC,MAAM,CAAC,EACvB,OAAO,GAAG,MAAM,GAAG,mBAAmB,CACvC;IACC,MAAM,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,YAAY,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/components/radio/RadioOptionControl.js

@@ -0,0 +1,105 @@
+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, } from './handleRadioOptionKeyDown';
+import { resolveRadioOptionColors } from './resolveRadioOptionColors';
+/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */
+export function RadioOptionControl(props) {
+    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) => handleRadioOptionKeyDown(event, onSelect),
+        }
+        : {};
+    const controlStyle = {
+        flex: 1,
+        width: '100%',
+        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(props) {
+    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' } : {}),
+        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>);
+}
+/*** Keep decoration passive while allowing labels to wrap at narrow widths and large text sizes. */
+function RadioOptionControlContent({ option, layout, size, color, invalid, disabled, }) {
+    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, }) {
+    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 }],
+    },
+});
+//# sourceMappingURL=RadioOptionControl.js.map

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

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

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

@@ -0,0 +1,13 @@
+import type { KeyboardEvent } from 'react';
+/*** Support Space and directional navigation for web radio options without affecting native presses. */
+export declare function handleRadioOptionKeyDown(event: KeyboardEvent<RadioOptionKeyboardTarget>, select: () => void): void;
+/** Minimal web target contract keeps the native build independent of DOM ambient libraries. */
+export interface RadioOptionKeyboardTarget {
+    closest(selector: string): {
+        querySelectorAll(selector: string): ArrayLike<RadioOptionKeyboardTarget>;
+    } | null;
+    getAttribute(name: string): string | null;
+    focus(): void;
+    click(): void;
+}
+//# sourceMappingURL=handleRadioOptionKeyDown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"handleRadioOptionKeyDown.d.ts","sourceRoot":"","sources":["../../../src/components/radio/handleRadioOptionKeyDown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,wGAAwG;AACxG,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,aAAa,CAAC,yBAAyB,CAAC,EAC/C,MAAM,EAAE,MAAM,IAAI,GACjB,IAAI,CAkBN;AAED,+FAA+F;AAC/F,MAAM,WAAW,yBAAyB;IACxC,OAAO,CACL,QAAQ,EAAE,MAAM,GACf;QAAE,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,yBAAyB,CAAC,CAAA;KAAE,GAAG,IAAI,CAAC;IACvF,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1C,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;CACf"}

package/dist/components/radio/handleRadioOptionKeyDown.js

@@ -0,0 +1,22 @@
+import { DIRECTION_MODIFIERS } from '../../constants/keyboard';
+/*** Support Space and directional navigation for web radio options without affecting native presses. */
+export function handleRadioOptionKeyDown(event, select) {
+    if (event.key === ' ') {
+        event.preventDefault();
+        select();
+        return;
+    }
+    const direction = DIRECTION_MODIFIERS.get(event.key);
+    if (direction === undefined)
+        return;
+    const group = event.currentTarget.closest('[role="radiogroup"]');
+    const options = Array.from(group?.querySelectorAll('[role="radio"]') ?? []).filter((option) => option.getAttribute('aria-disabled') !== 'true');
+    const index = options.indexOf(event.currentTarget);
+    if (index < 0 || options.length === 0)
+        return;
+    event.preventDefault();
+    const next = options.at((index + direction + options.length) % options.length);
+    next?.focus();
+    next?.click();
+}
+//# sourceMappingURL=handleRadioOptionKeyDown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"handleRadioOptionKeyDown.js","sourceRoot":"","sources":["../../../src/components/radio/handleRadioOptionKeyDown.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,wGAAwG;AACxG,MAAM,UAAU,wBAAwB,CACtC,KAA+C,EAC/C,MAAkB;IAElB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,EAAE,CAAC;QACT,OAAO;IACT,CAAC;IACD,MAAM,SAAS,GAAG,mBAAmB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrD,IAAI,SAAS,KAAK,SAAS;QAAE,OAAO;IACpC,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAChF,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAC5D,CAAC;IACF,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACnD,IAAI,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;IAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/E,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,IAAI,EAAE,KAAK,EAAE,CAAC;AAChB,CAAC","sourcesContent":["import type { KeyboardEvent } from 'react';\n\nimport { DIRECTION_MODIFIERS } from '../../constants/keyboard';\n\n/*** Support Space and directional navigation for web radio options without affecting native presses. */\nexport function handleRadioOptionKeyDown(\n  event: KeyboardEvent<RadioOptionKeyboardTarget>,\n  select: () => void,\n): void {\n  if (event.key === ' ') {\n    event.preventDefault();\n    select();\n    return;\n  }\n  const direction = DIRECTION_MODIFIERS.get(event.key);\n  if (direction === undefined) return;\n  const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n  const options = Array.from(group?.querySelectorAll('[role=\"radio\"]') ?? []).filter(\n    (option) => option.getAttribute('aria-disabled') !== 'true',\n  );\n  const index = options.indexOf(event.currentTarget);\n  if (index < 0 || options.length === 0) return;\n  event.preventDefault();\n  const next = options.at((index + direction + options.length) % options.length);\n  next?.focus();\n  next?.click();\n}\n\n/** Minimal web target contract keeps the native build independent of DOM ambient libraries. */\nexport interface RadioOptionKeyboardTarget {\n  closest(\n    selector: string,\n  ): { querySelectorAll(selector: string): ArrayLike<RadioOptionKeyboardTarget> } | null;\n  getAttribute(name: string): string | null;\n  focus(): void;\n  click(): void;\n}\n"]}

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

@@ -13,9 +13,9 @@ export declare const radioGroupMeta: {
     readonly directManifestNode: true;
     readonly allowedChildren: readonly [];
     readonly blueprint: {
-        readonly label: "Radio group";
+        readonly label: "Radio button group";
         readonly defaultProps: {
-            readonly value: "option-b";
+            readonly defaultValue: "option-b";
             readonly options: readonly [{
                 readonly value: "option-a";
                 readonly label: "First option";
@@ -30,7 +30,7 @@ export declare const radioGroupMeta: {
                 readonly description: "Supporting detail";
             }];
             readonly orientation: "vertical";
-            readonly presentation: "inline";
+            readonly presentation: "card";
             readonly invalid: false;
             readonly readOnly: false;
             readonly disabled: false;
@@ -85,6 +85,14 @@ export declare const radioGroupMeta: {
         };
     };
     readonly props: {
+        readonly defaultValue: {
+            readonly type: "string";
+            readonly category: "State";
+            readonly label: "Initial value";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
         readonly value: {
             readonly type: "string";
             readonly category: "State";
@@ -118,6 +126,14 @@ export declare const radioGroupMeta: {
                     readonly category: "Content";
                     readonly label: "Description";
                 };
+            }, {
+                readonly key: "iconSource";
+                readonly schema: {
+                    readonly type: "media";
+                    readonly category: "Content";
+                    readonly label: "Icon";
+                    readonly mediaKinds: readonly ["image"];
+                };
             }, {
                 readonly key: "disabled";
                 readonly schema: {
@@ -162,6 +178,25 @@ export declare const radioGroupMeta: {
                 readonly authority: "instance";
             };
         };
+        readonly contentOrientation: {
+            readonly type: "enum";
+            readonly category: "Layout";
+            readonly label: "Option content orientation";
+            readonly enum: readonly ["horizontal", "vertical"];
+            readonly default: "horizontal";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly columns: {
+            readonly type: "enum";
+            readonly category: "Layout";
+            readonly label: "Option columns";
+            readonly enum: readonly [1, 2, 3, 4];
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
         readonly color: {
             readonly type: "enum";
             readonly category: "Style";

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":"AASA,eAAO,MAAM,SAAS;;;;;;;CAOgB,CAAC;AAEvC,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKW,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LW,CAAC"}

package/dist/components/radio/meta.js

@@ -19,16 +19,16 @@ export const radioGroupMeta = {
     directManifestNode: true,
     allowedChildren: [],
     blueprint: {
-        label: 'Radio group',
+        label: 'Radio button group',
         defaultProps: {
-            value: 'option-b',
+            defaultValue: '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',
+            presentation: 'card',
             invalid: false,
             readOnly: false,
             disabled: false,
@@ -71,6 +71,12 @@ export const radioGroupMeta = {
         },
     },
     props: {
+        defaultValue: {
+            type: 'string',
+            category: 'State',
+            label: 'Initial value',
+            authoring: { authority: 'instance' },
+        },
         value: {
             type: 'string',
             category: 'State',
@@ -106,6 +112,10 @@ export const radioGroupMeta = {
                         label: 'Description',
                     },
                 },
+                {
+                    key: 'iconSource',
+                    schema: { type: 'media', category: 'Content', label: 'Icon', mediaKinds: ['image'] },
+                },
                 {
                     key: 'disabled',
                     schema: {
@@ -141,6 +151,21 @@ export const radioGroupMeta = {
             default: 'inline',
             authoring: { authority: 'instance' },
         },
+        contentOrientation: {
+            type: 'enum',
+            category: 'Layout',
+            label: 'Option content orientation',
+            enum: ['horizontal', 'vertical'],
+            default: 'horizontal',
+            authoring: { authority: 'instance' },
+        },
+        columns: {
+            type: 'enum',
+            category: 'Layout',
+            label: 'Option columns',
+            enum: [1, 2, 3, 4],
+            authoring: { authority: 'instance' },
+        },
         color: {
             type: 'enum',
             category: 'Style',