@ankhorage/surface 4.2.0 → 4.2.1

package/src/features/button/adapters/inbound/Button.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { ActivityIndicator, View, type ViewStyle } from 'react-native';
+
+import {
+  type InteractionState,
+  resolveButtonColors,
+  resolveControlSize,
+  resolveIconSize,
+} from '../../../../internal/resolvers';
+import { ButtonBase } from '../../../../primitives/button-base';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { SurfaceTheme } from '../../../../theme/types';
+import type { ButtonProps } from '../../../../types/button';
+import { Icon } from '../../../icon/public';
+import { Box } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+
+/*** Renders the primary Surface action control with semantic visual states. */
+export function Button({
+  children,
+  variant = 'solid',
+  color = 'primary',
+  size = 'm',
+  disabled = false,
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  fullWidth = false,
+  onPress,
+  testID,
+  ...props
+}: ButtonProps) {
+  const { theme } = useTheme();
+  const controlSize = resolveControlSize(theme, size);
+
+  return (
+    <ButtonBase
+      {...props}
+      disabled={disabled || loading}
+      onPress={onPress}
+      style={resolveButtonBaseStyle(fullWidth)}
+      testID={testID}
+    >
+      {(state) => (
+        <ButtonContent
+          color={color}
+          controlSize={controlSize}
+          fullWidth={fullWidth}
+          leadingIcon={leadingIcon}
+          loading={loading}
+          size={size}
+          state={state}
+          theme={theme}
+          trailingIcon={trailingIcon}
+          variant={variant}
+        >
+          {children}
+        </ButtonContent>
+      )}
+    </ButtonBase>
+  );
+}
+
+/*** Renders Button content after interaction colors have been resolved. */
+function ButtonContent({
+  children,
+  color,
+  controlSize,
+  fullWidth,
+  leadingIcon,
+  loading,
+  size,
+  state,
+  theme,
+  trailingIcon,
+  variant,
+}: ButtonContentProps) {
+  const colors = resolveButtonColors(theme, { variant, color, state });
+  const muted = colors.contentColor === theme.semantics.content.muted;
+  const iconSize = resolveIconSize(theme, size);
+
+  return (
+    <Box
+      px={controlSize.paddingHorizontal}
+      py={controlSize.paddingVertical}
+      radius={controlSize.borderRadius}
+      style={resolveButtonContentStyle(controlSize, colors, fullWidth, variant)}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.contentColor} size="small" />
+      ) : (
+        <>
+          {leadingIcon ? (
+            <View style={resolveAccessoryStyle(theme.spacing.s, 'leading')}>
+              <Icon {...leadingIcon} color={colors.contentColor} size={iconSize} />
+            </View>
+          ) : null}
+          <Text
+            color={muted ? undefined : color}
+            emphasis={muted ? 'muted' : variant === 'solid' ? 'inverse' : 'default'}
+            variant={controlSize.textVariant}
+            weight="semiBold"
+          >
+            {children}
+          </Text>
+          {trailingIcon ? (
+            <View style={resolveAccessoryStyle(theme.spacing.s, 'trailing')}>
+              <Icon {...trailingIcon} color={colors.contentColor} size={iconSize} />
+            </View>
+          ) : null}
+        </>
+      )}
+    </Box>
+  );
+}
+
+/*** Resolves the outer ButtonBase layout style. */
+function resolveButtonBaseStyle(fullWidth: boolean): ViewStyle {
+  return { alignSelf: fullWidth ? 'stretch' : 'flex-start' };
+}
+
+/*** Resolves the themed Button content container style. */
+function resolveButtonContentStyle(
+  controlSize: ReturnType<typeof resolveControlSize>,
+  colors: ReturnType<typeof resolveButtonColors>,
+  fullWidth: boolean,
+  variant: NonNullable<ButtonProps['variant']>,
+): ViewStyle {
+  return {
+    alignItems: 'center',
+    backgroundColor: colors.backgroundColor,
+    borderColor: colors.borderColor,
+    borderWidth: variant === 'solid' ? 0 : 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    minHeight: controlSize.minHeight,
+    opacity: colors.opacity,
+    width: fullWidth ? '100%' : undefined,
+  };
+}
+
+/*** Resolves spacing around a leading or trailing Button icon. */
+function resolveAccessoryStyle(spacing: number, position: 'leading' | 'trailing'): ViewStyle {
+  return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };
+}
+
+interface ButtonContentProps {
+  children: ButtonProps['children'];
+  color: NonNullable<ButtonProps['color']>;
+  controlSize: ReturnType<typeof resolveControlSize>;
+  fullWidth: boolean;
+  leadingIcon: ButtonProps['leadingIcon'];
+  loading: boolean;
+  size: NonNullable<ButtonProps['size']>;
+  state: InteractionState;
+  theme: SurfaceTheme;
+  trailingIcon: ButtonProps['trailingIcon'];
+  variant: NonNullable<ButtonProps['variant']>;
+}

package/src/features/button/adapters/inbound/IconButton.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import {
+  resolveButtonColors,
+  resolveControlSize,
+  resolveIconSize,
+} from '../../../../internal/resolvers';
+import { ButtonBase } from '../../../../primitives/button-base';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { IconButtonProps } from '../../../../types/button';
+import { Icon } from '../../../icon/public';
+import { Box } from '../../../layout/public';
+
+/*** Renders a compact accessible icon-only action control. */
+export function IconButton({
+  icon,
+  accessibilityLabel,
+  variant = 'ghost',
+  color = 'primary',
+  size = 'm',
+  disabled = false,
+  onPress,
+  testID,
+  ...props
+}: IconButtonProps) {
+  const { theme } = useTheme();
+  const controlSize = resolveControlSize(theme, size);
+
+  return (
+    <ButtonBase
+      {...props}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+    >
+      {(state) => {
+        const colors = resolveButtonColors(theme, { color, state, variant });
+        return (
+          <Box
+            radius={controlSize.borderRadius}
+            style={resolveIconButtonStyle(controlSize, colors, variant)}
+          >
+            <Icon {...icon} color={colors.contentColor} size={resolveIconSize(theme, size)} />
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}
+
+/*** Resolves the visual container style for an IconButton interaction state. */
+function resolveIconButtonStyle(
+  controlSize: ReturnType<typeof resolveControlSize>,
+  colors: ReturnType<typeof resolveButtonColors>,
+  variant: NonNullable<IconButtonProps['variant']>,
+): ViewStyle {
+  return {
+    alignItems: 'center',
+    backgroundColor: colors.backgroundColor,
+    borderColor: colors.borderColor,
+    borderWidth: variant === 'solid' ? 0 : 1,
+    justifyContent: 'center',
+    minHeight: controlSize.minHeight,
+    minWidth: controlSize.minHeight,
+    opacity: colors.opacity,
+  };
+}

package/src/features/button/public.ts

@@ -0,0 +1,3 @@
+export type { ButtonIconSpec, ButtonProps, IconButtonProps } from '../../types/button';
+export { Button } from './adapters/inbound/Button';
+export { IconButton } from './adapters/inbound/IconButton';

package/src/features/card/adapters/inbound/Card.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import { ButtonBase } from '../../../../primitives/button-base';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { CardProps } from '../../../../types/card';
+import type { SurfaceVariant } from '../../../../types/surface';
+import { Surface } from '../../../surface/public';
+
+/*** Renders a themed content card with optional interactive press states. */
+export function Card({
+  children,
+  variant = 'default',
+  onPress,
+  disabled = false,
+  testID,
+  style,
+  ...props
+}: CardProps) {
+  const { theme } = useTheme();
+
+  if (!onPress) {
+    return (
+      <Surface {...props} style={style} testID={testID} variant={variant}>
+        {children}
+      </Surface>
+    );
+  }
+
+  return (
+    <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
+      {(state) => (
+        <Surface
+          {...props}
+          style={[
+            resolveInteractiveCardStyle(variant, state.pressed, state.hovered, state.disabled, {
+              active: theme.semantics.neutral.surfaceActive,
+              base: theme.semantics.surface.default,
+              hover: theme.semantics.neutral.surfaceHover,
+              subtle: theme.semantics.surface.subtle,
+            }),
+            style,
+          ]}
+          variant={variant}
+        >
+          {children}
+        </Surface>
+      )}
+    </ButtonBase>
+  );
+}
+
+/*** Resolves the complete interactive style for one Card state. */
+function resolveInteractiveCardStyle(
+  variant: SurfaceVariant,
+  pressed: boolean,
+  hovered: boolean,
+  disabled: boolean,
+  backgrounds: CardBackgrounds,
+): ViewStyle {
+  return {
+    backgroundColor: resolveCardStateBackground(variant, pressed, hovered, backgrounds),
+    opacity: disabled ? 0.72 : 1,
+  };
+}
+
+/*** Resolves the interactive background for one Card variant and state. */
+function resolveCardStateBackground(
+  variant: SurfaceVariant,
+  pressed: boolean,
+  hovered: boolean,
+  backgrounds: CardBackgrounds,
+) {
+  if (variant === 'outline') {
+    return pressed ? backgrounds.active : hovered ? backgrounds.hover : 'transparent';
+  }
+  if (variant === 'subtle') {
+    return pressed ? backgrounds.active : hovered ? backgrounds.hover : backgrounds.subtle;
+  }
+  return pressed ? backgrounds.active : hovered ? backgrounds.hover : backgrounds.base;
+}
+
+interface CardBackgrounds {
+  active: string;
+  base: string;
+  hover: string;
+  subtle: string;
+}

package/src/features/card/public.ts

@@ -0,0 +1,2 @@
+export type { CardProps } from '../../types/card';
+export { Card } from './adapters/inbound/Card';

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import {
+  type InteractionState,
+  resolveFieldState,
+  resolveIndicatorSize,
+  resolveSelectionControlColors,
+  resolveSelectionControlNextChecked,
+} from '../../../../../internal/resolvers';
+import { useControllableState } from '../../../../../internal/useControllableState';
+import { ButtonBase } from '../../../../../primitives/button-base';
+import type { ButtonBaseProps } from '../../../../../primitives/button-base/types';
+import { useTheme } from '../../../../../theme/ThemeContext';
+import type { SurfaceTheme } from '../../../../../theme/types';
+import type { CheckboxProps } from '../../../../../types/checkbox';
+import { Box } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+
+/*** Renders a controlled or uncontrolled accessible checkbox. */
+export function Checkbox({
+  accessibilityLabel,
+  checked,
+  children,
+  color = 'primary',
+  defaultChecked = false,
+  disabled = false,
+  invalid = false,
+  onCheckedChange,
+  readOnly = false,
+  size = 'm',
+  testID,
+  ...buttonProps
+}: CheckboxProps) {
+  const { theme } = useTheme();
+  const [isChecked, setChecked] = useControllableState<boolean>({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  return (
+    <CheckboxControl
+      accessibilityLabel={accessibilityLabel}
+      buttonProps={buttonProps}
+      color={color}
+      disabled={disabled}
+      invalid={invalid}
+      isChecked={isChecked}
+      readOnly={readOnly}
+      setChecked={setChecked}
+      size={size}
+      testID={testID}
+      theme={theme}
+    >
+      {children}
+    </CheckboxControl>
+  );
+}
+
+/*** Owns the checkbox interaction boundary around resolved selection content. */
+function CheckboxControl({
+  accessibilityLabel,
+  buttonProps,
+  children,
+  color,
+  disabled,
+  invalid,
+  isChecked,
+  readOnly,
+  setChecked,
+  size,
+  testID,
+  theme,
+}: CheckboxControlProps) {
+  const nextChecked = resolveSelectionControlNextChecked({
+    checked: isChecked,
+    disabled,
+    kind: 'checkbox',
+    readOnly,
+  });
+
+  return (
+    <ButtonBase
+      {...buttonProps}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked }}
+      disabled={disabled}
+      onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}
+      testID={testID}
+    >
+      {(interactionState) =>
+        renderCheckboxContent({
+          children,
+          color,
+          disabled,
+          interactionState,
+          invalid,
+          isChecked,
+          readOnly,
+          size,
+          theme,
+        })
+      }
+    </ButtonBase>
+  );
+}
+
+/*** Renders the checkbox indicator and optional label for one interaction state. */
+function renderCheckboxContent(input: CheckboxContentInput) {
+  const { interactionState, theme } = input;
+  const fieldState = resolveFieldState({
+    disabled: input.disabled,
+    focused: interactionState.focused,
+    invalid: input.invalid,
+    readOnly: input.readOnly,
+  });
+  const colors = resolveSelectionControlColors(theme, {
+    checked: input.isChecked,
+    fieldState,
+    hovered: interactionState.hovered,
+    pressed: interactionState.pressed,
+    color: input.color,
+  });
+  const indicatorSize = resolveIndicatorSize(input.size);
+  const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
+  const indicatorColor = fieldState.invalid ? 'error' : input.color;
+
+  return (
+    <Box style={resolveSelectionRowStyle(colors.opacity)}>
+      <Box
+        radius="s"
+        style={resolveCheckboxIndicatorStyle(
+          colors.backgroundColor,
+          colors.borderColor,
+          indicatorSize.checkbox,
+        )}
+      >
+        {input.isChecked ? (
+          <Text
+            color={input.disabled ? undefined : indicatorColor}
+            emphasis={input.disabled ? 'muted' : 'inverse'}
+            variant="caption"
+            weight="bold"
+          >
+            ✓
+          </Text>
+        ) : null}
+      </Box>
+      {input.children ? (
+        <Box ml="s">
+          <Text emphasis={labelEmphasis}>{input.children}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+/*** Resolves the horizontal selection-control row style. */
+function resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {
+  return { alignItems: 'center', flexDirection: 'row', opacity };
+}
+
+/*** Resolves checkbox indicator dimensions and interaction colors. */
+function resolveCheckboxIndicatorStyle(
+  backgroundColor: string,
+  borderColor: string,
+  size: number,
+): ViewStyle {
+  return {
+    alignItems: 'center',
+    backgroundColor,
+    borderColor,
+    borderWidth: 1.5,
+    height: size,
+    justifyContent: 'center',
+    width: size,
+  };
+}
+
+interface CheckboxControlProps {
+  accessibilityLabel: CheckboxProps['accessibilityLabel'];
+  buttonProps: ButtonBaseProps;
+  children: CheckboxProps['children'];
+  color: NonNullable<CheckboxProps['color']>;
+  disabled: boolean;
+  invalid: boolean;
+  isChecked: boolean;
+  readOnly: boolean;
+  setChecked: (checked: boolean) => void;
+  size: NonNullable<CheckboxProps['size']>;
+  testID: CheckboxProps['testID'];
+  theme: SurfaceTheme;
+}
+
+interface CheckboxContentInput {
+  children: CheckboxProps['children'];
+  color: NonNullable<CheckboxProps['color']>;
+  disabled: boolean;
+  interactionState: InteractionState;
+  invalid: boolean;
+  isChecked: boolean;
+  readOnly: boolean;
+  size: NonNullable<CheckboxProps['size']>;
+  theme: SurfaceTheme;
+}

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

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

package/src/{components/radio → features/form/radio/adapters/inbound}/Radio.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from 'bun:test';
 import React from 'react';
 
-import { isRadioTextContent } from './isRadioTextContent';
+import { isRadioTextContent } from '../../utils/isRadioTextContent';
 
 test('classifies only primitive labels for the built-in text presentation', () => {
   expect(isRadioTextContent('Option')).toBe(true);
@@ -11,10 +11,10 @@ test('classifies only primitive labels for the built-in text presentation', () =
 });
 
 test('Radio preserves one radio interaction boundary and renders structured content directly', async () => {
-  const source = await Bun.file('src/components/radio/Radio.tsx').text();
-
+  const source = await Bun.file(new URL('./Radio.tsx', import.meta.url)).text();
   expect(source).toContain('accessibilityRole="radio"');
   expect(source).toContain('accessibilityState={{ checked: isChecked }}');
-  expect(source).toContain('const isTextContent = isRadioTextContent(children);');
-  expect(source).toMatch(/isTextContent \? <Text[^>]*>\{children\}<\/Text> : children/);
+  expect(source).toContain('isRadioTextContent(input.children)');
+  expect(source).toContain('<Text emphasis={labelEmphasis}>{input.children}</Text>');
+  expect(source).toMatch(/:\s*\(\s*input\.children\s*\)/);
 });