@ankhorage/surface 0.1.4 → 0.1.6

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

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveNextTabValue } from './navigation';
+
+const tabs = [
+  { disabled: false, focus: () => undefined, value: 'overview' },
+  { disabled: true, focus: () => undefined, value: 'disabled' },
+  { disabled: false, focus: () => undefined, value: 'details' },
+];
+
+describe('resolveNextTabValue', () => {
+  it('skips disabled tabs when cycling', () => {
+    expect(resolveNextTabValue(tabs, 'overview', 'ArrowRight')).toBe('details');
+    expect(resolveNextTabValue(tabs, 'details', 'ArrowRight')).toBe('overview');
+  });
+
+  it('supports home and end navigation', () => {
+    expect(resolveNextTabValue(tabs, 'details', 'Home')).toBe('overview');
+    expect(resolveNextTabValue(tabs, 'overview', 'End')).toBe('details');
+  });
+});

package/src/components/tabs/navigation.ts

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

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+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;
+  testID?: string;
+}
+
+export interface TabPanelProps {
+  value: string;
+  children?: React.ReactNode;
+  testID?: string;
+}

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

@@ -0,0 +1,116 @@
+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,
+  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 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={!disabled && !readOnly}
+        numberOfLines={props.multiline ? props.numberOfLines : 1}
+        onBlur={handleBlur}
+        onChangeText={onChangeText}
+        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

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

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

@@ -0,0 +1,32 @@
+import type React from 'react';
+import type {
+  StyleProp,
+  TextInputProps as ReactNativeTextInputProps,
+  TextStyle,
+} from 'react-native';
+
+import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
+
+export interface TextInputProps extends Omit<
+  ReactNativeTextInputProps,
+  | 'defaultValue'
+  | 'editable'
+  | 'onChangeText'
+  | 'placeholderTextColor'
+  | 'style'
+  | 'testID'
+  | 'value'
+> {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: ((text: string) => void) | undefined;
+  placeholder?: string;
+  size?: ControlSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  leadingAccessory?: React.ReactNode;
+  trailingAccessory?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/components/textarea/Textarea.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { TextInput } from '../text-input';
+import type { TextareaProps } from './types';
+
+export function Textarea({ rows = 4, numberOfLines, style, ...props }: TextareaProps) {
+  return (
+    <TextInput
+      {...props}
+      multiline
+      numberOfLines={numberOfLines ?? rows}
+      style={[{ textAlignVertical: 'top' }, style]}
+    />
+  );
+}

package/src/components/textarea/index.ts

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

package/src/components/textarea/types.ts

@@ -0,0 +1,5 @@
+import type { TextInputProps } from '../text-input';
+
+export interface TextareaProps extends Omit<TextInputProps, 'multiline'> {
+  rows?: number;
+}

package/src/components/toast/Toast.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { Box, Inline, Surface } from '../../layout';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import type { ToastProps } from './types';
+
+export function Toast({ title, description, tone = 'default', onDismiss, testID }: ToastProps) {
+  const { theme } = useTheme();
+  const toneColor =
+    tone === 'success'
+      ? theme.semantics.success.base
+      : tone === 'danger'
+        ? theme.semantics.danger.base
+        : theme.semantics.action.primary.base;
+
+  return (
+    <Surface
+      p="m"
+      style={{
+        borderLeftColor: toneColor,
+        borderLeftWidth: 3,
+        minWidth: 280,
+        shadowOpacity: 0.14,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 6 },
+      }}
+      testID={testID}
+      variant="raised"
+    >
+      <Inline align="center" justify="space-between">
+        <Box flex={1}>
+          {title ? (
+            <Text variant="label" weight="medium">
+              {title}
+            </Text>
+          ) : null}
+          {description ? <Text tone="muted">{description}</Text> : null}
+        </Box>
+        {onDismiss ? (
+          <Pressable
+            accessibilityLabel="Dismiss notification"
+            accessibilityRole="button"
+            onPress={onDismiss}
+            testID={testID ? `${testID}-dismiss` : undefined}
+          >
+            <Text color={toneColor}>×</Text>
+          </Pressable>
+        ) : null}
+      </Inline>
+    </Surface>
+  );
+}

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Stack } from '../../layout';
+import { Toast } from './Toast';
+import type { ToastOptions } from './types';
+
+interface ToastEntry extends ToastOptions {
+  id: string;
+}
+
+interface ToastContextValue {
+  dismissToast: (id: string) => void;
+  showToast: (options: ToastOptions) => string;
+}
+
+const ToastContext = React.createContext<ToastContextValue | null>(null);
+
+let toastCounter = 0;
+
+export function ToastProvider({
+  children,
+  defaultDuration = 4000,
+}: {
+  children: React.ReactNode;
+  defaultDuration?: number;
+}) {
+  const [toasts, setToasts] = React.useState<ToastEntry[]>([]);
+  const animation = resolveOverlayAnimation('toast');
+  const timersRef = React.useRef(new Map<string, ReturnType<typeof setTimeout>>());
+
+  const dismissToast = React.useCallback((id: string) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+
+  const showToast = React.useCallback((options: ToastOptions) => {
+    const id = options.id ?? `toast-${toastCounter++}`;
+    setToasts((current) => [...current, { ...options, id }]);
+    return id;
+  }, []);
+
+  React.useEffect(() => {
+    toasts.forEach((toast) => {
+      if (timersRef.current.has(toast.id)) {
+        return;
+      }
+
+      const timer = setTimeout(() => {
+        dismissToast(toast.id);
+      }, toast.duration ?? defaultDuration);
+
+      timersRef.current.set(toast.id, timer);
+    });
+
+    const activeToastIds = new Set(toasts.map((toast) => toast.id));
+    timersRef.current.forEach((timer, id) => {
+      if (!activeToastIds.has(id)) {
+        clearTimeout(timer);
+        timersRef.current.delete(id);
+      }
+    });
+  }, [defaultDuration, dismissToast, toasts]);
+
+  React.useEffect(() => {
+    return () => {
+      timersRef.current.forEach((timer) => clearTimeout(timer));
+      timersRef.current.clear();
+    };
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ dismissToast, showToast }}>
+      {children}
+      <Portal layer="toast" visible={toasts.length > 0}>
+        <Stack
+          gap="s"
+          pointerEvents="box-none"
+          style={{
+            alignItems: 'flex-end',
+            padding: 16,
+            paddingTop: 16 + animation.offset,
+          }}
+        >
+          {toasts.map((toast) => (
+            <Toast
+              description={toast.description}
+              key={toast.id}
+              onDismiss={() => dismissToast(toast.id)}
+              testID={toast.testID}
+              title={toast.title}
+              tone={toast.tone}
+            />
+          ))}
+        </Stack>
+      </Portal>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = React.useContext(ToastContext);
+
+  if (!context) {
+    throw new Error('useToast must be used within <ToastProvider>.');
+  }
+
+  return context;
+}

package/src/components/toast/index.ts

@@ -0,0 +1,3 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './ToastProvider';
+export type { ToastOptions, ToastProps, ToastTone } from './types';

package/src/components/toast/types.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+
+export type ToastTone = 'default' | 'success' | 'danger';
+
+export interface ToastProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  tone?: ToastTone;
+  onDismiss?: (() => void) | undefined;
+  testID?: string;
+}
+
+export interface ToastOptions extends Omit<ToastProps, 'onDismiss'> {
+  duration?: number;
+  id?: string;
+}

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { type LayoutRectangle, Platform, Pressable, View } from 'react-native';
+
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Surface } from '../../layout';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import type { TooltipProps } from './types';
+
+interface MeasurableNode {
+  measureInWindow?: (
+    callback: (x: number, y: number, width: number, height: number) => void,
+  ) => void;
+}
+
+function measureNode(node: unknown, callback: (layout: LayoutRectangle) => void) {
+  const measurableNode = node as MeasurableNode | null;
+  measurableNode?.measureInWindow?.((x, y, width, height) => {
+    callback({ height, width, x, y });
+  });
+}
+
+export function Tooltip({
+  children,
+  content,
+  delay = 150,
+  placement = 'top',
+  testID,
+}: TooltipProps) {
+  const { theme } = useTheme();
+  const animation = resolveOverlayAnimation('tooltip');
+  const anchorRef = React.useRef<View | null>(null);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [visible, setVisible] = React.useState(false);
+  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
+
+  const show = React.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      measureNode(anchorRef.current, setLayout);
+      setVisible(true);
+    }, delay);
+  }, [delay]);
+
+  const hide = React.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setVisible(false);
+  }, []);
+
+  React.useEffect(
+    () => () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    },
+    [],
+  );
+
+  const tooltipLeft = layout ? layout.x : 0;
+  const tooltipTop =
+    layout && placement === 'top'
+      ? layout.y - animation.offset
+      : layout
+        ? layout.y + layout.height + animation.offset
+        : 0;
+
+  return (
+    <View collapsable={false} ref={anchorRef} testID={testID ? `${testID}-anchor` : undefined}>
+      <Pressable
+        onBlur={hide}
+        onFocus={show}
+        onHoverIn={Platform.OS === 'web' ? show : undefined}
+        onHoverOut={Platform.OS === 'web' ? hide : undefined}
+      >
+        {children}
+      </Pressable>
+      <Portal layer="tooltip" visible={visible && Boolean(layout)}>
+        <View
+          pointerEvents="none"
+          style={{
+            left: tooltipLeft,
+            position: 'absolute',
+            top: tooltipTop,
+          }}
+        >
+          <Surface
+            p="s"
+            style={{
+              backgroundColor: theme.semantics.neutral.text,
+            }}
+            testID={testID}
+            variant="raised"
+          >
+            <Text color={theme.semantics.content.inverse} variant="caption">
+              {content}
+            </Text>
+          </Surface>
+        </View>
+      </Portal>
+    </View>
+  );
+}

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/types.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+export interface TooltipProps {
+  children?: React.ReactNode;
+  content?: React.ReactNode;
+  delay?: number;
+  placement?: 'top' | 'bottom';
+  testID?: string;
+}

package/src/context/FontContext.tsx

@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+
+/**
+ * Runtime font state consumed by theme and text primitives.
+ */
+export interface FontRuntime {
+  /** true when the active font assets have finished loading */
+  fontsLoaded: boolean;
+
+  /** The currently active font family id */
+  activeFontId: string | null;
+
+  /** Update the active font family id */
+  setActiveFontId: (id: string) => void;
+}
+
+const fallbackRuntime: FontRuntime = {
+  fontsLoaded: true,
+  activeFontId: null,
+  setActiveFontId: () => {
+    /* fallback */
+  },
+};
+
+const FontContext = createContext(fallbackRuntime);
+
+export function FontProvider(props: {
+  fontsLoaded: boolean;
+  activeFontId?: string | null;
+  children: React.ReactNode;
+  onActiveFontChange?: (id: string) => void;
+}) {
+  const {
+    fontsLoaded,
+    activeFontId: initialActiveFontId = null,
+    children,
+    onActiveFontChange,
+  } = props;
+
+  const [activeFontId, setActiveFontIdState] = useState(initialActiveFontId);
+
+  const value = useMemo<FontRuntime>(
+    () => ({
+      fontsLoaded,
+      activeFontId,
+      setActiveFontId: (id: string) => {
+        setActiveFontIdState(id);
+        if (onActiveFontChange) onActiveFontChange(id);
+      },
+    }),
+    [fontsLoaded, activeFontId, onActiveFontChange],
+  );
+
+  return <FontContext.Provider value={value}>{children}</FontContext.Provider>;
+}
+
+export function useFontContext(): FontRuntime {
+  return useContext(FontContext);
+}

package/src/context/TranslationContext.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, useContext, useMemo } from 'react';
+
+/**
+ * Minimal translation runtime surface.
+ * Do not import i18next types here; keep Surface runtime-agnostic.
+ */
+export interface I18nInstance {
+  changeLanguage: (lng: string) => Promise<unknown>;
+  language?: string;
+  t?: Translator;
+}
+
+export type Translator = (key: string, options?: Record<string, unknown>) => string;
+
+export interface TranslationRuntime {
+  t: Translator;
+  i18n: I18nInstance | null;
+}
+
+const fallbackRuntime: TranslationRuntime = {
+  t: (key) => key,
+  i18n: null,
+};
+
+const TranslationContext = createContext(fallbackRuntime);
+
+export function TranslationProvider(props: {
+  t: Translator;
+  i18n?: I18nInstance | null;
+  children: React.ReactNode;
+}) {
+  const { t, i18n, children } = props;
+
+  const value = useMemo<TranslationRuntime>(
+    () => ({
+      t: (key: string, options?: Record<string, unknown>) => {
+        if (i18n?.t) {
+          const result = i18n.t(key, options);
+          // If translation returns the key, it's missing in the current dictionary
+          if (result !== key) return result;
+        }
+        return t(key, options);
+      },
+      i18n: i18n ?? null,
+    }),
+    [t, i18n, i18n?.language],
+  );
+
+  return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
+}
+
+export function useTranslationContext(): TranslationRuntime {
+  return useContext(TranslationContext);
+}