@seed-design/stackflow 1.1.19 → 1.1.21

package/lib/utils/createStyleContext.cjs

@@ -1,77 +1,94 @@
-'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');
-
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/utils/createStyleContext.tsx
 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
-  };
+	const ClassNamesContext = (0, react.createContext)(null);
+	const PropsContext = (0, react.createContext)(null);
+	const ClassNamesProvider = ({ children, value }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassNamesContext.Provider, {
+			value,
+			children
+		});
+	};
+	const PropsProvider = ({ children, value }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PropsContext.Provider, {
+			value,
+			children
+		});
+	};
+	function useClassNames() {
+		const context = (0, 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 (0, react.useContext)(PropsContext);
+	}
+	const withRootProvider = (Component, options) => {
+		const { defaultProps } = options ?? {};
+		const StyledComponent = (innerProps) => {
+			const props = {
+				...defaultProps ?? {},
+				...useProps(),
+				...innerProps
+			};
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassNamesProvider, {
+				value: recipe(variantProps),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...otherProps })
+			});
+		};
+		StyledComponent.displayName = Component.displayName || Component.name;
+		return StyledComponent;
+	};
+	const withProvider = (Component, slot, options) => {
+		const { defaultProps } = options ?? {};
+		const StyledComponent = (0, 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__ */ (0, react_jsx_runtime.jsx)(ClassNamesProvider, {
+				value: classNames,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+					ref,
+					...otherProps,
+					className: (0, clsx.default)(className, props.className)
+				})
+			});
+		});
+		StyledComponent.displayName = Component.displayName || Component.name;
+		return StyledComponent;
+	};
+	const withContext = (Component, slot) => {
+		const StyledComponent = (0, react.forwardRef)((props, ref) => {
+			const className = useClassNames()?.[slot];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+				ref,
+				...props,
+				className: (0, clsx.default)(className, props.className)
+			});
+		});
+		StyledComponent.displayName = Component.displayName || Component.name;
+		return StyledComponent;
+	};
+	return {
+		ClassNamesProvider,
+		PropsProvider,
+		useClassNames,
+		useProps,
+		withRootProvider,
+		withProvider,
+		withContext
+	};
 }
-
+//#endregion
 exports.createStyleContext = createStyleContext;

package/lib/utils/createStyleContext.js

@@ -1,73 +1,92 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { createContext, forwardRef, useContext } from 'react';
-
+"use client";
+import clsx from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/createStyleContext.tsx
 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
-  };
+	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);
+			return /* @__PURE__ */ jsx(ClassNamesProvider, {
+				value: recipe(variantProps),
+				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 className = useClassNames()?.[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
+	};
 }
-
+//#endregion
 export { createStyleContext };

package/lib/utils/styled.cjs

@@ -1,25 +1,18 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vars = require('@seed-design/css/vars');
-
+"use client";
+require("../_virtual/_rolldown/runtime.cjs");
+let _seed_design_css_vars = require("@seed-design/css/vars");
+//#region src/utils/styled.ts
 function handleColor(color) {
-  if (!color) {
-    return void 0;
-  }
-  const [type, value] = color.split(".");
-  return vars.vars.$color[type]?.[value] ?? color;
+	if (!color) return;
+	const [type, value] = color.split(".");
+	return _seed_design_css_vars.vars.$color[type]?.[value] ?? color;
 }
 function useBoxBackgroundProps(props) {
-  const { bg, background, ...restProps } = props;
-  return {
-    style: {
-      "--seed-box-background": handleColor(background ?? bg)
-    },
-    restProps
-  };
+	const { bg, background, ...restProps } = props;
+	return {
+		style: { "--seed-box-background": handleColor(background ?? bg) },
+		restProps
+	};
 }
-
+//#endregion
 exports.useBoxBackgroundProps = useBoxBackgroundProps;

package/lib/utils/styled.js

@@ -1,21 +1,17 @@
-'use client';
-import { vars } from '@seed-design/css/vars';
-
+"use client";
+import { vars } from "@seed-design/css/vars";
+//#region src/utils/styled.ts
 function handleColor(color) {
-  if (!color) {
-    return void 0;
-  }
-  const [type, value] = color.split(".");
-  return vars.$color[type]?.[value] ?? color;
+	if (!color) return;
+	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
-  };
+	const { bg, background, ...restProps } = props;
+	return {
+		style: { "--seed-box-background": handleColor(background ?? bg) },
+		restProps
+	};
 }
-
+//#endregion
 export { useBoxBackgroundProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,16 +36,16 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.2.6",
+    "@seed-design/css": "1.2.11",
     "@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",
+    "@vitejs/plugin-react": "^6.0.0",
     "globby": "^16.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "vite": "^7.0.0",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {

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

@@ -6,6 +6,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { AppBar as AppBarPrimitive } from "../../primitive";
+import { appBarAnatomy } from "../../primitive/AppBar/anatomy";
 import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext";
 import { createStyleContext } from "../../utils/createStyleContext";
 import { useTopActivity } from "../../primitive/private/useTopActivity";
@@ -49,14 +50,18 @@ export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) =
   };
 
   const classNames = appBar(resolvedVariantProps);
+  const { children, ...restProps } = otherProps;
 
   return (
     <ClassNamesProvider value={classNames}>
       <MainPropsProvider value={resolvedVariantProps}>
         <AppBarPrimitive.Root
           ref={ref}
-          {...mergeProps({ className: classNames.root, style: boxStyle }, otherProps)}
-        />
+          {...mergeProps({ className: classNames.root, style: boxStyle }, restProps)}
+        >
+          <div aria-hidden data-part={appBarAnatomy.background} className={classNames.background} />
+          {children}
+        </AppBarPrimitive.Root>
       </MainPropsProvider>
     </ClassNamesProvider>
   );
@@ -116,7 +121,7 @@ export const AppBarIconButton = forwardRef<HTMLButtonElement, AppBarIconButtonPr
         className={clsx(classNames.iconButton, className)}
         {...mergeProps(stateProps, otherProps)}
       >
-        <Slot className={classNames.icon} {...stateProps}>
+        <Slot className={classNames.icon} data-part={appBarAnatomy.icon} {...stateProps}>
           {children}
         </Slot>
       </Primitive.button>
@@ -124,3 +129,24 @@ 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)}
+        data-part={appBarAnatomy.custom}
+        {...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/primitive/AppBar/AppBar.tsx

@@ -2,6 +2,7 @@ import { composeRefs } from "@radix-ui/react-compose-refs";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { forwardRef } from "react";
+import { appBarAnatomy } from "./anatomy";
 import { useAppBar, type UseAppBarProps } from "./useAppBar";
 import { AppBarProvider, useAppBarContext } from "./useAppBarContext";
 
@@ -48,5 +49,7 @@ export interface AppBarMainProps extends PrimitiveProps, React.HTMLAttributes<HT
 export const AppBarMain = forwardRef<HTMLDivElement, AppBarMainProps>((props, ref) => {
   const { stateProps } = useAppBarContext();
 
-  return <Primitive.div ref={ref} {...mergeProps(stateProps, props)} />;
+  return (
+    <Primitive.div ref={ref} data-part={appBarAnatomy.main} {...mergeProps(stateProps, props)} />
+  );
 });

package/src/primitive/AppBar/anatomy.ts

@@ -0,0 +1,16 @@
+/**
+ * Parts of the AppBar anatomy.
+ *
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
+ * Consumers in the styled layer and in GlobalInteraction/dom.ts import from
+ * here to keep markup and DOM queries in sync.
+ */
+export const appBarAnatomy = {
+  root: "appBar",
+  background: "appBarBackground",
+  main: "appBarMain",
+  icon: "appBarIcon",
+  custom: "appBarCustom",
+} as const;
+
+export type AppBarPart = (typeof appBarAnatomy)[keyof typeof appBarAnatomy];

package/src/primitive/AppBar/useAppBar.tsx

@@ -2,6 +2,7 @@ import { elementProps } from "@seed-design/dom-utils";
 import { useMemo, useState } from "react";
 import { useAppScreenContext } from "../AppScreen";
 import { useElementOffset } from "../private/useElementOffset";
+import { appBarAnatomy } from "./anatomy";
 
 // biome-ignore lint/suspicious/noEmptyInterface: intentionally empty for future extension
 export interface UseAppBarProps {}
@@ -30,7 +31,7 @@ export function useAppBar(_props: UseAppBarProps) {
       },
       stateProps,
       rootProps: elementProps({
-        "data-part": "appBar",
+        "data-part": appBarAnatomy.root,
         ...stateProps,
         style: {
           "--centered-title-padding-x": centeredTitlePaddingX,

package/src/primitive/AppScreen/anatomy.ts

@@ -0,0 +1,15 @@
+/**
+ * Parts of the AppScreen anatomy.
+ *
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
+ * Consumers in GlobalInteraction/dom.ts import from here to keep markup and
+ * DOM queries in sync.
+ */
+export const appScreenAnatomy = {
+  activity: "activity",
+  dim: "dim",
+  layer: "layer",
+  edge: "edge",
+} as const;
+
+export type AppScreenPart = (typeof appScreenAnatomy)[keyof typeof appScreenAnatomy];

package/src/primitive/AppScreen/useAppScreen.tsx

@@ -3,6 +3,7 @@ import { useNullableActivity } from "@stackflow/react-ui-core";
 import { useMemo } from "react";
 import { type UseSwipeBackProps, useSwipeBack } from "../GlobalInteraction/useSwipeBack";
 import { useActivityZIndexBase } from "../../hooks";
+import { appScreenAnatomy } from "./anatomy";
 
 export interface UseAppScreenProps extends UseSwipeBackProps {}
 
@@ -38,7 +39,7 @@ export function useAppScreen(props: UseAppScreenProps) {
       activity,
       stateProps,
       activityProps: elementProps({
-        "data-part": "activity",
+        "data-part": appScreenAnatomy.activity,
         "data-activity-type": "full-screen",
         ...activityProps,
         ...stateProps,
@@ -48,16 +49,16 @@ export function useAppScreen(props: UseAppScreenProps) {
         suppressHydrationWarning: true,
       }),
       dimProps: elementProps({
-        "data-part": "dim",
+        "data-part": appScreenAnatomy.dim,
         ...stateProps,
       }),
       layerProps: elementProps({
-        "data-part": "layer",
+        "data-part": appScreenAnatomy.layer,
         ...stateProps,
         ...layerProps,
       }),
       edgeProps: elementProps({
-        "data-part": "edge",
+        "data-part": appScreenAnatomy.edge,
         "aria-hidden": true,
         tabIndex: -1,
         ...edgeProps,