@stackflow/plugin-basic-ui 1.10.1-canary.3 → 1.11.0

package/dist/index.mjs

@@ -32,7 +32,9 @@ var IconBack = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        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",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16.7241 2.76052C17.105 3.16043 17.0896 3.79341 16.6897 4.17431L8.45 12.0222L16.6896 19.8689C17.0896 20.2498 17.105 20.8827 16.7242 21.2827C16.3433 21.6826 15.7103 21.6981 15.3104 21.3172L6.31037 12.7464C6.11218 12.5576 6.00001 12.2959 6 12.0222C5.99999 11.7486 6.11215 11.4868 6.31032 11.2981L15.3103 2.72608C15.7102 2.34518 16.3432 2.3606 16.7241 2.76052Z",
         fill: "currentColor"
       }
     )
@@ -41,8 +43,8 @@ var IconBack = (props) => /* @__PURE__ */ jsx(
 var IconBack_default = IconBack;
 
 // src/assets/IconClose.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var IconClose = (props) => /* @__PURE__ */ jsxs(
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IconClose = (props) => /* @__PURE__ */ jsx2(
   "svg",
   {
     className: props.className,
@@ -51,22 +53,13 @@ var IconClose = (props) => /* @__PURE__ */ jsxs(
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
-          fill: "currentColor"
-        }
-      )
-    ]
+    children: /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M20.7071 4.70711C21.0976 4.31658 21.0976 3.68342 20.7071 3.29289C20.3166 2.90237 19.6834 2.90237 19.2929 3.29289L12 10.5858L4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L10.5858 12L3.29289 19.2929C2.90237 19.6834 2.90237 20.3166 3.29289 20.7071C3.68342 21.0976 4.31658 21.0976 4.70711 20.7071L12 13.4142L19.2929 20.7071C19.6834 21.0976 20.3166 21.0976 20.7071 20.7071C21.0976 20.3166 21.0976 19.6834 20.7071 19.2929L13.4142 12L20.7071 4.70711Z",
+        fill: "currentColor"
+      }
+    )
   }
 );
 var IconClose_default = IconClose;
@@ -77,7 +70,7 @@ import { createContext, useContext } from "react";
 
 // src/basicUIPlugin.css.ts
 import { createRuntimeFn as _7a468 } from "@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)", 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 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-modal-border-radius)", maxWidth: "var(--stackflow-plugin-basic-ui-modal-max-width)" } };
 var stackWrapper = _7a468({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/utils/compact.ts
@@ -153,39 +146,42 @@ var basicUIPlugin = (options) => () => ({
 
 // src/components/AppScreen.tsx
 import { useActions as useActions2 } from "@stackflow/react";
-import { assignInlineVars as assignInlineVars3 } from "@vanilla-extract/dynamic";
-import { createContext as createContext2, useContext as useContext2, useMemo, useRef as useRef2 } from "react";
 import {
+  useActivityDataAttributes as useActivityDataAttributes2,
   useLazy,
-  useMounted,
+  useMounted as useMounted2,
   useNullableActivity as useNullableActivity2,
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
   useZIndexBase
 } from "@stackflow/react-ui-core";
+import { assignInlineVars as assignInlineVars3 } from "@vanilla-extract/dynamic";
+import { createContext as createContext2, useContext as useContext2, useMemo, useRef as useRef2 } from "react";
 
 // src/components/AppBar.tsx
 import { useActions } from "@stackflow/react";
-import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef } from "react";
 import {
+  useActivityDataAttributes,
   useAppBarTitleMaxWidth,
+  useMounted,
   useNullableActivity
 } from "@stackflow/react-ui-core";
+import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
+import { forwardRef, useRef } from "react";
 
 // src/components/AppBar.css.ts
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
 var appBar = _7a4682({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4348 _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 = _7a4682({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
-var centerMainEdge = "_1yk3a45e dhthxqi dhthxq4 dhthxq2 dhthxqf";
-var centerText = "_1yk3a45f dhthxqc dhthxqd dhthxq0";
+var centerMain = "_1yk3a45c";
+var centerMainEdge = "_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf";
+var centerText = "_1yk3a45e 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 right = "_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
 var safeArea = "_1yk3a456";
 
 // src/components/AppScreen.css.ts
@@ -201,7 +197,7 @@ var paper = _7a4683({ defaultClassName: "_1dlf434k dhthxq4 dhthxq0 dhthxq1 dhthx
 var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { topMargin: "var(--_1dlf4345)", center: { mainWidth: "var(--_1dlf4346)" } } };
 
 // src/components/AppBar.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var AppBar = forwardRef(
   ({
     title,
@@ -230,6 +226,8 @@ var AppBar = forwardRef(
     var _a, _b;
     const actions = useActions();
     const activity = useNullableActivity();
+    const activityDataAttributes = useActivityDataAttributes();
+    const mounted = useMounted();
     const globalOptions = useGlobalOptions();
     const globalCloseButton = (_a = globalOptions.appBar) == null ? void 0 : _a.closeButton;
     const globalBackButton = (_b = globalOptions.appBar) == null ? void 0 : _b.backButton;
@@ -336,10 +334,9 @@ var AppBar = forwardRef(
         }
       );
     };
-    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       "div",
-      {
+      __spreadProps(__spreadValues({
         ref,
         className: appBar({
           border,
@@ -363,40 +360,34 @@ var AppBar = forwardRef(
             [vars.appBar.center.mainWidth]: `${maxWidth}px`
           })
         ),
+        "data-part": "appBar"
+      }, activityDataAttributes), {
         children: [
           /* @__PURE__ */ jsx4("div", { className: safeArea }),
-          /* @__PURE__ */ jsxs2("div", { className: container, children: [
-            /* @__PURE__ */ jsxs2("div", { className: left, children: [
+          /* @__PURE__ */ jsxs("div", { className: container, children: [
+            /* @__PURE__ */ jsxs("div", { className: left, children: [
               closeButtonLocation === "left" && renderCloseButton(),
               renderBackButton(),
               renderLeft == null ? void 0 : renderLeft()
             ] }),
-            /* @__PURE__ */ jsx4("div", { ref: centerRef, className: center, children: /* @__PURE__ */ jsxs2(
-              "div",
-              {
-                className: centerMain({
-                  hasLeft
-                }),
-                children: [
-                  typeof title === "string" ? /* @__PURE__ */ jsx4("div", { className: centerText, children: title }) : title,
-                  /* @__PURE__ */ jsx4(
-                    "button",
-                    {
-                      className: centerMainEdge,
-                      type: "button",
-                      onClick: onTopClick
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs2("div", { className: right, children: [
+            /* @__PURE__ */ jsx4("div", { ref: centerRef, className: center, children: /* @__PURE__ */ jsxs("div", { className: centerMain, children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx4("div", { className: centerText, children: title }) : title,
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  className: centerMainEdge,
+                  type: "button",
+                  onClick: onTopClick
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: right, children: [
               renderRight == null ? void 0 : renderRight(),
               closeButtonLocation === "right" && renderCloseButton()
             ] })
           ] })
         ]
-      }
+      })
     );
   }
 );
@@ -404,7 +395,7 @@ AppBar.displayName = "AppBar";
 var AppBar_default = AppBar;
 
 // src/components/AppScreen.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var OFFSET_PX_ANDROID = 32;
 var OFFSET_PX_CUPERTINO = 80;
 var Context = createContext2(null);
@@ -423,7 +414,8 @@ var AppScreen = ({
   var _a;
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity2();
-  const mounted = useMounted();
+  const activityDataAttributes = useActivityDataAttributes2();
+  const mounted = useMounted2();
   const { pop } = useActions2();
   const appScreenRef = useRef2(null);
   const dimRef = useRef2(null);
@@ -479,6 +471,7 @@ var AppScreen = ({
     dimRef,
     edgeRef,
     paperRef,
+    appBarRef,
     offset: OFFSET_PX_CUPERTINO,
     transitionDuration: globalVars.transitionDuration,
     preventSwipeBack: isSwipeBackPrevented || globalOptions.theme !== "cupertino",
@@ -502,8 +495,10 @@ var AppScreen = ({
       }
       return null;
     },
-    onSwiped() {
-      pop();
+    onSwipeEnd({ swiped }) {
+      if (swiped) {
+        pop();
+      }
     }
   });
   const onAppBarTopClick = (e) => {
@@ -537,9 +532,9 @@ var AppScreen = ({
         }),
         [paperRef, zIndexDim, zIndexPaper, zIndexEdge, zIndexAppBar]
       ),
-      children: /* @__PURE__ */ jsxs3(
+      children: /* @__PURE__ */ jsxs2(
         "div",
-        {
+        __spreadProps(__spreadValues({
           ref: appScreenRef,
           className: appScreen({
             transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
@@ -557,11 +552,17 @@ var AppScreen = ({
               [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
             })
           ),
-          "data-stackflow-component-name": "AppScreen",
-          "data-stackflow-activity-id": mounted ? activity == null ? void 0 : activity.id : void 0,
-          "data-stackflow-activity-is-active": mounted ? activity == null ? void 0 : activity.isActive : void 0,
+          "data-stackflow-component-name": "AppScreen"
+        }, activityDataAttributes), {
           children: [
-            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ jsx5("div", { className: dim, ref: dimRef }),
+            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ jsx5(
+              "div",
+              __spreadValues({
+                ref: dimRef,
+                className: dim,
+                "data-part": "dim"
+              }, activityDataAttributes)
+            ),
             appBar2 && /* @__PURE__ */ jsx5(
               AppBar_default,
               __spreadProps(__spreadValues({}, appBar2), {
@@ -573,20 +574,29 @@ var AppScreen = ({
             ),
             /* @__PURE__ */ jsx5(
               "div",
-              {
+              __spreadProps(__spreadValues({
+                ref: paperRef,
                 className: paper({
                   hasAppBar,
                   modalPresentationStyle,
                   activityEnterStyle
                 }),
-                ref: paperRef,
+                "data-part": "paper"
+              }, activityDataAttributes), {
                 children
-              },
+              }),
               activity == null ? void 0 : activity.id
             ),
-            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !isSwipeBackPrevented && /* @__PURE__ */ jsx5("div", { className: edge({ hasAppBar }), ref: edgeRef })
+            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !isSwipeBackPrevented && /* @__PURE__ */ jsx5(
+              "div",
+              __spreadValues({
+                ref: edgeRef,
+                className: edge({ hasAppBar }),
+                "data-part": "edge"
+              }, activityDataAttributes)
+            )
           ]
-        }
+        })
       )
     }
   );
@@ -707,6 +717,7 @@ var Modal = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
+  maxWidth,
   onOutsideClick,
   children
 }) => {
@@ -754,9 +765,10 @@ var Modal = ({
       ref: containerRef,
       style: assignInlineVars5(
         compactMap({
-          [globalVars.bottomSheet.borderRadius]: borderRadius,
           [globalVars.backgroundColor]: backgroundColor,
           [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [globalVars.modal.borderRadius]: borderRadius,
+          [globalVars.modal.maxWidth]: maxWidth,
           [vars3.zIndexes.dim]: `${zIndexBase}`,
           [vars3.zIndexes.paper]: `${zIndexPaper}`,
           [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"