@seed-design/stackflow 0.0.0-alpha-20260414104312

package/lib/primitive/GlobalInteraction/useSwipeBack.js

@@ -0,0 +1,54 @@
+'use client';
+import { useEffect, useMemo } from 'react';
+import { useGlobalInteractionContext } from './useGlobalInteractionContext.js';
+
+function useSwipeBack(props) {
+  const globalInteraction = useGlobalInteractionContext();
+  const events = globalInteraction.getSwipeBackEvents(props);
+  useEffect(() => {
+    return () => {
+      events.reset();
+    };
+  }, [events]);
+  return useMemo(
+    () => ({
+      activityProps: {
+        "data-swipe-back": ""
+      },
+      layerProps: {
+        onAnimationEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
+        },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
+        }
+      },
+      edgeProps: {
+        tabIndex: -1,
+        onTouchStart: (e) => {
+          const x0 = e.touches[0].clientX;
+          const t0 = Date.now();
+          events.startSwipeBack({ x0, t0 });
+        },
+        onTouchMove: (e) => {
+          const x = e.touches[0].clientX;
+          const t = Date.now();
+          events.moveSwipeBack({ x, t });
+        },
+        onTouchEnd: () => {
+          events.endSwipeBack({});
+        },
+        onTouchCancel: () => {
+          events.endSwipeBack({});
+        }
+      }
+    }),
+    [events]
+  );
+}
+
+export { useSwipeBack };

package/lib/primitive/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppScreen = require('./AppScreen/AppScreen.cjs');
+const AppScreen_namespace = require('./AppScreen/AppScreen.namespace.cjs');
+const useAppScreenContext = require('./AppScreen/useAppScreenContext.cjs');
+const AppBar = require('./AppBar/AppBar.cjs');
+const AppBar_namespace = require('./AppBar/AppBar.namespace.cjs');
+const GlobalInteraction = require('./GlobalInteraction/GlobalInteraction.cjs');
+const useGlobalInteractionContext = require('./GlobalInteraction/useGlobalInteractionContext.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;
+exports.AppBarLeft = AppBar.AppBarLeft;
+exports.AppBarMain = AppBar.AppBarMain;
+exports.AppBarRight = AppBar.AppBarRight;
+exports.AppBarRoot = AppBar.AppBarRoot;
+exports.AppBar = AppBar_namespace;
+exports.GlobalInteraction = GlobalInteraction.GlobalInteraction;
+exports.useGlobalInteractionContext = useGlobalInteractionContext.useGlobalInteractionContext;

package/lib/primitive/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AppScreen';
+export * from './AppBar';
+export * from './GlobalInteraction';

package/lib/primitive/index.js

@@ -0,0 +1,9 @@
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from './AppScreen/AppScreen.js';
+import * as AppScreen_namespace from './AppScreen/AppScreen.namespace.js';
+export { AppScreen_namespace as AppScreen };
+export { useAppScreenContext } from './AppScreen/useAppScreenContext.js';
+export { AppBarLeft, AppBarMain, AppBarRight, AppBarRoot } from './AppBar/AppBar.js';
+import * as AppBar_namespace from './AppBar/AppBar.namespace.js';
+export { AppBar_namespace as AppBar };
+export { GlobalInteraction } from './GlobalInteraction/GlobalInteraction.js';
+export { useGlobalInteractionContext } from './GlobalInteraction/useGlobalInteractionContext.js';

package/lib/primitive/private/useElementOffset.cjs

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const useLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function useElementOffset(element) {
+  const [offset, setOffset] = React__namespace.useState(
+    void 0
+  );
+  useLayoutEffect(() => {
+    if (!element) {
+      setOffset(void 0);
+      return;
+    }
+    if (element) {
+      setOffset({
+        fromLeft: element.offsetLeft + element.offsetWidth,
+        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
+      });
+      const resizeObserver = new ResizeObserver(() => {
+        const fromLeft = element.offsetLeft + element.offsetWidth;
+        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
+        setOffset({ fromLeft, fromRight });
+      });
+      resizeObserver.observe(element);
+      return () => resizeObserver.unobserve(element);
+    }
+  }, [element]);
+  return offset;
+}
+
+exports.useElementOffset = useElementOffset;

package/lib/primitive/private/useElementOffset.d.ts

@@ -0,0 +1,4 @@
+export declare function useElementOffset(element: HTMLElement | null): {
+    fromLeft: number;
+    fromRight: number;
+} | undefined;

package/lib/primitive/private/useElementOffset.js

@@ -0,0 +1,31 @@
+'use client';
+import * as React from 'react';
+
+const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useElementOffset(element) {
+  const [offset, setOffset] = React.useState(
+    void 0
+  );
+  useLayoutEffect(() => {
+    if (!element) {
+      setOffset(void 0);
+      return;
+    }
+    if (element) {
+      setOffset({
+        fromLeft: element.offsetLeft + element.offsetWidth,
+        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
+      });
+      const resizeObserver = new ResizeObserver(() => {
+        const fromLeft = element.offsetLeft + element.offsetWidth;
+        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
+        setOffset({ fromLeft, fromRight });
+      });
+      resizeObserver.observe(element);
+      return () => resizeObserver.unobserve(element);
+    }
+  }, [element]);
+  return offset;
+}
+
+export { useElementOffset };

package/lib/primitive/private/useTopActivity.cjs

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('@stackflow/react');
+const React = require('react');
+
+function useTopActivity() {
+  const stack = react.useStack();
+  if (!stack) {
+    throw new Error(
+      "useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)"
+    );
+  }
+  const topId = stack.activities.find((activity) => activity.isTop)?.id;
+  const topActivity = stack.activities.find((activity) => activity.isTop);
+  const transitionState = topActivity?.transitionState ?? "enter-done";
+  const [topEl, setTopEl] = React.useState(null);
+  const activityType = topEl?.dataset["activityType"];
+  const transitionStyle = topEl?.dataset["transitionStyle"];
+  React.useLayoutEffect(() => {
+    if (!topId) return;
+    const el = document.querySelector(`[data-activity-id="${topId}"]`);
+    setTopEl(el);
+  }, [topId]);
+  return {
+    transitionState,
+    activityType,
+    transitionStyle
+  };
+}
+
+exports.useTopActivity = useTopActivity;

package/lib/primitive/private/useTopActivity.d.ts

@@ -0,0 +1,5 @@
+export declare function useTopActivity(): {
+    transitionState: "enter-active" | "enter-done" | "exit-active" | "exit-done";
+    activityType: string | undefined;
+    transitionStyle: string | undefined;
+};

package/lib/primitive/private/useTopActivity.js

@@ -0,0 +1,30 @@
+'use client';
+import { useStack } from '@stackflow/react';
+import { useState, useLayoutEffect } from 'react';
+
+function useTopActivity() {
+  const stack = useStack();
+  if (!stack) {
+    throw new Error(
+      "useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)"
+    );
+  }
+  const topId = stack.activities.find((activity) => activity.isTop)?.id;
+  const topActivity = stack.activities.find((activity) => activity.isTop);
+  const transitionState = topActivity?.transitionState ?? "enter-done";
+  const [topEl, setTopEl] = useState(null);
+  const activityType = topEl?.dataset["activityType"];
+  const transitionStyle = topEl?.dataset["transitionStyle"];
+  useLayoutEffect(() => {
+    if (!topId) return;
+    const el = document.querySelector(`[data-activity-id="${topId}"]`);
+    setTopEl(el);
+  }, [topId]);
+  return {
+    transitionState,
+    activityType,
+    transitionStyle
+  };
+}
+
+export { useTopActivity };

package/lib/utils/createStyleContext.cjs

@@ -0,0 +1,77 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('clsx');
+const React = require('react');
+
+function createStyleContext(recipe) {
+  const ClassNamesContext = React.createContext(null);
+  const PropsContext = React.createContext(null);
+  const ClassNamesProvider = ({
+    children,
+    value
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesContext.Provider, { value, children });
+  };
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsContext.Provider, { value, children });
+  };
+  function useClassNames() {
+    const context = React.useContext(ClassNamesContext);
+    if (context === null) {
+      throw new Error(
+        "useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?"
+      );
+    }
+    return context;
+  }
+  function useProps() {
+    return React.useContext(PropsContext);
+  }
+  const withRootProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = (innerProps) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...otherProps }) });
+    };
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withProvider = (Component, slot, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = React.forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      const className = classNames[slot];
+      return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) }) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withContext = (Component, slot) => {
+    const StyledComponent = React.forwardRef((props, ref) => {
+      const classNames = useClassNames();
+      const className = classNames?.[slot];
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+exports.createStyleContext = createStyleContext;

package/lib/utils/createStyleContext.d.ts

@@ -0,0 +1,23 @@
+type Recipe<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>> = ((props?: Props) => Classnames) & {
+    splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+export declare function createStyleContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: Recipe<Props, Classnames>): {
+    ClassNamesProvider: ({ children, value, }: {
+        children: React.ReactNode;
+        value: Classnames;
+    }) => import("react/jsx-runtime").JSX.Element;
+    PropsProvider: ({ children, value }: {
+        children: React.ReactNode;
+        value: Props;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useClassNames: () => Classnames;
+    useProps: () => Props | null;
+    withRootProvider: <P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: React.ElementType<any>, slot: keyof Classnames, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    withContext: <T, P>(Component: React.ElementType<any>, slot?: keyof Classnames) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+};
+export {};

package/lib/utils/createStyleContext.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { createContext, forwardRef, useContext } from 'react';
+
+function createStyleContext(recipe) {
+  const ClassNamesContext = createContext(null);
+  const PropsContext = createContext(null);
+  const ClassNamesProvider = ({
+    children,
+    value
+  }) => {
+    return /* @__PURE__ */ jsx(ClassNamesContext.Provider, { value, children });
+  };
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsx(PropsContext.Provider, { value, children });
+  };
+  function useClassNames() {
+    const context = useContext(ClassNamesContext);
+    if (context === null) {
+      throw new Error(
+        "useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?"
+      );
+    }
+    return context;
+  }
+  function useProps() {
+    return useContext(PropsContext);
+  }
+  const withRootProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = (innerProps) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(Component, { ...otherProps }) });
+    };
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withProvider = (Component, slot, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      const className = classNames[slot];
+      return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) }) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withContext = (Component, slot) => {
+    const StyledComponent = forwardRef((props, ref) => {
+      const classNames = useClassNames();
+      const className = classNames?.[slot];
+      return /* @__PURE__ */ jsx(Component, { ref, ...props, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+export { createStyleContext };

package/lib/utils/createWithStateProps.d.ts

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+type AtLeastOne<T> = [T, ...T[]];
+export declare function createWithStateProps(useContexts: AtLeastOne<(prop?: {
+    strict?: boolean;
+}) => {
+    stateProps: React.HTMLAttributes<HTMLElement>;
+} | null>, options?: {
+    strict?: boolean;
+}): <P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) => ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;
+export {};

package/lib/utils/styled.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vars = require('@seed-design/css/vars');
+
+function handleColor(color) {
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.vars.$color[type]?.[value] ?? color;
+}
+function useBoxBackgroundProps(props) {
+  const { bg, background, ...restProps } = props;
+  return {
+    style: {
+      "--seed-box-background": handleColor(background ?? bg)
+    },
+    restProps
+  };
+}
+
+exports.useBoxBackgroundProps = useBoxBackgroundProps;

package/lib/utils/styled.d.ts

@@ -0,0 +1,16 @@
+import { ScopedColorBg, ScopedColorPalette, ScopedColorBanner } from '@seed-design/css/vars';
+/**
+ * A minimal subset of `StyleProps` from `@seed-design/react`.
+ * Copied here to avoid package dependency. May be extracted to a shared package later.
+ */
+export interface BoxBackgroundProps {
+    /**
+     * Shorthand for `background`.
+     */
+    bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+}
+export declare function useBoxBackgroundProps<T extends BoxBackgroundProps>(props: T): {
+    style: React.CSSProperties;
+    restProps: Omit<T, keyof BoxBackgroundProps>;
+};

package/lib/utils/styled.js

@@ -0,0 +1,21 @@
+'use client';
+import { vars } from '@seed-design/css/vars';
+
+function handleColor(color) {
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.$color[type]?.[value] ?? color;
+}
+function useBoxBackgroundProps(props) {
+  const { bg, background, ...restProps } = props;
+  return {
+    style: {
+      "--seed-box-background": handleColor(background ?? bg)
+    },
+    restProps
+  };
+}
+
+export { useBoxBackgroundProps };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@seed-design/stackflow",
+  "version": "0.0.0-alpha-20260414104312",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/stackflow"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "vite build",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "0.0.0-alpha-20260414104312",
+    "@stackflow/react-ui-core": "^1.3.3",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@seed-design/css": "0.0.0-alpha-20260414104312",
+    "@stackflow/core": "^1.2.0",
+    "@stackflow/react": "^1.5.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^5.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": "0.0.0-alpha-20260414104312",
+    "@stackflow/core": ">=1.1.0",
+    "@stackflow/react": ">=1.4.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,21 @@
+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";