@seed-design/stackflow 1.1.15 → 1.1.17

package/lib/components/AppBar/AppBar.cjs

@@ -14,6 +14,9 @@ const React = require('react');
 const AppBar = require('../../primitive/AppBar/AppBar.cjs');
 const useAppBarContext = require('../../primitive/AppBar/useAppBarContext.cjs');
 const createStyleContext = require('../../utils/createStyleContext.cjs');
+const useTopActivity = require('../../primitive/private/useTopActivity.cjs');
+const react = require('@stackflow/react');
+const styled = require('../../utils/styled.cjs');
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext.createStyleContext(appBar.appBar);
 const {
@@ -23,26 +26,28 @@ const {
 } = createStyleContext.createStyleContext(appBarMain.appBarMain);
 const AppBarPropsProvider = PropsProvider;
 const AppBarRoot = React.forwardRef((props, ref) => {
+  const { style: boxStyle, restProps: propsWithoutBoxProps } = styled.useBoxBackgroundProps(props);
   const contextProps = useProps();
-  const [variantProps, otherProps] = appBar.appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = appBar.appBar(variantProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
-    MainPropsProvider,
+  const [variantProps, otherProps] = appBar.appBar.splitVariantProps({
+    ...contextProps,
+    ...propsWithoutBoxProps
+  });
+  const topActivityTransitionStyle = useTopActivity.useTopActivity().transitionStyle;
+  const resolvedVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...react.useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle
+    }
+  };
+  const classNames = appBar.appBar(resolvedVariantProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(MainPropsProvider, { value: resolvedVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AppBar.AppBarRoot,
     {
-      value: {
-        theme: variantProps.theme,
-        transitionStyle: variantProps.transitionStyle,
-        tone: variantProps.tone
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        AppBar.AppBarRoot,
-        {
-          ref,
-          ...domUtils.mergeProps({ className: classNames.root }, otherProps)
-        }
-      )
+      ref,
+      ...domUtils.mergeProps({ className: classNames.root, style: boxStyle }, otherProps)
     }
-  ) });
+  ) }) });
 });
 AppBarRoot.displayName = "AppBarRoot";
 const AppBarLeft = withContext(

package/lib/components/AppBar/AppBar.d.ts

@@ -2,12 +2,13 @@ import { AppBarVariantProps, AppBarVariant } from '@seed-design/css/recipes/app-
 import { AppBarMainVariantProps } from '@seed-design/css/recipes/app-bar-main';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { AppBar as AppBarPrimitive } from '../../primitive';
+import { BoxBackgroundProps } from '../../utils/styled';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const AppBarPropsProvider: ({ children, value }: {
     children: React.ReactNode;
     value: Partial< AppBarVariant>;
 }) => import("react/jsx-runtime").JSX.Element;
-export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps {
+export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps, BoxBackgroundProps {
 }
 export declare const AppBarRoot: ForwardRefExoticComponent<AppBarProps & RefAttributes<HTMLDivElement>>;
 export interface AppBarLeftProps extends AppBarPrimitive.LeftProps {

package/lib/components/AppBar/AppBar.js

@@ -10,6 +10,9 @@ import { forwardRef } from 'react';
 import { AppBarLeft as AppBarLeft$1, AppBarMain as AppBarMain$1, AppBarRight as AppBarRight$1, AppBarRoot as AppBarRoot$1 } from '../../primitive/AppBar/AppBar.js';
 import { useAppBarContext } from '../../primitive/AppBar/useAppBarContext.js';
 import { createStyleContext } from '../../utils/createStyleContext.js';
+import { useTopActivity } from '../../primitive/private/useTopActivity.js';
+import { useActivity } from '@stackflow/react';
+import { useBoxBackgroundProps } from '../../utils/styled.js';
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext(appBar);
 const {
@@ -19,26 +22,28 @@ const {
 } = createStyleContext(appBarMain);
 const AppBarPropsProvider = PropsProvider;
 const AppBarRoot = forwardRef((props, ref) => {
+  const { style: boxStyle, restProps: propsWithoutBoxProps } = useBoxBackgroundProps(props);
   const contextProps = useProps();
-  const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = appBar(variantProps);
-  return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
-    MainPropsProvider,
+  const [variantProps, otherProps] = appBar.splitVariantProps({
+    ...contextProps,
+    ...propsWithoutBoxProps
+  });
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+  const resolvedVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle
+    }
+  };
+  const classNames = appBar(resolvedVariantProps);
+  return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(MainPropsProvider, { value: resolvedVariantProps, children: /* @__PURE__ */ jsx(
+    AppBarRoot$1,
     {
-      value: {
-        theme: variantProps.theme,
-        transitionStyle: variantProps.transitionStyle,
-        tone: variantProps.tone
-      },
-      children: /* @__PURE__ */ jsx(
-        AppBarRoot$1,
-        {
-          ref,
-          ...mergeProps({ className: classNames.root }, otherProps)
-        }
-      )
+      ref,
+      ...mergeProps({ className: classNames.root, style: boxStyle }, otherProps)
     }
-  ) });
+  ) }) });
 });
 AppBarRoot.displayName = "AppBarRoot";
 const AppBarLeft = withContext(

package/lib/components/AppScreen/AppScreen.cjs

@@ -10,6 +10,8 @@ const React = require('react');
 const AppScreen = require('../../primitive/AppScreen/AppScreen.cjs');
 const createStyleContext = require('../../utils/createStyleContext.cjs');
 const AppBar = require('../AppBar/AppBar.cjs');
+const useTopActivity = require('../../primitive/private/useTopActivity.cjs');
+const react = require('@stackflow/react');
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext.createStyleContext(appScreen.appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -17,21 +19,23 @@ const AppScreenRoot = React.forwardRef((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appScreen.appScreen.splitVariantProps({ ...contextProps, ...props });
   const transitionStyle = variantProps.transitionStyle ?? (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
+  const topActivityTransitionStyle = useTopActivity.useTopActivity().transitionStyle;
   const classNames = appScreen.appScreen({
     ...variantProps,
-    transitionStyle
+    transitionStyle: react.useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
     AppBar.AppBarPropsProvider,
     {
       value: React.useMemo(
-        () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
-        [variantProps.theme, transitionStyle, variantProps.tone]
+        () => ({ ...variantProps, transitionStyle }),
+        [variantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         AppScreen.AppScreenRoot,
         {
           ref,
+          "data-transition-style": transitionStyle,
           ...domUtils.mergeProps({ className: classNames.root }, otherProps)
         }
       )

package/lib/components/AppScreen/AppScreen.js

@@ -6,6 +6,8 @@ import { forwardRef, useMemo } from 'react';
 import { AppScreenDim as AppScreenDim$1, AppScreenEdge as AppScreenEdge$1, AppScreenLayer as AppScreenLayer$1, AppScreenRoot as AppScreenRoot$1 } from '../../primitive/AppScreen/AppScreen.js';
 import { createStyleContext } from '../../utils/createStyleContext.js';
 import { AppBarPropsProvider } from '../AppBar/AppBar.js';
+import { useTopActivity } from '../../primitive/private/useTopActivity.js';
+import { useActivity } from '@stackflow/react';
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -13,21 +15,23 @@ const AppScreenRoot = forwardRef((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props });
   const transitionStyle = variantProps.transitionStyle ?? (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
   const classNames = appScreen({
     ...variantProps,
-    transitionStyle
+    transitionStyle: useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
   return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
     AppBarPropsProvider,
     {
       value: useMemo(
-        () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
-        [variantProps.theme, transitionStyle, variantProps.tone]
+        () => ({ ...variantProps, transitionStyle }),
+        [variantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsx(
         AppScreenRoot$1,
         {
           ref,
+          "data-transition-style": transitionStyle,
           ...mergeProps({ className: classNames.root }, otherProps)
         }
       )

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -109,9 +109,15 @@ function useGlobalInteraction() {
     () => ({
       "data-swipe-back-state": swipeBackState,
       "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType
+      "data-top-activity-type": topActivity.activityType,
+      "data-top-transition-style": topActivity.transitionStyle
     }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType]
+    [
+      swipeBackState,
+      topActivity.transitionState,
+      topActivity.activityType,
+      topActivity.transitionStyle
+    ]
   );
   return React.useMemo(
     () => ({

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -105,9 +105,15 @@ function useGlobalInteraction() {
     () => ({
       "data-swipe-back-state": swipeBackState,
       "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType
+      "data-top-activity-type": topActivity.activityType,
+      "data-top-transition-style": topActivity.transitionStyle
     }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType]
+    [
+      swipeBackState,
+      topActivity.transitionState,
+      topActivity.activityType,
+      topActivity.transitionStyle
+    ]
   );
   return useMemo(
     () => ({

package/lib/primitive/private/useTopActivity.cjs

@@ -18,6 +18,7 @@ function useTopActivity() {
   const transitionState = topActivity?.transitionState ?? "enter-done";
   const [topEl, setTopEl] = React.useState(null);
   const activityType = topEl?.dataset["activityType"];
+  const transitionStyle = topEl?.dataset["transitionStyle"];
   React.useLayoutEffect(() => {
     if (!topId) return;
     const el = document.querySelector(`[data-activity-id="${topId}"]`);
@@ -25,7 +26,8 @@ function useTopActivity() {
   }, [topId]);
   return {
     transitionState,
-    activityType
+    activityType,
+    transitionStyle
   };
 }
 

package/lib/primitive/private/useTopActivity.d.ts

@@ -1,4 +1,5 @@
 export declare function useTopActivity(): {
     transitionState: "enter-active" | "enter-done" | "exit-active" | "exit-done";
     activityType: string | undefined;
+    transitionStyle: string | undefined;
 };

package/lib/primitive/private/useTopActivity.js

@@ -14,6 +14,7 @@ function useTopActivity() {
   const transitionState = topActivity?.transitionState ?? "enter-done";
   const [topEl, setTopEl] = useState(null);
   const activityType = topEl?.dataset["activityType"];
+  const transitionStyle = topEl?.dataset["transitionStyle"];
   useLayoutEffect(() => {
     if (!topId) return;
     const el = document.querySelector(`[data-activity-id="${topId}"]`);
@@ -21,7 +22,8 @@ function useTopActivity() {
   }, [topId]);
   return {
     transitionState,
-    activityType
+    activityType,
+    transitionStyle
   };
 }
 

package/lib/utils/styled.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vars = require('@seed-design/css/vars');
+
+function handleColor(color) {
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.vars.$color[type]?.[value] ?? color;
+}
+function useBoxBackgroundProps(props) {
+  const { bg, background, ...restProps } = props;
+  return {
+    style: {
+      "--seed-box-background": handleColor(background ?? bg)
+    },
+    restProps
+  };
+}
+
+exports.useBoxBackgroundProps = useBoxBackgroundProps;

package/lib/utils/styled.d.ts

@@ -0,0 +1,16 @@
+import { ScopedColorBg, ScopedColorPalette, ScopedColorBanner } from '@seed-design/css/vars';
+/**
+ * A minimal subset of `StyleProps` from `@seed-design/react`.
+ * Copied here to avoid package dependency. May be extracted to a shared package later.
+ */
+export interface BoxBackgroundProps {
+    /**
+     * Shorthand for `background`.
+     */
+    bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+}
+export declare function useBoxBackgroundProps<T extends BoxBackgroundProps>(props: T): {
+    style: React.CSSProperties;
+    restProps: Omit<T, keyof BoxBackgroundProps>;
+};

package/lib/utils/styled.js

@@ -0,0 +1,21 @@
+'use client';
+import { vars } from '@seed-design/css/vars';
+
+function handleColor(color) {
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.$color[type]?.[value] ?? color;
+}
+function useBoxBackgroundProps(props) {
+  const { bg, background, ...restProps } = props;
+  return {
+    style: {
+      "--seed-box-background": handleColor(background ?? bg)
+    },
+    restProps
+  };
+}
+
+export { useBoxBackgroundProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,7 +36,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.1.15",
+    "@seed-design/css": "1.2.3",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",
@@ -49,7 +49,7 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.1.15",
+    "@seed-design/css": ">=1.1.19",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "react": ">=18.0.0",

package/src/components/AppBar/AppBar.tsx

@@ -8,6 +8,9 @@ import { forwardRef } from "react";
 import { AppBar as AppBarPrimitive } from "../../primitive";
 import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext";
 import { createStyleContext } from "../../utils/createStyleContext";
+import { useTopActivity } from "../../primitive/private/useTopActivity";
+import { useActivity } from "@stackflow/react";
+import { useBoxBackgroundProps, type BoxBackgroundProps } from "../../utils/styled";
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } =
   createStyleContext(appBar);
@@ -19,25 +22,40 @@ const {
 
 export const AppBarPropsProvider = PropsProvider;
 
-export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps {}
+export interface AppBarProps
+  extends AppBarVariantProps,
+    AppBarPrimitive.RootProps,
+    BoxBackgroundProps {}
 
 export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
+  const { style: boxStyle, restProps: propsWithoutBoxProps } = useBoxBackgroundProps(props);
+
   const contextProps = useProps();
-  const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = appBar(variantProps);
+  const [variantProps, otherProps] = appBar.splitVariantProps({
+    ...contextProps,
+    ...propsWithoutBoxProps,
+  });
+
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+
+  const resolvedVariantProps: AppBarVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...(useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle as NonNullable<
+        AppBarVariantProps["transitionStyle"]
+      >,
+    }),
+  };
+
+  const classNames = appBar(resolvedVariantProps);
 
   return (
     <ClassNamesProvider value={classNames}>
-      <MainPropsProvider
-        value={{
-          theme: variantProps.theme,
-          transitionStyle: variantProps.transitionStyle,
-          tone: variantProps.tone,
-        }}
-      >
+      <MainPropsProvider value={resolvedVariantProps}>
         <AppBarPrimitive.Root
           ref={ref}
-          {...mergeProps({ className: classNames.root }, otherProps)}
+          {...mergeProps({ className: classNames.root, style: boxStyle }, otherProps)}
         />
       </MainPropsProvider>
     </ClassNamesProvider>

package/src/components/AppScreen/AppScreen.tsx

@@ -4,6 +4,8 @@ import { forwardRef, useMemo } from "react";
 import { AppScreen as AppScreenPrimitive } from "../../primitive";
 import { createStyleContext } from "../../utils/createStyleContext";
 import { AppBarPropsProvider } from "../AppBar/AppBar";
+import { useTopActivity } from "../../primitive/private/useTopActivity";
+import { useActivity } from "@stackflow/react";
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 
@@ -21,25 +23,30 @@ export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((pro
   const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props });
 
   // TODO: we have to implement conditional default in recipe; this is temporal workaround.
-  const transitionStyle =
+  const transitionStyle: NonNullable<AppScreenVariantProps["transitionStyle"]> =
     variantProps.transitionStyle ??
     (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
 
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+
   const classNames = appScreen({
     ...variantProps,
-    transitionStyle,
+    transitionStyle: useActivity().isTop
+      ? transitionStyle
+      : (topActivityTransitionStyle as NonNullable<AppScreenVariantProps["transitionStyle"]>),
   });
 
   return (
     <ClassNamesProvider value={classNames}>
       <AppBarPropsProvider
         value={useMemo(
-          () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
-          [variantProps.theme, transitionStyle, variantProps.tone],
+          () => ({ ...variantProps, transitionStyle }),
+          [variantProps, transitionStyle],
         )}
       >
         <AppScreenPrimitive.Root
           ref={ref}
+          data-transition-style={transitionStyle}
           {...mergeProps({ className: classNames.root }, otherProps)}
         />
       </AppBarPropsProvider>

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -162,8 +162,14 @@ export function useGlobalInteraction() {
       "data-swipe-back-state": swipeBackState,
       "data-global-transition-state": topActivity.transitionState,
       "data-top-activity-type": topActivity.activityType,
+      "data-top-transition-style": topActivity.transitionStyle,
     }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType],
+    [
+      swipeBackState,
+      topActivity.transitionState,
+      topActivity.activityType,
+      topActivity.transitionStyle,
+    ],
   ) as React.HTMLAttributes<HTMLElement>;
 
   return useMemo(

package/src/primitive/private/useTopActivity.ts

@@ -16,6 +16,7 @@ export function useTopActivity() {
   // TODO: There should be a better way to handle this. We should not rely on the DOM element to get the activity type.
   const [topEl, setTopEl] = useState<HTMLElement | null>(null);
   const activityType = topEl?.dataset["activityType"];
+  const transitionStyle = topEl?.dataset["transitionStyle"];
 
   useLayoutEffect(() => {
     if (!topId) return;
@@ -27,5 +28,6 @@ export function useTopActivity() {
   return {
     transitionState,
     activityType,
+    transitionStyle,
   };
 }

package/src/utils/styled.ts

@@ -0,0 +1,41 @@
+import type { ScopedColorBg, ScopedColorPalette, ScopedColorBanner } from "@seed-design/css/vars";
+import { vars } from "@seed-design/css/vars";
+
+/**
+ * A minimal subset of `StyleProps` from `@seed-design/react`.
+ * Copied here to avoid package dependency. May be extracted to a shared package later.
+ */
+export interface BoxBackgroundProps {
+  /**
+   * Shorthand for `background`.
+   */
+  bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+
+  background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+}
+
+function handleColor(color: string | undefined) {
+  if (!color) {
+    return undefined;
+  }
+  const [type, value] = color.split(".");
+
+  // @ts-expect-error - dynamic access
+  return vars.$color[type]?.[value] ?? color;
+}
+
+export function useBoxBackgroundProps<T extends BoxBackgroundProps>(
+  props: T,
+): {
+  style: React.CSSProperties;
+  restProps: Omit<T, keyof BoxBackgroundProps>;
+} {
+  const { bg, background, ...restProps } = props;
+
+  return {
+    style: {
+      "--seed-box-background": handleColor(background ?? bg),
+    } as React.CSSProperties,
+    restProps: restProps as Omit<T, keyof BoxBackgroundProps>,
+  };
+}