@impulse-ui-native/flyout 2.0.1 → 2.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ImpulseUI Native contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/flyout-handle.d.mts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface FlyoutHandleProps {
+    placement: "top" | "bottom";
+}
+declare const FlyoutHandle: react.MemoExoticComponent<(props: FlyoutHandleProps) => react_jsx_runtime.JSX.Element>;
+
+export { FlyoutHandle };

package/dist/components/flyout-handle.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { View } from "@impulse-ui-native/primitives";
+import { useThemedStyles } from "@impulse-ui-native/theme";
+const FlyoutHandle = memo(function FlyoutHandle2(props) {
+  const styles = useThemedStyles(themedStyles, props, [props.placement]);
+  return /* @__PURE__ */ jsx(Animated.View, { style: styles.flyoutHandleContainer, children: /* @__PURE__ */ jsx(View, { style: styles.flyoutHandle }) });
+});
+function themedStyles(theme, { placement }) {
+  const handleTokens = theme.components.flyout.handle;
+  return StyleSheet.create({
+    flyoutHandle: {
+      alignSelf: "center",
+      backgroundColor: handleTokens.backgroundColor,
+      width: handleTokens.width,
+      height: handleTokens.height,
+      borderRadius: handleTokens.borderRadius
+    },
+    flyoutHandleContainer: {
+      position: "absolute",
+      top: placement === "bottom" ? -handleTokens.containerHeight : void 0,
+      bottom: placement === "top" ? -handleTokens.containerHeight : void 0,
+      width: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+      height: handleTokens.containerHeight
+    }
+  });
+}
+export {
+  FlyoutHandle
+};
+//# sourceMappingURL=flyout-handle.js.map

package/dist/components/flyout-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/flyout-handle.tsx"],"sourcesContent":["import { memo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated from \"react-native-reanimated\";\r\n\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\ninterface FlyoutHandleProps {\r\n  placement: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutHandle = memo(function FlyoutHandle(\r\n  props: FlyoutHandleProps,\r\n) {\r\n  const styles = useThemedStyles(themedStyles, props, [props.placement]);\r\n\r\n  return (\r\n    <Animated.View style={styles.flyoutHandleContainer}>\r\n      <View style={styles.flyoutHandle} />\r\n    </Animated.View>\r\n  );\r\n});\r\n\r\nfunction themedStyles(\r\n  theme: AppTheme,\r\n  { placement }: { placement: \"top\" | \"bottom\" },\r\n) {\r\n  const handleTokens = theme.components.flyout.handle;\r\n\r\n  return StyleSheet.create({\r\n    flyoutHandle: {\r\n      alignSelf: \"center\",\r\n      backgroundColor: handleTokens.backgroundColor,\r\n      width: handleTokens.width,\r\n      height: handleTokens.height,\r\n      borderRadius: handleTokens.borderRadius,\r\n    },\r\n    flyoutHandleContainer: {\r\n      position: \"absolute\",\r\n      top: placement === \"bottom\" ? -handleTokens.containerHeight : undefined,\r\n      bottom: placement === \"top\" ? -handleTokens.containerHeight : undefined,\r\n      width: \"100%\",\r\n      justifyContent: \"center\",\r\n      alignItems: \"center\",\r\n      height: handleTokens.containerHeight,\r\n    },\r\n  });\r\n}\r\n"],"mappings":"AAkBM;AAlBN,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAErB,SAAS,YAAY;AACrB,SAAmB,uBAAuB;AAMnC,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,SAAS,gBAAgB,cAAc,OAAO,CAAC,MAAM,SAAS,CAAC;AAErE,SACE,oBAAC,SAAS,MAAT,EAAc,OAAO,OAAO,uBAC3B,8BAAC,QAAK,OAAO,OAAO,cAAc,GACpC;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,UAAU,GACZ;AACA,QAAM,eAAe,MAAM,WAAW,OAAO;AAE7C,SAAO,WAAW,OAAO;AAAA,IACvB,cAAc;AAAA,MACZ,WAAW;AAAA,MACX,iBAAiB,aAAa;AAAA,MAC9B,OAAO,aAAa;AAAA,MACpB,QAAQ,aAAa;AAAA,MACrB,cAAc,aAAa;AAAA,IAC7B;AAAA,IACA,uBAAuB;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,cAAc,WAAW,CAAC,aAAa,kBAAkB;AAAA,MAC9D,QAAQ,cAAc,QAAQ,CAAC,aAAa,kBAAkB;AAAA,MAC9D,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ,aAAa;AAAA,IACvB;AAAA,EACF,CAAC;AACH;","names":["FlyoutHandle"]}

package/dist/components/flyout-title.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface FlyoutTitleProps {
+    title?: ReactNode | string;
+}
+declare const FlyoutTitle: react.MemoExoticComponent<(props: FlyoutTitleProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { FlyoutTitle };

package/dist/components/flyout-title.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { Typography, View } from "@impulse-ui-native/primitives";
+import { useThemedStyles } from "@impulse-ui-native/theme";
+const FlyoutTitle = memo(function FlyoutTitle2(props) {
+  const styles = useThemedStyles(themedStyles);
+  const title = useMemo(() => {
+    if (typeof props.title === "string") {
+      return /* @__PURE__ */ jsx(Typography.Title3, { children: props.title });
+    }
+    return props.title;
+  }, [props.title]);
+  if (!props.title) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(View, { style: styles.container, children: title });
+});
+function themedStyles(theme) {
+  const titleTokens = theme.components.flyout.title;
+  return StyleSheet.create({
+    container: {
+      paddingVertical: titleTokens.paddingVertical,
+      paddingHorizontal: titleTokens.paddingHorizontal,
+      alignItems: "center"
+    }
+  });
+}
+export {
+  FlyoutTitle
+};
+//# sourceMappingURL=flyout-title.js.map

package/dist/components/flyout-title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/flyout-title.tsx"],"sourcesContent":["import { memo, ReactNode, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\r\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\ninterface FlyoutTitleProps {\r\n  title?: ReactNode | string;\r\n}\r\n\r\nexport const FlyoutTitle = memo(function FlyoutTitle(props: FlyoutTitleProps) {\r\n  const styles = useThemedStyles(themedStyles);\r\n\r\n  const title = useMemo(() => {\r\n    if (typeof props.title === \"string\") {\r\n      return <Typography.Title3>{props.title}</Typography.Title3>;\r\n    }\r\n\r\n    return props.title;\r\n  }, [props.title]);\r\n\r\n  if (!props.title) {\r\n    return null;\r\n  }\r\n\r\n  return <View style={styles.container}>{title}</View>;\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme) {\r\n  const titleTokens = theme.components.flyout.title;\r\n\r\n  return StyleSheet.create({\r\n    container: {\r\n      paddingVertical: titleTokens.paddingVertical,\r\n      paddingHorizontal: titleTokens.paddingHorizontal,\r\n      alignItems: \"center\",\r\n    },\r\n  });\r\n}\r\n"],"mappings":"AAea;AAfb,SAAS,MAAiB,eAAe;AACzC,SAAS,kBAAkB;AAE3B,SAAS,YAAY,YAAY;AACjC,SAAmB,uBAAuB;AAMnC,MAAM,cAAc,KAAK,SAASA,aAAY,OAAyB;AAC5E,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,OAAO,MAAM,UAAU,UAAU;AACnC,aAAO,oBAAC,WAAW,QAAX,EAAmB,gBAAM,OAAM;AAAA,IACzC;AAEA,WAAO,MAAM;AAAA,EACf,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,MAAI,CAAC,MAAM,OAAO;AAChB,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,QAAK,OAAO,OAAO,WAAY,iBAAM;AAC/C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,cAAc,MAAM,WAAW,OAAO;AAE5C,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,iBAAiB,YAAY;AAAA,MAC7B,mBAAmB,YAAY;AAAA,MAC/B,YAAY;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["FlyoutTitle"]}

package/dist/components/flyout.d.mts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FlyoutProps } from '../types/flyout.types.mjs';
+import '@impulse-ui-native/types';
+
+declare const Flyout: react.MemoExoticComponent<(props: PropsWithChildren<FlyoutProps>) => react_jsx_runtime.JSX.Element | null>;
+
+export { Flyout };

package/dist/components/flyout.js

@@ -0,0 +1,277 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Pressable,
+  StyleSheet,
+  useWindowDimensions
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import {
+  SafeAreaView,
+  useSafeAreaInsets
+} from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import { View } from "@impulse-ui-native/primitives";
+import { useTheme } from "@impulse-ui-native/theme";
+import { FlyoutHandleHeight } from "../constants";
+import { FlyoutHandle } from "./flyout-handle";
+import { FlyoutTitle } from "./flyout-title";
+const EnterAnimationConfig = {
+  damping: 50,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: true
+};
+const ExitAnimationConfig = {
+  duration: 150,
+  easing: Easing.in(Easing.quad)
+};
+const Flyout = memo(function Flyout2(props) {
+  const {
+    id,
+    children,
+    placement = "bottom",
+    layer = 0,
+    title,
+    open,
+    topOffset,
+    bottomOffset,
+    onCloseFinished,
+    onClose,
+    onOpen,
+    onOpenFinished
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const windowDimensions = useWindowDimensions();
+  const flyoutTokens = theme.components.flyout;
+  const placementOffset = placement === "top" ? topOffset : bottomOffset;
+  const screenHeight = windowDimensions.height;
+  const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;
+  const zIndex = flyoutTokens.zIndexBase + layer;
+  const [mounted, setMounted] = useState(open);
+  const [measuredHeight, setMeasuredHeight] = useState(null);
+  const [hasMeasured, setHasMeasured] = useState(false);
+  const [isTouchable, setIsTouchable] = useState(false);
+  const didOpen = useRef(false);
+  const isClosing = useRef(false);
+  const translateY = useSharedValue(
+    placement === "top" ? -screenHeight : screenHeight
+  );
+  const opacity = useSharedValue(0);
+  const onLayout = useCallback(
+    (event) => {
+      if (measuredHeight !== null) {
+        return;
+      }
+      const rawHeight = event.nativeEvent.layout.height;
+      const clampedHeight = rawHeight + insets[placement] + FlyoutHandleHeight;
+      translateY.value = placement === "top" ? -clampedHeight : clampedHeight;
+      setMeasuredHeight(clampedHeight);
+      setHasMeasured(true);
+    },
+    [insets, measuredHeight, placement, translateY]
+  );
+  const animateOut = useCallback(() => {
+    if (measuredHeight === null || isClosing.current) {
+      return;
+    }
+    isClosing.current = true;
+    setIsTouchable(false);
+    onClose?.(id);
+    const target = placement === "top" ? -measuredHeight : measuredHeight;
+    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {
+      if (finished) {
+        if (onCloseFinished) {
+          scheduleOnRN(onCloseFinished, id);
+        }
+        scheduleOnRN(setMounted, false);
+        scheduleOnRN(setMeasuredHeight, null);
+        scheduleOnRN(setHasMeasured, false);
+      }
+    });
+    opacity.value = withTiming(0, ExitAnimationConfig);
+    didOpen.current = false;
+  }, [
+    id,
+    measuredHeight,
+    onClose,
+    onCloseFinished,
+    opacity,
+    placement,
+    translateY
+  ]);
+  const dragGesture = useMemo(
+    () => Gesture.Pan().enabled(hasMeasured).onUpdate((event) => {
+      if (placement === "bottom") {
+        translateY.value = Math.max(0, event.translationY);
+        return;
+      }
+      translateY.value = Math.min(0, event.translationY);
+    }).onEnd((event) => {
+      if (measuredHeight === null) {
+        return;
+      }
+      let shouldClose = false;
+      if (placement === "bottom") {
+        shouldClose = event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;
+      }
+      if (placement === "top") {
+        shouldClose = event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;
+      }
+      if (shouldClose) {
+        scheduleOnRN(animateOut);
+        return;
+      }
+      translateY.value = withSpring(0, EnterAnimationConfig);
+      opacity.value = withSpring(
+        flyoutTokens.overlayVisibleOpacity,
+        EnterAnimationConfig
+      );
+    }),
+    [
+      animateOut,
+      flyoutTokens.overlayVisibleOpacity,
+      hasMeasured,
+      measuredHeight,
+      opacity,
+      placement,
+      translateY
+    ]
+  );
+  const animatedStyle = useAnimatedStyle(() => {
+    const offset = placement === "bottom" ? -(placementOffset ?? 0) : placementOffset ?? 0;
+    return {
+      transform: [{ translateY: translateY.value + offset }],
+      zIndex
+    };
+  });
+  const overlayStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    zIndex,
+    backgroundColor: flyoutTokens.overlayColor
+  }));
+  const edges = useMemo(() => {
+    return [placement, "left", "right"];
+  }, [placement]);
+  const styles = useMemo(() => {
+    return themedStyles(theme, placement, maxHeight);
+  }, [theme, placement, maxHeight]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setMounted(true);
+    setIsTouchable(false);
+    setMeasuredHeight(null);
+    setHasMeasured(false);
+    isClosing.current = false;
+    didOpen.current = false;
+    translateY.value = placement === "top" ? -screenHeight : screenHeight;
+    opacity.value = 0;
+  }, [open, opacity, placement, screenHeight, translateY]);
+  useEffect(() => {
+    if (!open || measuredHeight === null || !hasMeasured || didOpen.current) {
+      return;
+    }
+    setIsTouchable(true);
+    onOpen?.(id);
+    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {
+      if (finished && onOpenFinished) {
+        scheduleOnRN(onOpenFinished, id);
+      }
+    });
+    opacity.value = withSpring(
+      flyoutTokens.overlayVisibleOpacity,
+      EnterAnimationConfig
+    );
+    didOpen.current = true;
+  }, [
+    flyoutTokens.overlayVisibleOpacity,
+    hasMeasured,
+    id,
+    measuredHeight,
+    onOpen,
+    onOpenFinished,
+    opacity,
+    open,
+    translateY
+  ]);
+  useEffect(() => {
+    if (!open && didOpen.current) {
+      animateOut();
+    }
+  }, [animateOut, open]);
+  if (!mounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: isTouchable ? "auto" : "none",
+        style: [StyleSheet.absoluteFill, overlayStyle],
+        children: /* @__PURE__ */ jsx(Pressable, { onPress: animateOut, style: StyleSheet.absoluteFill })
+      }
+    ),
+    /* @__PURE__ */ jsx(GestureDetector, { gesture: dragGesture, children: /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        onLayout,
+        style: [
+          styles.container,
+          !hasMeasured && styles.hidden,
+          animatedStyle
+        ],
+        children: /* @__PURE__ */ jsxs(SafeAreaView, { edges, children: [
+          placement === "bottom" ? /* @__PURE__ */ jsx(FlyoutHandle, { placement }) : null,
+          title ? /* @__PURE__ */ jsx(FlyoutTitle, { title }) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.content, children }),
+          placement === "top" ? /* @__PURE__ */ jsx(FlyoutHandle, { placement }) : null
+        ] })
+      }
+    ) })
+  ] });
+});
+function themedStyles(theme, placement, maxHeight) {
+  const flyoutTokens = theme.components.flyout;
+  return StyleSheet.create({
+    container: {
+      position: "absolute",
+      [placement]: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: flyoutTokens.backgroundColor,
+      borderTopLeftRadius: placement === "bottom" ? flyoutTokens.borderRadius : 0,
+      borderTopRightRadius: placement === "bottom" ? flyoutTokens.borderRadius : 0,
+      borderBottomLeftRadius: placement === "top" ? flyoutTokens.borderRadius : 0,
+      borderBottomRightRadius: placement === "top" ? flyoutTokens.borderRadius : 0
+    },
+    content: {
+      paddingHorizontal: flyoutTokens.contentPaddingHorizontal,
+      maxHeight
+    },
+    hidden: {
+      opacity: flyoutTokens.hiddenOpacity
+    }
+  });
+}
+export {
+  Flyout
+};
+//# sourceMappingURL=flyout.js.map

package/dist/components/flyout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import {\r\n  Fragment,\r\n  memo,\r\n  PropsWithChildren,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport {\r\n  LayoutChangeEvent,\r\n  Pressable,\r\n  StyleSheet,\r\n  useWindowDimensions,\r\n} from \"react-native\";\r\nimport { Gesture, GestureDetector } from \"react-native-gesture-handler\";\r\nimport Animated, {\r\n  Easing,\r\n  useAnimatedStyle,\r\n  useSharedValue,\r\n  withSpring,\r\n  withTiming,\r\n} from \"react-native-reanimated\";\r\nimport {\r\n  Edge,\r\n  SafeAreaView,\r\n  useSafeAreaInsets,\r\n} from \"react-native-safe-area-context\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\r\n\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\n\r\nimport { FlyoutHandleHeight } from \"../constants\";\r\nimport { FlyoutProps } from \"../types\";\r\nimport { FlyoutHandle } from \"./flyout-handle\";\r\nimport { FlyoutTitle } from \"./flyout-title\";\r\n\r\nconst EnterAnimationConfig = {\r\n  damping: 50,\r\n  stiffness: 300,\r\n  mass: 1,\r\n  overshootClamping: true,\r\n};\r\n\r\nconst ExitAnimationConfig = {\r\n  duration: 150,\r\n  easing: Easing.in(Easing.quad),\r\n};\r\n\r\nexport const Flyout = memo(function Flyout(\r\n  props: PropsWithChildren<FlyoutProps>,\r\n) {\r\n  const {\r\n    id,\r\n    children,\r\n    placement = \"bottom\",\r\n    layer = 0,\r\n    title,\r\n    open,\r\n    topOffset,\r\n    bottomOffset,\r\n    onCloseFinished,\r\n    onClose,\r\n    onOpen,\r\n    onOpenFinished,\r\n  } = props;\r\n\r\n  const theme = useTheme();\r\n  const insets = useSafeAreaInsets();\r\n\r\n  const windowDimensions = useWindowDimensions();\r\n\r\n  const flyoutTokens = theme.components.flyout;\r\n\r\n  const placementOffset = placement === \"top\" ? topOffset : bottomOffset;\r\n  const screenHeight = windowDimensions.height;\r\n  const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;\r\n  const zIndex = flyoutTokens.zIndexBase + layer;\r\n\r\n  const [mounted, setMounted] = useState(open);\r\n  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\r\n  const [hasMeasured, setHasMeasured] = useState(false);\r\n  const [isTouchable, setIsTouchable] = useState(false);\r\n\r\n  const didOpen = useRef(false);\r\n  const isClosing = useRef(false);\r\n\r\n  const translateY = useSharedValue(\r\n    placement === \"top\" ? -screenHeight : screenHeight,\r\n  );\r\n  const opacity = useSharedValue(0);\r\n\r\n  const onLayout = useCallback(\r\n    (event: LayoutChangeEvent) => {\r\n      if (measuredHeight !== null) {\r\n        return;\r\n      }\r\n\r\n      const rawHeight = event.nativeEvent.layout.height;\r\n      const clampedHeight = rawHeight + insets[placement] + FlyoutHandleHeight;\r\n\r\n      translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\r\n\r\n      setMeasuredHeight(clampedHeight);\r\n      setHasMeasured(true);\r\n    },\r\n    [insets, measuredHeight, placement, translateY],\r\n  );\r\n\r\n  const animateOut = useCallback(() => {\r\n    if (measuredHeight === null || isClosing.current) {\r\n      return;\r\n    }\r\n\r\n    isClosing.current = true;\r\n    setIsTouchable(false);\r\n    onClose?.(id);\r\n\r\n    const target = placement === \"top\" ? -measuredHeight : measuredHeight;\r\n\r\n    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\r\n      if (finished) {\r\n        if (onCloseFinished) {\r\n          scheduleOnRN(onCloseFinished, id);\r\n        }\r\n\r\n        scheduleOnRN(setMounted, false);\r\n        scheduleOnRN(setMeasuredHeight, null);\r\n        scheduleOnRN(setHasMeasured, false);\r\n      }\r\n    });\r\n\r\n    opacity.value = withTiming(0, ExitAnimationConfig);\r\n    didOpen.current = false;\r\n  }, [\r\n    id,\r\n    measuredHeight,\r\n    onClose,\r\n    onCloseFinished,\r\n    opacity,\r\n    placement,\r\n    translateY,\r\n  ]);\r\n\r\n  const dragGesture = useMemo(\r\n    () =>\r\n      Gesture.Pan()\r\n        .enabled(hasMeasured)\r\n        .onUpdate((event) => {\r\n          if (placement === \"bottom\") {\r\n            translateY.value = Math.max(0, event.translationY);\r\n            return;\r\n          }\r\n\r\n          translateY.value = Math.min(0, event.translationY);\r\n        })\r\n        .onEnd((event) => {\r\n          if (measuredHeight === null) {\r\n            return;\r\n          }\r\n\r\n          let shouldClose = false;\r\n\r\n          if (placement === \"bottom\") {\r\n            shouldClose =\r\n              event.translationY > measuredHeight * 0.5 ||\r\n              event.velocityY > 1500;\r\n          }\r\n\r\n          if (placement === \"top\") {\r\n            shouldClose =\r\n              event.translationY < -measuredHeight * 0.5 ||\r\n              event.velocityY < -1500;\r\n          }\r\n\r\n          if (shouldClose) {\r\n            scheduleOnRN(animateOut);\r\n            return;\r\n          }\r\n\r\n          translateY.value = withSpring(0, EnterAnimationConfig);\r\n          opacity.value = withSpring(\r\n            flyoutTokens.overlayVisibleOpacity,\r\n            EnterAnimationConfig,\r\n          );\r\n        }),\r\n    [\r\n      animateOut,\r\n      flyoutTokens.overlayVisibleOpacity,\r\n      hasMeasured,\r\n      measuredHeight,\r\n      opacity,\r\n      placement,\r\n      translateY,\r\n    ],\r\n  );\r\n\r\n  const animatedStyle = useAnimatedStyle(() => {\r\n    const offset =\r\n      placement === \"bottom\" ? -(placementOffset ?? 0) : (placementOffset ?? 0);\r\n\r\n    return {\r\n      transform: [{ translateY: translateY.value + offset }],\r\n      zIndex,\r\n    };\r\n  });\r\n\r\n  const overlayStyle = useAnimatedStyle(() => ({\r\n    opacity: opacity.value,\r\n    zIndex,\r\n    backgroundColor: flyoutTokens.overlayColor,\r\n  }));\r\n\r\n  const edges = useMemo<Edge[]>(() => {\r\n    return [placement, \"left\", \"right\"];\r\n  }, [placement]);\r\n\r\n  const styles = useMemo(() => {\r\n    return themedStyles(theme, placement, maxHeight);\r\n  }, [theme, placement, maxHeight]);\r\n\r\n  useEffect(() => {\r\n    if (!open) {\r\n      return;\r\n    }\r\n\r\n    setMounted(true);\r\n    setIsTouchable(false);\r\n    setMeasuredHeight(null);\r\n    setHasMeasured(false);\r\n\r\n    isClosing.current = false;\r\n    didOpen.current = false;\r\n\r\n    translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\r\n    opacity.value = 0;\r\n  }, [open, opacity, placement, screenHeight, translateY]);\r\n\r\n  useEffect(() => {\r\n    if (!open || measuredHeight === null || !hasMeasured || didOpen.current) {\r\n      return;\r\n    }\r\n\r\n    setIsTouchable(true);\r\n    onOpen?.(id);\r\n\r\n    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\r\n      if (finished && onOpenFinished) {\r\n        scheduleOnRN(onOpenFinished, id);\r\n      }\r\n    });\r\n\r\n    opacity.value = withSpring(\r\n      flyoutTokens.overlayVisibleOpacity,\r\n      EnterAnimationConfig,\r\n    );\r\n\r\n    didOpen.current = true;\r\n  }, [\r\n    flyoutTokens.overlayVisibleOpacity,\r\n    hasMeasured,\r\n    id,\r\n    measuredHeight,\r\n    onOpen,\r\n    onOpenFinished,\r\n    opacity,\r\n    open,\r\n    translateY,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    if (!open && didOpen.current) {\r\n      animateOut();\r\n    }\r\n  }, [animateOut, open]);\r\n\r\n  if (!mounted) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Fragment>\r\n      <Animated.View\r\n        pointerEvents={isTouchable ? \"auto\" : \"none\"}\r\n        style={[StyleSheet.absoluteFill, overlayStyle]}\r\n      >\r\n        <Pressable onPress={animateOut} style={StyleSheet.absoluteFill} />\r\n      </Animated.View>\r\n\r\n      <GestureDetector gesture={dragGesture}>\r\n        <Animated.View\r\n          onLayout={onLayout}\r\n          style={[\r\n            styles.container,\r\n            !hasMeasured && styles.hidden,\r\n            animatedStyle,\r\n          ]}\r\n        >\r\n          <SafeAreaView edges={edges}>\r\n            {placement === \"bottom\" ? (\r\n              <FlyoutHandle placement={placement} />\r\n            ) : null}\r\n\r\n            {title ? <FlyoutTitle title={title} /> : null}\r\n\r\n            <View style={styles.content}>{children}</View>\r\n\r\n            {placement === \"top\" ? (\r\n              <FlyoutHandle placement={placement} />\r\n            ) : null}\r\n          </SafeAreaView>\r\n        </Animated.View>\r\n      </GestureDetector>\r\n    </Fragment>\r\n  );\r\n});\r\n\r\nfunction themedStyles(\r\n  theme: AppTheme,\r\n  placement: \"top\" | \"bottom\",\r\n  maxHeight: number,\r\n) {\r\n  const flyoutTokens = theme.components.flyout;\r\n\r\n  return StyleSheet.create({\r\n    container: {\r\n      position: \"absolute\",\r\n      [placement]: 0,\r\n      left: 0,\r\n      right: 0,\r\n      backgroundColor: flyoutTokens.backgroundColor,\r\n      borderTopLeftRadius:\r\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\r\n      borderTopRightRadius:\r\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\r\n      borderBottomLeftRadius:\r\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\r\n      borderBottomRightRadius:\r\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\r\n    },\r\n    content: {\r\n      paddingHorizontal: flyoutTokens.contentPaddingHorizontal,\r\n      maxHeight,\r\n    },\r\n    hidden: {\r\n      opacity: flyoutTokens.hiddenOpacity,\r\n    },\r\n  });\r\n}\r\n"],"mappings":"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","names":["Flyout"]}

package/dist/components/index.d.mts

@@ -0,0 +1,5 @@
+export { Flyout } from './flyout.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '../types/flyout.types.mjs';
+import '@impulse-ui-native/types';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+import { Flyout } from "./flyout";
+export {
+  Flyout
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export { Flyout } from \"./flyout\";\r\n"],"mappings":"AAAA,SAAS,cAAc;","names":[]}

package/dist/constants/flyout-handle.constants.d.mts

@@ -0,0 +1,3 @@
+declare const FlyoutHandleHeight = 32;
+
+export { FlyoutHandleHeight };

package/dist/constants/flyout-handle.constants.js

@@ -0,0 +1,5 @@
+const FlyoutHandleHeight = 32;
+export {
+  FlyoutHandleHeight
+};
+//# sourceMappingURL=flyout-handle.constants.js.map

package/dist/constants/flyout-handle.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/flyout-handle.constants.ts"],"sourcesContent":["export const FlyoutHandleHeight = 32;\r\n"],"mappings":"AAAO,MAAM,qBAAqB;","names":[]}

package/dist/constants/index.d.mts

@@ -0,0 +1 @@
+export { FlyoutHandleHeight } from './flyout-handle.constants.mjs';

package/dist/constants/index.js

@@ -0,0 +1,2 @@
+export * from "./flyout-handle.constants";
+//# sourceMappingURL=index.js.map

package/dist/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./flyout-handle.constants\";\r\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/index.d.mts

@@ -1,14 +1,5 @@
-import * as react from 'react';
-import { PropsWithChildren } from 'react';
-import { LayerComponentBaseProps } from '@impulse-ui-native/types';
-
-interface FlyoutProps extends LayerComponentBaseProps {
-    open?: boolean;
-    placement?: "top" | "bottom";
-    topOffset?: number;
-    bottomOffset?: number;
-}
-
-declare const Flyout: react.NamedExoticComponent<PropsWithChildren<FlyoutProps>>;
-
-export { Flyout, type FlyoutProps };
+export { Flyout } from './components/flyout.mjs';
+export { FlyoutProps } from './types/flyout.types.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '@impulse-ui-native/types';

package/dist/index.js

@@ -1,343 +1,3 @@
-// src/components/flyout.tsx
-import {
-  Fragment,
-  memo as memo3,
-  useCallback,
-  useEffect,
-  useMemo as useMemo2,
-  useRef,
-  useState
-} from "react";
-import {
-  Pressable,
-  StyleSheet as StyleSheet3,
-  useWindowDimensions
-} from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated2, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming
-} from "react-native-reanimated";
-import {
-  SafeAreaView,
-  useSafeAreaInsets
-} from "react-native-safe-area-context";
-import { scheduleOnRN } from "react-native-worklets";
-import { View as View3 } from "@impulse-ui-native/primitives";
-import { useTheme } from "@impulse-ui-native/theme";
-
-// src/constants/flyout-handle.constants.ts
-var FlyoutHandleHeight = 32;
-
-// src/components/flyout-handle.tsx
-import { memo } from "react";
-import { StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import { View } from "@impulse-ui-native/primitives";
-import { useThemedStyles } from "@impulse-ui-native/theme";
-import { jsx } from "react/jsx-runtime";
-var FlyoutHandle = memo(function FlyoutHandle2(props) {
-  const styles = useThemedStyles(themedStyles, props, [props.placement]);
-  return /* @__PURE__ */ jsx(Animated.View, { style: styles.flyoutHandleContainer, children: /* @__PURE__ */ jsx(View, { style: styles.flyoutHandle }) });
-});
-function themedStyles(theme, { placement }) {
-  const handleTokens = theme.components.flyout.handle;
-  return StyleSheet.create({
-    flyoutHandle: {
-      alignSelf: "center",
-      backgroundColor: handleTokens.backgroundColor,
-      width: handleTokens.width,
-      height: handleTokens.height,
-      borderRadius: handleTokens.borderRadius
-    },
-    flyoutHandleContainer: {
-      position: "absolute",
-      top: placement === "bottom" ? -handleTokens.containerHeight : void 0,
-      bottom: placement === "top" ? -handleTokens.containerHeight : void 0,
-      width: "100%",
-      justifyContent: "center",
-      alignItems: "center",
-      height: handleTokens.containerHeight
-    }
-  });
-}
-
-// src/components/flyout-title.tsx
-import { memo as memo2, useMemo } from "react";
-import { StyleSheet as StyleSheet2 } from "react-native";
-import { Typography, View as View2 } from "@impulse-ui-native/primitives";
-import { useThemedStyles as useThemedStyles2 } from "@impulse-ui-native/theme";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var FlyoutTitle = memo2(function FlyoutTitle2(props) {
-  const styles = useThemedStyles2(themedStyles2);
-  const title = useMemo(() => {
-    if (typeof props.title === "string") {
-      return /* @__PURE__ */ jsx2(Typography.Title3, { children: props.title });
-    }
-    return props.title;
-  }, [props.title]);
-  if (!props.title) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx2(View2, { style: styles.container, children: title });
-});
-function themedStyles2(theme) {
-  const titleTokens = theme.components.flyout.title;
-  return StyleSheet2.create({
-    container: {
-      paddingVertical: titleTokens.paddingVertical,
-      paddingHorizontal: titleTokens.paddingHorizontal,
-      alignItems: "center"
-    }
-  });
-}
-
-// src/components/flyout.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var EnterAnimationConfig = {
-  damping: 50,
-  stiffness: 300,
-  mass: 1,
-  overshootClamping: true
-};
-var ExitAnimationConfig = {
-  duration: 150,
-  easing: Easing.in(Easing.quad)
-};
-var Flyout = memo3(function Flyout2(props) {
-  const {
-    id,
-    children,
-    placement = "bottom",
-    layer = 0,
-    title,
-    open,
-    topOffset,
-    bottomOffset,
-    onCloseFinished,
-    onClose,
-    onOpen,
-    onOpenFinished
-  } = props;
-  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const windowDimensions = useWindowDimensions();
-  const flyoutTokens = theme.components.flyout;
-  const placementOffset = placement === "top" ? topOffset : bottomOffset;
-  const screenHeight = windowDimensions.height;
-  const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;
-  const zIndex = flyoutTokens.zIndexBase + layer;
-  const [mounted, setMounted] = useState(open);
-  const [measuredHeight, setMeasuredHeight] = useState(null);
-  const [hasMeasured, setHasMeasured] = useState(false);
-  const [isTouchable, setIsTouchable] = useState(false);
-  const didOpen = useRef(false);
-  const isClosing = useRef(false);
-  const translateY = useSharedValue(
-    placement === "top" ? -screenHeight : screenHeight
-  );
-  const opacity = useSharedValue(0);
-  const onLayout = useCallback(
-    (event) => {
-      if (measuredHeight !== null) {
-        return;
-      }
-      const rawHeight = event.nativeEvent.layout.height;
-      const clampedHeight = rawHeight + insets[placement] + FlyoutHandleHeight;
-      translateY.value = placement === "top" ? -clampedHeight : clampedHeight;
-      setMeasuredHeight(clampedHeight);
-      setHasMeasured(true);
-    },
-    [insets, measuredHeight, placement, translateY]
-  );
-  const animateOut = useCallback(() => {
-    if (measuredHeight === null || isClosing.current) {
-      return;
-    }
-    isClosing.current = true;
-    setIsTouchable(false);
-    onClose?.(id);
-    const target = placement === "top" ? -measuredHeight : measuredHeight;
-    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {
-      if (finished) {
-        if (onCloseFinished) {
-          scheduleOnRN(onCloseFinished, id);
-        }
-        scheduleOnRN(setMounted, false);
-        scheduleOnRN(setMeasuredHeight, null);
-        scheduleOnRN(setHasMeasured, false);
-      }
-    });
-    opacity.value = withTiming(0, ExitAnimationConfig);
-    didOpen.current = false;
-  }, [
-    id,
-    measuredHeight,
-    onClose,
-    onCloseFinished,
-    opacity,
-    placement,
-    translateY
-  ]);
-  const dragGesture = useMemo2(
-    () => Gesture.Pan().enabled(hasMeasured).onUpdate((event) => {
-      if (placement === "bottom") {
-        translateY.value = Math.max(0, event.translationY);
-        return;
-      }
-      translateY.value = Math.min(0, event.translationY);
-    }).onEnd((event) => {
-      if (measuredHeight === null) {
-        return;
-      }
-      let shouldClose = false;
-      if (placement === "bottom") {
-        shouldClose = event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;
-      }
-      if (placement === "top") {
-        shouldClose = event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;
-      }
-      if (shouldClose) {
-        scheduleOnRN(animateOut);
-        return;
-      }
-      translateY.value = withSpring(0, EnterAnimationConfig);
-      opacity.value = withSpring(
-        flyoutTokens.overlayVisibleOpacity,
-        EnterAnimationConfig
-      );
-    }),
-    [
-      animateOut,
-      flyoutTokens.overlayVisibleOpacity,
-      hasMeasured,
-      measuredHeight,
-      opacity,
-      placement,
-      translateY
-    ]
-  );
-  const animatedStyle = useAnimatedStyle(() => {
-    const offset = placement === "bottom" ? -(placementOffset ?? 0) : placementOffset ?? 0;
-    return {
-      transform: [{ translateY: translateY.value + offset }],
-      zIndex
-    };
-  });
-  const overlayStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    zIndex,
-    backgroundColor: flyoutTokens.overlayColor
-  }));
-  const edges = useMemo2(() => {
-    return [placement, "left", "right"];
-  }, [placement]);
-  const styles = useMemo2(() => {
-    return themedStyles3(theme, placement, maxHeight);
-  }, [theme, placement, maxHeight]);
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setMounted(true);
-    setIsTouchable(false);
-    setMeasuredHeight(null);
-    setHasMeasured(false);
-    isClosing.current = false;
-    didOpen.current = false;
-    translateY.value = placement === "top" ? -screenHeight : screenHeight;
-    opacity.value = 0;
-  }, [open, opacity, placement, screenHeight, translateY]);
-  useEffect(() => {
-    if (!open || measuredHeight === null || !hasMeasured || didOpen.current) {
-      return;
-    }
-    setIsTouchable(true);
-    onOpen?.(id);
-    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {
-      if (finished && onOpenFinished) {
-        scheduleOnRN(onOpenFinished, id);
-      }
-    });
-    opacity.value = withSpring(
-      flyoutTokens.overlayVisibleOpacity,
-      EnterAnimationConfig
-    );
-    didOpen.current = true;
-  }, [
-    flyoutTokens.overlayVisibleOpacity,
-    hasMeasured,
-    id,
-    measuredHeight,
-    onOpen,
-    onOpenFinished,
-    opacity,
-    open,
-    translateY
-  ]);
-  useEffect(() => {
-    if (!open && didOpen.current) {
-      animateOut();
-    }
-  }, [animateOut, open]);
-  if (!mounted) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
-      Animated2.View,
-      {
-        pointerEvents: isTouchable ? "auto" : "none",
-        style: [StyleSheet3.absoluteFill, overlayStyle],
-        children: /* @__PURE__ */ jsx3(Pressable, { onPress: animateOut, style: StyleSheet3.absoluteFill })
-      }
-    ),
-    /* @__PURE__ */ jsx3(GestureDetector, { gesture: dragGesture, children: /* @__PURE__ */ jsx3(
-      Animated2.View,
-      {
-        onLayout,
-        style: [
-          styles.container,
-          !hasMeasured && styles.hidden,
-          animatedStyle
-        ],
-        children: /* @__PURE__ */ jsxs(SafeAreaView, { edges, children: [
-          placement === "bottom" ? /* @__PURE__ */ jsx3(FlyoutHandle, { placement }) : null,
-          title ? /* @__PURE__ */ jsx3(FlyoutTitle, { title }) : null,
-          /* @__PURE__ */ jsx3(View3, { style: styles.content, children }),
-          placement === "top" ? /* @__PURE__ */ jsx3(FlyoutHandle, { placement }) : null
-        ] })
-      }
-    ) })
-  ] });
-});
-function themedStyles3(theme, placement, maxHeight) {
-  const flyoutTokens = theme.components.flyout;
-  return StyleSheet3.create({
-    container: {
-      position: "absolute",
-      [placement]: 0,
-      left: 0,
-      right: 0,
-      backgroundColor: flyoutTokens.backgroundColor,
-      borderTopLeftRadius: placement === "bottom" ? flyoutTokens.borderRadius : 0,
-      borderTopRightRadius: placement === "bottom" ? flyoutTokens.borderRadius : 0,
-      borderBottomLeftRadius: placement === "top" ? flyoutTokens.borderRadius : 0,
-      borderBottomRightRadius: placement === "top" ? flyoutTokens.borderRadius : 0
-    },
-    content: {
-      paddingHorizontal: flyoutTokens.contentPaddingHorizontal,
-      maxHeight
-    },
-    hidden: {
-      opacity: flyoutTokens.hiddenOpacity
-    }
-  });
-}
-export {
-  Flyout
-};
+export * from "./components";
+export * from "./types";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/flyout.tsx","../src/constants/flyout-handle.constants.ts","../src/components/flyout-handle.tsx","../src/components/flyout-title.tsx"],"sourcesContent":["import {\r\n  Fragment,\r\n  memo,\r\n  PropsWithChildren,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport {\r\n  LayoutChangeEvent,\r\n  Pressable,\r\n  StyleSheet,\r\n  useWindowDimensions,\r\n} from \"react-native\";\r\nimport { Gesture, GestureDetector } from \"react-native-gesture-handler\";\r\nimport Animated, {\r\n  Easing,\r\n  useAnimatedStyle,\r\n  useSharedValue,\r\n  withSpring,\r\n  withTiming,\r\n} from \"react-native-reanimated\";\r\nimport {\r\n  Edge,\r\n  SafeAreaView,\r\n  useSafeAreaInsets,\r\n} from \"react-native-safe-area-context\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\r\n\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\n\r\nimport { FlyoutHandleHeight } from \"../constants\";\r\nimport { FlyoutProps } from \"../types\";\r\nimport { FlyoutHandle } from \"./flyout-handle\";\r\nimport { FlyoutTitle } from \"./flyout-title\";\r\n\r\nconst EnterAnimationConfig = {\r\n  damping: 50,\r\n  stiffness: 300,\r\n  mass: 1,\r\n  overshootClamping: true,\r\n};\r\n\r\nconst ExitAnimationConfig = {\r\n  duration: 150,\r\n  easing: Easing.in(Easing.quad),\r\n};\r\n\r\nexport const Flyout = memo(function Flyout(\r\n  props: PropsWithChildren<FlyoutProps>,\r\n) {\r\n  const {\r\n    id,\r\n    children,\r\n    placement = \"bottom\",\r\n    layer = 0,\r\n    title,\r\n    open,\r\n    topOffset,\r\n    bottomOffset,\r\n    onCloseFinished,\r\n    onClose,\r\n    onOpen,\r\n    onOpenFinished,\r\n  } = props;\r\n\r\n  const theme = useTheme();\r\n  const insets = useSafeAreaInsets();\r\n\r\n  const windowDimensions = useWindowDimensions();\r\n\r\n  const flyoutTokens = theme.components.flyout;\r\n\r\n  const placementOffset = placement === \"top\" ? topOffset : bottomOffset;\r\n  const screenHeight = windowDimensions.height;\r\n  const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;\r\n  const zIndex = flyoutTokens.zIndexBase + layer;\r\n\r\n  const [mounted, setMounted] = useState(open);\r\n  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\r\n  const [hasMeasured, setHasMeasured] = useState(false);\r\n  const [isTouchable, setIsTouchable] = useState(false);\r\n\r\n  const didOpen = useRef(false);\r\n  const isClosing = useRef(false);\r\n\r\n  const translateY = useSharedValue(\r\n    placement === \"top\" ? -screenHeight : screenHeight,\r\n  );\r\n  const opacity = useSharedValue(0);\r\n\r\n  const onLayout = useCallback(\r\n    (event: LayoutChangeEvent) => {\r\n      if (measuredHeight !== null) {\r\n        return;\r\n      }\r\n\r\n      const rawHeight = event.nativeEvent.layout.height;\r\n      const clampedHeight = rawHeight + insets[placement] + FlyoutHandleHeight;\r\n\r\n      translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\r\n\r\n      setMeasuredHeight(clampedHeight);\r\n      setHasMeasured(true);\r\n    },\r\n    [insets, measuredHeight, placement, translateY],\r\n  );\r\n\r\n  const animateOut = useCallback(() => {\r\n    if (measuredHeight === null || isClosing.current) {\r\n      return;\r\n    }\r\n\r\n    isClosing.current = true;\r\n    setIsTouchable(false);\r\n    onClose?.(id);\r\n\r\n    const target = placement === \"top\" ? -measuredHeight : measuredHeight;\r\n\r\n    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\r\n      if (finished) {\r\n        if (onCloseFinished) {\r\n          scheduleOnRN(onCloseFinished, id);\r\n        }\r\n\r\n        scheduleOnRN(setMounted, false);\r\n        scheduleOnRN(setMeasuredHeight, null);\r\n        scheduleOnRN(setHasMeasured, false);\r\n      }\r\n    });\r\n\r\n    opacity.value = withTiming(0, ExitAnimationConfig);\r\n    didOpen.current = false;\r\n  }, [\r\n    id,\r\n    measuredHeight,\r\n    onClose,\r\n    onCloseFinished,\r\n    opacity,\r\n    placement,\r\n    translateY,\r\n  ]);\r\n\r\n  const dragGesture = useMemo(\r\n    () =>\r\n      Gesture.Pan()\r\n        .enabled(hasMeasured)\r\n        .onUpdate((event) => {\r\n          if (placement === \"bottom\") {\r\n            translateY.value = Math.max(0, event.translationY);\r\n            return;\r\n          }\r\n\r\n          translateY.value = Math.min(0, event.translationY);\r\n        })\r\n        .onEnd((event) => {\r\n          if (measuredHeight === null) {\r\n            return;\r\n          }\r\n\r\n          let shouldClose = false;\r\n\r\n          if (placement === \"bottom\") {\r\n            shouldClose =\r\n              event.translationY > measuredHeight * 0.5 ||\r\n              event.velocityY > 1500;\r\n          }\r\n\r\n          if (placement === \"top\") {\r\n            shouldClose =\r\n              event.translationY < -measuredHeight * 0.5 ||\r\n              event.velocityY < -1500;\r\n          }\r\n\r\n          if (shouldClose) {\r\n            scheduleOnRN(animateOut);\r\n            return;\r\n          }\r\n\r\n          translateY.value = withSpring(0, EnterAnimationConfig);\r\n          opacity.value = withSpring(\r\n            flyoutTokens.overlayVisibleOpacity,\r\n            EnterAnimationConfig,\r\n          );\r\n        }),\r\n    [\r\n      animateOut,\r\n      flyoutTokens.overlayVisibleOpacity,\r\n      hasMeasured,\r\n      measuredHeight,\r\n      opacity,\r\n      placement,\r\n      translateY,\r\n    ],\r\n  );\r\n\r\n  const animatedStyle = useAnimatedStyle(() => {\r\n    const offset =\r\n      placement === \"bottom\" ? -(placementOffset ?? 0) : (placementOffset ?? 0);\r\n\r\n    return {\r\n      transform: [{ translateY: translateY.value + offset }],\r\n      zIndex,\r\n    };\r\n  });\r\n\r\n  const overlayStyle = useAnimatedStyle(() => ({\r\n    opacity: opacity.value,\r\n    zIndex,\r\n    backgroundColor: flyoutTokens.overlayColor,\r\n  }));\r\n\r\n  const edges = useMemo<Edge[]>(() => {\r\n    return [placement, \"left\", \"right\"];\r\n  }, [placement]);\r\n\r\n  const styles = useMemo(() => {\r\n    return themedStyles(theme, placement, maxHeight);\r\n  }, [theme, placement, maxHeight]);\r\n\r\n  useEffect(() => {\r\n    if (!open) {\r\n      return;\r\n    }\r\n\r\n    setMounted(true);\r\n    setIsTouchable(false);\r\n    setMeasuredHeight(null);\r\n    setHasMeasured(false);\r\n\r\n    isClosing.current = false;\r\n    didOpen.current = false;\r\n\r\n    translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\r\n    opacity.value = 0;\r\n  }, [open, opacity, placement, screenHeight, translateY]);\r\n\r\n  useEffect(() => {\r\n    if (!open || measuredHeight === null || !hasMeasured || didOpen.current) {\r\n      return;\r\n    }\r\n\r\n    setIsTouchable(true);\r\n    onOpen?.(id);\r\n\r\n    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\r\n      if (finished && onOpenFinished) {\r\n        scheduleOnRN(onOpenFinished, id);\r\n      }\r\n    });\r\n\r\n    opacity.value = withSpring(\r\n      flyoutTokens.overlayVisibleOpacity,\r\n      EnterAnimationConfig,\r\n    );\r\n\r\n    didOpen.current = true;\r\n  }, [\r\n    flyoutTokens.overlayVisibleOpacity,\r\n    hasMeasured,\r\n    id,\r\n    measuredHeight,\r\n    onOpen,\r\n    onOpenFinished,\r\n    opacity,\r\n    open,\r\n    translateY,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    if (!open && didOpen.current) {\r\n      animateOut();\r\n    }\r\n  }, [animateOut, open]);\r\n\r\n  if (!mounted) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Fragment>\r\n      <Animated.View\r\n        pointerEvents={isTouchable ? \"auto\" : \"none\"}\r\n        style={[StyleSheet.absoluteFill, overlayStyle]}\r\n      >\r\n        <Pressable onPress={animateOut} style={StyleSheet.absoluteFill} />\r\n      </Animated.View>\r\n\r\n      <GestureDetector gesture={dragGesture}>\r\n        <Animated.View\r\n          onLayout={onLayout}\r\n          style={[\r\n            styles.container,\r\n            !hasMeasured && styles.hidden,\r\n            animatedStyle,\r\n          ]}\r\n        >\r\n          <SafeAreaView edges={edges}>\r\n            {placement === \"bottom\" ? (\r\n              <FlyoutHandle placement={placement} />\r\n            ) : null}\r\n\r\n            {title ? <FlyoutTitle title={title} /> : null}\r\n\r\n            <View style={styles.content}>{children}</View>\r\n\r\n            {placement === \"top\" ? (\r\n              <FlyoutHandle placement={placement} />\r\n            ) : null}\r\n          </SafeAreaView>\r\n        </Animated.View>\r\n      </GestureDetector>\r\n    </Fragment>\r\n  );\r\n});\r\n\r\nfunction themedStyles(\r\n  theme: AppTheme,\r\n  placement: \"top\" | \"bottom\",\r\n  maxHeight: number,\r\n) {\r\n  const flyoutTokens = theme.components.flyout;\r\n\r\n  return StyleSheet.create({\r\n    container: {\r\n      position: \"absolute\",\r\n      [placement]: 0,\r\n      left: 0,\r\n      right: 0,\r\n      backgroundColor: flyoutTokens.backgroundColor,\r\n      borderTopLeftRadius:\r\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\r\n      borderTopRightRadius:\r\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\r\n      borderBottomLeftRadius:\r\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\r\n      borderBottomRightRadius:\r\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\r\n    },\r\n    content: {\r\n      paddingHorizontal: flyoutTokens.contentPaddingHorizontal,\r\n      maxHeight,\r\n    },\r\n    hidden: {\r\n      opacity: flyoutTokens.hiddenOpacity,\r\n    },\r\n  });\r\n}\r\n","export const FlyoutHandleHeight = 32;\r\n","import { memo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated from \"react-native-reanimated\";\r\n\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\ninterface FlyoutHandleProps {\r\n  placement: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutHandle = memo(function FlyoutHandle(\r\n  props: FlyoutHandleProps,\r\n) {\r\n  const styles = useThemedStyles(themedStyles, props, [props.placement]);\r\n\r\n  return (\r\n    <Animated.View style={styles.flyoutHandleContainer}>\r\n      <View style={styles.flyoutHandle} />\r\n    </Animated.View>\r\n  );\r\n});\r\n\r\nfunction themedStyles(\r\n  theme: AppTheme,\r\n  { placement }: { placement: \"top\" | \"bottom\" },\r\n) {\r\n  const handleTokens = theme.components.flyout.handle;\r\n\r\n  return StyleSheet.create({\r\n    flyoutHandle: {\r\n      alignSelf: \"center\",\r\n      backgroundColor: handleTokens.backgroundColor,\r\n      width: handleTokens.width,\r\n      height: handleTokens.height,\r\n      borderRadius: handleTokens.borderRadius,\r\n    },\r\n    flyoutHandleContainer: {\r\n      position: \"absolute\",\r\n      top: placement === \"bottom\" ? -handleTokens.containerHeight : undefined,\r\n      bottom: placement === \"top\" ? -handleTokens.containerHeight : undefined,\r\n      width: \"100%\",\r\n      justifyContent: \"center\",\r\n      alignItems: \"center\",\r\n      height: handleTokens.containerHeight,\r\n    },\r\n  });\r\n}\r\n","import { memo, ReactNode, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\r\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\ninterface FlyoutTitleProps {\r\n  title?: ReactNode | string;\r\n}\r\n\r\nexport const FlyoutTitle = memo(function FlyoutTitle(props: FlyoutTitleProps) {\r\n  const styles = useThemedStyles(themedStyles);\r\n\r\n  const title = useMemo(() => {\r\n    if (typeof props.title === \"string\") {\r\n      return <Typography.Title3>{props.title}</Typography.Title3>;\r\n    }\r\n\r\n    return props.title;\r\n  }, [props.title]);\r\n\r\n  if (!props.title) {\r\n    return null;\r\n  }\r\n\r\n  return <View style={styles.container}>{title}</View>;\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme) {\r\n  const titleTokens = theme.components.flyout.title;\r\n\r\n  return StyleSheet.create({\r\n    container: {\r\n      paddingVertical: titleTokens.paddingVertical,\r\n      paddingHorizontal: titleTokens.paddingHorizontal,\r\n      alignItems: \"center\",\r\n    },\r\n  });\r\n}\r\n"],"mappings":"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","names":["memo","useMemo","StyleSheet","Animated","View","FlyoutHandle","memo","StyleSheet","View","useThemedStyles","jsx","FlyoutTitle","themedStyles","jsx","memo","Flyout","useMemo","themedStyles","Animated","StyleSheet","View"]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\r\nexport * from \"./types\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/types/flyout.types.d.mts

@@ -0,0 +1,10 @@
+import { LayerComponentBaseProps } from '@impulse-ui-native/types';
+
+interface FlyoutProps extends LayerComponentBaseProps {
+    open?: boolean;
+    placement?: "top" | "bottom";
+    topOffset?: number;
+    bottomOffset?: number;
+}
+
+export type { FlyoutProps };

package/dist/types/flyout.types.js

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

package/dist/types/flyout.types.js.map

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

package/dist/types/index.d.mts

@@ -0,0 +1,2 @@
+export { FlyoutProps } from './flyout.types.mjs';
+import '@impulse-ui-native/types';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export * from "./flyout.types";
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./flyout.types\";\r\n"],"mappings":"AAAA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/flyout",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "source": "src/index.ts",
   "module": "dist/index.js",
   "types": "dist/index.d.mts",
@@ -17,26 +17,27 @@
     "README.md",
     "LICENSE"
   ],
+  "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/core": "2.0.1",
-    "@impulse-ui-native/types": "2.0.1",
-    "@impulse-ui-native/theme": "2.0.1",
-    "@impulse-ui-native/primitives": "2.0.1"
+    "@impulse-ui-native/theme": "2.1.1",
+    "@impulse-ui-native/core": "2.1.1",
+    "@impulse-ui-native/types": "2.1.1",
+    "@impulse-ui-native/primitives": "2.1.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
     "eslint": "^9.38.0",
     "prettier": "^3.6.2",
-    "react": "19.2.0",
-    "react-native": "0.83.6",
-    "react-native-gesture-handler": "~2.30.1",
-    "react-native-reanimated": "4.2.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-worklets": "0.7.4",
-    "typescript": "~5.9.2",
-    "@impulse-ui-native/prettier-config": "1.0.0",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-worklets": "0.10.1",
+    "typescript": "~6.0.3",
     "@impulse-ui-native/eslint-config": "1.0.0",
-    "@impulse-ui-native/tsconfig": "1.0.0"
+    "@impulse-ui-native/tsconfig": "1.0.0",
+    "@impulse-ui-native/prettier-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",