@lmb-it/kitsconcerto-native 0.1.242 → 0.1.244

package/animations/index.cjs

@@ -3,36 +3,46 @@
 const overlayAnimations = {
   // ── Backdrop / scrim ─────────────────────────────────────
   scrim: {
-    enterDuration: 200},
+    enterDuration: 120,
+    exitDuration: 100
+  },
   // ── Centered Dialog panel ────────────────────────────────
+  // Enter: critically-ish damped spring — snappy but settles cleanly (no
+  // ringing). Exit: timing-based zoom-out (springs are enter-only).
   dialog: {
-    enter: { damping: 0, stiffness: 600 }
+    enter: { damping: 26, stiffness: 420, mass: 1 },
+    exitDuration: 120
   },
   // ── Confirm dialog ───────────────────────────────────────
   confirm: {
     /** Centered confirm panel pop. */
-    enter: { damping: 0, stiffness: 600 },
+    enter: { damping: 26, stiffness: 420, mass: 1 },
     /** Floating severity-icon bubble — pops in slightly after the panel. */
-    icon: { damping: 0, stiffness: 600, delay: 100 },
+    icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },
     /** Content-only / prompt panel (no header/buttons chrome). */
-    content: { damping: 0, stiffness: 600 }
+    content: { damping: 26, stiffness: 420, mass: 1 },
+    /** Timed zoom-out for the confirm center/content panels. */
+    exitDuration: 120
   },
   // ── Bottom sheet (Dialog + Confirm, position="bottom") ───
+  // Slightly heavier damping/lower stiffness so the sheet glides up without
+  // overshoot. Exit: timed slide-down.
   sheet: {
-    enter: { damping: 0, stiffness: 600 }
+    enter: { damping: 30, stiffness: 400, mass: 1 },
+    exitDuration: 150
   },
   // ── Toast ────────────────────────────────────────────────
+  // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND
+  // translateY together, so there is no second concurrent layer to desync.
   toast: {
-    /** Toast slides up/down into view. */
-    slideInDuration: 100,
-    /** Toast slides back out. */
-    slideOutDuration: 200,
+    /** Merged fade+slide entrance (position-appropriate direction). */
+    enter: { damping: 30, stiffness: 400, mass: 1 },
+    /** Timed fade+slide out. */
+    exitDuration: 120,
     /** Re-positioning when toasts stack/unstack. */
-    layoutDuration: 200,
-    /** Inner toast card cross-fade in. */
-    itemEnterDuration: 200,
-    /** Inner toast card cross-fade out. */
-    itemExitDuration: 150
+    layoutDuration: 150,
+    /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */
+    keyboardGap: 8
   }
 };
 

package/animations/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /** Dimmed backdrop behind every overlay (fade). */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring). */\n    dialog: { enter: ISpringConfig };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig };\n    /** Bottom sheet shared by Dialog & Confirm (slide-up spring). */\n    sheet: { enter: ISpringConfig };\n    /** Toast — slide in/out, item cross-fade, and position re-layout. */\n    toast: {\n        slideInDuration: number;\n        slideOutDuration: number;\n        layoutDuration: number;\n        itemEnterDuration: number;\n        itemExitDuration: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 200,\n        exitDuration: 150,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    dialog: {\n        enter: { damping: 0, stiffness: 600 },\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 0, stiffness: 600 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 0, stiffness: 600, delay: 100 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 0, stiffness: 600 },\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    sheet: {\n        enter: { damping: 0, stiffness: 600 },\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    toast: {\n        /** Toast slides up/down into view. */\n        slideInDuration: 100,\n        /** Toast slides back out. */\n        slideOutDuration: 200,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 200,\n        /** Inner toast card cross-fade in. */\n        itemEnterDuration: 200,\n        /** Inner toast card cross-fade out. */\n        itemExitDuration: 150,\n    },\n};\n\nexport default overlayAnimations;\n"],"names":[],"mappings":";;AAiDO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAEnB,CAAA;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA;AAAI,GACxC;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA,EAAI;AAAA;AAAA,IAEpC,MAAM,EAAE,OAAA,EAAS,GAAG,SAAA,EAAW,GAAA,EAAK,OAAO,GAAA,EAAI;AAAA;AAAA,IAE/C,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA;AAAI,GAC1C;AAAA;AAAA,EAGA,KAAA,EAAO;AAAA,IACH,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA;AAAI,GACxC;AAAA;AAAA,EAGA,KAAA,EAAO;AAAA;AAAA,IAEH,eAAA,EAAiB,GAAA;AAAA;AAAA,IAEjB,gBAAA,EAAkB,GAAA;AAAA;AAAA,IAElB,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,iBAAA,EAAmB,GAAA;AAAA;AAAA,IAEnB,gBAAA,EAAkB;AAAA;AAE1B;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.mass()` — heavier = slower / more inertia. Defaults to 1. */\n    mass?: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /** Dimmed backdrop behind every overlay (fade in/out). */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring in, timed zoom-out). */\n    dialog: { enter: ISpringConfig; exitDuration: number };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig; exitDuration: number };\n    /** Bottom sheet shared by Dialog & Confirm (slide-up spring in, timed slide-down out). */\n    sheet: { enter: ISpringConfig; exitDuration: number };\n    /** Toast — single merged fade+slide entrance, timed exit, re-layout, keyboard gap. */\n    toast: {\n        enter: ISpringConfig;\n        exitDuration: number;\n        layoutDuration: number;\n        keyboardGap: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 120,\n        exitDuration: 100,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    // Enter: critically-ish damped spring — snappy but settles cleanly (no\n    // ringing). Exit: timing-based zoom-out (springs are enter-only).\n    dialog: {\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        exitDuration: 120,\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 26, stiffness: 420, mass: 1 },\n        /** Timed zoom-out for the confirm center/content panels. */\n        exitDuration: 120,\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    // Slightly heavier damping/lower stiffness so the sheet glides up without\n    // overshoot. Exit: timed slide-down.\n    sheet: {\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        exitDuration: 150,\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND\n    // translateY together, so there is no second concurrent layer to desync.\n    toast: {\n        /** Merged fade+slide entrance (position-appropriate direction). */\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        /** Timed fade+slide out. */\n        exitDuration: 120,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 150,\n        /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */\n        keyboardGap: 8,\n    },\n};\n\nexport default overlayAnimations;\n"],"names":[],"mappings":";;AAkDO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACJ,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,IAAA,EAAM,EAAE,OAAA,EAAS,EAAA,EAAI,WAAW,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,EAAA,EAAG;AAAA;AAAA,IAExD,SAAS,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAEhD,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA,IACH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA,IAEH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,YAAA,EAAc,GAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,WAAA,EAAa;AAAA;AAErB;;;;"}

package/animations/index.js

@@ -1,36 +1,46 @@
 const overlayAnimations = {
   // ── Backdrop / scrim ─────────────────────────────────────
   scrim: {
-    enterDuration: 200},
+    enterDuration: 120,
+    exitDuration: 100
+  },
   // ── Centered Dialog panel ────────────────────────────────
+  // Enter: critically-ish damped spring — snappy but settles cleanly (no
+  // ringing). Exit: timing-based zoom-out (springs are enter-only).
   dialog: {
-    enter: { damping: 0, stiffness: 600 }
+    enter: { damping: 26, stiffness: 420, mass: 1 },
+    exitDuration: 120
   },
   // ── Confirm dialog ───────────────────────────────────────
   confirm: {
     /** Centered confirm panel pop. */
-    enter: { damping: 0, stiffness: 600 },
+    enter: { damping: 26, stiffness: 420, mass: 1 },
     /** Floating severity-icon bubble — pops in slightly after the panel. */
-    icon: { damping: 0, stiffness: 600, delay: 100 },
+    icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },
     /** Content-only / prompt panel (no header/buttons chrome). */
-    content: { damping: 0, stiffness: 600 }
+    content: { damping: 26, stiffness: 420, mass: 1 },
+    /** Timed zoom-out for the confirm center/content panels. */
+    exitDuration: 120
   },
   // ── Bottom sheet (Dialog + Confirm, position="bottom") ───
+  // Slightly heavier damping/lower stiffness so the sheet glides up without
+  // overshoot. Exit: timed slide-down.
   sheet: {
-    enter: { damping: 0, stiffness: 600 }
+    enter: { damping: 30, stiffness: 400, mass: 1 },
+    exitDuration: 150
   },
   // ── Toast ────────────────────────────────────────────────
+  // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND
+  // translateY together, so there is no second concurrent layer to desync.
   toast: {
-    /** Toast slides up/down into view. */
-    slideInDuration: 100,
-    /** Toast slides back out. */
-    slideOutDuration: 200,
+    /** Merged fade+slide entrance (position-appropriate direction). */
+    enter: { damping: 30, stiffness: 400, mass: 1 },
+    /** Timed fade+slide out. */
+    exitDuration: 120,
     /** Re-positioning when toasts stack/unstack. */
-    layoutDuration: 200,
-    /** Inner toast card cross-fade in. */
-    itemEnterDuration: 200,
-    /** Inner toast card cross-fade out. */
-    itemExitDuration: 150
+    layoutDuration: 150,
+    /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */
+    keyboardGap: 8
   }
 };
 

package/animations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /** Dimmed backdrop behind every overlay (fade). */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring). */\n    dialog: { enter: ISpringConfig };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig };\n    /** Bottom sheet shared by Dialog & Confirm (slide-up spring). */\n    sheet: { enter: ISpringConfig };\n    /** Toast — slide in/out, item cross-fade, and position re-layout. */\n    toast: {\n        slideInDuration: number;\n        slideOutDuration: number;\n        layoutDuration: number;\n        itemEnterDuration: number;\n        itemExitDuration: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 200,\n        exitDuration: 150,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    dialog: {\n        enter: { damping: 0, stiffness: 600 },\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 0, stiffness: 600 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 0, stiffness: 600, delay: 100 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 0, stiffness: 600 },\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    sheet: {\n        enter: { damping: 0, stiffness: 600 },\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    toast: {\n        /** Toast slides up/down into view. */\n        slideInDuration: 100,\n        /** Toast slides back out. */\n        slideOutDuration: 200,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 200,\n        /** Inner toast card cross-fade in. */\n        itemEnterDuration: 200,\n        /** Inner toast card cross-fade out. */\n        itemExitDuration: 150,\n    },\n};\n\nexport default overlayAnimations;\n"],"names":[],"mappings":"AAiDO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAEnB,CAAA;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA;AAAI,GACxC;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA,EAAI;AAAA;AAAA,IAEpC,MAAM,EAAE,OAAA,EAAS,GAAG,SAAA,EAAW,GAAA,EAAK,OAAO,GAAA,EAAI;AAAA;AAAA,IAE/C,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA;AAAI,GAC1C;AAAA;AAAA,EAGA,KAAA,EAAO;AAAA,IACH,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,GAAA;AAAI,GACxC;AAAA;AAAA,EAGA,KAAA,EAAO;AAAA;AAAA,IAEH,eAAA,EAAiB,GAAA;AAAA;AAAA,IAEjB,gBAAA,EAAkB,GAAA;AAAA;AAAA,IAElB,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,iBAAA,EAAmB,GAAA;AAAA;AAAA,IAEnB,gBAAA,EAAkB;AAAA;AAE1B;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.mass()` — heavier = slower / more inertia. Defaults to 1. */\n    mass?: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /** Dimmed backdrop behind every overlay (fade in/out). */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring in, timed zoom-out). */\n    dialog: { enter: ISpringConfig; exitDuration: number };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig; exitDuration: number };\n    /** Bottom sheet shared by Dialog & Confirm (slide-up spring in, timed slide-down out). */\n    sheet: { enter: ISpringConfig; exitDuration: number };\n    /** Toast — single merged fade+slide entrance, timed exit, re-layout, keyboard gap. */\n    toast: {\n        enter: ISpringConfig;\n        exitDuration: number;\n        layoutDuration: number;\n        keyboardGap: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 120,\n        exitDuration: 100,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    // Enter: critically-ish damped spring — snappy but settles cleanly (no\n    // ringing). Exit: timing-based zoom-out (springs are enter-only).\n    dialog: {\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        exitDuration: 120,\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 26, stiffness: 420, mass: 1 },\n        /** Timed zoom-out for the confirm center/content panels. */\n        exitDuration: 120,\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    // Slightly heavier damping/lower stiffness so the sheet glides up without\n    // overshoot. Exit: timed slide-down.\n    sheet: {\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        exitDuration: 150,\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND\n    // translateY together, so there is no second concurrent layer to desync.\n    toast: {\n        /** Merged fade+slide entrance (position-appropriate direction). */\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        /** Timed fade+slide out. */\n        exitDuration: 120,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 150,\n        /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */\n        keyboardGap: 8,\n    },\n};\n\nexport default overlayAnimations;\n"],"names":[],"mappings":"AAkDO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACJ,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,IAAA,EAAM,EAAE,OAAA,EAAS,EAAA,EAAI,WAAW,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,EAAA,EAAG;AAAA;AAAA,IAExD,SAAS,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAEhD,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA,IACH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA,IAEH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,YAAA,EAAc,GAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,WAAA,EAAa;AAAA;AAErB;;;;"}

package/apps/mobile/src/Core/AutoComplete/index.cjs

@@ -15,6 +15,7 @@ const resolveLabel = (item, field) => {
   return String(item[field] ?? "");
 };
 const t = style.resolveThemeTokenForNative;
+const INPUT_CHROME_RADIUS = 10;
 const TEXT_STYLE_KEYS = /* @__PURE__ */ new Set([
   "fontSize",
   "fontFamily",
@@ -92,6 +93,13 @@ function AutoComplete({
   const [focused, setFocused] = React.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
   const [triggerLayout, setTriggerLayout] = React.useState(null);
+  const overlayAnchorRef = React.useRef(null);
+  const [overlayOrigin, setOverlayOrigin] = React.useState({ x: 0, y: 0 });
+  const measureOverlayOrigin = React.useCallback(() => {
+    overlayAnchorRef.current?.measureInWindow((x, y) => {
+      setOverlayOrigin((prev) => prev.x === x && prev.y === y ? prev : { x, y });
+    });
+  }, []);
   const [keyboardHeight, setKeyboardHeight] = React.useState(0);
   const onChangeRef = React.useRef(onChange);
   onChangeRef.current = onChange;
@@ -170,9 +178,10 @@ function AutoComplete({
       triggerRef.current?.measureInWindow((x, y, width, height) => {
         setTriggerLayout({ x, y, width, height });
       });
+      measureOverlayOrigin();
     }, 100);
     return () => clearTimeout(timer);
-  }, [keyboardHeight, selectedValues.length]);
+  }, [keyboardHeight, selectedValues.length, measureOverlayOrigin]);
   React.useEffect(() => {
     if (autoHighlight && flatData.length > 0 && panelVisible) {
       const firstNonGroup = flatData.findIndex((d) => !d.__group);
@@ -190,7 +199,8 @@ function AutoComplete({
     triggerRef.current?.measureInWindow((x, y, width, height) => {
       setTriggerLayout({ x, y, width, height });
     });
-  }, []);
+    measureOverlayOrigin();
+  }, [measureOverlayOrigin]);
   const hidePanel = React.useCallback(() => {
     if (__DEV__) console.log("[AC] hidePanel()");
     setPanelVisible((prev) => {
@@ -361,7 +371,15 @@ function AutoComplete({
   );
   const borderColor = invalid ? colors.borderInvalid : focused ? colors.borderFocus : colors.border;
   const showPanelContent = panelVisible && (flatData.length > 0 || showEmptyMessage || !!emptyMessage);
-  const resolvedBorderRadius = wrapperOverrides?.borderRadius ?? styles.inputWrapper.borderRadius;
+  const panelRadius = React.useMemo(() => {
+    const explicit = panelStyle?.borderRadius;
+    if (typeof explicit === "number") return explicit;
+    const wrapperRadius = wrapperOverrides?.borderRadius;
+    if (typeof wrapperRadius === "number" && wrapperRadius > 0) {
+      return Math.min(wrapperRadius, 16);
+    }
+    return INPUT_CHROME_RADIUS;
+  }, [panelStyle, wrapperOverrides]);
   const panelGeometry = React.useMemo(() => {
     if (!showPanelContent || !triggerLayout) return null;
     const screen = reactNative.Dimensions.get("window");
@@ -382,6 +400,8 @@ function AutoComplete({
       maxH
     };
   }, [showPanelContent, triggerLayout, scrollHeight, keyboardHeight]);
+  const panelTop = panelGeometry ? panelGeometry.top - overlayOrigin.y : 0;
+  const panelLeft = panelGeometry ? panelGeometry.left - overlayOrigin.x : 0;
   if (__DEV__)
     console.log("[AC] render", {
       panelVisible,
@@ -405,6 +425,7 @@ function AutoComplete({
               triggerRef.current?.measureInWindow((x, y, width, height) => {
                 setTriggerLayout({ x, y, width, height });
               });
+              measureOverlayOrigin();
             },
             style: [
               styles.inputWrapper,
@@ -465,74 +486,86 @@ function AutoComplete({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           index.Portal,
           {
             isOpen: !!panelGeometry,
             onRequestClose: hidePanel,
             style: { zIndex: 9999, elevation: 9999 },
-            children: panelGeometry && /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Pressable,
-              {
-                style: reactNative.StyleSheet.absoluteFillObject,
-                onPress: () => {
-                  hidePanel();
-                  reactNative.Keyboard.dismiss();
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactNative.View,
-                  {
-                    onStartShouldSetResponder: () => true,
-                    onResponderTerminationRequest: () => false,
-                    onLayout: (e) => {
-                      if (__DEV__)
-                        console.log("[AC] panel onLayout (rendered)", e.nativeEvent.layout);
-                    },
-                    style: [
-                      styles.popoverPanel,
-                      {
-                        position: "absolute",
-                        top: panelGeometry.top,
-                        left: panelGeometry.left,
-                        width: panelGeometry.width,
-                        maxHeight: panelGeometry.maxH,
-                        borderColor: colors.border,
-                        backgroundColor: colors.bg,
-                        borderRadius: Math.min(resolvedBorderRadius, 16)
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.View,
+                {
+                  ref: overlayAnchorRef,
+                  pointerEvents: "none",
+                  style: styles.overlayAnchor,
+                  onLayout: measureOverlayOrigin
+                }
+              ),
+              panelGeometry && /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Pressable,
+                {
+                  style: reactNative.StyleSheet.absoluteFillObject,
+                  onPress: () => {
+                    hidePanel();
+                    reactNative.Keyboard.dismiss();
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.View,
+                    {
+                      onStartShouldSetResponder: () => true,
+                      onResponderTerminationRequest: () => false,
+                      onLayout: (e) => {
+                        if (__DEV__)
+                          console.log("[AC] panel onLayout (rendered)", e.nativeEvent.layout);
                       },
-                      panelStyle
-                    ],
-                    children: [
-                      flatData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                        reactNative.FlatList,
+                      style: [
+                        styles.popoverPanel,
                         {
-                          data: flatData,
-                          keyExtractor: (_, i) => String(i),
-                          renderItem,
-                          extraData: selectItem,
-                          keyboardShouldPersistTaps: "always",
-                          nestedScrollEnabled: true,
-                          style: { maxHeight: panelGeometry.maxH },
-                          getItemLayout: virtualScrollerOptions ? (_, index) => ({
-                            length: virtualScrollerOptions.itemSize,
-                            offset: virtualScrollerOptions.itemSize * index,
-                            index
-                          }) : void 0
-                        }
-                      ) : (
-                        // Empty state uses the same row layout as a real option
-                        // so forceSelection + "no matches" still feels like a
-                        // list — just with a single non-tappable "no results"
-                        // row. The text is driven by the `emptyMessage` prop so
-                        // consumers can pass a translated string.
-                        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.option, styles.emptyRow], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.optionText, { color: colors.emptyText }], children: emptyMessage }) })
-                      ),
-                      panelFooterTemplate?.()
-                    ]
-                  }
-                )
-              }
-            )
+                          position: "absolute",
+                          // OVERLAY space (window-space geometry minus the overlay origin).
+                          top: panelTop,
+                          left: panelLeft,
+                          width: panelGeometry.width,
+                          maxHeight: panelGeometry.maxH,
+                          borderColor: colors.border,
+                          backgroundColor: colors.bg,
+                          borderRadius: panelRadius
+                        },
+                        panelStyle
+                      ],
+                      children: [
+                        flatData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                          reactNative.FlatList,
+                          {
+                            data: flatData,
+                            keyExtractor: (_, i) => String(i),
+                            renderItem,
+                            extraData: selectItem,
+                            keyboardShouldPersistTaps: "always",
+                            nestedScrollEnabled: true,
+                            style: { maxHeight: panelGeometry.maxH },
+                            getItemLayout: virtualScrollerOptions ? (_, index) => ({
+                              length: virtualScrollerOptions.itemSize,
+                              offset: virtualScrollerOptions.itemSize * index,
+                              index
+                            }) : void 0
+                          }
+                        ) : (
+                          // Empty state uses the same row layout as a real option
+                          // so forceSelection + "no matches" still feels like a
+                          // list — just with a single non-tappable "no results"
+                          // row. The text is driven by the `emptyMessage` prop so
+                          // consumers can pass a translated string.
+                          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.option, styles.emptyRow], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.optionText, { color: colors.emptyText }], children: emptyMessage }) })
+                        ),
+                        panelFooterTemplate?.()
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
           }
         )
       ]
@@ -593,6 +626,14 @@ const styles = reactNative.StyleSheet.create({
     fontSize: 12,
     paddingHorizontal: 2
   },
+  // Zero-size, non-interactive probe at the overlay container's origin.
+  overlayAnchor: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  },
   popoverPanel: {
     position: "absolute",
     borderWidth: 1,