@ankhorage/zora 7.0.0 → 9.0.0

package/src/features/form/checkbox/adapters/inbound/CheckboxGroup.tsx

@@ -0,0 +1,121 @@
+import { Checkbox } from '@ankhorage/surface';
+import React from 'react';
+import { View } from 'react-native';
+
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { CheckboxGroupOption, CheckboxGroupProps } from '../../../../../types/checkbox';
+import { Stack } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+
+function CheckboxGroupInner<TValue extends string>({
+  themeId: _themeId,
+  mode: _mode,
+  value,
+  onValueChange,
+  options,
+  orientation = 'vertical',
+  gap = 's',
+  color = 'primary',
+  size = 'm',
+  invalid = false,
+  readOnly = false,
+  disabled = false,
+  testID,
+  interactionPolicy,
+}: CheckboxGroupProps<TValue>) {
+  const selectedValues = new Set(value);
+  const isHorizontal = orientation === 'horizontal';
+
+  return (
+    <View
+      testID={testID}
+      style={{
+        flexDirection: isHorizontal ? 'row' : 'column',
+        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
+      }}
+    >
+      <Stack
+        direction={isHorizontal ? 'row' : 'column'}
+        gap={gap}
+        wrap={isHorizontal ? 'wrap' : 'nowrap'}
+      >
+        {options.map((option) => (
+          <CheckboxGroupItem
+            key={option.value}
+            option={option}
+            checked={selectedValues.has(option.value)}
+            disabled={disabled || option.disabled === true}
+            invalid={invalid}
+            readOnly={readOnly}
+            size={size}
+            color={color}
+            value={value}
+            onValueChange={onValueChange}
+            interactionPolicy={interactionPolicy}
+          />
+        ))}
+      </Stack>
+    </View>
+  );
+}
+
+/***
+ * Renders a group of checkboxes for multi-select values.
+ */
+export const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);
+
+function CheckboxGroupItem<TValue extends string>({
+  option,
+  checked,
+  disabled,
+  invalid,
+  readOnly,
+  size,
+  color,
+  value,
+  onValueChange,
+  interactionPolicy,
+}: {
+  option: CheckboxGroupOption<TValue>;
+  checked: boolean;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  size: NonNullable<CheckboxGroupProps<TValue>['size']>;
+  color: NonNullable<CheckboxGroupProps<TValue>['color']>;
+  value: readonly TValue[];
+  onValueChange: (value: TValue[]) => void;
+  interactionPolicy: CheckboxGroupProps<TValue>['interactionPolicy'];
+}) {
+  const passive = interactionPolicy === 'passive';
+
+  return (
+    <Checkbox
+      interactionPolicy={interactionPolicy}
+      checked={checked}
+      disabled={disabled}
+      invalid={invalid}
+      readOnly={readOnly}
+      size={size}
+      color={color}
+      testID={option.testID}
+      onCheckedChange={(nextChecked) => {
+        if (passive) return;
+        const nextValue = nextChecked
+          ? [...value, option.value]
+          : value.filter((currentValue) => currentValue !== option.value);
+
+        onValueChange(nextValue);
+      }}
+    >
+      <Stack gap="xs">
+        <Text>{option.label}</Text>
+        {option.description ? (
+          <Text emphasis="muted" variant="caption">
+            {option.description}
+          </Text>
+        ) : null}
+      </Stack>
+    </Checkbox>
+  );
+}

package/src/features/form/checkbox/checkboxMeta.ts

@@ -0,0 +1,30 @@
+import type { ZoraComponentMeta } from '../../../metadata';
+
+export const checkboxMeta = {
+  name: 'Checkbox',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: { label: 'Checkbox', defaultProps: { label: 'Option', checked: false } },
+  props: {
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    checked: { type: 'boolean', category: 'State', label: 'Checked', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;
+
+export const checkboxGroupMeta = {
+  name: 'CheckboxGroup',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Checkbox group',
+    defaultProps: { value: [], options: [{ value: 'option-a', label: 'First option' }] },
+  },
+  props: {
+    value: { type: 'array', category: 'State', label: 'Value' },
+    options: { type: 'array', category: 'Content', label: 'Options' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/form/checkbox/public.ts

@@ -0,0 +1,7 @@
+export type {
+  CheckboxGroupOption,
+  CheckboxGroupProps,
+  CheckboxProps,
+} from '../../../types/checkbox';
+export { Checkbox } from './adapters/inbound/Checkbox';
+export { CheckboxGroup } from './adapters/inbound/CheckboxGroup';

package/src/features/form/radio/adapters/inbound/Radio.tsx

@@ -0,0 +1,14 @@
+import { Radio as SurfaceRadio } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { RadioProps } from '../../../../../types/radio';
+
+function RadioInner({ themeId: _themeId, mode: _mode, interactionPolicy, ...props }: RadioProps) {
+  return <SurfaceRadio {...props} interactionPolicy={interactionPolicy} />;
+}
+
+/***
+ * Single-choice selection control used within a radio group.
+ */
+export const Radio = withZoraThemeScope(RadioInner);

package/src/features/form/radio/adapters/inbound/RadioGroup.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from 'bun:test';
+
+import { radioGroupMeta } from '../../radioMeta';
+import { resolveRadioGroupThemeRecipe } from '../../utils/resolveRadioGroupThemeRecipe';
+
+test('resolves RadioGroup theme defaults while preserving instance overrides', () => {
+  expect(resolveRadioGroupThemeRecipe({ themeFields: {} })).toEqual({
+    gap: 's',
+    color: 'primary',
+    size: 'm',
+  });
+
+  expect(
+    resolveRadioGroupThemeRecipe({
+      gap: 'l',
+      color: 'danger',
+      size: 's',
+      themeFields: { gap: 'xs', color: 'secondary', size: 'l' },
+    }),
+  ).toEqual({ gap: 'l', color: 'danger', size: 's' });
+});
+
+test('icon radio options expose serializable authoring metadata', () => {
+  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/features/form/radio/adapters/inbound/RadioGroup.tsx

@@ -0,0 +1,125 @@
+import { Radio } from '@ankhorage/surface';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useZoraThemeRecipe } from '../../../../../theme/useZoraThemeRecipe';
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { RadioGroupProps } from '../../../../../types/radio';
+import { Stack } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+import { resolveRadioGroupThemeRecipe } from '../../utils/resolveRadioGroupThemeRecipe';
+import { RadioOptionControl } from './RadioOptionControl';
+
+/*** 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,
+  ...props
+}: RadioGroupProps<TValue>) {
+  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({ ...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={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<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
+      checked={checked}
+      disabled={inactive}
+      readOnly={readOnly}
+      invalid={invalid}
+      interactionPolicy={interactionPolicy}
+      color={color}
+      size={size}
+      testID={option.testID}
+      onCheckedChange={onSelect}
+    >
+      <Stack gap="xs">
+        <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 } });

package/src/features/form/radio/adapters/inbound/RadioOptionControl.tsx

@@ -0,0 +1,192 @@
+import { useTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+
+import type { RadioGroupProps } from '../../../../../types/radio';
+import { Icon } from '../../../../icon/public';
+import { Text } from '../../../../typography/public';
+import {
+  handleRadioOptionKeyDown,
+  type RadioOptionKeyboardTarget,
+} from '../../utils/handleRadioOptionKeyDown';
+import { resolveRadioOptionColors } from '../../utils/resolveRadioOptionColors';
+
+/*** 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 }],
+  },
+});

package/src/features/form/radio/public.ts

@@ -0,0 +1,3 @@
+export type { RadioGroupOption, RadioGroupProps, RadioProps } from '../../../types/radio';
+export { Radio } from './adapters/inbound/Radio';
+export { RadioGroup } from './adapters/inbound/RadioGroup';