@ankhorage/surface 0.1.5 → 0.1.7

package/src/components/radio/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 RadioProps 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/switch/Switch.tsx

@@ -0,0 +1,116 @@
+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 { SwitchProps } from './types';
+
+export function Switch({
+  children,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  tone = 'primary',
+  size = 'm',
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+  accessibilityLabel,
+  testID,
+  ...props
+}: SwitchProps) {
+  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: 'switch',
+    readOnly,
+  });
+
+  return (
+    <ButtonBase
+      {...props}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="switch"
+      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="full"
+              style={{
+                backgroundColor: colors.trackColor,
+                borderColor: colors.borderColor,
+                borderWidth: 1,
+                justifyContent: 'center',
+                minWidth: indicatorSize.switchWidth,
+                paddingHorizontal: 2,
+                width: indicatorSize.switchWidth,
+                height: indicatorSize.switchHeight,
+              }}
+            >
+              <Box
+                radius="full"
+                style={{
+                  alignSelf: isChecked ? 'flex-end' : 'flex-start',
+                  backgroundColor: colors.thumbColor,
+                  height: indicatorSize.switchThumb,
+                  width: indicatorSize.switchThumb,
+                }}
+              />
+            </Box>
+            {children ? (
+              <Box ml="s">
+                <Text color={colors.labelColor}>{children}</Text>
+              </Box>
+            ) : null}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/switch/index.ts

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

package/src/components/switch/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 SwitchProps 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/tabs/Tab.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { Box } from '../../layout';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { useTabsContext } from './context';
+import type { TabProps } from './types';
+
+export function Tab({ value, children, disabled = false, testID }: TabProps) {
+  const { theme } = useTheme();
+  const {
+    activeValue,
+    getPanelId,
+    getTabId,
+    registerTab,
+    setActiveValue,
+    setFocusedValue,
+    unregisterTab,
+  } = useTabsContext();
+  const pressableRef = React.useRef<React.ElementRef<typeof Pressable> | null>(null);
+  const selected = activeValue === value;
+  const tabId = getTabId(value);
+  const panelId = getPanelId(value);
+
+  React.useEffect(() => {
+    registerTab({
+      disabled,
+      focus: () => {
+        const focusable = pressableRef.current as unknown as {
+          focus?: (() => void) | undefined;
+        } | null;
+        focusable?.focus?.();
+      },
+      value,
+    });
+
+    return () => {
+      unregisterTab(value);
+    };
+  }, [disabled, registerTab, unregisterTab, value]);
+
+  return (
+    <Pressable
+      accessibilityLabel={undefined}
+      accessibilityRole="tab"
+      accessibilityState={{ disabled, selected }}
+      nativeID={tabId}
+      aria-controls={panelId}
+      disabled={disabled}
+      onFocus={() => setFocusedValue(value)}
+      onBlur={() => setFocusedValue(undefined)}
+      onPress={() => {
+        if (!disabled) {
+          setActiveValue(value);
+        }
+      }}
+      ref={pressableRef}
+      testID={testID}
+    >
+      <Box
+        px="m"
+        py="s"
+        style={{
+          borderBottomColor: selected
+            ? theme.semantics.action.primary.base
+            : theme.semantics.border.default,
+          borderBottomWidth: 2,
+          opacity: disabled ? 0.64 : 1,
+        }}
+      >
+        <Text
+          color={selected ? theme.semantics.action.primary.base : theme.semantics.content.default}
+          variant="label"
+          weight="medium"
+        >
+          {children}
+        </Text>
+      </Box>
+    </Pressable>
+  );
+}

package/src/components/tabs/TabList.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { useFocusManager } from '../../internal/focus/useFocusManager';
+import { Box } from '../../layout';
+import { useTabsContext } from './context';
+import { resolveNextTabValue } from './navigation';
+import type { TabListProps } from './types';
+
+export function TabList({ children, testID }: TabListProps) {
+  const { bindKeydown } = useFocusManager();
+  const { focusedValue, setActiveValue, tabs } = useTabsContext();
+
+  React.useEffect(() => {
+    if (!focusedValue) {
+      return undefined;
+    }
+
+    return bindKeydown((event) => {
+      const nextValue =
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'Home' ||
+        event.key === 'End'
+          ? resolveNextTabValue(tabs, focusedValue, event.key)
+          : undefined;
+
+      if (!nextValue) {
+        return;
+      }
+
+      event.preventDefault();
+      const nextTab = tabs.find((tab) => tab.value === nextValue);
+      nextTab?.focus();
+      setActiveValue(nextValue);
+    });
+  }, [bindKeydown, focusedValue, setActiveValue, tabs]);
+
+  return (
+    <Box
+      accessibilityRole="tablist"
+      style={{
+        flexDirection: 'row',
+      }}
+      testID={testID}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/tabs/TabPanel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTabsContext } from './context';
+import type { TabPanelProps } from './types';
+
+const TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];
+
+export function TabPanel({ value, children, testID }: TabPanelProps) {
+  const { activeValue, getPanelId, getTabId } = useTabsContext();
+
+  if (activeValue !== value) {
+    return null;
+  }
+
+  const tabId = getTabId(value);
+  const panelId = getPanelId(value);
+
+  return (
+    <View
+      accessibilityLabelledBy={tabId}
+      accessibilityRole={TAB_PANEL_ROLE}
+      nativeID={panelId}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+}

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useControllableState } from '../../internal/useControllableState';
+import { Box } from '../../layout';
+import { getTabId as resolveTabId, getTabPanelId as resolveTabPanelId } from './a11y';
+import { type TabRegistration, TabsContext } from './context';
+import type { TabsProps } from './types';
+
+export function Tabs({ children, value, defaultValue, onValueChange, testID }: TabsProps) {
+  const [activeValue, setActiveValue] = useControllableState<string | undefined>({
+    value,
+    defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) {
+        onValueChange?.(nextValue);
+      }
+    },
+  });
+  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);
+  const [tabs, setTabs] = React.useState<TabRegistration[]>([]);
+
+  const registerTab = React.useCallback((tab: TabRegistration) => {
+    setTabs((current) => {
+      return current.some((entry) => entry.value === tab.value)
+        ? current.map((entry) => (entry.value === tab.value ? tab : entry))
+        : [...current, tab];
+    });
+  }, []);
+
+  const unregisterTab = React.useCallback((valueToRemove: string) => {
+    setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));
+  }, []);
+
+  React.useEffect(() => {
+    if (activeValue !== undefined) {
+      return;
+    }
+
+    const firstEnabledTab = tabs.find((entry) => !entry.disabled);
+    if (firstEnabledTab) {
+      setActiveValue(firstEnabledTab.value);
+    }
+  }, [activeValue, setActiveValue, tabs]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      activeValue,
+      focusedValue,
+      getPanelId: (tabValue: string) => resolveTabPanelId(testID, tabValue),
+      getTabId: (tabValue: string) => resolveTabId(testID, tabValue),
+      registerTab,
+      setActiveValue: (nextValue: string) => {
+        setActiveValue(nextValue);
+      },
+      setFocusedValue,
+      tabs,
+      unregisterTab,
+    }),
+    [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],
+  );
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <Box testID={testID}>{children}</Box>
+    </TabsContext.Provider>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'bun:test';
+
+import { getTabId, getTabPanelId } from './a11y';
+
+describe('tabs accessibility ids', () => {
+  it('creates stable ids from tab values', () => {
+    expect(getTabId(undefined, 'Account Settings')).toBe('tabs-tab-Account-Settings');
+    expect(getTabPanelId(undefined, 'Account Settings')).toBe('tabs-panel-Account-Settings');
+  });
+
+  it('namespaces ids by tabs testID when provided', () => {
+    expect(getTabId('settings', 'billing')).toBe('settings-tabs-tab-billing');
+    expect(getTabPanelId('settings', 'billing')).toBe('settings-tabs-panel-billing');
+  });
+});

package/src/components/tabs/a11y.ts

@@ -0,0 +1,15 @@
+function sanitizeTabValue(value: string): string {
+  return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');
+}
+
+function createTabsIdBase(testID: string | undefined): string {
+  return testID ? `${testID}-tabs` : 'tabs';
+}
+
+export function getTabId(testID: string | undefined, value: string): string {
+  return `${createTabsIdBase(testID)}-tab-${sanitizeTabValue(value)}`;
+}
+
+export function getTabPanelId(testID: string | undefined, value: string): string {
+  return `${createTabsIdBase(testID)}-panel-${sanitizeTabValue(value)}`;
+}

package/src/components/tabs/context.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export interface TabRegistration {
+  disabled: boolean;
+  focus: () => void;
+  value: string;
+}
+
+export interface TabsContextValue {
+  activeValue: string | undefined;
+  focusedValue: string | undefined;
+  getPanelId: (value: string) => string;
+  getTabId: (value: string) => string;
+  registerTab: (tab: TabRegistration) => void;
+  setActiveValue: (value: string) => void;
+  setFocusedValue: (value: string | undefined) => void;
+  tabs: TabRegistration[];
+  unregisterTab: (value: string) => void;
+}
+
+export const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+export function useTabsContext(): TabsContextValue {
+  const value = React.useContext(TabsContext);
+
+  if (!value) {
+    throw new Error('Tabs components must be used within <Tabs>.');
+  }
+
+  return value;
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,5 @@
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';
+export { Tabs } from './Tabs';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './types';

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';