@lmb-it/kitsconcerto-native 0.1.243 → 0.1.244

package/components/overlay/Dialog/index.cjs

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactNative = require('react-native');
 var Animated = require('react-native-reanimated');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var useSeverityColors = require('../../../hooks/useSeverityColors.cjs');
-require('react');
 require('../../../contexts/DialogContext.cjs');
 var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
 var index = require('../../../animations/index.cjs');
@@ -15,6 +15,18 @@ var KitsThemeProvider_native = require('../../../contexts/Theme/KitsThemeProvide
 var index_native = require('../../../primitives/Icon/index.cjs');
 var index_native$1 = require('../../../primitives/Text/index.cjs');
 
+function useOverlayPresence(visible) {
+  const [mounted, setMounted] = React.useState(visible);
+  const visibleRef = React.useRef(visible);
+  React.useEffect(() => {
+    visibleRef.current = visible;
+    if (visible) setMounted(true);
+  }, [visible]);
+  const handleExitFinished = React.useCallback(() => {
+    if (!visibleRef.current) setMounted(false);
+  }, []);
+  return { mounted, handleExitFinished };
+}
 function KitsDialogControlled({ state, onHide }) {
   const {
     children,
@@ -52,6 +64,7 @@ function KitsDialogControlled({ state, onHide }) {
   const borderColor = colors?.border ?? resolveToken("border");
   const subtextColor = resolveToken("gray.500");
   const grabberColor = resolveToken("gray.300");
+  const scrimColor = resolveToken("black-alpha-40");
   const brandLogo = type === "brand" ? theme.config.logo : null;
   const resolvedStyle = useResolvedStyle.default(style || {});
   const resolvedContentStyle = useResolvedStyle.default(contentStyle || {});
@@ -81,76 +94,87 @@ function KitsDialogControlled({ state, onHide }) {
     }
     onHide();
   };
-  if (!state.visible) return null;
+  const { mounted, handleExitFinished } = useOverlayPresence(!!state.visible);
+  if (!mounted) return null;
   const content = typeof children === "function" ? children(hide) : children;
   const contentMode = contentProp != null ? typeof contentProp === "function" ? contentProp({ hide }) : contentProp : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: /* @__PURE__ */ jsxRuntime.jsxs(Animated.View, { entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration), style: [isSheet ? styles.sheetOverlay : styles.overlay, resolvedMaskStyle], children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: dismissableMask ? hide : void 0 }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Animated.View,
-      {
-        entering: isSheet ? Animated.SlideInDown.springify().damping(index.overlayAnimations.sheet.enter.damping).stiffness(index.overlayAnimations.sheet.enter.stiffness) : Animated.ZoomIn.springify().damping(index.overlayAnimations.dialog.enter.damping).stiffness(index.overlayAnimations.dialog.enter.stiffness),
-        style: [
-          styles.panel,
-          isSheet && styles.sheetPanel,
-          { backgroundColor: surfaceColor, borderColor },
-          // Explicit `breakpoints` win even when responsive=false (web parity)
-          !isSheet && !hasExplicitWidth && (breakpoints != null || responsive) ? { width: responsiveWidth } : null,
-          resolvedStyle,
-          resolvedContentStyle
-        ],
-        children: contentMode != null ? contentMode : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          isSheet && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
-          colors && !isSheet && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { height: 4, backgroundColor: colors.solid, borderTopLeftRadius: 16, borderTopRightRadius: 16 } }),
-          !hideHeader && headerRender != null && headerRender({ close: () => {
-            void hide();
-          } }),
-          !hideHeader && headerRender == null && rest.header != null && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.header, { borderBottomColor: borderColor }, resolvedHeaderStyle], children: [
-            (icon || brandLogo) && colors && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: {
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              backgroundColor: colors.iconBg,
-              alignItems: "center",
-              justifyContent: "center",
-              marginRight: 12
-            }, children: brandLogo ? brandLogo : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: icon, size: "lg", color: colors.iconFg }) : icon }),
-            /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { style: { fontSize: 18, fontWeight: "700", color: textColor, flex: 1 }, children: rest.header }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: hide, hitSlop: 8, children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { style: { fontSize: 18, color: subtextColor }, children: "\u2715" }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.ScrollView,
-            {
-              style: [styles.body, resolvedBodyStyle],
-              contentContainerStyle: styles.bodyContent,
-              showsVerticalScrollIndicator: false,
-              children: content
-            }
-          ),
-          (footerRender != null || rest.footer != null) && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
-            styles.footer,
-            { borderTopColor: borderColor },
-            isSheet && { paddingBottom: 12 + insets.bottom },
-            resolvedFooterStyle
-          ], children: footerRender ? footerRender({ close: () => {
-            void hide();
-          } }) : rest.footer })
-        ] })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: state.visible && /* @__PURE__ */ jsxRuntime.jsxs(
+    Animated.View,
+    {
+      entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration),
+      exiting: Animated.FadeOut.duration(index.overlayAnimations.scrim.exitDuration),
+      style: [isSheet ? styles.sheetOverlay : styles.overlay, { backgroundColor: scrimColor }, resolvedMaskStyle],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: dismissableMask ? hide : void 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Animated.View,
+          {
+            entering: isSheet ? Animated.SlideInDown.springify().damping(index.overlayAnimations.sheet.enter.damping).stiffness(index.overlayAnimations.sheet.enter.stiffness).mass(index.overlayAnimations.sheet.enter.mass) : Animated.ZoomIn.springify().damping(index.overlayAnimations.dialog.enter.damping).stiffness(index.overlayAnimations.dialog.enter.stiffness).mass(index.overlayAnimations.dialog.enter.mass),
+            exiting: (isSheet ? Animated.SlideOutDown.duration(index.overlayAnimations.sheet.exitDuration).easing(Animated.Easing.in(Animated.Easing.ease)) : Animated.ZoomOut.duration(index.overlayAnimations.dialog.exitDuration).easing(Animated.Easing.in(Animated.Easing.ease))).withCallback((finished) => {
+              "worklet";
+              if (finished) Animated.runOnJS(handleExitFinished)();
+            }),
+            style: [
+              styles.panel,
+              isSheet && styles.sheetPanel,
+              { backgroundColor: surfaceColor, borderColor },
+              // Explicit `breakpoints` win even when responsive=false (web parity)
+              !isSheet && !hasExplicitWidth && (breakpoints != null || responsive) ? { width: responsiveWidth } : null,
+              resolvedStyle,
+              resolvedContentStyle
+            ],
+            children: contentMode != null ? contentMode : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              isSheet && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
+              colors && !isSheet && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { height: 4, backgroundColor: colors.solid, borderTopLeftRadius: 20, borderTopRightRadius: 20 } }),
+              !hideHeader && headerRender != null && headerRender({ close: () => {
+                void hide();
+              } }),
+              !hideHeader && headerRender == null && rest.header != null && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.header, { borderBottomColor: borderColor }, resolvedHeaderStyle], children: [
+                (icon || brandLogo) && colors && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: {
+                  width: 36,
+                  height: 36,
+                  borderRadius: 18,
+                  backgroundColor: colors.iconBg,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginRight: 12
+                }, children: brandLogo ? brandLogo : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: icon, size: "lg", color: colors.iconFg }) : icon }),
+                /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { style: { fontSize: 18, fontWeight: "700", color: textColor, flex: 1 }, children: rest.header }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: hide, hitSlop: 8, children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { style: { fontSize: 18, color: subtextColor }, children: "\u2715" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.ScrollView,
+                {
+                  style: [styles.body, resolvedBodyStyle],
+                  contentContainerStyle: styles.bodyContent,
+                  showsVerticalScrollIndicator: false,
+                  children: content
+                }
+              ),
+              (footerRender != null || rest.footer != null) && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
+                styles.footer,
+                { borderTopColor: borderColor },
+                isSheet && { paddingBottom: 12 + insets.bottom },
+                resolvedFooterStyle
+              ], children: footerRender ? footerRender({ close: () => {
+                void hide();
+              } }) : rest.footer })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
 }
 const styles = reactNative.StyleSheet.create({
   overlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.45)",
     justifyContent: "center",
     alignItems: "center",
     padding: 24
   },
   sheetOverlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.45)",
     justifyContent: "flex-end"
   },
   sheetPanel: {
@@ -172,17 +196,19 @@ const styles = reactNative.StyleSheet.create({
     marginBottom: 6
   },
   panel: {
-    borderRadius: 16,
+    // 20 == radii.xl (no numeric radii resolver on native — see report).
+    borderRadius: 20,
     borderWidth: 1,
     minWidth: 250,
     maxWidth: "90%",
     maxHeight: "80%",
     overflow: "hidden",
-    elevation: 12,
+    // Subtle elevation: low opacity, wide blur, minimal offset.
+    elevation: 6,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
-    shadowRadius: 12
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20
   },
   header: {
     flexDirection: "row",

package/components/overlay/Dialog/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/components/overlay/Dialog/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Modal, Pressable, ScrollView, StyleSheet, View, useWindowDimensions} from \"react-native\";\nimport Animated, {FadeIn, SlideInDown, ZoomIn} from \"react-native-reanimated\";\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\";\nimport {Icon, Text} from \"../../../_compat\";\nimport type {IKitsDialogControlled} from \"@lmb-it/kitsconcerto-types\";\nimport {useKitsTheme} from \"../../../contexts/Theme\";\nimport {useSeverityColors} from \"../../../hooks/useSeverityColors\";\nimport {useResolvedStyle} from \"../../../hooks\";\nimport {overlayAnimations as anim} from \"../../../animations\";\n\nexport default function KitsDialogControlled({state, onHide}: IKitsDialogControlled) {\n    const {\n        children,\n        content: contentProp,\n        onClose,\n        asyncClose,\n        type,\n        icon,\n        style,\n        contentStyle,\n        headerStyle,\n        maskStyle,\n        position = 'center',\n        responsive = true,\n        hideHeader,\n        headerRender,\n        footerRender,\n        footerStyle,\n        canClose,\n        bodyStyle,\n        closeIcon,\n        // Native default true preserves historical tap-to-dismiss; web's\n        // PrimeReact default is false — pass explicitly in shared code.\n        dismissableMask = true,\n        breakpoints,\n        ...rest\n    } = state;\n    const {resolveToken, theme} = useKitsTheme();\n    const severityColors = useSeverityColors(type || 'secondary');\n    const colors = type ? severityColors : null;\n    const insets = useSafeAreaInsets();\n    const isSheet = position === 'bottom';\n\n    const surfaceColor = resolveToken('surface-card');\n    const textColor = resolveToken('text');\n    const borderColor = colors?.border ?? resolveToken('border');\n    const subtextColor = resolveToken('gray.500');\n    const grabberColor = resolveToken('gray.300');\n    const brandLogo = type === 'brand' ? theme.config.logo : null;\n\n    const resolvedStyle = useResolvedStyle(style || {});\n    const resolvedContentStyle = useResolvedStyle(contentStyle || {});\n    const resolvedHeaderStyle = useResolvedStyle(headerStyle || {});\n    const resolvedMaskStyle = useResolvedStyle(maskStyle || {});\n    const resolvedFooterStyle = useResolvedStyle(footerStyle || {});\n    const resolvedBodyStyle = useResolvedStyle(bodyStyle || {});\n\n    const {width: screenWidth} = useWindowDimensions();\n    // Consumer `breakpoints` ({'960px': '75vw'}) mirrors the web prop: the\n    // smallest max-width threshold >= the screen width wins; vw/% both map\n    // to a percentage of the window width. Falls back to the responsive\n    // default (50% tablets/desktop, 95% phones <=641px).\n    const breakpointWidth = (() => {\n        if (!breakpoints) return null;\n        const matches = Object.entries(breakpoints)\n            .map(([k, v]) => [parseFloat(k), v] as const)\n            .filter(([px]) => !Number.isNaN(px) && screenWidth <= px)\n            .sort(([a], [b]) => a - b);\n        const value = matches[0]?.[1];\n        if (value == null) return null;\n        const num = parseFloat(value);\n        return Number.isNaN(num) ? null : `${num}%`;\n    })();\n    const responsiveWidth = breakpointWidth ?? (screenWidth > 641 ? '50%' : '95%');\n    const hasExplicitWidth = (resolvedStyle as any).width != null;\n\n    const hide = async () => {\n        // canClose gate — intercepts every close path (backdrop Pressable,\n        // built-in X Pressable, RN Modal onRequestClose). When blocked,\n        // onClose is suppressed and the dialog stays open.\n        if (canClose === false || (typeof canClose === 'function' && !canClose())) {\n            return;\n        }\n        if (asyncClose && typeof onClose === \"function\") {\n            await onClose();\n        } else {\n            onClose?.();\n        }\n        onHide();\n    };\n\n    if (!state.visible) return null;\n\n    const content = typeof children === \"function\" ? children(hide) : children;\n    // Content-mode override (mirrors web): consumer node replaces the whole\n    // header / body / footer template inside the panel.\n    const contentMode = contentProp != null\n        ? (typeof contentProp === \"function\" ? contentProp({hide}) : contentProp)\n        : null;\n\n    return (\n        <Modal visible transparent animationType=\"none\" onRequestClose={hide}>\n            <Animated.View entering={FadeIn.duration(anim.scrim.enterDuration)} style={[isSheet ? styles.sheetOverlay : styles.overlay, resolvedMaskStyle as any]}>\n                <Pressable style={StyleSheet.absoluteFill} onPress={dismissableMask ? hide : undefined}/>\n                <Animated.View\n                    entering={isSheet\n                        ? SlideInDown.springify().damping(anim.sheet.enter.damping).stiffness(anim.sheet.enter.stiffness)\n                        : ZoomIn.springify().damping(anim.dialog.enter.damping).stiffness(anim.dialog.enter.stiffness)}\n                    style={[\n                        styles.panel,\n                        isSheet && styles.sheetPanel,\n                        {backgroundColor: surfaceColor, borderColor},\n                        // Explicit `breakpoints` win even when responsive=false (web parity)\n                        !isSheet && !hasExplicitWidth && (breakpoints != null || responsive) ? {width: responsiveWidth} : null,\n                        resolvedStyle as any,\n                        resolvedContentStyle as any,\n                    ]}\n                >\n                    {contentMode != null ? contentMode : <>\n                    {/* Grabber (bottom-sheet) */}\n                    {isSheet && <View style={[styles.grabber, {backgroundColor: grabberColor}]}/>}\n\n                    {/* Severity accent strip */}\n                    {colors && !isSheet && (\n                        <View style={{height: 4, backgroundColor: colors.solid, borderTopLeftRadius: 16, borderTopRightRadius: 16}}/>\n                    )}\n\n                    {/* Custom header (headerRender) — fully replaces the built-in header\n                        View when provided. Wins over the default header even if `header`\n                        is also set. */}\n                    {!hideHeader && headerRender != null && headerRender({close: () => { void hide(); }})}\n\n                    {/* Header (default) — rendered when no headerRender and `header` is set. */}\n                    {!hideHeader && headerRender == null && rest.header != null && (\n                        <View style={[styles.header, {borderBottomColor: borderColor}, resolvedHeaderStyle as any]}>\n                            {/* Inline severity icon */}\n                            {(icon || brandLogo) && colors && (\n                                <View style={{\n                                    width: 36,\n                                    height: 36,\n                                    borderRadius: 18,\n                                    backgroundColor: colors.iconBg,\n                                    alignItems: 'center',\n                                    justifyContent: 'center',\n                                    marginRight: 12,\n                                }}>\n                                    {brandLogo ? brandLogo : typeof icon === 'string' ? (\n                                        <Icon name={icon as never} size={'lg'} color={colors.iconFg}/>\n                                    ) : icon}\n                                </View>\n                            )}\n                            <Text style={{fontSize: 18, fontWeight: \"700\", color: textColor, flex: 1}}>\n                                {rest.header as React.ReactNode}\n                            </Text>\n                            <Pressable onPress={hide} hitSlop={8}>\n                                {closeIcon ?? <Text style={{fontSize: 18, color: subtextColor}}>✕</Text>}\n                            </Pressable>\n                        </View>\n                    )}\n\n                    {/* Body — bodyStyle is applied AFTER the built-in maxHeight: 400,\n                        so consumers can lift the cap (`maxHeight: 600`) or unlock flex\n                        sizing (`minHeight: 0`) without losing the default behavior when\n                        bodyStyle is unset. */}\n                    <ScrollView\n                        style={[styles.body, resolvedBodyStyle as any]}\n                        contentContainerStyle={styles.bodyContent}\n                        showsVerticalScrollIndicator={false}\n                    >\n                        {content}\n                    </ScrollView>\n\n                    {/* Footer — footerRender takes precedence over `footer`. footerStyle\n                        is merged AFTER the built-in flex defaults so consumers can override\n                        alignment (e.g. justifyContent: 'space-between' for left-delete /\n                        right-actions layouts) without losing the borderTop / padding. */}\n                    {(footerRender != null || rest.footer != null) && (\n                        <View style={[\n                            styles.footer,\n                            {borderTopColor: borderColor},\n                            isSheet && {paddingBottom: 12 + insets.bottom},\n                            resolvedFooterStyle as any,\n                        ]}>\n                            {footerRender\n                                ? footerRender({close: () => { void hide(); }})\n                                : (rest.footer as React.ReactNode)}\n                        </View>\n                    )}\n                    </>}\n                </Animated.View>\n            </Animated.View>\n        </Modal>\n    );\n}\n\nconst styles = StyleSheet.create({\n    overlay: {\n        flex: 1,\n        backgroundColor: \"rgba(0,0,0,0.45)\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        padding: 24,\n    },\n    sheetOverlay: {\n        flex: 1,\n        backgroundColor: \"rgba(0,0,0,0.45)\",\n        justifyContent: \"flex-end\",\n    },\n    sheetPanel: {\n        width: \"100%\",\n        maxWidth: \"100%\",\n        maxHeight: \"90%\",\n        borderWidth: 0,\n        borderTopLeftRadius: 24,\n        borderTopRightRadius: 24,\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n        paddingTop: 10,\n    },\n    grabber: {\n        width: 40,\n        height: 5,\n        borderRadius: 999,\n        alignSelf: \"center\",\n        marginBottom: 6,\n    },\n    panel: {\n        borderRadius: 16,\n        borderWidth: 1,\n        minWidth: 250,\n        maxWidth: \"90%\",\n        maxHeight: \"80%\",\n        overflow: \"hidden\",\n        elevation: 12,\n        shadowColor: \"#000\",\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 12,\n    },\n    header: {\n        flexDirection: \"row\",\n        alignItems: \"center\",\n        paddingHorizontal: 20,\n        paddingVertical: 16,\n        borderBottomWidth: 1,\n    },\n    body: {\n        maxHeight: 400,\n    },\n    bodyContent: {\n        padding: 20,\n    },\n    footer: {\n        flexDirection: \"row\",\n        justifyContent: \"flex-end\",\n        paddingHorizontal: 20,\n        paddingVertical: 12,\n        borderTopWidth: 1,\n        gap: 8,\n    },\n});\n"],"names":["useKitsTheme","useSeverityColors","useSafeAreaInsets","useResolvedStyle","useWindowDimensions","jsx","Modal","jsxs","FadeIn","anim","Pressable","StyleSheet","SlideInDown","ZoomIn","Fragment","View","Icon","Text","ScrollView"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/components/overlay/Dialog/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Modal, Pressable, ScrollView, StyleSheet, View, useWindowDimensions} from \"react-native\";\nimport Animated, {Easing, FadeIn, FadeOut, runOnJS, SlideInDown, SlideOutDown, ZoomIn, ZoomOut} from \"react-native-reanimated\";\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\";\nimport {Icon, Text} from \"../../../_compat\";\nimport type {IKitsDialogControlled} from \"@lmb-it/kitsconcerto-types\";\nimport {useKitsTheme} from \"../../../contexts/Theme\";\nimport {useSeverityColors} from \"../../../hooks/useSeverityColors\";\nimport {useResolvedStyle} from \"../../../hooks\";\nimport {overlayAnimations as anim} from \"../../../animations\";\n\n/**\n * Keeps the RN Modal mounted through the exit animation. `visible` drives the\n * inner scrim + panel entering/exiting; the Modal itself stays mounted until\n * the panel's exit animation reports finished, then unmounts.\n *\n * Re-entrancy: a new `visible=true` during an exit re-renders the inner (which\n * re-enters), and the still-pending exit callback is ignored because\n * `visibleRef` is already back to `true` — so the Modal is never torn down\n * mid-reopen.\n */\nfunction useOverlayPresence(visible: boolean) {\n    const [mounted, setMounted] = React.useState(visible);\n    const visibleRef = React.useRef(visible);\n    React.useEffect(() => {\n        visibleRef.current = visible;\n        if (visible) setMounted(true);\n    }, [visible]);\n    // Runs on the JS thread (dispatched via runOnJS from the exit worklet).\n    const handleExitFinished = React.useCallback(() => {\n        if (!visibleRef.current) setMounted(false);\n    }, []);\n    return {mounted, handleExitFinished};\n}\n\nexport default function KitsDialogControlled({state, onHide}: IKitsDialogControlled) {\n    const {\n        children,\n        content: contentProp,\n        onClose,\n        asyncClose,\n        type,\n        icon,\n        style,\n        contentStyle,\n        headerStyle,\n        maskStyle,\n        position = 'center',\n        responsive = true,\n        hideHeader,\n        headerRender,\n        footerRender,\n        footerStyle,\n        canClose,\n        bodyStyle,\n        closeIcon,\n        // Native default true preserves historical tap-to-dismiss; web's\n        // PrimeReact default is false — pass explicitly in shared code.\n        dismissableMask = true,\n        breakpoints,\n        ...rest\n    } = state;\n    const {resolveToken, theme} = useKitsTheme();\n    const severityColors = useSeverityColors(type || 'secondary');\n    const colors = type ? severityColors : null;\n    const insets = useSafeAreaInsets();\n    const isSheet = position === 'bottom';\n\n    const surfaceColor = resolveToken('surface-card');\n    const textColor = resolveToken('text');\n    const borderColor = colors?.border ?? resolveToken('border');\n    const subtextColor = resolveToken('gray.500');\n    const grabberColor = resolveToken('gray.300');\n    // Scrim via the literal alpha overlay token → rgba(0,0,0,0.4) in both modes.\n    const scrimColor = resolveToken('black-alpha-40');\n    const brandLogo = type === 'brand' ? theme.config.logo : null;\n\n    const resolvedStyle = useResolvedStyle(style || {});\n    const resolvedContentStyle = useResolvedStyle(contentStyle || {});\n    const resolvedHeaderStyle = useResolvedStyle(headerStyle || {});\n    const resolvedMaskStyle = useResolvedStyle(maskStyle || {});\n    const resolvedFooterStyle = useResolvedStyle(footerStyle || {});\n    const resolvedBodyStyle = useResolvedStyle(bodyStyle || {});\n\n    const {width: screenWidth} = useWindowDimensions();\n    // Consumer `breakpoints` ({'960px': '75vw'}) mirrors the web prop: the\n    // smallest max-width threshold >= the screen width wins; vw/% both map\n    // to a percentage of the window width. Falls back to the responsive\n    // default (50% tablets/desktop, 95% phones <=641px).\n    const breakpointWidth = (() => {\n        if (!breakpoints) return null;\n        const matches = Object.entries(breakpoints)\n            .map(([k, v]) => [parseFloat(k), v] as const)\n            .filter(([px]) => !Number.isNaN(px) && screenWidth <= px)\n            .sort(([a], [b]) => a - b);\n        const value = matches[0]?.[1];\n        if (value == null) return null;\n        const num = parseFloat(value);\n        return Number.isNaN(num) ? null : `${num}%`;\n    })();\n    const responsiveWidth = breakpointWidth ?? (screenWidth > 641 ? '50%' : '95%');\n    const hasExplicitWidth = (resolvedStyle as any).width != null;\n\n    const hide = async () => {\n        // canClose gate — intercepts every close path (backdrop Pressable,\n        // built-in X Pressable, RN Modal onRequestClose). When blocked,\n        // onClose is suppressed and the dialog stays open.\n        if (canClose === false || (typeof canClose === 'function' && !canClose())) {\n            return;\n        }\n        if (asyncClose && typeof onClose === \"function\") {\n            await onClose();\n        } else {\n            onClose?.();\n        }\n        onHide();\n    };\n\n    const {mounted, handleExitFinished} = useOverlayPresence(!!state.visible);\n    if (!mounted) return null;\n\n    const content = typeof children === \"function\" ? children(hide) : children;\n    // Content-mode override (mirrors web): consumer node replaces the whole\n    // header / body / footer template inside the panel.\n    const contentMode = contentProp != null\n        ? (typeof contentProp === \"function\" ? contentProp({hide}) : contentProp)\n        : null;\n\n    return (\n        <Modal visible transparent animationType=\"none\" onRequestClose={hide}>\n            {state.visible && (\n            <Animated.View\n                entering={FadeIn.duration(anim.scrim.enterDuration)}\n                exiting={FadeOut.duration(anim.scrim.exitDuration)}\n                style={[isSheet ? styles.sheetOverlay : styles.overlay, {backgroundColor: scrimColor}, resolvedMaskStyle as any]}\n            >\n                <Pressable style={StyleSheet.absoluteFill} onPress={dismissableMask ? hide : undefined}/>\n                <Animated.View\n                    entering={isSheet\n                        ? SlideInDown.springify().damping(anim.sheet.enter.damping).stiffness(anim.sheet.enter.stiffness).mass(anim.sheet.enter.mass ?? 1)\n                        : ZoomIn.springify().damping(anim.dialog.enter.damping).stiffness(anim.dialog.enter.stiffness).mass(anim.dialog.enter.mass ?? 1)}\n                    exiting={(isSheet\n                        ? SlideOutDown.duration(anim.sheet.exitDuration).easing(Easing.in(Easing.ease))\n                        : ZoomOut.duration(anim.dialog.exitDuration).easing(Easing.in(Easing.ease))\n                    ).withCallback((finished) => {\n                        'worklet';\n                        if (finished) runOnJS(handleExitFinished)();\n                    })}\n                    style={[\n                        styles.panel,\n                        isSheet && styles.sheetPanel,\n                        {backgroundColor: surfaceColor, borderColor},\n                        // Explicit `breakpoints` win even when responsive=false (web parity)\n                        !isSheet && !hasExplicitWidth && (breakpoints != null || responsive) ? {width: responsiveWidth} : null,\n                        resolvedStyle as any,\n                        resolvedContentStyle as any,\n                    ]}\n                >\n                    {contentMode != null ? contentMode : <>\n                    {/* Grabber (bottom-sheet) */}\n                    {isSheet && <View style={[styles.grabber, {backgroundColor: grabberColor}]}/>}\n\n                    {/* Severity accent strip */}\n                    {colors && !isSheet && (\n                        <View style={{height: 4, backgroundColor: colors.solid, borderTopLeftRadius: 20, borderTopRightRadius: 20}}/>\n                    )}\n\n                    {/* Custom header (headerRender) — fully replaces the built-in header\n                        View when provided. Wins over the default header even if `header`\n                        is also set. */}\n                    {!hideHeader && headerRender != null && headerRender({close: () => { void hide(); }})}\n\n                    {/* Header (default) — rendered when no headerRender and `header` is set. */}\n                    {!hideHeader && headerRender == null && rest.header != null && (\n                        <View style={[styles.header, {borderBottomColor: borderColor}, resolvedHeaderStyle as any]}>\n                            {/* Inline severity icon */}\n                            {(icon || brandLogo) && colors && (\n                                <View style={{\n                                    width: 36,\n                                    height: 36,\n                                    borderRadius: 18,\n                                    backgroundColor: colors.iconBg,\n                                    alignItems: 'center',\n                                    justifyContent: 'center',\n                                    marginRight: 12,\n                                }}>\n                                    {brandLogo ? brandLogo : typeof icon === 'string' ? (\n                                        <Icon name={icon as never} size={'lg'} color={colors.iconFg}/>\n                                    ) : icon}\n                                </View>\n                            )}\n                            <Text style={{fontSize: 18, fontWeight: \"700\", color: textColor, flex: 1}}>\n                                {rest.header as React.ReactNode}\n                            </Text>\n                            <Pressable onPress={hide} hitSlop={8}>\n                                {closeIcon ?? <Text style={{fontSize: 18, color: subtextColor}}>✕</Text>}\n                            </Pressable>\n                        </View>\n                    )}\n\n                    {/* Body — bodyStyle is applied AFTER the built-in maxHeight: 400,\n                        so consumers can lift the cap (`maxHeight: 600`) or unlock flex\n                        sizing (`minHeight: 0`) without losing the default behavior when\n                        bodyStyle is unset. */}\n                    <ScrollView\n                        style={[styles.body, resolvedBodyStyle as any]}\n                        contentContainerStyle={styles.bodyContent}\n                        showsVerticalScrollIndicator={false}\n                    >\n                        {content}\n                    </ScrollView>\n\n                    {/* Footer — footerRender takes precedence over `footer`. footerStyle\n                        is merged AFTER the built-in flex defaults so consumers can override\n                        alignment (e.g. justifyContent: 'space-between' for left-delete /\n                        right-actions layouts) without losing the borderTop / padding. */}\n                    {(footerRender != null || rest.footer != null) && (\n                        <View style={[\n                            styles.footer,\n                            {borderTopColor: borderColor},\n                            isSheet && {paddingBottom: 12 + insets.bottom},\n                            resolvedFooterStyle as any,\n                        ]}>\n                            {footerRender\n                                ? footerRender({close: () => { void hide(); }})\n                                : (rest.footer as React.ReactNode)}\n                        </View>\n                    )}\n                    </>}\n                </Animated.View>\n            </Animated.View>\n            )}\n        </Modal>\n    );\n}\n\nconst styles = StyleSheet.create({\n    overlay: {\n        flex: 1,\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        padding: 24,\n    },\n    sheetOverlay: {\n        flex: 1,\n        justifyContent: \"flex-end\",\n    },\n    sheetPanel: {\n        width: \"100%\",\n        maxWidth: \"100%\",\n        maxHeight: \"90%\",\n        borderWidth: 0,\n        borderTopLeftRadius: 24,\n        borderTopRightRadius: 24,\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n        paddingTop: 10,\n    },\n    grabber: {\n        width: 40,\n        height: 5,\n        borderRadius: 999,\n        alignSelf: \"center\",\n        marginBottom: 6,\n    },\n    panel: {\n        // 20 == radii.xl (no numeric radii resolver on native — see report).\n        borderRadius: 20,\n        borderWidth: 1,\n        minWidth: 250,\n        maxWidth: \"90%\",\n        maxHeight: \"80%\",\n        overflow: \"hidden\",\n        // Subtle elevation: low opacity, wide blur, minimal offset.\n        elevation: 6,\n        shadowColor: \"#000\",\n        shadowOffset: {width: 0, height: 2},\n        shadowOpacity: 0.15,\n        shadowRadius: 20,\n    },\n    header: {\n        flexDirection: \"row\",\n        alignItems: \"center\",\n        paddingHorizontal: 20,\n        paddingVertical: 16,\n        borderBottomWidth: 1,\n    },\n    body: {\n        maxHeight: 400,\n    },\n    bodyContent: {\n        padding: 20,\n    },\n    footer: {\n        flexDirection: \"row\",\n        justifyContent: \"flex-end\",\n        paddingHorizontal: 20,\n        paddingVertical: 12,\n        borderTopWidth: 1,\n        gap: 8,\n    },\n});\n"],"names":["useKitsTheme","useSeverityColors","useSafeAreaInsets","useResolvedStyle","useWindowDimensions","jsx","Modal","jsxs","FadeIn","anim","FadeOut","Pressable","StyleSheet","SlideInDown","ZoomIn","SlideOutDown","Easing","ZoomOut","runOnJS","Fragment","View","Icon","Text","ScrollView"],"mappings":"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"}

package/components/overlay/Dialog/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { useWindowDimensions, Modal, Pressable, StyleSheet, View, ScrollView } from 'react-native';
-import Animated, { SlideInDown, ZoomIn, FadeIn } from 'react-native-reanimated';
+import Animated, { SlideOutDown, Easing, ZoomOut, runOnJS, SlideInDown, ZoomIn, FadeOut, FadeIn } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSeverityColors } from '../../../hooks/useSeverityColors.js';
-import 'react';
 import '../../../contexts/DialogContext.js';
 import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
 import { overlayAnimations } from '../../../animations/index.js';
@@ -11,6 +11,18 @@ import { useKitsTheme } from '../../../contexts/Theme/KitsThemeProvider.js';
 import { Icon } from '../../../primitives/Icon/index.js';
 import Text from '../../../primitives/Text/index.js';
 
+function useOverlayPresence(visible) {
+  const [mounted, setMounted] = React.useState(visible);
+  const visibleRef = React.useRef(visible);
+  React.useEffect(() => {
+    visibleRef.current = visible;
+    if (visible) setMounted(true);
+  }, [visible]);
+  const handleExitFinished = React.useCallback(() => {
+    if (!visibleRef.current) setMounted(false);
+  }, []);
+  return { mounted, handleExitFinished };
+}
 function KitsDialogControlled({ state, onHide }) {
   const {
     children,
@@ -48,6 +60,7 @@ function KitsDialogControlled({ state, onHide }) {
   const borderColor = colors?.border ?? resolveToken("border");
   const subtextColor = resolveToken("gray.500");
   const grabberColor = resolveToken("gray.300");
+  const scrimColor = resolveToken("black-alpha-40");
   const brandLogo = type === "brand" ? theme.config.logo : null;
   const resolvedStyle = useResolvedStyle(style || {});
   const resolvedContentStyle = useResolvedStyle(contentStyle || {});
@@ -77,76 +90,87 @@ function KitsDialogControlled({ state, onHide }) {
     }
     onHide();
   };
-  if (!state.visible) return null;
+  const { mounted, handleExitFinished } = useOverlayPresence(!!state.visible);
+  if (!mounted) return null;
   const content = typeof children === "function" ? children(hide) : children;
   const contentMode = contentProp != null ? typeof contentProp === "function" ? contentProp({ hide }) : contentProp : null;
-  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: /* @__PURE__ */ jsxs(Animated.View, { entering: FadeIn.duration(overlayAnimations.scrim.enterDuration), style: [isSheet ? styles.sheetOverlay : styles.overlay, resolvedMaskStyle], children: [
-    /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: dismissableMask ? hide : void 0 }),
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        entering: isSheet ? SlideInDown.springify().damping(overlayAnimations.sheet.enter.damping).stiffness(overlayAnimations.sheet.enter.stiffness) : ZoomIn.springify().damping(overlayAnimations.dialog.enter.damping).stiffness(overlayAnimations.dialog.enter.stiffness),
-        style: [
-          styles.panel,
-          isSheet && styles.sheetPanel,
-          { backgroundColor: surfaceColor, borderColor },
-          // Explicit `breakpoints` win even when responsive=false (web parity)
-          !isSheet && !hasExplicitWidth && (breakpoints != null || responsive) ? { width: responsiveWidth } : null,
-          resolvedStyle,
-          resolvedContentStyle
-        ],
-        children: contentMode != null ? contentMode : /* @__PURE__ */ jsxs(Fragment, { children: [
-          isSheet && /* @__PURE__ */ jsx(View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
-          colors && !isSheet && /* @__PURE__ */ jsx(View, { style: { height: 4, backgroundColor: colors.solid, borderTopLeftRadius: 16, borderTopRightRadius: 16 } }),
-          !hideHeader && headerRender != null && headerRender({ close: () => {
-            void hide();
-          } }),
-          !hideHeader && headerRender == null && rest.header != null && /* @__PURE__ */ jsxs(View, { style: [styles.header, { borderBottomColor: borderColor }, resolvedHeaderStyle], children: [
-            (icon || brandLogo) && colors && /* @__PURE__ */ jsx(View, { style: {
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              backgroundColor: colors.iconBg,
-              alignItems: "center",
-              justifyContent: "center",
-              marginRight: 12
-            }, children: brandLogo ? brandLogo : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "lg", color: colors.iconFg }) : icon }),
-            /* @__PURE__ */ jsx(Text, { style: { fontSize: 18, fontWeight: "700", color: textColor, flex: 1 }, children: rest.header }),
-            /* @__PURE__ */ jsx(Pressable, { onPress: hide, hitSlop: 8, children: closeIcon ?? /* @__PURE__ */ jsx(Text, { style: { fontSize: 18, color: subtextColor }, children: "\u2715" }) })
-          ] }),
-          /* @__PURE__ */ jsx(
-            ScrollView,
-            {
-              style: [styles.body, resolvedBodyStyle],
-              contentContainerStyle: styles.bodyContent,
-              showsVerticalScrollIndicator: false,
-              children: content
-            }
-          ),
-          (footerRender != null || rest.footer != null) && /* @__PURE__ */ jsx(View, { style: [
-            styles.footer,
-            { borderTopColor: borderColor },
-            isSheet && { paddingBottom: 12 + insets.bottom },
-            resolvedFooterStyle
-          ], children: footerRender ? footerRender({ close: () => {
-            void hide();
-          } }) : rest.footer })
-        ] })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: state.visible && /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      entering: FadeIn.duration(overlayAnimations.scrim.enterDuration),
+      exiting: FadeOut.duration(overlayAnimations.scrim.exitDuration),
+      style: [isSheet ? styles.sheetOverlay : styles.overlay, { backgroundColor: scrimColor }, resolvedMaskStyle],
+      children: [
+        /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: dismissableMask ? hide : void 0 }),
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            entering: isSheet ? SlideInDown.springify().damping(overlayAnimations.sheet.enter.damping).stiffness(overlayAnimations.sheet.enter.stiffness).mass(overlayAnimations.sheet.enter.mass) : ZoomIn.springify().damping(overlayAnimations.dialog.enter.damping).stiffness(overlayAnimations.dialog.enter.stiffness).mass(overlayAnimations.dialog.enter.mass),
+            exiting: (isSheet ? SlideOutDown.duration(overlayAnimations.sheet.exitDuration).easing(Easing.in(Easing.ease)) : ZoomOut.duration(overlayAnimations.dialog.exitDuration).easing(Easing.in(Easing.ease))).withCallback((finished) => {
+              "worklet";
+              if (finished) runOnJS(handleExitFinished)();
+            }),
+            style: [
+              styles.panel,
+              isSheet && styles.sheetPanel,
+              { backgroundColor: surfaceColor, borderColor },
+              // Explicit `breakpoints` win even when responsive=false (web parity)
+              !isSheet && !hasExplicitWidth && (breakpoints != null || responsive) ? { width: responsiveWidth } : null,
+              resolvedStyle,
+              resolvedContentStyle
+            ],
+            children: contentMode != null ? contentMode : /* @__PURE__ */ jsxs(Fragment, { children: [
+              isSheet && /* @__PURE__ */ jsx(View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
+              colors && !isSheet && /* @__PURE__ */ jsx(View, { style: { height: 4, backgroundColor: colors.solid, borderTopLeftRadius: 20, borderTopRightRadius: 20 } }),
+              !hideHeader && headerRender != null && headerRender({ close: () => {
+                void hide();
+              } }),
+              !hideHeader && headerRender == null && rest.header != null && /* @__PURE__ */ jsxs(View, { style: [styles.header, { borderBottomColor: borderColor }, resolvedHeaderStyle], children: [
+                (icon || brandLogo) && colors && /* @__PURE__ */ jsx(View, { style: {
+                  width: 36,
+                  height: 36,
+                  borderRadius: 18,
+                  backgroundColor: colors.iconBg,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginRight: 12
+                }, children: brandLogo ? brandLogo : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "lg", color: colors.iconFg }) : icon }),
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 18, fontWeight: "700", color: textColor, flex: 1 }, children: rest.header }),
+                /* @__PURE__ */ jsx(Pressable, { onPress: hide, hitSlop: 8, children: closeIcon ?? /* @__PURE__ */ jsx(Text, { style: { fontSize: 18, color: subtextColor }, children: "\u2715" }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ScrollView,
+                {
+                  style: [styles.body, resolvedBodyStyle],
+                  contentContainerStyle: styles.bodyContent,
+                  showsVerticalScrollIndicator: false,
+                  children: content
+                }
+              ),
+              (footerRender != null || rest.footer != null) && /* @__PURE__ */ jsx(View, { style: [
+                styles.footer,
+                { borderTopColor: borderColor },
+                isSheet && { paddingBottom: 12 + insets.bottom },
+                resolvedFooterStyle
+              ], children: footerRender ? footerRender({ close: () => {
+                void hide();
+              } }) : rest.footer })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
 }
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.45)",
     justifyContent: "center",
     alignItems: "center",
     padding: 24
   },
   sheetOverlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.45)",
     justifyContent: "flex-end"
   },
   sheetPanel: {
@@ -168,17 +192,19 @@ const styles = StyleSheet.create({
     marginBottom: 6
   },
   panel: {
-    borderRadius: 16,
+    // 20 == radii.xl (no numeric radii resolver on native — see report).
+    borderRadius: 20,
     borderWidth: 1,
     minWidth: 250,
     maxWidth: "90%",
     maxHeight: "80%",
     overflow: "hidden",
-    elevation: 12,
+    // Subtle elevation: low opacity, wide blur, minimal offset.
+    elevation: 6,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
-    shadowRadius: 12
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20
   },
   header: {
     flexDirection: "row",