@stackflow/plugin-basic-ui 1.3.3-alpha.0 → 1.3.4-alpha.0

package/dist/index.js

@@ -107,7 +107,7 @@ var import_react = require("react");
 
 // src/basicUIPlugin.css.ts
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", iconColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", textColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", backgroundColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)", forceSafeAreaInsetTop: "var(--stackflow-plugin-basic-ui-force-safe-area-inset-top)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
+var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", iconColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", textColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", backgroundColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)", minSafeAreaInsetTop: "var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
 var stackWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/utils/compact.ts
@@ -199,7 +199,7 @@ var basicUIPlugin = (options) => () => ({
                 [globalVars.appBar.height]: (_e = _options.appBar) == null ? void 0 : _e.height,
                 [globalVars.appBar.iconColor]: (_f = _options.appBar) == null ? void 0 : _f.iconColor,
                 [globalVars.appBar.textColor]: (_g = _options.appBar) == null ? void 0 : _g.textColor,
-                [globalVars.appBar.forceSafeAreaInsetTop]: (_h = _options.appBar) == null ? void 0 : _h.forceSafeAreaInsetTop,
+                [globalVars.appBar.minSafeAreaInsetTop]: (_h = _options.appBar) == null ? void 0 : _h.minSafeAreaInsetTop,
                 [globalVars.bottomSheet.borderRadius]: (_i = _options.bottomSheet) == null ? void 0 : _i.borderRadius,
                 [globalVars.modal.borderRadius]: (_j = _options.modal) == null ? void 0 : _j.borderRadius
               })
@@ -365,13 +365,28 @@ var OFFSET_PX_CUPERTINO = 80;
 function useStyleEffectOffset({
   refs,
   theme,
+  activityEnterStyle,
   hasEffect
 }) {
   useStyleEffect({
     styleName: "offset",
     refs,
     effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
-      const transform = theme === "cupertino" ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
+      let transform;
+      let opacity;
+      switch (theme) {
+        case "cupertino": {
+          transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
+          opacity = "1";
+          break;
+        }
+        case "android":
+        default: {
+          transform = activityEnterStyle === "slideInLeft" ? `translate3d(-50%, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
+          opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
+          break;
+        }
+      }
       const cleanup = () => {
         requestNextFrame(() => {
           refs2.forEach((ref) => {
@@ -380,6 +395,7 @@ function useStyleEffectOffset({
             }
             const $el = ref.current;
             $el.style.transform = "";
+            $el.style.opacity = "";
             listenOnce($el, "transitionend", () => {
               $el.style.transition = "";
             });
@@ -395,6 +411,7 @@ function useStyleEffectOffset({
             }
             ref.current.style.transition = globalVars.computedTransitionDuration;
             ref.current.style.transform = transform;
+            ref.current.style.opacity = opacity;
           });
           switch (activityTransitionState) {
             case "enter-done":
@@ -425,10 +442,10 @@ function useStyleEffectOffset({
 var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
 var appScreen = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1dlf4349", "enter-done": "_1dlf434a", "exit-active": "_1dlf434b", "exit-done": "_1dlf434c" } }, defaultVariants: {}, compoundVariants: [] });
 var dim = "_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348";
-var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
+var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434n dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434o" } }, defaultVariants: {}, compoundVariants: [] });
 var exitActive = "_1dlf434b";
 var exitDone = "_1dlf434c";
-var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, presentModalFullScreen: { true: "_1dlf434l" } }, defaultVariants: {}, compoundVariants: [] });
+var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434l" }, activityEnterStyle: { slideInLeft: "_1dlf434m" } }, defaultVariants: {}, compoundVariants: [] });
 var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { center: { mainWidth: "var(--_1dlf4345)" } } };
 
 // src/hooks/useStyleEffectSwipeBack.ts
@@ -611,17 +628,17 @@ var import_react7 = require("react");
 
 // src/components/AppBar.css.ts
 var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
-var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, presentModalFullScreen: { true: "_1yk3a454" } }, defaultVariants: {}, compoundVariants: [] });
-var backButton = "_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
+var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
+var backButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
 var center = "dhthxq9 dhthxq7 dhthxq8 _1yk3a450";
-var centerMain = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a45b", variantClassNames: { hasLeft: { true: "_1yk3a45c" } }, defaultVariants: {}, compoundVariants: [] });
-var centerMainEdge = "_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf";
-var centerText = "_1yk3a45e dhthxqc dhthxqd dhthxq0";
-var closeButton = "_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
-var container = "_1yk3a456 dhthxqa dhthxq7 _1yk3a451";
-var left = "_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
-var right = "_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
-var safeArea = "_1yk3a455";
+var centerMain = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
+var centerMainEdge = "_1yk3a45e dhthxqi dhthxq4 dhthxq2 dhthxqf";
+var centerText = "_1yk3a45f dhthxqc dhthxqd dhthxq0";
+var closeButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
+var container = "_1yk3a457 dhthxqa dhthxq7 _1yk3a451";
+var left = "_1yk3a458 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
+var right = "_1yk3a45g dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
+var safeArea = "_1yk3a456";
 
 // src/components/AppBar.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -635,6 +652,7 @@ var AppBar = (0, import_react7.forwardRef)(
     closeButtonLocation = "left",
     border = true,
     modalPresentationStyle,
+    activityEnterStyle,
     iconColor,
     iconColorTransitionDuration,
     textColor,
@@ -661,7 +679,6 @@ var AppBar = (0, import_react7.forwardRef)(
       innerRef: centerRef,
       enable: globalOptions.theme === "cupertino"
     });
-    const presentModalFullScreen = modalPresentationStyle === "fullScreen";
     const onBackClick = (e) => {
       if (backButton2 && "onClick" in backButton2 && backButton2.onClick) {
         backButton2.onClick(e);
@@ -709,7 +726,7 @@ var AppBar = (0, import_react7.forwardRef)(
             if (globalBackButton && "renderIcon" in globalBackButton && globalBackButton.renderIcon) {
               return globalBackButton.renderIcon();
             }
-            if (presentModalFullScreen) {
+            if (modalPresentationStyle === "fullScreen") {
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconClose_default, {});
             }
             return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBack_default, {});
@@ -765,7 +782,8 @@ var AppBar = (0, import_react7.forwardRef)(
         ref,
         className: appBar({
           border,
-          presentModalFullScreen
+          modalPresentationStyle,
+          activityEnterStyle
         }),
         style: (0, import_dynamic2.assignInlineVars)(
           compactMap({
@@ -836,7 +854,8 @@ var AppScreen = ({
   dimBackgroundColor,
   appBar: appBar2,
   preventSwipeBack,
-  modalPresentationStyle,
+  CUPERTINO_ONLY_modalPresentationStyle,
+  ANDROID_ONLY_activityEnterStyle,
   children
 }) => {
   var _a, _b;
@@ -848,36 +867,55 @@ var AppScreen = ({
   const paperRef = (0, import_react9.useRef)(null);
   const edgeRef = (0, import_react9.useRef)(null);
   const appBarRef = (0, import_react9.useRef)(null);
-  const presentModalFullScreen = modalPresentationStyle === "fullScreen";
-  const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
+  const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
+  const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
+  const swipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
+  const hasAppBar = !!appBar2;
+  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
+  let zIndexDim;
+  let zIndexPaper;
+  let zIndexEdge;
+  let zIndexAppBar;
+  switch (globalOptions.theme) {
+    case "cupertino": {
+      zIndexDim = zIndexBase + (modalPresentationStyle === "fullScreen" ? 2 : 0);
+      zIndexPaper = zIndexBase + (hasAppBar && modalPresentationStyle !== "fullScreen" ? 1 : 3);
+      zIndexEdge = zIndexBase + 4;
+      zIndexAppBar = zIndexBase + 7;
+      break;
+    }
+    case "android":
+    default: {
+      zIndexDim = zIndexBase;
+      zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);
+      zIndexEdge = zIndexBase + 4;
+      zIndexAppBar = zIndexBase + (activityEnterStyle === "slideInLeft" ? 7 : 4);
+      break;
+    }
+  }
+  const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
+  const lazyTransitionState = useLazy(transitionState);
   useStyleEffectHide({
     refs: [appScreenRef],
     hasEffect: true
   });
   useStyleEffectOffset({
+    refs: globalOptions.theme === "cupertino" || activityEnterStyle === "slideInLeft" ? [paperRef] : [paperRef, appBarRef],
     theme: globalOptions.theme,
-    refs: globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
-    hasEffect: !presentModalFullScreen
+    activityEnterStyle,
+    hasEffect: modalPresentationStyle !== "fullScreen"
   });
   useStyleEffectSwipeBack({
-    theme: globalOptions.theme,
     dimRef,
     edgeRef,
     paperRef,
-    hasEffect: true,
+    theme: globalOptions.theme,
     prevented: swipeBackPrevented,
     onSwiped() {
       pop();
-    }
+    },
+    hasEffect: true
   });
-  const hasAppBar = !!appBar2;
-  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
-  const zIndexDim = zIndexBase;
-  const zIndexPaper = zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
-  const zIndexEdge = zIndexBase + 4;
-  const zIndexAppBar = globalOptions.theme === "cupertino" ? zIndexBase + 7 : zIndexBase + 4;
-  const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
-  const lazyTransitionState = useLazy(transitionState);
   const onAppBarTopClick = (e) => {
     var _a2, _b2;
     (_a2 = appBar2 == null ? void 0 : appBar2.onTopClick) == null ? void 0 : _a2.call(appBar2, e);
@@ -924,12 +962,13 @@ var AppScreen = ({
             })
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
+            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
             appBar2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               AppBar_default,
               __spreadProps(__spreadValues({}, appBar2), {
                 ref: appBarRef,
                 modalPresentationStyle,
+                activityEnterStyle,
                 onTopClick: onAppBarTopClick
               })
             ),
@@ -938,7 +977,8 @@ var AppScreen = ({
               {
                 className: paper({
                   hasAppBar,
-                  presentModalFullScreen
+                  modalPresentationStyle,
+                  activityEnterStyle
                 }),
                 ref: paperRef,
                 children