@seed-design/stackflow 1.0.5 → 1.1.0

package/lib/components/AppBar/AppBar.cjs

@@ -5,15 +5,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const reactSlot = require('@radix-ui/react-slot');
+const appBar = require('@seed-design/css/recipes/app-bar');
+const appBarMain = require('@seed-design/css/recipes/app-bar-main');
 const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
-const appBar = require('@seed-design/css/recipes/app-bar');
 const clsx = require('clsx');
 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 appBarMain = require('@seed-design/css/recipes/app-bar-main');
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext.createStyleContext(appBar.appBar);
 const {

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

@@ -1,7 +1,7 @@
-import { PrimitiveProps } from '@seed-design/react-primitive';
 import { AppBarVariantProps, AppBarVariant } from '@seed-design/css/recipes/app-bar';
-import { AppBar as AppBarPrimitive } from '../../primitive';
 import { AppBarMainVariantProps } from '@seed-design/css/recipes/app-bar-main';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { AppBar as AppBarPrimitive } from '../../primitive';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const AppBarPropsProvider: ({ children, value }: {
     children: React.ReactNode;

package/lib/components/AppBar/AppBar.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
+import { appBar } from '@seed-design/css/recipes/app-bar';
+import { appBarMain } from '@seed-design/css/recipes/app-bar-main';
 import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
-import { appBar } from '@seed-design/css/recipes/app-bar';
 import clsx from 'clsx';
 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 { appBarMain } from '@seed-design/css/recipes/app-bar-main';
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext(appBar);
 const {

package/lib/components/AppScreen/AppScreen.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const appScreen = require('@seed-design/css/recipes/app-screen');
+const domUtils = require('@seed-design/dom-utils');
 const React = require('react');
 const AppScreen = require('../../primitive/AppScreen/AppScreen.cjs');
 const createStyleContext = require('../../utils/createStyleContext.cjs');
 const AppBar = require('../AppBar/AppBar.cjs');
-const domUtils = require('@seed-design/dom-utils');
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext.createStyleContext(appScreen.appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -25,8 +25,8 @@ const AppScreenRoot = React.forwardRef((props, ref) => {
     AppBar.AppBarPropsProvider,
     {
       value: React.useMemo(
-        () => ({ theme: variantProps.theme, transitionStyle }),
-        [variantProps.theme, transitionStyle]
+        () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
+        [variantProps.theme, transitionStyle, variantProps.tone]
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         AppScreen.AppScreenRoot,

package/lib/components/AppScreen/AppScreen.d.ts

@@ -6,6 +6,10 @@ export declare const AppScreenPropsProvider: ({ children, value }: {
     value: Partial< AppScreenVariant>;
 }) => import("react/jsx-runtime").JSX.Element;
 export interface AppScreenRootProps extends AppScreenVariantProps, AppScreenPrimitive.RootProps {
+    /**
+     * @default "layer"
+     */
+    tone?: "layer" | "transparent";
 }
 export declare const AppScreenRoot: ForwardRefExoticComponent<AppScreenRootProps & RefAttributes<HTMLDivElement>>;
 export interface AppScreenDimProps extends AppScreenPrimitive.DimProps {

package/lib/components/AppScreen/AppScreen.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { appScreen } from '@seed-design/css/recipes/app-screen';
+import { mergeProps } from '@seed-design/dom-utils';
 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 { mergeProps } from '@seed-design/dom-utils';
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -21,8 +21,8 @@ const AppScreenRoot = forwardRef((props, ref) => {
     AppBarPropsProvider,
     {
       value: useMemo(
-        () => ({ theme: variantProps.theme, transitionStyle }),
-        [variantProps.theme, transitionStyle]
+        () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
+        [variantProps.theme, transitionStyle, variantProps.tone]
       ),
       children: /* @__PURE__ */ jsx(
         AppScreenRoot$1,

package/lib/primitive/AppBar/AppBar.cjs

@@ -4,12 +4,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
+const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
 const React = require('react');
 const useAppBar = require('./useAppBar.cjs');
 const useAppBarContext = require('./useAppBarContext.cjs');
-const domUtils = require('@seed-design/dom-utils');
-const reactComposeRefs = require('@radix-ui/react-compose-refs');
 
 const AppBarRoot = React.forwardRef((props, ref) => {
   const { ...otherProps } = props;

package/lib/primitive/AppBar/AppBar.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import { forwardRef } from 'react';
 import { useAppBar } from './useAppBar.js';
 import { useAppBarContext, AppBarProvider } from './useAppBarContext.js';
-import { mergeProps } from '@seed-design/dom-utils';
-import { composeRefs } from '@radix-ui/react-compose-refs';
 
 const AppBarRoot = forwardRef((props, ref) => {
   const { ...otherProps } = props;

package/lib/primitive/AppScreen/AppScreen.cjs

@@ -7,10 +7,10 @@ const jsxRuntime = require('react/jsx-runtime');
 const reactComposeRefs = require('@radix-ui/react-compose-refs');
 const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
+const reactUiCore = require('@stackflow/react-ui-core');
 const React = require('react');
 const useAppScreen = require('./useAppScreen.cjs');
 const useAppScreenContext = require('./useAppScreenContext.cjs');
-const reactUiCore = require('@stackflow/react-ui-core');
 
 const AppScreenRoot = React.forwardRef((props, ref) => {
   const {

package/lib/primitive/AppScreen/AppScreen.js

@@ -3,10 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
+import { usePreventTouchDuringTransition } from '@stackflow/react-ui-core';
 import { forwardRef, useRef } from 'react';
 import { useAppScreen } from './useAppScreen.js';
 import { useAppScreenContext, AppScreenProvider } from './useAppScreenContext.js';
-import { usePreventTouchDuringTransition } from '@stackflow/react-ui-core';
 
 const AppScreenRoot = forwardRef((props, ref) => {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,7 +35,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.0.5",
+    "@seed-design/css": "1.1.0",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@stackflow/react-ui-core": "^1.3.2",
@@ -49,7 +49,7 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.0.5",
+    "@seed-design/css": ">=1.1.0",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "@stackflow/react-ui-core": ">=1.3.2",

package/src/components/AppBar/AppBar.tsx

@@ -1,13 +1,13 @@
 import { Slot } from "@radix-ui/react-slot";
+import { appBar, type AppBarVariantProps } from "@seed-design/css/recipes/app-bar";
+import { appBarMain, type AppBarMainVariantProps } from "@seed-design/css/recipes/app-bar-main";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { type AppBarVariantProps, appBar } from "@seed-design/css/recipes/app-bar";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { AppBar as AppBarPrimitive } from "../../primitive";
 import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext";
 import { createStyleContext } from "../../utils/createStyleContext";
-import { appBarMain, type AppBarMainVariantProps } from "@seed-design/css/recipes/app-bar-main";
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } =
   createStyleContext(appBar);
@@ -24,7 +24,6 @@ export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootPro
 export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
-
   const classNames = appBar(variantProps);
 
   return (

package/src/components/AppScreen/AppScreen.tsx

@@ -1,15 +1,20 @@
 import { appScreen, type AppScreenVariantProps } from "@seed-design/css/recipes/app-screen";
+import { mergeProps } from "@seed-design/dom-utils";
 import { forwardRef, useMemo } from "react";
 import { AppScreen as AppScreenPrimitive } from "../../primitive";
 import { createStyleContext } from "../../utils/createStyleContext";
 import { AppBarPropsProvider } from "../AppBar/AppBar";
-import { mergeProps } from "@seed-design/dom-utils";
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 
 export const AppScreenPropsProvider = PropsProvider;
 
-export interface AppScreenRootProps extends AppScreenVariantProps, AppScreenPrimitive.RootProps {}
+export interface AppScreenRootProps extends AppScreenVariantProps, AppScreenPrimitive.RootProps {
+  /**
+   * @default "layer"
+   */
+  tone?: "layer" | "transparent";
+}
 
 export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((props, ref) => {
   const contextProps = useProps();
@@ -29,8 +34,8 @@ export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((pro
     <ClassNamesProvider value={classNames}>
       <AppBarPropsProvider
         value={useMemo(
-          () => ({ theme: variantProps.theme, transitionStyle }),
-          [variantProps.theme, transitionStyle],
+          () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
+          [variantProps.theme, transitionStyle, variantProps.tone],
         )}
       >
         <AppScreenPrimitive.Root

package/src/primitive/AppBar/AppBar.tsx

@@ -1,9 +1,9 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { forwardRef } from "react";
 import { useAppBar, type UseAppBarProps } from "./useAppBar";
 import { AppBarProvider, useAppBarContext } from "./useAppBarContext";
-import { mergeProps } from "@seed-design/dom-utils";
-import { composeRefs } from "@radix-ui/react-compose-refs";
 
 export interface AppBarRootProps
   extends PrimitiveProps,

package/src/primitive/AppScreen/AppScreen.tsx

@@ -1,10 +1,10 @@
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { usePreventTouchDuringTransition } from "@stackflow/react-ui-core";
 import { forwardRef, useRef } from "react";
 import { useAppScreen, type UseAppScreenProps } from "./useAppScreen";
 import { AppScreenProvider, useAppScreenContext } from "./useAppScreenContext";
-import { usePreventTouchDuringTransition } from "@stackflow/react-ui-core";
 
 export interface AppScreenRootProps
   extends PrimitiveProps,