@ankhorage/surface 0.1.5 → 0.1.7

package/src/internal/resolvers/index.ts

@@ -0,0 +1,15 @@
+export * from './resolveControlSize';
+export * from './resolveFieldPresentation';
+export * from './resolveFieldState';
+export * from './resolveFocusRingStyles';
+export * from './resolveIconSize';
+export * from './resolveIndicatorSize';
+export * from './resolveInteractiveColors';
+export * from './resolveInteractiveState';
+export * from './resolveOverlayAnimation';
+export * from './resolveOverlayZIndex';
+export * from './resolveSelectionControlBehavior';
+export * from './resolveSelectionControlColors';
+export * from './resolveTextColor';
+export * from './resolveTextStyles';
+export * from './resolveTone';

package/src/internal/resolvers/resolveControlSize.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveControlSize } from './resolveControlSize';
+
+describe('resolveControlSize', () => {
+  it('returns a fixed control shape for each size', () => {
+    const theme = createTheme();
+    const small = resolveControlSize(theme, 's');
+    const medium = resolveControlSize(theme, 'm');
+    const large = resolveControlSize(theme, 'l');
+
+    expect(small).toEqual({
+      minHeight: 32,
+      paddingHorizontal: theme.spacing.s,
+      paddingVertical: 6,
+      borderRadius: theme.radii.m,
+      textVariant: 'bodySmall',
+      iconSize: 16,
+    });
+    expect(medium.minHeight).toBe(40);
+    expect(large.minHeight).toBe(48);
+    expect(large.iconSize).toBe(20);
+  });
+});

package/src/internal/resolvers/resolveControlSize.ts

@@ -0,0 +1,45 @@
+import type { AnkhTheme } from '../../theme/types';
+
+export type ControlSize = 's' | 'm' | 'l';
+
+export interface ResolvedControlSize {
+  minHeight: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderRadius: number;
+  textVariant: 'bodySmall' | 'body';
+  iconSize: number;
+}
+
+export function resolveControlSize(theme: AnkhTheme, size: ControlSize = 'm'): ResolvedControlSize {
+  switch (size) {
+    case 's':
+      return {
+        minHeight: 32,
+        paddingHorizontal: theme.spacing.s,
+        paddingVertical: 6,
+        borderRadius: theme.radii.m,
+        textVariant: 'bodySmall',
+        iconSize: 16,
+      };
+    case 'l':
+      return {
+        minHeight: 48,
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        borderRadius: theme.radii.l,
+        textVariant: 'body',
+        iconSize: 20,
+      };
+    case 'm':
+    default:
+      return {
+        minHeight: 40,
+        paddingHorizontal: theme.spacing.m,
+        paddingVertical: 8,
+        borderRadius: theme.radii.m,
+        textVariant: 'body',
+        iconSize: 18,
+      };
+  }
+}

package/src/internal/resolvers/resolveFieldPresentation.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveFieldPresentation } from './resolveFieldPresentation';
+import { resolveFieldState } from './resolveFieldState';
+
+describe('resolveFieldPresentation', () => {
+  it('keeps label and helper tones aligned for default fields', () => {
+    expect(resolveFieldPresentation(resolveFieldState({}))).toEqual({
+      helperTone: 'default',
+      labelTone: 'default',
+    });
+  });
+
+  it('mutes both label and helper text for disabled and read-only fields', () => {
+    expect(resolveFieldPresentation(resolveFieldState({ disabled: true }))).toEqual({
+      helperTone: 'muted',
+      labelTone: 'muted',
+    });
+    expect(resolveFieldPresentation(resolveFieldState({ readOnly: true }))).toEqual({
+      helperTone: 'muted',
+      labelTone: 'muted',
+    });
+  });
+
+  it('elevates invalid fields to the danger tone', () => {
+    expect(resolveFieldPresentation(resolveFieldState({ invalid: true, readOnly: true }))).toEqual({
+      helperTone: 'danger',
+      labelTone: 'danger',
+    });
+  });
+});

package/src/internal/resolvers/resolveFieldPresentation.ts

@@ -0,0 +1,30 @@
+import type { FieldState } from './resolveFieldState';
+import type { TextTone } from './resolveTextColor';
+
+type FieldPresentationTone = Extract<TextTone, 'default' | 'muted' | 'danger'>;
+
+export interface ResolvedFieldPresentation {
+  helperTone: FieldPresentationTone;
+  labelTone: FieldPresentationTone;
+}
+
+export function resolveFieldPresentation(fieldState: FieldState): ResolvedFieldPresentation {
+  if (fieldState.invalid) {
+    return {
+      helperTone: 'danger',
+      labelTone: 'danger',
+    };
+  }
+
+  if (fieldState.disabled || fieldState.readOnly) {
+    return {
+      helperTone: 'muted',
+      labelTone: 'muted',
+    };
+  }
+
+  return {
+    helperTone: 'default',
+    labelTone: 'default',
+  };
+}

package/src/internal/resolvers/resolveFieldState.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveFieldState } from './resolveFieldState';
+
+describe('resolveFieldState', () => {
+  it('applies field-state precedence consistently', () => {
+    expect(resolveFieldState({})).toEqual({
+      name: 'default',
+      focused: false,
+      disabled: false,
+      invalid: false,
+      readOnly: false,
+    });
+
+    expect(resolveFieldState({ focused: true }).name).toBe('focused');
+    expect(resolveFieldState({ readOnly: true }).name).toBe('readOnly');
+    expect(resolveFieldState({ invalid: true, focused: true }).name).toBe('invalid');
+    expect(resolveFieldState({ disabled: true, invalid: true, focused: true }).name).toBe(
+      'disabled',
+    );
+  });
+});

package/src/internal/resolvers/resolveFieldState.ts

@@ -0,0 +1,36 @@
+export type FieldStateName = 'default' | 'focused' | 'disabled' | 'invalid' | 'readOnly';
+
+export interface FieldState {
+  name: FieldStateName;
+  focused: boolean;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+}
+
+export function resolveFieldState({
+  focused = false,
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+}: Partial<Omit<FieldState, 'name'>>): FieldState {
+  let name: FieldStateName = 'default';
+
+  if (disabled) {
+    name = 'disabled';
+  } else if (invalid) {
+    name = 'invalid';
+  } else if (focused) {
+    name = 'focused';
+  } else if (readOnly) {
+    name = 'readOnly';
+  }
+
+  return {
+    name,
+    focused,
+    disabled,
+    invalid,
+    readOnly,
+  };
+}

package/src/internal/resolvers/resolveFocusRingStyles.ts

@@ -0,0 +1,14 @@
+import type { ViewStyle } from 'react-native';
+
+export function resolveFocusRingStyles(color: string, focused: boolean, isWeb: boolean): ViewStyle {
+  if (!focused || !isWeb) {
+    return {};
+  }
+
+  return {
+    shadowColor: color,
+    shadowOpacity: 0.22,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 0 },
+  };
+}

package/src/internal/resolvers/resolveIconSize.ts

@@ -0,0 +1,6 @@
+import type { AnkhTheme } from '../../theme/types';
+import { type ControlSize, resolveControlSize } from './resolveControlSize';
+
+export function resolveIconSize(theme: AnkhTheme, size: ControlSize = 'm'): number {
+  return resolveControlSize(theme, size).iconSize;
+}

package/src/internal/resolvers/resolveIndicatorSize.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveIndicatorSize } from './resolveIndicatorSize';
+
+describe('resolveIndicatorSize', () => {
+  it('returns a stable size map for each control size', () => {
+    expect(resolveIndicatorSize('s')).toEqual({
+      checkbox: 16,
+      checkboxIndicator: 10,
+      radio: 16,
+      radioDot: 8,
+      switchWidth: 30,
+      switchHeight: 18,
+      switchThumb: 12,
+    });
+    expect(resolveIndicatorSize('m').switchWidth).toBe(34);
+    expect(resolveIndicatorSize('l').switchThumb).toBe(18);
+  });
+});

package/src/internal/resolvers/resolveIndicatorSize.ts

@@ -0,0 +1,47 @@
+import type { ControlSize } from './resolveControlSize';
+
+export interface ResolvedIndicatorSize {
+  checkbox: number;
+  checkboxIndicator: number;
+  radio: number;
+  radioDot: number;
+  switchWidth: number;
+  switchHeight: number;
+  switchThumb: number;
+}
+
+export function resolveIndicatorSize(size: ControlSize = 'm'): ResolvedIndicatorSize {
+  switch (size) {
+    case 's':
+      return {
+        checkbox: 16,
+        checkboxIndicator: 10,
+        radio: 16,
+        radioDot: 8,
+        switchWidth: 30,
+        switchHeight: 18,
+        switchThumb: 12,
+      };
+    case 'l':
+      return {
+        checkbox: 22,
+        checkboxIndicator: 14,
+        radio: 22,
+        radioDot: 10,
+        switchWidth: 42,
+        switchHeight: 26,
+        switchThumb: 18,
+      };
+    case 'm':
+    default:
+      return {
+        checkbox: 18,
+        checkboxIndicator: 12,
+        radio: 18,
+        radioDot: 8,
+        switchWidth: 34,
+        switchHeight: 22,
+        switchThumb: 14,
+      };
+  }
+}

package/src/internal/resolvers/resolveInteractiveColors.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveFieldState } from './resolveFieldState';
+import { resolveButtonColors, resolveInputColors } from './resolveInteractiveColors';
+
+describe('resolveInteractiveColors', () => {
+  it('maps button variant, tone, and state through semantic slots', () => {
+    const theme = createTheme();
+    const solid = resolveButtonColors(theme, {
+      variant: 'solid',
+      tone: 'primary',
+      state: {
+        disabled: false,
+        focused: false,
+        hovered: false,
+        pressed: false,
+      },
+    });
+    const outline = resolveButtonColors(theme, {
+      variant: 'outline',
+      tone: 'danger',
+      state: {
+        disabled: false,
+        focused: false,
+        hovered: true,
+        pressed: false,
+      },
+    });
+
+    expect(solid.backgroundColor).toBe(theme.semantics.action.primary.base);
+    expect(solid.contentColor).toBe(theme.semantics.action.primary.onSolidText);
+    expect(outline.borderColor).toBe(theme.semantics.action.danger.outline);
+    expect(outline.backgroundColor).toBe(theme.semantics.action.danger.softHover);
+  });
+
+  it('derives input colors from interaction and validation state', () => {
+    const theme = createTheme();
+    const focusedInvalid = resolveInputColors(
+      theme,
+      resolveFieldState({
+        focused: true,
+        invalid: true,
+      }),
+    );
+    const readOnly = resolveInputColors(
+      theme,
+      resolveFieldState({
+        readOnly: true,
+      }),
+    );
+
+    expect(focusedInvalid.borderColor).toBe(theme.semantics.danger.base);
+    expect(readOnly.backgroundColor).toBe(theme.semantics.surface.subtle);
+    expect(readOnly.placeholderColor).toBe(theme.semantics.content.muted);
+  });
+});

package/src/internal/resolvers/resolveInteractiveColors.ts

@@ -0,0 +1,134 @@
+import type { AnkhTheme } from '../../theme/types';
+import type { FieldState } from './resolveFieldState';
+import type { InteractionState } from './resolveInteractiveState';
+import { type ComponentTone, resolveTone } from './resolveTone';
+
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft';
+
+export interface ResolvedInteractiveColors {
+  backgroundColor: string;
+  borderColor: string;
+  contentColor: string;
+  opacity?: number;
+}
+
+export function resolveButtonColors(
+  theme: AnkhTheme,
+  {
+    variant,
+    tone,
+    state,
+  }: {
+    variant: ButtonVariant;
+    tone: ComponentTone;
+    state: InteractionState;
+  },
+): ResolvedInteractiveColors {
+  if (state.disabled) {
+    return {
+      backgroundColor: theme.semantics.neutral.surface,
+      borderColor: theme.semantics.neutral.divider,
+      contentColor: theme.semantics.content.muted,
+      opacity: 0.72,
+    };
+  }
+
+  const semanticTone = resolveTone(theme, tone);
+
+  switch (variant) {
+    case 'outline':
+      return {
+        backgroundColor: state.pressed
+          ? semanticTone.softActive
+          : state.hovered
+            ? semanticTone.softHover
+            : 'transparent',
+        borderColor: semanticTone.outline,
+        contentColor: semanticTone.base,
+      };
+    case 'ghost':
+      return {
+        backgroundColor: state.pressed
+          ? semanticTone.softActive
+          : state.hovered
+            ? semanticTone.softHover
+            : 'transparent',
+        borderColor: 'transparent',
+        contentColor: semanticTone.base,
+      };
+    case 'soft':
+      return {
+        backgroundColor: state.pressed
+          ? semanticTone.softActive
+          : state.hovered
+            ? semanticTone.softHover
+            : semanticTone.softBg,
+        borderColor: 'transparent',
+        contentColor: semanticTone.base,
+      };
+    case 'solid':
+    default:
+      return {
+        backgroundColor: state.pressed
+          ? semanticTone.strong
+          : state.hovered
+            ? semanticTone.hover
+            : semanticTone.base,
+        borderColor: semanticTone.base,
+        contentColor: semanticTone.onSolidText,
+      };
+  }
+}
+
+export function resolveInputColors(
+  theme: AnkhTheme,
+  fieldState: FieldState,
+): ResolvedInteractiveColors & { placeholderColor: string } {
+  if (fieldState.disabled) {
+    return {
+      backgroundColor: theme.semantics.surface.subtle,
+      borderColor: theme.semantics.border.default,
+      contentColor: theme.semantics.content.muted,
+      placeholderColor: theme.semantics.content.subtle,
+      opacity: 0.72,
+    };
+  }
+
+  if (fieldState.invalid) {
+    return {
+      backgroundColor: fieldState.readOnly
+        ? theme.semantics.surface.subtle
+        : theme.semantics.surface.default,
+      borderColor: fieldState.focused
+        ? theme.semantics.danger.base
+        : theme.semantics.danger.outline,
+      contentColor: theme.semantics.content.default,
+      placeholderColor: theme.semantics.content.muted,
+    };
+  }
+
+  if (fieldState.focused) {
+    return {
+      backgroundColor: theme.semantics.surface.default,
+      borderColor: theme.semantics.border.focus,
+      contentColor: theme.semantics.content.default,
+      placeholderColor: theme.semantics.content.muted,
+    };
+  }
+
+  if (fieldState.readOnly) {
+    return {
+      backgroundColor: theme.semantics.surface.subtle,
+      borderColor: theme.semantics.border.default,
+      contentColor: theme.semantics.content.default,
+      placeholderColor: theme.semantics.content.muted,
+    };
+  }
+
+  return {
+    backgroundColor: theme.semantics.surface.default,
+    borderColor: theme.semantics.border.default,
+    contentColor: theme.semantics.content.default,
+    placeholderColor: theme.semantics.content.muted,
+  };
+}

package/src/internal/resolvers/resolveInteractiveState.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveInteractiveState } from './resolveInteractiveState';
+
+describe('resolveInteractiveState', () => {
+  it('freezes the interaction state shape to booleans', () => {
+    expect(resolveInteractiveState({ hovered: true, pressed: 1 as never })).toEqual({
+      pressed: true,
+      hovered: true,
+      focused: false,
+      disabled: false,
+    });
+  });
+});

package/src/internal/resolvers/resolveInteractiveState.ts

@@ -0,0 +1,15 @@
+export interface InteractionState {
+  pressed: boolean;
+  hovered: boolean;
+  focused: boolean;
+  disabled: boolean;
+}
+
+export function resolveInteractiveState(input: Partial<InteractionState>): InteractionState {
+  return {
+    pressed: Boolean(input.pressed),
+    hovered: Boolean(input.hovered),
+    focused: Boolean(input.focused),
+    disabled: Boolean(input.disabled),
+  };
+}

package/src/internal/resolvers/resolveOverlayAnimation.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveOverlayAnimation } from './resolveOverlayAnimation';
+
+describe('resolveOverlayAnimation', () => {
+  it('returns stable transition values for each overlay layer', () => {
+    const modal = resolveOverlayAnimation('modal');
+    const drawer = resolveOverlayAnimation('drawer');
+    const tooltip = resolveOverlayAnimation('tooltip');
+
+    expect(modal.backdropOpacity).toBeGreaterThan(drawer.backdropOpacity);
+    expect(drawer.offset).toBeGreaterThan(tooltip.offset);
+    expect(tooltip.enterDuration).toBeLessThan(modal.enterDuration);
+  });
+});

package/src/internal/resolvers/resolveOverlayAnimation.ts

@@ -0,0 +1,24 @@
+import type { OverlayLayer } from './resolveOverlayZIndex';
+
+export interface OverlayAnimationValues {
+  enterDuration: number;
+  exitDuration: number;
+  backdropOpacity: number;
+  offset: number;
+}
+
+export function resolveOverlayAnimation(layer: OverlayLayer): OverlayAnimationValues {
+  switch (layer) {
+    case 'drawer':
+      return { enterDuration: 180, exitDuration: 140, backdropOpacity: 0.26, offset: 24 };
+    case 'tooltip':
+      return { enterDuration: 90, exitDuration: 90, backdropOpacity: 0, offset: 8 };
+    case 'toast':
+      return { enterDuration: 140, exitDuration: 120, backdropOpacity: 0, offset: 12 };
+    case 'menu':
+      return { enterDuration: 110, exitDuration: 110, backdropOpacity: 0.04, offset: 6 };
+    case 'modal':
+    default:
+      return { enterDuration: 160, exitDuration: 140, backdropOpacity: 0.32, offset: 12 };
+  }
+}

package/src/internal/resolvers/resolveOverlayZIndex.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveOverlayZIndex } from './resolveOverlayZIndex';
+
+describe('resolveOverlayZIndex', () => {
+  it('assigns higher base layers to later overlay types', () => {
+    expect(resolveOverlayZIndex('modal')).toBeLessThan(resolveOverlayZIndex('menu'));
+    expect(resolveOverlayZIndex('menu')).toBeLessThan(resolveOverlayZIndex('tooltip'));
+    expect(resolveOverlayZIndex('tooltip')).toBeLessThan(resolveOverlayZIndex('toast'));
+  });
+
+  it('increments the z-index within the same layer stack', () => {
+    expect(resolveOverlayZIndex('modal', 1)).toBe(resolveOverlayZIndex('modal', 0) + 1);
+  });
+});

package/src/internal/resolvers/resolveOverlayZIndex.ts

@@ -0,0 +1,13 @@
+export type OverlayLayer = 'modal' | 'drawer' | 'menu' | 'tooltip' | 'toast';
+
+const BASE_Z_INDEX: Record<OverlayLayer, number> = {
+  modal: 1000,
+  drawer: 1100,
+  menu: 1200,
+  tooltip: 1300,
+  toast: 1400,
+};
+
+export function resolveOverlayZIndex(layer: OverlayLayer, stackIndex = 0): number {
+  return BASE_Z_INDEX[layer] + stackIndex;
+}

package/src/internal/resolvers/resolveSelectionControlBehavior.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveSelectionControlNextChecked } from './resolveSelectionControlBehavior';
+
+describe('resolveSelectionControlNextChecked', () => {
+  it('toggles checkbox and switch values when interactive', () => {
+    expect(
+      resolveSelectionControlNextChecked({
+        checked: false,
+        kind: 'checkbox',
+      }),
+    ).toBe(true);
+    expect(
+      resolveSelectionControlNextChecked({
+        checked: true,
+        kind: 'switch',
+      }),
+    ).toBe(false);
+  });
+
+  it('allows radio selection once but not repeat activation', () => {
+    expect(
+      resolveSelectionControlNextChecked({
+        checked: false,
+        kind: 'radio',
+      }),
+    ).toBe(true);
+    expect(
+      resolveSelectionControlNextChecked({
+        checked: true,
+        kind: 'radio',
+      }),
+    ).toBeNull();
+  });
+
+  it('keeps read-only and disabled controls focusable but non-mutating', () => {
+    expect(
+      resolveSelectionControlNextChecked({
+        checked: false,
+        kind: 'checkbox',
+        readOnly: true,
+      }),
+    ).toBeNull();
+    expect(
+      resolveSelectionControlNextChecked({
+        checked: false,
+        disabled: true,
+        kind: 'switch',
+      }),
+    ).toBeNull();
+  });
+});

package/src/internal/resolvers/resolveSelectionControlBehavior.ts

@@ -0,0 +1,23 @@
+export type SelectionControlKind = 'checkbox' | 'radio' | 'switch';
+
+export function resolveSelectionControlNextChecked({
+  kind,
+  checked,
+  disabled = false,
+  readOnly = false,
+}: {
+  kind: SelectionControlKind;
+  checked: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+}): boolean | null {
+  if (disabled || readOnly) {
+    return null;
+  }
+
+  if (kind === 'radio') {
+    return checked ? null : true;
+  }
+
+  return !checked;
+}