@stackflow/plugin-basic-ui 1.3.4 → 1.4.0

package/dist/index.mjs

@@ -335,13 +335,28 @@ var OFFSET_PX_CUPERTINO = 80;
 function useStyleEffectOffset({
   refs,
   theme,
-  hasEffect
+  activityEnterStyle,
+  hasEffect = false
 }) {
   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) => {
@@ -350,6 +365,7 @@ function useStyleEffectOffset({
             }
             const $el = ref.current;
             $el.style.transform = "";
+            $el.style.opacity = "";
             listenOnce($el, "transitionend", () => {
               $el.style.transition = "";
             });
@@ -365,6 +381,7 @@ function useStyleEffectOffset({
             }
             ref.current.style.transition = globalVars.computedTransitionDuration;
             ref.current.style.transform = transform;
+            ref.current.style.opacity = opacity;
           });
           switch (activityTransitionState) {
             case "enter-done":
@@ -395,10 +412,10 @@ function useStyleEffectOffset({
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
 var appScreen = _7a4682({ 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 = _7a4682({ defaultClassName: "_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
+var edge = _7a4682({ defaultClassName: "_1dlf434n dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434o" } }, defaultVariants: {}, compoundVariants: [] });
 var exitActive = "_1dlf434b";
 var exitDone = "_1dlf434c";
-var paper = _7a4682({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, presentModalFullScreen: { true: "_1dlf434l" } }, defaultVariants: {}, compoundVariants: [] });
+var paper = _7a4682({ 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
@@ -581,30 +598,31 @@ import { forwardRef, useRef } from "react";
 
 // src/components/AppBar.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
-var appBar = _7a4683({ 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 = _7a4683({ 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 = _7a4683({ 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 = _7a4683({ 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
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var AppBar = forwardRef(
   ({
     title,
-    appendLeft,
-    appendRight,
+    renderLeft,
+    renderRight,
     backButton: backButton2,
     closeButton: closeButton2,
     closeButtonLocation = "left",
     border = true,
     modalPresentationStyle,
+    activityEnterStyle,
     iconColor,
     iconColorTransitionDuration,
     textColor,
@@ -631,7 +649,6 @@ var AppBar = forwardRef(
       innerRef: centerRef,
       enable: globalOptions.theme === "cupertino"
     });
-    const presentModalFullScreen = modalPresentationStyle === "fullScreen";
     const onBackClick = (e) => {
       if (backButton2 && "onClick" in backButton2 && backButton2.onClick) {
         backButton2.onClick(e);
@@ -679,7 +696,7 @@ var AppBar = forwardRef(
             if (globalBackButton && "renderIcon" in globalBackButton && globalBackButton.renderIcon) {
               return globalBackButton.renderIcon();
             }
-            if (presentModalFullScreen) {
+            if (modalPresentationStyle === "fullScreen") {
               return /* @__PURE__ */ jsx4(IconClose_default, {});
             }
             return /* @__PURE__ */ jsx4(IconBack_default, {});
@@ -728,14 +745,15 @@ var AppBar = forwardRef(
         }
       );
     };
-    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
+    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
     return /* @__PURE__ */ jsxs2(
       "div",
       {
         ref,
         className: appBar({
           border,
-          presentModalFullScreen
+          modalPresentationStyle,
+          activityEnterStyle
         }),
         style: assignInlineVars2(
           compactMap({
@@ -760,7 +778,7 @@ var AppBar = forwardRef(
             /* @__PURE__ */ jsxs2("div", { className: left, children: [
               closeButtonLocation === "left" && renderCloseButton(),
               renderBackButton(),
-              appendLeft == null ? void 0 : appendLeft()
+              renderLeft == null ? void 0 : renderLeft()
             ] }),
             /* @__PURE__ */ jsx4("div", { ref: centerRef, className: center, children: /* @__PURE__ */ jsxs2(
               "div",
@@ -783,7 +801,7 @@ var AppBar = forwardRef(
               }
             ) }),
             /* @__PURE__ */ jsxs2("div", { className: right, children: [
-              appendRight == null ? void 0 : appendRight(),
+              renderRight == null ? void 0 : renderRight(),
               closeButtonLocation === "right" && renderCloseButton()
             ] })
           ] })
@@ -806,7 +824,8 @@ var AppScreen = ({
   dimBackgroundColor,
   appBar: appBar2,
   preventSwipeBack,
-  modalPresentationStyle,
+  CUPERTINO_ONLY_modalPresentationStyle,
+  ANDROID_ONLY_activityEnterStyle,
   children
 }) => {
   var _a, _b;
@@ -818,36 +837,55 @@ var AppScreen = ({
   const paperRef = useRef2(null);
   const edgeRef = useRef2(null);
   const appBarRef = useRef2(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);
@@ -893,13 +931,17 @@ var AppScreen = ({
               [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
             })
           ),
+          "data-stackflow-component-name": "AppScreen",
+          "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
+          "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
           children: [
-            /* @__PURE__ */ jsx5("div", { className: dim, ref: dimRef }),
+            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ jsx5("div", { className: dim, ref: dimRef }),
             appBar2 && /* @__PURE__ */ jsx5(
               AppBar_default,
               __spreadProps(__spreadValues({}, appBar2), {
                 ref: appBarRef,
                 modalPresentationStyle,
+                activityEnterStyle,
                 onTopClick: onAppBarTopClick
               })
             ),
@@ -908,7 +950,8 @@ var AppScreen = ({
               {
                 className: paper({
                   hasAppBar,
-                  presentModalFullScreen
+                  modalPresentationStyle,
+                  activityEnterStyle
                 }),
                 ref: paperRef,
                 children
@@ -998,6 +1041,9 @@ var BottomSheet = ({
           [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
         })
       ),
+      "data-stackflow-component-name": "BottomSheet",
+      "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
+      "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
       children: /* @__PURE__ */ jsx6("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx6("div", { className: paper2, onClick: onPaperClick, children }) })
     }
   );
@@ -1078,6 +1124,9 @@ var Modal = ({
           [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
         })
       ),
+      "data-stackflow-component-name": "Modal",
+      "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
+      "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
       children: /* @__PURE__ */ jsx7("div", { className: dim3, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx7("div", { className: paper3, onClick: onPaperClick, children }) })
     }
   );