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

package/dist/index.js

@@ -65,7 +65,9 @@ var IconBack = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime.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"
       }
     )
@@ -75,7 +77,7 @@ var IconBack_default = IconBack;
 
 // src/assets/IconClose.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var IconClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+var IconClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "svg",
   {
     className: props.className,
@@ -84,22 +86,13 @@ var IconClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "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__ */ (0, import_jsx_runtime2.jsx)(
-        "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__ */ (0, import_jsx_runtime2.jsx)(
+      "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;
@@ -110,7 +103,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)", 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 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/utils/compact.ts
@@ -186,28 +179,28 @@ var basicUIPlugin = (options) => () => ({
 
 // src/components/AppScreen.tsx
 var import_react4 = require("@stackflow/react");
+var import_react_ui_core2 = require("@stackflow/react-ui-core");
 var import_dynamic3 = require("@vanilla-extract/dynamic");
 var import_react5 = require("react");
-var import_react_ui_core2 = require("@stackflow/react-ui-core");
 
 // src/components/AppBar.tsx
 var import_react2 = require("@stackflow/react");
+var import_react_ui_core = require("@stackflow/react-ui-core");
 var import_dynamic2 = require("@vanilla-extract/dynamic");
 var import_react3 = require("react");
-var import_react_ui_core = require("@stackflow/react-ui-core");
 
 // src/components/AppBar.css.ts
 var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
 var appBar = (0, import_createRuntimeFn2.createRuntimeFn)({ 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 = (0, import_createRuntimeFn2.createRuntimeFn)({ 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
@@ -252,6 +245,8 @@ var AppBar = (0, import_react3.forwardRef)(
     var _a, _b;
     const actions = (0, import_react2.useActions)();
     const activity = (0, import_react_ui_core.useNullableActivity)();
+    const activityDataAttributes = (0, import_react_ui_core.useActivityDataAttributes)();
+    const mounted = (0, import_react_ui_core.useMounted)();
     const globalOptions = useGlobalOptions();
     const globalCloseButton = (_a = globalOptions.appBar) == null ? void 0 : _a.closeButton;
     const globalBackButton = (_b = globalOptions.appBar) == null ? void 0 : _b.backButton;
@@ -358,10 +353,9 @@ var AppBar = (0, import_react3.forwardRef)(
         }
       );
     };
-    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
-      {
+      __spreadProps(__spreadValues({
         ref,
         className: appBar({
           border,
@@ -385,6 +379,8 @@ var AppBar = (0, import_react3.forwardRef)(
             [vars.appBar.center.mainWidth]: `${maxWidth}px`
           })
         ),
+        "data-part": "appBar"
+      }, activityDataAttributes), {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: safeArea }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: container, children: [
@@ -393,32 +389,24 @@ var AppBar = (0, import_react3.forwardRef)(
               renderBackButton(),
               renderLeft == null ? void 0 : renderLeft()
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: centerRef, className: center, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              "div",
-              {
-                className: centerMain({
-                  hasLeft
-                }),
-                children: [
-                  typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: centerText, children: title }) : title,
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "button",
-                    {
-                      className: centerMainEdge,
-                      type: "button",
-                      onClick: onTopClick
-                    }
-                  )
-                ]
-              }
-            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: centerRef, className: center, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: centerMain, children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: centerText, children: title }) : title,
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  className: centerMainEdge,
+                  type: "button",
+                  onClick: onTopClick
+                }
+              )
+            ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: right, children: [
               renderRight == null ? void 0 : renderRight(),
               closeButtonLocation === "right" && renderCloseButton()
             ] })
           ] })
         ]
-      }
+      })
     );
   }
 );
@@ -445,6 +433,7 @@ var AppScreen = ({
   var _a;
   const globalOptions = useGlobalOptions();
   const activity = (0, import_react_ui_core2.useNullableActivity)();
+  const activityDataAttributes = (0, import_react_ui_core2.useActivityDataAttributes)();
   const mounted = (0, import_react_ui_core2.useMounted)();
   const { pop } = (0, import_react4.useActions)();
   const appScreenRef = (0, import_react5.useRef)(null);
@@ -501,6 +490,7 @@ var AppScreen = ({
     dimRef,
     edgeRef,
     paperRef,
+    appBarRef,
     offset: OFFSET_PX_CUPERTINO,
     transitionDuration: globalVars.transitionDuration,
     preventSwipeBack: isSwipeBackPrevented || globalOptions.theme !== "cupertino",
@@ -524,8 +514,10 @@ var AppScreen = ({
       }
       return null;
     },
-    onSwiped() {
-      pop();
+    onSwipeEnd({ swiped }) {
+      if (swiped) {
+        pop();
+      }
     }
   });
   const onAppBarTopClick = (e) => {
@@ -561,7 +553,7 @@ var AppScreen = ({
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
-        {
+        __spreadProps(__spreadValues({
           ref: appScreenRef,
           className: appScreen({
             transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
@@ -579,11 +571,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__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
+            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              __spreadValues({
+                ref: dimRef,
+                className: dim,
+                "data-part": "dim"
+              }, activityDataAttributes)
+            ),
             appBar2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               AppBar_default,
               __spreadProps(__spreadValues({}, appBar2), {
@@ -595,20 +593,29 @@ var AppScreen = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "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__ */ (0, import_jsx_runtime5.jsx)("div", { className: edge({ hasAppBar }), ref: edgeRef })
+            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !isSwipeBackPrevented && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              __spreadValues({
+                ref: edgeRef,
+                className: edge({ hasAppBar }),
+                "data-part": "edge"
+              }, activityDataAttributes)
+            )
           ]
-        }
+        })
       )
     }
   );
@@ -719,6 +726,7 @@ var Modal = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
+  maxWidth,
   onOutsideClick,
   children
 }) => {
@@ -766,9 +774,10 @@ var Modal = ({
       ref: containerRef,
       style: (0, import_dynamic5.assignInlineVars)(
         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"