@impulse-ui-native/flyout 1.0.10 → 2.0.1

package/README.md

@@ -0,0 +1,36 @@
+# @impulse-ui-native/flyout
+
+A token-driven, gesture-enabled sheet that can enter from the top or bottom of the screen.
+
+## Installation
+
+```sh
+pnpm add @impulse-ui-native/flyout
+```
+
+This package uses React Native Gesture Handler, Reanimated, Safe Area Context, and Worklets. Complete their native setup and render the flyout inside both `GestureHandlerRootView` and `SafeAreaProvider`.
+
+## Main exports
+
+- `Flyout` renders the sheet, overlay, drag handle, title, safe-area padding, and lifecycle animations.
+- `FlyoutProps` adds `open`, `placement`, `topOffset`, and `bottomOffset` to the common layer contract.
+
+## Usage
+
+```tsx
+import { Flyout } from "@impulse-ui-native/flyout";
+
+<Flyout
+  id="filters"
+  title="Filters"
+  open={filtersOpen}
+  placement="bottom"
+  onClose={() => setFiltersOpen(false)}
+>
+  <Filters />
+</Flyout>;
+```
+
+The overlay closes the sheet when pressed. A drag past half the measured sheet height, or a sufficiently fast swipe toward the edge, closes it as well.
+
+For app-wide imperative sheets, register flyouts through `@impulse-ui-native/layers` and mount `LayerCenter` once.

package/dist/index.d.mts

@@ -1,10 +1,12 @@
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import { LayerComponentBaseProps } from '@impulse-ui-native/layer-manager-types';
+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>>;

package/dist/index.js

@@ -0,0 +1,343 @@
+// 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
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/package.json

@@ -1,49 +1,59 @@
 {
   "name": "@impulse-ui-native/flyout",
-  "version": "1.0.10",
+  "version": "2.0.1",
   "source": "src/index.ts",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.mts",
   "react-native": "src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/index.d.mts",
       "react-native": "./src/index.ts",
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js"
+      "import": "./dist/index.js"
     }
   },
   "files": [
     "dist",
-    "src",
     "README.md",
     "LICENSE"
   ],
   "dependencies": {
-    "@impulse-ui-native/theme": "1.0.10",
-    "@impulse-ui-native/view": "1.0.10",
-    "@impulse-ui-native/typography": "1.0.10",
-    "@impulse-ui-native/safe-area-view": "1.0.10",
-    "@impulse-ui-native/core": "1.0.10",
-    "@impulse-ui-native/layer-manager-types": "1.0.10"
+    "@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"
+  },
+  "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",
+    "@impulse-ui-native/eslint-config": "1.0.0",
+    "@impulse-ui-native/tsconfig": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-native": ">=0.74",
-    "expo": ">=51 || >=52",
-    "react-native-worklets": ">=0.5.1",
-    "expo-modules-core": ">=1.0.0",
-    "react-native-safe-area-context": "5.6.1",
-    "react-native-gesture-handler": ">=2",
-    "react-native-reanimated": ">=3"
+    "react-native": ">=0.73",
+    "react-native-reanimated": ">=3.6.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-worklets": ">=0.5",
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "prettier": "@impulse-ui-native/prettier-config",
   "scripts": {
     "build": "tsup --config tsup.config.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "lint": "pnpm exec eslint . --fix"
+    "lint": "pnpm exec eslint . --fix",
+    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore"
   }
 }