@ankhorage/surface 5.0.0 → 6.0.0

package/src/components/modal/Modal.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-
-import { Surface } from '../../features/surface/public';
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Center } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import type { ModalProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-export function Modal({
-  visible,
-  onDismiss,
-  children,
-  closeOnBackdrop = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: ModalProps) {
-  const { theme } = useTheme();
-  const animation = resolveOverlayAnimation('modal');
-  const passive = interactionPolicy === 'passive';
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Portal layer="modal" visible={visible}>
-      <View
-        {...boxNonePointerEvents.props}
-        style={[
-          boxNonePointerEvents.style,
-          {
-            bottom: 0,
-            left: 0,
-            position: 'absolute',
-            right: 0,
-            top: 0,
-          },
-        ]}
-      >
-        <Pressable
-          onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}
-          style={{
-            backgroundColor: theme.semantics.neutral.text,
-            bottom: 0,
-            left: 0,
-            opacity: animation.backdropOpacity,
-            position: 'absolute',
-            right: 0,
-            top: 0,
-          }}
-          testID={testID ? `${testID}-backdrop` : undefined}
-        />
-        <FocusScope
-          active={visible}
-          onEscape={passive ? undefined : onDismiss}
-          testID={testID ? `${testID}-focus` : undefined}
-        >
-          <Center
-            p="l"
-            style={{
-              flex: 1,
-            }}
-          >
-            <View
-              accessible
-              accessibilityViewIsModal
-              style={{
-                maxWidth: 560,
-                width: '100%',
-              }}
-            >
-              <Surface
-                p="l"
-                style={{
-                  shadowOpacity: 0.14,
-                  shadowRadius: 18,
-                  shadowOffset: { width: 0, height: 8 },
-                }}
-                testID={testID}
-                variant="raised"
-              >
-                {children}
-              </Surface>
-            </View>
-          </Center>
-        </FocusScope>
-      </View>
-    </Portal>
-  );
-}

package/src/components/modal/index.ts

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

package/src/components/tabs/Tab.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useTheme } from '../../theme/ThemeContext';
-import { useTabsContext } from './context';
-import type { TabProps } from './types';
-
-export function Tab({
-  value,
-  children,
-  disabled = false,
-  interactionPolicy = 'enabled',
-  testID,
-}: TabProps) {
-  const { theme } = useTheme();
-  const {
-    activeValue,
-    getPanelId,
-    getTabId,
-    registerTab,
-    setActiveValue,
-    setFocusedValue,
-    unregisterTab,
-  } = useTabsContext();
-  const pressableRef = React.useRef<React.ElementRef<typeof Pressable> | null>(null);
-  const selected = activeValue === value;
-  const tabId = getTabId(value);
-  const panelId = getPanelId(value);
-  const passive = interactionPolicy === 'passive';
-
-  React.useEffect(() => {
-    registerTab({
-      disabled,
-      focus: () => {
-        const focusable = pressableRef.current as unknown as {
-          focus?: (() => void) | undefined;
-        } | null;
-        focusable?.focus?.();
-      },
-      value,
-    });
-
-    return () => {
-      unregisterTab(value);
-    };
-  }, [disabled, registerTab, unregisterTab, value]);
-
-  return (
-    <Pressable
-      accessibilityLabel={undefined}
-      accessibilityRole="tab"
-      accessibilityState={{ disabled, selected }}
-      nativeID={tabId}
-      aria-controls={panelId}
-      disabled={disabled}
-      onFocus={() => setFocusedValue(value)}
-      onBlur={() => setFocusedValue(undefined)}
-      onPress={
-        passive
-          ? undefined
-          : () => {
-              if (!disabled) {
-                setActiveValue(value);
-              }
-            }
-      }
-      ref={pressableRef}
-      testID={testID}
-    >
-      <Box
-        px="m"
-        py="s"
-        style={{
-          borderBottomColor: selected
-            ? theme.semantics.action.primary.base
-            : theme.semantics.border.default,
-          borderBottomWidth: 2,
-          opacity: disabled ? 0.64 : 1,
-        }}
-      >
-        <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
-          {children}
-        </Text>
-      </Box>
-    </Pressable>
-  );
-}

package/src/components/tabs/TabList.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { useFocusManager } from '../../internal/focus/useFocusManager';
-import { useTabsContext } from './context';
-import { resolveNextTabValue } from './navigation';
-import type { TabListProps } from './types';
-
-export function TabList({ children, testID }: TabListProps) {
-  const { bindKeydown } = useFocusManager();
-  const { focusedValue, setActiveValue, tabs } = useTabsContext();
-
-  React.useEffect(() => {
-    if (!focusedValue) {
-      return undefined;
-    }
-
-    return bindKeydown((event) => {
-      const nextValue =
-        event.key === 'ArrowLeft' ||
-        event.key === 'ArrowRight' ||
-        event.key === 'ArrowUp' ||
-        event.key === 'ArrowDown' ||
-        event.key === 'Home' ||
-        event.key === 'End'
-          ? resolveNextTabValue(tabs, focusedValue, event.key)
-          : undefined;
-
-      if (!nextValue) {
-        return;
-      }
-
-      event.preventDefault();
-      const nextTab = tabs.find((tab) => tab.value === nextValue);
-      nextTab?.focus();
-      setActiveValue(nextValue);
-    });
-  }, [bindKeydown, focusedValue, setActiveValue, tabs]);
-
-  return (
-    <Box
-      accessibilityRole="tablist"
-      style={{
-        flexDirection: 'row',
-      }}
-      testID={testID}
-    >
-      {children}
-    </Box>
-  );
-}

package/src/components/tabs/Tabs.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { useControllableState } from '../../internal/useControllableState';
-import { getTabId as resolveTabId, getTabPanelId as resolveTabPanelId } from './a11y';
-import { type TabRegistration, TabsContext } from './context';
-import type { TabsProps } from './types';
-
-export function Tabs({ children, value, defaultValue, onValueChange, testID }: TabsProps) {
-  const [activeValue, setActiveValue] = useControllableState<string | undefined>({
-    value,
-    defaultValue,
-    onChange: (nextValue) => {
-      if (nextValue !== undefined) {
-        onValueChange?.(nextValue);
-      }
-    },
-  });
-  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);
-  const [tabs, setTabs] = React.useState<TabRegistration[]>([]);
-
-  const registerTab = React.useCallback((tab: TabRegistration) => {
-    setTabs((current) => {
-      return current.some((entry) => entry.value === tab.value)
-        ? current.map((entry) => (entry.value === tab.value ? tab : entry))
-        : [...current, tab];
-    });
-  }, []);
-
-  const unregisterTab = React.useCallback((valueToRemove: string) => {
-    setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));
-  }, []);
-
-  React.useEffect(() => {
-    if (activeValue !== undefined) {
-      return;
-    }
-
-    const firstEnabledTab = tabs.find((entry) => !entry.disabled);
-    if (firstEnabledTab) {
-      setActiveValue(firstEnabledTab.value);
-    }
-  }, [activeValue, setActiveValue, tabs]);
-
-  const contextValue = React.useMemo(
-    () => ({
-      activeValue,
-      focusedValue,
-      getPanelId: (tabValue: string) => resolveTabPanelId(testID, tabValue),
-      getTabId: (tabValue: string) => resolveTabId(testID, tabValue),
-      registerTab,
-      setActiveValue: (nextValue: string) => {
-        setActiveValue(nextValue);
-      },
-      setFocusedValue,
-      tabs,
-      unregisterTab,
-    }),
-    [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],
-  );
-
-  return (
-    <TabsContext value={contextValue}>
-      <Box testID={testID}>{children}</Box>
-    </TabsContext>
-  );
-}

package/src/components/tabs/a11y.test.ts

@@ -1,15 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { getTabId, getTabPanelId } from './a11y';
-
-describe('tabs accessibility ids', () => {
-  it('creates stable ids from tab values', () => {
-    expect(getTabId(undefined, 'Account Settings')).toBe('tabs-tab-Account-Settings');
-    expect(getTabPanelId(undefined, 'Account Settings')).toBe('tabs-panel-Account-Settings');
-  });
-
-  it('namespaces ids by tabs testID when provided', () => {
-    expect(getTabId('settings', 'billing')).toBe('settings-tabs-tab-billing');
-    expect(getTabPanelId('settings', 'billing')).toBe('settings-tabs-panel-billing');
-  });
-});

package/src/components/tabs/a11y.ts

@@ -1,15 +0,0 @@
-function sanitizeTabValue(value: string): string {
-  return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');
-}
-
-function createTabsIdBase(testID: string | undefined): string {
-  return testID ? `${testID}-tabs` : 'tabs';
-}
-
-export function getTabId(testID: string | undefined, value: string): string {
-  return `${createTabsIdBase(testID)}-tab-${sanitizeTabValue(value)}`;
-}
-
-export function getTabPanelId(testID: string | undefined, value: string): string {
-  return `${createTabsIdBase(testID)}-panel-${sanitizeTabValue(value)}`;
-}

package/src/components/tabs/context.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-export interface TabRegistration {
-  disabled: boolean;
-  focus: () => void;
-  value: string;
-}
-
-export interface TabsContextValue {
-  activeValue: string | undefined;
-  focusedValue: string | undefined;
-  getPanelId: (value: string) => string;
-  getTabId: (value: string) => string;
-  registerTab: (tab: TabRegistration) => void;
-  setActiveValue: (value: string) => void;
-  setFocusedValue: (value: string | undefined) => void;
-  tabs: TabRegistration[];
-  unregisterTab: (value: string) => void;
-}
-
-export const TabsContext = React.createContext<TabsContextValue | null>(null);
-
-export function useTabsContext(): TabsContextValue {
-  const value = React.use(TabsContext);
-
-  if (!value) {
-    throw new Error('Tabs components must be used within <Tabs>.');
-  }
-
-  return value;
-}

package/src/components/tabs/index.ts

@@ -1,5 +0,0 @@
-export { Tab } from './Tab';
-export { TabList } from './TabList';
-export { TabPanel } from './TabPanel';
-export { Tabs } from './Tabs';
-export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './types';

package/src/components/tabs/navigation.ts

@@ -1,32 +0,0 @@
-import type { TabRegistration } from './context';
-
-export function resolveNextTabValue(
-  tabs: TabRegistration[],
-  currentValue: string | undefined,
-  key: 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End',
-): string | undefined {
-  const enabledTabs = tabs.filter((tab) => !tab.disabled);
-  if (enabledTabs.length === 0) {
-    return undefined;
-  }
-
-  if (key === 'Home') {
-    return enabledTabs[0]?.value;
-  }
-
-  if (key === 'End') {
-    return enabledTabs[enabledTabs.length - 1]?.value;
-  }
-
-  const currentIndex = enabledTabs.findIndex((tab) => tab.value === currentValue);
-  if (currentIndex === -1) {
-    return enabledTabs[0]?.value;
-  }
-
-  const nextIndex =
-    key === 'ArrowLeft' || key === 'ArrowUp'
-      ? (currentIndex - 1 + enabledTabs.length) % enabledTabs.length
-      : (currentIndex + 1) % enabledTabs.length;
-
-  return enabledTabs[nextIndex]?.value;
-}

package/src/components/tabs/types.ts

@@ -1,30 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-
-export interface TabsProps {
-  children?: React.ReactNode;
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: ((value: string) => void) | undefined;
-  testID?: string;
-}
-
-export interface TabListProps {
-  children?: React.ReactNode;
-  testID?: string;
-}
-
-export interface TabProps {
-  value: string;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}
-
-export interface TabPanelProps {
-  value: string;
-  children?: React.ReactNode;
-  testID?: string;
-}

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