@seed-design/stackflow 0.0.0-alpha-20260414104312

package/lib/primitive/AppScreen/AppScreen.cjs

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+
+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 reactUiCore = require('@stackflow/react-ui-core');
+const React = require('react');
+const useAppScreen = require('./useAppScreen.cjs');
+const useAppScreenContext = require('./useAppScreenContext.cjs');
+
+const AppScreenRoot = React.forwardRef((props, ref) => {
+  const {
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart,
+    ...otherProps
+  } = props;
+  const innerRef = React.useRef(null);
+  const api = useAppScreen.useAppScreen({
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart
+  });
+  reactUiCore.usePreventTouchDuringTransition({
+    ref: innerRef
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(useAppScreenContext.AppScreenProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactPrimitive.Primitive.div,
+    {
+      ref: reactComposeRefs.composeRefs(innerRef, ref),
+      "data-stackflow-component-name": "AppScreen",
+      ...domUtils.mergeProps(api.activityProps, otherProps)
+    }
+  ) });
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+const AppScreenDim = React.forwardRef((props, ref) => {
+  const { dimProps } = useAppScreenContext.useAppScreenContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(dimProps, props) });
+});
+AppScreenDim.displayName = "AppScreenDim";
+const AppScreenEdge = React.forwardRef((props, ref) => {
+  const { edgeProps } = useAppScreenContext.useAppScreenContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(edgeProps, props) });
+});
+AppScreenEdge.displayName = "AppScreenEdge";
+const AppScreenLayer = React.forwardRef((props, ref) => {
+  const { layerProps } = useAppScreenContext.useAppScreenContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(layerProps, props) });
+});
+AppScreenLayer.displayName = "AppScreenLayer";
+
+exports.AppScreenDim = AppScreenDim;
+exports.AppScreenEdge = AppScreenEdge;
+exports.AppScreenLayer = AppScreenLayer;
+exports.AppScreenRoot = AppScreenRoot;

package/lib/primitive/AppScreen/AppScreen.d.ts

@@ -0,0 +1,15 @@
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { UseAppScreenProps } from './useAppScreen';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface AppScreenRootProps extends PrimitiveProps, UseAppScreenProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppScreenRoot: ForwardRefExoticComponent<AppScreenRootProps & RefAttributes<HTMLDivElement>>;
+export interface AppScreenDimProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppScreenDim: ForwardRefExoticComponent<AppScreenDimProps & RefAttributes<HTMLDivElement>>;
+export interface AppScreenEdgeProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppScreenEdge: ForwardRefExoticComponent<AppScreenEdgeProps & RefAttributes<HTMLDivElement>>;
+export interface AppScreenLayerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppScreenLayer: ForwardRefExoticComponent<AppScreenLayerProps & RefAttributes<HTMLDivElement>>;

package/lib/primitive/AppScreen/AppScreen.js

@@ -0,0 +1,57 @@
+'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 { usePreventTouchDuringTransition } from '@stackflow/react-ui-core';
+import { forwardRef, useRef } from 'react';
+import { useAppScreen } from './useAppScreen.js';
+import { useAppScreenContext, AppScreenProvider } from './useAppScreenContext.js';
+
+const AppScreenRoot = forwardRef((props, ref) => {
+  const {
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart,
+    ...otherProps
+  } = props;
+  const innerRef = useRef(null);
+  const api = useAppScreen({
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart
+  });
+  usePreventTouchDuringTransition({
+    ref: innerRef
+  });
+  return /* @__PURE__ */ jsx(AppScreenProvider, { value: api, children: /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      ref: composeRefs(innerRef, ref),
+      "data-stackflow-component-name": "AppScreen",
+      ...mergeProps(api.activityProps, otherProps)
+    }
+  ) });
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+const AppScreenDim = forwardRef((props, ref) => {
+  const { dimProps } = useAppScreenContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(dimProps, props) });
+});
+AppScreenDim.displayName = "AppScreenDim";
+const AppScreenEdge = forwardRef((props, ref) => {
+  const { edgeProps } = useAppScreenContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(edgeProps, props) });
+});
+AppScreenEdge.displayName = "AppScreenEdge";
+const AppScreenLayer = forwardRef((props, ref) => {
+  const { layerProps } = useAppScreenContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(layerProps, props) });
+});
+AppScreenLayer.displayName = "AppScreenLayer";
+
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot };

package/lib/primitive/AppScreen/AppScreen.namespace.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppScreen = require('./AppScreen.cjs');
+
+
+
+exports.Dim = AppScreen.AppScreenDim;
+exports.Edge = AppScreen.AppScreenEdge;
+exports.Layer = AppScreen.AppScreenLayer;
+exports.Root = AppScreen.AppScreenRoot;

package/lib/primitive/AppScreen/AppScreen.namespace.d.ts

@@ -0,0 +1 @@
+export { AppScreenDim as Dim, AppScreenEdge as Edge, AppScreenLayer as Layer, AppScreenRoot as Root, type AppScreenDimProps as DimProps, type AppScreenEdgeProps as EdgeProps, type AppScreenLayerProps as LayerProps, type AppScreenRootProps as RootProps, } from './AppScreen';

package/lib/primitive/AppScreen/AppScreen.namespace.js

@@ -0,0 +1 @@
+export { AppScreenDim as Dim, AppScreenEdge as Edge, AppScreenLayer as Layer, AppScreenRoot as Root } from './AppScreen.js';

package/lib/primitive/AppScreen/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppScreen = require('./AppScreen.cjs');
+const AppScreen_namespace = require('./AppScreen.namespace.cjs');
+const useAppScreenContext = require('./useAppScreenContext.cjs');
+
+
+
+exports.AppScreenDim = AppScreen.AppScreenDim;
+exports.AppScreenEdge = AppScreen.AppScreenEdge;
+exports.AppScreenLayer = AppScreen.AppScreenLayer;
+exports.AppScreenRoot = AppScreen.AppScreenRoot;
+exports.AppScreen = AppScreen_namespace;
+exports.useAppScreenContext = useAppScreenContext.useAppScreenContext;

package/lib/primitive/AppScreen/index.d.ts

@@ -0,0 +1,3 @@
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot, type AppScreenDimProps, type AppScreenEdgeProps, type AppScreenLayerProps, type AppScreenRootProps, } from './AppScreen';
+export * as AppScreen from './AppScreen.namespace';
+export { useAppScreenContext, type UseAppScreenContext } from './useAppScreenContext';

package/lib/primitive/AppScreen/index.js

@@ -0,0 +1,4 @@
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from './AppScreen.js';
+import * as AppScreen_namespace from './AppScreen.namespace.js';
+export { AppScreen_namespace as AppScreen };
+export { useAppScreenContext } from './useAppScreenContext.js';

package/lib/primitive/AppScreen/useAppScreen.cjs

@@ -0,0 +1,66 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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 = useActivityZIndexBase.useActivityZIndexBase();
+  const zIndexStyle = React.useMemo(
+    () => ({
+      "--z-index-base": zIndexBase.toString()
+    }),
+    [zIndexBase]
+  );
+  const stateProps = React.useMemo(
+    () => ({
+      "data-activity-is-top": domUtils.dataAttr(activity?.isTop),
+      "data-activity-is-active": domUtils.dataAttr(activity?.isActive),
+      "data-transition-state": transitionState
+    }),
+    [transitionState, activity?.isActive, activity?.isTop]
+  );
+  return React.useMemo(
+    () => ({
+      activity,
+      stateProps,
+      activityProps: domUtils.elementProps({
+        "data-part": "activity",
+        "data-activity-type": "full-screen",
+        ...activityProps,
+        ...stateProps,
+        "data-activity-id": activity?.id,
+        style: zIndexStyle,
+        // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
+        suppressHydrationWarning: true
+      }),
+      dimProps: domUtils.elementProps({
+        "data-part": "dim",
+        ...stateProps
+      }),
+      layerProps: domUtils.elementProps({
+        "data-part": "layer",
+        ...stateProps,
+        ...layerProps
+      }),
+      edgeProps: domUtils.elementProps({
+        "data-part": "edge",
+        "aria-hidden": true,
+        tabIndex: -1,
+        ...edgeProps,
+        ...stateProps
+      })
+    }),
+    [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps]
+  );
+}
+
+exports.useAppScreen = useAppScreen;