@seed-design/stackflow 0.0.1-rc.1 → 0.0.1-rc.4

package/lib/index.js

@@ -1,786 +1,9 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  AppBar: () => AppBar_namespace_exports2,
-  AppBarIconButton: () => AppBarIconButton,
-  AppBarLeft: () => AppBarLeft2,
-  AppBarMain: () => AppBarMain2,
-  AppBarRight: () => AppBarRight2,
-  AppBarRoot: () => AppBarRoot2,
-  AppBarSubtitle: () => AppBarSubtitle,
-  AppBarTitle: () => AppBarTitle,
-  AppScreen: () => AppScreen_namespace_exports2,
-  AppScreenDim: () => AppScreenDim2,
-  AppScreenEdge: () => AppScreenEdge2,
-  AppScreenLayer: () => AppScreenLayer2,
-  AppScreenRoot: () => AppScreenRoot2,
-  Primitive: () => primitive_exports,
-  seedPlugin: () => seedPlugin
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/components/AppScreen/AppScreen.tsx
-var import_app_screen = require("@seed-design/css/recipes/app-screen");
-var import_react15 = require("react");
-
-// src/primitive/index.tsx
-var primitive_exports = {};
-__export(primitive_exports, {
-  AppBar: () => AppBar_namespace_exports,
-  AppBarLeft: () => AppBarLeft,
-  AppBarMain: () => AppBarMain,
-  AppBarRight: () => AppBarRight,
-  AppBarRoot: () => AppBarRoot,
-  AppScreen: () => AppScreen_namespace_exports,
-  AppScreenDim: () => AppScreenDim,
-  AppScreenEdge: () => AppScreenEdge,
-  AppScreenLayer: () => AppScreenLayer,
-  AppScreenRoot: () => AppScreenRoot,
-  GlobalInteraction: () => GlobalInteraction,
-  useAppScreenContext: () => useAppScreenContext,
-  useGlobalInteractionContext: () => useGlobalInteractionContext
-});
-
-// src/primitive/AppScreen/AppScreen.tsx
-var import_dom_utils2 = require("@seed-design/dom-utils");
-var import_react_primitive = require("@seed-design/react-primitive");
-var import_react5 = require("react");
-
-// src/primitive/AppScreen/useAppScreen.tsx
-var import_dom_utils = require("@seed-design/dom-utils");
-var import_react_ui_core = require("@stackflow/react-ui-core");
-var import_react3 = require("react");
-
-// src/primitive/GlobalInteraction/useSwipeBack.ts
-var import_react2 = require("react");
-
-// src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx
-var import_react = require("react");
-var GlobalInteractionContext = (0, import_react.createContext)(null);
-var GlobalInteractionProvider = GlobalInteractionContext.Provider;
-function useGlobalInteractionContext({
-  strict = true
-} = {}) {
-  const context = (0, import_react.useContext)(GlobalInteractionContext);
-  if (!context && strict) {
-    throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
-  }
-  return context;
-}
-
-// src/primitive/GlobalInteraction/useSwipeBack.ts
-function useSwipeBack(props) {
-  const globalInteraction = useGlobalInteractionContext();
-  const events = globalInteraction.getSwipeBackEvents(props);
-  (0, import_react2.useEffect)(() => {
-    return () => {
-      events.reset();
-    };
-  }, [events]);
-  return (0, import_react2.useMemo)(
-    () => ({
-      activityProps: {
-        "data-swipe-back": ""
-      },
-      layerProps: {
-        onTransitionEnd: (e) => {
-          if (e.target === e.currentTarget) {
-            events.reset();
-          }
-        },
-        onAnimationEnd: (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]
-  );
-}
-
-// src/primitive/AppScreen/useAppScreen.tsx
-function useAppScreen(props) {
-  var _a;
-  const activity = (0, import_react_ui_core.useNullableActivity)();
-  const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
-  const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
-  const zIndexBase = (0, import_react_ui_core.useZIndexBase)();
-  const zIndexStyle = (0, import_react3.useMemo)(
-    () => ({
-      "--z-index-base": zIndexBase.toString()
-    }),
-    [zIndexBase]
-  );
-  const stateProps = (0, import_react3.useMemo)(
-    () => ({
-      "data-activity-is-top": (0, import_dom_utils.dataAttr)(activity == null ? void 0 : activity.isTop),
-      "data-activity-is-active": (0, import_dom_utils.dataAttr)(activity == null ? void 0 : activity.isActive),
-      "data-transition-state": transitionState
-    }),
-    [transitionState, activity == null ? void 0 : activity.isActive, activity == null ? void 0 : activity.isTop]
-  );
-  return (0, import_react3.useMemo)(
-    () => ({
-      activity,
-      stateProps,
-      activityProps: (0, import_dom_utils.elementProps)({
-        "data-part": "activity",
-        "data-activity-type": "full-screen",
-        ...activityProps,
-        ...stateProps,
-        "data-activity-id": activity == null ? void 0 : activity.id,
-        style: zIndexStyle,
-        // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
-        suppressHydrationWarning: true
-      }),
-      dimProps: (0, import_dom_utils.elementProps)({
-        "data-part": "dim",
-        ...stateProps
-      }),
-      layerProps: (0, import_dom_utils.elementProps)({
-        "data-part": "layer",
-        ...stateProps,
-        ...layerProps
-      }),
-      edgeProps: (0, import_dom_utils.elementProps)({
-        "data-part": "edge",
-        "aria-hidden": true,
-        tabIndex: -1,
-        ...edgeProps,
-        ...stateProps
-      })
-    }),
-    [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps]
-  );
-}
-
-// src/primitive/AppScreen/useAppScreenContext.ts
-var import_react4 = require("react");
-var AppScreenContext = (0, import_react4.createContext)(null);
-var AppScreenProvider = AppScreenContext.Provider;
-function useAppScreenContext({
-  strict = true
-} = {}) {
-  const context = (0, import_react4.useContext)(AppScreenContext);
-  if (!context && strict) {
-    throw new Error("useAppScreenContext must be used within a AppScreen");
-  }
-  return context;
-}
-
-// src/primitive/AppScreen/AppScreen.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var AppScreenRoot = (0, import_react5.forwardRef)((props, ref) => {
-  const {
-    swipeBackDisplacementRatioThreshold,
-    swipeBackVelocityThreshold,
-    onSwipeBackEnd,
-    onSwipeBackMove,
-    onSwipeBackStart,
-    ...otherProps
-  } = props;
-  const api = useAppScreen({
-    swipeBackDisplacementRatioThreshold,
-    swipeBackVelocityThreshold,
-    onSwipeBackEnd,
-    onSwipeBackMove,
-    onSwipeBackStart
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppScreenProvider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_primitive.Primitive.div,
-    {
-      ref,
-      "data-stackflow-component-name": "AppScreen",
-      ...(0, import_dom_utils2.mergeProps)(api.activityProps, otherProps)
-    }
-  ) });
-});
-AppScreenRoot.displayName = "AppScreenRoot";
-var AppScreenDim = (0, import_react5.forwardRef)((props, ref) => {
-  const { dimProps } = useAppScreenContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ref, ...(0, import_dom_utils2.mergeProps)(dimProps, props) });
-});
-AppScreenDim.displayName = "AppScreenDim";
-var AppScreenEdge = (0, import_react5.forwardRef)((props, ref) => {
-  const { edgeProps } = useAppScreenContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ref, ...(0, import_dom_utils2.mergeProps)(edgeProps, props) });
-});
-AppScreenEdge.displayName = "AppScreenEdge";
-var AppScreenLayer = (0, import_react5.forwardRef)((props, ref) => {
-  const { layerProps } = useAppScreenContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ref, ...(0, import_dom_utils2.mergeProps)(layerProps, props) });
-});
-AppScreenLayer.displayName = "AppScreenLayer";
-
-// src/primitive/AppScreen/AppScreen.namespace.ts
-var AppScreen_namespace_exports = {};
-__export(AppScreen_namespace_exports, {
-  Dim: () => AppScreenDim,
-  Edge: () => AppScreenEdge,
-  Layer: () => AppScreenLayer,
-  Root: () => AppScreenRoot
-});
-
-// src/primitive/AppBar/AppBar.tsx
-var import_react_primitive2 = require("@seed-design/react-primitive");
-var import_react8 = require("react");
-
-// src/primitive/AppBar/useAppBar.tsx
-var import_dom_utils3 = require("@seed-design/dom-utils");
-var import_react6 = require("react");
-
-// src/primitive/private/useElementOffset.ts
-var React = __toESM(require("react"));
-var useLayoutEffect2 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function useElementOffset(element) {
-  const [offset, setOffset] = React.useState(
-    void 0
-  );
-  useLayoutEffect2(() => {
-    var _a;
-    if (!element) {
-      setOffset(void 0);
-      return;
-    }
-    if (element) {
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: ((_a = element.offsetParent) != null ? _a : document.body).clientWidth - element.offsetLeft
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        var _a2;
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = ((_a2 = element.offsetParent) != null ? _a2 : document.body).clientWidth - element.offsetLeft;
-        setOffset({ fromLeft, fromRight });
-      });
-      resizeObserver.observe(element);
-      return () => resizeObserver.unobserve(element);
-    }
-  }, [element]);
-  return offset;
-}
-
-// src/primitive/AppBar/useAppBar.tsx
-function useAppBar(_props) {
-  var _a, _b;
-  const { stateProps } = useAppScreenContext();
-  const [root, rootRef] = (0, import_react6.useState)(null);
-  const [left, leftRef] = (0, import_react6.useState)(null);
-  const [right, rightRef] = (0, import_react6.useState)(null);
-  const leftOffset = useElementOffset(left);
-  const rightOffset = useElementOffset(right);
-  const centeredTitlePaddingX = root ? `${Math.max((_a = leftOffset == null ? void 0 : leftOffset.fromLeft) != null ? _a : 0, (_b = rightOffset == null ? void 0 : rightOffset.fromRight) != null ? _b : 0)}px` : "initial";
-  return (0, import_react6.useMemo)(
-    () => ({
-      refs: {
-        root: rootRef,
-        left: leftRef,
-        right: rightRef
-      },
-      stateProps,
-      rootProps: (0, import_dom_utils3.elementProps)({
-        "data-part": "appBar",
-        ...stateProps,
-        style: {
-          "--centered-title-padding-x": centeredTitlePaddingX
-        }
-      })
-    }),
-    [stateProps, centeredTitlePaddingX]
-  );
-}
-
-// src/primitive/AppBar/useAppBarContext.ts
-var import_react7 = require("react");
-var AppBarContext = (0, import_react7.createContext)(null);
-var AppBarProvider = AppBarContext.Provider;
-function useAppBarContext({
-  strict = true
-} = {}) {
-  const context = (0, import_react7.useContext)(AppBarContext);
-  if (!context && strict) {
-    throw new Error("useAppBarContext must be used within a AppBar");
-  }
-  return context;
-}
-
-// src/primitive/AppBar/AppBar.tsx
-var import_dom_utils4 = require("@seed-design/dom-utils");
-var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var AppBarRoot = (0, import_react8.forwardRef)((props, ref) => {
-  const { ...otherProps } = props;
-  const api = useAppBar({});
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AppBarProvider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_primitive2.Primitive.div,
-    {
-      ref: (0, import_react_compose_refs.composeRefs)(api.refs.root, ref),
-      ...(0, import_dom_utils4.mergeProps)(api.rootProps, otherProps)
-    }
-  ) });
-});
-AppBarRoot.displayName = "AppBarRoot";
-var AppBarLeft = (0, import_react8.forwardRef)((props, ref) => {
-  const { refs, stateProps } = useAppBarContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_primitive2.Primitive.div, { ref: (0, import_react_compose_refs.composeRefs)(refs.left, ref), ...(0, import_dom_utils4.mergeProps)(stateProps, props) });
-});
-AppBarLeft.displayName = "AppBarLeft";
-var AppBarRight = (0, import_react8.forwardRef)((props, ref) => {
-  const { refs, stateProps } = useAppBarContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_primitive2.Primitive.div, { ref: (0, import_react_compose_refs.composeRefs)(refs.right, ref), ...(0, import_dom_utils4.mergeProps)(stateProps, props) });
-});
-AppBarRight.displayName = "AppBarRight";
-var AppBarMain = (0, import_react8.forwardRef)((props, ref) => {
-  const { stateProps } = useAppBarContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_primitive2.Primitive.div, { ref, ...(0, import_dom_utils4.mergeProps)(stateProps, props) });
-});
-
-// src/primitive/AppBar/AppBar.namespace.ts
-var AppBar_namespace_exports = {};
-__export(AppBar_namespace_exports, {
-  Left: () => AppBarLeft,
-  Main: () => AppBarMain,
-  Right: () => AppBarRight,
-  Root: () => AppBarRoot
-});
-
-// src/primitive/GlobalInteraction/GlobalInteraction.tsx
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_dom_utils5 = require("@seed-design/dom-utils");
-var import_react_primitive3 = require("@seed-design/react-primitive");
-var import_react12 = require("react");
-
-// src/primitive/GlobalInteraction/useGlobalInteraction.ts
-var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
-var import_react11 = require("react");
-
-// src/primitive/private/useTopActivity.ts
-var import_react9 = require("@stackflow/react");
-var import_react10 = require("react");
-function useTopActivity() {
-  var _a, _b;
-  const stack = (0, import_react9.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 = (_a = stack.activities.find((activity) => activity.isTop)) == null ? void 0 : _a.id;
-  const topActivity = stack.activities.find((activity) => activity.isTop);
-  const transitionState = (_b = topActivity == null ? void 0 : topActivity.transitionState) != null ? _b : "enter-done";
-  const [topEl, setTopEl] = (0, import_react10.useState)(null);
-  const activityType = topEl == null ? void 0 : topEl.dataset["activityType"];
-  (0, import_react10.useEffect)(() => {
-    if (!topId) return;
-    const el = document.querySelector(`[data-activity-id="${topId}"]`);
-    setTopEl(el);
-  }, [topId]);
-  return {
-    transitionState,
-    activityType
-  };
-}
-
-// src/primitive/GlobalInteraction/useGlobalInteraction.ts
-function useGlobalInteraction() {
-  const [swipeBackState, setSwipeBackState] = (0, import_react11.useState)("idle");
-  const swipeBackContextRef = (0, import_react11.useRef)({
-    x0: 0,
-    t0: 0,
-    displacement: 0,
-    displacementRatio: 0,
-    velocity: 0
-  });
-  const stackRef = (0, import_react11.useRef)(null);
-  const setSwipeBackContext = (0, import_react11.useCallback)((ctx) => {
-    var _a, _b;
-    swipeBackContextRef.current = ctx;
-    (_a = stackRef.current) == null ? void 0 : _a.style.setProperty(
-      "--swipe-back-displacement",
-      `${ctx.displacement.toString()}px`
-    );
-    (_b = stackRef.current) == null ? void 0 : _b.style.setProperty(
-      "--swipe-back-displacement-ratio",
-      ctx.displacementRatio.toString()
-    );
-  }, []);
-  const getSwipeBackEvents = (0, import_react11.useCallback)(
-    (props) => {
-      const {
-        swipeBackDisplacementRatioThreshold: displacementRatioThreshold = 0.4,
-        swipeBackVelocityThreshold: velocityThreshold = 1
-      } = props;
-      const onSwipeStart = (0, import_react_use_callback_ref.useCallbackRef)(props.onSwipeBackStart);
-      const onSwipeMove = (0, import_react_use_callback_ref.useCallbackRef)(props.onSwipeBackMove);
-      const onSwipeEnd = (0, import_react_use_callback_ref.useCallbackRef)(props.onSwipeBackEnd);
-      const startSwipeBack = (0, import_react11.useCallback)(
-        ({ x0, t0 }) => {
-          setSwipeBackContext({
-            x0,
-            t0,
-            displacement: 0,
-            displacementRatio: 0,
-            velocity: 0
-          });
-          setSwipeBackState("swiping");
-          onSwipeStart == null ? void 0 : onSwipeStart();
-        },
-        [onSwipeStart]
-      );
-      const moveSwipeBack = (0, import_react11.useCallback)(
-        ({ x, t }) => {
-          const displacement = x - swipeBackContextRef.current.x0;
-          const displacementRatio = displacement / window.innerWidth;
-          const velocity = displacement / (t - swipeBackContextRef.current.t0);
-          setSwipeBackContext({
-            ...swipeBackContextRef.current,
-            displacement,
-            displacementRatio,
-            velocity
-          });
-          setSwipeBackState("swiping");
-          onSwipeMove == null ? void 0 : onSwipeMove({ displacement, displacementRatio });
-        },
-        [onSwipeMove]
-      );
-      const endSwipeBack = (0, import_react11.useCallback)(
-        (_) => {
-          const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
-          setSwipeBackState("transitioning");
-          onSwipeEnd == null ? void 0 : onSwipeEnd({ swiped });
-        },
-        [onSwipeEnd, displacementRatioThreshold, velocityThreshold]
-      );
-      const reset = (0, import_react11.useCallback)(() => {
-        setSwipeBackContext({
-          x0: 0,
-          t0: 0,
-          displacement: 0,
-          displacementRatio: 0,
-          velocity: 0
-        });
-        setSwipeBackState("idle");
-      }, []);
-      return (0, import_react11.useMemo)(
-        () => ({
-          startSwipeBack,
-          moveSwipeBack,
-          endSwipeBack,
-          reset
-        }),
-        [startSwipeBack, moveSwipeBack, endSwipeBack, reset]
-      );
-    },
-    [setSwipeBackContext]
-  );
-  const topActivity = useTopActivity();
-  const stackProps = (0, import_react11.useMemo)(
-    () => ({
-      "data-swipe-back-state": swipeBackState,
-      "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType
-    }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType]
-  );
-  return (0, import_react11.useMemo)(
-    () => ({
-      stackRef,
-      swipeBackContextRef,
-      swipeBackState,
-      setSwipeBackState,
-      setSwipeBackContext,
-      getSwipeBackEvents,
-      stackProps
-    }),
-    [swipeBackState, setSwipeBackContext, getSwipeBackEvents, stackProps]
-  );
-}
-
-// src/primitive/GlobalInteraction/GlobalInteraction.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var GlobalInteraction = (0, import_react12.forwardRef)(
-  (props, ref) => {
-    const api = useGlobalInteraction();
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlobalInteractionProvider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_primitive3.Primitive.div,
-      {
-        ref: (0, import_react_compose_refs2.composeRefs)(api.stackRef, ref),
-        ...(0, import_dom_utils5.mergeProps)(api.stackProps, props)
-      }
-    ) });
-  }
-);
-GlobalInteraction.displayName = "GlobalInteraction";
-
-// src/utils/createStyleContext.tsx
-var import_clsx = __toESM(require("clsx"));
-var import_react13 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function createStyleContext(recipe) {
-  const ClassNamesContext = (0, import_react13.createContext)(null);
-  const PropsContext = (0, import_react13.createContext)(null);
-  const ClassNamesProvider3 = ({
-    children,
-    value
-  }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClassNamesContext.Provider, { value, children });
-  };
-  const PropsProvider3 = ({ children, value }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PropsContext.Provider, { value, children });
-  };
-  function useClassNames2() {
-    const context = (0, import_react13.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 useProps3() {
-    return (0, import_react13.useContext)(PropsContext);
-  }
-  const withRootProvider = (Component, options) => {
-    const { defaultProps } = options != null ? options : {};
-    const StyledComponent = (innerProps) => {
-      const props = { ...defaultProps != null ? defaultProps : {}, ...useProps3(), ...innerProps };
-      const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const classNames = recipe(variantProps);
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClassNamesProvider3, { value: classNames, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...otherProps }) });
-    };
-    StyledComponent.displayName = Component.displayName || Component.name;
-    return StyledComponent;
-  };
-  const withProvider = (Component, slot, options) => {
-    const { defaultProps } = options != null ? options : {};
-    const StyledComponent = (0, import_react13.forwardRef)((innerProps, ref) => {
-      const props = { ...defaultProps != null ? defaultProps : {}, ...useProps3(), ...innerProps };
-      const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const classNames = recipe(variantProps);
-      const className = classNames[slot];
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClassNamesProvider3, { value: classNames, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, ...otherProps, className: (0, import_clsx.default)(className, props.className) }) });
-    });
-    StyledComponent.displayName = Component.displayName || Component.name;
-    return StyledComponent;
-  };
-  const withContext3 = (Component, slot) => {
-    const StyledComponent = (0, import_react13.forwardRef)((props, ref) => {
-      const classNames = useClassNames2();
-      const className = classNames == null ? void 0 : classNames[slot];
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, ...props, className: (0, import_clsx.default)(className, props.className) });
-    });
-    StyledComponent.displayName = Component.displayName || Component.name;
-    return StyledComponent;
-  };
-  return {
-    ClassNamesProvider: ClassNamesProvider3,
-    PropsProvider: PropsProvider3,
-    useClassNames: useClassNames2,
-    useProps: useProps3,
-    withRootProvider,
-    withProvider,
-    withContext: withContext3
-  };
-}
-
-// src/components/AppBar/AppBar.tsx
-var import_react_slot = require("@radix-ui/react-slot");
-var import_dom_utils6 = require("@seed-design/dom-utils");
-var import_react_primitive4 = require("@seed-design/react-primitive");
-var import_app_bar = require("@seed-design/css/recipes/app-bar");
-var import_clsx2 = __toESM(require("clsx"));
-var import_react14 = require("react");
-var import_app_bar_main = require("@seed-design/css/recipes/app-bar-main");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext(import_app_bar.appBar);
-var {
-  PropsProvider: MainPropsProvider,
-  withProvider: withMainProvider,
-  withContext: withMainContext
-} = createStyleContext(import_app_bar_main.appBarMain);
-var AppBarPropsProvider = PropsProvider;
-var AppBarRoot2 = (0, import_react14.forwardRef)((props, ref) => {
-  const contextProps = useProps();
-  const [variantProps, otherProps] = import_app_bar.appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = (0, import_app_bar.appBar)(variantProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    MainPropsProvider,
-    {
-      value: {
-        theme: variantProps.theme,
-        transitionStyle: variantProps.transitionStyle,
-        tone: variantProps.tone
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        AppBar_namespace_exports.Root,
-        {
-          ref,
-          ...(0, import_dom_utils6.mergeProps)({ className: classNames.root }, otherProps)
-        }
-      )
-    }
-  ) });
-});
-AppBarRoot2.displayName = "AppBarRoot";
-var AppBarLeft2 = withContext(
-  AppBar_namespace_exports.Left,
-  "left"
-);
-var AppBarRight2 = withContext(
-  AppBar_namespace_exports.Right,
-  "right"
-);
-var AppBarMain2 = withMainProvider(
-  AppBar_namespace_exports.Main,
-  "root"
-);
-var AppBarTitle = withMainContext(
-  import_react_primitive4.Primitive.span,
-  "title"
-);
-var AppBarSubtitle = withMainContext(
-  import_react_primitive4.Primitive.span,
-  "subtitle"
-);
-var AppBarIconButton = (0, import_react14.forwardRef)(
-  ({ children, className, ...otherProps }, ref) => {
-    const { stateProps } = useAppBarContext();
-    const classNames = useClassNames();
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_primitive4.Primitive.button,
-      {
-        ref,
-        type: "button",
-        className: (0, import_clsx2.default)(classNames.iconButton, className),
-        ...(0, import_dom_utils6.mergeProps)(stateProps, otherProps),
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_slot.Slot, { className: classNames.icon, ...stateProps, children })
-      }
-    );
-  }
-);
-AppBarIconButton.displayName = "IconButton";
-
-// src/components/AppScreen/AppScreen.tsx
-var import_dom_utils7 = require("@seed-design/dom-utils");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var { ClassNamesProvider: ClassNamesProvider2, PropsProvider: PropsProvider2, withContext: withContext2, useProps: useProps2 } = createStyleContext(import_app_screen.appScreen);
-var AppScreenPropsProvider = PropsProvider2;
-var AppScreenRoot2 = (0, import_react15.forwardRef)((props, ref) => {
-  var _a;
-  const contextProps = useProps2();
-  const [variantProps, otherProps] = import_app_screen.appScreen.splitVariantProps({ ...contextProps, ...props });
-  const transitionStyle = (_a = variantProps.transitionStyle) != null ? _a : variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid";
-  const classNames = (0, import_app_screen.appScreen)({
-    ...variantProps,
-    transitionStyle
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClassNamesProvider2, { value: classNames, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    AppBarPropsProvider,
-    {
-      value: (0, import_react15.useMemo)(
-        () => ({ theme: variantProps.theme, transitionStyle }),
-        [variantProps.theme, transitionStyle]
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        AppScreen_namespace_exports.Root,
-        {
-          ref,
-          ...(0, import_dom_utils7.mergeProps)({ className: classNames.root }, otherProps)
-        }
-      )
-    }
-  ) });
-});
-AppScreenRoot2.displayName = "AppScreenRoot";
-var AppScreenDim2 = withContext2(
-  AppScreen_namespace_exports.Dim,
-  "dim"
-);
-var AppScreenEdge2 = withContext2(
-  AppScreen_namespace_exports.Edge,
-  "edge"
-);
-var AppScreenLayer2 = withContext2(
-  AppScreen_namespace_exports.Layer,
-  "layer"
-);
-
-// src/plugin.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var seedPlugin = (options) => () => ({
-  key: "seed-design",
-  wrapStack({ stack }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlobalInteraction, { children: stack.render() }) });
-  }
-});
-
-// src/components/AppBar/AppBar.namespace.ts
-var AppBar_namespace_exports2 = {};
-__export(AppBar_namespace_exports2, {
-  IconButton: () => AppBarIconButton,
-  Left: () => AppBarLeft2,
-  Main: () => AppBarMain2,
-  Right: () => AppBarRight2,
-  Root: () => AppBarRoot2,
-  Subtitle: () => AppBarSubtitle,
-  Title: () => AppBarTitle
-});
-
-// src/components/AppScreen/AppScreen.namespace.ts
-var AppScreen_namespace_exports2 = {};
-__export(AppScreen_namespace_exports2, {
-  Dim: () => AppScreenDim2,
-  Edge: () => AppScreenEdge2,
-  Layer: () => AppScreenLayer2,
-  Root: () => AppScreenRoot2
-});
-//# sourceMappingURL=index.js.map
+export { seedPlugin } from './plugin.js';
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, 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';
+import * as AppScreen_namespace from './components/AppScreen/AppScreen.namespace.js';
+export { AppScreen_namespace as AppScreen };
+import * as index from './primitive/index.js';
+export { index as Primitive };