@ankhorage/surface 5.0.0 → 6.0.0

package/src/features/tabs/composition/useTabsController.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { useControllableState } from '../../../internal/useControllableState';
+import type { TabRegistration, TabsContextValue, TabsProps } from '../../../types/tabs';
+import { resolveTabElementId } from '../utils/resolveTabElementId';
+
+/*** Owns controlled state, registration, focus state, and ids for one Tabs instance. */
+export function useTabsController({
+  defaultValue,
+  onValueChange,
+  testID,
+  value,
+}: Pick<TabsProps, 'defaultValue' | 'onValueChange' | 'testID' | 'value'>): TabsContextValue {
+  const [activeValue, setActiveValue] = useControllableState<string | undefined>({
+    defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) onValueChange?.(nextValue);
+    },
+    value,
+  });
+  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);
+  const [tabs, setTabs] = React.useState<readonly TabRegistration[]>([]);
+
+  const registerTab = React.useCallback((tab: TabRegistration) => {
+    setTabs((current) =>
+      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]);
+
+  return React.useMemo(
+    () => ({
+      activeValue,
+      focusedValue,
+      getPanelId: (tabValue: string) => resolveTabElementId('panel', testID, tabValue),
+      getTabId: (tabValue: string) => resolveTabElementId('tab', testID, tabValue),
+      registerTab,
+      setActiveValue: (nextValue: string) => setActiveValue(nextValue),
+      setFocusedValue,
+      tabs,
+      unregisterTab,
+    }),
+    [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],
+  );
+}

package/src/features/tabs/public.ts

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

package/src/{components/tabs/navigation.test.ts → features/tabs/utils/resolveNextTabValue.test.ts}

@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'bun:test';
 
-import { resolveNextTabValue } from './navigation';
+import { resolveNextTabValue } from './resolveNextTabValue';
 
 const tabs = [
   { disabled: false, focus: () => undefined, value: 'overview' },
   { disabled: true, focus: () => undefined, value: 'disabled' },
   { disabled: false, focus: () => undefined, value: 'details' },
-];
+] as const;
 
 describe('resolveNextTabValue', () => {
   it('skips disabled tabs when cycling', () => {

package/src/features/tabs/utils/resolveNextTabValue.ts

@@ -0,0 +1,24 @@
+import type { TabNavigationKey, TabRegistration } from '../../../types/tabs';
+
+/*** Resolves the next enabled tab for keyboard focus navigation. */
+export function resolveNextTabValue(
+  tabs: readonly TabRegistration[],
+  currentValue: string | undefined,
+  key: TabNavigationKey,
+): string | undefined {
+  const enabledTabs = tabs.filter((tab) => !tab.disabled);
+  if (enabledTabs.length === 0) return undefined;
+
+  if (key === 'Home') return enabledTabs.at(0)?.value;
+  if (key === 'End') return enabledTabs.at(-1)?.value;
+
+  const currentIndex = enabledTabs.findIndex((tab) => tab.value === currentValue);
+  if (currentIndex === -1) return enabledTabs.at(0)?.value;
+
+  const nextIndex =
+    key === 'ArrowLeft' || key === 'ArrowUp'
+      ? (currentIndex - 1 + enabledTabs.length) % enabledTabs.length
+      : (currentIndex + 1) % enabledTabs.length;
+
+  return enabledTabs.at(nextIndex)?.value;
+}

package/src/features/tabs/utils/resolveTabElementId.test.ts

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

package/src/features/tabs/utils/resolveTabElementId.ts

@@ -0,0 +1,14 @@
+/*** Creates a stable tab or tab-panel id from a Tabs test id and tab value. */
+export function resolveTabElementId(
+  kind: 'tab' | 'panel',
+  testID: string | undefined,
+  value: string,
+): string {
+  const base = testID ? `${testID}-tabs` : 'tabs';
+  return `${base}-${kind}-${sanitizeTabValue(value)}`;
+}
+
+/*** Normalizes a tab value for use inside an accessibility id. */
+function sanitizeTabValue(value: string): string {
+  return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');
+}

package/src/features/toast/adapters/inbound/Toast.tsx

@@ -5,7 +5,7 @@ import type { SurfaceColor } from '../../../../surfaceColor';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../theme/types';
 import type { ToastProps } from '../../../../types/toast';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Surface } from '../../../surface/public';
 import { Text } from '../../../typography/public';
 
@@ -29,15 +29,15 @@ export function Toast({
 
   return (
     <Surface p="m" style={[styles.root, statusStyle]} testID={testID} variant="raised">
-      <Stack align="center" direction="row" justify="space-between">
-        <Box flex={1}>
+      <View align="center" direction="row" justify="space-between">
+        <View flex={1}>
           {title ? (
             <Text variant="label" weight="medium">
               {title}
             </Text>
           ) : null}
           {description ? <Text emphasis="muted">{description}</Text> : null}
-        </Box>
+        </View>
         {onDismiss ? (
           <Pressable
             accessibilityLabel="Dismiss notification"
@@ -48,7 +48,7 @@ export function Toast({
             <Text color={statusTextColor}>×</Text>
           </Pressable>
         ) : null}
-      </Stack>
+      </View>
     </Surface>
   );
 }

package/src/features/toast/adapters/inbound/ToastProvider.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, type ViewStyle } from 'react-native';
 import { Portal } from '../../../../internal/overlay/Portal';
 import { resolveOverlayAnimation } from '../../../../internal/resolvers';
 import type { ToastProviderProps } from '../../../../types/toast';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { ToastContext } from '../../composition/ToastContext';
 import { useToastRuntime } from '../../composition/useToastRuntime';
 import { Toast } from './Toast';
@@ -22,7 +22,7 @@ export function ToastProvider({ children, defaultDuration = 4000 }: ToastProvide
     <ToastContext value={controller}>
       {children}
       <Portal layer="toast" visible={toasts.length > 0}>
-        <Stack gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
+        <View gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
           {toasts.map((toast) => (
             <Toast
               description={toast.description}
@@ -33,7 +33,7 @@ export function ToastProvider({ children, defaultDuration = 4000 }: ToastProvide
               title={toast.title}
             />
           ))}
-        </Stack>
+        </View>
       </Portal>
     </ToastContext>
   );

package/src/index.test.ts

@@ -6,7 +6,6 @@ import type { SelectionSemantics, SurfaceColorDiagnostics } from './index';
 import { createTheme } from './theme/createTheme';
 
 const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
-const layoutIndexSource = readFileSync(new URL('./layout/index.ts', import.meta.url), 'utf8');
 const packageJson = JSON.parse(
   readFileSync(new URL('../package.json', import.meta.url), 'utf8'),
 ) as {
@@ -18,6 +17,7 @@ const packageJson = JSON.parse(
 };
 
 const expectedFeatureRootExports = [
+  "export { AppBar } from './features/app-bar/public';",
   "export { Badge } from './features/badge/public';",
   "export { Button, IconButton } from './features/button/public';",
   "export { Card } from './features/card/public';",
@@ -27,10 +27,12 @@ const expectedFeatureRootExports = [
   "export { Icon, SUPPORTED_ICON_PROVIDERS } from './features/icon/public';",
   "export { Image } from './features/image/public';",
   "export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';",
-  "export { Box, Container, Divider, Grid, Stack } from './features/layout/public';",
+  "export { Divider, Grid, ScrollView, View } from './features/layout/public';",
+  "export { Modal } from './features/modal/public';",
   "export { PopoverMenu } from './features/popover-menu/public';",
   "export { Popover } from './features/popover/public';",
   "export { Surface } from './features/surface/public';",
+  "export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';",
   "export { Tooltip } from './features/tooltip/public';",
   "export { Toast, ToastProvider, useToast } from './features/toast/public';",
   "export { Heading, Text } from './features/typography/public';",
@@ -41,13 +43,10 @@ const expectedLegacyRootExports = [
   "export { HelperText } from './components/helper-text';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",
-  "export { Modal } from './components/modal';",
   "export { Switch } from './components/switch';",
-  "export { Tab, TabList, TabPanel, Tabs } from './components/tabs';",
   "export { Textarea } from './components/textarea';",
   "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export * from './core/responsive';",
-  "export * from './layout';",
 ] as const;
 
 describe('feature-owned root barrel contract', () => {
@@ -55,39 +54,16 @@ describe('feature-owned root barrel contract', () => {
     expectedFeatureRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
-  it('does not retain migrated UI exports from legacy component or primitive paths', () => {
-    for (const legacyPath of [
-      './components/badge',
-      './components/button',
-      './components/card',
-      './components/checkbox',
-      './components/icon-button',
-      './components/menu',
-      './components/radio',
-      './components/text-input',
-      './components/toast',
-      './components/tooltip',
-      './primitives/heading',
-      './primitives/icon',
-      './primitives/image',
-      './primitives/text',
-    ]) {
-      expect(indexSource).not.toContain(legacyPath);
-    }
-  });
-
-  it('removes migrated elements from the legacy layout facade', () => {
-    for (const name of [
-      'Box',
-      'Container',
-      'Divider',
-      'Grid',
-      'KeyboardAvoidingView',
-      'Stack',
-      'Surface',
-    ]) {
-      expect(layoutIndexSource).not.toContain(`./${name}`);
-    }
+  it('does not retain removed layout aliases or a legacy layout facade', () => {
+    expect(indexSource).not.toContain("'./layout");
+    expect(indexSource).not.toMatch(/\bBoxProps\b/u);
+    expect(indexSource).not.toMatch(/\bContainerProps\b/u);
+    expect(indexSource).not.toMatch(/\bStackProps\b/u);
+    expect(indexSource).not.toMatch(/\bScrollAreaProps\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bBox\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bContainer\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bStack\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bScrollArea\b/u);
   });
 });
 

package/src/index.ts

@@ -6,12 +6,8 @@ export type { LabelProps } from './components/label';
 export { Label } from './components/label';
 export type { ListItemProps } from './components/list-item';
 export { ListItem } from './components/list-item';
-export type { ModalProps } from './components/modal';
-export { Modal } from './components/modal';
 export type { SwitchProps } from './components/switch';
 export { Switch } from './components/switch';
-export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';
-export { Tab, TabList, TabPanel, Tabs } from './components/tabs';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
 export type { FontRuntime } from './context/FontContext';
@@ -34,6 +30,8 @@ export {
   AccordionItem,
   AccordionTrigger,
 } from './features/accordion/public';
+export type { AppBarProps } from './features/app-bar/public';
+export { AppBar } from './features/app-bar/public';
 export type { BadgeProps } from './features/badge/public';
 export { Badge } from './features/badge/public';
 export type { ButtonIconSpec, ButtonProps, IconButtonProps } from './features/button/public';
@@ -62,14 +60,10 @@ export type {
   KeyboardAvoidingViewProps,
 } from './features/keyboard-avoiding-view/public';
 export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
-export type {
-  BoxProps,
-  ContainerProps,
-  DividerProps,
-  GridProps,
-  StackProps,
-} from './features/layout/public';
-export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
+export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from './features/layout/public';
+export { Divider, Grid, ScrollView, View } from './features/layout/public';
+export type { ModalProps } from './features/modal/public';
+export { Modal } from './features/modal/public';
 export type {
   PopoverAnchorRenderProps,
   PopoverPlacement,
@@ -84,6 +78,8 @@ export type {
 export { PopoverMenu } from './features/popover-menu/public';
 export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
 export { Surface } from './features/surface/public';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './features/tabs/public';
+export { Tab, TabList, TabPanel, Tabs } from './features/tabs/public';
 export type {
   ToastController,
   ToastOptions,
@@ -97,7 +93,6 @@ export { Tooltip } from './features/tooltip/public';
 export type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';
 export { Heading, Text } from './features/typography/public';
 export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
-export * from './layout';
 export type { ButtonBaseProps } from './primitives/button-base';
 export { ButtonBase } from './primitives/button-base';
 export type {

package/src/primitives/button-base/ButtonBase.tsx

@@ -8,9 +8,10 @@ import {
   resolveInteractiveState,
 } from '../../internal/resolvers';
 import { useTheme } from '../../theme/ThemeContext';
-import { resolveBoxStyles } from '../../utils/resolveBoxStyles';
+import { resolveViewStyles } from '../../utils/resolveViewStyles';
 import type { ButtonBaseProps } from './types';
 
+/*** Resolves one Pressable state into the canonical Surface interaction state. */
 function getInteractionState(
   pressableState: PressableStateCallbackType,
   hovered: boolean,
@@ -25,6 +26,7 @@ function getInteractionState(
   });
 }
 
+/*** Renders the low-level token-aware Pressable boundary shared by Surface controls. */
 export function ButtonBase({
   children,
   disabled = false,
@@ -43,7 +45,7 @@ export function ButtonBase({
   const [hovered, setHovered] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
-  const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);
+  const resolvedViewStyles = resolveViewStyles(theme, breakpoint, props);
   const passive = interactionPolicy === 'passive';
 
   return (
@@ -54,9 +56,7 @@ export function ButtonBase({
       disabled={disabled}
       onBlur={() => setFocused(false)}
       onFocus={() => {
-        if (isWeb) {
-          setFocused(true);
-        }
+        if (isWeb) setFocused(true);
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
@@ -64,9 +64,8 @@ export function ButtonBase({
       onPress={passive ? undefined : onPress}
       style={(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
-
         return [
-          resolvedBoxStyles,
+          resolvedViewStyles,
           resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),
           style,
         ];
@@ -75,7 +74,6 @@ export function ButtonBase({
     >
       {(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
-
         return typeof children === 'function' ? children(state) : children;
       }}
     </Pressable>

package/src/primitives/button-base/types.ts

@@ -3,10 +3,10 @@ import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } fro
 
 import type { InteractionPolicyProps } from '../../interactionPolicy';
 import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { BoxProps } from '../../types/layout';
+import type { ViewProps } from '../../types/layout';
 
 export interface ButtonBaseProps
-  extends Omit<BoxProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
+  extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
   children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
   disabled?: boolean;
   onPress?: ((event: GestureResponderEvent) => void) | undefined;

package/src/types/app-bar.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { ViewProps } from './layout';
+
+export interface AppBarProps extends Omit<ViewProps, 'children'> {
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  children?: React.ReactNode;
+  safeAreaTop?: boolean;
+  divider?: boolean;
+  contentStyle?: StyleProp<ViewStyle>;
+}

package/src/types/layout.ts

@@ -1,5 +1,10 @@
 import type React from 'react';
-import type { StyleProp, ViewProps as ReactNativeViewProps, ViewStyle } from 'react-native';
+import type {
+  ScrollViewProps as ReactNativeScrollViewProps,
+  StyleProp,
+  ViewProps as ReactNativeViewProps,
+  ViewStyle,
+} from 'react-native';
 
 import type { Responsive } from '../core/responsive';
 import type { SurfaceTheme } from '../theme/types';
@@ -12,7 +17,7 @@ type RadiusValue = number | RadiusToken;
 export type SpaceValue = number | SpaceToken;
 export type ColorValue = string | ColorToken;
 
-export interface BoxStyleProps {
+export interface ViewStyleProps {
   p?: Responsive<SpaceValue>;
   px?: Responsive<SpaceValue>;
   py?: Responsive<SpaceValue>;
@@ -27,6 +32,9 @@ export interface BoxStyleProps {
   mb?: Responsive<SpaceValue>;
   ml?: Responsive<SpaceValue>;
   mr?: Responsive<SpaceValue>;
+  gap?: Responsive<SpaceValue>;
+  rowGap?: Responsive<SpaceValue>;
+  columnGap?: Responsive<SpaceValue>;
   bg?: Responsive<ColorValue>;
   radius?: Responsive<RadiusValue>;
   borderWidth?: Responsive<number>;
@@ -41,6 +49,12 @@ export interface BoxStyleProps {
   flexGrow?: Responsive<number>;
   flexShrink?: Responsive<number>;
   flexBasis?: Responsive<number | string>;
+  direction?: Responsive<'row' | 'column'>;
+  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
+  justify?: Responsive<
+    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+  >;
+  wrap?: Responsive<'nowrap' | 'wrap'>;
   alignSelf?: Responsive<ViewStyle['alignSelf']>;
   position?: Responsive<ViewStyle['position']>;
   top?: Responsive<number>;
@@ -53,7 +67,7 @@ export interface BoxStyleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export interface BoxProps extends BoxStyleProps {
+export interface ViewProps extends ViewStyleProps {
   accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
   accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
   accessibilityState?: ReactNativeViewProps['accessibilityState'];
@@ -63,34 +77,25 @@ export interface BoxProps extends BoxStyleProps {
   testID?: string;
 }
 
-export interface ContainerProps extends Omit<BoxProps, 'children'> {
-  children?: React.ReactNode;
-  maxWidth?: Responsive<number>;
-  px?: Responsive<number | keyof SurfaceTheme['spacing']>;
-}
-
-export interface DividerProps extends Omit<BoxProps, 'bg' | 'height' | 'width'> {
+export interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {
   orientation?: 'horizontal' | 'vertical';
   color?: ColorValue;
   thickness?: number;
 }
 
-export interface GridProps extends Omit<BoxProps, 'children'> {
+export interface GridProps extends Omit<ViewProps, 'children'> {
   children?: React.ReactNode;
-  cols: Responsive<number>;
+  cols?: Responsive<number>;
   gap?: Responsive<SpaceValue>;
   rowGap?: Responsive<SpaceValue>;
   colGap?: Responsive<SpaceValue>;
   minItemWidth?: Responsive<number>;
 }
 
-export interface StackProps extends Omit<BoxProps, 'children'> {
+export interface ScrollViewProps
+  extends
+    ViewStyleProps,
+    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
   children?: React.ReactNode;
-  direction?: Responsive<'row' | 'column'>;
-  gap?: Responsive<SpaceValue>;
-  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
-  justify?: Responsive<
-    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
-  >;
-  wrap?: Responsive<'nowrap' | 'wrap'>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
 }

package/src/{components/modal/types.ts → types/modal.ts}

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { InteractionPolicy } from '../../interactionPolicy';
+import type { InteractionPolicy } from '../interactionPolicy';
 
 export interface ModalProps {
   visible: boolean;

package/src/types/surface.ts

@@ -1,7 +1,7 @@
-import type { BoxProps } from './layout';
+import type { ViewProps } from './layout';
 
 export type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';
 
-export interface SurfaceProps extends Omit<BoxProps, 'bg' | 'borderColor' | 'borderWidth'> {
+export interface SurfaceProps extends Omit<ViewProps, 'bg' | 'borderColor' | 'borderWidth'> {
   variant?: SurfaceVariant;
 }

package/src/types/tabs.ts

@@ -0,0 +1,51 @@
+import type React from 'react';
+
+import type { InteractionPolicy } from '../interactionPolicy';
+
+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;
+  interactionPolicy?: InteractionPolicy;
+  testID?: string;
+}
+
+export interface TabPanelProps {
+  value: string;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+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: readonly TabRegistration[];
+  unregisterTab: (value: string) => void;
+}
+
+export type TabNavigationKey =
+  'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';