@seed-design/stackflow 1.0.0 → 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/AppBar/useAppBar.d.ts

@@ -58,7 +58,7 @@ export declare function useAppBar(_props: UseAppBarProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;

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/lib/primitive/AppScreen/useAppScreen.d.ts

@@ -56,7 +56,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -338,7 +338,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -620,7 +620,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -902,7 +902,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -46,7 +46,7 @@ function useGlobalInteraction() {
             displacementRatio: 0,
             velocity: 0
           });
-          setSwipeBackState("swiping");
+          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
           onSwipeStart?.();
         },
         [onSwipeStart]
@@ -62,7 +62,7 @@ function useGlobalInteraction() {
             displacementRatio,
             velocity
           });
-          setSwipeBackState("swiping");
+          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
           onSwipeMove?.({ displacement, displacementRatio });
         },
         [onSwipeMove]
@@ -72,10 +72,11 @@ function useGlobalInteraction() {
           const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
           if (swiped) {
             stackRef.current?.style.setProperty("--swipe-back-target", "100%");
+            setSwipeBackState("completing");
           } else {
             stackRef.current?.style.setProperty("--swipe-back-target", "0");
+            setSwipeBackState("canceling");
           }
-          setSwipeBackState("transitioning");
           onSwipeEnd?.({ swiped });
         },
         [onSwipeEnd, displacementRatioThreshold, velocityThreshold]

package/lib/primitive/GlobalInteraction/useGlobalInteraction.d.ts

@@ -1,5 +1,5 @@
 import { RefObject, Dispatch, SetStateAction, HTMLAttributes } from 'react';
-export type SwipeBackState = "idle" | "swiping" | "transitioning";
+export type SwipeBackState = "idle" | "swiping" | "canceling" | "completing";
 export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
 export interface SwipeBackContext {
     x0: number;

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -42,7 +42,7 @@ function useGlobalInteraction() {
             displacementRatio: 0,
             velocity: 0
           });
-          setSwipeBackState("swiping");
+          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
           onSwipeStart?.();
         },
         [onSwipeStart]
@@ -58,7 +58,7 @@ function useGlobalInteraction() {
             displacementRatio,
             velocity
           });
-          setSwipeBackState("swiping");
+          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
           onSwipeMove?.({ displacement, displacementRatio });
         },
         [onSwipeMove]
@@ -68,10 +68,11 @@ function useGlobalInteraction() {
           const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
           if (swiped) {
             stackRef.current?.style.setProperty("--swipe-back-target", "100%");
+            setSwipeBackState("completing");
           } else {
             stackRef.current?.style.setProperty("--swipe-back-target", "0");
+            setSwipeBackState("canceling");
           }
-          setSwipeBackState("transitioning");
           onSwipeEnd?.({ swiped });
         },
         [onSwipeEnd, displacementRatioThreshold, velocityThreshold]

package/lib/primitive/GlobalInteraction/useSwipeBack.cjs

@@ -20,11 +20,6 @@ function useSwipeBack(props) {
         "data-swipe-back": ""
       },
       layerProps: {
-        onTransitionEnd: (e) => {
-          if (e.target === e.currentTarget) {
-            events.reset();
-          }
-        },
         onAnimationEnd: (e) => {
           if (e.target === e.currentTarget) {
             events.reset();

package/lib/primitive/GlobalInteraction/useSwipeBack.js

@@ -16,11 +16,6 @@ function useSwipeBack(props) {
         "data-swipe-back": ""
       },
       layerProps: {
-        onTransitionEnd: (e) => {
-          if (e.target === e.currentTarget) {
-            events.reset();
-          }
-        },
         onAnimationEnd: (e) => {
           if (e.target === e.currentTarget) {
             events.reset();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,19 +35,21 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.0.0",
+    "@seed-design/css": "1.1.0",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@stackflow/react-ui-core": "^1.3.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^5.0.0",
-    "globby": "^14.1.0",
+    "globby": "^15.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.0.0",
+    "@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,

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -2,7 +2,7 @@ import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useTopActivity } from "../private/useTopActivity";
 
-export type SwipeBackState = "idle" | "swiping" | "transitioning";
+export type SwipeBackState = "idle" | "swiping" | "canceling" | "completing";
 
 export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
 
@@ -88,8 +88,7 @@ export function useGlobalInteraction() {
             displacementRatio: 0,
             velocity: 0,
           });
-          setSwipeBackState("swiping");
-
+          setSwipeBackState((prev) => (prev === "swiping" ? prev : "swiping"));
           onSwipeStart?.();
         },
         [onSwipeStart],
@@ -106,8 +105,7 @@ export function useGlobalInteraction() {
             displacementRatio,
             velocity,
           });
-          setSwipeBackState("swiping");
-
+          setSwipeBackState((prev) => (prev === "swiping" ? prev : "swiping"));
           onSwipeMove?.({ displacement, displacementRatio });
         },
         [onSwipeMove],
@@ -121,11 +119,12 @@ export function useGlobalInteraction() {
 
           if (swiped) {
             stackRef.current?.style.setProperty("--swipe-back-target", "100%");
+            setSwipeBackState("completing");
           } else {
             stackRef.current?.style.setProperty("--swipe-back-target", "0");
+            setSwipeBackState("canceling");
           }
 
-          setSwipeBackState("transitioning");
           onSwipeEnd?.({ swiped });
         },
         [onSwipeEnd, displacementRatioThreshold, velocityThreshold],

package/src/primitive/GlobalInteraction/useSwipeBack.ts

@@ -20,11 +20,6 @@ export function useSwipeBack(props: UseSwipeBackProps) {
         "data-swipe-back": "",
       } as React.HTMLAttributes<HTMLDivElement>,
       layerProps: {
-        onTransitionEnd: (e) => {
-          if (e.target === e.currentTarget) {
-            events.reset();
-          }
-        },
         onAnimationEnd: (e) => {
           if (e.target === e.currentTarget) {
             events.reset();