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

package/dist/index.mjs

@@ -222,7 +222,7 @@ function useMaxWidth({
       setMaxWidth(screenWidth - 2 * sideMargin);
     });
     return dispose;
-  }, []);
+  });
   return {
     maxWidth
   };
@@ -335,28 +335,13 @@ var OFFSET_PX_CUPERTINO = 80;
 function useStyleEffectOffset({
   refs,
   theme,
-  activityEnterStyle,
   hasEffect
 }) {
   useStyleEffect({
     styleName: "offset",
     refs,
     effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
-      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 transform = theme === "cupertino" ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
       const cleanup = () => {
         requestNextFrame(() => {
           refs2.forEach((ref) => {
@@ -365,7 +350,6 @@ function useStyleEffectOffset({
             }
             const $el = ref.current;
             $el.style.transform = "";
-            $el.style.opacity = "";
             listenOnce($el, "transitionend", () => {
               $el.style.transition = "";
             });
@@ -381,7 +365,6 @@ function useStyleEffectOffset({
             }
             ref.current.style.transition = globalVars.computedTransitionDuration;
             ref.current.style.transform = transform;
-            ref.current.style.opacity = opacity;
           });
           switch (activityTransitionState) {
             case "enter-done":
@@ -412,10 +395,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: "_1dlf434n dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434o" } }, defaultVariants: {}, compoundVariants: [] });
+var edge = _7a4682({ defaultClassName: "_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434n" } }, 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" }, modalPresentationStyle: { fullScreen: "_1dlf434l" }, activityEnterStyle: { slideInLeft: "_1dlf434m" } }, defaultVariants: {}, compoundVariants: [] });
+var paper = _7a4682({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, presentModalFullScreen: { true: "_1dlf434l" } }, 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
@@ -598,17 +581,17 @@ 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" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
-var backButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
+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 center = "dhthxq9 dhthxq7 dhthxq8 _1yk3a450";
-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";
+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";
 
 // src/components/AppBar.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -622,7 +605,6 @@ var AppBar = forwardRef(
     closeButtonLocation = "left",
     border = true,
     modalPresentationStyle,
-    activityEnterStyle,
     iconColor,
     iconColorTransitionDuration,
     textColor,
@@ -649,6 +631,7 @@ 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);
@@ -696,7 +679,7 @@ var AppBar = forwardRef(
             if (globalBackButton && "renderIcon" in globalBackButton && globalBackButton.renderIcon) {
               return globalBackButton.renderIcon();
             }
-            if (modalPresentationStyle === "fullScreen") {
+            if (presentModalFullScreen) {
               return /* @__PURE__ */ jsx4(IconClose_default, {});
             }
             return /* @__PURE__ */ jsx4(IconBack_default, {});
@@ -752,8 +735,7 @@ var AppBar = forwardRef(
         ref,
         className: appBar({
           border,
-          modalPresentationStyle,
-          activityEnterStyle
+          presentModalFullScreen
         }),
         style: assignInlineVars2(
           compactMap({
@@ -824,8 +806,7 @@ var AppScreen = ({
   dimBackgroundColor,
   appBar: appBar2,
   preventSwipeBack,
-  CUPERTINO_ONLY_modalPresentationStyle,
-  ANDROID_ONLY_activityEnterStyle,
+  modalPresentationStyle,
   children
 }) => {
   var _a, _b;
@@ -837,55 +818,36 @@ var AppScreen = ({
   const paperRef = useRef2(null);
   const edgeRef = useRef2(null);
   const appBarRef = useRef2(null);
-  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);
+  const presentModalFullScreen = modalPresentationStyle === "fullScreen";
+  const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
   useStyleEffectHide({
     refs: [appScreenRef],
     hasEffect: true
   });
   useStyleEffectOffset({
-    refs: globalOptions.theme === "cupertino" || activityEnterStyle === "slideInLeft" ? [paperRef] : [paperRef, appBarRef],
     theme: globalOptions.theme,
-    activityEnterStyle,
-    hasEffect: modalPresentationStyle !== "fullScreen"
+    refs: globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
+    hasEffect: !presentModalFullScreen
   });
   useStyleEffectSwipeBack({
+    theme: globalOptions.theme,
     dimRef,
     edgeRef,
     paperRef,
-    theme: globalOptions.theme,
+    hasEffect: true,
     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);
@@ -932,13 +894,12 @@ var AppScreen = ({
             })
           ),
           children: [
-            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ jsx5("div", { className: dim, ref: dimRef }),
+            /* @__PURE__ */ jsx5("div", { className: dim, ref: dimRef }),
             appBar2 && /* @__PURE__ */ jsx5(
               AppBar_default,
               __spreadProps(__spreadValues({}, appBar2), {
                 ref: appBarRef,
                 modalPresentationStyle,
-                activityEnterStyle,
                 onTopClick: onAppBarTopClick
               })
             ),
@@ -947,8 +908,7 @@ var AppScreen = ({
               {
                 className: paper({
                   hasAppBar,
-                  modalPresentationStyle,
-                  activityEnterStyle
+                  presentModalFullScreen
                 }),
                 ref: paperRef,
                 children