@limonify/zest-ui 0.1.0 → 0.1.2

package/lib/combobox/portal/ComboboxPortal.js

@@ -16,7 +16,7 @@ function ComboboxPortal(props) {
     if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
             setOpen(false, event);
         }, children: children }));
 }

package/lib/dialog/portal/DialogPortal.d.ts

@@ -5,8 +5,10 @@ import * as React from 'react';
  * Implemented with React Native's `Modal`, which mounts its children at the
  * root of the native view hierarchy, contains accessibility focus, and wires
  * the Android hardware back button (and Escape on web) to `onRequestClose`.
- * Rendering is headless: `animationType` is `"none"` so consumers own all
- * animation.
+ * The Modal uses `animationType="fade"` so open/close get a smooth native
+ * cross-fade (including the exit, which a consumer-driven animation can't cover
+ * because the Modal unmounts on close). Consumers still layer their own
+ * enter transitions (scale/slide) on the popup on top of this fade.
  */
 export declare function DialogPortal(props: DialogPortal.Props): React.JSX.Element | null;
 export interface DialogPortalProps {

package/lib/dialog/portal/DialogPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogPortal.d.ts","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,4BA2BrD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACvC"}
+{"version":3,"file":"DialogPortal.d.ts","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,4BA2BrD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACvC"}

package/lib/dialog/portal/DialogPortal.js

@@ -14,8 +14,10 @@ const reasons_1 = require("../../utils/reasons");
  * Implemented with React Native's `Modal`, which mounts its children at the
  * root of the native view hierarchy, contains accessibility focus, and wires
  * the Android hardware back button (and Escape on web) to `onRequestClose`.
- * Rendering is headless: `animationType` is `"none"` so consumers own all
- * animation.
+ * The Modal uses `animationType="fade"` so open/close get a smooth native
+ * cross-fade (including the exit, which a consumer-driven animation can't cover
+ * because the Modal unmounts on close). Consumers still layer their own
+ * enter transitions (scale/slide) on the popup on top of this fade.
  */
 function DialogPortal(props) {
     const { children, keepMounted = false } = props;
@@ -25,7 +27,7 @@ function DialogPortal(props) {
     if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(DialogPortalContext_1.DialogPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
+    return ((0, jsx_runtime_1.jsx)(DialogPortalContext_1.DialogPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
                 store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
             }, children: children }) }));
 }

package/lib/dialog/portal/DialogPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogPortal.js","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAiBb,oCA2BC;;AA1CD,+CAAgE;AAChE,iEAAiE;AACjE,+DAA4D;AAC5D,mFAAgF;AAChF,iDAA8C;AAE9C;;;;;;;;GAQG;AACH,SAAgB,YAAY,CAAC,KAAyB;IACpD,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,KAAK,GAAG,IAAA,wCAAoB,GAAE,CAAC;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEpC,MAAM,YAAY,GAAG,IAAI,IAAI,WAAW,CAAC;IACzC,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,yCAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC9C,uBAAC,oBAAK,IACJ,WAAW,QACX,OAAO,EAAE,IAAI,EACb,aAAa,EAAC,MAAM,EACpB,oBAAoB,QACpB,wBAAwB,QACxB,cAAc,EAAE,CAAC,KAAoC,EAAE,EAAE;gBACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,IAAA,mDAAwB,EAAC,iBAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAC3E,CAAC,YAEA,QAAQ,GACH,GACqB,CAChC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DialogPortal.js","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAmBb,oCA2BC;;AA5CD,+CAAgE;AAChE,iEAAiE;AACjE,+DAA4D;AAC5D,mFAAgF;AAChF,iDAA8C;AAE9C;;;;;;;;;;GAUG;AACH,SAAgB,YAAY,CAAC,KAAyB;IACpD,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,KAAK,GAAG,IAAA,wCAAoB,GAAE,CAAC;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEpC,MAAM,YAAY,GAAG,IAAI,IAAI,WAAW,CAAC;IACzC,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,yCAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC9C,uBAAC,oBAAK,IACJ,WAAW,QACX,OAAO,EAAE,IAAI,EACb,aAAa,EAAC,MAAM,EACpB,oBAAoB,QACpB,wBAAwB,QACxB,cAAc,EAAE,CAAC,KAAoC,EAAE,EAAE;gBACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,IAAA,mDAAwB,EAAC,iBAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAC3E,CAAC,YAEA,QAAQ,GACH,GACqB,CAChC,CAAC;AACJ,CAAC"}

package/lib/menu/portal/MenuPortal.js

@@ -25,7 +25,7 @@ function MenuPortal(props) {
     if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(MenuPortalContext_1.MenuPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
+    return ((0, jsx_runtime_1.jsx)(MenuPortalContext_1.MenuPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
                 const eventDetails = (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event);
                 store.setOpen(false, eventDetails);
                 // A submenu closes itself; `closeParentOnEsc` dismisses the whole menu

package/lib/popover/portal/PopoverPortal.js

@@ -27,7 +27,7 @@ function PopoverPortal(props) {
     if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(PopoverPortalContext_1.PopoverPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
+    return ((0, jsx_runtime_1.jsx)(PopoverPortalContext_1.PopoverPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
                 store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
             }, children: children }) }));
 }

package/lib/select/portal/SelectPortal.js

@@ -21,7 +21,7 @@ function SelectPortal(props) {
     if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(SelectPortalContext_1.SelectPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
+    return ((0, jsx_runtime_1.jsx)(SelectPortalContext_1.SelectPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
                 store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
             }, children: children }) }));
 }

package/lib/tooltip/portal/TooltipPortal.js

@@ -26,7 +26,7 @@ function TooltipPortal(props) {
     if (!shouldRender) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(TooltipPortalContext_1.TooltipPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsxs)(react_native_1.Modal, { transparent: true, visible: open, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
+    return ((0, jsx_runtime_1.jsx)(TooltipPortalContext_1.TooltipPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsxs)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
                 store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
             }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, onStartShouldSetResponder: () => true, onResponderRelease: (event) => {
                         store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.outsidePress, event));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limonify/zest-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Base UI for React Native — headless, unstyled, accessible primitive components.",
   "license": "MIT",
   "repository": {
@@ -42,19 +42,19 @@
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.79.0",
-    "react-native-gesture-handler": ">=2.0.0"
+    "react-native-gesture-handler": ">=3.0.0"
   },
   "devDependencies": {
     "@babel/runtime": "^8.0.0",
     "@testing-library/react-native": "^14.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.2.2",
-    "expo": "~57.0.4",
+    "expo": "~57.0.7",
     "jest": "^29.7.0",
-    "jest-expo": "~57.0.1",
+    "jest-expo": "~57.0.2",
     "react": "19.2.3",
     "react-native": "0.86.0",
-    "react-native-gesture-handler": "~2.32.0",
+    "react-native-gesture-handler": "~3.1.0",
     "typescript": "~6.0.3"
   },
   "dependencies": {

package/src/combobox/portal/ComboboxPortal.tsx

@@ -21,7 +21,7 @@ export function ComboboxPortal(props: ComboboxPortal.Props) {
     <Modal
       transparent
       visible={open}
-      animationType="none"
+      animationType="fade"
       statusBarTranslucent
       navigationBarTranslucent
       onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/dialog/portal/DialogPortal.tsx

@@ -12,8 +12,10 @@ import { REASONS } from '../../utils/reasons';
  * Implemented with React Native's `Modal`, which mounts its children at the
  * root of the native view hierarchy, contains accessibility focus, and wires
  * the Android hardware back button (and Escape on web) to `onRequestClose`.
- * Rendering is headless: `animationType` is `"none"` so consumers own all
- * animation.
+ * The Modal uses `animationType="fade"` so open/close get a smooth native
+ * cross-fade (including the exit, which a consumer-driven animation can't cover
+ * because the Modal unmounts on close). Consumers still layer their own
+ * enter transitions (scale/slide) on the popup on top of this fade.
  */
 export function DialogPortal(props: DialogPortal.Props) {
   const { children, keepMounted = false } = props;
@@ -31,7 +33,7 @@ export function DialogPortal(props: DialogPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/menu/portal/MenuPortal.tsx

@@ -31,7 +31,7 @@ export function MenuPortal(props: MenuPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/popover/portal/PopoverPortal.tsx

@@ -33,7 +33,7 @@ export function PopoverPortal(props: PopoverPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/select/portal/SelectPortal.tsx

@@ -27,7 +27,7 @@ export function SelectPortal(props: SelectPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/tooltip/portal/TooltipPortal.tsx

@@ -38,7 +38,7 @@ export function TooltipPortal(props: TooltipPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {