@impulse-ui-native/popover 15.0.5 → 17.0.0

package/README.md

@@ -1,81 +1,83 @@
-# @impulse-ui-native/popover
-
-Native anchored overlays with theme tokens and Portal rendering. Tooltip and Popover share measurement and collision handling; no Overlay store or animation runtime is required.
-
-## Installation and providers
-
-```sh
-pnpm add @impulse-ui-native/popover @impulse-ui-native/portal @impulse-ui-native/theme react-native-safe-area-context
-```
-
-Install `SafeAreaProvider`, `ThemeProvider`, and `PortalProvider` at the app root. Render `PortalsHost` last, inside a full-screen native View and the same theme/safe-area providers. Create the `PortalStore` once outside render. A custom `portalName` must match its host's `name`. Positioning measures both anchor and host in window coordinates, so an inset host also works within its own bounds.
-
-## Compound popover
-
-```tsx
-import { Popover, Tooltip } from "@impulse-ui-native/popover";
-import { Typography } from "@impulse-ui-native/primitives";
-
-<Popover.Root placement="bottom">
-  <Popover.Trigger>
-    <Typography.Label>Visibility</Typography.Label>
-  </Popover.Trigger>
-  <Popover.Content>
-    <Popover.Title>Project visibility</Popover.Title>
-    <Popover.Description>Choose who can view this project.</Popover.Description>
-    {/* Supply any selection controls or actions here. */}
-    <Popover.Close>
-      <Typography.Label>Done</Typography.Label>
-    </Popover.Close>
-  </Popover.Content>
-</Popover.Root>;
-
-<Tooltip content="Syncs when you’re online">
-  <Typography.Label>Auto-sync info</Typography.Label>
-</Tooltip>;
-```
-
-All compound parts render supplied children. `Popover.Content` owns Portal rendering and carries popover context to the host, so `Close` can dismiss there. Header, Footer, Title, and Description use independent theme styling. Other app-local React providers around an anchor do not automatically move with it; put those providers above the host or inside Content.
-
-The convenience form composes Trigger, Content, Header, Title, Close, and Footer:
-
-```tsx
-<Popover
-  trigger={<Typography.Label>Details</Typography.Label>}
-  title="Project details"
->
-  <Popover.Description>Updated just now.</Popover.Description>
-</Popover>
-```
-
-A truthy header replaces the generated title. The header includes a neutral X close icon by default; hideClose omits it. A truthy footer renders Popover.Footer with trailing, wrapping actions. Header and Footer are child-only View parts available for compound composition. Pass body content as children; triggerProps and contentProps continue to customize the trigger and positioned panel. Titles can wrap beside the close control instead of pushing it outside the header.
-
-## Contract
-
-- `open`, `defaultOpen` (false), and `onOpenChange` support controlled and uncontrolled state. Controlled consumers must apply requested changes.
-- `placement` accepts `top`, `bottom`, `left`, and `right`. Popover defaults to bottom; Tooltip defaults to top. Left/right are physical placements.
-- A press toggles Popover. Tooltip defaults to long-press. `triggerProps.trigger` or `Popover.Trigger`'s `trigger` selects either behavior. Consumer press/long-press callbacks are preserved.
-- Root `disabled` suppresses the overlay and blocks trigger changes. Trigger/Close `disabled` or `loading` blocks that part's interaction. Supply a single Trigger and Content per Root; use non-interactive visual children inside Trigger rather than nesting another pressable.
-- Outside taps and Android Back request dismissal. Outside taps are consumed; there is no dim scrim. Content sizes naturally without internal scrolling. Keep popovers compact; use a sheet, dialog, or screen for larger content. Keyboard avoidance and nested overlay coordination are outside this initial API.
-- Tooltip `duration` defaults to 3000ms from opening; zero persists until dismissal. Timers clean up on close/unmount. Supply strings/numbers for token-styled text or a React node for custom content.
-- Popover uses `colors.surface.elevated.value` with a subtle border and no default shadow. Override `components.popover` on ThemeProvider for geometry, typography, and panel styling. Tooltip owns its compact inverse styling through `components.popover.tooltip`, without a surface variant in Root or context.
-- Popover content defaults to 320dp wide; Tooltip sizes to its content. Both are constrained to the available host width. Content spacing and width can be customized with primitive style props or `style`.
-- Anchors and host bounds are measured on opening and polled every 100ms while open, following scrolling and layout changes. Only one measurement is in flight; slow native callbacks are allowed to finish. Closed overlays have no measurement timer. Content stays hidden until measured and when its anchor is outside the usable host bounds.
-- Popover and Tooltip use rounded panels without arrows. Collision handling flips to the opposite side when it has more space, then shifts into safe-area bounds. Extremely large content can overlap the anchor after clamping.
-
-## Exports and verification
-
-`Popover`, `Tooltip`, and their prop and placement types are available directly or through `@impulse-ui-native/toolkit`. Storybook covers composition, controlled state, disabled triggers, long-press, and edge placements. Use the on-device Storybook host to verify rendering and interaction on iOS and Android.
-
-## Surface migration
-
-The surface prop and PopoverSurface type have been removed. Move former
-components.popover.surfaces.elevated customizations to the flat panel tokens
-(backgroundColor, borderColor, borderWidth, borderRadius, paddingHorizontal,
-and paddingVertical). Move inverse hint styling to components.popover.tooltip;
-its text color is named color. Customize Popover.Content directly for custom
-panel styling.
-
-## Agent and design reference
-
-Start with the [capability guide](../../docs/design-system/capabilities/popover.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
+# @impulse-ui-native/popover
+
+Native anchored overlays with theme tokens and Portal rendering. Tooltip and Popover share measurement and collision handling; no Overlay store is required. Motion uses Reanimated and Worklets.
+
+## Installation and providers
+
+```sh
+pnpm add @impulse-ui-native/popover @impulse-ui-native/portal @impulse-ui-native/theme react-native-safe-area-context react-native-reanimated react-native-worklets
+```
+
+Configure Reanimated/Worklets in the native host. Install `SafeAreaProvider`, `ThemeProvider`, and `PortalProvider` at the app root. Render `PortalsHost` last, inside a full-screen native View and the same theme/safe-area providers. Create the `PortalStore` once outside render. A custom `portalName` must match its host's `name`. Positioning measures both anchor and host in window coordinates, so an inset host also works within its own bounds.
+
+## Compound popover
+
+```tsx
+import { Popover, Tooltip } from "@impulse-ui-native/popover";
+import { Typography } from "@impulse-ui-native/primitives";
+
+<Popover.Root placement="bottom">
+  <Popover.Trigger>
+    <Typography.Label>Visibility</Typography.Label>
+  </Popover.Trigger>
+  <Popover.Content>
+    <Popover.Title>Project visibility</Popover.Title>
+    <Popover.Description>Choose who can view this project.</Popover.Description>
+    {/* Supply any selection controls or actions here. */}
+    <Popover.Close>
+      <Typography.Label>Done</Typography.Label>
+    </Popover.Close>
+  </Popover.Content>
+</Popover.Root>;
+
+<Tooltip content="Syncs when you’re online">
+  <Typography.Label>Auto-sync info</Typography.Label>
+</Tooltip>;
+```
+
+All compound parts render supplied children. `Popover.Content` owns Portal rendering and carries popover context to the host, so `Close` can dismiss there. Header, Footer, Title, and Description use independent theme styling. Other app-local React providers around an anchor do not automatically move with it; put those providers above the host or inside Content.
+
+The convenience form composes Trigger, Content, Header, Title, Close, and Footer:
+
+```tsx
+<Popover
+  trigger={<Typography.Label>Details</Typography.Label>}
+  title="Project details"
+>
+  <Popover.Description>Updated just now.</Popover.Description>
+</Popover>
+```
+
+A truthy header replaces the generated title. The header includes a neutral X close icon by default; hideClose omits it. A truthy footer renders Popover.Footer with trailing, wrapping actions. Header and Footer are child-only View parts available for compound composition. Pass body content as children; triggerProps and contentProps continue to customize the trigger and positioned panel. Titles can wrap beside the close control instead of pushing it outside the header.
+
+## Contract
+
+- `open`, `defaultOpen` (false), and `onOpenChange` support controlled and uncontrolled state. Controlled consumers must apply requested changes.
+- `placement` accepts `top`, `bottom`, `left`, and `right`. Popover defaults to bottom; Tooltip defaults to top. Left/right are physical placements.
+- A press toggles Popover. Tooltip defaults to long-press. `triggerProps.trigger` or `Popover.Trigger`'s `trigger` selects either behavior. Consumer press/long-press callbacks are preserved.
+- Root `disabled` suppresses the overlay and blocks trigger changes. Trigger/Close `disabled` or `loading` blocks that part's interaction. Supply a single Trigger and Content per Root; use non-interactive visual children inside Trigger rather than nesting another pressable.
+- Outside taps and Android Back request dismissal. Outside taps are consumed; there is no dim scrim. Content sizes naturally without internal scrolling. Keep popovers compact; use a sheet, dialog, or screen for larger content. Keyboard avoidance and nested overlay coordination are outside this initial API.
+- Tooltip `duration` defaults to 3000ms from opening; zero persists until dismissal. Timers clean up on close/unmount. Supply strings/numbers for token-styled text or a React node for custom content.
+- Popover uses `colors.surface.elevated.value` with a subtle border and no default shadow. Override `components.popover` on ThemeProvider for geometry, typography, and panel styling. Tooltip owns its compact inverse styling through `components.popover.tooltip`, without a surface variant in Root or context.
+- Popover content defaults to 320dp wide; Tooltip sizes to its content. Both are constrained to the available host width. Content spacing and width can be customized with primitive style props or `style`.
+- Anchors and host bounds are measured on opening and polled every 100ms while open, following scrolling and layout changes. Only one measurement is in flight; slow native callbacks are allowed to finish. Closed overlays have no measurement timer. Content stays hidden until measured and when its anchor is outside the usable host bounds.
+- Popover and Tooltip use rounded panels without arrows. Collision handling flips to the opposite side when it has more space, then shifts into safe-area bounds. Extremely large content can overlap the anchor after clamping.
+
+## Exports and verification
+
+`Popover`, `Tooltip`, and their prop and placement types are available directly or through `@impulse-ui-native/toolkit`. Storybook covers composition, controlled state, disabled triggers, long-press, and edge placements. Use the on-device Storybook host to verify rendering and interaction on iOS and Android.
+
+## Surface migration
+
+The surface prop and PopoverSurface type have been removed. Move former
+components.popover.surfaces.elevated customizations to the flat panel tokens
+(backgroundColor, borderColor, borderWidth, borderRadius, paddingHorizontal,
+and paddingVertical). Move inverse hint styling to components.popover.tooltip;
+its text color is named color. Customize Popover.Content directly for custom
+panel styling.
+
+## Agent and design reference
+
+Start with the [capability guide](../../docs/design-system/capabilities/popover.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
+
+Popover and Tooltip use a restrained, critically damped scale and fade from the edge facing the anchor, respecting the resolved collision placement. Entry waits for measurement, and content remains mounted until exit settles. `enterDuration` / `exitDuration` are perceptual spring durations (240 / 180 ms); `closedScale` defaults to 0.96. Install `react-native-reanimated` and `react-native-worklets` in the native host.

package/dist/components/popover-content.js

@@ -1,12 +1,35 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useState } from "react";
+import { useEventCallback } from "@impulse-ui-native/core";
+import {
+  useOverlayLifecycle,
+  useOverlaySpring
+} from "@impulse-ui-native/overlay";
 import { Portal } from "@impulse-ui-native/portal";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
 import { PopoverContext } from "../contexts/popover.context";
 import { usePopoverContext } from "../hooks/use-popover-context.hook";
 import { PopoverSurfaceView } from "./popover-surface";
 const PopoverContent = memo(function PopoverContent2(props) {
   const context = usePopoverContext();
-  return context.open ? /* @__PURE__ */ jsx(Portal, { name: context.portalName, children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: context, children: /* @__PURE__ */ jsx(PopoverSurfaceView, { ...props }) }) }) : null;
+  const [ready, setReady] = useState(false);
+  const tokens = useComponentsTokens().popover;
+  const { options, progress } = useOverlaySpring(tokens);
+  const handleReady = useEventCallback(() => setReady(true));
+  const handleClosed = useEventCallback(() => setReady(false));
+  const lifecycle = useOverlayLifecycle(
+    { id: "popover", open: context.open, onCloseFinished: handleClosed },
+    { ...options, ready }
+  );
+  return lifecycle.mounted ? /* @__PURE__ */ jsx(Portal, { name: context.portalName, children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    PopoverSurfaceView,
+    {
+      ...props,
+      progress,
+      interactive: lifecycle.interactive,
+      onReady: handleReady
+    }
+  ) }) }) : null;
 });
 export {
   PopoverContent

package/dist/components/popover-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover-content.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Portal } from \"@impulse-ui-native/portal\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport { PopoverContext } from \"../contexts/popover.context\";\nimport { usePopoverContext } from \"../hooks/use-popover-context.hook\";\nimport { PopoverSurfaceView } from \"./popover-surface\";\n\nexport const PopoverContent = memo(function PopoverContent(\n  props: PopoverContentProps,\n) {\n  const context = usePopoverContext();\n\n  return context.open ? (\n    <Portal name={context.portalName}>\n      <PopoverContext.Provider value={context}>\n        <PopoverSurfaceView {...props} />\n      </PopoverContext.Provider>\n    </Portal>\n  ) : null;\n});\n"],"mappings":"AAiBQ;AAjBR,SAAS,YAAY;AAErB,SAAS,cAAc;AAGvB,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,KAAK,SAASA,gBAC1C,OACA;AACA,QAAM,UAAU,kBAAkB;AAElC,SAAO,QAAQ,OACb,oBAAC,UAAO,MAAM,QAAQ,YACpB,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,sBAAoB,GAAG,OAAO,GACjC,GACF,IACE;AACN,CAAC;","names":["PopoverContent"]}
+{"version":3,"sources":["../../src/components/popover-content.tsx"],"sourcesContent":["import { memo, useState } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport {\r\n  useOverlayLifecycle,\r\n  useOverlaySpring,\r\n} from \"@impulse-ui-native/overlay\";\r\nimport { Portal } from \"@impulse-ui-native/portal\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { PopoverContentProps } from \"../types\";\r\nimport { PopoverContext } from \"../contexts/popover.context\";\r\nimport { usePopoverContext } from \"../hooks/use-popover-context.hook\";\r\nimport { PopoverSurfaceView } from \"./popover-surface\";\r\n\r\nexport const PopoverContent = memo(function PopoverContent(\r\n  props: PopoverContentProps,\r\n) {\r\n  const context = usePopoverContext();\r\n  const [ready, setReady] = useState(false);\r\n  const tokens = useComponentsTokens().popover;\r\n  const { options, progress } = useOverlaySpring(tokens);\r\n  const handleReady = useEventCallback(() => setReady(true));\r\n  const handleClosed = useEventCallback(() => setReady(false));\r\n  const lifecycle = useOverlayLifecycle(\r\n    { id: \"popover\", open: context.open, onCloseFinished: handleClosed },\r\n    { ...options, ready },\r\n  );\r\n\r\n  return lifecycle.mounted ? (\r\n    <Portal name={context.portalName}>\r\n      <PopoverContext.Provider value={context}>\r\n        <PopoverSurfaceView\r\n          {...props}\r\n          progress={progress}\r\n          interactive={lifecycle.interactive}\r\n          onReady={handleReady}\r\n        />\r\n      </PopoverContext.Provider>\r\n    </Portal>\r\n  ) : null;\r\n});\r\n"],"mappings":"AAgCQ;AAhCR,SAAS,MAAM,gBAAgB;AAE/B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,2BAA2B;AAGpC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,KAAK,SAASA,gBAC1C,OACA;AACA,QAAM,UAAU,kBAAkB;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,iBAAiB,MAAM;AACrD,QAAM,cAAc,iBAAiB,MAAM,SAAS,IAAI,CAAC;AACzD,QAAM,eAAe,iBAAiB,MAAM,SAAS,KAAK,CAAC;AAC3D,QAAM,YAAY;AAAA,IAChB,EAAE,IAAI,WAAW,MAAM,QAAQ,MAAM,iBAAiB,aAAa;AAAA,IACnE,EAAE,GAAG,SAAS,MAAM;AAAA,EACtB;AAEA,SAAO,UAAU,UACf,oBAAC,UAAO,MAAM,QAAQ,YACpB,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,aAAa,UAAU;AAAA,MACvB,SAAS;AAAA;AAAA,EACX,GACF,GACF,IACE;AACN,CAAC;","names":["PopoverContent"]}

package/dist/components/popover-surface.d.mts

@@ -1,8 +1,10 @@
 import * as react from 'react';
-import { PopoverContentProps } from '../types/popover.types.mjs';
+import { PopoverSurfaceViewProps } from '../types/popover-surface.types.mjs';
+import 'react-native-reanimated';
+import '../types/popover.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/primitives';
 
-declare const PopoverSurfaceView: react.MemoExoticComponent<({ children, style, onLayout, ...props }: PopoverContentProps) => react.JSX.Element>;
+declare const PopoverSurfaceView: react.MemoExoticComponent<({ progress, interactive, onReady, children, style, onLayout, shadow, shadowPosition, ...props }: PopoverSurfaceViewProps) => react.JSX.Element>;
 
 export { PopoverSurfaceView };

package/dist/components/popover-surface.js

@@ -1,22 +1,62 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo } from "react";
 import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { Pressable, View } from "@impulse-ui-native/primitives";
-import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+import {
+  getShadowStyle,
+  useStyleProps,
+  useTheme,
+  useThemedStyles
+} from "@impulse-ui-native/theme";
 import { usePopoverSurface } from "../hooks/use-popover-surface.hook";
 const PopoverSurfaceView = memo(function PopoverSurfaceView2({
+  progress,
+  interactive,
+  onReady,
   children,
   style,
   onLayout,
+  shadow,
+  shadowPosition,
   ...props
 }) {
+  const theme = useTheme();
   const { hostRef, styleProps, close, handleLayout } = usePopoverSurface(onLayout);
   const extractedStyleProps = useStyleProps(props);
   const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);
+  const tokens = theme.components.popover;
+  const shadowStyle = useMemo(
+    () => getShadowStyle(shadow, shadowPosition, theme.colors, theme.shadows),
+    [shadow, shadowPosition, theme.colors, theme.shadows]
+  );
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: styleProps.ready ? Math.max(0, Math.min(1, progress.value)) : 0,
+    transform: [
+      { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value }
+    ]
+  }));
   const panelStyle = useMemo(
-    () => [styles.panel, extractedStyleProps, style, styles.position],
-    [styles.panel, extractedStyleProps, style, styles.position]
+    () => [
+      styles.panel,
+      shadowStyle,
+      extractedStyleProps,
+      style,
+      styles.position,
+      animatedStyle
+    ],
+    [
+      styles.panel,
+      shadowStyle,
+      extractedStyleProps,
+      style,
+      styles.position,
+      animatedStyle
+    ]
   );
+  useEffect(() => {
+    if (styleProps.ready) onReady();
+  }, [styleProps.ready, onReady]);
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -25,12 +65,19 @@ const PopoverSurfaceView = memo(function PopoverSurfaceView2({
       pointerEvents: "box-none",
       style: styles.host,
       children: [
-        /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: close }),
         /* @__PURE__ */ jsx(
-          View,
+          Pressable,
+          {
+            style: StyleSheet.absoluteFill,
+            onPress: close,
+            disabled: !interactive
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Animated.View,
           {
             ...props,
-            pointerEvents: styleProps.ready ? "auto" : "none",
+            pointerEvents: interactive ? "auto" : "none",
             style: panelStyle,
             onLayout: handleLayout,
             children
@@ -40,8 +87,10 @@ const PopoverSurfaceView = memo(function PopoverSurfaceView2({
     }
   );
 });
-function themedStyles(theme, { bounds, host, position, ready }) {
+function themedStyles(theme, { bounds, host, position }) {
   const tokens = theme.components.popover;
+  const placement = position?.placement;
+  const transformOrigin = placement === "top" ? "center bottom" : placement === "left" ? "right center" : placement === "right" ? "left center" : "center top";
   return StyleSheet.create({
     host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },
     position: {
@@ -49,7 +98,7 @@ function themedStyles(theme, { bounds, host, position, ready }) {
       left: (position?.x ?? bounds.x) - (host?.x ?? 0),
       top: (position?.y ?? bounds.y) - (host?.y ?? 0),
       maxWidth: Math.min(tokens.maxWidth, bounds.width),
-      opacity: ready ? 1 : 0
+      transformOrigin
     },
     panel: {
       width: tokens.maxWidth,

package/dist/components/popover-surface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover-surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\nimport { usePopoverSurface } from \"../hooks/use-popover-surface.hook\";\n\nexport const PopoverSurfaceView = memo(function PopoverSurfaceView({\n  children,\n  style,\n  onLayout,\n  ...props\n}: PopoverContentProps) {\n  const { hostRef, styleProps, close, handleLayout } =\n    usePopoverSurface(onLayout);\n\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);\n\n  const panelStyle = useMemo(\n    () => [styles.panel, extractedStyleProps, style, styles.position],\n    [styles.panel, extractedStyleProps, style, styles.position],\n  );\n\n  return (\n    <View\n      ref={hostRef}\n      collapsable={false}\n      pointerEvents=\"box-none\"\n      style={styles.host}\n    >\n      <Pressable style={StyleSheet.absoluteFill} onPress={close} />\n      <View\n        {...props}\n        pointerEvents={styleProps.ready ? \"auto\" : \"none\"}\n        style={panelStyle}\n        onLayout={handleLayout}\n      >\n        {children}\n      </View>\n    </View>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { bounds, host, position, ready }: PopoverSurfaceStyleProps,\n) {\n  const tokens = theme.components.popover;\n\n  return StyleSheet.create({\n    host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },\n\n    position: {\n      position: \"absolute\",\n      left: (position?.x ?? bounds.x) - (host?.x ?? 0),\n      top: (position?.y ?? bounds.y) - (host?.y ?? 0),\n      maxWidth: Math.min(tokens.maxWidth, bounds.width),\n      opacity: ready ? 1 : 0,\n    },\n\n    panel: {\n      width: tokens.maxWidth,\n      backgroundColor: tokens.backgroundColor,\n      borderColor: tokens.borderColor,\n      borderWidth: tokens.borderWidth,\n      borderRadius: tokens.borderRadius,\n      paddingHorizontal: tokens.paddingHorizontal,\n      paddingVertical: tokens.paddingVertical,\n      gap: tokens.gap,\n    },\n  });\n}\n"],"mappings":"AA6BI,SAME,KANF;AA7BJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,WAAW,YAAY;AAChC,SAAS,eAAe,uBAAuB;AAI/C,SAAS,yBAAyB;AAE3B,MAAM,qBAAqB,KAAK,SAASA,oBAAmB;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,SAAS,YAAY,OAAO,aAAa,IAC/C,kBAAkB,QAAQ;AAE5B,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,cAAc,YAAY,CAAC,UAAU,CAAC;AAErE,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,qBAAqB,OAAO,OAAO,QAAQ;AAAA,IAChE,CAAC,OAAO,OAAO,qBAAqB,OAAO,OAAO,QAAQ;AAAA,EAC5D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,eAAc;AAAA,MACd,OAAO,OAAO;AAAA,MAEd;AAAA,4BAAC,aAAU,OAAO,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3D;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,eAAe,WAAW,QAAQ,SAAS;AAAA,YAC3C,OAAO;AAAA,YACP,UAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,QAAQ,MAAM,UAAU,MAAM,GAChC;AACA,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM,EAAE,GAAG,WAAW,cAAc,QAAQ,OAAO,WAAW;AAAA,IAE9D,UAAU;AAAA,MACR,UAAU;AAAA,MACV,OAAO,UAAU,KAAK,OAAO,MAAM,MAAM,KAAK;AAAA,MAC9C,MAAM,UAAU,KAAK,OAAO,MAAM,MAAM,KAAK;AAAA,MAC7C,UAAU,KAAK,IAAI,OAAO,UAAU,OAAO,KAAK;AAAA,MAChD,SAAS,QAAQ,IAAI;AAAA,IACvB;AAAA,IAEA,OAAO;AAAA,MACL,OAAO,OAAO;AAAA,MACd,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,cAAc,OAAO;AAAA,MACrB,mBAAmB,OAAO;AAAA,MAC1B,iBAAiB,OAAO;AAAA,MACxB,KAAK,OAAO;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["PopoverSurfaceView"]}
+{"version":3,"sources":["../../src/components/popover-surface.tsx"],"sourcesContent":["import { memo, useEffect, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\r\nimport {\r\n  getShadowStyle,\r\n  useStyleProps,\r\n  useTheme,\r\n  useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { PopoverSurfaceViewProps } from \"../types/popover-surface.types\";\r\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\r\nimport { usePopoverSurface } from \"../hooks/use-popover-surface.hook\";\r\n\r\nexport const PopoverSurfaceView = memo(function PopoverSurfaceView({\r\n  progress,\r\n  interactive,\r\n  onReady,\r\n  children,\r\n  style,\r\n  onLayout,\r\n  shadow,\r\n  shadowPosition,\r\n  ...props\r\n}: PopoverSurfaceViewProps) {\r\n  const theme = useTheme();\r\n  const { hostRef, styleProps, close, handleLayout } =\r\n    usePopoverSurface(onLayout);\r\n\r\n  const extractedStyleProps = useStyleProps(props);\r\n  const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);\r\n\r\n  const tokens = theme.components.popover;\r\n  const shadowStyle = useMemo(\r\n    () => getShadowStyle(shadow, shadowPosition, theme.colors, theme.shadows),\r\n    [shadow, shadowPosition, theme.colors, theme.shadows],\r\n  );\r\n  const animatedStyle = useAnimatedStyle(() => ({\r\n    opacity: styleProps.ready ? Math.max(0, Math.min(1, progress.value)) : 0,\r\n    transform: [\r\n      { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value },\r\n    ],\r\n  }));\r\n\r\n  const panelStyle = useMemo(\r\n    () => [\r\n      styles.panel,\r\n      shadowStyle,\r\n      extractedStyleProps,\r\n      style,\r\n      styles.position,\r\n      animatedStyle,\r\n    ],\r\n    [\r\n      styles.panel,\r\n      shadowStyle,\r\n      extractedStyleProps,\r\n      style,\r\n      styles.position,\r\n      animatedStyle,\r\n    ],\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (styleProps.ready) onReady();\r\n  }, [styleProps.ready, onReady]);\r\n\r\n  return (\r\n    <View\r\n      ref={hostRef}\r\n      collapsable={false}\r\n      pointerEvents=\"box-none\"\r\n      style={styles.host}\r\n    >\r\n      <Pressable\r\n        style={StyleSheet.absoluteFill}\r\n        onPress={close}\r\n        disabled={!interactive}\r\n      />\r\n      <Animated.View\r\n        {...props}\r\n        pointerEvents={interactive ? \"auto\" : \"none\"}\r\n        style={panelStyle}\r\n        onLayout={handleLayout}\r\n      >\r\n        {children}\r\n      </Animated.View>\r\n    </View>\r\n  );\r\n});\r\n\r\nfunction themedStyles(\r\n  theme: AppTheme,\r\n  { bounds, host, position }: PopoverSurfaceStyleProps,\r\n) {\r\n  const tokens = theme.components.popover;\r\n  const placement = position?.placement;\r\n  const transformOrigin =\r\n    placement === \"top\"\r\n      ? \"center bottom\"\r\n      : placement === \"left\"\r\n        ? \"right center\"\r\n        : placement === \"right\"\r\n          ? \"left center\"\r\n          : \"center top\";\r\n\r\n  return StyleSheet.create({\r\n    host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },\r\n\r\n    position: {\r\n      position: \"absolute\",\r\n      left: (position?.x ?? bounds.x) - (host?.x ?? 0),\r\n      top: (position?.y ?? bounds.y) - (host?.y ?? 0),\r\n      maxWidth: Math.min(tokens.maxWidth, bounds.width),\r\n      transformOrigin,\r\n    },\r\n\r\n    panel: {\r\n      width: tokens.maxWidth,\r\n      backgroundColor: tokens.backgroundColor,\r\n      borderColor: tokens.borderColor,\r\n      borderWidth: tokens.borderWidth,\r\n      borderRadius: tokens.borderRadius,\r\n      paddingHorizontal: tokens.paddingHorizontal,\r\n      paddingVertical: tokens.paddingVertical,\r\n      gap: tokens.gap,\r\n    },\r\n  });\r\n}\r\n"],"mappings":"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","names":["PopoverSurfaceView"]}

package/dist/hooks/use-popover-position.hook.d.mts

@@ -1,13 +1,11 @@
 import { RefObject, ComponentRef } from 'react';
 import { View } from 'react-native';
-import { PopoverRect } from '../types/popover.types.mjs';
+import { PopoverMeasurement } from '../types/popover-position.types.mjs';
+import '../types/popover.types.mjs';
 import '@impulse-ui-native/primitives';
 
 declare function usePopoverPosition(hostRef: RefObject<ComponentRef<typeof View> | null>): {
-    measurement: {
-        anchor: PopoverRect;
-        host: PopoverRect;
-    } | null;
+    measurement: PopoverMeasurement | null;
     bounds: {
         x: number;
         y: number;

package/dist/hooks/use-popover-position.hook.js

@@ -9,7 +9,9 @@ function usePopoverPosition(hostRef) {
   const { anchorRef } = usePopoverContext();
   const window = useWindowDimensions();
   const insets = useSafeAreaInsets();
-  const [measurement, setMeasurement] = useState(null);
+  const [measurement, setMeasurement] = useState(
+    null
+  );
   const tokens = useComponentsTokens().popover;
   const bounds = useMemo(() => {
     const host = measurement?.host;

package/dist/hooks/use-popover-position.hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-popover-position.hook.ts"],"sourcesContent":["import type { ComponentRef, RefObject } from \"react\";\nimport type { View } from \"react-native\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverRect } from \"../types/popover.types\";\nimport { AnchorMeasureInterval } from \"../constants/popover.constants\";\nimport { equalRects } from \"../utils/popover-position.utils\";\nimport { usePopoverContext } from \"./use-popover-context.hook\";\n\nexport function usePopoverPosition(\n  hostRef: RefObject<ComponentRef<typeof View> | null>,\n) {\n  const { anchorRef } = usePopoverContext();\n  const window = useWindowDimensions();\n  const insets = useSafeAreaInsets();\n\n  const [measurement, setMeasurement] = useState<{\n    anchor: PopoverRect;\n    host: PopoverRect;\n  } | null>(null);\n\n  const tokens = useComponentsTokens().popover;\n\n  const bounds = useMemo(() => {\n    const host = measurement?.host;\n    const x = Math.max(host?.x ?? 0, insets.left) + tokens.edgeOffset;\n    const y = Math.max(host?.y ?? 0, insets.top) + tokens.edgeOffset;\n    const right =\n      Math.min(\n        host ? host.x + host.width : window.width,\n        window.width - insets.right,\n      ) - tokens.edgeOffset;\n    const bottom =\n      Math.min(\n        host ? host.y + host.height : window.height,\n        window.height - insets.bottom,\n      ) - tokens.edgeOffset;\n\n    return {\n      x,\n      y,\n      width: Math.max(0, right - x),\n      height: Math.max(0, bottom - y),\n    };\n  }, [\n    measurement?.host,\n    insets,\n    window.width,\n    window.height,\n    tokens.edgeOffset,\n  ]);\n\n  useEffect(() => {\n    let active = true;\n    let measuring = false;\n\n    const measure = () => {\n      const anchorNode = anchorRef.current;\n      const hostNode = hostRef.current;\n\n      if (!anchorNode || !hostNode) {\n        setMeasurement(null);\n\n        return;\n      }\n\n      if (measuring) {\n        return;\n      }\n\n      measuring = true;\n\n      hostNode.measureInWindow((x, y, width, height) => {\n        if (!active) {\n          return;\n        }\n\n        const host = { x, y, width, height };\n\n        anchorNode.measureInWindow((ax, ay, aw, ah) => {\n          measuring = false;\n\n          if (\n            !active ||\n            anchorRef.current !== anchorNode ||\n            hostRef.current !== hostNode\n          ) {\n            return;\n          }\n\n          const anchor = { x: ax, y: ay, width: aw, height: ah };\n\n          setMeasurement((previous) => {\n            const sameAnchor = equalRects(previous?.anchor ?? null, anchor);\n            const sameHost = equalRects(previous?.host ?? null, host);\n\n            if (sameAnchor && sameHost) {\n              return previous;\n            }\n\n            return {\n              anchor,\n              host: sameHost && previous ? previous.host : host,\n            };\n          });\n        });\n      });\n    };\n\n    measure();\n\n    const timer = setInterval(measure, AnchorMeasureInterval);\n\n    return () => {\n      active = false;\n      clearInterval(timer);\n    };\n  }, [anchorRef, hostRef, window.width, window.height]);\n\n  const anchor = measurement?.anchor;\n\n  const visible = Boolean(\n    anchor &&\n    anchor.width > 0 &&\n    anchor.height > 0 &&\n    bounds.width > 0 &&\n    bounds.height > 0 &&\n    anchor.x + anchor.width > bounds.x &&\n    anchor.x < bounds.x + bounds.width &&\n    anchor.y + anchor.height > bounds.y &&\n    anchor.y < bounds.y + bounds.height,\n  );\n\n  return { measurement, bounds, visible };\n}\n"],"mappings":"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","names":["anchor"]}
+{"version":3,"sources":["../../src/hooks/use-popover-position.hook.ts"],"sourcesContent":["import type { ComponentRef, RefObject } from \"react\";\r\nimport type { View } from \"react-native\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport { useWindowDimensions } from \"react-native\";\r\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\r\n\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { PopoverMeasurement } from \"../types/popover-position.types\";\r\nimport { AnchorMeasureInterval } from \"../constants/popover.constants\";\r\nimport { equalRects } from \"../utils/popover-position.utils\";\r\nimport { usePopoverContext } from \"./use-popover-context.hook\";\r\n\r\nexport function usePopoverPosition(\r\n  hostRef: RefObject<ComponentRef<typeof View> | null>,\r\n) {\r\n  const { anchorRef } = usePopoverContext();\r\n  const window = useWindowDimensions();\r\n  const insets = useSafeAreaInsets();\r\n\r\n  const [measurement, setMeasurement] = useState<PopoverMeasurement | null>(\r\n    null,\r\n  );\r\n\r\n  const tokens = useComponentsTokens().popover;\r\n\r\n  const bounds = useMemo(() => {\r\n    const host = measurement?.host;\r\n    const x = Math.max(host?.x ?? 0, insets.left) + tokens.edgeOffset;\r\n    const y = Math.max(host?.y ?? 0, insets.top) + tokens.edgeOffset;\r\n    const right =\r\n      Math.min(\r\n        host ? host.x + host.width : window.width,\r\n        window.width - insets.right,\r\n      ) - tokens.edgeOffset;\r\n    const bottom =\r\n      Math.min(\r\n        host ? host.y + host.height : window.height,\r\n        window.height - insets.bottom,\r\n      ) - tokens.edgeOffset;\r\n\r\n    return {\r\n      x,\r\n      y,\r\n      width: Math.max(0, right - x),\r\n      height: Math.max(0, bottom - y),\r\n    };\r\n  }, [\r\n    measurement?.host,\r\n    insets,\r\n    window.width,\r\n    window.height,\r\n    tokens.edgeOffset,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    let active = true;\r\n    let measuring = false;\r\n\r\n    const measure = () => {\r\n      const anchorNode = anchorRef.current;\r\n      const hostNode = hostRef.current;\r\n\r\n      if (!anchorNode || !hostNode) {\r\n        setMeasurement(null);\r\n\r\n        return;\r\n      }\r\n\r\n      if (measuring) {\r\n        return;\r\n      }\r\n\r\n      measuring = true;\r\n\r\n      hostNode.measureInWindow((x, y, width, height) => {\r\n        if (!active) {\r\n          return;\r\n        }\r\n\r\n        const host = { x, y, width, height };\r\n\r\n        anchorNode.measureInWindow((ax, ay, aw, ah) => {\r\n          measuring = false;\r\n\r\n          if (\r\n            !active ||\r\n            anchorRef.current !== anchorNode ||\r\n            hostRef.current !== hostNode\r\n          ) {\r\n            return;\r\n          }\r\n\r\n          const anchor = { x: ax, y: ay, width: aw, height: ah };\r\n\r\n          setMeasurement((previous) => {\r\n            const sameAnchor = equalRects(previous?.anchor ?? null, anchor);\r\n            const sameHost = equalRects(previous?.host ?? null, host);\r\n\r\n            if (sameAnchor && sameHost) {\r\n              return previous;\r\n            }\r\n\r\n            return {\r\n              anchor,\r\n              host: sameHost && previous ? previous.host : host,\r\n            };\r\n          });\r\n        });\r\n      });\r\n    };\r\n\r\n    measure();\r\n\r\n    const timer = setInterval(measure, AnchorMeasureInterval);\r\n\r\n    return () => {\r\n      active = false;\r\n      clearInterval(timer);\r\n    };\r\n  }, [anchorRef, hostRef, window.width, window.height]);\r\n\r\n  const anchor = measurement?.anchor;\r\n\r\n  const visible = Boolean(\r\n    anchor &&\r\n    anchor.width > 0 &&\r\n    anchor.height > 0 &&\r\n    bounds.width > 0 &&\r\n    bounds.height > 0 &&\r\n    anchor.x + anchor.width > bounds.x &&\r\n    anchor.x < bounds.x + bounds.width &&\r\n    anchor.y + anchor.height > bounds.y &&\r\n    anchor.y < bounds.y + bounds.height,\r\n  );\r\n\r\n  return { measurement, bounds, visible };\r\n}\r\n"],"mappings":"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","names":["anchor"]}

package/dist/types/popover-position.types.d.mts

@@ -0,0 +1,11 @@
+import { PopoverRect } from './popover.types.mjs';
+import 'react';
+import 'react-native';
+import '@impulse-ui-native/primitives';
+
+interface PopoverMeasurement {
+    anchor: PopoverRect;
+    host: PopoverRect;
+}
+
+export type { PopoverMeasurement };

package/dist/types/popover-position.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=popover-position.types.js.map

package/dist/types/popover-position.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/popover-surface.types.d.mts

@@ -0,0 +1,13 @@
+import { SharedValue } from 'react-native-reanimated';
+import { PopoverContentProps } from './popover.types.mjs';
+import 'react';
+import 'react-native';
+import '@impulse-ui-native/primitives';
+
+interface PopoverSurfaceViewProps extends PopoverContentProps {
+    progress: SharedValue<number>;
+    interactive: boolean;
+    onReady: () => void;
+}
+
+export type { PopoverSurfaceViewProps };

package/dist/types/popover-surface.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=popover-surface.types.js.map

package/dist/types/popover-surface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/popover",
-  "version": "15.0.5",
+  "version": "17.0.0",
   "description": "Portal-rendered tooltips and compound anchored popovers for ImpulseUI Native.",
   "keywords": [
     "react-native",
@@ -27,11 +27,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/icon": "15.0.5",
-    "@impulse-ui-native/core": "15.0.5",
-    "@impulse-ui-native/theme": "15.0.5",
-    "@impulse-ui-native/primitives": "15.0.5",
-    "@impulse-ui-native/portal": "15.0.5"
+    "@impulse-ui-native/icon": "17.0.0",
+    "@impulse-ui-native/core": "17.0.0",
+    "@impulse-ui-native/theme": "17.0.0",
+    "@impulse-ui-native/primitives": "17.0.0",
+    "@impulse-ui-native/portal": "17.0.0",
+    "@impulse-ui-native/overlay": "17.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",
@@ -43,12 +44,17 @@
     "react": "19.3.0",
     "react-native": "0.88.0",
     "react-native-safe-area-context": "~5.10.1",
-    "typescript": "~6.0.3"
+    "typescript": "~6.0.3",
+    "react-native-reanimated": "4.7.1",
+    "react-native-worklets": "0.13.0",
+    "react-reconciler": "0.31.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.73",
-    "react-native-safe-area-context": ">=5.0.0"
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-reanimated": ">=4",
+    "react-native-worklets": ">=0.5"
   },
   "publishConfig": {
     "access": "public"
@@ -58,6 +64,7 @@
     "build": "tsup --config tsup.config.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "pnpm exec eslint . --fix",
-    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore"
+    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore",
+    "test": "node --test ../../scripts/popover-motion-tests.mjs"
   }
 }