@seed-design/stackflow 1.1.16 → 1.1.18

package/lib/components/AppBar/AppBar.cjs

@@ -16,6 +16,7 @@ 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 {
@@ -25,8 +26,12 @@ 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 [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
@@ -40,7 +45,7 @@ const AppBarRoot = React.forwardRef((props, ref) => {
     AppBar.AppBarRoot,
     {
       ref,
-      ...domUtils.mergeProps({ className: classNames.root }, otherProps)
+      ...domUtils.mergeProps({ className: classNames.root, style: boxStyle }, otherProps)
     }
   ) }) });
 });

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

@@ -12,6 +12,7 @@ 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 {
@@ -21,8 +22,12 @@ 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 [variantProps, otherProps] = appBar.splitVariantProps({
+    ...contextProps,
+    ...propsWithoutBoxProps
+  });
   const topActivityTransitionStyle = useTopActivity().transitionStyle;
   const resolvedVariantProps = {
     // this includes the default transitionStyle decided by theme, from contextProps or props
@@ -36,7 +41,7 @@ const AppBarRoot = forwardRef((props, ref) => {
     AppBarRoot$1,
     {
       ref,
-      ...mergeProps({ className: classNames.root }, otherProps)
+      ...mergeProps({ className: classNames.root, style: boxStyle }, otherProps)
     }
   ) }) });
 });

package/lib/components/AppScreen/AppScreen.cjs

@@ -12,6 +12,7 @@ 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 appBar = require('@seed-design/css/recipes/app-bar');
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext.createStyleContext(appScreen.appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -24,12 +25,16 @@ const AppScreenRoot = React.forwardRef((props, ref) => {
     ...variantProps,
     transitionStyle: react.useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
+  const [appBarVariantProps] = React.useMemo(
+    () => appBar.appBar.splitVariantProps(variantProps),
+    [variantProps]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
     AppBar.AppBarPropsProvider,
     {
       value: React.useMemo(
-        () => ({ ...variantProps, transitionStyle }),
-        [variantProps, transitionStyle]
+        () => ({ ...appBarVariantProps, transitionStyle }),
+        [appBarVariantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         AppScreen.AppScreenRoot,

package/lib/components/AppScreen/AppScreen.js

@@ -8,6 +8,7 @@ import { createStyleContext } from '../../utils/createStyleContext.js';
 import { AppBarPropsProvider } from '../AppBar/AppBar.js';
 import { useTopActivity } from '../../primitive/private/useTopActivity.js';
 import { useActivity } from '@stackflow/react';
+import { appBar } from '@seed-design/css/recipes/app-bar';
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -20,12 +21,16 @@ const AppScreenRoot = forwardRef((props, ref) => {
     ...variantProps,
     transitionStyle: useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
+  const [appBarVariantProps] = useMemo(
+    () => appBar.splitVariantProps(variantProps),
+    [variantProps]
+  );
   return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
     AppBarPropsProvider,
     {
       value: useMemo(
-        () => ({ ...variantProps, transitionStyle }),
-        [variantProps, transitionStyle]
+        () => ({ ...appBarVariantProps, transitionStyle }),
+        [appBarVariantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsx(
         AppScreenRoot$1,

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.16",
+  "version": "1.1.18",
   "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.16",
+    "@seed-design/css": "1.2.5",
     "@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.16",
+    "@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

@@ -10,6 +10,7 @@ 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);
@@ -21,11 +22,19 @@ 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 [variantProps, otherProps] = appBar.splitVariantProps({
+    ...contextProps,
+    ...propsWithoutBoxProps,
+  });
 
   const topActivityTransitionStyle = useTopActivity().transitionStyle;
 
@@ -46,7 +55,7 @@ export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) =
       <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

@@ -6,6 +6,7 @@ import { createStyleContext } from "../../utils/createStyleContext";
 import { AppBarPropsProvider } from "../AppBar/AppBar";
 import { useTopActivity } from "../../primitive/private/useTopActivity";
 import { useActivity } from "@stackflow/react";
+import { appBar } from "@seed-design/css/recipes/app-bar";
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 
@@ -36,12 +37,17 @@ export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((pro
       : (topActivityTransitionStyle as NonNullable<AppScreenVariantProps["transitionStyle"]>),
   });
 
+  const [appBarVariantProps] = useMemo(
+    () => appBar.splitVariantProps(variantProps),
+    [variantProps],
+  );
+
   return (
     <ClassNamesProvider value={classNames}>
       <AppBarPropsProvider
         value={useMemo(
-          () => ({ ...variantProps, transitionStyle }),
-          [variantProps, transitionStyle],
+          () => ({ ...appBarVariantProps, transitionStyle }),
+          [appBarVariantProps, transitionStyle],
         )}
       >
         <AppScreenPrimitive.Root

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>,
+  };
+}