@ankhorage/surface 0.1.5 → 0.1.7

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

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveFieldState } from './resolveFieldState';
+import { resolveSelectionControlColors } from './resolveSelectionControlColors';
+
+describe('resolveSelectionControlColors', () => {
+  it('maps checked controls through the selected tone semantics', () => {
+    const theme = createTheme();
+    const colors = resolveSelectionControlColors(theme, {
+      checked: true,
+      fieldState: resolveFieldState({ focused: true }),
+      tone: 'primary',
+    });
+
+    expect(colors.borderColor).toBe(theme.semantics.action.primary.base);
+    expect(colors.indicatorColor).toBe(theme.semantics.action.primary.onSolidText);
+    expect(colors.labelColor).toBe(theme.semantics.content.default);
+  });
+
+  it('maps invalid unchecked controls through danger/border semantics', () => {
+    const theme = createTheme();
+    const colors = resolveSelectionControlColors(theme, {
+      checked: false,
+      fieldState: resolveFieldState({ invalid: true }),
+      tone: 'primary',
+    });
+
+    expect(colors.borderColor).toBe(theme.semantics.danger.outline);
+    expect(colors.trackColor).toBe(theme.semantics.danger.outline);
+  });
+
+  it('mutes disabled controls regardless of tone', () => {
+    const theme = createTheme();
+    const colors = resolveSelectionControlColors(theme, {
+      checked: true,
+      fieldState: resolveFieldState({ disabled: true }),
+      tone: 'danger',
+    });
+
+    expect(colors.labelColor).toBe(theme.semantics.content.muted);
+    expect(colors.opacity).toBe(0.72);
+  });
+});

package/src/internal/resolvers/resolveSelectionControlColors.ts

@@ -0,0 +1,81 @@
+import type { AnkhTheme } from '../../theme/types';
+import type { FieldState } from './resolveFieldState';
+import { type ComponentTone, resolveTone } from './resolveTone';
+
+export interface ResolvedSelectionControlColors {
+  backgroundColor: string;
+  borderColor: string;
+  indicatorColor: string;
+  labelColor: string;
+  trackColor: string;
+  thumbColor: string;
+  opacity?: number;
+}
+
+export function resolveSelectionControlColors(
+  theme: AnkhTheme,
+  {
+    tone = 'primary',
+    fieldState,
+    checked,
+    hovered = false,
+    pressed = false,
+  }: {
+    tone?: ComponentTone;
+    fieldState: FieldState;
+    checked: boolean;
+    hovered?: boolean;
+    pressed?: boolean;
+  },
+): ResolvedSelectionControlColors {
+  const semanticTone = resolveTone(theme, fieldState.invalid ? 'danger' : tone);
+  const isMuted = fieldState.disabled;
+  const isInteractiveReadOnly = fieldState.readOnly && !fieldState.disabled;
+
+  if (isMuted) {
+    return {
+      backgroundColor: checked
+        ? theme.semantics.neutral.surfaceActive
+        : theme.semantics.surface.subtle,
+      borderColor: theme.semantics.border.default,
+      indicatorColor: checked ? theme.semantics.content.muted : 'transparent',
+      labelColor: theme.semantics.content.muted,
+      trackColor: checked ? theme.semantics.neutral.surfaceActive : theme.semantics.neutral.border,
+      thumbColor: theme.semantics.surface.default,
+      opacity: 0.72,
+    };
+  }
+
+  const uncheckedBorderColor = fieldState.invalid
+    ? theme.semantics.danger.outline
+    : fieldState.focused
+      ? theme.semantics.border.focus
+      : theme.semantics.border.strong;
+  const uncheckedBackgroundColor = pressed
+    ? theme.semantics.neutral.surfaceActive
+    : hovered
+      ? theme.semantics.neutral.surfaceHover
+      : theme.semantics.surface.default;
+  const checkedBackgroundColor = pressed
+    ? semanticTone.strong
+    : hovered
+      ? semanticTone.hover
+      : semanticTone.base;
+  const checkedTrackColor = pressed
+    ? semanticTone.strong
+    : hovered
+      ? semanticTone.hover
+      : semanticTone.base;
+
+  return {
+    backgroundColor: checked ? checkedBackgroundColor : uncheckedBackgroundColor,
+    borderColor: checked ? semanticTone.base : uncheckedBorderColor,
+    indicatorColor: checked ? semanticTone.onSolidText : 'transparent',
+    labelColor: isInteractiveReadOnly
+      ? theme.semantics.content.muted
+      : theme.semantics.content.default,
+    trackColor: checked ? checkedTrackColor : uncheckedBorderColor,
+    thumbColor: checked ? semanticTone.onSolidText : theme.semantics.surface.default,
+    opacity: isInteractiveReadOnly ? 0.88 : 1,
+  };
+}

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

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveTextColor } from './resolveTextColor';
+
+describe('resolveTextColor', () => {
+  it('maps semantic text tones through content aliases', () => {
+    const theme = createTheme();
+
+    expect(resolveTextColor(theme, 'default')).toBe(theme.semantics.content.default);
+    expect(resolveTextColor(theme, 'muted')).toBe(theme.semantics.content.muted);
+    expect(resolveTextColor(theme, 'subtle')).toBe(theme.semantics.content.subtle);
+    expect(resolveTextColor(theme, 'inverse')).toBe(theme.semantics.content.inverse);
+  });
+
+  it('supports semantic status tones for shared field and messaging copy', () => {
+    const theme = createTheme();
+
+    expect(resolveTextColor(theme, 'danger')).toBe(theme.semantics.danger.base);
+    expect(resolveTextColor(theme, 'success')).toBe(theme.semantics.success.base);
+    expect(resolveTextColor(theme, 'warning')).toBe(theme.semantics.warning.base);
+  });
+});

package/src/internal/resolvers/resolveTextColor.ts

@@ -0,0 +1,40 @@
+import { resolveToken } from '../../theme/resolveToken';
+import type { AnkhTheme } from '../../theme/types';
+
+export type TextTone =
+  | 'default'
+  | 'muted'
+  | 'subtle'
+  | 'inverse'
+  | 'danger'
+  | 'success'
+  | 'warning';
+export type TextColorValue = keyof AnkhTheme['colors'] | string;
+
+export function resolveTextColor(
+  theme: AnkhTheme,
+  tone: TextTone = 'default',
+  color?: TextColorValue,
+): string {
+  if (color) {
+    return resolveToken(theme.colors, color);
+  }
+
+  switch (tone) {
+    case 'muted':
+      return theme.semantics.content.muted;
+    case 'subtle':
+      return theme.semantics.content.subtle;
+    case 'inverse':
+      return theme.semantics.content.inverse;
+    case 'danger':
+      return theme.semantics.danger.base;
+    case 'success':
+      return theme.semantics.success.base;
+    case 'warning':
+      return theme.semantics.warning.base;
+    case 'default':
+    default:
+      return theme.semantics.content.default;
+  }
+}

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

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveTextStyles } from './resolveTextStyles';
+
+describe('resolveTextStyles', () => {
+  it('maps body and label variants to theme-driven typography', () => {
+    const theme = createTheme();
+
+    const body = resolveTextStyles(theme, { variant: 'body' });
+    const label = resolveTextStyles(theme, { variant: 'label' });
+
+    expect(body.fontSize).toBe(theme.typography.sizes.m);
+    expect(body.lineHeight).toBe(24);
+    expect(label.fontSize).toBe(theme.typography.sizes.s);
+    expect(label.fontWeight).toBe(theme.typography.weights.medium);
+  });
+
+  it('resolves heading levels through the shared text resolver', () => {
+    const theme = createTheme(undefined, 'light', 'space grotesk');
+    const style = resolveTextStyles(theme, { level: 1 });
+
+    expect(style.fontSize).toBe(theme.typography.headings[1].size);
+    expect(style.fontWeight).toBe(theme.typography.weights.bold);
+    expect(style.fontFamily).toBe('SpaceGrotesk_700Regular');
+  });
+});

package/src/internal/resolvers/resolveTextStyles.ts

@@ -0,0 +1,95 @@
+import type { TextStyle } from 'react-native';
+
+import type { AnkhTheme, FontWeight } from '../../theme/types';
+
+export type TextVariant = 'body' | 'bodySmall' | 'caption' | 'label' | 'mono';
+export type TextWeight = keyof AnkhTheme['typography']['weights'] | FontWeight;
+
+interface VariantStyle {
+  fontSize: number;
+  lineHeight: number;
+  weight: TextWeight;
+}
+
+export interface ResolveTextStyleOptions {
+  variant?: TextVariant;
+  align?: TextStyle['textAlign'];
+  weight?: TextWeight;
+  italic?: boolean;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+function resolveWeight(theme: AnkhTheme, value: TextWeight | undefined): FontWeight {
+  if (!value) return theme.typography.weights.regular;
+  if (value in theme.typography.weights) {
+    return theme.typography.weights[value as keyof AnkhTheme['typography']['weights']];
+  }
+  return value as FontWeight;
+}
+
+function getVariantStyle(theme: AnkhTheme, variant: TextVariant): VariantStyle {
+  switch (variant) {
+    case 'bodySmall':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 20,
+        weight: 'regular',
+      };
+    case 'caption':
+      return {
+        fontSize: theme.typography.sizes.xs,
+        lineHeight: 16,
+        weight: 'regular',
+      };
+    case 'label':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 18,
+        weight: 'medium',
+      };
+    case 'mono':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 20,
+        weight: 'regular',
+      };
+    case 'body':
+    default:
+      return {
+        fontSize: theme.typography.sizes.m,
+        lineHeight: 24,
+        weight: 'regular',
+      };
+  }
+}
+
+export function resolveTextStyles(
+  theme: AnkhTheme,
+  options: ResolveTextStyleOptions = {},
+): TextStyle {
+  const { level, variant = 'body', align, weight, italic = false } = options;
+  const headingTypography = level ? theme.typography.headings[level] : null;
+  const variantStyle = headingTypography
+    ? {
+        fontSize: headingTypography.size,
+        lineHeight: headingTypography.lineHeight,
+        weight: headingTypography.weight,
+      }
+    : getVariantStyle(theme, variant);
+
+  const resolvedWeight = resolveWeight(theme, weight ?? variantStyle.weight);
+  const isMono = !level && variant === 'mono';
+  const fontFamily = isMono
+    ? 'monospace'
+    : theme.typography.fonts[italic ? 'italic' : 'normal'][resolvedWeight];
+
+  return {
+    fontSize: variantStyle.fontSize,
+    lineHeight: variantStyle.lineHeight,
+    fontWeight: resolvedWeight,
+    fontFamily,
+    fontStyle: italic ? 'italic' : 'normal',
+    textAlign: align,
+    elevation: 0,
+  };
+}

package/src/internal/resolvers/resolveTone.ts

@@ -0,0 +1,19 @@
+import type { AnkhTheme, RoleSemantics } from '../../theme/types';
+
+export type ComponentTone = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
+
+export function resolveTone(theme: AnkhTheme, tone: ComponentTone = 'primary'): RoleSemantics {
+  switch (tone) {
+    case 'neutral':
+      return theme.semantics.action.neutral;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'primary':
+    default:
+      return theme.semantics.action.primary;
+  }
+}

package/src/internal/useControllableState.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export function useControllableState<T>({
+  value,
+  defaultValue,
+  onChange,
+}: {
+  value: T | undefined;
+  defaultValue: T;
+  onChange?: ((nextValue: T) => void) | undefined;
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : uncontrolledValue;
+
+  const setValue = React.useCallback(
+    (nextValue: T) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange],
+  );
+
+  return [currentValue, setValue] as const;
+}

package/src/layout/Box.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  View,
+  type ViewProps as ReactNativeViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import { useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { type BoxStyleProps, resolveBoxStyles } from './helpers';
+
+export interface BoxProps extends BoxStyleProps {
+  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
+  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
+  accessibilityState?: ReactNativeViewProps['accessibilityState'];
+  accessible?: ReactNativeViewProps['accessible'];
+  children?: React.ReactNode;
+  pointerEvents?: ReactNativeViewProps['pointerEvents'];
+  testID?: string;
+}
+
+function resolvePointerEventsStyle(
+  pointerEvents: ReactNativeViewProps['pointerEvents'] | undefined,
+): StyleProp<ViewStyle> | null {
+  if (Platform.OS !== 'web' || pointerEvents === undefined) return null;
+
+  if (pointerEvents === 'auto' || pointerEvents === 'none') {
+    return { pointerEvents };
+  }
+
+  return null;
+}
+
+function resolveViewPointerEvents(
+  pointerEvents: ReactNativeViewProps['pointerEvents'] | undefined,
+): ReactNativeViewProps['pointerEvents'] | undefined {
+  if (pointerEvents === undefined) return undefined;
+  if (Platform.OS !== 'web') return pointerEvents;
+
+  if (pointerEvents === 'box-none' || pointerEvents === 'box-only') {
+    return pointerEvents;
+  }
+
+  return undefined;
+}
+
+export function Box({
+  accessible,
+  accessibilityLabel,
+  accessibilityRole,
+  accessibilityState,
+  children,
+  pointerEvents,
+  style,
+  testID,
+  ...props
+}: BoxProps) {
+  const { theme } = useTheme();
+  const { breakpoint } = useResponsiveRuntime();
+  const resolved = resolveBoxStyles(theme, breakpoint, props);
+  const pointerEventsStyle = resolvePointerEventsStyle(pointerEvents);
+  const viewPointerEvents = resolveViewPointerEvents(pointerEvents);
+
+  return (
+    <View
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      pointerEvents={viewPointerEvents}
+      testID={testID}
+      style={[resolved, pointerEventsStyle, style]}
+    >
+      {children}
+    </View>
+  );
+}

package/src/layout/Center.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Box, type BoxProps } from './Box';
+
+export interface CenterProps extends BoxProps {
+  axis?: 'horizontal' | 'vertical' | 'both';
+}
+
+export function Center({ axis = 'both', style, ...props }: CenterProps) {
+  return (
+    <Box
+      {...props}
+      style={[
+        {
+          alignItems: axis === 'both' || axis === 'horizontal' ? 'center' : undefined,
+          justifyContent: axis === 'both' || axis === 'vertical' ? 'center' : undefined,
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/layout/Container.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import type { AnkhTheme } from '../theme/types';
+import { Box, type BoxProps } from './Box';
+import { resolveSpacing } from './helpers';
+
+export interface ContainerProps extends Omit<BoxProps, 'children'> {
+  children?: React.ReactNode;
+  maxWidth?: Responsive<number>;
+  px?: Responsive<number | keyof AnkhTheme['spacing']>;
+}
+
+export function Container({
+  children,
+  maxWidth = { base: Number.MAX_SAFE_INTEGER, lg: 1120 },
+  px = { base: 16, md: 24, lg: 32 },
+  ...props
+}: ContainerProps) {
+  const { theme } = useTheme();
+  const { breakpoint } = useResponsiveRuntime();
+
+  const activeMaxWidth = resolveResponsive(maxWidth, breakpoint);
+  const activePx = resolveSpacing(theme, resolveResponsive(px, breakpoint));
+
+  return (
+    <Box {...props} width="100%" style={[{ width: '100%' }, props.style]}>
+      <View
+        style={{
+          width: '100%',
+          maxWidth: activeMaxWidth,
+          alignSelf: 'center',
+          paddingLeft: activePx,
+          paddingRight: activePx,
+        }}
+      >
+        {children}
+      </View>
+    </Box>
+  );
+}

package/src/layout/Divider.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Box, type BoxProps } from './Box';
+import type { ColorValue } from './helpers';
+
+export interface DividerProps extends Omit<BoxProps, 'bg' | 'height' | 'width'> {
+  orientation?: 'horizontal' | 'vertical';
+  color?: ColorValue;
+  thickness?: number;
+}
+
+export function Divider({
+  orientation = 'horizontal',
+  color = 'border',
+  thickness = 1,
+  ...props
+}: DividerProps) {
+  return (
+    <Box
+      {...props}
+      bg={color}
+      height={orientation === 'horizontal' ? thickness : '100%'}
+      width={orientation === 'vertical' ? thickness : '100%'}
+    />
+  );
+}

package/src/layout/Grid.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { Box, type BoxProps } from './Box';
+import { resolveSpacing, type SpaceValue } from './helpers';
+
+export interface GridProps extends Omit<BoxProps, 'children'> {
+  children?: React.ReactNode;
+  cols: Responsive<number>;
+  gap?: Responsive<SpaceValue>;
+  rowGap?: Responsive<SpaceValue>;
+  colGap?: Responsive<SpaceValue>;
+  minItemWidth?: Responsive<number>;
+}
+
+export function Grid({
+  children,
+  cols,
+  gap = 0,
+  rowGap,
+  colGap,
+  minItemWidth,
+  ...props
+}: GridProps) {
+  const { theme } = useTheme();
+  const { breakpoint } = useResponsiveRuntime();
+
+  const activeCols = Math.max(1, Math.floor(resolveResponsive(cols, breakpoint) ?? 1));
+  const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;
+  const activeRowGap = resolveResponsive(rowGap, breakpoint) ?? defaultGap;
+  const activeColGap = resolveResponsive(colGap, breakpoint) ?? defaultGap;
+  const rowSpacing = Number(resolveSpacing(theme, activeRowGap) ?? 0);
+  const colSpacing = Number(resolveSpacing(theme, activeColGap) ?? 0);
+  const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);
+
+  const basisPercent = `${100 / activeCols}%`;
+  const nodes = React.Children.toArray(children);
+
+  return (
+    <Box {...props}>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          marginTop: -rowSpacing / 2,
+          marginLeft: -colSpacing / 2,
+          marginRight: -colSpacing / 2,
+        }}
+      >
+        {nodes.map((node, index) => {
+          const itemStyle: ViewStyle =
+            activeMinItemWidth !== undefined
+              ? {
+                  minWidth: activeMinItemWidth,
+                  flexBasis: activeMinItemWidth,
+                  flexGrow: 1,
+                }
+              : {
+                  width: basisPercent as ViewStyle['width'],
+                  flexBasis: basisPercent as ViewStyle['flexBasis'],
+                };
+
+          return (
+            <View
+              key={String(index)}
+              style={{
+                paddingTop: rowSpacing / 2,
+                paddingBottom: rowSpacing / 2,
+                paddingLeft: colSpacing / 2,
+                paddingRight: colSpacing / 2,
+                ...itemStyle,
+              }}
+            >
+              {node}
+            </View>
+          );
+        })}
+      </View>
+    </Box>
+  );
+}

package/src/layout/Inline.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Stack, type StackProps } from './Stack';
+
+export type InlineProps = Omit<StackProps, 'direction'>;
+
+export function Inline({ wrap = 'wrap', align = 'center', ...props }: InlineProps) {
+  return <Stack {...props} align={align} direction="row" wrap={wrap} />;
+}

package/src/layout/Show.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';
+
+export interface ShowProps {
+  when: Responsive<boolean>;
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function Show({ when, children, fallback = null }: ShowProps) {
+  const { breakpoint } = useResponsiveRuntime();
+  const visible = resolveResponsive(when, breakpoint) ?? false;
+  return <>{visible ? children : fallback}</>;
+}

package/src/layout/Spacer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Box } from './Box';
+import type { SpaceValue } from './helpers';
+
+export interface SpacerProps {
+  size?: SpaceValue;
+  axis?: 'horizontal' | 'vertical' | 'both';
+  testID?: string;
+}
+
+export function Spacer({ size = 'm', axis = 'vertical', testID }: SpacerProps) {
+  if (axis === 'horizontal') {
+    return <Box testID={testID} width={size} />;
+  }
+
+  if (axis === 'both') {
+    return <Box testID={testID} height={size} width={size} />;
+  }
+
+  return <Box testID={testID} height={size} />;
+}