@seed-design/stackflow 0.0.0-alpha-20260414104312

package/lib/index.js

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

package/lib/plugin.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const AppScreen = require('./components/AppScreen/AppScreen.cjs');
+const GlobalInteraction = require('./primitive/GlobalInteraction/GlobalInteraction.cjs');
+
+const seedPlugin = (options) => () => ({
+  key: "seed-design",
+  wrapStack({ stack, initialContext }) {
+    const resolved = typeof options === "function" ? options({ initialContext }) : options;
+    return /* @__PURE__ */ jsxRuntime.jsx(AppScreen.AppScreenPropsProvider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalInteraction.GlobalInteraction, { children: stack.render() }) });
+  }
+});
+
+exports.seedPlugin = seedPlugin;

package/lib/plugin.d.ts

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

package/lib/plugin.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { AppScreenPropsProvider } from './components/AppScreen/AppScreen.js';
+import { GlobalInteraction } from './primitive/GlobalInteraction/GlobalInteraction.js';
+
+const seedPlugin = (options) => () => ({
+  key: "seed-design",
+  wrapStack({ stack, initialContext }) {
+    const resolved = typeof options === "function" ? options({ initialContext }) : options;
+    return /* @__PURE__ */ jsx(AppScreenPropsProvider, { value: resolved, children: /* @__PURE__ */ jsx(GlobalInteraction, { children: stack.render() }) });
+  }
+});
+
+export { seedPlugin };

package/lib/primitive/AppBar/AppBar.cjs

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
+const domUtils = require('@seed-design/dom-utils');
+const reactPrimitive = require('@seed-design/react-primitive');
+const React = require('react');
+const useAppBar = require('./useAppBar.cjs');
+const useAppBarContext = require('./useAppBarContext.cjs');
+
+const AppBarRoot = React.forwardRef((props, ref) => {
+  const { ...otherProps } = props;
+  const api = useAppBar.useAppBar();
+  return /* @__PURE__ */ jsxRuntime.jsx(useAppBarContext.AppBarProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactPrimitive.Primitive.div,
+    {
+      ref: reactComposeRefs.composeRefs(api.refs.root, ref),
+      ...domUtils.mergeProps(api.rootProps, otherProps)
+    }
+  ) });
+});
+AppBarRoot.displayName = "AppBarRoot";
+const AppBarLeft = React.forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext.useAppBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref: reactComposeRefs.composeRefs(refs.left, ref), ...domUtils.mergeProps(stateProps, props) });
+});
+AppBarLeft.displayName = "AppBarLeft";
+const AppBarRight = React.forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext.useAppBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref: reactComposeRefs.composeRefs(refs.right, ref), ...domUtils.mergeProps(stateProps, props) });
+});
+AppBarRight.displayName = "AppBarRight";
+const AppBarMain = React.forwardRef((props, ref) => {
+  const { stateProps } = useAppBarContext.useAppBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(stateProps, props) });
+});
+
+exports.AppBarLeft = AppBarLeft;
+exports.AppBarMain = AppBarMain;
+exports.AppBarRight = AppBarRight;
+exports.AppBarRoot = AppBarRoot;

package/lib/primitive/AppBar/AppBar.d.ts

@@ -0,0 +1,15 @@
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { UseAppBarProps } from './useAppBar';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface AppBarRootProps extends PrimitiveProps, UseAppBarProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppBarRoot: ForwardRefExoticComponent<AppBarRootProps & RefAttributes<HTMLDivElement>>;
+export interface AppBarLeftProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppBarLeft: ForwardRefExoticComponent<AppBarLeftProps & RefAttributes<HTMLDivElement>>;
+export interface AppBarRightProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppBarRight: ForwardRefExoticComponent<AppBarRightProps & RefAttributes<HTMLDivElement>>;
+export interface AppBarMainProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AppBarMain: ForwardRefExoticComponent<AppBarMainProps & RefAttributes<HTMLDivElement>>;

package/lib/primitive/AppBar/AppBar.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { mergeProps } from '@seed-design/dom-utils';
+import { Primitive } from '@seed-design/react-primitive';
+import { forwardRef } from 'react';
+import { useAppBar } from './useAppBar.js';
+import { useAppBarContext, AppBarProvider } from './useAppBarContext.js';
+
+const AppBarRoot = forwardRef((props, ref) => {
+  const { ...otherProps } = props;
+  const api = useAppBar();
+  return /* @__PURE__ */ jsx(AppBarProvider, { value: api, children: /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      ref: composeRefs(api.refs.root, ref),
+      ...mergeProps(api.rootProps, otherProps)
+    }
+  ) });
+});
+AppBarRoot.displayName = "AppBarRoot";
+const AppBarLeft = forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref: composeRefs(refs.left, ref), ...mergeProps(stateProps, props) });
+});
+AppBarLeft.displayName = "AppBarLeft";
+const AppBarRight = forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref: composeRefs(refs.right, ref), ...mergeProps(stateProps, props) });
+});
+AppBarRight.displayName = "AppBarRight";
+const AppBarMain = forwardRef((props, ref) => {
+  const { stateProps } = useAppBarContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(stateProps, props) });
+});
+
+export { AppBarLeft, AppBarMain, AppBarRight, AppBarRoot };

package/lib/primitive/AppBar/AppBar.namespace.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppBar = require('./AppBar.cjs');
+
+
+
+exports.Left = AppBar.AppBarLeft;
+exports.Main = AppBar.AppBarMain;
+exports.Right = AppBar.AppBarRight;
+exports.Root = AppBar.AppBarRoot;

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

@@ -0,0 +1 @@
+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/lib/primitive/AppBar/AppBar.namespace.js

@@ -0,0 +1 @@
+export { AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root } from './AppBar.js';

package/lib/primitive/AppBar/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppBar = require('./AppBar.cjs');
+const AppBar_namespace = require('./AppBar.namespace.cjs');
+
+
+
+exports.AppBarLeft = AppBar.AppBarLeft;
+exports.AppBarMain = AppBar.AppBarMain;
+exports.AppBarRight = AppBar.AppBarRight;
+exports.AppBarRoot = AppBar.AppBarRoot;
+exports.AppBar = AppBar_namespace;

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

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

package/lib/primitive/AppBar/index.js

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

package/lib/primitive/AppBar/useAppBar.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domUtils = require('@seed-design/dom-utils');
+const React = require('react');
+const useAppScreenContext = require('../AppScreen/useAppScreenContext.cjs');
+const useElementOffset = require('../private/useElementOffset.cjs');
+
+function useAppBar(_props) {
+  const { stateProps } = useAppScreenContext.useAppScreenContext();
+  const [root, rootRef] = React.useState(null);
+  const [left, leftRef] = React.useState(null);
+  const [right, rightRef] = React.useState(null);
+  const leftOffset = useElementOffset.useElementOffset(left);
+  const rightOffset = useElementOffset.useElementOffset(right);
+  const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` : "initial";
+  return React.useMemo(
+    () => ({
+      refs: {
+        root: rootRef,
+        left: leftRef,
+        right: rightRef
+      },
+      stateProps,
+      rootProps: domUtils.elementProps({
+        "data-part": "appBar",
+        ...stateProps,
+        style: {
+          "--centered-title-padding-x": centeredTitlePaddingX
+        }
+      })
+    }),
+    [stateProps, centeredTitlePaddingX]
+  );
+}
+
+exports.useAppBar = useAppBar;

package/lib/primitive/AppBar/useAppBar.d.ts

@@ -0,0 +1,294 @@
+import { Dispatch, SetStateAction, HTMLAttributes, CSSProperties, AriaRole, ReactNode, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler } from 'react';
+export interface UseAppBarProps {
+}
+export type UseAppBarReturn = ReturnType<typeof useAppBar>;
+export declare function useAppBar(_props: UseAppBarProps): {
+    refs: {
+        root: Dispatch<SetStateAction<HTMLElement | null>>;
+        left: Dispatch<SetStateAction<HTMLElement | null>>;
+        right: Dispatch<SetStateAction<HTMLElement | null>>;
+    };
+    stateProps: HTMLAttributes<HTMLElement>;
+    rootProps: {
+        slot?: string | undefined | undefined;
+        style?: CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        role?: AriaRole | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        children?: ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement> | undefined;
+        onFocus?: FocusEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: FocusEventHandler<HTMLElement> | undefined;
+        onBlur?: FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: FocusEventHandler<HTMLElement> | undefined;
+        onChange?: FormEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: InputEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: FormEventHandler<HTMLElement> | undefined;
+        onInput?: FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: FormEventHandler<HTMLElement> | undefined;
+        onReset?: FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: FormEventHandler<HTMLElement> | undefined;
+        onLoad?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onError?: ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onPause?: ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onClick?: MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDrop?: DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: UIEventHandler<HTMLElement> | undefined;
+        onScrollEnd?: UIEventHandler<HTMLElement> | undefined;
+        onScrollEndCapture?: UIEventHandler<HTMLElement> | undefined;
+        onWheel?: WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: TransitionEventHandler<HTMLElement> | undefined;
+    };
+};

package/lib/primitive/AppBar/useAppBar.js

@@ -0,0 +1,35 @@
+'use client';
+import { elementProps } from '@seed-design/dom-utils';
+import { useState, useMemo } from 'react';
+import { useAppScreenContext } from '../AppScreen/useAppScreenContext.js';
+import { useElementOffset } from '../private/useElementOffset.js';
+
+function useAppBar(_props) {
+  const { stateProps } = useAppScreenContext();
+  const [root, rootRef] = useState(null);
+  const [left, leftRef] = useState(null);
+  const [right, rightRef] = useState(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
+        }
+      })
+    }),
+    [stateProps, centeredTitlePaddingX]
+  );
+}
+
+export { useAppBar };

package/lib/primitive/AppBar/useAppBarContext.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const AppBarContext = React.createContext(null);
+const AppBarProvider = AppBarContext.Provider;
+function useAppBarContext({
+  strict = true
+} = {}) {
+  const context = React.useContext(AppBarContext);
+  if (!context && strict) {
+    throw new Error("useAppBarContext must be used within a AppBar");
+  }
+  return context;
+}
+
+exports.AppBarProvider = AppBarProvider;
+exports.useAppBarContext = useAppBarContext;

package/lib/primitive/AppBar/useAppBarContext.d.ts

@@ -0,0 +1,8 @@
+import { UseAppBarReturn } from './useAppBar';
+import { Provider } from 'react';
+export interface UseAppBarContext extends UseAppBarReturn {
+}
+export declare const AppBarProvider: Provider<UseAppBarContext | null>;
+export declare function useAppBarContext<T extends boolean | undefined = true>({ strict, }?: {
+    strict?: T;
+}): T extends false ? UseAppBarContext | null : UseAppBarContext;

package/lib/primitive/AppBar/useAppBarContext.js

@@ -0,0 +1,16 @@
+'use client';
+import { createContext, useContext } from 'react';
+
+const AppBarContext = createContext(null);
+const AppBarProvider = AppBarContext.Provider;
+function useAppBarContext({
+  strict = true
+} = {}) {
+  const context = useContext(AppBarContext);
+  if (!context && strict) {
+    throw new Error("useAppBarContext must be used within a AppBar");
+  }
+  return context;
+}
+
+export { AppBarProvider, useAppBarContext };