@seed-design/lynx-react 0.7.1 → 0.9.0

package/lib/components/Accordion/Accordion.jsx

@@ -1,5 +1,5 @@
-import { useControllableState } from "../../hooks/useControllableState.js";
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { toArray } from "../../utils/children.js";
 import { mergeProps } from "../../utils/merge-props.js";

package/lib/components/ActionButton/ActionButton.jsx

@@ -1,4 +1,4 @@
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { toArray } from "../../utils/children.js";
 import { mergeProps } from "../../utils/merge-props.js";

package/lib/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,64 @@
+import { DialogBackdropProps as DialogPrimitiveBackdropProps, DialogCloseProps as DialogPrimitiveCloseProps, DialogContentProps as DialogPrimitiveContentProps, DialogRootProps as DialogPrimitiveRootProps, DialogTriggerProps as DialogPrimitiveTriggerProps, DialogViewProps as DialogPrimitiveViewProps } from '@lynx-js/lynx-ui-dialog';
+import { ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from '@lynx-js/react';
+import { AlertDialogVariantProps } from '@seed-design/lynx-css/recipes/alert-dialog';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+type AlertDialogComponent<Props> = ((props: Props) => ReactElement) & {
+    displayName?: string;
+};
+type LynxForwardRefComponent<T, Props> = ForwardRefExoticComponent<PropsWithoutRef<Props> & RefAttributes<T>>;
+export interface AlertDialogRootProps extends AlertDialogVariantProps, Omit<DialogPrimitiveRootProps, "show" | "defaultShow" | "onShowChange"> {
+    /** Whether the alert dialog is open (controlled mode). */
+    open?: boolean;
+    /** Whether the alert dialog is open by default (uncontrolled mode). */
+    defaultOpen?: boolean;
+    /** Called when the alert dialog's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-dialog` as an alert dialog.
+ * Refs, `asChild`, focus management, Escape-key dismissal, and close reasons are
+ * not supported by the Lynx primitive.
+ */
+export declare const AlertDialogRoot: AlertDialogComponent<AlertDialogRootProps>;
+export interface AlertDialogTriggerProps extends DialogPrimitiveTriggerProps {
+}
+/** @platform Lynx — `asChild` and refs are unsupported. */
+export declare const AlertDialogTrigger: AlertDialogComponent<AlertDialogTriggerProps>;
+export interface AlertDialogPositionerProps extends DialogPrimitiveViewProps {
+}
+/** @platform Lynx — maps to `DialogView`; refs are unsupported. */
+export declare const AlertDialogPositioner: AlertDialogComponent<AlertDialogPositionerProps>;
+export interface AlertDialogBackdropProps extends DialogPrimitiveBackdropProps {
+}
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogBackdropProps` are reserved by the headless primitive and are omitted.
+ * Alert dialogs do not dismiss when the backdrop is tapped by default.
+ */
+export declare const AlertDialogBackdrop: AlertDialogComponent<AlertDialogBackdropProps>;
+export interface AlertDialogContentProps extends DialogPrimitiveContentProps, LynxAccessibilityProps {
+}
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogContentProps` are reserved by the headless primitive and are omitted.
+ */
+export declare const AlertDialogContent: AlertDialogComponent<AlertDialogContentProps>;
+export interface AlertDialogHeaderProps extends StyleProps, LynxStyledElementProps {
+}
+export declare const AlertDialogHeader: LynxForwardRefComponent<unknown, AlertDialogHeaderProps>;
+export interface AlertDialogTitleProps extends StyleProps, LynxStyledElementProps, LynxAccessibilityProps {
+}
+export declare const AlertDialogTitle: LynxForwardRefComponent<unknown, AlertDialogTitleProps>;
+export interface AlertDialogDescriptionProps extends StyleProps, LynxStyledElementProps, LynxAccessibilityProps {
+}
+export declare const AlertDialogDescription: LynxForwardRefComponent<unknown, AlertDialogDescriptionProps>;
+export interface AlertDialogFooterProps extends StyleProps, LynxStyledElementProps {
+}
+export declare const AlertDialogFooter: LynxForwardRefComponent<unknown, AlertDialogFooterProps>;
+export interface AlertDialogActionProps extends DialogPrimitiveCloseProps {
+}
+/** @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported. */
+export declare const AlertDialogAction: AlertDialogComponent<AlertDialogActionProps>;
+export {};
+//# sourceMappingURL=AlertDialog.d.ts.map

package/lib/components/AlertDialog/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"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"}

package/lib/components/AlertDialog/AlertDialog.jsx

@@ -0,0 +1,138 @@
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { useStyleProps } from "../../utils/styled.js";
+import { forwardRef } from "@lynx-js/react";
+import clsx from "clsx";
+import { DialogBackdrop, DialogClose, DialogContent, DialogRoot, DialogTrigger, DialogView } from "@lynx-js/lynx-ui-dialog";
+import { alertDialog } from "@seed-design/lynx-css/recipes/alert-dialog";
+//#region src/components/AlertDialog/AlertDialog.tsx
+var { ClassNamesProvider, PropsProvider, useClassNames, useProps } = createSlotRecipeContext(alertDialog);
+function omitHeadlessLifecycleHandlers(props) {
+	if (!props) return props;
+	const { bindanimationstart: _bindanimationstart, bindanimationend: _bindanimationend, bindanimationcancel: _bindanimationcancel, bindtransitionstart: _bindtransitionstart, bindtransitionend: _bindtransitionend, bindtap: _bindtap, ...nativeProps } = props;
+	return nativeProps;
+}
+function useAlertDialogTransition(transition) {
+	return useProps()?.skipAnimation === true ? false : transition ?? true;
+}
+/**
+* @platform Lynx — wraps `@lynx-js/lynx-ui-dialog` as an alert dialog.
+* Refs, `asChild`, focus management, Escape-key dismissal, and close reasons are
+* not supported by the Lynx primitive.
+*/
+var AlertDialogRoot = forwardRef((props, _ref) => {
+	const [variantProps, restProps] = alertDialog.splitVariantProps(props);
+	const { children, open, defaultOpen, onOpenChange, ...nativeProps } = restProps;
+	const classNames = alertDialog(variantProps);
+	return <ClassNamesProvider value={classNames}>
+      <PropsProvider value={variantProps}>
+        <DialogRoot {...nativeProps} show={open} defaultShow={defaultOpen} onShowChange={onOpenChange}>
+          {children}
+        </DialogRoot>
+      </PropsProvider>
+    </ClassNamesProvider>;
+});
+AlertDialogRoot.displayName = "AlertDialogRoot";
+/** @platform Lynx — `asChild` and refs are unsupported. */
+var AlertDialogTrigger = forwardRef((props, _ref) => {
+	const { children, transition, ...nativeProps } = props;
+	const resolvedTransition = useAlertDialogTransition(transition);
+	return <DialogTrigger {...nativeProps} transition={resolvedTransition}>
+      {children}
+    </DialogTrigger>;
+});
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+/** @platform Lynx — maps to `DialogView`; refs are unsupported. */
+var AlertDialogPositioner = forwardRef((props, _ref) => {
+	const { children, className, container, style, transition, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	const positionerStyle = container ? {
+		width: "100%",
+		height: "100%",
+		...style
+	} : style;
+	return <DialogView {...nativeProps} container={container} className={clsx(classNames.positioner, className)} style={positionerStyle} transition={resolvedTransition}>
+        {children}
+      </DialogView>;
+});
+AlertDialogPositioner.displayName = "AlertDialogPositioner";
+/**
+* @platform Lynx — refs are unsupported. Native lifecycle handlers in
+* `dialogBackdropProps` are reserved by the headless primitive and are omitted.
+* Alert dialogs do not dismiss when the backdrop is tapped by default.
+*/
+var AlertDialogBackdrop = forwardRef((props, _ref) => {
+	const { children, className, transition, clickToClose = false, dialogBackdropProps, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	return <DialogBackdrop {...nativeProps} className={clsx(classNames.backdrop, className)} transition={resolvedTransition} clickToClose={clickToClose} dialogBackdropProps={omitHeadlessLifecycleHandlers(dialogBackdropProps)}>
+      {children}
+    </DialogBackdrop>;
+});
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
+/**
+* @platform Lynx — refs are unsupported. Native lifecycle handlers in
+* `dialogContentProps` are reserved by the headless primitive and are omitted.
+*/
+var AlertDialogContent = forwardRef((props, _ref) => {
+	const { children, className, transition, dialogContentProps, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "alertdialog", ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	const resolvedDialogContentProps = {
+		"accessibility-element": accessibilityElement,
+		"accessibility-role-description": accessibilityRoleDescription,
+		...omitHeadlessLifecycleHandlers(dialogContentProps)
+	};
+	return <DialogContent {...nativeProps} className={clsx(classNames.content, className)} transition={resolvedTransition} dialogContentProps={resolvedDialogContentProps}>
+      {children}
+    </DialogContent>;
+});
+AlertDialogContent.displayName = "AlertDialogContent";
+var AlertDialogHeader = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.header, className)} style={style}>
+        {children}
+      </view>;
+});
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogTitle = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, "accessibility-heading": accessibilityHeading = true, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.title, className)} style={style} accessibility-heading={accessibilityHeading}>
+      {children}
+    </text>;
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+var AlertDialogDescription = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.description, className)} style={style}>
+        {children}
+      </text>;
+});
+AlertDialogDescription.displayName = "AlertDialogDescription";
+var AlertDialogFooter = forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const classNames = useClassNames();
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.footer, className)} style={style}>
+        {children}
+      </view>;
+});
+AlertDialogFooter.displayName = "AlertDialogFooter";
+/** @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported. */
+var AlertDialogAction = forwardRef((props, _ref) => {
+	const { children, className, transition, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const resolvedTransition = useAlertDialogTransition(transition);
+	return <DialogClose {...nativeProps} className={clsx(classNames.action, className)} transition={resolvedTransition}>
+      {children}
+    </DialogClose>;
+});
+AlertDialogAction.displayName = "AlertDialogAction";
+//#endregion
+export { AlertDialogAction, AlertDialogBackdrop, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPositioner, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger };

package/lib/components/AlertDialog/AlertDialog.namespace.d.ts

@@ -0,0 +1,2 @@
+export { AlertDialogAction as Action, AlertDialogBackdrop as Backdrop, AlertDialogContent as Content, AlertDialogDescription as Description, AlertDialogFooter as Footer, AlertDialogHeader as Header, AlertDialogPositioner as Positioner, AlertDialogRoot as Root, AlertDialogTitle as Title, AlertDialogTrigger as Trigger, type AlertDialogActionProps as ActionProps, type AlertDialogBackdropProps as BackdropProps, type AlertDialogContentProps as ContentProps, type AlertDialogDescriptionProps as DescriptionProps, type AlertDialogFooterProps as FooterProps, type AlertDialogHeaderProps as HeaderProps, type AlertDialogPositionerProps as PositionerProps, type AlertDialogRootProps as RootProps, type AlertDialogTitleProps as TitleProps, type AlertDialogTriggerProps as TriggerProps, } from './AlertDialog';
+//# sourceMappingURL=AlertDialog.namespace.d.ts.map

package/lib/components/AlertDialog/AlertDialog.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,IAAI,MAAM,EAC3B,mBAAmB,IAAI,QAAQ,EAC/B,kBAAkB,IAAI,OAAO,EAC7B,sBAAsB,IAAI,WAAW,EACrC,iBAAiB,IAAI,MAAM,EAC3B,iBAAiB,IAAI,MAAM,EAC3B,qBAAqB,IAAI,UAAU,EACnC,eAAe,IAAI,IAAI,EACvB,gBAAgB,IAAI,KAAK,EACzB,kBAAkB,IAAI,OAAO,EAC7B,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,wBAAwB,IAAI,aAAa,EAC9C,KAAK,uBAAuB,IAAI,YAAY,EAC5C,KAAK,2BAA2B,IAAI,gBAAgB,EACpD,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,0BAA0B,IAAI,eAAe,EAClD,KAAK,oBAAoB,IAAI,SAAS,EACtC,KAAK,qBAAqB,IAAI,UAAU,EACxC,KAAK,uBAAuB,IAAI,YAAY,GAC7C,MAAM,eAAe,CAAC"}

package/lib/components/AlertDialog/AlertDialog.namespace.js

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { AlertDialogAction, AlertDialogBackdrop, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPositioner, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.jsx";
+//#region src/components/AlertDialog/AlertDialog.namespace.ts
+var AlertDialog_namespace_exports = /* @__PURE__ */ __exportAll({
+	Action: () => AlertDialogAction,
+	Backdrop: () => AlertDialogBackdrop,
+	Content: () => AlertDialogContent,
+	Description: () => AlertDialogDescription,
+	Footer: () => AlertDialogFooter,
+	Header: () => AlertDialogHeader,
+	Positioner: () => AlertDialogPositioner,
+	Root: () => AlertDialogRoot,
+	Title: () => AlertDialogTitle,
+	Trigger: () => AlertDialogTrigger
+});
+//#endregion
+export { AlertDialog_namespace_exports };

package/lib/components/AlertDialog/index.d.ts

@@ -0,0 +1,3 @@
+export { AlertDialogAction, type AlertDialogActionProps, AlertDialogBackdrop, type AlertDialogBackdropProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogPositioner, type AlertDialogPositionerProps, AlertDialogRoot, type AlertDialogRootProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, } from './AlertDialog';
+export * as AlertDialog from './AlertDialog.namespace';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AlertDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAC"}

package/lib/components/AppBar/AppBar.d.ts

@@ -2,6 +2,10 @@ import { AppBarVariantProps } from '@seed-design/lynx-css/recipes/app-bar';
 import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
 import { LynxElementProps, LynxIconElementProps, LynxPressableProps, LynxStyledElementProps, LynxViewProps } from '../../types';
 import * as React from "@lynx-js/react";
+/**
+ * 아이콘 버튼의 bleed 보정 방향. `leading`은 왼쪽, `trailing`은 오른쪽, `both`는 양쪽.
+ */
+export type AppBarEdge = "leading" | "trailing" | "both";
 export interface AppBarRootProps extends AppBarVariantProps, LynxStyledElementProps {
 }
 export declare const AppBarRoot: React.ForwardRefExoticComponent<AppBarRootProps & React.RefAttributes<unknown>>;
@@ -22,14 +26,23 @@ export declare const AppBarTitle: React.ForwardRefExoticComponent<AppBarTitlePro
 export interface AppBarSubtitleProps extends LynxElementProps {
 }
 export declare const AppBarSubtitle: React.ForwardRefExoticComponent<AppBarSubtitleProps & React.RefAttributes<unknown>>;
-export interface AppBarIconButtonProps extends LynxElementProps, LynxPressableProps {
+export interface AppBarIconButtonProps extends Omit<LynxElementProps, "flatten">, LynxPressableProps {
     icon?: React.ReactElement<LynxIconElementProps>;
     "accessibility-label"?: LynxViewProps["accessibility-label"];
     "accessibility-element"?: LynxViewProps["accessibility-element"];
     "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+    /**
+     * 슬롯의 첫·마지막 자식이 아이콘 버튼이면 해당 방향을, 유일한 자식이면 양쪽을 자동 보정한다.
+     * 명시하면 `AppBarLeft` / `AppBarRight`에서 감지한 자동 보정 방향을 덮어쓴다.
+     */
+    edge?: AppBarEdge;
 }
 export declare const AppBarIconButton: React.ForwardRefExoticComponent<AppBarIconButtonProps & React.RefAttributes<unknown>>;
 export interface AppBarSlotProps extends LynxStyledElementProps {
+    /**
+     * @internal 커스텀 슬롯에서는 bleed 보정을 적용하지 않는다. 전달된 값은 native 속성에서 제외한다.
+     */
+    edge?: AppBarEdge;
 }
 export declare const AppBarSlot: React.ForwardRefExoticComponent<AppBarSlotProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=AppBar.d.ts.map

package/lib/components/AppBar/AppBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,aAAa,CAAC;AAqCrB,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA4BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAmCrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAYzB,CAAC;AAKH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,EAAE,kBAAkB;IACjF,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,uFA6B3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;CAAG;AAElE,eAAO,MAAM,UAAU,iFAYrB,CAAC"}
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,aAAa,CAAC;AAoCrB;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AA2DzD,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA4BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFA0BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAYzB,CAAC;AAKH,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EACvC,kBAAkB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,uFA8C3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,iFAcrB,CAAC"}

package/lib/components/AppBar/AppBar.jsx

@@ -1,3 +1,4 @@
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { Icon, IconSlotProvider } from "../Icon/Icon.jsx";
@@ -24,6 +25,31 @@ function useAppBarMainClassNames(consumer) {
 		throw new Error(`<${consumer}/> must be rendered inside <AppBarMain/>.`);
 	}
 }
+var AppBarEdgeContext = React.createContext(void 0);
+/** Fragments and arrays do not create layout boxes; retain their keys and nesting. */
+function countEdgeChildren(children) {
+	if (children == null || children === "" || typeof children === "boolean") return 0;
+	if (Array.isArray(children)) return children.reduce((count, child) => count + countEdgeChildren(child), 0);
+	if (React.isValidElement(children) && children.type === React.Fragment) return countEdgeChildren(children.props.children);
+	return 1;
+}
+function provideEdgeToChildren(children) {
+	const lastIndex = countEdgeChildren(children) - 1;
+	let index = 0;
+	function visit(child) {
+		if (child == null || child === "" || typeof child === "boolean") return child;
+		if (Array.isArray(child)) return child.map(visit);
+		if (React.isValidElement(child) && child.type === React.Fragment) return React.cloneElement(child, { children: visit(child.props.children) });
+		const childIndex = index++;
+		const edge = childIndex === 0 ? childIndex === lastIndex ? "both" : "leading" : childIndex === lastIndex ? "trailing" : void 0;
+		if (!React.isValidElement(child)) return child;
+		const automaticEdge = typeof child.type !== "string" && child.type !== AppBarSlot ? edge : void 0;
+		return <AppBarEdgeContext.Provider key={child.key} value={automaticEdge}>
+        {child}
+      </AppBarEdgeContext.Provider>;
+	}
+	return visit(children);
+}
 var AppBarRoot = React.forwardRef((props, ref) => {
 	const [variantProps, otherProps] = appBar.splitVariantProps(props);
 	const { children, className, style, ...nativeProps } = otherProps;
@@ -32,7 +58,7 @@ var AppBarRoot = React.forwardRef((props, ref) => {
 	return <AppBarProvider value={contextValue}>
       <AppBarClassNamesProvider value={classNames}>
         <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.root, className)} style={{
-		"--seed-safe-area-top": contextValue.safeAreaInsetTop,
+		"--seed-safe-area-top": contextValue.safeArea.safeAreaInsetTop,
 		"--centered-title-padding-x": contextValue.centeredTitlePaddingX,
 		...rootLayoutStyle,
 		...style
@@ -54,7 +80,7 @@ var AppBarLeft = React.forwardRef((props, ref) => {
 		if (width != null) setLeftWidth(width);
 	}, [bindlayoutchange, setLeftWidth]);
 	return <view {...mergeProps({ bindlayoutchange: handleLayoutChange }, ref ? { ref } : {}, nativeProps)} className={clsx(classNames.left, className)}>
-      {children}
+      {provideEdgeToChildren(children)}
     </view>;
 });
 AppBarLeft.displayName = "AppBarLeft";
@@ -68,12 +94,12 @@ var AppBarRight = React.forwardRef((props, ref) => {
 		if (width != null) setRightWidth(width);
 	}, [bindlayoutchange, setRightWidth]);
 	return <view {...mergeProps({ bindlayoutchange: handleLayoutChange }, ref ? { ref } : {}, nativeProps)} className={clsx(classNames.right, className)}>
-      {children}
+      {provideEdgeToChildren(children)}
     </view>;
 });
 AppBarRight.displayName = "AppBarRight";
 var AppBarMain = React.forwardRef((props, ref) => {
-	const { centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps } = useAppBarContext("AppBarMain");
+	const { centeredTitlePaddingX, safeArea, sharedVariantProps } = useAppBarContext("AppBarMain");
 	const [variantProps, otherProps] = appBarMain.splitVariantProps({
 		...sharedVariantProps,
 		...props
@@ -81,14 +107,9 @@ var AppBarMain = React.forwardRef((props, ref) => {
 	const resolvedTheme = variantProps.theme ?? "cupertino";
 	const classNames = appBarMain(variantProps);
 	const { children, className, style, ...nativeProps } = otherProps;
-	const centeredTitleStyle = variantProps.theme === "cupertino" ? {
-		paddingLeft: centeredTitlePaddingX,
-		paddingRight: centeredTitlePaddingX
-	} : void 0;
 	return <AppBarMainClassNamesProvider value={classNames}>
       <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.root, className)} style={{
-		...centeredTitleStyle,
-		...getMainLayoutStyle(resolvedTheme, safeAreaInsetTop),
+		...getMainLayoutStyle(resolvedTheme, safeArea, centeredTitlePaddingX),
 		...style
 	}}>
         {children}
@@ -113,10 +134,13 @@ var AppBarSubtitle = React.forwardRef((props, ref) => {
 });
 AppBarSubtitle.displayName = "AppBarSubtitle";
 var AppBarIconButton = React.forwardRef((props, ref) => {
-	const { children, className, icon, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
+	const { children, className, icon, edge, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
 	const classNames = useAppBarClassNames("AppBarIconButton");
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback();
+	const automaticEdge = React.useContext(AppBarEdgeContext);
+	const resolvedEdge = edge ?? automaticEdge;
 	if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
-	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.iconButton, className)}>
+	return <view {...mergeProps(ref ? { ref } : {}, scaleFeedbackTriggerProps, scaleFeedbackTargetProps, nativeProps)} flatten={false} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.iconButton, (resolvedEdge === "leading" || resolvedEdge === "both") && "seed-app-bar__icon-button-edge-leading", (resolvedEdge === "trailing" || resolvedEdge === "both") && "seed-app-bar__icon-button-edge-trailing", className)}>
       <IconSlotProvider value={{
 		classNames: { icon: classNames.icon },
 		deps: [classNames.icon]
@@ -127,11 +151,13 @@ var AppBarIconButton = React.forwardRef((props, ref) => {
 });
 AppBarIconButton.displayName = "AppBarIconButton";
 var AppBarSlot = React.forwardRef((props, ref) => {
-	const { children, className, ...nativeProps } = props;
+	const { children, className, edge: _edge, ...nativeProps } = props;
 	const classNames = useAppBarClassNames("AppBarSlot");
-	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.custom, className)}>
-      {children}
-    </view>;
+	return <AppBarEdgeContext.Provider value={void 0}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.custom, className)}>
+        {children}
+      </view>
+    </AppBarEdgeContext.Provider>;
 });
 AppBarSlot.displayName = "AppBarSlot";
 //#endregion

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

@@ -1,2 +1,2 @@
-export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSlot as Slot, AppBarSubtitle as Subtitle, AppBarTitle as Title, type AppBarIconButtonProps as IconButtonProps, type AppBarLeftProps as LeftProps, type AppBarMainProps as MainProps, type AppBarRightProps as RightProps, type AppBarRootProps as RootProps, type AppBarSlotProps as SlotProps, type AppBarSubtitleProps as SubtitleProps, type AppBarTitleProps as TitleProps, } from './AppBar';
+export { AppBarIconButton as IconButton, AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, AppBarSlot as Slot, AppBarSubtitle as Subtitle, AppBarTitle as Title, type AppBarEdge as Edge, type AppBarIconButtonProps as IconButtonProps, type AppBarLeftProps as LeftProps, type AppBarMainProps as MainProps, type AppBarRightProps as RightProps, type AppBarRootProps as RootProps, type AppBarSlotProps as SlotProps, type AppBarSubtitleProps as SubtitleProps, type AppBarTitleProps as TitleProps, } from './AppBar';
 //# sourceMappingURL=AppBar.namespace.d.ts.map

package/lib/components/AppBar/AppBar.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,UAAU,EAC9B,UAAU,IAAI,IAAI,EAClB,UAAU,IAAI,IAAI,EAClB,WAAW,IAAI,KAAK,EACpB,UAAU,IAAI,IAAI,EAClB,UAAU,IAAI,IAAI,EAClB,cAAc,IAAI,QAAQ,EAC1B,WAAW,IAAI,KAAK,EACpB,KAAK,qBAAqB,IAAI,eAAe,EAC7C,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,mBAAmB,IAAI,aAAa,EACzC,KAAK,gBAAgB,IAAI,UAAU,GACpC,MAAM,UAAU,CAAC"}
+{"version":3,"file":"AppBar.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,UAAU,EAC9B,UAAU,IAAI,IAAI,EAClB,UAAU,IAAI,IAAI,EAClB,WAAW,IAAI,KAAK,EACpB,UAAU,IAAI,IAAI,EAClB,UAAU,IAAI,IAAI,EAClB,cAAc,IAAI,QAAQ,EAC1B,WAAW,IAAI,KAAK,EACpB,KAAK,UAAU,IAAI,IAAI,EACvB,KAAK,qBAAqB,IAAI,eAAe,EAC7C,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,mBAAmB,IAAI,aAAa,EACzC,KAAK,gBAAgB,IAAI,UAAU,GACpC,MAAM,UAAU,CAAC"}

package/lib/components/AppBar/context.d.ts

@@ -1,9 +1,10 @@
 import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
+import { UseSafeAreaReturn } from '../../hooks/useSafeArea';
 import * as React from "@lynx-js/react";
 export type SharedAppBarVariantProps = Pick<AppBarMainVariantProps, "theme" | "tone" | "transitionStyle">;
 export interface AppBarContextValue {
     centeredTitlePaddingX: string;
-    safeAreaInsetTop: string;
+    safeArea: UseSafeAreaReturn;
     sharedVariantProps: SharedAppBarVariantProps;
     setLeftWidth: (width: number) => void;
     setRightWidth: (width: number) => void;

package/lib/components/AppBar/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACtB,OAAO,GAAG,MAAM,GAAG,iBAAiB,CACrC,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,wBAAwB,CAAC;IAC7C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAID,eAAO,MAAM,cAAc,2CAAyB,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,kBAAkB,CAMrE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACtB,OAAO,GAAG,MAAM,GAAG,iBAAiB,CACrC,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB,EAAE,wBAAwB,CAAC;IAC7C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAID,eAAO,MAAM,cAAc,2CAAyB,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,kBAAkB,CAMrE"}

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

@@ -1,3 +1,3 @@
-export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, type AppBarIconButtonProps, type AppBarLeftProps, type AppBarMainProps, type AppBarRightProps, type AppBarRootProps, type AppBarRootProps as AppBarProps, type AppBarSlotProps, type AppBarSubtitleProps, type AppBarTitleProps, } from './AppBar';
+export { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, type AppBarEdge, type AppBarIconButtonProps, type AppBarLeftProps, type AppBarMainProps, type AppBarRightProps, type AppBarRootProps, type AppBarRootProps as AppBarProps, type AppBarSlotProps, type AppBarSubtitleProps, type AppBarTitleProps, } from './AppBar';
 export * as AppBar from './AppBar.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/AppBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,UAAU,EACf,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC"}

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

@@ -1,11 +1,12 @@
 import { AppBarVariantProps, AppBarVariant } from '@seed-design/lynx-css/recipes/app-bar';
 import { AppBarMainVariantProps } from '@seed-design/lynx-css/recipes/app-bar-main';
+import { UseSafeAreaReturn } from '../../hooks/useSafeArea';
 import { LynxViewProps } from '../../types';
 import { AppBarContextValue } from './context';
 type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
 type AppBarStyleObject = Record<string, string | number>;
 export declare function getLayoutWidth(event: Parameters<LayoutChangeHandler>[0]): number | null;
-export declare function getMainLayoutStyle(theme: AppBarMainVariantProps["theme"], safeAreaInsetTop: string): AppBarStyleObject | undefined;
+export declare function getMainLayoutStyle(theme: AppBarMainVariantProps["theme"], safeArea: UseSafeAreaReturn, centeredTitlePaddingX: string): AppBarStyleObject | undefined;
 export declare function useAppBar(variantProps: AppBarVariantProps): {
     contextValue: AppBarContextValue;
     resolvedVariantProps: Partial< AppBarVariant>;

package/lib/components/AppBar/useAppBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/useAppBar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAIzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAA4B,MAAM,WAAW,CAAC;AAO9E,KAAK,mBAAmB,GAAG,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC1E,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAkBzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAMvF;AAaD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,EACtC,gBAAgB,EAAE,MAAM,GACvB,iBAAiB,GAAG,SAAS,CAO/B;AAED,wBAAgB,SAAS,CAAC,YAAY,EAAE,kBAAkB;;;;EAoCzD"}
+{"version":3,"file":"useAppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/useAppBar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAIzF,OAAO,EAAE,KAAK,iBAAiB,EAAe,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAA4B,MAAM,WAAW,CAAC;AAO9E,KAAK,mBAAmB,GAAG,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC1E,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAgBzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAMvF;AAiBD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,EACtC,QAAQ,EAAE,iBAAiB,EAC3B,qBAAqB,EAAE,MAAM,GAC5B,iBAAiB,GAAG,SAAS,CAS/B;AAED,wBAAgB,SAAS,CAAC,YAAY,EAAE,kBAAkB;;;;EAoCzD"}

package/lib/components/AppBar/useAppBar.js

@@ -1,10 +1,8 @@
 import { useSafeArea } from "../../hooks/useSafeArea.js";
 import * as React from "@lynx-js/react";
+import { topNavigation } from "@seed-design/lynx-css/vars/component";
 //#region src/components/AppBar/useAppBar.ts
-var APP_BAR_HEIGHT_BY_THEME = {
-	cupertino: "44px",
-	android: "56px"
-};
+var ROOT_PADDING_X = 16;
 function getDefaultAppBarTheme() {
 	const systemInfo = globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo);
 	if (systemInfo == null) return "cupertino";
@@ -17,23 +15,27 @@ function getLayoutWidth(event) {
 	return Math.max(0, nextWidth);
 }
 function getCenteredTitlePadding(leftWidth, rightWidth) {
-	return `${Math.max(leftWidth, rightWidth)}px`;
+	return `${ROOT_PADDING_X + Math.max(leftWidth, rightWidth)}px`;
 }
-function getRootLayoutStyle(theme, safeAreaInsetTop) {
+function getRootLayoutStyle(safeArea) {
 	return {
-		height: `calc(${APP_BAR_HEIGHT_BY_THEME[theme]} + ${safeAreaInsetTop})`,
-		paddingTop: safeAreaInsetTop
+		height: `calc(${topNavigation.base.enabled.root.height} + ${safeArea.safeAreaInsetTop})`,
+		paddingTop: safeArea.safeAreaInsetTop,
+		paddingLeft: `calc(${ROOT_PADDING_X}px + ${safeArea.safeAreaInsetLeft})`,
+		paddingRight: `calc(${ROOT_PADDING_X}px + ${safeArea.safeAreaInsetRight})`
 	};
 }
-function getMainLayoutStyle(theme, safeAreaInsetTop) {
+function getMainLayoutStyle(theme, safeArea, centeredTitlePaddingX) {
 	if (theme !== "cupertino") return void 0;
 	return {
-		top: safeAreaInsetTop,
-		bottom: "0px"
+		top: safeArea.safeAreaInsetTop,
+		bottom: "0px",
+		paddingLeft: `calc(${safeArea.safeAreaInsetLeft} + ${centeredTitlePaddingX})`,
+		paddingRight: `calc(${safeArea.safeAreaInsetRight} + ${centeredTitlePaddingX})`
 	};
 }
 function useAppBar(variantProps) {
-	const { safeAreaInsetTop } = useSafeArea();
+	const safeArea = useSafeArea();
 	const [leftWidth, setLeftWidth] = React.useState(0);
 	const [rightWidth, setRightWidth] = React.useState(0);
 	const resolvedTheme = variantProps.theme ?? getDefaultAppBarTheme();
@@ -42,7 +44,7 @@ function useAppBar(variantProps) {
 		theme: resolvedTheme
 	};
 	const centeredTitlePaddingX = getCenteredTitlePadding(leftWidth, rightWidth);
-	const rootLayoutStyle = getRootLayoutStyle(resolvedTheme, safeAreaInsetTop);
+	const rootLayoutStyle = getRootLayoutStyle(safeArea);
 	const sharedVariantProps = React.useMemo(() => ({
 		theme: resolvedVariantProps.theme,
 		tone: resolvedVariantProps.tone,
@@ -55,13 +57,13 @@ function useAppBar(variantProps) {
 	return {
 		contextValue: React.useMemo(() => ({
 			centeredTitlePaddingX,
-			safeAreaInsetTop,
+			safeArea,
 			sharedVariantProps,
 			setLeftWidth,
 			setRightWidth
 		}), [
 			centeredTitlePaddingX,
-			safeAreaInsetTop,
+			safeArea,
 			sharedVariantProps
 		]),
 		resolvedVariantProps,