@ankhorage/surface 5.0.1 → 7.0.0

package/src/components/switch/Switch.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import {
-  resolveFieldState,
-  resolveIndicatorSize,
-  resolveSelectionControlColors,
-  resolveSelectionControlNextChecked,
-} from '../../internal/resolvers';
-import { useControllableState } from '../../internal/useControllableState';
-import { ButtonBase } from '../../primitives/button-base';
-import { useTheme } from '../../theme/ThemeContext';
-import type { SwitchProps } from './types';
-
-export function Switch({
-  children,
-  checked,
-  defaultChecked = false,
-  onCheckedChange,
-  color = 'primary',
-  size = 'm',
-  disabled = false,
-  invalid = false,
-  readOnly = false,
-  accessibilityLabel,
-  testID,
-  ...props
-}: SwitchProps) {
-  const { theme } = useTheme();
-  const [isChecked, setChecked] = useControllableState<boolean>({
-    value: checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange,
-  });
-  const indicatorSize = resolveIndicatorSize(size);
-  const nextChecked = resolveSelectionControlNextChecked({
-    checked: isChecked,
-    disabled,
-    kind: 'switch',
-    readOnly,
-  });
-
-  return (
-    <ButtonBase
-      {...props}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="switch"
-      accessibilityState={{ checked: isChecked }}
-      disabled={disabled}
-      onPress={
-        nextChecked === null
-          ? undefined
-          : () => {
-              setChecked(nextChecked);
-            }
-      }
-      testID={testID}
-    >
-      {(interactionState) => {
-        const fieldState = resolveFieldState({
-          disabled,
-          focused: interactionState.focused,
-          invalid,
-          readOnly,
-        });
-        const colors = resolveSelectionControlColors(theme, {
-          checked: isChecked,
-          fieldState,
-          hovered: interactionState.hovered,
-          pressed: interactionState.pressed,
-          color,
-        });
-        const labelEmphasis =
-          colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
-
-        return (
-          <Box
-            style={{
-              alignItems: 'center',
-              flexDirection: 'row',
-              opacity: colors.opacity,
-            }}
-          >
-            <Box
-              radius="full"
-              style={{
-                backgroundColor: colors.trackColor,
-                borderColor: colors.borderColor,
-                borderWidth: 1,
-                justifyContent: 'center',
-                minWidth: indicatorSize.switchWidth,
-                paddingHorizontal: 2,
-                width: indicatorSize.switchWidth,
-                height: indicatorSize.switchHeight,
-              }}
-            >
-              <Box
-                radius="full"
-                style={{
-                  alignSelf: isChecked ? 'flex-end' : 'flex-start',
-                  backgroundColor: colors.thumbColor,
-                  height: indicatorSize.switchThumb,
-                  width: indicatorSize.switchThumb,
-                }}
-              />
-            </Box>
-            {children ? (
-              <Box ml="s">
-                <Text emphasis={labelEmphasis}>{children}</Text>
-              </Box>
-            ) : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/switch/index.ts

@@ -1,2 +0,0 @@
-export { Switch } from './Switch';
-export type { SwitchProps } from './types';

package/src/components/textarea/Textarea.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { TextInput } from '../../features/form/text-input/public';
-import type { TextareaProps } from './types';
-
-export function Textarea({ rows = 4, numberOfLines, style, ...props }: TextareaProps) {
-  return (
-    <TextInput
-      {...props}
-      multiline
-      numberOfLines={numberOfLines ?? rows}
-      style={[{ textAlignVertical: 'top' }, style]}
-    />
-  );
-}

package/src/components/textarea/index.ts

@@ -1,2 +0,0 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './types';

package/src/components/textarea/types.ts

@@ -1,5 +0,0 @@
-import type { TextInputProps } from '../../types/text-input';
-
-export interface TextareaProps extends Omit<TextInputProps, 'multiline'> {
-  rows?: number;
-}

package/src/features/layout/adapters/inbound/Container.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
-
-import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
-import { useTheme } from '../../../../theme/ThemeContext';
-import type { ContainerProps } from '../../../../types/layout';
-import { resolveSpacing } from '../../../../utils/resolveSpacing';
-import { Box } from './Box';
-
-/*** Centers responsive content inside a configurable maximum width. */
-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={[styles.fullWidth, props.style]}>
-      <View style={resolveContainerStyle(activeMaxWidth, activePx)}>{children}</View>
-    </Box>
-  );
-}
-
-/*** Resolves centered responsive Container dimensions and padding. */
-function resolveContainerStyle(
-  maxWidth: number | undefined,
-  horizontalPadding: number | undefined,
-): ViewStyle {
-  return {
-    alignSelf: 'center',
-    maxWidth,
-    paddingLeft: horizontalPadding,
-    paddingRight: horizontalPadding,
-    width: '100%',
-  };
-}
-
-const styles = StyleSheet.create({ fullWidth: { width: '100%' } });

package/src/features/layout/adapters/inbound/Stack.test.ts

@@ -1,13 +0,0 @@
-import { readFile } from 'node:fs/promises';
-
-import { describe, expect, it } from 'bun:test';
-
-describe('Stack layout contract', () => {
-  it('keeps authored children as direct flex items and applies spacing through gap', async () => {
-    const source = await readFile(new URL('./Stack.tsx', import.meta.url), 'utf8');
-    expect(source).toContain('gap: activeGap');
-    expect(source).toContain('{children}');
-    expect(source).not.toContain("from 'react-native'");
-    expect(source).not.toContain('React.Children');
-  });
-});

package/src/features/layout/adapters/inbound/Stack.tsx

@@ -1,44 +0,0 @@
-import type React from 'react';
-
-import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
-import { useTheme } from '../../../../theme/ThemeContext';
-import type { StackProps } from '../../../../types/layout';
-import { resolveSpacing } from '../../../../utils/resolveSpacing';
-import { Box } from './Box';
-
-/*** Stacks authored children directly along a responsive flex direction. */
-export function Stack({
-  children,
-  direction = 'column',
-  gap = 0,
-  align,
-  justify,
-  wrap,
-  ...props
-}: StackProps) {
-  const { theme } = useTheme();
-  const { breakpoint } = useResponsiveRuntime();
-  const activeDirection = resolveResponsive(direction, breakpoint) ?? 'column';
-  const activeGap = resolveSpacing(theme, resolveResponsive(gap, breakpoint)) ?? 0;
-  const activeAlign = resolveResponsive(align, breakpoint);
-  const activeJustify = resolveResponsive(justify, breakpoint);
-  const activeWrap = resolveResponsive(wrap, breakpoint);
-
-  return (
-    <Box
-      {...props}
-      style={[
-        {
-          flexDirection: activeDirection,
-          gap: activeGap,
-          alignItems: activeAlign,
-          justifyContent: activeJustify,
-          flexWrap: activeWrap,
-        },
-        props.style,
-      ]}
-    >
-      {children}
-    </Box>
-  );
-}

package/src/layout/AppBar.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { type StyleProp, View, type ViewStyle } from 'react-native';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
-
-import { Box, type BoxProps, Divider } from '../features/layout/public';
-import { useTheme } from '../theme/ThemeContext';
-
-export interface AppBarProps extends Omit<BoxProps, 'children'> {
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  children?: React.ReactNode;
-  safeAreaTop?: boolean;
-  divider?: boolean;
-  contentStyle?: StyleProp<ViewStyle>;
-}
-
-export function AppBar({
-  leading,
-  trailing,
-  children,
-  safeAreaTop = true,
-  divider = false,
-  contentStyle,
-  bg,
-  style,
-  ...props
-}: AppBarProps) {
-  const { theme } = useTheme();
-  const insets = React.use(SafeAreaInsetsContext);
-  const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
-  const safeAreaStyle: ViewStyle | undefined =
-    topInset === 0 ? undefined : { paddingTop: topInset };
-
-  return (
-    <Box {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
-      <View style={safeAreaStyle}>
-        <View
-          style={[
-            {
-              minHeight: 56,
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingHorizontal: theme.spacing.m,
-            },
-            contentStyle,
-          ]}
-        >
-          {leading ? (
-            <View style={{ marginRight: theme.spacing.s, flexShrink: 0 }}>{leading}</View>
-          ) : null}
-          <View style={{ flex: 1, minWidth: 0 }}>{children}</View>
-          {trailing ? (
-            <View style={{ marginLeft: theme.spacing.s, flexShrink: 0 }}>{trailing}</View>
-          ) : null}
-        </View>
-        {divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}
-      </View>
-    </Box>
-  );
-}

package/src/layout/Center.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Box, type BoxProps } from '../features/layout/public';
-
-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/Inline.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-import { Stack, type StackProps } from '../features/layout/public';
-
-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/ScrollArea.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import {
-  ScrollView,
-  type ScrollViewProps as ReactNativeScrollViewProps,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-
-import { useResponsiveRuntime } from '../core/responsive';
-import { useTheme } from '../theme/ThemeContext';
-import type { BoxStyleProps } from '../types/layout';
-import { resolveBoxStyles } from '../utils/resolveBoxStyles';
-
-export interface ScrollAreaProps
-  extends
-    BoxStyleProps,
-    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
-  children?: React.ReactNode;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-}
-
-export function ScrollArea({
-  children,
-  contentContainerStyle,
-  p,
-  px,
-  py,
-  pt,
-  pb,
-  pl,
-  pr,
-  m,
-  mx,
-  my,
-  mt,
-  mb,
-  ml,
-  mr,
-  bg,
-  radius,
-  borderWidth,
-  borderColor,
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  flex,
-  flexGrow,
-  flexShrink,
-  flexBasis,
-  alignSelf,
-  position,
-  top,
-  bottom,
-  left,
-  right,
-  overflow,
-  zIndex,
-  opacity,
-  style,
-  ...scrollProps
-}: ScrollAreaProps) {
-  const { theme } = useTheme();
-  const { breakpoint } = useResponsiveRuntime();
-  const resolved = resolveBoxStyles(theme, breakpoint, {
-    p,
-    px,
-    py,
-    pt,
-    pb,
-    pl,
-    pr,
-    m,
-    mx,
-    my,
-    mt,
-    mb,
-    ml,
-    mr,
-    bg,
-    radius,
-    borderWidth,
-    borderColor,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis,
-    alignSelf,
-    position,
-    top,
-    bottom,
-    left,
-    right,
-    overflow,
-    zIndex,
-    opacity,
-  });
-
-  return (
-    <ScrollView
-      {...scrollProps}
-      contentContainerStyle={contentContainerStyle}
-      style={[resolved, style]}
-    >
-      {children}
-    </ScrollView>
-  );
-}

package/src/layout/Spacer.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Box } from '../features/layout/public';
-import type { SpaceValue } from '../types/layout';
-
-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} />;
-}

package/src/layout/Template.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import {
-  type Breakpoint,
-  resolveResponsive,
-  type Responsive,
-  useResponsiveRuntime,
-} from '../core/responsive';
-import { Box, type BoxProps } from '../features/layout/public';
-import { useTheme } from '../theme/ThemeContext';
-import type { SpaceValue } from '../types/layout';
-import { resolveSpacing } from '../utils/resolveSpacing';
-
-type SlotMap = Record<string, React.ReactNode>;
-type TemplateMap = Partial<Record<Breakpoint, string[][]>>;
-type ColumnsMap = Partial<Record<Breakpoint, number[]>>;
-
-export interface TemplateProps extends Omit<BoxProps, 'children'> {
-  slots: SlotMap;
-  templates: TemplateMap;
-  columns?: ColumnsMap;
-  gap?: Responsive<SpaceValue>;
-  rowGap?: Responsive<SpaceValue>;
-  colGap?: Responsive<SpaceValue>;
-}
-
-function resolveByBreakpointMap<T>(
-  map: Partial<Record<Breakpoint, T>> | undefined,
-  breakpoint: Breakpoint,
-): T | undefined {
-  return resolveResponsive(map, breakpoint);
-}
-
-export function Template({
-  slots,
-  templates,
-  columns,
-  gap = 0,
-  rowGap,
-  colGap,
-  ...props
-}: TemplateProps) {
-  const { theme } = useTheme();
-  const { breakpoint } = useResponsiveRuntime();
-
-  const resolvedTemplate = resolveByBreakpointMap(templates, breakpoint) ?? [];
-  const resolvedColumns = resolveByBreakpointMap(columns, breakpoint);
-  const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;
-  const rowSpacing = Number(
-    resolveSpacing(theme, resolveResponsive(rowGap, breakpoint) ?? defaultGap) ?? 0,
-  );
-  const colSpacing = Number(
-    resolveSpacing(theme, resolveResponsive(colGap, breakpoint) ?? defaultGap) ?? 0,
-  );
-
-  return (
-    <Box {...props}>
-      {resolvedTemplate.map((row, rowIndex) => (
-        <View
-          key={`row-${String(rowIndex)}`}
-          style={{
-            flexDirection: 'row',
-            marginTop: rowIndex === 0 ? 0 : rowSpacing,
-          }}
-        >
-          {row.map((slotId, cellIndex) => {
-            const weight = resolvedColumns?.[cellIndex] ?? 1;
-            const node = slots[slotId];
-            return (
-              <View
-                key={`${slotId}-${String(rowIndex)}-${String(cellIndex)}`}
-                style={{
-                  flex: weight,
-                  marginLeft: cellIndex === 0 ? 0 : colSpacing,
-                }}
-              >
-                {node}
-              </View>
-            );
-          })}
-        </View>
-      ))}
-    </Box>
-  );
-}

package/src/layout/index.ts

@@ -1,14 +0,0 @@
-export type { AppBarProps } from './AppBar';
-export { AppBar } from './AppBar';
-export type { CenterProps } from './Center';
-export { Center } from './Center';
-export type { InlineProps } from './Inline';
-export { Inline } from './Inline';
-export type { ScrollAreaProps } from './ScrollArea';
-export { ScrollArea } from './ScrollArea';
-export type { ShowProps } from './Show';
-export { Show } from './Show';
-export type { SpacerProps } from './Spacer';
-export { Spacer } from './Spacer';
-export type { TemplateProps } from './Template';
-export { Template } from './Template';

package/src/utils/resolveBoxStyles.test.ts

@@ -1,54 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import type { SurfaceTheme } from '../theme/types';
-import { resolveBoxStyles } from './resolveBoxStyles';
-
-const mockTheme = {
-  spacing: { s: 4, m: 8, l: 16 },
-  radii: { m: 8 },
-  colors: { primary: '#007AFF', surface: '#FFFFFF' },
-} as unknown as SurfaceTheme;
-
-describe('resolveBoxStyles', () => {
-  test('resolves padding and margins correctly', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', { p: 's', m: 8 });
-    expect(styles.padding).toBe(4);
-    expect(styles.margin).toBe(8);
-  });
-
-  test('resolves responsive properties', () => {
-    const props = { p: { base: 's', lg: 'l' } } as const;
-    expect(resolveBoxStyles(mockTheme, 'base', props).padding).toBe(4);
-    expect(resolveBoxStyles(mockTheme, 'lg', props).padding).toBe(16);
-  });
-
-  test('resolves colors and border styles', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {
-      bg: 'primary',
-      radius: 'm',
-      borderWidth: 1,
-      borderColor: 'surface',
-    });
-    expect(styles.backgroundColor).toBe('#007AFF');
-    expect(styles.borderRadius).toBe(8);
-    expect(styles.borderWidth).toBe(1);
-    expect(styles.borderColor).toBe('#FFFFFF');
-  });
-
-  test('resolves spacing tokens for dimension props and preserves raw strings', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {
-      width: 'm',
-      minHeight: 'l',
-      maxWidth: '50%',
-    });
-    expect(styles.width).toBe(8);
-    expect(styles.minHeight).toBe(16);
-    expect(styles.maxWidth).toBe('50%');
-  });
-
-  test('handles undefined props gracefully', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {});
-    expect(styles.padding).toBeUndefined();
-    expect(styles.margin).toBeUndefined();
-  });
-});