@stackflow/plugin-basic-ui 1.3.5-alpha.3 → 1.4.1

package/dist/index.js

@@ -62,7 +62,7 @@ var IconBack = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
-        d: "M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",
+        d: "M16.66 3.23C16.96 3.53 16.96 4.02 16.66 4.32L8.97999 12L16.66 19.68C16.96 19.98 16.96 20.47 16.66 20.77C16.36 21.07 15.87 21.07 15.57 20.77L7.33999 12.55C7.03999 12.25 7.03999 11.76 7.33999 11.46L15.56 3.23C15.86 2.93 16.35 2.93 16.65 3.23H16.66Z",
         fill: "currentColor"
       }
     )
@@ -365,13 +365,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) => {
@@ -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,30 +628,31 @@ 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");
 var AppBar = (0, import_react7.forwardRef)(
   ({
     title,
-    appendLeft,
-    appendRight,
+    renderLeft,
+    renderRight,
     backButton: backButton2,
     closeButton: closeButton2,
     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, {});
@@ -758,14 +775,15 @@ var AppBar = (0, import_react7.forwardRef)(
         }
       );
     };
-    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
+    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         ref,
         className: appBar({
           border,
-          presentModalFullScreen
+          modalPresentationStyle,
+          activityEnterStyle
         }),
         style: (0, import_dynamic2.assignInlineVars)(
           compactMap({
@@ -790,7 +808,7 @@ var AppBar = (0, import_react7.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: left, children: [
               closeButtonLocation === "left" && renderCloseButton(),
               renderBackButton(),
-              appendLeft == null ? void 0 : appendLeft()
+              renderLeft == null ? void 0 : renderLeft()
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: centerRef, className: center, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
@@ -813,7 +831,7 @@ var AppBar = (0, import_react7.forwardRef)(
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: right, children: [
-              appendRight == null ? void 0 : appendRight(),
+              renderRight == null ? void 0 : renderRight(),
               closeButtonLocation === "right" && renderCloseButton()
             ] })
           ] })
@@ -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);
@@ -923,13 +961,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__ */ (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 +980,8 @@ var AppScreen = ({
               {
                 className: paper({
                   hasAppBar,
-                  presentModalFullScreen
+                  modalPresentationStyle,
+                  activityEnterStyle
                 }),
                 ref: paperRef,
                 children
@@ -1028,6 +1071,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__ */ (0, import_jsx_runtime6.jsx)("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: paper2, onClick: onPaperClick, children }) })
     }
   );
@@ -1108,6 +1154,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__ */ (0, import_jsx_runtime7.jsx)("div", { className: dim3, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: paper3, onClick: onPaperClick, children }) })
     }
   );