@seed-design/stackflow 1.1.0 → 1.1.5

package/lib/hooks/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useActivityZIndexBase = require('./useActivityZIndexBase.cjs');
+
+
+
+exports.useActivityZIndexBase = useActivityZIndexBase.useActivityZIndexBase;

package/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useActivityZIndexBase } from './useActivityZIndexBase';

package/lib/hooks/index.js

@@ -0,0 +1 @@
+export { useActivityZIndexBase } from './useActivityZIndexBase.js';

package/lib/hooks/useActivityZIndexBase.cjs

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const reactUiCore = require('@stackflow/react-ui-core');
+
+const Z_INDEX_SPACING = 5;
+function useActivityZIndexBase(params) {
+  const activity = reactUiCore.useNullableActivity();
+  return ((activity?.zIndex ?? 0) + (params?.activityOffset ?? 0)) * Z_INDEX_SPACING;
+}
+
+exports.useActivityZIndexBase = useActivityZIndexBase;

package/lib/hooks/useActivityZIndexBase.d.ts

@@ -0,0 +1,18 @@
+interface UseActivityZIndexBaseParams {
+    /**
+     * Offset from the current activity's position in the stack.
+     *
+     * - `0` (default): Current activity's z-index base
+     * - `1`: Next activity's z-index base (common for overlay components)
+     *
+     * @default 0
+     */
+    activityOffset?: number;
+}
+/**
+ * Returns the base z-index which is calculated by multiplying the activity's index by 5.
+ * This value is used to give proper z-index values to elements of AppScreen (e.g. app-bar, dim, edge, layer). See the stylesheet of AppScreen for more details.
+ * This value can be provided to layerIndex of various overlay components (e.g. AlertDialog, BottomSheet, MenuSheet) to ensure correct stacking order.
+ */
+export declare function useActivityZIndexBase(params?: UseActivityZIndexBaseParams): number;
+export {};

package/lib/hooks/useActivityZIndexBase.js

@@ -0,0 +1,10 @@
+'use client';
+import { useNullableActivity } from '@stackflow/react-ui-core';
+
+const Z_INDEX_SPACING = 5;
+function useActivityZIndexBase(params) {
+  const activity = useNullableActivity();
+  return ((activity?.zIndex ?? 0) + (params?.activityOffset ?? 0)) * Z_INDEX_SPACING;
+}
+
+export { useActivityZIndexBase };

package/lib/index.cjs

@@ -7,6 +7,7 @@ const AppBar = require('./components/AppBar/AppBar.cjs');
 const AppBar_namespace = require('./components/AppBar/AppBar.namespace.cjs');
 const AppScreen = require('./components/AppScreen/AppScreen.cjs');
 const AppScreen_namespace = require('./components/AppScreen/AppScreen.namespace.cjs');
+const useActivityZIndexBase = require('./hooks/useActivityZIndexBase.cjs');
 const index = require('./primitive/index.cjs');
 
 
@@ -26,4 +27,5 @@ exports.AppScreenLayer = AppScreen.AppScreenLayer;
 exports.AppScreenPropsProvider = AppScreen.AppScreenPropsProvider;
 exports.AppScreenRoot = AppScreen.AppScreenRoot;
 exports.AppScreen = AppScreen_namespace;
+exports.useActivityZIndexBase = useActivityZIndexBase.useActivityZIndexBase;
 exports.Primitive = index;

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export { seedPlugin, type SeedPluginOptions } from './plugin';
 export * from './components';
+export * from './hooks';
 export * as Primitive from './primitive';

package/lib/index.js

@@ -5,5 +5,6 @@ export { AppBar_namespace as AppBar };
 export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenPropsProvider, AppScreenRoot } from './components/AppScreen/AppScreen.js';
 import * as AppScreen_namespace from './components/AppScreen/AppScreen.namespace.js';
 export { AppScreen_namespace as AppScreen };
+export { useActivityZIndexBase } from './hooks/useActivityZIndexBase.js';
 import * as index from './primitive/index.js';
 export { index as Primitive };

package/lib/primitive/AppScreen/useAppScreen.cjs

@@ -7,12 +7,13 @@ const domUtils = require('@seed-design/dom-utils');
 const reactUiCore = require('@stackflow/react-ui-core');
 const React = require('react');
 const useSwipeBack = require('../GlobalInteraction/useSwipeBack.cjs');
+const useActivityZIndexBase = require('../../hooks/useActivityZIndexBase.cjs');
 
 function useAppScreen(props) {
   const activity = reactUiCore.useNullableActivity();
   const transitionState = activity?.transitionState ?? "enter-done";
   const { activityProps, layerProps, edgeProps } = useSwipeBack.useSwipeBack(props);
-  const zIndexBase = reactUiCore.useZIndexBase();
+  const zIndexBase = useActivityZIndexBase.useActivityZIndexBase();
   const zIndexStyle = React.useMemo(
     () => ({
       "--z-index-base": zIndexBase.toString()

package/lib/primitive/AppScreen/useAppScreen.js

@@ -1,14 +1,15 @@
 'use client';
 import { dataAttr, elementProps } from '@seed-design/dom-utils';
-import { useNullableActivity, useZIndexBase } from '@stackflow/react-ui-core';
+import { useNullableActivity } from '@stackflow/react-ui-core';
 import { useMemo } from 'react';
 import { useSwipeBack } from '../GlobalInteraction/useSwipeBack.js';
+import { useActivityZIndexBase } from '../../hooks/useActivityZIndexBase.js';
 
 function useAppScreen(props) {
   const activity = useNullableActivity();
   const transitionState = activity?.transitionState ?? "enter-done";
   const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
-  const zIndexBase = useZIndexBase();
+  const zIndexBase = useActivityZIndexBase();
   const zIndexStyle = useMemo(
     () => ({
       "--z-index-base": zIndexBase.toString()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.0",
+  "version": "1.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,21 +35,21 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.1.0",
+    "@seed-design/css": "1.1.5",
     "@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": "^15.0.0",
+    "globby": "^16.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.1.0",
+    "@seed-design/css": ">=1.1.5",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "@stackflow/react-ui-core": ">=1.3.2",

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useActivityZIndexBase } from "./useActivityZIndexBase";

package/src/hooks/useActivityZIndexBase.ts

@@ -0,0 +1,26 @@
+import { useNullableActivity } from "@stackflow/react-ui-core";
+
+interface UseActivityZIndexBaseParams {
+  /**
+   * Offset from the current activity's position in the stack.
+   *
+   * - `0` (default): Current activity's z-index base
+   * - `1`: Next activity's z-index base (common for overlay components)
+   *
+   * @default 0
+   */
+  activityOffset?: number;
+}
+
+const Z_INDEX_SPACING = 5;
+
+/**
+ * Returns the base z-index which is calculated by multiplying the activity's index by 5.
+ * This value is used to give proper z-index values to elements of AppScreen (e.g. app-bar, dim, edge, layer). See the stylesheet of AppScreen for more details.
+ * This value can be provided to layerIndex of various overlay components (e.g. AlertDialog, BottomSheet, MenuSheet) to ensure correct stacking order.
+ */
+export function useActivityZIndexBase(params?: UseActivityZIndexBaseParams): number {
+  const activity = useNullableActivity();
+
+  return ((activity?.zIndex ?? 0) + (params?.activityOffset ?? 0)) * Z_INDEX_SPACING;
+}

package/src/index.ts

@@ -1,4 +1,6 @@
 export { seedPlugin, type SeedPluginOptions } from "./plugin";
 
 export * from "./components";
+export * from "./hooks";
+
 export * as Primitive from "./primitive";

package/src/primitive/AppScreen/useAppScreen.tsx

@@ -1,7 +1,8 @@
 import { dataAttr, elementProps } from "@seed-design/dom-utils";
-import { useNullableActivity, useZIndexBase } from "@stackflow/react-ui-core";
+import { useNullableActivity } from "@stackflow/react-ui-core";
 import { useMemo } from "react";
 import { type UseSwipeBackProps, useSwipeBack } from "../GlobalInteraction/useSwipeBack";
+import { useActivityZIndexBase } from "../../hooks";
 
 export interface UseAppScreenProps extends UseSwipeBackProps {}
 
@@ -14,7 +15,7 @@ export function useAppScreen(props: UseAppScreenProps) {
 
   const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
 
-  const zIndexBase = useZIndexBase();
+  const zIndexBase = useActivityZIndexBase();
   const zIndexStyle = useMemo(
     () =>
       ({