@seed-design/stackflow 0.0.1-alpha-20250210081704

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

@@ -0,0 +1,7 @@
+import type { UseAppScreenReturn } from "./useAppScreen";
+export interface UseAppScreenContext extends UseAppScreenReturn {
+}
+export declare const AppScreenProvider: import("react").Provider<UseAppScreenContext | null>;
+export declare function useAppScreenContext<T extends boolean | undefined = true>({ strict, }?: {
+    strict?: T;
+}): T extends false ? UseAppScreenContext | null : UseAppScreenContext;

package/lib/primitive/GlobalInteraction/GlobalInteraction.d.ts

@@ -0,0 +1,4 @@
+import { type PrimitiveProps } from "@seed-design/react-primitive";
+export interface GlobalInteractionProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const GlobalInteraction: import("react").ForwardRefExoticComponent<GlobalInteractionProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { GlobalInteraction, type GlobalInteractionProps } from "./GlobalInteraction";
+export { useGlobalInteractionContext, type UseGlobalInteractionContext, } from "./useGlobalInteractionContext";

package/lib/primitive/GlobalInteraction/useGlobalInteraction.d.ts

@@ -0,0 +1,53 @@
+export type SwipeBackState = "idle" | "swiping" | "transitioning";
+export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
+export interface SwipeBackContext {
+    x0: number;
+    t0: number;
+    displacement: number;
+    displacementRatio: number;
+    velocity: number;
+}
+export interface SwipeBackProps {
+    /**
+     * The threshold to determine whether the swipe back is intentional.
+     * @default 0.4
+     */
+    swipeBackDisplacementRatioThreshold?: number;
+    /**
+     * The threshold to determine whether the swipe back is intentional.
+     * @default 1
+     */
+    swipeBackVelocityThreshold?: number;
+    onSwipeBackStart?: () => void;
+    onSwipeBackMove?: (props: {
+        displacement: number;
+        displacementRatio: number;
+    }) => void;
+    onSwipeBackEnd?: (props: {
+        swiped: boolean;
+    }) => void;
+}
+export interface StartSwipeBackProps {
+    x0: number;
+    t0: number;
+}
+export interface MoveSwipeBackProps {
+    x: number;
+    t: number;
+}
+export interface EndSwipeBackProps {
+}
+export declare function useGlobalInteraction(): {
+    stackRef: import("react").RefObject<HTMLDivElement>;
+    swipeBackContextRef: import("react").MutableRefObject<SwipeBackContext>;
+    swipeBackState: SwipeBackState;
+    setSwipeBackState: import("react").Dispatch<import("react").SetStateAction<SwipeBackState>>;
+    setSwipeBackContext: (ctx: SwipeBackContext) => void;
+    getSwipeBackEvents: (props: SwipeBackProps) => {
+        startSwipeBack: ({ x0, t0 }: StartSwipeBackProps) => void;
+        moveSwipeBack: ({ x, t }: MoveSwipeBackProps) => void;
+        endSwipeBack: (_: EndSwipeBackProps) => void;
+        reset: () => void;
+    };
+    stackProps: import("react").HTMLAttributes<HTMLElement>;
+};

package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.d.ts

@@ -0,0 +1,7 @@
+import type { UseGlobalInteractionReturn } from "./useGlobalInteraction";
+export interface UseGlobalInteractionContext extends UseGlobalInteractionReturn {
+}
+export declare const GlobalInteractionProvider: import("react").Provider<UseGlobalInteractionContext | null>;
+export declare function useGlobalInteractionContext<T extends boolean | undefined = true>({ strict, }?: {
+    strict?: T;
+}): T extends false ? UseGlobalInteractionContext | null : UseGlobalInteractionContext;

package/lib/primitive/GlobalInteraction/useSwipeBack.d.ts

@@ -0,0 +1,8 @@
+import type { SwipeBackProps } from "./useGlobalInteraction";
+export interface UseSwipeBackProps extends SwipeBackProps {
+}
+export declare function useSwipeBack(props: UseSwipeBackProps): {
+    activityProps: React.HTMLAttributes<HTMLDivElement>;
+    layerProps: React.HTMLAttributes<HTMLDivElement>;
+    edgeProps: React.HTMLAttributes<HTMLElement>;
+};

package/lib/primitive/index.d.ts

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

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/useTopActivity.d.ts

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

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/createWithStateProps.d.ts

@@ -0,0 +1,9 @@
+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>>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<R>>;
+export {};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@seed-design/stackflow",
+  "version": "0.0.1-alpha-20250210081704",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/stackflow"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js",
+      "import": "./lib/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "prepack": "bun run build",
+    "clean": "rm -rf lib",
+    "build": "bun build.mjs && tsc"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-use-callback-ref": "^1.1.0",
+    "@seed-design/dom-utils": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-primitive": "0.0.1-alpha-20250210081704",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@stackflow/core": "^1.1.0",
+    "esbuild": "^0.25.0"
+  },
+  "peerDependencies": {
+    "@seed-design/recipe": "0.0.0-alpha-20250210081704",
+    "@stackflow/react": ">=1.4.1",
+    "@stackflow/react-ui-core": ">=1.2.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "ultra": {
+    "concurrent": [
+      "dev",
+      "build"
+    ]
+  }
+}

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

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

package/src/components/AppBar/AppBar.tsx

@@ -0,0 +1,109 @@
+import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { type AppBarVariantProps, appBar } from "@seed-design/recipe/appBar";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { AppBar as AppBarPrimitive } from "../../primitive";
+import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { appBarMain, type AppBarMainVariantProps } from "@seed-design/recipe/appBarMain";
+
+const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } =
+  createStyleContext(appBar);
+const {
+  PropsProvider: MainPropsProvider,
+  withProvider: withMainProvider,
+  withContext: withMainContext,
+} = createStyleContext(appBarMain);
+
+export const AppBarPropsProvider = PropsProvider;
+
+export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps {}
+
+export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
+  const contextProps = useProps();
+  const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
+
+  const classNames = appBar(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <MainPropsProvider
+        value={{
+          theme: variantProps.theme,
+          transitionStyle: variantProps.transitionStyle,
+          tone: variantProps.tone,
+        }}
+      >
+        <AppBarPrimitive.Root
+          ref={ref}
+          {...mergeProps({ className: classNames.root }, otherProps)}
+        />
+      </MainPropsProvider>
+    </ClassNamesProvider>
+  );
+});
+AppBarRoot.displayName = "AppBarRoot";
+
+export interface AppBarLeftProps extends AppBarPrimitive.LeftProps {}
+
+export const AppBarLeft = withContext<HTMLDivElement, AppBarLeftProps>(
+  AppBarPrimitive.Left,
+  "left",
+);
+
+export interface AppBarRightProps extends AppBarPrimitive.RightProps {}
+
+export const AppBarRight = withContext<HTMLDivElement, AppBarRightProps>(
+  AppBarPrimitive.Right,
+  "right",
+);
+
+export interface AppBarMainProps extends AppBarMainVariantProps, AppBarPrimitive.MainProps {}
+
+export const AppBarMain = withMainProvider<HTMLDivElement, AppBarMainProps>(
+  AppBarPrimitive.Main,
+  "root",
+);
+
+export interface AppBarTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const AppBarTitle = withMainContext<HTMLSpanElement, AppBarTitleProps>(
+  Primitive.span,
+  "title",
+);
+
+export interface AppBarSubtitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const AppBarSubtitle = withMainContext<HTMLSpanElement, AppBarSubtitleProps>(
+  Primitive.span,
+  "subtitle",
+);
+
+export interface AppBarIconButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const AppBarIconButton = forwardRef<HTMLButtonElement, AppBarIconButtonProps>(
+  ({ children, className, ...otherProps }, ref) => {
+    const { stateProps } = useAppBarContext();
+    const classNames = useClassNames();
+
+    return (
+      <Primitive.button
+        ref={ref}
+        type="button"
+        className={clsx(classNames.iconButton, className)}
+        {...mergeProps(stateProps, otherProps)}
+      >
+        <Slot className={classNames.icon} {...stateProps}>
+          {children}
+        </Slot>
+      </Primitive.button>
+    );
+  },
+);
+AppBarIconButton.displayName = "IconButton";

package/src/components/AppBar/index.tsx

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

package/src/components/AppScreen/AppScreen.namespace.ts

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

package/src/components/AppScreen/AppScreen.tsx

@@ -0,0 +1,65 @@
+import { appScreen, type AppScreenVariantProps } from "@seed-design/recipe/appScreen";
+import { forwardRef, useMemo } from "react";
+import { AppScreen as AppScreenPrimitive } from "../../primitive";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { AppBarPropsProvider } from "../AppBar/AppBar";
+import { mergeProps } from "@seed-design/dom-utils";
+
+const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
+
+export const AppScreenPropsProvider = PropsProvider;
+
+export interface AppScreenRootProps extends AppScreenVariantProps, AppScreenPrimitive.RootProps {}
+
+export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((props, ref) => {
+  const contextProps = useProps();
+  const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props });
+
+  // TODO: we have to implement conditional default in recipe; this is temporal workaround.
+  const transitionStyle =
+    variantProps.transitionStyle ??
+    (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
+
+  const classNames = appScreen({
+    ...variantProps,
+    transitionStyle,
+  });
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <AppBarPropsProvider
+        value={useMemo(
+          () => ({ theme: variantProps.theme, transitionStyle }),
+          [variantProps.theme, transitionStyle],
+        )}
+      >
+        <AppScreenPrimitive.Root
+          ref={ref}
+          {...mergeProps({ className: classNames.root }, otherProps)}
+        />
+      </AppBarPropsProvider>
+    </ClassNamesProvider>
+  );
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+
+export interface AppScreenDimProps extends AppScreenPrimitive.DimProps {}
+
+export const AppScreenDim = withContext<HTMLDivElement, AppScreenDimProps>(
+  AppScreenPrimitive.Dim,
+  "dim",
+);
+
+export interface AppScreenEdgeProps extends AppScreenPrimitive.EdgeProps {}
+
+export const AppScreenEdge = withContext<HTMLDivElement, AppScreenEdgeProps>(
+  AppScreenPrimitive.Edge,
+  "edge",
+);
+
+export interface AppScreenLayerProps extends AppScreenPrimitive.LayerProps {}
+
+export const AppScreenLayer = withContext<HTMLDivElement, AppScreenLayerProps>(
+  AppScreenPrimitive.Layer,
+  "layer",
+);

package/src/components/AppScreen/index.tsx

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

package/src/components/index.tsx

@@ -0,0 +1,2 @@
+export * from "./AppBar";
+export * from "./AppScreen";

package/src/index.ts

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

package/src/plugin.tsx

@@ -0,0 +1,20 @@
+import type { StackflowReactPlugin } from "@stackflow/react";
+import { AppScreenPropsProvider } from "./components/AppScreen/AppScreen";
+import { GlobalInteraction } from "./primitive";
+
+export interface SeedPluginOptions {
+  theme: "android" | "cupertino";
+}
+
+export const seedPlugin =
+  (options: SeedPluginOptions): StackflowReactPlugin =>
+  () => ({
+    key: "seed-design",
+    wrapStack({ stack }) {
+      return (
+        <AppScreenPropsProvider value={options}>
+          <GlobalInteraction>{stack.render()}</GlobalInteraction>
+        </AppScreenPropsProvider>
+      );
+    },
+  });

package/src/primitive/AppBar/AppBar.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  AppBarRoot as Root,
+  AppBarMain as Main,
+  AppBarLeft as Left,
+  AppBarRight as Right,
+  type AppBarRootProps as RootProps,
+  type AppBarMainProps as MainProps,
+  type AppBarLeftProps as LeftProps,
+  type AppBarRightProps as RightProps,
+} from "./AppBar";

package/src/primitive/AppBar/AppBar.tsx

@@ -0,0 +1,52 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { useAppBar, type UseAppBarProps } from "./useAppBar";
+import { AppBarProvider, useAppBarContext } from "./useAppBarContext";
+import { mergeProps } from "@seed-design/dom-utils";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+
+export interface AppBarRootProps
+  extends PrimitiveProps,
+    UseAppBarProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarRoot = forwardRef<HTMLDivElement, AppBarRootProps>((props, ref) => {
+  const { ...otherProps } = props;
+  const api = useAppBar({});
+
+  return (
+    <AppBarProvider value={api}>
+      <Primitive.div
+        ref={composeRefs(api.refs.root, ref)}
+        {...mergeProps(api.rootProps, otherProps)}
+      />
+    </AppBarProvider>
+  );
+});
+AppBarRoot.displayName = "AppBarRoot";
+
+export interface AppBarLeftProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarLeft = forwardRef<HTMLDivElement, AppBarLeftProps>((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+
+  return <Primitive.div ref={composeRefs(refs.left, ref)} {...mergeProps(stateProps, props)} />;
+});
+AppBarLeft.displayName = "AppBarLeft";
+
+export interface AppBarRightProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarRight = forwardRef<HTMLDivElement, AppBarRightProps>((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+
+  return <Primitive.div ref={composeRefs(refs.right, ref)} {...mergeProps(stateProps, props)} />;
+});
+AppBarRight.displayName = "AppBarRight";
+
+export interface AppBarMainProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarMain = forwardRef<HTMLDivElement, AppBarMainProps>((props, ref) => {
+  const { stateProps } = useAppBarContext();
+
+  return <Primitive.div ref={ref} {...mergeProps(stateProps, props)} />;
+});

package/src/primitive/AppBar/index.ts

@@ -0,0 +1,12 @@
+export {
+  AppBarLeft,
+  AppBarRight,
+  AppBarRoot,
+  AppBarMain,
+  type AppBarLeftProps,
+  type AppBarRightProps,
+  type AppBarRootProps,
+  type AppBarMainProps,
+} from "./AppBar";
+
+export * as AppBar from "./AppBar.namespace";

package/src/primitive/AppBar/useAppBar.tsx

@@ -0,0 +1,42 @@
+import { elementProps } from "@seed-design/dom-utils";
+import { useMemo, useState } from "react";
+import { useAppScreenContext } from "../AppScreen";
+import { useElementOffset } from "../private/useElementOffset";
+
+// biome-ignore lint/suspicious/noEmptyInterface: intentionally empty for future extension
+export interface UseAppBarProps {}
+
+export type UseAppBarReturn = ReturnType<typeof useAppBar>;
+
+export function useAppBar(_props: UseAppBarProps) {
+  const { stateProps } = useAppScreenContext();
+
+  const [root, rootRef] = useState<HTMLElement | null>(null);
+  const [left, leftRef] = useState<HTMLElement | null>(null);
+  const [right, rightRef] = useState<HTMLElement | null>(null);
+
+  const leftOffset = useElementOffset(left);
+  const rightOffset = useElementOffset(right);
+  const centeredTitlePaddingX = root
+    ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px`
+    : "initial";
+
+  return useMemo(
+    () => ({
+      refs: {
+        root: rootRef,
+        left: leftRef,
+        right: rightRef,
+      },
+      stateProps,
+      rootProps: elementProps({
+        "data-part": "appBar",
+        ...stateProps,
+        style: {
+          "--centered-title-padding-x": centeredTitlePaddingX,
+        } as React.CSSProperties,
+      }),
+    }),
+    [stateProps, centeredTitlePaddingX],
+  );
+}

package/src/primitive/AppBar/useAppBarContext.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { UseAppBarReturn } from "./useAppBar";
+
+export interface UseAppBarContext extends UseAppBarReturn {}
+
+const AppBarContext = createContext<UseAppBarContext | null>(null);
+
+export const AppBarProvider = AppBarContext.Provider;
+
+export function useAppBarContext<T extends boolean | undefined = true>({
+  strict = true,
+}: { strict?: T } = {}): T extends false ? UseAppBarContext | null : UseAppBarContext {
+  const context = useContext(AppBarContext);
+  if (!context && strict) {
+    throw new Error("useAppBarContext must be used within a AppBar");
+  }
+
+  return context as UseAppBarContext;
+}

package/src/primitive/AppScreen/AppScreen.namespace.ts

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