@seed-design/stackflow 1.1.18 → 1.1.20

package/lib/components/AppBar/AppBar.cjs

@@ -87,6 +87,22 @@ const AppBarIconButton = React.forwardRef(
   }
 );
 AppBarIconButton.displayName = "IconButton";
+const AppBarSlot = React.forwardRef(
+  ({ children, className, ...otherProps }, ref) => {
+    const { stateProps } = useAppBarContext.useAppBarContext();
+    const classNames = useClassNames();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      {
+        ref,
+        className: clsx(classNames.custom, className),
+        ...domUtils.mergeProps(stateProps, otherProps),
+        children
+      }
+    );
+  }
+);
+AppBarSlot.displayName = "AppBarSlot";
 
 exports.AppBarIconButton = AppBarIconButton;
 exports.AppBarLeft = AppBarLeft;
@@ -94,5 +110,6 @@ exports.AppBarMain = AppBarMain;
 exports.AppBarPropsProvider = AppBarPropsProvider;
 exports.AppBarRight = AppBarRight;
 exports.AppBarRoot = AppBarRoot;
+exports.AppBarSlot = AppBarSlot;
 exports.AppBarSubtitle = AppBarSubtitle;
 exports.AppBarTitle = AppBarTitle;

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

@@ -29,3 +29,6 @@ export declare const AppBarSubtitle: ForwardRefExoticComponent<AppBarSubtitlePro
 export interface AppBarIconButtonProps extends PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export declare const AppBarIconButton: ForwardRefExoticComponent<AppBarIconButtonProps & RefAttributes<HTMLButtonElement>>;
+export interface AppBarSlotProps extends PrimitiveProps, React.HTMLAttributes<HTMLElement> {
+}
+export declare const AppBarSlot: ForwardRefExoticComponent<AppBarSlotProps & RefAttributes<HTMLElement>>;

package/lib/components/AppBar/AppBar.js

@@ -83,5 +83,21 @@ const AppBarIconButton = forwardRef(
   }
 );
 AppBarIconButton.displayName = "IconButton";
+const AppBarSlot = forwardRef(
+  ({ children, className, ...otherProps }, ref) => {
+    const { stateProps } = useAppBarContext();
+    const classNames = useClassNames();
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        className: clsx(classNames.custom, className),
+        ...mergeProps(stateProps, otherProps),
+        children
+      }
+    );
+  }
+);
+AppBarSlot.displayName = "AppBarSlot";
 
-export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarPropsProvider, AppBarRight, AppBarRoot, AppBarSubtitle, AppBarTitle };
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarPropsProvider, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle };

package/lib/components/AppBar/AppBar.namespace.cjs

@@ -11,5 +11,6 @@ exports.Left = AppBar.AppBarLeft;
 exports.Main = AppBar.AppBarMain;
 exports.Right = AppBar.AppBarRight;
 exports.Root = AppBar.AppBarRoot;
+exports.Slot = AppBar.AppBarSlot;
 exports.Subtitle = AppBar.AppBarSubtitle;
 exports.Title = AppBar.AppBarTitle;

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

@@ -1,2 +1,2 @@
-export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSubtitle as Subtitle, AppBarTitle as Title, } from './AppBar';
-export type { AppBarIconButtonProps as IconButtonProps, AppBarLeftProps as LeftProps, AppBarMainProps as MainProps, AppBarRightProps as RightProps, AppBarProps as RootProps, AppBarSubtitleProps as SubtitleProps, AppBarTitleProps as TitleProps, } from './AppBar';
+export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSlot as Slot, AppBarSubtitle as Subtitle, AppBarTitle as Title, } from './AppBar';
+export type { AppBarIconButtonProps as IconButtonProps, AppBarLeftProps as LeftProps, AppBarMainProps as MainProps, AppBarRightProps as RightProps, AppBarProps as RootProps, AppBarSlotProps as SlotProps, AppBarSubtitleProps as SubtitleProps, AppBarTitleProps as TitleProps, } from './AppBar';

package/lib/components/AppBar/AppBar.namespace.js

@@ -1 +1 @@
-export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSubtitle as Subtitle, AppBarTitle as Title } from './AppBar.js';
+export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSlot as Slot, AppBarSubtitle as Subtitle, AppBarTitle as Title } from './AppBar.js';

package/lib/components/AppBar/index.cjs

@@ -12,6 +12,7 @@ exports.AppBarLeft = AppBar.AppBarLeft;
 exports.AppBarMain = AppBar.AppBarMain;
 exports.AppBarRight = AppBar.AppBarRight;
 exports.AppBarRoot = AppBar.AppBarRoot;
+exports.AppBarSlot = AppBar.AppBarSlot;
 exports.AppBarSubtitle = AppBar.AppBarSubtitle;
 exports.AppBarTitle = AppBar.AppBarTitle;
 exports.AppBar = AppBar_namespace;

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

@@ -1,3 +1,3 @@
-export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSubtitle, AppBarTitle, } from './AppBar';
-export type { AppBarIconButtonProps, AppBarLeftProps, AppBarMainProps, AppBarProps, AppBarRightProps, AppBarSubtitleProps, AppBarTitleProps, } from './AppBar';
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, } from './AppBar';
+export type { AppBarIconButtonProps, AppBarLeftProps, AppBarMainProps, AppBarProps, AppBarRightProps, AppBarSlotProps, AppBarSubtitleProps, AppBarTitleProps, } from './AppBar';
 export * as AppBar from './AppBar.namespace';

package/lib/components/AppBar/index.js

@@ -1,3 +1,3 @@
-export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSubtitle, AppBarTitle } from './AppBar.js';
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from './AppBar.js';
 import * as AppBar_namespace from './AppBar.namespace.js';
 export { AppBar_namespace as AppBar };

package/lib/components/index.cjs

@@ -14,6 +14,7 @@ exports.AppBarLeft = AppBar.AppBarLeft;
 exports.AppBarMain = AppBar.AppBarMain;
 exports.AppBarRight = AppBar.AppBarRight;
 exports.AppBarRoot = AppBar.AppBarRoot;
+exports.AppBarSlot = AppBar.AppBarSlot;
 exports.AppBarSubtitle = AppBar.AppBarSubtitle;
 exports.AppBarTitle = AppBar.AppBarTitle;
 exports.AppBar = AppBar_namespace;

package/lib/components/index.js

@@ -1,4 +1,4 @@
-export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSubtitle, AppBarTitle } from './AppBar/AppBar.js';
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from './AppBar/AppBar.js';
 import * as AppBar_namespace from './AppBar/AppBar.namespace.js';
 export { AppBar_namespace as AppBar };
 export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenPropsProvider, AppScreenRoot } from './AppScreen/AppScreen.js';

package/lib/index.cjs

@@ -18,6 +18,7 @@ exports.AppBarLeft = AppBar.AppBarLeft;
 exports.AppBarMain = AppBar.AppBarMain;
 exports.AppBarRight = AppBar.AppBarRight;
 exports.AppBarRoot = AppBar.AppBarRoot;
+exports.AppBarSlot = AppBar.AppBarSlot;
 exports.AppBarSubtitle = AppBar.AppBarSubtitle;
 exports.AppBarTitle = AppBar.AppBarTitle;
 exports.AppBar = AppBar_namespace;

package/lib/index.js

@@ -1,5 +1,5 @@
 export { seedPlugin } from './plugin.js';
-export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSubtitle, AppBarTitle } from './components/AppBar/AppBar.js';
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from './components/AppBar/AppBar.js';
 import * as AppBar_namespace from './components/AppBar/AppBar.namespace.js';
 export { AppBar_namespace as AppBar };
 export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenPropsProvider, AppScreenRoot } from './components/AppScreen/AppScreen.js';

package/lib/plugin.cjs

@@ -9,8 +9,9 @@ const GlobalInteraction = require('./primitive/GlobalInteraction/GlobalInteracti
 
 const seedPlugin = (options) => () => ({
   key: "seed-design",
-  wrapStack({ stack }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AppScreen.AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalInteraction.GlobalInteraction, { children: stack.render() }) });
+  wrapStack({ stack, initialContext }) {
+    const resolved = typeof options === "function" ? options({ initialContext }) : options;
+    return /* @__PURE__ */ jsxRuntime.jsx(AppScreen.AppScreenPropsProvider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalInteraction.GlobalInteraction, { children: stack.render() }) });
   }
 });
 

package/lib/plugin.d.ts

@@ -2,4 +2,6 @@ import { StackflowReactPlugin } from '@stackflow/react';
 export interface SeedPluginOptions {
     theme: "android" | "cupertino";
 }
-export declare const seedPlugin: (options: SeedPluginOptions) => StackflowReactPlugin;
+export declare const seedPlugin: (options: SeedPluginOptions | ((args: {
+    initialContext?: any;
+}) => SeedPluginOptions)) => StackflowReactPlugin;

package/lib/plugin.js

@@ -5,8 +5,9 @@ import { GlobalInteraction } from './primitive/GlobalInteraction/GlobalInteracti
 
 const seedPlugin = (options) => () => ({
   key: "seed-design",
-  wrapStack({ stack }) {
-    return /* @__PURE__ */ jsx(AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ jsx(GlobalInteraction, { children: stack.render() }) });
+  wrapStack({ stack, initialContext }) {
+    const resolved = typeof options === "function" ? options({ initialContext }) : options;
+    return /* @__PURE__ */ jsx(AppScreenPropsProvider, { value: resolved, children: /* @__PURE__ */ jsx(GlobalInteraction, { children: stack.render() }) });
   }
 });
 

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -53,7 +53,7 @@ function useGlobalInteraction() {
       );
       const moveSwipeBack = React.useCallback(
         ({ x, t }) => {
-          const displacement = x - swipeBackContextRef.current.x0;
+          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
           const displacementRatio = displacement / window.innerWidth;
           const velocity = displacement / (t - swipeBackContextRef.current.t0);
           setSwipeBackContext({

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -49,7 +49,7 @@ function useGlobalInteraction() {
       );
       const moveSwipeBack = useCallback(
         ({ x, t }) => {
-          const displacement = x - swipeBackContextRef.current.x0;
+          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
           const displacementRatio = displacement / window.innerWidth;
           const velocity = displacement / (t - swipeBackContextRef.current.t0);
           setSwipeBackContext({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,7 +36,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.2.5",
+    "@seed-design/css": "1.2.7",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",

package/src/components/AppBar/AppBar.namespace.ts

@@ -4,6 +4,7 @@ export {
   AppBarMain as Main,
   AppBarRight as Right,
   AppBarRoot as Root,
+  AppBarSlot as Slot,
   AppBarSubtitle as Subtitle,
   AppBarTitle as Title,
 } from "./AppBar";
@@ -14,6 +15,7 @@ export type {
   AppBarMainProps as MainProps,
   AppBarRightProps as RightProps,
   AppBarProps as RootProps,
+  AppBarSlotProps as SlotProps,
   AppBarSubtitleProps as SubtitleProps,
   AppBarTitleProps as TitleProps,
 } from "./AppBar";

package/src/components/AppBar/AppBar.tsx

@@ -124,3 +124,23 @@ export const AppBarIconButton = forwardRef<HTMLButtonElement, AppBarIconButtonPr
   },
 );
 AppBarIconButton.displayName = "IconButton";
+
+export interface AppBarSlotProps extends PrimitiveProps, React.HTMLAttributes<HTMLElement> {}
+
+export const AppBarSlot = forwardRef<HTMLElement, AppBarSlotProps>(
+  ({ children, className, ...otherProps }, ref) => {
+    const { stateProps } = useAppBarContext();
+    const classNames = useClassNames();
+
+    return (
+      <Slot
+        ref={ref}
+        className={clsx(classNames.custom, className)}
+        {...mergeProps(stateProps, otherProps)}
+      >
+        {children}
+      </Slot>
+    );
+  },
+);
+AppBarSlot.displayName = "AppBarSlot";

package/src/components/AppBar/index.ts

@@ -4,6 +4,7 @@ export {
   AppBarMain,
   AppBarRight,
   AppBarRoot,
+  AppBarSlot,
   AppBarSubtitle,
   AppBarTitle,
 } from "./AppBar";
@@ -14,6 +15,7 @@ export type {
   AppBarMainProps,
   AppBarProps,
   AppBarRightProps,
+  AppBarSlotProps,
   AppBarSubtitleProps,
   AppBarTitleProps,
 } from "./AppBar";

package/src/plugin.tsx

@@ -7,12 +7,19 @@ export interface SeedPluginOptions {
 }
 
 export const seedPlugin =
-  (options: SeedPluginOptions): StackflowReactPlugin =>
+  (
+    options:
+      | SeedPluginOptions
+      // biome-ignore lint/suspicious/noExplicitAny: matches upstream @stackflow/react's `initialContext: any`
+      | ((args: { initialContext?: any }) => SeedPluginOptions),
+  ): StackflowReactPlugin =>
   () => ({
     key: "seed-design",
-    wrapStack({ stack }) {
+    wrapStack({ stack, initialContext }) {
+      const resolved = typeof options === "function" ? options({ initialContext }) : options;
+
       return (
-        <AppScreenPropsProvider value={options}>
+        <AppScreenPropsProvider value={resolved}>
           <GlobalInteraction>{stack.render()}</GlobalInteraction>
         </AppScreenPropsProvider>
       );

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -96,7 +96,7 @@ export function useGlobalInteraction() {
 
       const moveSwipeBack = useCallback(
         ({ x, t }: MoveSwipeBackProps) => {
-          const displacement = x - swipeBackContextRef.current.x0;
+          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
           const displacementRatio = displacement / window.innerWidth;
           const velocity = displacement / (t - swipeBackContextRef.current.t0);
           setSwipeBackContext({