@stackflow/plugin-basic-ui 0.20.0 → 0.20.1

package/src/components/BottomSheet.css.ts

@@ -20,7 +20,7 @@ export const enterActive = style({});
 export const enterDone = style({});
 export const exitActive = style({});
 export const exitDone = style({
-  transform: "translateX(100%)",
+  transform: "translate3d(100%, 0, 0)",
 });
 
 export const container = recipe({
@@ -62,15 +62,16 @@ export const paper = style([
     backgroundColor: globalVars.backgroundColor,
     width: "100%",
     borderRadius: `${globalVars.bottomSheet.borderRadius} ${globalVars.bottomSheet.borderRadius} 0 0`,
-    transform: "translateY(100%)",
+    willChange: "transform, opacity",
+    transform: "translate3d(0, 100%, 0)",
     opacity: 0,
     selectors: {
       [`${enterActive} &, ${enterDone} &`]: {
-        transform: "translateY(0)",
+        transform: "translate3d(0, 0, 0)",
         opacity: 1,
       },
       [`${exitActive} &, ${exitDone} &`]: {
-        transform: "translateY(100%)",
+        transform: "translate3d(0, 100%, 0)",
         opacity: 0,
       },
     },

package/src/components/BottomSheet.tsx

@@ -10,7 +10,7 @@ import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./BottomSheet.css";
 
-type BottomSheetProps = Partial<
+export type BottomSheetProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > &
   Partial<GlobalVars["bottomSheet"]> & {

package/src/components/Modal.css.ts

@@ -20,7 +20,7 @@ export const enterActive = style({});
 export const enterDone = style({});
 export const exitActive = style({});
 export const exitDone = style({
-  transform: "translateX(100%)",
+  transform: "translate3d(100%, 0, 0)",
 });
 
 export const container = recipe({
@@ -66,6 +66,7 @@ export const paper = style([
     boxShadow:
       "0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1)",
     borderRadius: globalVars.modal.borderRadius,
+    willChange: "transform, opacity",
     transform: "scale(1.1)",
     opacity: 0,
     selectors: {

package/src/components/Modal.tsx

@@ -10,7 +10,7 @@ import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./Modal.css";
 
-type ModalProps = Partial<
+export type ModalProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > &
   Partial<GlobalVars["modal"]> & {

package/src/hooks/useStyleEffectOffset.ts

@@ -22,8 +22,8 @@ export function useStyleEffectOffset({
       ? ({ activityTransitionState, refs }) => {
           const transform =
             theme === "cupertino"
-              ? `translateX(-${OFFSET_PX_CUPERTINO / 16}rem)`
-              : `translateY(-${OFFSET_PX_ANDROID / 16}rem)`;
+              ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`
+              : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
 
           const cleanup = () => {
             requestNextFrame(() => {

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -72,7 +72,7 @@ export function useStyleEffectSwipeBack({
                 $dim.style.transition = "0s";
 
                 $paper.style.overflowY = "hidden";
-                $paper.style.transform = `translateX(${dx}px)`;
+                $paper.style.transform = `translate3d(${dx}px, 0, 0)`;
                 $paper.style.transition = "0s";
 
                 refs.forEach((ref) => {
@@ -80,9 +80,9 @@ export function useStyleEffectSwipeBack({
                     return;
                   }
 
-                  ref.current.style.transform = `translateX(${
+                  ref.current.style.transform = `translate3d(${
                     -1 * (1 - p) * OFFSET_PX_CUPERTINO
-                  }px)`;
+                  }px, 0, 0)`;
                   ref.current.style.transition = "0s";
 
                   if (ref.current.parentElement?.style.display === "none") {
@@ -112,9 +112,9 @@ export function useStyleEffectSwipeBack({
                   }
 
                   ref.current.style.transition = `var(--stackflow-transition-duration)`;
-                  ref.current.style.transform = `translateX(${
+                  ref.current.style.transform = `translate3d(${
                     swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
-                  })`;
+                  }, 0, 0)`;
                 });
 
                 const _cachedRefs = [...cachedRefs];

package/src/index.ts

@@ -1,5 +1,13 @@
 export { basicUIPlugin } from "./basicUIPlugin";
-export { default as AppScreen } from "./components/AppScreen";
-export { default as BottomSheet } from "./components/BottomSheet";
-export { default as Modal } from "./components/Modal";
+export {
+  default as AppScreen,
+  AppScreenContext,
+  AppScreenProps,
+  useAppScreen,
+} from "./components/AppScreen";
+export {
+  default as BottomSheet,
+  BottomSheetProps,
+} from "./components/BottomSheet";
+export { default as Modal, ModalProps } from "./components/Modal";
 export { globalVars as cssVars } from "./theme.css";