@ankhorage/surface 4.2.0 → 4.2.1

package/src/components/card/Card.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import { Surface } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { useTheme } from '../../theme/ThemeContext';
-import type { CardProps } from './types';
-
-function resolveCardStateBackground(
-  variant: NonNullable<CardProps['variant']>,
-  pressed: boolean,
-  hovered: boolean,
-  themeBackgrounds: {
-    base: string;
-    subtle: string;
-    hover: string;
-    active: string;
-  },
-) {
-  if (variant === 'outline') {
-    return pressed ? themeBackgrounds.active : hovered ? themeBackgrounds.hover : 'transparent';
-  }
-
-  if (variant === 'subtle') {
-    return pressed
-      ? themeBackgrounds.active
-      : hovered
-        ? themeBackgrounds.hover
-        : themeBackgrounds.subtle;
-  }
-
-  return pressed
-    ? themeBackgrounds.active
-    : hovered
-      ? themeBackgrounds.hover
-      : themeBackgrounds.base;
-}
-
-export function Card({
-  children,
-  variant = 'default',
-  onPress,
-  disabled = false,
-  testID,
-  style,
-  ...props
-}: CardProps) {
-  const { theme } = useTheme();
-
-  if (!onPress) {
-    return (
-      <Surface {...props} style={style} testID={testID} variant={variant}>
-        {children}
-      </Surface>
-    );
-  }
-
-  return (
-    <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
-      {(state) => (
-        <Surface
-          {...props}
-          style={[
-            {
-              backgroundColor: resolveCardStateBackground(variant, state.pressed, state.hovered, {
-                active: theme.semantics.neutral.surfaceActive,
-                base: theme.semantics.surface.default,
-                hover: theme.semantics.neutral.surfaceHover,
-                subtle: theme.semantics.surface.subtle,
-              }),
-              opacity: state.disabled ? 0.72 : 1,
-            },
-            style,
-          ]}
-          variant={variant}
-        >
-          {children}
-        </Surface>
-      )}
-    </ButtonBase>
-  );
-}

package/src/components/card/index.ts

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

package/src/components/checkbox/Checkbox.tsx

@@ -1,120 +0,0 @@
-import React from 'react';
-
-import {
-  resolveFieldState,
-  resolveIndicatorSize,
-  resolveSelectionControlColors,
-  resolveSelectionControlNextChecked,
-} from '../../internal/resolvers';
-import { useControllableState } from '../../internal/useControllableState';
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import type { CheckboxProps } from './types';
-
-export function Checkbox({
-  children,
-  checked,
-  defaultChecked = false,
-  onCheckedChange,
-  color = 'primary',
-  size = 'm',
-  disabled = false,
-  invalid = false,
-  readOnly = false,
-  accessibilityLabel,
-  testID,
-  ...props
-}: CheckboxProps) {
-  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: 'checkbox',
-    readOnly,
-  });
-
-  return (
-    <ButtonBase
-      {...props}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="checkbox"
-      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';
-        const indicatorColor = fieldState.invalid ? 'error' : color;
-        const indicatorEmphasis = disabled ? 'muted' : 'inverse';
-
-        return (
-          <Box
-            style={{
-              alignItems: 'center',
-              flexDirection: 'row',
-              opacity: colors.opacity,
-            }}
-          >
-            <Box
-              radius="s"
-              style={{
-                alignItems: 'center',
-                backgroundColor: colors.backgroundColor,
-                borderColor: colors.borderColor,
-                borderWidth: 1.5,
-                height: indicatorSize.checkbox,
-                justifyContent: 'center',
-                width: indicatorSize.checkbox,
-              }}
-            >
-              {isChecked ? (
-                <Text
-                  color={disabled ? undefined : indicatorColor}
-                  emphasis={indicatorEmphasis}
-                  variant="caption"
-                  weight="bold"
-                >
-                  ✓
-                </Text>
-              ) : null}
-            </Box>
-            {children ? (
-              <Box ml="s">
-                <Text emphasis={labelEmphasis}>{children}</Text>
-              </Box>
-            ) : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/checkbox/index.ts

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

package/src/components/icon-button/IconButton.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { resolveButtonColors, resolveControlSize, resolveIconSize } from '../../internal/resolvers';
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { useTheme } from '../../theme/ThemeContext';
-import type { IconButtonProps } from './types';
-
-export function IconButton({
-  icon,
-  accessibilityLabel,
-  variant = 'ghost',
-  color = 'primary',
-  size = 'm',
-  disabled = false,
-  onPress,
-  testID,
-  ...props
-}: IconButtonProps) {
-  const { theme } = useTheme();
-  const controlSize = resolveControlSize(theme, size);
-
-  return (
-    <ButtonBase
-      {...props}
-      accessibilityLabel={accessibilityLabel}
-      disabled={disabled}
-      onPress={onPress}
-      testID={testID}
-    >
-      {(state) => {
-        const colors = resolveButtonColors(theme, { color, state, variant });
-
-        return (
-          <Box
-            radius={controlSize.borderRadius}
-            style={{
-              minHeight: controlSize.minHeight,
-              minWidth: controlSize.minHeight,
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: colors.backgroundColor,
-              borderColor: colors.borderColor,
-              borderWidth: variant === 'solid' ? 0 : 1,
-              opacity: colors.opacity,
-            }}
-          >
-            <Icon {...icon} color={colors.contentColor} size={resolveIconSize(theme, size)} />
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/icon-button/index.ts

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

package/src/components/icon-button/types.ts

@@ -1,16 +0,0 @@
-import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
-import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { IconSource } from '../../primitives/icon';
-import type { SurfaceColor } from '../../surfaceColor';
-
-export interface IconButtonProps extends Omit<
-  ButtonBaseProps,
-  'children' | 'style' | 'accessibilityLabel'
-> {
-  icon: IconSource;
-  accessibilityLabel: string;
-  variant?: ButtonVariant;
-  color?: SurfaceColor;
-  size?: ControlSize;
-}

package/src/components/radio/Radio.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-
-import {
-  resolveFieldState,
-  resolveIndicatorSize,
-  resolveSelectionControlColors,
-  resolveSelectionControlNextChecked,
-} from '../../internal/resolvers';
-import { useControllableState } from '../../internal/useControllableState';
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { isRadioTextContent } from './isRadioTextContent';
-import type { RadioProps } from './types';
-
-/***
- * Renders one radio control with either text or structured label content.
- */
-export function Radio({
-  children,
-  checked,
-  defaultChecked = false,
-  onCheckedChange,
-  color = 'primary',
-  size = 'm',
-  disabled = false,
-  invalid = false,
-  readOnly = false,
-  accessibilityLabel,
-  testID,
-  ...props
-}: RadioProps) {
-  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: 'radio',
-    readOnly,
-  });
-  const hasContent = children !== undefined && children !== null && children !== false;
-
-  return (
-    <ButtonBase
-      {...props}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="radio"
-      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';
-        const isTextContent = isRadioTextContent(children);
-
-        return (
-          <Box
-            style={{
-              alignItems: 'center',
-              flexDirection: 'row',
-              opacity: colors.opacity,
-            }}
-          >
-            <Box
-              radius="full"
-              style={{
-                alignItems: 'center',
-                backgroundColor: colors.backgroundColor,
-                borderColor: colors.borderColor,
-                borderWidth: 1.5,
-                height: indicatorSize.radio,
-                justifyContent: 'center',
-                width: indicatorSize.radio,
-              }}
-            >
-              {isChecked ? (
-                <Box
-                  radius="full"
-                  style={{
-                    backgroundColor: colors.indicatorColor,
-                    height: indicatorSize.radioDot,
-                    width: indicatorSize.radioDot,
-                  }}
-                />
-              ) : null}
-            </Box>
-            {hasContent ? (
-              <Box flex={1} ml="s">
-                {isTextContent ? <Text emphasis={labelEmphasis}>{children}</Text> : children}
-              </Box>
-            ) : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/radio/index.ts

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

package/src/components/text-input/TextInput.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import { Platform, TextInput as ReactNativeTextInput, View } from 'react-native';
-
-import {
-  resolveControlSize,
-  resolveFieldState,
-  resolveFocusRingStyles,
-  resolveInputColors,
-  resolveTextStyles,
-} from '../../internal/resolvers';
-import { useTheme } from '../../theme/ThemeContext';
-import type { TextInputProps } from './types';
-
-export function TextInput({
-  value,
-  defaultValue,
-  onChangeText,
-  placeholder,
-  size = 'm',
-  disabled = false,
-  readOnly = false,
-  invalid = false,
-  leadingAccessory,
-  trailingAccessory,
-  interactionPolicy = 'enabled',
-  style,
-  testID,
-  onFocus,
-  onBlur,
-  ...props
-}: TextInputProps) {
-  const { theme } = useTheme();
-  const controlSize = resolveControlSize(theme, size);
-  const [focused, setFocused] = React.useState(false);
-  const fieldState = resolveFieldState({
-    disabled,
-    focused,
-    invalid,
-    readOnly,
-  });
-  const colors = resolveInputColors(theme, fieldState);
-  const resolvedTextStyle = resolveTextStyles(theme, {
-    variant: controlSize.textVariant,
-  });
-  const resolvedLineHeight =
-    typeof resolvedTextStyle.lineHeight === 'number'
-      ? resolvedTextStyle.lineHeight
-      : controlSize.minHeight - controlSize.paddingVertical * 2;
-  const lineCount = Math.max(props.numberOfLines ?? 1, 1);
-  const inputMinHeight = props.multiline
-    ? resolvedLineHeight * lineCount
-    : controlSize.minHeight - controlSize.paddingVertical * 2;
-  const containerMinHeight = props.multiline
-    ? inputMinHeight + controlSize.paddingVertical * 2
-    : controlSize.minHeight;
-  const passive = interactionPolicy === 'passive';
-
-  const handleFocus: NonNullable<TextInputProps['onFocus']> = (event) => {
-    setFocused(true);
-    onFocus?.(event);
-  };
-
-  const handleBlur: NonNullable<TextInputProps['onBlur']> = (event) => {
-    setFocused(false);
-    onBlur?.(event);
-  };
-
-  return (
-    <View
-      style={[
-        {
-          minHeight: containerMinHeight,
-          paddingHorizontal: controlSize.paddingHorizontal,
-          paddingVertical: controlSize.paddingVertical,
-          borderRadius: controlSize.borderRadius,
-          borderWidth: 1,
-          borderColor: colors.borderColor,
-          backgroundColor: colors.backgroundColor,
-          flexDirection: 'row',
-          alignItems: props.multiline ? 'flex-start' : 'center',
-          opacity: colors.opacity,
-        },
-        resolveFocusRingStyles(theme.semantics.border.focus, focused, Platform.OS === 'web'),
-      ]}
-    >
-      {leadingAccessory ? (
-        <View style={{ marginRight: theme.spacing.s }}>{leadingAccessory}</View>
-      ) : null}
-      <ReactNativeTextInput
-        {...props}
-        defaultValue={defaultValue}
-        editable={passive ? false : !disabled && !readOnly}
-        numberOfLines={props.multiline ? props.numberOfLines : 1}
-        onBlur={handleBlur}
-        onChangeText={(nextValue) => {
-          if (passive) {
-            return;
-          }
-
-          onChangeText?.(nextValue);
-        }}
-        onFocus={handleFocus}
-        placeholder={placeholder}
-        placeholderTextColor={colors.placeholderColor}
-        readOnly={readOnly}
-        style={[
-          {
-            flex: 1,
-            minHeight: inputMinHeight,
-            padding: 0,
-            color: colors.contentColor,
-            textAlignVertical: props.multiline ? 'top' : 'center',
-          },
-          style,
-        ]}
-        testID={testID}
-        value={value}
-      />
-      {trailingAccessory ? (
-        <View style={{ marginLeft: theme.spacing.s }}>{trailingAccessory}</View>
-      ) : null}
-    </View>
-  );
-}

package/src/components/text-input/index.ts

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

package/src/layout/Container.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';
-import { useTheme } from '../theme/ThemeContext';
-import type { SurfaceTheme } 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 SurfaceTheme['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/Grid.tsx

@@ -1,83 +0,0 @@
-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: `${number}%` = `${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,
-                  flexBasis: basisPercent,
-                };
-
-          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/KeyboardAvoidingView.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  KeyboardAvoidingView as ReactNativeKeyboardAvoidingView,
-  type KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
-} from 'react-native';
-
-/*** Preserve React Native keyboard avoidance behind the stable Surface layout boundary. */
-export function KeyboardAvoidingView(props: KeyboardAvoidingViewProps) {
-  return <ReactNativeKeyboardAvoidingView {...props} />;
-}
-
-export type KeyboardAvoidingViewBehavior = NonNullable<
-  ReactNativeKeyboardAvoidingViewProps['behavior']
->;
-
-export type KeyboardAvoidingViewProps = ReactNativeKeyboardAvoidingViewProps;