@ankhorage/surface 3.4.6 → 4.1.0

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { Box, Inline, Stack } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
-import type { ActionSheetItemProps } from './types';
-
-export function ActionSheetItem({
-  label,
-  description,
-  leading,
-  trailing,
-  color,
-  disabled = false,
-  selected = false,
-  interactionPolicy = 'enabled',
-  onPress,
-  testID,
-}: ActionSheetItemProps) {
-  return (
-    <ButtonBase
-      accessibilityRole="button"
-      accessibilityState={{ disabled, selected }}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={onPress}
-      radius="m"
-      testID={testID}
-    >
-      {(state) => (
-        <Box
-          px="m"
-          py="m"
-          radius="m"
-          style={{
-            opacity: state.disabled ? 0.56 : 1,
-          }}
-        >
-          <Inline align="center" gap="m" justify="space-between" wrap="nowrap">
-            {leading ? <Box>{leading}</Box> : null}
-            <Box flex={1}>
-              <Stack gap="xxs">
-                <Text color={color} variant="body" weight={selected ? 'semiBold' : 'medium'}>
-                  {label}
-                </Text>
-                {description ? (
-                  <Text emphasis="muted" variant="bodySmall">
-                    {description}
-                  </Text>
-                ) : null}
-              </Stack>
-            </Box>
-            {trailing ? <Box>{trailing}</Box> : null}
-          </Inline>
-        </Box>
-      )}
-    </ButtonBase>
-  );
-}

package/src/components/action-sheet/index.ts

@@ -1,3 +0,0 @@
-export { ActionSheet } from './ActionSheet';
-export { ActionSheetItem } from './ActionSheetItem';
-export type { ActionSheetItemProps, ActionSheetProps } from './types';

package/src/components/action-sheet/types.ts

@@ -1,29 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-import type { SurfaceColor } from '../../surfaceColor';
-
-export interface ActionSheetProps {
-  visible: boolean;
-  onDismiss?: (() => void) | undefined;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  children?: React.ReactNode;
-  cancelLabel?: React.ReactNode;
-  closeOnBackdrop?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}
-
-export interface ActionSheetItemProps {
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  color?: SurfaceColor;
-  disabled?: boolean;
-  selected?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  onPress?: (() => void) | undefined;
-  testID?: string;
-}

package/src/components/drawer/Drawer.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Box, Surface } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import type { DrawerProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-export function Drawer({
-  visible,
-  onDismiss,
-  position = 'right',
-  children,
-  closeOnBackdrop = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: DrawerProps) {
-  const { theme } = useTheme();
-  const animation = resolveOverlayAnimation('drawer');
-  const passive = interactionPolicy === 'passive';
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Portal layer="drawer" 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}
-        >
-          <Box
-            pointerEvents="box-none"
-            style={{
-              flex: 1,
-              justifyContent: 'flex-start',
-            }}
-          >
-            <View
-              accessible
-              accessibilityViewIsModal
-              style={{
-                alignSelf: position === 'left' ? 'flex-start' : 'flex-end',
-                height: '100%',
-                maxWidth: 420,
-                width: '88%',
-              }}
-            >
-              <Surface
-                p="l"
-                style={{
-                  height: '100%',
-                  shadowOpacity: 0.14,
-                  shadowRadius: 14,
-                  shadowOffset: { width: position === 'left' ? 4 : -4, height: 0 },
-                }}
-                testID={testID}
-                variant="raised"
-              >
-                {children}
-              </Surface>
-            </View>
-          </Box>
-        </FocusScope>
-      </View>
-    </Portal>
-  );
-}

package/src/components/drawer/index.ts

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

package/src/components/drawer/types.ts

@@ -1,13 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-
-export interface DrawerProps {
-  visible: boolean;
-  onDismiss?: (() => void) | undefined;
-  position?: 'left' | 'right';
-  children?: React.ReactNode;
-  closeOnBackdrop?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}

package/src/components/navigation/DrawerNavigation.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { Stack } from '../../layout';
-import { DrawerNavigationItem } from './DrawerNavigationItem';
-import type { DrawerNavigationProps } from './types';
-
-export function DrawerNavigation({
-  items,
-  header,
-  footer,
-  compact = false,
-  testID,
-  interactionPolicy,
-}: DrawerNavigationProps) {
-  return (
-    <Stack gap={compact ? 's' : 'm'} testID={testID}>
-      {header}
-      <Stack gap={compact ? 'xs' : 's'}>
-        {items.map((item) => (
-          <DrawerNavigationItem
-            compact={compact}
-            interactionPolicy={interactionPolicy}
-            item={item}
-            key={item.id}
-            testID={testID}
-          />
-        ))}
-      </Stack>
-      {footer}
-    </Stack>
-  );
-}

package/src/components/navigation/DrawerNavigationItem.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { NavigationItem } from './NavigationItem';
-import type { DrawerNavigationItemProps } from './types';
-
-export function DrawerNavigationItem({
-  item,
-  compact = false,
-  testID,
-  interactionPolicy,
-}: DrawerNavigationItemProps) {
-  return (
-    <NavigationItem
-      compact={compact}
-      interactionPolicy={interactionPolicy}
-      item={{
-        ...item,
-        accessibilityRole: item.accessibilityRole ?? 'button',
-      }}
-      testID={testID}
-    />
-  );
-}

package/src/components/navigation/NavigationItem.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-import type { NavigationItemProps } from './types';
-
-export function NavigationItem({
-  item,
-  compact = false,
-  testID,
-  interactionPolicy,
-}: NavigationItemProps) {
-  const { theme } = useTheme();
-  const active = Boolean(item.active);
-  const disabled = Boolean(item.disabled);
-  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
-  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
-    active,
-    disabled,
-    item.accessibilityState,
-  );
-
-  return (
-    <ButtonBase
-      accessibilityLabel={item.accessibilityLabel}
-      accessibilityRole={item.accessibilityRole ?? 'button'}
-      accessibilityState={resolvedAccessibilityState}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={item.onPress}
-      testID={resolvedTestID}
-    >
-      {(state) => {
-        const presentation = resolveNavigationItemPresentation(theme, {
-          active,
-          disabled,
-          state,
-        });
-
-        return (
-          <Box
-            px="m"
-            py={compact ? 's' : 'm'}
-            radius="m"
-            style={{
-              backgroundColor: presentation.backgroundColor,
-              flexDirection: 'row',
-              alignItems: 'center',
-              opacity: presentation.opacity,
-            }}
-          >
-            {item.icon ? (
-              <View style={{ marginRight: theme.spacing.s }}>
-                <Icon {...item.icon} color={presentation.contentColor} size={compact ? 's' : 'm'} />
-              </View>
-            ) : null}
-            <Box flex={1}>
-              <Text
-                color={active && !disabled ? 'primary' : undefined}
-                emphasis={disabled ? 'muted' : 'default'}
-                numberOfLines={1}
-                variant={compact ? 'bodySmall' : 'body'}
-                weight="medium"
-              >
-                {item.label}
-              </Text>
-            </Box>
-            {item.badge ? <View style={{ marginLeft: theme.spacing.s }}>{item.badge}</View> : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/navigation/NavigationList.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Stack } from '../../layout';
-import { NavigationItem } from './NavigationItem';
-import type { NavigationListProps } from './types';
-
-export function NavigationList({
-  items,
-  orientation = 'vertical',
-  compact = false,
-  testID,
-  interactionPolicy,
-}: NavigationListProps) {
-  return (
-    <Stack
-      direction={orientation === 'horizontal' ? 'row' : 'column'}
-      gap={compact ? 'xs' : 's'}
-      testID={testID}
-    >
-      {items.map((item) => (
-        <NavigationItem
-          compact={compact}
-          interactionPolicy={interactionPolicy}
-          item={item}
-          key={item.id}
-          testID={testID}
-        />
-      ))}
-    </Stack>
-  );
-}

package/src/components/navigation/TabBar.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import { TabBarItem } from './TabBarItem';
-import type { TabBarProps } from './types';
-
-export function TabBar({ items, compact = false, testID, interactionPolicy }: TabBarProps) {
-  const { theme } = useTheme();
-
-  return (
-    <Box
-      style={{
-        flexDirection: 'row',
-        borderTopColor: theme.semantics.border.default,
-        borderTopWidth: 1,
-      }}
-      testID={testID}
-    >
-      {items.map((item) => (
-        <TabBarItem
-          compact={compact}
-          interactionPolicy={interactionPolicy}
-          item={item}
-          key={item.id}
-          testID={testID}
-        />
-      ))}
-    </Box>
-  );
-}

package/src/components/navigation/TabBarItem.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-import type { TabBarItemProps } from './types';
-
-export function TabBarItem({ item, compact = false, testID, interactionPolicy }: TabBarItemProps) {
-  const { theme } = useTheme();
-  const active = Boolean(item.active);
-  const disabled = Boolean(item.disabled);
-  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
-  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
-    active,
-    disabled,
-    item.accessibilityState,
-  );
-
-  return (
-    <ButtonBase
-      accessibilityLabel={item.accessibilityLabel}
-      accessibilityRole={item.accessibilityRole ?? 'tab'}
-      accessibilityState={resolvedAccessibilityState}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={item.onPress}
-      style={{ flex: 1 }}
-      testID={resolvedTestID}
-    >
-      {(state) => {
-        const presentation = resolveNavigationItemPresentation(theme, {
-          active,
-          disabled,
-          state,
-        });
-        const contentColor = disabled
-          ? theme.semantics.content.muted
-          : active
-            ? theme.semantics.action.primary.base
-            : theme.semantics.content.muted;
-
-        return (
-          <Box
-            px="m"
-            py={compact ? 's' : 'm'}
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: presentation.backgroundColor,
-              opacity: presentation.opacity,
-            }}
-          >
-            {item.icon ? (
-              <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
-                <Icon {...item.icon} color={contentColor} size={compact ? 's' : 'm'} />
-              </View>
-            ) : null}
-            {item.label ? (
-              <Text
-                color={active && !disabled ? 'primary' : undefined}
-                emphasis={active && !disabled ? 'default' : 'muted'}
-                numberOfLines={1}
-                variant={compact ? 'bodySmall' : 'label'}
-                weight="medium"
-              >
-                {item.label}
-              </Text>
-            ) : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/navigation/helpers.test.ts

@@ -1,74 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { createTheme } from '../../theme/createTheme';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-
-describe('navigation helpers', () => {
-  it('forces selected and disabled when active/disabled are true', () => {
-    expect(
-      resolveNavigationAccessibilityState(true, true, {
-        selected: false,
-        disabled: false,
-      }),
-    ).toEqual({
-      selected: true,
-      disabled: true,
-    });
-  });
-
-  it('preserves user-provided state when not active/disabled', () => {
-    expect(
-      resolveNavigationAccessibilityState(false, false, {
-        disabled: false,
-        selected: false,
-        expanded: true,
-      }),
-    ).toEqual({
-      disabled: false,
-      selected: false,
-      expanded: true,
-    });
-  });
-
-  it('resolves active presentation via primary soft semantics', () => {
-    const theme = createTheme();
-    const state = { pressed: false, hovered: true, focused: false, disabled: false };
-    const resolved = resolveNavigationItemPresentation(theme, {
-      active: true,
-      disabled: false,
-      state,
-    });
-
-    expect(resolved.backgroundColor).toBe(theme.semantics.action.primary.softHover);
-    expect(resolved.contentColor).toBe(theme.semantics.action.primary.onSoftHoverText);
-    expect(resolved.opacity).toBe(1);
-  });
-
-  it('resolves inactive presentation via neutral hover/active semantics', () => {
-    const theme = createTheme();
-    const state = { pressed: true, hovered: true, focused: false, disabled: false };
-    const resolved = resolveNavigationItemPresentation(theme, {
-      active: false,
-      disabled: false,
-      state,
-    });
-
-    expect(resolved.backgroundColor).toBe(theme.semantics.neutral.surfaceActive);
-    expect(resolved.contentColor).toBe(theme.semantics.content.default);
-    expect(resolved.opacity).toBe(1);
-  });
-
-  it('ignores hover/pressed presentation when disabled', () => {
-    const theme = createTheme();
-    const state = { pressed: true, hovered: true, focused: false, disabled: true };
-    const resolved = resolveNavigationItemPresentation(theme, {
-      active: true,
-      disabled: true,
-      state,
-    });
-
-    expect(resolved.backgroundColor).toBe(theme.semantics.surface.disabled);
-    expect(resolved.contentColor).toBe(theme.semantics.content.disabled);
-    expect(resolved.opacity).toBe(1);
-  });
-});

package/src/components/navigation/helpers.ts

@@ -1,81 +0,0 @@
-import type { AccessibilityState } from 'react-native';
-
-import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { SurfaceTheme } from '../../theme/types';
-
-export function resolveNavigationAccessibilityState(
-  active: boolean,
-  disabled: boolean,
-  accessibilityState?: AccessibilityState,
-): AccessibilityState {
-  const resolved: AccessibilityState = { ...(accessibilityState ?? {}) };
-
-  if (active) {
-    resolved.selected = true;
-  }
-
-  if (disabled) {
-    resolved.disabled = true;
-  }
-
-  return resolved;
-}
-
-export interface ResolvedNavigationItemPresentation {
-  backgroundColor: string;
-  contentColor: string;
-  opacity: number;
-}
-
-export function resolveNavigationItemPresentation(
-  theme: SurfaceTheme,
-  {
-    active,
-    disabled,
-    state,
-  }: {
-    active: boolean;
-    disabled: boolean;
-    state: InteractionState;
-  },
-): ResolvedNavigationItemPresentation {
-  const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;
-
-  if (disabled) {
-    return {
-      backgroundColor: theme.semantics.surface.disabled,
-      contentColor: theme.semantics.content.disabled,
-      opacity: 1,
-    };
-  }
-
-  const contentColor = active
-    ? interactionState.pressed
-      ? theme.semantics.action.primary.onSoftActiveText
-      : interactionState.hovered
-        ? theme.semantics.action.primary.onSoftHoverText
-        : theme.semantics.action.primary.onSoftText
-    : theme.semantics.content.default;
-
-  if (active) {
-    return {
-      backgroundColor: interactionState.pressed
-        ? theme.semantics.action.primary.softActive
-        : interactionState.hovered
-          ? theme.semantics.action.primary.softHover
-          : theme.semantics.action.primary.softBg,
-      contentColor,
-      opacity: 1,
-    };
-  }
-
-  return {
-    backgroundColor: interactionState.pressed
-      ? theme.semantics.neutral.surfaceActive
-      : interactionState.hovered
-        ? theme.semantics.neutral.surfaceHover
-        : 'transparent',
-    contentColor,
-    opacity: 1,
-  };
-}

package/src/components/navigation/index.ts

@@ -1,16 +0,0 @@
-export { DrawerNavigation } from './DrawerNavigation';
-export { DrawerNavigationItem } from './DrawerNavigationItem';
-export { NavigationItem } from './NavigationItem';
-export { NavigationList } from './NavigationList';
-export { TabBar } from './TabBar';
-export { TabBarItem } from './TabBarItem';
-export type {
-  DrawerNavigationItemProps,
-  DrawerNavigationProps,
-  NavigationItemIcon,
-  NavigationItemProps,
-  NavigationItemSpec,
-  NavigationListProps,
-  TabBarItemProps,
-  TabBarProps,
-} from './types';