@seed-design/stackflow 0.1.2 → 0.2.0

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -70,6 +70,11 @@ function useGlobalInteraction() {
       const endSwipeBack = React.useCallback(
         (_) => {
           const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
+          if (swiped) {
+            stackRef.current?.style.setProperty("--swipe-back-target", "100%");
+          } else {
+            stackRef.current?.style.setProperty("--swipe-back-target", "0");
+          }
           setSwipeBackState("transitioning");
           onSwipeEnd?.({ swiped });
         },
@@ -83,6 +88,7 @@ function useGlobalInteraction() {
           displacementRatio: 0,
           velocity: 0
         });
+        stackRef.current?.style.setProperty("--swipe-back-target", "0");
         setSwipeBackState("idle");
       }, []);
       return React.useMemo(

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -66,6 +66,11 @@ function useGlobalInteraction() {
       const endSwipeBack = useCallback(
         (_) => {
           const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
+          if (swiped) {
+            stackRef.current?.style.setProperty("--swipe-back-target", "100%");
+          } else {
+            stackRef.current?.style.setProperty("--swipe-back-target", "0");
+          }
           setSwipeBackState("transitioning");
           onSwipeEnd?.({ swiped });
         },
@@ -79,6 +84,7 @@ function useGlobalInteraction() {
           displacementRatio: 0,
           velocity: 0
         });
+        stackRef.current?.style.setProperty("--swipe-back-target", "0");
         setSwipeBackState("idle");
       }, []);
       return useMemo(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,11 +35,11 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "0.1.2",
+    "@seed-design/css": "0.2.0",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@stackflow/react-ui-core": "^1.3.2",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^5.0.0",
     "globby": "^14.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -47,7 +47,7 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=0.1.2",
+    "@seed-design/css": ">=0.2.0",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "@stackflow/react-ui-core": ">=1.3.2",

package/src/primitive/AppBar/useAppBarContext.ts

@@ -9,7 +9,9 @@ export const AppBarProvider = AppBarContext.Provider;
 
 export function useAppBarContext<T extends boolean | undefined = true>({
   strict = true,
-}: { strict?: T } = {}): T extends false ? UseAppBarContext | null : UseAppBarContext {
+}: {
+  strict?: T;
+} = {}): T extends false ? UseAppBarContext | null : UseAppBarContext {
   const context = useContext(AppBarContext);
   if (!context && strict) {
     throw new Error("useAppBarContext must be used within a AppBar");

package/src/primitive/AppScreen/useAppScreenContext.ts

@@ -9,7 +9,9 @@ export const AppScreenProvider = AppScreenContext.Provider;
 
 export function useAppScreenContext<T extends boolean | undefined = true>({
   strict = true,
-}: { strict?: T } = {}): T extends false ? UseAppScreenContext | null : UseAppScreenContext {
+}: {
+  strict?: T;
+} = {}): T extends false ? UseAppScreenContext | null : UseAppScreenContext {
   const context = useContext(AppScreenContext);
   if (!context && strict) {
     throw new Error("useAppScreenContext must be used within a AppScreen");

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -119,9 +119,13 @@ export function useGlobalInteraction() {
             swipeBackContextRef.current.displacementRatio > displacementRatioThreshold ||
             swipeBackContextRef.current.velocity > velocityThreshold;
 
-          // we intentionally do not reset context here, so that the displacement can be used for exit animation
-          setSwipeBackState("transitioning");
+          if (swiped) {
+            stackRef.current?.style.setProperty("--swipe-back-target", "100%");
+          } else {
+            stackRef.current?.style.setProperty("--swipe-back-target", "0");
+          }
 
+          setSwipeBackState("transitioning");
           onSwipeEnd?.({ swiped });
         },
         [onSwipeEnd, displacementRatioThreshold, velocityThreshold],
@@ -135,6 +139,7 @@ export function useGlobalInteraction() {
           displacementRatio: 0,
           velocity: 0,
         });
+        stackRef.current?.style.setProperty("--swipe-back-target", "0");
         setSwipeBackState("idle");
       }, []);
 

package/src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx

@@ -9,9 +9,9 @@ export const GlobalInteractionProvider = GlobalInteractionContext.Provider;
 
 export function useGlobalInteractionContext<T extends boolean | undefined = true>({
   strict = true,
-}: { strict?: T } = {}): T extends false
-  ? UseGlobalInteractionContext | null
-  : UseGlobalInteractionContext {
+}: {
+  strict?: T;
+} = {}): T extends false ? UseGlobalInteractionContext | null : UseGlobalInteractionContext {
   const context = useContext(GlobalInteractionContext);
   if (!context && strict) {
     throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");

package/src/utils/createStyleContext.tsx

@@ -18,7 +18,10 @@ export function createStyleContext<
   const ClassNamesProvider = ({
     children,
     value,
-  }: { children: React.ReactNode; value: Classnames }) => {
+  }: {
+    children: React.ReactNode;
+    value: Classnames;
+  }) => {
     return <ClassNamesContext.Provider value={value}>{children}</ClassNamesContext.Provider>;
   };