@ankhorage/surface 0.1.5 → 0.1.6

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);
+}

package/src/core/responsive/ResponsiveProvider.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+import type { ResponsiveRuntime } from './types';
+
+const ResponsiveContext = createContext<ResponsiveRuntime | null>(null);
+
+export function ResponsiveProvider({ children }: { children: React.ReactNode }) {
+  const { width } = useWindowDimensions();
+
+  const value = useMemo<ResponsiveRuntime>(
+    () => ({
+      breakpoint: getBreakpointFromWidth(width),
+      width,
+    }),
+    [width],
+  );
+
+  return <ResponsiveContext.Provider value={value}>{children}</ResponsiveContext.Provider>;
+}
+
+export function useResponsiveRuntime(): ResponsiveRuntime {
+  const runtime = useContext(ResponsiveContext);
+
+  if (!runtime) {
+    throw new Error('useResponsiveRuntime must be used within a ResponsiveProvider');
+  }
+
+  return runtime;
+}

package/src/core/responsive/breakpoints.ts

@@ -0,0 +1,9 @@
+export const BREAKPOINTS = {
+  base: 0,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const;
+
+export const BREAKPOINT_ORDER = ['base', 'sm', 'md', 'lg', 'xl'] as const;

package/src/core/responsive/getBreakpointFromWidth.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from 'bun:test';
+
+import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+
+describe('getBreakpointFromWidth', () => {
+  test('resolves expected breakpoints', () => {
+    expect(getBreakpointFromWidth(0)).toBe('base');
+    expect(getBreakpointFromWidth(479)).toBe('base');
+    expect(getBreakpointFromWidth(480)).toBe('sm');
+    expect(getBreakpointFromWidth(767)).toBe('sm');
+    expect(getBreakpointFromWidth(768)).toBe('md');
+    expect(getBreakpointFromWidth(1024)).toBe('lg');
+    expect(getBreakpointFromWidth(1280)).toBe('xl');
+  });
+});

package/src/core/responsive/getBreakpointFromWidth.ts

@@ -0,0 +1,10 @@
+import { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
+import type { Breakpoint } from './types';
+
+export function getBreakpointFromWidth(width: number): Breakpoint {
+  let active: Breakpoint = 'base';
+  for (const key of BREAKPOINT_ORDER) {
+    if (width >= BREAKPOINTS[key]) active = key;
+  }
+  return active;
+}

package/src/core/responsive/index.ts

@@ -0,0 +1,6 @@
+export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
+export { getBreakpointFromWidth } from './getBreakpointFromWidth';
+export { resolveResponsive } from './resolve';
+export { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';
+export type { Breakpoint, Responsive, ResponsiveRuntime } from './types';
+export { useBreakpoint } from './useBreakpoint';

package/src/core/responsive/resolve.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveResponsive } from './resolve';
+
+describe('resolveResponsive', () => {
+  test('returns plain value when non-responsive', () => {
+    expect(resolveResponsive(12, 'md')).toBe(12);
+  });
+
+  test('resolves value at current breakpoint', () => {
+    expect(resolveResponsive({ base: 8, md: 16 }, 'md')).toBe(16);
+  });
+
+  test('falls back to nearest lower breakpoint', () => {
+    expect(resolveResponsive({ base: 8, md: 16 }, 'lg')).toBe(16);
+  });
+
+  test('falls back to base when no lower explicit value exists', () => {
+    expect(resolveResponsive({ base: 8, xl: 24 }, 'md')).toBe(8);
+  });
+
+  test('returns undefined when value is undefined', () => {
+    expect(resolveResponsive(undefined, 'md')).toBeUndefined();
+  });
+});

package/src/core/responsive/resolve.ts

@@ -0,0 +1,24 @@
+import { BREAKPOINT_ORDER } from './breakpoints';
+import type { Breakpoint, Responsive } from './types';
+
+function isResponsiveRecord<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function resolveResponsive<T>(
+  value: Responsive<T> | undefined,
+  breakpoint: Breakpoint,
+): T | undefined {
+  if (value === undefined) return undefined;
+  if (!isResponsiveRecord(value)) return value;
+
+  const activeIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+  for (let i = activeIndex; i >= 0; i -= 1) {
+    const key = BREAKPOINT_ORDER[i];
+    if (!key) continue;
+    const candidate = value[key];
+    if (candidate !== undefined) return candidate;
+  }
+
+  return undefined;
+}

package/src/core/responsive/types.ts

@@ -0,0 +1,10 @@
+import type { BREAKPOINTS } from './breakpoints';
+
+export type Breakpoint = keyof typeof BREAKPOINTS;
+
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+export interface ResponsiveRuntime {
+  breakpoint: Breakpoint;
+  width: number;
+}

package/src/core/responsive/useBreakpoint.ts

@@ -0,0 +1,9 @@
+import { useWindowDimensions } from 'react-native';
+
+import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+import type { Breakpoint } from './types';
+
+export function useBreakpoint(): Breakpoint {
+  const { width } = useWindowDimensions();
+  return getBreakpointFromWidth(width);
+}