@ankhorage/surface 0.1.4 → 0.1.6

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} />;
+}

package/src/layout/Stack.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } 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 StackProps extends Omit<BoxProps, 'children'> {
+  children?: React.ReactNode;
+  direction?: Responsive<'row' | 'column'>;
+  gap?: Responsive<SpaceValue>;
+  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
+  justify?: Responsive<
+    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+  >;
+  wrap?: Responsive<'nowrap' | 'wrap'>;
+}
+
+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);
+
+  const nodes = React.Children.toArray(children);
+
+  return (
+    <Box
+      {...props}
+      style={[
+        {
+          flexDirection: activeDirection,
+          alignItems: activeAlign,
+          justifyContent: activeJustify,
+          flexWrap: activeWrap,
+        },
+        props.style,
+      ]}
+    >
+      {nodes.map((node, index) => {
+        const spacing =
+          index === 0
+            ? undefined
+            : activeDirection === 'row'
+              ? { marginLeft: activeGap }
+              : { marginTop: activeGap };
+        return (
+          <View key={String(index)} style={spacing}>
+            {node}
+          </View>
+        );
+      })}
+    </Box>
+  );
+}

package/src/layout/Surface.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/ThemeContext';
+import { Box, type BoxProps } from './Box';
+
+export type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';
+
+export interface SurfaceProps extends Omit<BoxProps, 'bg' | 'borderColor' | 'borderWidth'> {
+  variant?: SurfaceVariant;
+}
+
+function resolveSurfaceVariantStyles(
+  variant: SurfaceVariant,
+  borderColor: string,
+  backgroundColor: string,
+): ViewStyle {
+  switch (variant) {
+    case 'subtle':
+      return {
+        backgroundColor,
+        borderColor: 'transparent',
+        borderWidth: 0,
+      };
+    case 'raised':
+      return {
+        backgroundColor,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        elevation: 2,
+        shadowColor: '#000000',
+        shadowOpacity: 0.08,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 8,
+      };
+    case 'outline':
+      return {
+        backgroundColor: 'transparent',
+        borderColor,
+        borderWidth: 1,
+      };
+    case 'default':
+    default:
+      return {
+        backgroundColor,
+        borderColor,
+        borderWidth: 1,
+      };
+  }
+}
+
+export function Surface({ variant = 'default', radius = 'm', style, ...props }: SurfaceProps) {
+  const { theme } = useTheme();
+
+  const backgroundColor =
+    variant === 'subtle'
+      ? theme.semantics.surface.subtle
+      : variant === 'raised'
+        ? theme.semantics.surface.raised
+        : theme.semantics.surface.default;
+  const borderColor = theme.semantics.border.default;
+
+  return (
+    <Box
+      {...props}
+      radius={radius}
+      style={[resolveSurfaceVariantStyles(variant, borderColor, backgroundColor), style]}
+    />
+  );
+}

package/src/layout/Template.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import {
+  type Breakpoint,
+  resolveResponsive,
+  type Responsive,
+  useResponsiveRuntime,
+} from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { Box, type BoxProps } from './Box';
+import { resolveSpacing, type SpaceValue } from './helpers';
+
+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/helpers.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'bun:test';
+
+import type { AnkhTheme } from '../theme/types';
+import { resolveBoxStyles } from './helpers';
+
+const mockTheme = {
+  spacing: {
+    s: 4,
+    m: 8,
+    l: 16,
+  },
+  radii: {
+    m: 8,
+  },
+  colors: {
+    primary: '#007AFF',
+    surface: '#FFFFFF',
+  },
+} as unknown as AnkhTheme;
+
+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' },
+    };
+    const baseStyles = resolveBoxStyles(mockTheme, 'base', props);
+    const lgStyles = resolveBoxStyles(mockTheme, 'lg', props);
+    expect(baseStyles.padding).toBe(4);
+    expect(lgStyles.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();
+  });
+});