@ankhorage/surface 4.4.0 → 5.0.0

package/dist/examples/DocsExamples.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import { Field } from '../components/field';
-import { HelperText } from '../components/helper-text';
-import { Menu } from '../components/menu';
-import { Modal } from '../components/modal';
-import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
-import { Tooltip } from '../components/tooltip';
-import { Button } from '../features/button/public';
-import { Card } from '../features/card/public';
-import { Checkbox } from '../features/form/checkbox/public';
-import { TextInput } from '../features/form/text-input/public';
-import { Box, Stack } from '../features/layout/public';
-import { ToastProvider, useToast } from '../features/toast/public';
-import { Text } from '../features/typography/public';
-import { ThemeProvider } from '../theme';
-const docsThemeConfig = {
-    id: 'docs',
-    name: 'Docs',
-    light: { primaryColor: '#2563EB', harmony: 'analogous' },
-    dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
-};
-export function FormExample() {
-    return (<ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Field helperText="Use your work email." label="Email" required>
-          <TextInput placeholder="you@example.com"/>
-        </Field>
-        <Checkbox checked>Accept terms</Checkbox>
-        <HelperText emphasis="muted">Looks good.</HelperText>
-      </Stack>
-    </ThemeProvider>);
-}
-function ToastButton() {
-    const { showToast } = useToast();
-    return (<Button onPress={() => showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })}>
-      Show toast
-    </Button>);
-}
-export function FeedbackExample() {
-    return (<ThemeProvider initialConfig={docsThemeConfig}>
-      <ToastProvider>
-        <Stack gap="m" p="l">
-          <Tooltip content="Helpful contextual information">
-            <Text>Hover for tooltip</Text>
-          </Tooltip>
-          <ToastButton />
-        </Stack>
-      </ToastProvider>
-    </ThemeProvider>);
-}
-export function OverlayExample() {
-    const [modalVisible, setModalVisible] = React.useState(false);
-    return (<ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Button onPress={() => setModalVisible(true)}>Open modal</Button>
-        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
-          <Card>
-            <Stack gap="s">
-              <Text variant="label" weight="semiBold">
-                Modal title
-              </Text>
-              <Text>Modal content</Text>
-            </Stack>
-          </Card>
-        </Modal>
-      </Stack>
-    </ThemeProvider>);
-}
-export function NavigationExample() {
-    return (<ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Tabs defaultValue="account">
-          <TabList>
-            <Tab value="account">Account</Tab>
-            <Tab disabled value="security">
-              Security
-            </Tab>
-            <Tab value="billing">Billing</Tab>
-          </TabList>
-          <TabPanel value="account">
-            <Text>Account settings</Text>
-          </TabPanel>
-          <TabPanel value="billing">
-            <Text>Billing settings</Text>
-          </TabPanel>
-        </Tabs>
-        <Menu actions={[
-            { id: 'edit', title: 'Edit' },
-            { disabled: true, id: 'archive', title: 'Archive' },
-        ]} trigger={<Text>Open menu</Text>}/>
-        <Box>
-          <Text color="success">Theme overrides can stay semantic.</Text>
-        </Box>
-      </Stack>
-    </ThemeProvider>);
-}
-//# sourceMappingURL=DocsExamples.js.map

package/dist/examples/DocsExamples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DocsExamples.js","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,eAAe,GAAgB;IACnC,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE;IACxD,IAAI,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE;CACxD,CAAC;AAEF,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAC5C;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAClB;QAAA,CAAC,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAC7D;UAAA,CAAC,SAAS,CAAC,WAAW,CAAC,iBAAiB,EAC1C;QAAA,EAAE,KAAK,CACP;QAAA,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,EAAE,QAAQ,CACxC;QAAA,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,UAAU,CACtD;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,WAAW;IAClB,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,SAAS,CAAC,EAAE,WAAW,EAAE,0BAA0B,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,CAC1F,CAAC,CAED;;IACF,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,CACL,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAC5C;MAAA,CAAC,aAAa,CACZ;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAClB;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,gCAAgC,CAC/C;YAAA,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC/B;UAAA,EAAE,OAAO,CACT;UAAA,CAAC,WAAW,CAAC,AAAD,EACd;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAC5C;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAClB;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAChE;QAAA,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CACpE;UAAA,CAAC,IAAI,CACH;YAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CACrC;;cACF,EAAE,IAAI,CACN;cAAA,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAC3B;YAAA,EAAE,KAAK,CACT;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO,CACL,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAC5C;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAClB;QAAA,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAC1B;UAAA,CAAC,OAAO,CACN;YAAA,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,CACjC;YAAA,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAC5B;;YACF,EAAE,GAAG,CACL;YAAA,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,CACnC;UAAA,EAAE,OAAO,CACT;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CACvB;YAAA,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAC9B;UAAA,EAAE,QAAQ,CACV;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CACvB;YAAA,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAC9B;UAAA,EAAE,QAAQ,CACZ;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CACH,OAAO,CAAC,CAAC;YACP,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAC7B,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;SACpD,CAAC,CACF,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,EAElC;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,kCAAkC,EAAE,IAAI,CAChE;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Field } from '../components/field';\nimport { HelperText } from '../components/helper-text';\nimport { Menu } from '../components/menu';\nimport { Modal } from '../components/modal';\nimport { Tab, TabList, TabPanel, Tabs } from '../components/tabs';\nimport { Tooltip } from '../components/tooltip';\nimport { Button } from '../features/button/public';\nimport { Card } from '../features/card/public';\nimport { Checkbox } from '../features/form/checkbox/public';\nimport { TextInput } from '../features/form/text-input/public';\nimport { Box, Stack } from '../features/layout/public';\nimport { ToastProvider, useToast } from '../features/toast/public';\nimport { Text } from '../features/typography/public';\nimport { ThemeProvider } from '../theme';\nimport type { ThemeConfig } from '../theme/types';\n\nconst docsThemeConfig: ThemeConfig = {\n  id: 'docs',\n  name: 'Docs',\n  light: { primaryColor: '#2563EB', harmony: 'analogous' },\n  dark: { primaryColor: '#60A5FA', harmony: 'analogous' },\n};\n\nexport function FormExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Field helperText=\"Use your work email.\" label=\"Email\" required>\n          <TextInput placeholder=\"you@example.com\" />\n        </Field>\n        <Checkbox checked>Accept terms</Checkbox>\n        <HelperText emphasis=\"muted\">Looks good.</HelperText>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nfunction ToastButton() {\n  const { showToast } = useToast();\n  return (\n    <Button\n      onPress={() =>\n        showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })\n      }\n    >\n      Show toast\n    </Button>\n  );\n}\n\nexport function FeedbackExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <ToastProvider>\n        <Stack gap=\"m\" p=\"l\">\n          <Tooltip content=\"Helpful contextual information\">\n            <Text>Hover for tooltip</Text>\n          </Tooltip>\n          <ToastButton />\n        </Stack>\n      </ToastProvider>\n    </ThemeProvider>\n  );\n}\n\nexport function OverlayExample() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Button onPress={() => setModalVisible(true)}>Open modal</Button>\n        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>\n          <Card>\n            <Stack gap=\"s\">\n              <Text variant=\"label\" weight=\"semiBold\">\n                Modal title\n              </Text>\n              <Text>Modal content</Text>\n            </Stack>\n          </Card>\n        </Modal>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function NavigationExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Tabs defaultValue=\"account\">\n          <TabList>\n            <Tab value=\"account\">Account</Tab>\n            <Tab disabled value=\"security\">\n              Security\n            </Tab>\n            <Tab value=\"billing\">Billing</Tab>\n          </TabList>\n          <TabPanel value=\"account\">\n            <Text>Account settings</Text>\n          </TabPanel>\n          <TabPanel value=\"billing\">\n            <Text>Billing settings</Text>\n          </TabPanel>\n        </Tabs>\n        <Menu\n          actions={[\n            { id: 'edit', title: 'Edit' },\n            { disabled: true, id: 'archive', title: 'Archive' },\n          ]}\n          trigger={<Text>Open menu</Text>}\n        />\n        <Box>\n          <Text color=\"success\">Theme overrides can stay semantic.</Text>\n        </Box>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n"]}

package/src/components/menu/Menu.tsx

@@ -1,228 +0,0 @@
-import React from 'react';
-import { type LayoutRectangle, Pressable, View } from 'react-native';
-
-import { Box, Stack } from '../../features/layout/public';
-import { Surface } from '../../features/surface/public';
-import { Text } from '../../features/typography/public';
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { useFocusManager } from '../../internal/focus/useFocusManager';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Inline } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNextMenuIndex } from './navigation';
-import type { MenuAction, MenuProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-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 });
-  });
-}
-
-function renderActionContent(action: MenuAction, active: boolean) {
-  const titleColor =
-    action.intent === 'danger' ? 'danger' : active || action.selected ? 'neutral' : undefined;
-
-  return (
-    <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-      {action.leading ? <Box>{action.leading}</Box> : null}
-      <Box flex={1}>
-        <Stack gap="xxs">
-          <Text
-            color={titleColor}
-            variant="bodySmall"
-            weight={action.selected ? 'semiBold' : 'medium'}
-          >
-            {action.title}
-          </Text>
-          {action.description ? (
-            <Text emphasis="muted" variant="caption">
-              {action.description}
-            </Text>
-          ) : null}
-        </Stack>
-      </Box>
-      {action.trailing ? <Box>{action.trailing}</Box> : null}
-    </Inline>
-  );
-}
-
-export function Menu({
-  trigger,
-  actions,
-  dismiss,
-  closeOnSelect = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: MenuProps) {
-  const { theme } = useTheme();
-  const { bindKeydown } = useFocusManager();
-  const animation = resolveOverlayAnimation('menu');
-  const anchorRef = React.useRef<View | null>(null);
-  const [open, setOpen] = React.useState(false);
-  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  const passive = interactionPolicy === 'passive';
-
-  const closeMenu = React.useCallback(() => {
-    setOpen(false);
-    if (dismiss) {
-      dismiss();
-    }
-  }, [dismiss]);
-
-  const activateAction = React.useCallback(
-    (action: MenuAction) => {
-      if (action.disabled) {
-        return;
-      }
-
-      if (action.activate) {
-        action.activate();
-      }
-
-      if (closeOnSelect) {
-        closeMenu();
-      }
-    },
-    [closeMenu, closeOnSelect],
-  );
-
-  const openMenu = React.useCallback(() => {
-    measureNode(anchorRef.current, setLayout);
-    const firstEnabledIndex = actions.findIndex((action) => !action.disabled);
-    setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);
-    setOpen(true);
-  }, [actions]);
-
-  React.useEffect(() => {
-    if (!open) {
-      return undefined;
-    }
-
-    return bindKeydown((event) => {
-      if (passive) {
-        return;
-      }
-
-      const { key } = event;
-      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {
-        event.preventDefault();
-        setActiveIndex((current) => resolveNextMenuIndex(actions, current, key));
-      }
-
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        const activeAction = actions[activeIndex];
-        if (activeAction) {
-          activateAction(activeAction);
-        }
-      }
-
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        closeMenu();
-      }
-    });
-  }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open, passive]);
-
-  return (
-    <View collapsable={false} ref={anchorRef}>
-      <ButtonBase
-        onPress={passive ? undefined : open ? closeMenu : openMenu}
-        testID={testID ? `${testID}-trigger` : undefined}
-      >
-        {trigger}
-      </ButtonBase>
-      <Portal layer="menu" visible={open && Boolean(layout)}>
-        <View
-          {...boxNonePointerEvents.props}
-          style={[
-            boxNonePointerEvents.style,
-            {
-              bottom: 0,
-              left: 0,
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            },
-          ]}
-        >
-          <Pressable
-            onPress={passive ? undefined : closeMenu}
-            style={{
-              bottom: 0,
-              left: 0,
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            }}
-          />
-          <FocusScope active={open} onEscape={passive ? undefined : closeMenu}>
-            <View
-              style={{
-                left: layout?.x ?? 0,
-                position: 'absolute',
-                top: (layout?.y ?? 0) + (layout?.height ?? 0) + animation.offset,
-              }}
-            >
-              <Surface
-                accessibilityRole="menu"
-                p="xs"
-                style={{
-                  minWidth: Math.max(layout?.width ?? 0, 220),
-                  shadowOpacity: 0.12,
-                  shadowRadius: 12,
-                  shadowOffset: { width: 0, height: 6 },
-                }}
-                testID={testID}
-                variant="raised"
-              >
-                {actions.map((action, index) => {
-                  const active = index === activeIndex;
-                  const selected = action.selected ?? active;
-
-                  return (
-                    <Pressable
-                      accessibilityRole="menuitem"
-                      accessibilityState={{ disabled: action.disabled, selected }}
-                      disabled={action.disabled}
-                      key={action.id}
-                      onPress={passive ? undefined : () => activateAction(action)}
-                    >
-                      <Box
-                        px="m"
-                        py="s"
-                        radius="s"
-                        style={{
-                          backgroundColor: selected
-                            ? theme.semantics.action.neutral.softBg
-                            : 'transparent',
-                          opacity: action.disabled ? 0.56 : 1,
-                        }}
-                        testID={testID ? `${testID}-item-${action.id}` : undefined}
-                      >
-                        {renderActionContent(action, active)}
-                      </Box>
-                    </Pressable>
-                  );
-                })}
-              </Surface>
-            </View>
-          </FocusScope>
-        </View>
-      </Portal>
-    </View>
-  );
-}

package/src/components/menu/index.ts

@@ -1,2 +0,0 @@
-export { Menu } from './Menu';
-export type { MenuAction, MenuActionIntent, MenuAction as MenuItem, MenuProps } from './types';

package/src/components/menu/navigation.ts

@@ -1,34 +0,0 @@
-export function resolveNextMenuIndex(
-  items: readonly { disabled?: boolean }[],
-  currentIndex: number,
-  key: 'ArrowDown' | 'ArrowUp' | 'Home' | 'End',
-): number {
-  const enabledIndexes = items.reduce<number[]>((indexes, item, index) => {
-    if (!item.disabled) {
-      indexes.push(index);
-    }
-    return indexes;
-  }, []);
-
-  if (enabledIndexes.length === 0) {
-    return -1;
-  }
-
-  if (key === 'Home') {
-    return enabledIndexes[0] ?? -1;
-  }
-
-  if (key === 'End') {
-    return enabledIndexes[enabledIndexes.length - 1] ?? -1;
-  }
-
-  const activeEnabledIndex = enabledIndexes.indexOf(currentIndex);
-  const nextEnabledIndex =
-    activeEnabledIndex === -1
-      ? 0
-      : key === 'ArrowUp'
-        ? (activeEnabledIndex - 1 + enabledIndexes.length) % enabledIndexes.length
-        : (activeEnabledIndex + 1) % enabledIndexes.length;
-
-  return enabledIndexes[nextEnabledIndex] ?? -1;
-}

package/src/components/menu/types.ts

@@ -1,26 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-
-export type MenuActionIntent = 'default' | 'danger';
-
-export interface MenuAction {
-  id: string;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  intent?: MenuActionIntent;
-  disabled?: boolean;
-  selected?: boolean;
-  activate?: () => void;
-}
-
-export interface MenuProps {
-  trigger?: React.ReactNode;
-  actions: readonly MenuAction[];
-  dismiss?: () => void;
-  closeOnSelect?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}

package/src/components/tooltip/Tooltip.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { type LayoutRectangle, Platform, Pressable, View } from 'react-native';
-
-import { Surface } from '../../features/surface/public';
-import { Text } from '../../features/typography/public';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { useTheme } from '../../theme/ThemeContext';
-import type { TooltipProps } from './types';
-
-const noPointerEvents = resolvePointerEvents('none');
-
-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,
-  interactionPolicy = 'enabled',
-  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 passive = interactionPolicy === 'passive';
-
-  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={passive ? undefined : hide}
-        onFocus={passive ? undefined : show}
-        onHoverIn={Platform.OS === 'web' && !passive ? show : undefined}
-        onHoverOut={Platform.OS === 'web' && !passive ? hide : undefined}
-      >
-        {children}
-      </Pressable>
-      <Portal layer="tooltip" visible={visible && Boolean(layout)}>
-        <View
-          {...noPointerEvents.props}
-          style={[
-            noPointerEvents.style,
-            {
-              left: tooltipLeft,
-              position: 'absolute',
-              top: tooltipTop,
-            },
-          ]}
-        >
-          <Surface
-            p="s"
-            style={{
-              backgroundColor: theme.semantics.surface.inverse,
-            }}
-            testID={testID}
-            variant="raised"
-          >
-            <Text emphasis="inverse" variant="caption">
-              {content}
-            </Text>
-          </Surface>
-        </View>
-      </Portal>
-    </View>
-  );
-}

package/src/components/tooltip/index.ts

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

package/src/examples/DocsExamples.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-
-import { Field } from '../components/field';
-import { HelperText } from '../components/helper-text';
-import { Menu } from '../components/menu';
-import { Modal } from '../components/modal';
-import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
-import { Tooltip } from '../components/tooltip';
-import { Button } from '../features/button/public';
-import { Card } from '../features/card/public';
-import { Checkbox } from '../features/form/checkbox/public';
-import { TextInput } from '../features/form/text-input/public';
-import { Box, Stack } from '../features/layout/public';
-import { ToastProvider, useToast } from '../features/toast/public';
-import { Text } from '../features/typography/public';
-import { ThemeProvider } from '../theme';
-import type { ThemeConfig } from '../theme/types';
-
-const docsThemeConfig: ThemeConfig = {
-  id: 'docs',
-  name: 'Docs',
-  light: { primaryColor: '#2563EB', harmony: 'analogous' },
-  dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
-};
-
-export function FormExample() {
-  return (
-    <ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Field helperText="Use your work email." label="Email" required>
-          <TextInput placeholder="you@example.com" />
-        </Field>
-        <Checkbox checked>Accept terms</Checkbox>
-        <HelperText emphasis="muted">Looks good.</HelperText>
-      </Stack>
-    </ThemeProvider>
-  );
-}
-
-function ToastButton() {
-  const { showToast } = useToast();
-  return (
-    <Button
-      onPress={() =>
-        showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })
-      }
-    >
-      Show toast
-    </Button>
-  );
-}
-
-export function FeedbackExample() {
-  return (
-    <ThemeProvider initialConfig={docsThemeConfig}>
-      <ToastProvider>
-        <Stack gap="m" p="l">
-          <Tooltip content="Helpful contextual information">
-            <Text>Hover for tooltip</Text>
-          </Tooltip>
-          <ToastButton />
-        </Stack>
-      </ToastProvider>
-    </ThemeProvider>
-  );
-}
-
-export function OverlayExample() {
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  return (
-    <ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Button onPress={() => setModalVisible(true)}>Open modal</Button>
-        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
-          <Card>
-            <Stack gap="s">
-              <Text variant="label" weight="semiBold">
-                Modal title
-              </Text>
-              <Text>Modal content</Text>
-            </Stack>
-          </Card>
-        </Modal>
-      </Stack>
-    </ThemeProvider>
-  );
-}
-
-export function NavigationExample() {
-  return (
-    <ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Tabs defaultValue="account">
-          <TabList>
-            <Tab value="account">Account</Tab>
-            <Tab disabled value="security">
-              Security
-            </Tab>
-            <Tab value="billing">Billing</Tab>
-          </TabList>
-          <TabPanel value="account">
-            <Text>Account settings</Text>
-          </TabPanel>
-          <TabPanel value="billing">
-            <Text>Billing settings</Text>
-          </TabPanel>
-        </Tabs>
-        <Menu
-          actions={[
-            { id: 'edit', title: 'Edit' },
-            { disabled: true, id: 'archive', title: 'Archive' },
-          ]}
-          trigger={<Text>Open menu</Text>}
-        />
-        <Box>
-          <Text color="success">Theme overrides can stay semantic.</Text>
-        </Box>
-      </Stack>
-    </ThemeProvider>
-  );
-}