@stackflow/plugin-basic-ui 1.14.1 → 1.15.0

package/src/components/AppScreen.tsx

@@ -11,6 +11,7 @@ import {
   useZIndexBase,
 } from "@stackflow/react-ui-core";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
+import clsx from "clsx";
 import { createContext, useContext, useMemo, useRef } from "react";
 import { useGlobalOptions } from "../basicUIPlugin";
 import type { GlobalVars } from "../basicUIPlugin.css";
@@ -48,6 +49,7 @@ export type AppScreenProps = Partial<
   preventSwipeBack?: boolean;
   CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
   ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
+  className?: string;
   children: React.ReactNode;
 };
 const AppScreen: React.FC<AppScreenProps> = ({
@@ -58,6 +60,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
   preventSwipeBack,
   CUPERTINO_ONLY_modalPresentationStyle,
   ANDROID_ONLY_activityEnterStyle,
+  className,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
@@ -231,12 +234,16 @@ const AppScreen: React.FC<AppScreenProps> = ({
     >
       <div
         ref={appScreenRef}
-        className={css.appScreen({
-          transitionState:
-            transitionState === "enter-done" || transitionState === "exit-done"
-              ? transitionState
-              : lazyTransitionState,
-        })}
+        className={clsx(
+          css.appScreen({
+            transitionState:
+              transitionState === "enter-done" ||
+              transitionState === "exit-done"
+                ? transitionState
+                : lazyTransitionState,
+          }),
+          className,
+        )}
         style={assignInlineVars(
           compactMap({
             [globalVars.backgroundColor]: backgroundColor,

package/src/components/BottomSheet.tsx

@@ -1,7 +1,4 @@
 import { useActions } from "@stackflow/react";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useRef } from "react";
-
 import {
   useLazy,
   useNullableActivity,
@@ -9,6 +6,9 @@ import {
   useStyleEffect,
   useZIndexBase,
 } from "@stackflow/react-ui-core";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import clsx from "clsx";
+import { useRef } from "react";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
 import { compactMap } from "../utils";
@@ -21,6 +21,7 @@ export type BottomSheetProps = Partial<
     paperRef?: React.Ref<HTMLDivElement>;
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
+    className?: string;
   };
 const BottomSheet: React.FC<BottomSheetProps> = ({
   borderRadius = "1rem",
@@ -30,6 +31,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   paperRef,
   onOutsideClick,
   children,
+  className,
 }) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
@@ -80,9 +82,12 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 
   return (
     <div
-      className={css.container({
-        transitionState: useLazy(transitionState),
-      })}
+      className={clsx(
+        css.container({
+          transitionState: useLazy(transitionState),
+        }),
+        className,
+      )}
       ref={containerRef}
       style={assignInlineVars(
         compactMap({

package/src/components/Modal.tsx

@@ -1,7 +1,4 @@
 import { useActions } from "@stackflow/react";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useRef } from "react";
-
 import {
   useLazy,
   useNullableActivity,
@@ -9,6 +6,9 @@ import {
   useStyleEffect,
   useZIndexBase,
 } from "@stackflow/react-ui-core";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import clsx from "clsx";
+import { useRef } from "react";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
 import { compactMap } from "../utils";
@@ -20,6 +20,7 @@ export type ModalProps = Partial<
   Partial<GlobalVars["modal"]> & {
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
+    className?: string;
   };
 const Modal: React.FC<ModalProps> = ({
   backgroundColor,
@@ -29,6 +30,7 @@ const Modal: React.FC<ModalProps> = ({
   maxWidth,
   onOutsideClick,
   children,
+  className,
 }) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
@@ -79,9 +81,12 @@ const Modal: React.FC<ModalProps> = ({
 
   return (
     <div
-      className={css.container({
-        transitionState: useLazy(transitionState),
-      })}
+      className={clsx(
+        css.container({
+          transitionState: useLazy(transitionState),
+        }),
+        className,
+      )}
       ref={containerRef}
       style={assignInlineVars(
         compactMap({

package/src/index.ts

@@ -2,15 +2,15 @@ export { IconBack, IconClose } from "./assets";
 export { basicUIPlugin } from "./basicUIPlugin";
 export { globalVars as cssVars } from "./basicUIPlugin.css";
 export {
-  default as AppScreen,
   AppScreenContext,
   AppScreenProps,
+  default as AppScreen,
   useAppScreen,
 } from "./components/AppScreen";
 export { vars as appScreenVars } from "./components/AppScreen.css";
 export {
-  default as BottomSheet,
   BottomSheetProps,
+  default as BottomSheet,
 } from "./components/BottomSheet";
 export { vars as bottomSheetVars } from "./components/BottomSheet.css";
 export { default as Modal, ModalProps } from "./components/Modal";