@stackflow/plugin-basic-ui 0.21.4-alpha.4 → 1.0.1

package/src/components/AppBar.css.ts

@@ -1,14 +1,14 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { f } from "../styles";
 import {
   android,
   cupertino,
   globalVars,
   rootAndroid,
   rootCupertino,
-} from "../theme.css";
+} from "../basicUIPlugin.css";
+import { f } from "../styles";
 import {
   background,
   enterActive,

package/src/components/AppBar.tsx

@@ -1,12 +1,12 @@
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import { forwardRef, useRef } from "react";
 
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { useMaxWidth, useNullableActivity } from "../hooks";
-import type { GlobalVars } from "../theme.css";
-import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./AppBar.css";
 import * as appScreenCss from "./AppScreen.css";
@@ -50,7 +50,7 @@ type AppBarProps = Partial<
   modalPresentationStyle?: "fullScreen";
   onTopClick?: (e: React.MouseEvent) => void;
 };
-const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
+const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
   (
     {
       title,

package/src/components/AppScreen.css.ts

@@ -1,14 +1,14 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { f } from "../styles";
 import {
   android,
   cupertino,
   globalVars,
   rootAndroid,
   rootCupertino,
-} from "../theme.css";
+} from "../basicUIPlugin.css";
+import { f } from "../styles";
 
 export const vars = createThemeContract({
   transitionDuration: null,

package/src/components/AppScreen.tsx

@@ -2,9 +2,11 @@
 
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { createContext, useContext, useMemo, useRef } from "react";
+import { createContext, useContext, useMemo, useRef } from "react";
 
 import { useGlobalOptions } from "../basicUIPlugin";
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import {
   useLazy,
   useNullableActivity,
@@ -12,8 +14,6 @@ import {
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
 } from "../hooks";
-import type { GlobalVars } from "../theme.css";
-import { globalVars } from "../theme.css";
 import type { PropOf } from "../utils";
 import { compactMap } from "../utils";
 import AppBar from "./AppBar";
@@ -31,7 +31,10 @@ export function useAppScreen() {
 export type AppScreenProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > & {
-  appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
+  appBar?: Omit<
+    PropOf<typeof AppBar>,
+    "theme" | "modalPresentationStyle" | "ref" | "key"
+  >;
   preventSwipeBack?: boolean;
   modalPresentationStyle?: "fullScreen";
   children: React.ReactNode;
@@ -140,7 +143,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
             [css.vars.transitionDuration]:
               transitionState === "enter-active" ||
               transitionState === "exit-active"
-                ? `var(--stackflow-transition-duration)`
+                ? globalVars.transitionDuration
                 : "0ms",
           }),
         )}

package/src/components/BottomSheet.css.ts

@@ -1,8 +1,8 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
+import { globalVars } from "../basicUIPlugin.css";
 import { f } from "../styles";
-import { globalVars } from "../theme.css";
 
 export const vars = createThemeContract({
   transitionDuration: null,

package/src/components/BottomSheet.tsx

@@ -2,11 +2,11 @@
 
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import { useRef } from "react";
 
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
-import type { GlobalVars } from "../theme.css";
-import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./BottomSheet.css";
 
@@ -83,7 +83,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
           [css.vars.transitionDuration]:
             transitionState === "enter-active" ||
             transitionState === "exit-active"
-              ? `var(--stackflow-transition-duration)`
+              ? globalVars.transitionDuration
               : "0ms",
         }),
       )}

package/src/components/Modal.css.ts

@@ -1,8 +1,8 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
+import { globalVars } from "../basicUIPlugin.css";
 import { f } from "../styles";
-import { globalVars } from "../theme.css";
 
 export const vars = createThemeContract({
   transitionDuration: null,

package/src/components/Modal.tsx

@@ -2,11 +2,11 @@
 
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import { useRef } from "react";
 
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
-import type { GlobalVars } from "../theme.css";
-import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./Modal.css";
 
@@ -83,7 +83,7 @@ const Modal: React.FC<ModalProps> = ({
           [css.vars.transitionDuration]:
             transitionState === "enter-active" ||
             transitionState === "exit-active"
-              ? `var(--stackflow-transition-duration)`
+              ? globalVars.transitionDuration
               : "0ms",
         }),
       )}

package/src/hooks/useMaxWidth.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 import { useEffect, useState } from "react";
 
 import { listenResize, noop } from "../utils";

package/src/hooks/useStyleEffect.ts

@@ -1,5 +1,4 @@
 import type { ActivityTransitionState } from "@stackflow/core";
-import type React from "react";
 import { useEffect } from "react";
 
 import { noop } from "../utils";

package/src/hooks/useStyleEffectHide.ts

@@ -1,7 +1,5 @@
 /* eslint-disable no-param-reassign */
 
-import type React from "react";
-
 import { noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 

package/src/hooks/useStyleEffectOffset.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 
+import { globalVars } from "../basicUIPlugin.css";
 import { listenOnce, noop, requestNextFrame } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 
@@ -51,7 +52,7 @@ export function useStyleEffectOffset({
                   return;
                 }
 
-                ref.current.style.transition = `var(--stackflow-transition-duration)`;
+                ref.current.style.transition = globalVars.transitionDuration;
                 ref.current.style.transform = transform;
               });
 

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 
+import { globalVars } from "../basicUIPlugin.css";
 import { listenOnce, noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 import { OFFSET_PX_CUPERTINO } from "./useStyleEffectOffset";
@@ -101,19 +102,18 @@ export function useStyleEffectSwipeBack({
             return new Promise((resolve) => {
               requestAnimationFrame(() => {
                 $dim.style.opacity = `${swiped ? 0 : 1}`;
-                $dim.style.transition = "var(--stackflow-transition-duration)";
+                $dim.style.transition = globalVars.transitionDuration;
 
                 $paper.style.overflowY = "hidden";
                 $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
-                $paper.style.transition =
-                  "var(--stackflow-transition-duration)";
+                $paper.style.transition = globalVars.transitionDuration;
 
                 refs.forEach((ref) => {
                   if (!ref.current) {
                     return;
                   }
 
-                  ref.current.style.transition = `var(--stackflow-transition-duration)`;
+                  ref.current.style.transition = globalVars.transitionDuration;
                   ref.current.style.transform = `translate3d(${
                     swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
                   }, 0, 0)`;

package/src/index.ts

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