@ankhorage/surface 0.1.5 → 0.1.7

package/src/components/badge/Badge.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { resolveButtonColors, resolveControlSize } from '../../internal/resolvers';
+import { Box } from '../../layout';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import type { BadgeProps } from './types';
+
+export function Badge({
+  content,
+  variant = 'soft',
+  tone = 'primary',
+  size = 's',
+  testID,
+}: BadgeProps) {
+  const { theme } = useTheme();
+  const controlSize = resolveControlSize(theme, size);
+  const colors = resolveButtonColors(theme, {
+    variant,
+    tone,
+    state: {
+      disabled: false,
+      focused: false,
+      hovered: false,
+      pressed: false,
+    },
+  });
+
+  return (
+    <Box
+      px={Math.max(theme.spacing.xs, controlSize.paddingHorizontal - 4)}
+      py={Math.max(4, controlSize.paddingVertical - 2)}
+      radius={controlSize.borderRadius}
+      style={{
+        alignSelf: 'flex-start',
+        backgroundColor: colors.backgroundColor,
+        borderColor: colors.borderColor,
+        borderWidth: variant === 'solid' ? 0 : 1,
+      }}
+      testID={testID}
+    >
+      <Text color={colors.contentColor} variant="bodySmall" weight="medium">
+        {content}
+      </Text>
+    </Box>
+  );
+}

package/src/components/badge/index.ts

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

package/src/components/badge/types.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+
+import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
+import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
+import type { ComponentTone } from '../../internal/resolvers/resolveTone';
+
+export interface BadgeProps {
+  content?: React.ReactNode;
+  variant?: Extract<ButtonVariant, 'solid' | 'soft' | 'outline'>;
+  tone?: Extract<ComponentTone, 'primary' | 'neutral' | 'danger' | 'success' | 'warning'>;
+  size?: ControlSize;
+  testID?: string;
+}

package/src/components/button/Button.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { resolveButtonColors, resolveControlSize, resolveIconSize } from '../../internal/resolvers';
+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 type { ButtonProps } from './types';
+
+export function Button({
+  children,
+  variant = 'solid',
+  tone = 'primary',
+  size = 'm',
+  disabled = false,
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  fullWidth = false,
+  onPress,
+  testID,
+  ...props
+}: ButtonProps) {
+  const { theme } = useTheme();
+  const controlSize = resolveControlSize(theme, size);
+
+  return (
+    <ButtonBase
+      {...props}
+      disabled={disabled || loading}
+      onPress={onPress}
+      style={[
+        {
+          alignSelf: fullWidth ? 'stretch' : 'flex-start',
+        },
+      ]}
+      testID={testID}
+    >
+      {(state) => {
+        const colors = resolveButtonColors(theme, {
+          variant,
+          tone,
+          state,
+        });
+        const iconSize = resolveIconSize(theme, size);
+
+        return (
+          <Box
+            px={controlSize.paddingHorizontal}
+            py={controlSize.paddingVertical}
+            radius={controlSize.borderRadius}
+            style={{
+              minHeight: controlSize.minHeight,
+              width: fullWidth ? '100%' : undefined,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: colors.backgroundColor,
+              borderColor: colors.borderColor,
+              borderWidth: variant === 'solid' ? 0 : 1,
+              opacity: colors.opacity,
+            }}
+          >
+            {loading ? (
+              <ActivityIndicator color={colors.contentColor} size="small" />
+            ) : (
+              <>
+                {leadingIcon ? (
+                  <View style={{ marginRight: theme.spacing.s }}>
+                    <Icon
+                      color={colors.contentColor}
+                      name={leadingIcon.name}
+                      provider={leadingIcon.provider}
+                      size={iconSize}
+                    />
+                  </View>
+                ) : null}
+                <Text
+                  color={colors.contentColor}
+                  variant={controlSize.textVariant}
+                  weight="semiBold"
+                >
+                  {children}
+                </Text>
+                {trailingIcon ? (
+                  <View style={{ marginLeft: theme.spacing.s }}>
+                    <Icon
+                      color={colors.contentColor}
+                      name={trailingIcon.name}
+                      provider={trailingIcon.provider}
+                      size={iconSize}
+                    />
+                  </View>
+                ) : null}
+              </>
+            )}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonIconSpec, ButtonProps } from './types';

package/src/components/button/types.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+
+import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
+import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
+import type { ComponentTone } from '../../internal/resolvers/resolveTone';
+import type { ButtonBaseProps } from '../../primitives/button-base';
+import type { IconProps } from '../../primitives/icon';
+
+export interface ButtonIconSpec {
+  name: IconProps['name'];
+  provider?: IconProps['provider'];
+}
+
+export interface ButtonProps extends Omit<
+  ButtonBaseProps,
+  'accessibilityLabel' | 'children' | 'style'
+> {
+  children?: React.ReactNode;
+  variant?: ButtonVariant;
+  tone?: ComponentTone;
+  size?: ControlSize;
+  loading?: boolean;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+  fullWidth?: boolean;
+}

package/src/components/card/Card.tsx

@@ -0,0 +1,81 @@
+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

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

package/src/components/card/types.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+import type { SurfaceProps, SurfaceVariant } from '../../layout';
+
+export interface CardProps extends Omit<SurfaceProps, 'children' | 'variant'> {
+  children?: React.ReactNode;
+  variant?: SurfaceVariant;
+  onPress?: (() => void) | undefined;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,111 @@
+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,
+  tone = '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,
+          tone,
+        });
+
+        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={colors.indicatorColor} variant="caption" weight="bold">
+                  ✓
+                </Text>
+              ) : null}
+            </Box>
+            {children ? (
+              <Box ml="s">
+                <Text color={colors.labelColor}>{children}</Text>
+              </Box>
+            ) : null}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/checkbox/index.ts

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

package/src/components/checkbox/types.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+
+import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
+import type { ComponentTone } from '../../internal/resolvers/resolveTone';
+import type { ButtonBaseProps } from '../../primitives/button-base';
+
+export interface CheckboxProps extends Omit<
+  ButtonBaseProps,
+  'accessibilityRole' | 'accessibilityState' | 'children' | 'onPress' | 'style'
+> {
+  children?: React.ReactNode;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: ((checked: boolean) => void) | undefined;
+  tone?: ComponentTone;
+  size?: ControlSize;
+  invalid?: boolean;
+  readOnly?: boolean;
+}

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { FocusScope } from '../../internal/focus/FocusScope';
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Box, Surface } from '../../layout';
+import { useTheme } from '../../theme/ThemeContext';
+import type { DrawerProps } from './types';
+
+export function Drawer({
+  visible,
+  onDismiss,
+  position = 'right',
+  children,
+  closeOnBackdrop = true,
+  testID,
+}: DrawerProps) {
+  const { theme } = useTheme();
+  const animation = resolveOverlayAnimation('drawer');
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Portal layer="drawer" visible={visible}>
+      <View
+        pointerEvents="box-none"
+        style={{
+          bottom: 0,
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        }}
+      >
+        <Pressable
+          onPress={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={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

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

package/src/components/drawer/types.ts

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

package/src/components/field/Field.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
+import { Box, Stack } from '../../layout';
+import { HelperText } from '../helper-text';
+import { Label } from '../label';
+import type { FieldProps } from './types';
+
+export function Field({
+  children,
+  label,
+  helperText,
+  errorText,
+  required = false,
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+  testID,
+}: FieldProps) {
+  const hasErrorText = Boolean(errorText);
+  const fieldState = resolveFieldState({
+    disabled,
+    invalid: invalid || hasErrorText,
+    readOnly,
+  });
+  const presentation = resolveFieldPresentation(fieldState);
+
+  return (
+    <Stack gap="xs" testID={testID}>
+      {label ? (
+        <Label required={required} tone={presentation.labelTone}>
+          {label}
+        </Label>
+      ) : null}
+      <Box>{children}</Box>
+      {hasErrorText ? (
+        <HelperText tone={presentation.helperTone}>{errorText}</HelperText>
+      ) : helperText ? (
+        <HelperText tone={presentation.helperTone}>{helperText}</HelperText>
+      ) : null}
+    </Stack>
+  );
+}

package/src/components/field/index.ts

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

package/src/components/field/types.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+
+export interface FieldProps {
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  readOnly?: boolean;
+  testID?: string;
+}

package/src/components/helper-text/HelperText.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Text } from '../../primitives/text';
+import type { HelperTextProps } from './types';
+
+export function HelperText({ children, tone = 'muted', testID }: HelperTextProps) {
+  return (
+    <Text testID={testID} tone={tone} variant="caption">
+      {children}
+    </Text>
+  );
+}

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

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

package/src/components/helper-text/types.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+import type { TextTone } from '../../internal/resolvers/resolveTextColor';
+
+export interface HelperTextProps {
+  children?: React.ReactNode;
+  tone?: Extract<TextTone, 'default' | 'muted' | 'danger'>;
+  testID?: string;
+}