@impulse-ui-native/modal 0.0.0-stage → 7.0.0

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/README.md

@@ -1,3 +1,144 @@
-# Temporary Holding Version
+# @impulse-ui-native/modal
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A compact, themed native dialog with compound presentation parts and an overlay
+lifecycle. Use it locally inside a Portal or register it globally with OverlayHost.
+
+## Installation
+
+```sh
+pnpm add @impulse-ui-native/modal react-native-reanimated react-native-safe-area-context react-native-worklets
+```
+
+Complete the native setup for Reanimated and Worklets, and wrap the application
+in ThemeProvider and SafeAreaProvider. Local portal usage additionally requires
+@impulse-ui-native/portal with PortalProvider and PortalsHost. Global usage requires
+@impulse-ui-native/overlay with OverlayProvider and OverlayHost. The toolkit exports Modal.
+
+## Local composition
+
+Keep Portal mounted and control open from the nearby trigger:
+
+```tsx
+import { Modal } from "@impulse-ui-native/modal";
+import { Portal } from "@impulse-ui-native/portal";
+import { Button } from "@impulse-ui-native/primitives";
+
+<>
+  <Button onPress={() => setOpen(true)}>Project details</Button>
+  <Portal>
+    <Modal
+      id="project-details"
+      open={open}
+      title="Project details"
+      onClose={() => setOpen(false)}
+      footer={<Button onPress={() => setOpen(false)}>Done</Button>}
+    >
+      <Modal.Description>Review the project details.</Modal.Description>
+    </Modal>
+  </Portal>
+</>;
+```
+
+Modal composes Provider, Root, Header, Close, Content, and Footer, with an X close button in the
+header by default, using the neutral text.tertiary color to match the Popover close icon. Set hideClose to omit it. A truthy header replaces the
+generated title beside the close button; a truthy footer renders the footer. Root supplies the
+centered surface, safe-area padding, backdrop, Android back dismissal, and animations.
+Provider owns the lifecycle and shares state with Root and Close. Root renders the container. Neither installs a Portal; put Provider inside the local Portal so its context reaches the dialog without bridging.
+
+## Compound composition
+
+```tsx
+<Portal>
+  <Modal.Provider
+    id="project-details"
+    open={open}
+    onClose={() => setOpen(false)}
+  >
+    <Modal.Root size="medium">
+      <Modal.Header>
+        <Modal.Title>Project details</Modal.Title>
+        <Modal.Close marginLeft="auto">
+          <Icon icon={XIcon} size="small" color={colors.text.tertiary} />
+        </Modal.Close>
+      </Modal.Header>
+      <Modal.Content>
+        <Modal.Description>Review the project details.</Modal.Description>
+      </Modal.Content>
+      <Modal.Footer>
+        <Modal.Close>
+          <Typography.Label>Done</Typography.Label>
+        </Modal.Close>
+      </Modal.Footer>
+    </Modal.Root>
+  </Modal.Provider>
+</Portal>
+```
+
+Header, Content, Footer, Title, and Description render supplied children and use
+independent theme styling. They accept the corresponding View or Text primitive
+props. Content is a regular View with no built-in scrolling. Keep dialog content short.
+Root's View props and style customize the surface.
+
+Modal.Close renders supplied children and dismisses through Provider's context.
+It accepts Pressable props, including disabled and loading, and preserves the
+consumer onPress callback. Closing or closed dialogs block Close interaction.
+It does not generate an icon or impose minimum dimensions.
+
+Import Icon from @impulse-ui-native/icon, XIcon from @impulse-ui-native/icon/icons/x,
+and Typography from @impulse-ui-native/primitives. Use useColors from
+@impulse-ui-native/theme to obtain colors.
+
+Custom composable actions can read close, status, and interactive through
+useModalContext inside Modal.Provider. No children callback is needed.
+
+## Global OverlayHost usage
+
+Register Modal directly with the store provided to OverlayProvider:
+
+```tsx
+const detailsModal = store.register({
+  id: "project-details",
+  unique: true,
+  Component: Modal,
+  Content: ProjectDetails,
+  title: "Project details",
+  onClose: (id) => store.close(id),
+});
+
+detailsModal.open();
+detailsModal.close();
+```
+
+OverlayHost supplies id, open, layer, title, and lifecycle callbacks. It removes
+the entry after onCloseFinished. Do not wrap each registered modal in another
+Portal; mount OverlayHost at the application overlay level.
+
+## Lifecycle
+
+Provider accepts lifecycle props and layer from OverlayComponentProps. The
+convenience Modal accepts the full contract and uses title to generate its header. id is required, open defaults to
+false, and layer defaults to zero.
+
+Opening calls onOpen(id), then onOpenFinished(id) after entry. Header X presses, backdrop presses,
+Android back presses, and changing open to false begin dismissal and call
+onClose(id). The modal stays mounted for the exit animation, then calls
+onCloseFinished(id). For local usage, update open in onClose and keep Provider and Root mounted
+through the exit. Reopening during exit cancels the stale closing completion.
+
+The backdrop accepts presses without pressed-state visual feedback. The fade
+and scale animations use Reanimated. Animations are canceled when Provider unmounts.
+
+## Tokens and sizes
+
+Maximum widths are 320, 440, and 640 for small, medium, and large; medium is the
+default. Available width accounts for safe-area insets and themed viewport padding.
+Root uses the elevated surface, subtle border, 16-point radius, and 16-point inner
+padding. Header is horizontal; Footer aligns trailing actions and wraps.
+
+Customize through primitive style props, native style, or ThemeProvider's
+components.modal tokens. Overlay tokens control backdrop color and opacity,
+base z-index, viewport padding, and the closed animation scale. Content does not
+scroll, and keyboard avoidance is not built in.
+
+Provider uses the shared useOverlayLifecycle hook from the overlay package. Observe
+local status with onStatusChange(id, status), or hosted status with useOverlayStatus(id).

package/dist/components/close.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalCloseProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalClose: react.MemoExoticComponent<({ disabled, loading, style, onPress, ...props }: ModalCloseProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalClose };

package/dist/components/close.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { StyleSheet } from "react-native";
+import { useEventCallback } from "@impulse-ui-native/core";
+import { Pressable } from "@impulse-ui-native/primitives";
+import { useModalContext } from "../hooks/use-modal-context.hook";
+const ModalClose = memo(function ModalClose2({
+  disabled,
+  loading,
+  style,
+  onPress,
+  ...props
+}) {
+  const { close, interactive } = useModalContext();
+  const blocked = disabled === true || loading === true || !interactive;
+  const closeStyle = useCallback(
+    (state) => [
+      styles.close,
+      typeof style === "function" ? style(state) : style
+    ],
+    [styles.close, style]
+  );
+  const handlePress = useEventCallback((event) => {
+    if (blocked) {
+      return;
+    }
+    close();
+    onPress?.(event);
+  });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...props,
+      disabled: blocked,
+      style: closeStyle,
+      onPress: handlePress
+    }
+  );
+});
+const styles = StyleSheet.create({
+  close: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  ModalClose
+};
+//# sourceMappingURL=close.js.map

package/dist/components/close.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/close.tsx"],"sourcesContent":["import type {\n  GestureResponderEvent,\n  PressableStateCallbackType,\n} from \"react-native\";\nimport { memo, useCallback } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Pressable } from \"@impulse-ui-native/primitives\";\n\nimport type { ModalCloseProps } from \"../types\";\nimport { useModalContext } from \"../hooks/use-modal-context.hook\";\n\nexport const ModalClose = memo(function ModalClose({\n  disabled,\n  loading,\n  style,\n  onPress,\n  ...props\n}: ModalCloseProps) {\n  const { close, interactive } = useModalContext();\n  const blocked = disabled === true || loading === true || !interactive;\n\n  const closeStyle = useCallback(\n    (state: PressableStateCallbackType) => [\n      styles.close,\n      typeof style === \"function\" ? style(state) : style,\n    ],\n    [styles.close, style],\n  );\n\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (blocked) {\n      return;\n    }\n\n    close();\n    onPress?.(event);\n  });\n\n  return (\n    <Pressable\n      {...props}\n      disabled={blocked}\n      style={closeStyle}\n      onPress={handlePress}\n    />\n  );\n});\n\nconst styles = StyleSheet.create({\n  close: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n"],"mappings":"AAyCI;AArCJ,SAAS,MAAM,mBAAmB;AAClC,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAG1B,SAAS,uBAAuB;AAEzB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,EAAE,OAAO,YAAY,IAAI,gBAAgB;AAC/C,QAAM,UAAU,aAAa,QAAQ,YAAY,QAAQ,CAAC;AAE1D,QAAM,aAAa;AAAA,IACjB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,UAAM;AACN,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;","names":["ModalClose"]}

package/dist/components/content.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalContentProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalContent: react.MemoExoticComponent<({ style, ...props }: ModalContentProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalContent };

package/dist/components/content.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { View } from "@impulse-ui-native/primitives";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+const ModalContent = memo(function ModalContent2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const partStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: partStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.modal;
+  return StyleSheet.create({
+    part: {
+      gap: tokens.gap
+    }
+  });
+}
+export {
+  ModalContent
+};
+//# sourceMappingURL=content.js.map

package/dist/components/content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/content.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalContentProps } from \"../types\";\n\nexport const ModalContent = memo(function ModalContent({\n  style,\n  ...props\n}: ModalContentProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n\n  const partStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n\n  return <View {...props} style={partStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.modal;\n\n  return StyleSheet.create({\n    part: {\n      gap: tokens.gap,\n    },\n  });\n}\n"],"mappings":"AAqBS;AArBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAIxC,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,KAAK,OAAO;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["ModalContent"]}

package/dist/components/description.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalDescriptionProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalDescription: react.MemoExoticComponent<(props: ModalDescriptionProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalDescription };

package/dist/components/description.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Typography } from "@impulse-ui-native/primitives";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+const ModalDescription = memo(function ModalDescription2(props) {
+  const tokens = useComponentsTokens().modal;
+  return /* @__PURE__ */ jsx(
+    Typography.BodySmall,
+    {
+      color: tokens.descriptionColor,
+      fontSize: tokens.descriptionFontSize,
+      lineHeight: tokens.descriptionLineHeight,
+      ...props
+    }
+  );
+});
+export {
+  ModalDescription
+};
+//# sourceMappingURL=description.js.map

package/dist/components/description.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/description.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ModalDescriptionProps } from \"../types\";\n\nexport const ModalDescription = memo(function ModalDescription(\n  props: ModalDescriptionProps,\n) {\n  const tokens = useComponentsTokens().modal;\n\n  return (\n    <Typography.BodySmall\n      color={tokens.descriptionColor}\n      fontSize={tokens.descriptionFontSize}\n      lineHeight={tokens.descriptionLineHeight}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAaI;AAbJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAI7B,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,OACA;AACA,QAAM,SAAS,oBAAoB,EAAE;AAErC,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,YAAY,OAAO;AAAA,MAClB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["ModalDescription"]}

package/dist/components/footer.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalFooterProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalFooter: react.MemoExoticComponent<({ style, ...props }: ModalFooterProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalFooter };

package/dist/components/footer.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { View } from "@impulse-ui-native/primitives";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+const ModalFooter = memo(function ModalFooter2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const partStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: partStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.modal;
+  return StyleSheet.create({
+    part: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      flexWrap: "wrap",
+      gap: tokens.footerGap
+    }
+  });
+}
+export {
+  ModalFooter
+};
+//# sourceMappingURL=footer.js.map

package/dist/components/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/footer.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalFooterProps } from \"../types\";\n\nexport const ModalFooter = memo(function ModalFooter({\n  style,\n  ...props\n}: ModalFooterProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n\n  const partStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n\n  return <View {...props} style={partStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.modal;\n\n  return StyleSheet.create({\n    part: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n      flexWrap: \"wrap\",\n      gap: tokens.footerGap,\n    },\n  });\n}\n"],"mappings":"AAqBS;AArBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAIxC,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,KAAK,OAAO;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["ModalFooter"]}

package/dist/components/header.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalHeaderProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalHeader: react.MemoExoticComponent<({ style, ...props }: ModalHeaderProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalHeader };

package/dist/components/header.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { View } from "@impulse-ui-native/primitives";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+const ModalHeader = memo(function ModalHeader2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const partStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: partStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.modal;
+  return StyleSheet.create({
+    part: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: tokens.headerGap
+    }
+  });
+}
+export {
+  ModalHeader
+};
+//# sourceMappingURL=header.js.map

package/dist/components/header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/header.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalHeaderProps } from \"../types\";\n\nexport const ModalHeader = memo(function ModalHeader({\n  style,\n  ...props\n}: ModalHeaderProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n\n  const partStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n\n  return <View {...props} style={partStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.modal;\n\n  return StyleSheet.create({\n    part: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: tokens.headerGap,\n    },\n  });\n}\n"],"mappings":"AAqBS;AArBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAIxC,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK,OAAO;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["ModalHeader"]}

package/dist/components/index.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ModalProps, ModalProviderProps, ModalRootProps, ModalHeaderProps, ModalCloseProps, ModalContentProps, ModalFooterProps, ModalTitleProps, ModalDescriptionProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const Modal: react.NamedExoticComponent<ModalProps> & {
+    readonly type: ({ id, open, layer, onOpen, onOpenFinished, onStatusChange, onClose, onCloseFinished, header, title, footer, hideClose, children, ...props }: ModalProps) => react_jsx_runtime.JSX.Element;
+} & {
+    Provider: react.MemoExoticComponent<({ children, layer, ...props }: ModalProviderProps) => react_jsx_runtime.JSX.Element>;
+    Root: react.MemoExoticComponent<({ children, ...props }: ModalRootProps) => react_jsx_runtime.JSX.Element | null>;
+    Header: react.MemoExoticComponent<({ style, ...props }: ModalHeaderProps) => react_jsx_runtime.JSX.Element>;
+    Close: react.MemoExoticComponent<({ disabled, loading, style, onPress, ...props }: ModalCloseProps) => react_jsx_runtime.JSX.Element>;
+    Content: react.MemoExoticComponent<({ style, ...props }: ModalContentProps) => react_jsx_runtime.JSX.Element>;
+    Footer: react.MemoExoticComponent<({ style, ...props }: ModalFooterProps) => react_jsx_runtime.JSX.Element>;
+    Title: react.MemoExoticComponent<(props: ModalTitleProps) => react_jsx_runtime.JSX.Element>;
+    Description: react.MemoExoticComponent<(props: ModalDescriptionProps) => react_jsx_runtime.JSX.Element>;
+};
+
+export { Modal };

package/dist/components/index.js

@@ -0,0 +1,23 @@
+import { ModalClose } from "./close";
+import { ModalContent } from "./content";
+import { ModalDescription } from "./description";
+import { ModalFooter } from "./footer";
+import { ModalHeader } from "./header";
+import { ModalComponent } from "./modal";
+import { ModalProvider } from "./provider";
+import { ModalRoot } from "./root";
+import { ModalTitle } from "./title";
+const Modal = Object.assign(ModalComponent, {
+  Provider: ModalProvider,
+  Root: ModalRoot,
+  Header: ModalHeader,
+  Close: ModalClose,
+  Content: ModalContent,
+  Footer: ModalFooter,
+  Title: ModalTitle,
+  Description: ModalDescription
+});
+export {
+  Modal
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["import { ModalClose } from \"./close\";\nimport { ModalContent } from \"./content\";\nimport { ModalDescription } from \"./description\";\nimport { ModalFooter } from \"./footer\";\nimport { ModalHeader } from \"./header\";\nimport { ModalComponent } from \"./modal\";\nimport { ModalProvider } from \"./provider\";\nimport { ModalRoot } from \"./root\";\nimport { ModalTitle } from \"./title\";\n\nexport const Modal = Object.assign(ModalComponent, {\n  Provider: ModalProvider,\n  Root: ModalRoot,\n  Header: ModalHeader,\n  Close: ModalClose,\n  Content: ModalContent,\n  Footer: ModalFooter,\n  Title: ModalTitle,\n  Description: ModalDescription,\n});\n"],"mappings":"AAAA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,QAAQ,OAAO,OAAO,gBAAgB;AAAA,EACjD,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,CAAC;","names":[]}

package/dist/components/modal.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalComponent: react.MemoExoticComponent<({ id, open, layer, onOpen, onOpenFinished, onStatusChange, onClose, onCloseFinished, header, title, footer, hideClose, children, ...props }: ModalProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalComponent };

package/dist/components/modal.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Icon } from "@impulse-ui-native/icon";
+import { XIcon } from "@impulse-ui-native/icon/icons/x";
+import { useColors } from "@impulse-ui-native/theme";
+import { ModalClose } from "./close";
+import { ModalContent } from "./content";
+import { ModalFooter } from "./footer";
+import { ModalHeader } from "./header";
+import { ModalProvider } from "./provider";
+import { ModalRoot } from "./root";
+import { ModalTitle } from "./title";
+const ModalComponent = memo(function Modal({
+  id,
+  open,
+  layer,
+  onOpen,
+  onOpenFinished,
+  onStatusChange,
+  onClose,
+  onCloseFinished,
+  header,
+  title,
+  footer,
+  hideClose = false,
+  children,
+  ...props
+}) {
+  const colors = useColors();
+  return /* @__PURE__ */ jsx(
+    ModalProvider,
+    {
+      id,
+      open,
+      layer,
+      onOpen,
+      onOpenFinished,
+      onStatusChange,
+      onClose,
+      onCloseFinished,
+      children: /* @__PURE__ */ jsxs(ModalRoot, { ...props, children: [
+        header || title || !hideClose ? /* @__PURE__ */ jsxs(ModalHeader, { children: [
+          header,
+          !header && title ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null,
+          !hideClose ? /* @__PURE__ */ jsx(ModalClose, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Icon, { icon: XIcon, size: "small", color: colors.text.tertiary }) }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(ModalContent, { children }),
+        footer ? /* @__PURE__ */ jsx(ModalFooter, { children: footer }) : null
+      ] })
+    }
+  );
+});
+export {
+  ModalComponent
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XIcon } from \"@impulse-ui-native/icon/icons/x\";\nimport { useColors } from \"@impulse-ui-native/theme\";\n\nimport type { ModalProps } from \"../types\";\nimport { ModalClose } from \"./close\";\nimport { ModalContent } from \"./content\";\nimport { ModalFooter } from \"./footer\";\nimport { ModalHeader } from \"./header\";\nimport { ModalProvider } from \"./provider\";\nimport { ModalRoot } from \"./root\";\nimport { ModalTitle } from \"./title\";\n\nexport const ModalComponent = memo(function Modal({\n  id,\n  open,\n  layer,\n  onOpen,\n  onOpenFinished,\n  onStatusChange,\n  onClose,\n  onCloseFinished,\n  header,\n  title,\n  footer,\n  hideClose = false,\n  children,\n  ...props\n}: ModalProps) {\n  const colors = useColors();\n\n  return (\n    <ModalProvider\n      id={id}\n      open={open}\n      layer={layer}\n      onOpen={onOpen}\n      onOpenFinished={onOpenFinished}\n      onStatusChange={onStatusChange}\n      onClose={onClose}\n      onCloseFinished={onCloseFinished}\n    >\n      <ModalRoot {...props}>\n        {header || title || !hideClose ? (\n          <ModalHeader>\n            {header}\n            {!header && title ? <ModalTitle>{title}</ModalTitle> : null}\n            {!hideClose ? (\n              <ModalClose marginLeft=\"auto\">\n                <Icon icon={XIcon} size=\"small\" color={colors.text.tertiary} />\n              </ModalClose>\n            ) : null}\n          </ModalHeader>\n        ) : null}\n        <ModalContent>{children}</ModalContent>\n        {footer ? <ModalFooter>{footer}</ModalFooter> : null}\n      </ModalRoot>\n    </ModalProvider>\n  );\n});\n"],"mappings":"AA8CU,SAEsB,KAFtB;AA9CV,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAG1B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,iBAAiB,KAAK,SAAS,MAAM;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,SAAS,UAAU;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,aAAW,GAAG,OACZ;AAAA,kBAAU,SAAS,CAAC,YACnB,qBAAC,eACE;AAAA;AAAA,UACA,CAAC,UAAU,QAAQ,oBAAC,cAAY,iBAAM,IAAgB;AAAA,UACtD,CAAC,YACA,oBAAC,cAAW,YAAW,QACrB,8BAAC,QAAK,MAAM,OAAO,MAAK,SAAQ,OAAO,OAAO,KAAK,UAAU,GAC/D,IACE;AAAA,WACN,IACE;AAAA,QACJ,oBAAC,gBAAc,UAAS;AAAA,QACvB,SAAS,oBAAC,eAAa,kBAAO,IAAiB;AAAA,SAClD;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}

package/dist/components/provider.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalProviderProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalProvider: react.MemoExoticComponent<({ children, layer, ...props }: ModalProviderProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalProvider };

package/dist/components/provider.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { ModalContext } from "../contexts/modal.context";
+import { useModalLifecycle } from "../hooks/use-modal-lifecycle.hook";
+const ModalProvider = memo(function ModalProvider2({
+  children,
+  layer = 0,
+  ...props
+}) {
+  const lifecycle = useModalLifecycle(props);
+  const context = useMemo(() => ({ ...lifecycle, layer }), [lifecycle, layer]);
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: context, children });
+});
+export {
+  ModalProvider
+};
+//# sourceMappingURL=provider.js.map

package/dist/components/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/provider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport type { ModalProviderProps } from \"../types\";\nimport { ModalContext } from \"../contexts/modal.context\";\nimport { useModalLifecycle } from \"../hooks/use-modal-lifecycle.hook\";\n\nexport const ModalProvider = memo(function ModalProvider({\n  children,\n  layer = 0,\n  ...props\n}: ModalProviderProps) {\n  const lifecycle = useModalLifecycle(props);\n\n  const context = useMemo(() => ({ ...lifecycle, layer }), [lifecycle, layer]);\n\n  return (\n    <ModalContext.Provider value={context}>{children}</ModalContext.Provider>\n  );\n});\n"],"mappings":"AAgBI;AAhBJ,SAAS,MAAM,eAAe;AAG9B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAuB;AACrB,QAAM,YAAY,kBAAkB,KAAK;AAEzC,QAAM,UAAU,QAAQ,OAAO,EAAE,GAAG,WAAW,MAAM,IAAI,CAAC,WAAW,KAAK,CAAC;AAE3E,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,SAAU,UAAS;AAErD,CAAC;","names":["ModalProvider"]}

package/dist/components/root.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalRootProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalRoot: react.MemoExoticComponent<({ children, ...props }: ModalRootProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { ModalRoot };

package/dist/components/root.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo } from "react";
+import { BackHandler, Pressable, StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useComponentsTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useModalContext } from "../hooks/use-modal-context.hook";
+import { ModalSurface } from "./surface";
+const ModalRoot = memo(function ModalRoot2({
+  children,
+  ...props
+}) {
+  const { mounted, interactive, progress, close, layer } = useModalContext();
+  const insets = useSafeAreaInsets();
+  const tokens = useComponentsTokens().modal;
+  const styles = useThemedStyles(themedStyles, { insets, layer }, [
+    insets,
+    layer
+  ]);
+  const overlayStyle = useAnimatedStyle(() => ({ opacity: progress.value }));
+  const surfaceStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value }
+    ]
+  }));
+  const containerStyle = useMemo(
+    () => [styles.container, overlayStyle],
+    [styles.container, overlayStyle]
+  );
+  const surfaceContainerStyle = useMemo(
+    () => [styles.surfaceContainer, surfaceStyle],
+    [styles.surfaceContainer, surfaceStyle]
+  );
+  useEffect(() => {
+    if (!mounted) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => {
+        close();
+        return true;
+      }
+    );
+    return () => subscription.remove();
+  }, [mounted, close]);
+  return mounted ? /* @__PURE__ */ jsxs(Animated.View, { style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: styles.backdrop,
+        onPress: close,
+        disabled: !interactive
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: surfaceContainerStyle,
+        pointerEvents: interactive ? "box-none" : "none",
+        children: /* @__PURE__ */ jsx(ModalSurface, { ...props, children })
+      }
+    )
+  ] }) : null;
+});
+function themedStyles(theme, {
+  insets,
+  layer
+}) {
+  const tokens = theme.components.modal;
+  return StyleSheet.create({
+    container: {
+      ...StyleSheet.absoluteFill,
+      zIndex: tokens.zIndexBase + layer,
+      alignItems: "center",
+      justifyContent: "center",
+      paddingTop: insets.top + tokens.viewportPadding,
+      paddingRight: insets.right + tokens.viewportPadding,
+      paddingBottom: insets.bottom + tokens.viewportPadding,
+      paddingLeft: insets.left + tokens.viewportPadding
+    },
+    backdrop: {
+      ...StyleSheet.absoluteFill,
+      backgroundColor: tokens.overlayColor,
+      opacity: tokens.overlayVisibleOpacity
+    },
+    surfaceContainer: {
+      width: "100%",
+      alignItems: "center"
+    }
+  });
+}
+export {
+  ModalRoot
+};
+//# sourceMappingURL=root.js.map

package/dist/components/root.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useEffect, useMemo } from \"react\";\nimport { BackHandler, Pressable, StyleSheet } from \"react-native\";\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalRootProps } from \"../types\";\nimport { useModalContext } from \"../hooks/use-modal-context.hook\";\nimport { ModalSurface } from \"./surface\";\n\nexport const ModalRoot = memo(function ModalRoot({\n  children,\n  ...props\n}: ModalRootProps) {\n  const { mounted, interactive, progress, close, layer } = useModalContext();\n  const insets = useSafeAreaInsets();\n  const tokens = useComponentsTokens().modal;\n  const styles = useThemedStyles(themedStyles, { insets, layer }, [\n    insets,\n    layer,\n  ]);\n\n  const overlayStyle = useAnimatedStyle(() => ({ opacity: progress.value }));\n  const surfaceStyle = useAnimatedStyle(() => ({\n    transform: [\n      { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value },\n    ],\n  }));\n\n  const containerStyle = useMemo(\n    () => [styles.container, overlayStyle],\n    [styles.container, overlayStyle],\n  );\n  const surfaceContainerStyle = useMemo(\n    () => [styles.surfaceContainer, surfaceStyle],\n    [styles.surfaceContainer, surfaceStyle],\n  );\n\n  useEffect(() => {\n    if (!mounted) {\n      return;\n    }\n\n    const subscription = BackHandler.addEventListener(\n      \"hardwareBackPress\",\n      () => {\n        close();\n\n        return true;\n      },\n    );\n\n    return () => subscription.remove();\n  }, [mounted, close]);\n\n  return mounted ? (\n    <Animated.View style={containerStyle}>\n      <Pressable\n        style={styles.backdrop}\n        onPress={close}\n        disabled={!interactive}\n      />\n      <Animated.View\n        style={surfaceContainerStyle}\n        pointerEvents={interactive ? \"box-none\" : \"none\"}\n      >\n        <ModalSurface {...props}>{children}</ModalSurface>\n      </Animated.View>\n    </Animated.View>\n  ) : null;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    insets,\n    layer,\n  }: {\n    insets: { top: number; right: number; bottom: number; left: number };\n    layer: number;\n  },\n) {\n  const tokens = theme.components.modal;\n\n  return StyleSheet.create({\n    container: {\n      ...StyleSheet.absoluteFill,\n      zIndex: tokens.zIndexBase + layer,\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      paddingTop: insets.top + tokens.viewportPadding,\n      paddingRight: insets.right + tokens.viewportPadding,\n      paddingBottom: insets.bottom + tokens.viewportPadding,\n      paddingLeft: insets.left + tokens.viewportPadding,\n    },\n    backdrop: {\n      ...StyleSheet.absoluteFill,\n      backgroundColor: tokens.overlayColor,\n      opacity: tokens.overlayVisibleOpacity,\n    },\n    surfaceContainer: {\n      width: \"100%\",\n      alignItems: \"center\",\n    },\n  });\n}\n"],"mappings":"AA0DI,SACE,KADF;AA1DJ,SAAS,MAAM,WAAW,eAAe;AACzC,SAAS,aAAa,WAAW,kBAAkB;AACnD,OAAO,YAAY,wBAAwB;AAC3C,SAAS,yBAAyB;AAGlC,SAAS,qBAAqB,uBAAuB;AAGrD,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,EAAE,SAAS,aAAa,UAAU,OAAO,MAAM,IAAI,gBAAgB;AACzE,QAAM,SAAS,kBAAkB;AACjC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,SAAS,gBAAgB,cAAc,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC9D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,iBAAiB,OAAO,EAAE,SAAS,SAAS,MAAM,EAAE;AACzE,QAAM,eAAe,iBAAiB,OAAO;AAAA,IAC3C,WAAW;AAAA,MACT,EAAE,OAAO,OAAO,eAAe,IAAI,OAAO,eAAe,SAAS,MAAM;AAAA,IAC1E;AAAA,EACF,EAAE;AAEF,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,YAAY;AAAA,IACrC,CAAC,OAAO,WAAW,YAAY;AAAA,EACjC;AACA,QAAM,wBAAwB;AAAA,IAC5B,MAAM,CAAC,OAAO,kBAAkB,YAAY;AAAA,IAC5C,CAAC,OAAO,kBAAkB,YAAY;AAAA,EACxC;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,eAAe,YAAY;AAAA,MAC/B;AAAA,MACA,MAAM;AACJ,cAAM;AAEN,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO,MAAM,aAAa,OAAO;AAAA,EACnC,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,SAAO,UACL,qBAAC,SAAS,MAAT,EAAc,OAAO,gBACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,SAAS;AAAA,QACT,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC,OAAO;AAAA,QACP,eAAe,cAAc,aAAa;AAAA,QAE1C,8BAAC,gBAAc,GAAG,OAAQ,UAAS;AAAA;AAAA,IACrC;AAAA,KACF,IACE;AACN,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AACF,GAIA;AACA,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,GAAG,WAAW;AAAA,MACd,QAAQ,OAAO,aAAa;AAAA,MAC5B,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY,OAAO,MAAM,OAAO;AAAA,MAChC,cAAc,OAAO,QAAQ,OAAO;AAAA,MACpC,eAAe,OAAO,SAAS,OAAO;AAAA,MACtC,aAAa,OAAO,OAAO,OAAO;AAAA,IACpC;AAAA,IACA,UAAU;AAAA,MACR,GAAG,WAAW;AAAA,MACd,iBAAiB,OAAO;AAAA,MACxB,SAAS,OAAO;AAAA,IAClB;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["ModalRoot"]}

package/dist/components/surface.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalSurfaceProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalSurface: react.MemoExoticComponent<({ size, style, ...props }: ModalSurfaceProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalSurface };

package/dist/components/surface.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { View } from "@impulse-ui-native/primitives";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+const ModalSurface = memo(function ModalSurface2({
+  size = "medium",
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles, { size }, [size]);
+  const rootStyle = useMemo(
+    () => [styles.root, extractedStyleProps, style],
+    [styles.root, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: rootStyle });
+});
+function themedStyles(theme, { size }) {
+  const tokens = theme.components.modal;
+  return StyleSheet.create({
+    root: {
+      width: "100%",
+      maxWidth: tokens.sizes[size].maxWidth,
+      padding: tokens.padding,
+      gap: tokens.gap,
+      backgroundColor: tokens.backgroundColor,
+      borderColor: tokens.borderColor,
+      borderWidth: tokens.borderWidth,
+      borderRadius: tokens.borderRadius
+    }
+  });
+}
+export {
+  ModalSurface
+};
+//# sourceMappingURL=surface.js.map

package/dist/components/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme, ComponentSize } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalSurfaceProps } from \"../types\";\n\nexport const ModalSurface = memo(function ModalSurface({\n  size = \"medium\",\n  style,\n  ...props\n}: ModalSurfaceProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles, { size }, [size]);\n\n  const rootStyle = useMemo(\n    () => [styles.root, extractedStyleProps, style],\n    [styles.root, extractedStyleProps, style],\n  );\n\n  return <View {...props} style={rootStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme, { size }: { size: ComponentSize }) {\n  const tokens = theme.components.modal;\n\n  return StyleSheet.create({\n    root: {\n      width: \"100%\",\n      maxWidth: tokens.sizes[size].maxWidth,\n      padding: tokens.padding,\n      gap: tokens.gap,\n      backgroundColor: tokens.backgroundColor,\n      borderColor: tokens.borderColor,\n      borderWidth: tokens.borderWidth,\n      borderRadius: tokens.borderRadius,\n    },\n  });\n}\n"],"mappings":"AAsBS;AAtBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAIxC,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,cAAc,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAE7D,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB,EAAE,KAAK,GAA4B;AACxE,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU,OAAO,MAAM,IAAI,EAAE;AAAA,MAC7B,SAAS,OAAO;AAAA,MAChB,KAAK,OAAO;AAAA,MACZ,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,cAAc,OAAO;AAAA,IACvB;AAAA,EACF,CAAC;AACH;","names":["ModalSurface"]}

package/dist/components/title.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalTitleProps } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalTitle: react.MemoExoticComponent<(props: ModalTitleProps) => react_jsx_runtime.JSX.Element>;
+
+export { ModalTitle };

package/dist/components/title.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Typography } from "@impulse-ui-native/primitives";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+const ModalTitle = memo(function ModalTitle2(props) {
+  const tokens = useComponentsTokens().modal;
+  return /* @__PURE__ */ jsx(
+    Typography.Title4,
+    {
+      color: tokens.titleColor,
+      fontSize: tokens.titleFontSize,
+      lineHeight: tokens.titleLineHeight,
+      flexShrink: 1,
+      ...props
+    }
+  );
+});
+export {
+  ModalTitle
+};
+//# sourceMappingURL=title.js.map

package/dist/components/title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/title.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ModalTitleProps } from \"../types\";\n\nexport const ModalTitle = memo(function ModalTitle(props: ModalTitleProps) {\n  const tokens = useComponentsTokens().modal;\n\n  return (\n    <Typography.Title4\n      color={tokens.titleColor}\n      fontSize={tokens.titleFontSize}\n      lineHeight={tokens.titleLineHeight}\n      flexShrink={1}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAWI;AAXJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAI7B,MAAM,aAAa,KAAK,SAASA,YAAW,OAAwB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AAErC,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,YAAY,OAAO;AAAA,MACnB,YAAY;AAAA,MACX,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["ModalTitle"]}

package/dist/constants/modal.constants.d.mts

@@ -0,0 +1,4 @@
+declare const EnterDuration = 180;
+declare const ExitDuration = 150;
+
+export { EnterDuration, ExitDuration };

package/dist/constants/modal.constants.js

@@ -0,0 +1,7 @@
+const EnterDuration = 180;
+const ExitDuration = 150;
+export {
+  EnterDuration,
+  ExitDuration
+};
+//# sourceMappingURL=modal.constants.js.map

package/dist/constants/modal.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/modal.constants.ts"],"sourcesContent":["export const EnterDuration = 180;\nexport const ExitDuration = 150;\n"],"mappings":"AAAO,MAAM,gBAAgB;AACtB,MAAM,eAAe;","names":[]}

package/dist/contexts/modal.context.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { ModalContextValue } from '../types/modal.types.mjs';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const ModalContext: react.Context<ModalContextValue | undefined>;
+
+export { ModalContext };

package/dist/contexts/modal.context.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const ModalContext = createContext(
+  void 0
+);
+export {
+  ModalContext
+};
+//# sourceMappingURL=modal.context.js.map

package/dist/contexts/modal.context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/contexts/modal.context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nimport type { ModalContextValue } from \"../types\";\n\nexport const ModalContext = createContext<ModalContextValue | undefined>(\n  undefined,\n);\n"],"mappings":"AAAA,SAAS,qBAAqB;AAIvB,MAAM,eAAe;AAAA,EAC1B;AACF;","names":[]}

package/dist/hooks/use-modal-context.hook.d.mts

@@ -0,0 +1,10 @@
+import { ModalContextValue } from '../types/modal.types.mjs';
+import 'react';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare function useModalContext(): ModalContextValue;
+
+export { useModalContext };

package/dist/hooks/use-modal-context.hook.js

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { ModalContext } from "../contexts/modal.context";
+function useModalContext() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal components must be rendered inside Modal.Provider");
+  }
+  return context;
+}
+export {
+  useModalContext
+};
+//# sourceMappingURL=use-modal-context.hook.js.map

package/dist/hooks/use-modal-context.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-modal-context.hook.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ModalContext } from \"../contexts/modal.context\";\n\nexport function useModalContext() {\n  const context = useContext(ModalContext);\n\n  if (!context) {\n    throw new Error(\"Modal components must be rendered inside Modal.Provider\");\n  }\n\n  return context;\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAEtB,SAAS,kBAAkB;AAChC,QAAM,UAAU,WAAW,YAAY;AAEvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,SAAO;AACT;","names":[]}

package/dist/hooks/use-modal-lifecycle.hook.d.mts

@@ -0,0 +1,17 @@
+import * as _impulse_ui_native_overlay from '@impulse-ui-native/overlay';
+import * as react_native_reanimated from 'react-native-reanimated';
+import { ModalLifecycleProps } from '../types/modal.types.mjs';
+import 'react';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare function useModalLifecycle(props: ModalLifecycleProps): {
+    progress: react_native_reanimated.SharedValue<number>;
+    status: _impulse_ui_native_overlay.OverlayLifecycleStatus;
+    mounted: boolean;
+    interactive: boolean;
+    close: () => void;
+    completeTransition: _impulse_ui_native_overlay.OverlayTransitionCompletion;
+};
+
+export { useModalLifecycle };

package/dist/hooks/use-modal-lifecycle.hook.js

@@ -0,0 +1,46 @@
+import { useEffect, useMemo } from "react";
+import {
+  cancelAnimation,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useEventCallback } from "@impulse-ui-native/core";
+import { useOverlayLifecycle } from "@impulse-ui-native/overlay";
+import { EnterDuration, ExitDuration } from "../constants/modal.constants";
+function useModalLifecycle(props) {
+  const progress = useSharedValue(0);
+  const enter = useEventCallback(
+    (transitionId, complete) => {
+      progress.set(
+        withTiming(1, { duration: EnterDuration }, (finished) => {
+          if (finished) {
+            scheduleOnRN(complete, transitionId);
+          }
+        })
+      );
+    }
+  );
+  const exit = useEventCallback(
+    (transitionId, complete) => {
+      progress.set(
+        withTiming(0, { duration: ExitDuration }, (finished) => {
+          if (finished) {
+            scheduleOnRN(complete, transitionId);
+          }
+        })
+      );
+    }
+  );
+  const options = useMemo(
+    () => ({ onEnter: enter, onExit: exit }),
+    [enter, exit]
+  );
+  const lifecycle = useOverlayLifecycle(props, options);
+  useEffect(() => () => cancelAnimation(progress), [progress]);
+  return useMemo(() => ({ ...lifecycle, progress }), [lifecycle, progress]);
+}
+export {
+  useModalLifecycle
+};
+//# sourceMappingURL=use-modal-lifecycle.hook.js.map

package/dist/hooks/use-modal-lifecycle.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-modal-lifecycle.hook.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport {\n  cancelAnimation,\n  useSharedValue,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport type { OverlayTransitionHandler } from \"@impulse-ui-native/overlay\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { useOverlayLifecycle } from \"@impulse-ui-native/overlay\";\n\nimport type { ModalLifecycleProps } from \"../types\";\nimport { EnterDuration, ExitDuration } from \"../constants/modal.constants\";\n\nexport function useModalLifecycle(props: ModalLifecycleProps) {\n  const progress = useSharedValue(0);\n\n  const enter = useEventCallback<OverlayTransitionHandler>(\n    (transitionId, complete) => {\n      progress.set(\n        withTiming(1, { duration: EnterDuration }, (finished) => {\n          if (finished) {\n            scheduleOnRN(complete, transitionId);\n          }\n        }),\n      );\n    },\n  );\n  const exit = useEventCallback<OverlayTransitionHandler>(\n    (transitionId, complete) => {\n      progress.set(\n        withTiming(0, { duration: ExitDuration }, (finished) => {\n          if (finished) {\n            scheduleOnRN(complete, transitionId);\n          }\n        }),\n      );\n    },\n  );\n\n  const options = useMemo(\n    () => ({ onEnter: enter, onExit: exit }),\n    [enter, exit],\n  );\n  const lifecycle = useOverlayLifecycle(props, options);\n\n  useEffect(() => () => cancelAnimation(progress), [progress]);\n\n  return useMemo(() => ({ ...lifecycle, progress }), [lifecycle, progress]);\n}\n"],"mappings":"AAAA,SAAS,WAAW,eAAe;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAGpC,SAAS,eAAe,oBAAoB;AAErC,SAAS,kBAAkB,OAA4B;AAC5D,QAAM,WAAW,eAAe,CAAC;AAEjC,QAAM,QAAQ;AAAA,IACZ,CAAC,cAAc,aAAa;AAC1B,eAAS;AAAA,QACP,WAAW,GAAG,EAAE,UAAU,cAAc,GAAG,CAAC,aAAa;AACvD,cAAI,UAAU;AACZ,yBAAa,UAAU,YAAY;AAAA,UACrC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,QAAM,OAAO;AAAA,IACX,CAAC,cAAc,aAAa;AAC1B,eAAS;AAAA,QACP,WAAW,GAAG,EAAE,UAAU,aAAa,GAAG,CAAC,aAAa;AACtD,cAAI,UAAU;AACZ,yBAAa,UAAU,YAAY;AAAA,UACrC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,SAAS,OAAO,QAAQ,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI;AAAA,EACd;AACA,QAAM,YAAY,oBAAoB,OAAO,OAAO;AAEpD,YAAU,MAAM,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE3D,SAAO,QAAQ,OAAO,EAAE,GAAG,WAAW,SAAS,IAAI,CAAC,WAAW,QAAQ,CAAC;AAC1E;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+export { Modal } from './components/index.mjs';
+export { ModalCloseProps, ModalContentProps, ModalContextValue, ModalDescriptionProps, ModalFooterProps, ModalHeaderProps, ModalLifecycleProps, ModalProps, ModalProviderProps, ModalRootProps, ModalSurfaceProps, ModalTitleProps } from './types/modal.types.mjs';
+export { useModalContext } from './hooks/use-modal-context.hook.mjs';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from "./components";
+export * from "./types";
+import { useModalContext } from "./hooks/use-modal-context.hook";
+export {
+  useModalContext
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./types\";\nexport { useModalContext } from \"./hooks/use-modal-context.hook\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,SAAS,uBAAuB;","names":[]}

package/dist/types/index.d.mts

@@ -0,0 +1,6 @@
+export { ModalCloseProps, ModalContentProps, ModalContextValue, ModalDescriptionProps, ModalFooterProps, ModalHeaderProps, ModalLifecycleProps, ModalProps, ModalProviderProps, ModalRootProps, ModalSurfaceProps, ModalTitleProps } from './modal.types.mjs';
+import 'react';
+import 'react-native-reanimated';
+import '@impulse-ui-native/overlay';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';

package/dist/types/index.js

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

package/dist/types/index.js.map

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

package/dist/types/modal.types.d.mts

@@ -0,0 +1,36 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { SharedValue } from 'react-native-reanimated';
+import { OverlayLifecycleProps, OverlayComponentProps, OverlayLifecycleStatus } from '@impulse-ui-native/overlay';
+import { ViewProps, PressableCoreProps, TextProps } from '@impulse-ui-native/primitives';
+import { ComponentSize } from '@impulse-ui-native/theme';
+
+interface ModalSurfaceProps extends ViewProps {
+    size?: ComponentSize;
+}
+interface ModalProviderProps extends OverlayLifecycleProps, PropsWithChildren {
+    layer?: number;
+}
+type ModalRootProps = ModalSurfaceProps;
+interface ModalContextValue {
+    status: OverlayLifecycleStatus;
+    mounted: boolean;
+    interactive: boolean;
+    progress: SharedValue<number>;
+    layer: number;
+    close: () => void;
+}
+interface ModalProps extends Omit<ModalRootProps, "id" | "children">, ModalProviderProps {
+    title?: OverlayComponentProps["title"];
+    header?: ReactNode;
+    footer?: ReactNode;
+    hideClose?: boolean;
+}
+type ModalHeaderProps = ViewProps;
+type ModalCloseProps = PropsWithChildren<Omit<PressableCoreProps, "children">>;
+type ModalContentProps = ViewProps;
+type ModalFooterProps = ViewProps;
+type ModalTitleProps = TextProps;
+type ModalDescriptionProps = TextProps;
+type ModalLifecycleProps = OverlayLifecycleProps;
+
+export type { ModalCloseProps, ModalContentProps, ModalContextValue, ModalDescriptionProps, ModalFooterProps, ModalHeaderProps, ModalLifecycleProps, ModalProps, ModalProviderProps, ModalRootProps, ModalSurfaceProps, ModalTitleProps };

package/dist/types/modal.types.js

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

package/dist/types/modal.types.js.map

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

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@impulse-ui-native/modal",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "7.0.0",
+  "description": "Compound modal dialogs with local and OverlayHost lifecycle support.",
+  "keywords": [
+    "react-native",
+    "modal",
+    "dialog",
+    "components"
+  ],
+  "license": "MIT",
+  "source": "src/index.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.mts",
+  "react-native": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@impulse-ui-native/theme": "7.0.0",
+    "@impulse-ui-native/primitives": "7.0.0",
+    "@impulse-ui-native/icon": "7.0.0",
+    "@impulse-ui-native/core": "7.0.0",
+    "@impulse-ui-native/overlay": "7.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.14",
+    "eslint": "^9.38.0",
+    "prettier": "^3.6.2",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "typescript": "~6.0.3",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-worklets": "0.10.1",
+    "@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.73",
+    "react-native-reanimated": ">=4",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-worklets": ">=0.5"
+  },
+  "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",
+    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore"
+  }
 }