@ankhorage/zora 7.0.0 → 9.0.0

package/src/components/progress/Progress.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveProgressFraction } from './resolveProgressFraction';
-import { type ProgressProps, resolveProgressRole } from './types';
-
-function resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {
-  switch (size) {
-    case 's':
-      return 4;
-    case 'm':
-      return 6;
-    case 'l':
-    default:
-      return 8;
-  }
-}
-
-function ProgressInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  testID,
-  value,
-  max = 100,
-  color = 'primary',
-  size = 'm',
-}: ProgressProps) {
-  const { theme } = useZoraTheme();
-  const fraction = resolveProgressFraction({ value, max });
-  const height = resolveProgressHeight(size);
-  const role = resolveProgressRole(theme, color);
-
-  return (
-    <Box
-      accessibilityRole="progressbar"
-      bg={theme.semantics.neutral.surface}
-      borderColor={theme.semantics.neutral.divider}
-      borderWidth={1}
-      radius="full"
-      testID={testID}
-      style={{ height, overflow: 'hidden' }}
-    >
-      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
-    </Box>
-  );
-}
-
-/***
- * Progress indicator for determinate and indeterminate loading states.
- */
-export const Progress = withZoraThemeScope(ProgressInner);

package/src/components/progress/ProgressRing.test.ts

@@ -1,48 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import { progressRingMeta } from './meta';
-
-describe('ProgressRing public contract', () => {
-  test('is exported from the component and package entrypoints', async () => {
-    const [componentIndex, rootIndex] = await Promise.all([
-      Bun.file('src/components/progress/index.ts').text(),
-      Bun.file('src/index.ts').text(),
-    ]);
-
-    expect(componentIndex).toContain("export { ProgressRing } from './ProgressRing';");
-    expect(componentIndex).toContain('ProgressRingProps');
-    expect(rootIndex).toContain("export { Progress, ProgressRing } from './components/progress';");
-    expect(rootIndex).toContain('ProgressProps, ProgressRingProps');
-  });
-
-  test('exposes native progress semantics and uses canonical normalization and colors', async () => {
-    const source = await Bun.file('src/components/progress/ProgressRing.tsx').text();
-
-    expect(source).toContain('accessibilityRole="progressbar"');
-    expect(source).toContain('accessibilityValue={{');
-    expect(source).toContain('resolveProgressFraction({ max, value })');
-    expect(source).toContain('resolveProgressRole(theme, color)');
-    expect(source).not.toMatch(/#[0-9A-Fa-f]{3,8}|rgba?\(|hsla?\(/);
-  });
-
-  test('declares a complete serializable manifest blueprint', () => {
-    expect(progressRingMeta.directManifestNode).toBe(true);
-    expect(progressRingMeta.allowedChildren).toEqual([]);
-    expect(progressRingMeta.blueprint.defaultProps).toEqual({
-      value: 68,
-      max: 100,
-      color: 'primary',
-      trackColor: 'neutral',
-      size: 120,
-      thickness: 10,
-      centerValue: '68%',
-      centerLabel: 'Complete',
-      accessibilityLabel: 'Progress',
-      accessibilityValueText: '68% complete',
-    });
-    expect(Object.keys(progressRingMeta.props).sort()).toEqual(
-      Object.keys(progressRingMeta.blueprint.defaultProps).sort(),
-    );
-    expect(JSON.parse(JSON.stringify(progressRingMeta))).toEqual(progressRingMeta);
-  });
-});

package/src/components/progress/ProgressRing.tsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Text } from '../text';
-import { resolveProgressFraction } from './resolveProgressFraction';
-import { resolveProgressRingGeometry } from './resolveProgressRingGeometry';
-import { type ProgressRingProps, resolveProgressRole } from './types';
-
-function ProgressRingInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  accessibilityLabel = 'Progress',
-  accessibilityValueText,
-  centerLabel,
-  centerValue,
-  color = 'primary',
-  max = 100,
-  size = 120,
-  testID,
-  thickness = 10,
-  trackColor = 'neutral',
-  value,
-}: ProgressRingProps) {
-  const { theme } = useZoraTheme();
-  const fraction = resolveProgressFraction({ max, value });
-  const geometry = resolveProgressRingGeometry({ fraction, size, thickness });
-  const progressRole = resolveProgressRole(theme, color);
-  const trackRole = resolveProgressRole(theme, trackColor);
-  const accessibilityMaximum = Number.isFinite(max) && max > 0 ? max : 1;
-  const accessibilityValue = fraction * accessibilityMaximum;
-  const valueText = accessibilityValueText ?? `${Math.round(fraction * 100)}%`;
-  const segments = Array.from({ length: geometry.filledSegmentCount });
-
-  return (
-    <View
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="progressbar"
-      accessibilityValue={{
-        max: accessibilityMaximum,
-        min: 0,
-        now: accessibilityValue,
-        text: valueText,
-      }}
-      accessible
-      style={{ height: geometry.diameter, width: geometry.diameter }}
-      testID={testID}
-    >
-      <View
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        style={styles.visual}
-      >
-        <View
-          style={[
-            styles.track,
-            {
-              borderColor: trackRole.softBg,
-              borderRadius: geometry.diameter / 2,
-              borderWidth: geometry.strokeWidth,
-            },
-          ]}
-        />
-
-        {segments.map((_, index) => (
-          <View
-            key={index}
-            style={[
-              styles.segmentLayer,
-              { transform: [{ rotate: `${index * (360 / geometry.segmentCount)}deg` }] },
-            ]}
-          >
-            <View
-              style={{
-                backgroundColor: progressRole.base,
-                borderRadius: geometry.strokeWidth / 2,
-                height: geometry.strokeWidth,
-                left: (geometry.diameter - geometry.segmentWidth) / 2,
-                position: 'absolute',
-                top: 0,
-                width: geometry.segmentWidth,
-              }}
-            />
-          </View>
-        ))}
-      </View>
-
-      {centerValue !== undefined || centerLabel !== undefined ? (
-        <View
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={styles.center}
-        >
-          <Stack align="center" gap="xxs" px="s">
-            {centerValue !== undefined ? (
-              <Text align="center" variant="lead" weight="bold">
-                {centerValue}
-              </Text>
-            ) : null}
-            {centerLabel !== undefined ? (
-              <Text align="center" emphasis="muted" numberOfLines={2} variant="caption">
-                {centerLabel}
-              </Text>
-            ) : null}
-          </Stack>
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  segmentLayer: {
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  track: {
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  visual: {
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-});
-
-/***
- * Circular determinate progress with optional serializable center value and label content.
- */
-export const ProgressRing = withZoraThemeScope(ProgressRingInner);

package/src/components/progress/index.ts

@@ -1,3 +0,0 @@
-export { Progress } from './Progress';
-export { ProgressRing } from './ProgressRing';
-export type { ProgressProps, ProgressRingProps } from './types';

package/src/components/progress/types.ts

@@ -1,50 +0,0 @@
-import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
-
-import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ProgressProps extends ZoraBaseProps {
-  value: number;
-  max?: number;
-  color?: ZoraColor;
-  size?: ZoraControlSize;
-}
-
-export interface ProgressRingProps extends ZoraBaseProps {
-  value: number;
-  max?: number;
-  color?: ZoraColor;
-  trackColor?: ZoraColor;
-  size?: number;
-  thickness?: number;
-  centerValue?: string;
-  centerLabel?: string;
-  accessibilityLabel?: string;
-  accessibilityValueText?: string;
-}
-
-export function resolveProgressRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
-  switch (color) {
-    case 'secondary':
-      return theme.semantics.secondary;
-    case 'tertiary':
-      return theme.semantics.accent;
-    case 'quaternary':
-      return theme.semantics.highlight;
-    case 'error':
-      return theme.semantics.error;
-    case 'info':
-      return theme.semantics.info;
-    case 'primary':
-      return theme.semantics.action.primary;
-    case 'danger':
-      return theme.semantics.action.danger;
-    case 'success':
-      return theme.semantics.success;
-    case 'warning':
-      return theme.semantics.warning;
-    case 'neutral':
-    default:
-      return theme.semantics.action.neutral;
-  }
-}

package/src/components/radio/Radio.tsx

@@ -1,14 +0,0 @@
-import { Radio as SurfaceRadio } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { RadioProps } from './types';
-
-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/components/radio/RadioGroup.test.ts

@@ -1,35 +0,0 @@
-import { expect, test } from 'bun:test';
-
-import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
-
-test('resolves RadioGroup theme defaults while preserving instance overrides', () => {
-  expect(resolveRadioGroupThemeRecipe({ themeFields: {} })).toEqual({
-    gap: 's',
-    color: 'primary',
-    size: 'm',
-  });
-
-  expect(
-    resolveRadioGroupThemeRecipe({
-      gap: 'l',
-      color: 'danger',
-      size: 's',
-      themeFields: { gap: 'xs', color: 'secondary', size: 'l' },
-    }),
-  ).toEqual({ gap: 'l', color: 'danger', size: 's' });
-});
-
-test('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,125 +0,0 @@
-import { Radio } from '@ankhorage/surface';
-import React from 'react';
-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 { RadioGroupProps } from './types';
-
-/*** 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/components/radio/RadioOptionControl.tsx

@@ -1,192 +0,0 @@
-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 }],
-  },
-});