@seed-design/lynx-react 0.8.0 → 0.9.0

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;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,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,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"}
+{"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

@@ -58,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
@@ -99,7 +99,7 @@ var AppBarRight = React.forwardRef((props, ref) => {
 });
 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
@@ -107,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}

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/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,

package/lib/components/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { LynxPressableProps, LynxStyledElementProps } from '../../types';
-import { StyleProps } from '../../utils/styled';
+import { MarginBleedStyleProps, StyleProps } from '../../utils/styled';
 import * as React from "@lynx-js/react";
 /**
  * @platform Lynx
@@ -11,10 +11,10 @@ import * as React from "@lynx-js/react";
  * 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
  * 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
  */
-export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
+export type BoxProps = StyleProps & MarginBleedStyleProps & LynxStyledElementProps & LynxPressableProps & {
     bindtouchstart?: () => void;
     bindtouchend?: () => void;
     bindtouchcancel?: () => void;
-}
+};
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGpE;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACtF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,GAAG,0EAad,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,qBAAqB,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhG;;;;;;;;;GASG;AACH,MAAM,MAAM,QAAQ,GAAG,UAAU,GAC/B,qBAAqB,GACrB,sBAAsB,GACtB,kBAAkB,GAAG;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,GAAG,0EAad,CAAC"}

package/lib/components/Stack/Stack.d.ts

@@ -1,5 +1,5 @@
 import { LynxPressableProps, LynxStyledElementProps } from '../../types';
-import { StyleProps } from '../../utils/styled';
+import { MarginBleedStyleProps, StyleProps } from '../../utils/styled';
 import * as React from "@lynx-js/react";
 type StackStyleProps = "display" | "flexDirection" | "alignItems" | "justifyContent" | "flexWrap" | "flexGrow" | "flexShrink";
 interface StackBaseProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
@@ -16,18 +16,16 @@ interface StackBaseProps extends StyleProps, LynxStyledElementProps, LynxPressab
  * 패키지 컴포넌트 내부에서는 `Box`를 합성하지 않고 native tag와 recipe className을
  * 사용해 primitive 컴포넌트 비용이 누적되지 않도록 합니다.
  */
-export interface StackProps extends Omit<StackBaseProps, StackStyleProps> {
+export type StackProps = Omit<StackBaseProps, StackStyleProps> & MarginBleedStyleProps & {
     align?: StackBaseProps["alignItems"];
     justify?: StackBaseProps["justifyContent"];
     wrap?: StackBaseProps["flexWrap"];
     grow?: StackBaseProps["flexGrow"];
     shrink?: StackBaseProps["flexShrink"];
-}
-export interface VStackProps extends StackProps {
-}
-export interface HStackProps extends StackProps {
-}
-export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<unknown>>;
-export declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<unknown>>;
+};
+export type VStackProps = StackProps;
+export type HStackProps = StackProps;
+export declare const VStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<unknown>>;
+export declare const HStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<unknown>>;
 export {};
 //# sourceMappingURL=Stack.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGpE,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC;IACvE,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAElD,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAuDlD,eAAO,MAAM,MAAM,6EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,6EAIjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,qBAAqB,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhG,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,GAC5D,qBAAqB,GAAG;IACtB,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAuDrC,eAAO,MAAM,MAAM,4EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,4EAIjB,CAAC"}

package/lib/hooks/useSafeArea.d.ts

@@ -1,19 +1,23 @@
 declare module "@lynx-js/types" {
     interface GlobalProps {
         safeAreaInsetTop?: number;
+        safeAreaInsetRight?: number;
         safeAreaInsetBottom?: number;
+        safeAreaInsetLeft?: number;
     }
 }
 export interface UseSafeAreaReturn {
     safeAreaInsetTop: string;
+    safeAreaInsetRight: string;
     safeAreaInsetBottom: string;
+    safeAreaInsetLeft: string;
 }
 /**
- * Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+ * Lynx 앱에서 top/right/bottom/left safe area inset 값을 반환합니다.
  *
- * `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
- * host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
- * 반환합니다.
+ * `lynx.__globalProps.safeAreaInset*` 값을 우선 사용하고, host가 값을 제공하지 않으면
+ * Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로 반환합니다. top/bottom은 host가
+ * `0`을 제공해도 fallback합니다.
  */
 export declare function useSafeArea(): UseSafeAreaReturn;
 //# sourceMappingURL=useSafeArea.d.ts.map

package/lib/hooks/useSafeArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useSafeArea.ts"],"names":[],"mappings":"AAIA,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAU,WAAW;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AAuBD,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAW/C"}
+{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useSafeArea.ts"],"names":[],"mappings":"AAIA,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAU,WAAW;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;CACF;AAgBD,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAgB/C"}

package/lib/hooks/useSafeArea.js

@@ -1,33 +1,35 @@
 import { useMemo } from "@lynx-js/react";
 //#region src/hooks/useSafeArea.ts
-var safeAreaProp = {
-	top: "safeAreaInsetTop",
-	bottom: "safeAreaInsetBottom"
-};
-function getSafeAreaEnvInset(edge) {
-	return `env(safe-area-inset-${edge})`;
-}
-function normalizeSafeAreaValue(value) {
-	if (typeof value !== "number" || value <= 0 || !Number.isFinite(value)) return;
+function normalizeSafeAreaValue(edge, value) {
+	if (typeof value !== "number" || !Number.isFinite(value) || value < 0) return void 0;
+	if (value === 0 && (edge === "top" || edge === "bottom")) return void 0;
 	return `${value}px`;
 }
-function resolveSafeAreaInset(edge, value) {
-	return normalizeSafeAreaValue(value) ?? getSafeAreaEnvInset(edge);
-}
+var resolveSafeAreaInset = (edge, value) => normalizeSafeAreaValue(edge, value) ?? `env(safe-area-inset-${edge})`;
 /**
-* Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+* Lynx 앱에서 top/right/bottom/left safe area inset 값을 반환합니다.
 *
-* `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
-* host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
-* 반환합니다.
+* `lynx.__globalProps.safeAreaInset*` 값을 우선 사용하고, host가 값을 제공하지 않으면
+* Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로 반환합니다. top/bottom은 host가
+* `0`을 제공해도 fallback합니다.
 */
 function useSafeArea() {
-	const safeAreaInsetTop = lynx.__globalProps?.[safeAreaProp.top];
-	const safeAreaInsetBottom = lynx.__globalProps?.[safeAreaProp.bottom];
+	const globalProps = lynx.__globalProps;
+	const safeAreaInsetTop = globalProps?.safeAreaInsetTop;
+	const safeAreaInsetRight = globalProps?.safeAreaInsetRight;
+	const safeAreaInsetBottom = globalProps?.safeAreaInsetBottom;
+	const safeAreaInsetLeft = globalProps?.safeAreaInsetLeft;
 	return useMemo(() => ({
 		safeAreaInsetTop: resolveSafeAreaInset("top", safeAreaInsetTop),
-		safeAreaInsetBottom: resolveSafeAreaInset("bottom", safeAreaInsetBottom)
-	}), [safeAreaInsetTop, safeAreaInsetBottom]);
+		safeAreaInsetRight: resolveSafeAreaInset("right", safeAreaInsetRight),
+		safeAreaInsetBottom: resolveSafeAreaInset("bottom", safeAreaInsetBottom),
+		safeAreaInsetLeft: resolveSafeAreaInset("left", safeAreaInsetLeft)
+	}), [
+		safeAreaInsetTop,
+		safeAreaInsetRight,
+		safeAreaInsetBottom,
+		safeAreaInsetLeft
+	]);
 }
 //#endregion
 export { useSafeArea };

package/lib/utils/styled.d.ts

@@ -41,12 +41,12 @@ export interface StyleProps {
     py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
     paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
-    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-    pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
-    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-    pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     display?: "flex" | "none" | (string & {});
     position?: "relative" | "absolute" | "fixed" | (string & {});
     overflowX?: "visible" | "hidden" | (string & {});
@@ -63,9 +63,49 @@ export interface StyleProps {
     alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
     gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 }
-interface UseStyleProps extends StyleProps {
-    style?: CSSProperties;
+type MarginValue = Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "auto" | (string & {});
+/**
+ * Dimension tokens are left out: every token resolves to `var()`, and Lynx drops an inline
+ * `calc()` that contains `var()`, so a negated token would silently apply no margin.
+ */
+type BleedValue = 0 | `${number}px` | "safeArea";
+interface MarginStyleProps {
+    margin?: MarginValue;
+    m?: MarginValue;
+    marginX?: MarginValue;
+    mx?: MarginValue;
+    marginY?: MarginValue;
+    my?: MarginValue;
+    marginTop?: MarginValue;
+    mt?: MarginValue;
+    marginRight?: MarginValue;
+    mr?: MarginValue;
+    marginBottom?: MarginValue;
+    mb?: MarginValue;
+    marginLeft?: MarginValue;
+    ml?: MarginValue;
+}
+interface BleedStyleProps {
+    bleed?: BleedValue;
+    bleedX?: BleedValue;
+    bleedY?: BleedValue;
+    bleedTop?: BleedValue;
+    bleedRight?: BleedValue;
+    bleedBottom?: BleedValue;
+    bleedLeft?: BleedValue;
 }
+/**
+ * Margin and bleed props both resolve to `margin-*` values, so they are mutually exclusive at
+ * the type level.
+ */
+export type MarginBleedStyleProps = (BleedStyleProps & {
+    [K in keyof MarginStyleProps]?: never;
+}) | (MarginStyleProps & {
+    [K in keyof BleedStyleProps]?: never;
+});
+type UseStyleProps = StyleProps & MarginStyleProps & BleedStyleProps & {
+    style?: CSSProperties;
+};
 export declare function useStyleProps<T extends UseStyleProps>(props: T): {
     style: CSSProperties;
     restProps: Omit<T, keyof UseStyleProps>;

package/lib/utils/styled.d.ts.map

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

package/lib/utils/styled.js

@@ -27,6 +27,10 @@ function handlePaddingWithSafeArea(padding, safeAreaInset) {
 	if (padding === "safeArea") return safeAreaInset;
 	return handleDimension(padding);
 }
+function handleBleed(bleed, safeAreaInset) {
+	if (bleed == null) return void 0;
+	return `calc(${bleed === "safeArea" ? safeAreaInset : bleed === 0 ? "0px" : bleed} * -1)`;
+}
 function handleRadius(radius) {
 	if (radius == null) return;
 	return vars.$radius[radius] ?? radius;
@@ -79,16 +83,23 @@ function handleLineHeight(lineHeight) {
 	return vars.$lineHeight[lineHeight] ?? lineHeight;
 }
 function useStyleProps(props) {
-	const { background, bg, color, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, p, px, py, pt, pr, pb, pl, bottom, left, right, top, display, position, overflowX, overflowY, zIndex, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifySelf, alignItems, alignContent, alignSelf, gap, style, ...restProps } = props;
-	const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();
+	const { background, bg, color, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, p, px, py, pt, pr, pb, pl, margin, m, marginX, mx, marginY, my, marginTop, mt, marginRight, mr, marginBottom, mb, marginLeft, ml, bleed, bleedX, bleedY, bleedTop, bleedRight, bleedBottom, bleedLeft, bottom, left, right, top, display, position, overflowX, overflowY, zIndex, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifySelf, alignItems, alignContent, alignSelf, gap, style, ...restProps } = props;
+	const { safeAreaInsetTop, safeAreaInsetRight, safeAreaInsetBottom, safeAreaInsetLeft } = useSafeArea();
 	const backgroundValue = handleColor(background ?? bg);
 	const paddingValue = handleDimension(padding ?? p);
 	const paddingXValue = handleDimension(paddingX ?? px) ?? paddingValue;
 	const paddingYValue = handleDimension(paddingY ?? py) ?? paddingValue;
 	const paddingTopValue = handlePaddingWithSafeArea(paddingTop ?? pt, safeAreaInsetTop) ?? paddingYValue;
-	const paddingRightValue = handleDimension(paddingRight ?? pr) ?? paddingXValue;
+	const paddingRightValue = handlePaddingWithSafeArea(paddingRight ?? pr, safeAreaInsetRight) ?? paddingXValue;
 	const paddingBottomValue = handlePaddingWithSafeArea(paddingBottom ?? pb, safeAreaInsetBottom) ?? paddingYValue;
-	const paddingLeftValue = handleDimension(paddingLeft ?? pl) ?? paddingXValue;
+	const paddingLeftValue = handlePaddingWithSafeArea(paddingLeft ?? pl, safeAreaInsetLeft) ?? paddingXValue;
+	const marginValue = handleDimension(margin ?? m);
+	const marginXValue = handleDimension(marginX ?? mx) ?? marginValue;
+	const marginYValue = handleDimension(marginY ?? my) ?? marginValue;
+	const marginTopValue = handleDimension(marginTop ?? mt) ?? marginYValue ?? handleBleed(bleedTop ?? bleedY ?? bleed, safeAreaInsetTop);
+	const marginRightValue = handleDimension(marginRight ?? mr) ?? marginXValue ?? handleBleed(bleedRight ?? bleedX ?? bleed, safeAreaInsetRight);
+	const marginBottomValue = handleDimension(marginBottom ?? mb) ?? marginYValue ?? handleBleed(bleedBottom ?? bleedY ?? bleed, safeAreaInsetBottom);
+	const marginLeftValue = handleDimension(marginLeft ?? ml) ?? marginXValue ?? handleBleed(bleedLeft ?? bleedX ?? bleed, safeAreaInsetLeft);
 	const hasBorderStyle = borderColor != null || borderWidth != null || borderTopWidth != null || borderRightWidth != null || borderBottomWidth != null || borderLeftWidth != null;
 	return {
 		style: {
@@ -116,6 +127,10 @@ function useStyleProps(props) {
 			paddingRight: paddingRightValue,
 			paddingBottom: paddingBottomValue,
 			paddingLeft: paddingLeftValue,
+			marginTop: marginTopValue,
+			marginRight: marginRightValue,
+			marginBottom: marginBottomValue,
+			marginLeft: marginLeftValue,
 			top: handleDimension(top),
 			left: handleDimension(left),
 			right: handleDimension(right),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -34,12 +34,12 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.9.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.12.0 <1.0.0"
+    "@seed-design/lynx-css": "^0.13.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.9.0",
-    "@seed-design/lynx-css": "0.12.0",
+    "@seed-design/lynx-css": "0.13.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/AppBar/AppBar.test.tsx

@@ -22,7 +22,9 @@ interface TestLynxGlobal {
   lynx?: {
     __globalProps?: {
       safeAreaInsetTop?: number;
+      safeAreaInsetRight?: number;
       safeAreaInsetBottom?: number;
+      safeAreaInsetLeft?: number;
     };
   };
   lynxTestingEnv?: {
@@ -153,11 +155,22 @@ describe("AppBar", () => {
     render(<AppBar.Root theme="cupertino" />);
 
     expectStyle(getAppBarRoot().style, {
-      height: "calc(91px)",
+      height: "calc(103px)",
       "padding-top": "47px",
     });
   });
 
+  it("adds left and right safe area insets to the root padding", () => {
+    setGlobalProps({ safeAreaInsetRight: 0, safeAreaInsetLeft: 59 });
+
+    render(<AppBar.Root theme="cupertino" />);
+
+    expectStyle(getAppBarRoot().style, {
+      "padding-left": "calc(75px)",
+      "padding-right": "calc(16px)",
+    });
+  });
+
   it("does not read the safe area CSS variable override as the JS layout source", () => {
     setGlobalProps({ safeAreaInsetTop: 47 });
 
@@ -169,7 +182,7 @@ describe("AppBar", () => {
     );
 
     expectStyle(getAppBarRoot().style, {
-      height: "calc(91px)",
+      height: "calc(103px)",
       "padding-top": "47px",
     });
   });
@@ -240,6 +253,8 @@ describe("AppBar", () => {
   });
 
   it("updates centered title padding from left and right layout widths", async () => {
+    setGlobalProps({ safeAreaInsetRight: 0, safeAreaInsetLeft: 59 });
+
     render(
       <AppBar.Root>
         <AppBar.Left>
@@ -269,7 +284,10 @@ describe("AppBar", () => {
     });
 
     await waitFor(() => {
-      expect(main).toHaveStyle({ paddingLeft: "72px", paddingRight: "72px" });
+      expect(main).toHaveStyle({
+        paddingLeft: "calc(59px + 88px)",
+        paddingRight: "calc(0px + 88px)",
+      });
     });
   });
 

package/src/components/AppBar/AppBar.tsx

@@ -128,7 +128,7 @@ export const AppBarRoot = React.forwardRef<unknown, AppBarRootProps>((props, ref
           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,
@@ -221,8 +221,7 @@ AppBarRight.displayName = "AppBarRight";
 export interface AppBarMainProps extends AppBarMainVariantProps, LynxStyledElementProps {}
 
 export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref) => {
-  const { centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps } =
-    useAppBarContext("AppBarMain");
+  const { centeredTitlePaddingX, safeArea, sharedVariantProps } = useAppBarContext("AppBarMain");
   const [variantProps, otherProps] = appBarMain.splitVariantProps({
     ...sharedVariantProps,
     ...props,
@@ -230,13 +229,6 @@ export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((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,
-        }
-      : undefined;
 
   return (
     <AppBarMainClassNamesProvider value={classNames}>
@@ -245,8 +237,7 @@ export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref
         className={clsx(classNames.root, className)}
         style={
           {
-            ...centeredTitleStyle,
-            ...getMainLayoutStyle(resolvedTheme, safeAreaInsetTop),
+            ...getMainLayoutStyle(resolvedTheme, safeArea, centeredTitlePaddingX),
             ...style,
           } as LynxViewProps["style"]
         }

package/src/components/AppBar/context.ts

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

package/src/components/AppBar/useAppBar.ts

@@ -1,8 +1,9 @@
 import type { AppBarVariantProps } from "@seed-design/lynx-css/recipes/app-bar";
 import type { AppBarMainVariantProps } from "@seed-design/lynx-css/recipes/app-bar-main";
+import { topNavigation as topNavigationVars } from "@seed-design/lynx-css/vars/component";
 import * as React from "@lynx-js/react";
 
-import { useSafeArea } from "../../hooks/useSafeArea";
+import { type UseSafeAreaReturn, useSafeArea } from "../../hooks/useSafeArea";
 import type { LynxViewProps } from "../../types";
 import type { AppBarContextValue, SharedAppBarVariantProps } from "./context";
 
@@ -14,10 +15,8 @@ type AppBarTheme = NonNullable<AppBarVariantProps["theme"]>;
 type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
 type AppBarStyleObject = Record<string, string | number>;
 
-const APP_BAR_HEIGHT_BY_THEME: Record<AppBarTheme, string> = {
-  cupertino: "44px",
-  android: "56px",
-};
+// Mirrors the recipe's `dimension.x4` as a literal: Lynx drops an inline `calc()` that contains `var()`.
+const ROOT_PADDING_X = 16;
 
 function getDefaultAppBarTheme(): AppBarTheme {
   const globalSystemInfo = (globalThis as typeof globalThis & { SystemInfo?: LynxSystemInfo })
@@ -38,31 +37,38 @@ export function getLayoutWidth(event: Parameters<LayoutChangeHandler>[0]): numbe
   return Math.max(0, nextWidth);
 }
 
+// The left/right areas sit inside the root padding, so the title clears that padding plus the wider area.
 function getCenteredTitlePadding(leftWidth: number, rightWidth: number): string {
-  return `${Math.max(leftWidth, rightWidth)}px`;
+  return `${ROOT_PADDING_X + Math.max(leftWidth, rightWidth)}px`;
 }
 
-function getRootLayoutStyle(theme: AppBarTheme, safeAreaInsetTop: string): AppBarStyleObject {
+function getRootLayoutStyle(safeArea: UseSafeAreaReturn): AppBarStyleObject {
   return {
-    height: `calc(${APP_BAR_HEIGHT_BY_THEME[theme]} + ${safeAreaInsetTop})`,
-    paddingTop: safeAreaInsetTop,
+    height: `calc(${topNavigationVars.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})`,
   };
 }
 
+// The title clears the same distance past each side's inset, so it stays centered in the safe area.
 export function getMainLayoutStyle(
   theme: AppBarMainVariantProps["theme"],
-  safeAreaInsetTop: string,
+  safeArea: UseSafeAreaReturn,
+  centeredTitlePaddingX: string,
 ): AppBarStyleObject | undefined {
   if (theme !== "cupertino") return undefined;
 
   return {
-    top: safeAreaInsetTop,
+    top: safeArea.safeAreaInsetTop,
     bottom: "0px",
+    paddingLeft: `calc(${safeArea.safeAreaInsetLeft} + ${centeredTitlePaddingX})`,
+    paddingRight: `calc(${safeArea.safeAreaInsetRight} + ${centeredTitlePaddingX})`,
   };
 }
 
 export function useAppBar(variantProps: AppBarVariantProps) {
-  const { safeAreaInsetTop } = useSafeArea();
+  const safeArea = useSafeArea();
   const [leftWidth, setLeftWidth] = React.useState(0);
   const [rightWidth, setRightWidth] = React.useState(0);
   const resolvedTheme = variantProps.theme ?? getDefaultAppBarTheme();
@@ -72,7 +78,7 @@ export function useAppBar(variantProps: AppBarVariantProps) {
     theme: resolvedTheme,
   };
   const centeredTitlePaddingX = getCenteredTitlePadding(leftWidth, rightWidth);
-  const rootLayoutStyle = getRootLayoutStyle(resolvedTheme, safeAreaInsetTop);
+  const rootLayoutStyle = getRootLayoutStyle(safeArea);
   const sharedVariantProps = React.useMemo<SharedAppBarVariantProps>(
     () => ({
       theme: resolvedVariantProps.theme,
@@ -84,12 +90,12 @@ export function useAppBar(variantProps: AppBarVariantProps) {
   const contextValue = React.useMemo<AppBarContextValue>(
     () => ({
       centeredTitlePaddingX,
-      safeAreaInsetTop,
+      safeArea,
       sharedVariantProps,
       setLeftWidth,
       setRightWidth,
     }),
-    [centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps],
+    [centeredTitlePaddingX, safeArea, sharedVariantProps],
   );
 
   return {

package/src/components/Box/Box.test.tsx

@@ -9,7 +9,9 @@ interface TestLynxGlobal {
   lynx?: {
     __globalProps?: {
       safeAreaInsetTop?: number;
+      safeAreaInsetRight?: number;
       safeAreaInsetBottom?: number;
+      safeAreaInsetLeft?: number;
     };
   };
   lynxTestingEnv?: {
@@ -82,4 +84,106 @@ describe("Box", () => {
       "padding-bottom": "34px",
     });
   });
+
+  it("resolves left and right safe area padding from global props", () => {
+    setGlobalProps({
+      safeAreaInsetRight: 62,
+      safeAreaInsetLeft: 59,
+    });
+
+    render(
+      <Box className="box-test" pl="safeArea" pr="safeArea">
+        <Text>Box content</Text>
+      </Box>,
+    );
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expect(box).toBeInTheDocument();
+    expectStyle((box as HTMLElement).style, {
+      "padding-left": "59px",
+      "padding-right": "62px",
+    });
+  });
+
+  it("resolves margin with side over axis over all", () => {
+    render(<Box className="box-test" m="x1" mx="x2" ml="x3" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, {
+      "margin-top": "var(--seed-dimension-x1)",
+      "margin-right": "var(--seed-dimension-x2)",
+      "margin-bottom": "var(--seed-dimension-x1)",
+      "margin-left": "var(--seed-dimension-x3)",
+    });
+  });
+
+  it("keeps auto margin", () => {
+    render(<Box className="box-test" ml="auto" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, { "margin-left": "auto" });
+  });
+
+  it("negates bleed values with side over axis over all", () => {
+    render(<Box className="box-test" bleed="4px" bleedX="8px" bleedLeft="12px" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    // happy-dom folds the constant `calc(4px * -1)` that Box emits.
+    expectStyle((box as HTMLElement).style, {
+      "margin-top": "calc(-4px)",
+      "margin-right": "calc(-8px)",
+      "margin-bottom": "calc(-4px)",
+      "margin-left": "calc(-12px)",
+    });
+  });
+
+  it("negates safe area bleed from global props", () => {
+    setGlobalProps({
+      safeAreaInsetRight: 62,
+      safeAreaInsetLeft: 59,
+    });
+
+    render(<Box className="box-test" bleedX="safeArea" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, {
+      "margin-left": "calc(-59px)",
+      "margin-right": "calc(-62px)",
+    });
+  });
+
+  it("negates the env() fallback when the host omits safe area bleed insets", () => {
+    render(<Box className="box-test" bleedX="safeArea" />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    // happy-dom normalizes the `calc(env(...) * -1)` that Box emits.
+    expectStyle((box as HTMLElement).style, {
+      "margin-left": "calc(env(safe-area-inset-left) *-1)",
+      "margin-right": "calc(env(safe-area-inset-right) *-1)",
+    });
+  });
+
+  it("rejects dimension tokens as bleed values", () => {
+    // @ts-expect-error Lynx drops an inline calc() that contains a token's var().
+    render(<Box bleedX="x4" />);
+  });
+
+  it("lets style override margin props", () => {
+    render(<Box className="box-test" mt="x4" style={{ marginTop: "3px" }} />);
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expectStyle((box as HTMLElement).style, { "margin-top": "3px" });
+  });
+
+  it("rejects margin and bleed props together", () => {
+    // @ts-expect-error margin and bleed props both resolve to margin-*.
+    render(<Box m="x1" bleedX="8px" />);
+  });
 });

package/src/components/Box/Box.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import * as React from "@lynx-js/react";
 
 import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
-import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { useStyleProps, type MarginBleedStyleProps, type StyleProps } from "../../utils/styled";
 import { mergeProps } from "../../utils/merge-props";
 
 /**
@@ -15,11 +15,14 @@ import { mergeProps } from "../../utils/merge-props";
  * 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
  * 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
  */
-export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
-  bindtouchstart?: () => void;
-  bindtouchend?: () => void;
-  bindtouchcancel?: () => void;
-}
+export type BoxProps = StyleProps &
+  MarginBleedStyleProps &
+  LynxStyledElementProps &
+  LynxPressableProps & {
+    bindtouchstart?: () => void;
+    bindtouchend?: () => void;
+    bindtouchcancel?: () => void;
+  };
 
 export const Box = React.forwardRef<unknown, BoxProps>((props, ref) => {
   const { style, restProps } = useStyleProps(props);

package/src/components/Stack/Stack.test.tsx

@@ -64,4 +64,11 @@ describe("Stack", () => {
 
     expect(getRenderedRoot()).toHaveStyle({ rowGap: "24px" });
   });
+
+  it("applies bleed as a negative margin", () => {
+    render(<HStack bleedX="16px" />);
+
+    expect(getRenderedRoot().style.getPropertyValue("margin-left")).toBe("calc(-16px)");
+    expect(getRenderedRoot().style.getPropertyValue("margin-right")).toBe("calc(-16px)");
+  });
 });

package/src/components/Stack/Stack.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import * as React from "@lynx-js/react";
 
 import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
-import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { useStyleProps, type MarginBleedStyleProps, type StyleProps } from "../../utils/styled";
 import { mergeProps } from "../../utils/merge-props";
 
 type StackStyleProps =
@@ -29,17 +29,18 @@ interface StackBaseProps extends StyleProps, LynxStyledElementProps, LynxPressab
  * 패키지 컴포넌트 내부에서는 `Box`를 합성하지 않고 native tag와 recipe className을
  * 사용해 primitive 컴포넌트 비용이 누적되지 않도록 합니다.
  */
-export interface StackProps extends Omit<StackBaseProps, StackStyleProps> {
-  align?: StackBaseProps["alignItems"];
-  justify?: StackBaseProps["justifyContent"];
-  wrap?: StackBaseProps["flexWrap"];
-  grow?: StackBaseProps["flexGrow"];
-  shrink?: StackBaseProps["flexShrink"];
-}
+export type StackProps = Omit<StackBaseProps, StackStyleProps> &
+  MarginBleedStyleProps & {
+    align?: StackBaseProps["alignItems"];
+    justify?: StackBaseProps["justifyContent"];
+    wrap?: StackBaseProps["flexWrap"];
+    grow?: StackBaseProps["flexGrow"];
+    shrink?: StackBaseProps["flexShrink"];
+  };
 
-export interface VStackProps extends StackProps {}
+export type VStackProps = StackProps;
 
-export interface HStackProps extends StackProps {}
+export type HStackProps = StackProps;
 
 function getStackProps(props: StackProps) {
   const { align, justify, wrap, grow, shrink, ...restProps } = props;

package/src/hooks/useSafeArea.test.ts

@@ -7,7 +7,9 @@ interface TestLynxGlobal {
   lynx?: {
     __globalProps?: {
       safeAreaInsetTop?: number;
+      safeAreaInsetRight?: number;
       safeAreaInsetBottom?: number;
+      safeAreaInsetLeft?: number;
     };
   };
   lynxTestingEnv?: {
@@ -49,35 +51,45 @@ describe("useSafeArea", () => {
 
     expect(result.current).toEqual({
       safeAreaInsetTop: "env(safe-area-inset-top)",
+      safeAreaInsetRight: "env(safe-area-inset-right)",
       safeAreaInsetBottom: "env(safe-area-inset-bottom)",
+      safeAreaInsetLeft: "env(safe-area-inset-left)",
     });
   });
 
   it("uses flat globalProps values before env fallback", () => {
     setGlobalProps({
       safeAreaInsetTop: 48,
+      safeAreaInsetRight: 62,
       safeAreaInsetBottom: 35,
+      safeAreaInsetLeft: 59,
     });
 
     const { result } = renderHook(() => useSafeArea());
 
     expect(result.current).toEqual({
       safeAreaInsetTop: "48px",
+      safeAreaInsetRight: "62px",
       safeAreaInsetBottom: "35px",
+      safeAreaInsetLeft: "59px",
     });
   });
 
-  it("falls back to Lynx env values when host flat global props are zero", () => {
+  it("falls back to Lynx env values only for top and bottom when host flat global props are zero", () => {
     setGlobalProps({
       safeAreaInsetTop: 0,
+      safeAreaInsetRight: 0,
       safeAreaInsetBottom: 0,
+      safeAreaInsetLeft: 0,
     });
 
     const { result } = renderHook(() => useSafeArea());
 
     expect(result.current).toEqual({
       safeAreaInsetTop: "env(safe-area-inset-top)",
+      safeAreaInsetRight: "0px",
       safeAreaInsetBottom: "env(safe-area-inset-bottom)",
+      safeAreaInsetLeft: "0px",
     });
   });
 });

package/src/hooks/useSafeArea.ts

@@ -1,56 +1,58 @@
 import { useMemo } from "@lynx-js/react";
 
-type SafeAreaEdge = "top" | "bottom";
+type SafeAreaEdge = "top" | "right" | "bottom" | "left";
 
 declare module "@lynx-js/types" {
   interface GlobalProps {
     safeAreaInsetTop?: number;
+    safeAreaInsetRight?: number;
     safeAreaInsetBottom?: number;
+    safeAreaInsetLeft?: number;
   }
 }
 
-const safeAreaProp: Record<SafeAreaEdge, "safeAreaInsetTop" | "safeAreaInsetBottom"> = {
-  top: "safeAreaInsetTop",
-  bottom: "safeAreaInsetBottom",
-};
+function normalizeSafeAreaValue(edge: SafeAreaEdge, value: number | undefined) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) return undefined;
 
-function getSafeAreaEnvInset(edge: SafeAreaEdge): string {
-  return `env(safe-area-inset-${edge})`;
-}
-
-function normalizeSafeAreaValue(value: number | undefined): string | undefined {
-  if (typeof value !== "number" || value <= 0 || !Number.isFinite(value)) {
-    return undefined;
-  }
+  // TODO: confirm why a host-provided 0 falls back to `env()` on top and bottom. The reason isn't
+  // recorded anywhere, and a host that subtracts insets its parent already consumed (Android
+  // Compose) passes 0 on purpose, which `env()` may then override with the window's inset.
+  if (value === 0 && (edge === "top" || edge === "bottom")) return undefined;
 
   return `${value}px`;
 }
 
-function resolveSafeAreaInset(edge: SafeAreaEdge, value: number | undefined): string {
-  return normalizeSafeAreaValue(value) ?? getSafeAreaEnvInset(edge);
-}
+const resolveSafeAreaInset = (edge: SafeAreaEdge, value: number | undefined) =>
+  normalizeSafeAreaValue(edge, value) ?? `env(safe-area-inset-${edge})`;
 
 export interface UseSafeAreaReturn {
   safeAreaInsetTop: string;
+  safeAreaInsetRight: string;
   safeAreaInsetBottom: string;
+  safeAreaInsetLeft: string;
 }
 
 /**
- * Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+ * Lynx 앱에서 top/right/bottom/left safe area inset 값을 반환합니다.
  *
- * `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
- * host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
- * 반환합니다.
+ * `lynx.__globalProps.safeAreaInset*` 값을 우선 사용하고, host가 값을 제공하지 않으면
+ * Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로 반환합니다. top/bottom은 host가
+ * `0`을 제공해도 fallback합니다.
  */
 export function useSafeArea(): UseSafeAreaReturn {
-  const safeAreaInsetTop = lynx.__globalProps?.[safeAreaProp.top];
-  const safeAreaInsetBottom = lynx.__globalProps?.[safeAreaProp.bottom];
+  const globalProps = lynx.__globalProps;
+  const safeAreaInsetTop = globalProps?.safeAreaInsetTop;
+  const safeAreaInsetRight = globalProps?.safeAreaInsetRight;
+  const safeAreaInsetBottom = globalProps?.safeAreaInsetBottom;
+  const safeAreaInsetLeft = globalProps?.safeAreaInsetLeft;
 
   return useMemo(
     () => ({
       safeAreaInsetTop: resolveSafeAreaInset("top", safeAreaInsetTop),
+      safeAreaInsetRight: resolveSafeAreaInset("right", safeAreaInsetRight),
       safeAreaInsetBottom: resolveSafeAreaInset("bottom", safeAreaInsetBottom),
+      safeAreaInsetLeft: resolveSafeAreaInset("left", safeAreaInsetLeft),
     }),
-    [safeAreaInsetTop, safeAreaInsetBottom],
+    [safeAreaInsetTop, safeAreaInsetRight, safeAreaInsetBottom, safeAreaInsetLeft],
   );
 }

package/src/utils/styled.ts

@@ -76,6 +76,12 @@ export function handlePaddingWithSafeArea(
   return handleDimension(padding);
 }
 
+function handleBleed(bleed: BleedValue | undefined, safeAreaInset: string) {
+  if (bleed == null) return undefined;
+
+  return `calc(${bleed === "safeArea" ? safeAreaInset : bleed === 0 ? "0px" : bleed} * -1)`;
+}
+
 export function handleRadius(radius: string | 0 | undefined) {
   if (radius == null) {
     return undefined;
@@ -206,8 +212,14 @@ export interface StyleProps {
     | "safeArea"
     | (string & {});
   pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
-  paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-  pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingRight?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
   paddingBottom?:
     | Dimension
     | `spacingX.${SpacingX}`
@@ -216,8 +228,14 @@ export interface StyleProps {
     | "safeArea"
     | (string & {});
   pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
-  paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingLeft?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
   display?: "flex" | "none" | (string & {});
   position?: "relative" | "absolute" | "fixed" | (string & {});
   overflowX?: "visible" | "hidden" | (string & {});
@@ -241,10 +259,61 @@ export interface StyleProps {
   gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 }
 
-interface UseStyleProps extends StyleProps {
-  style?: CSSProperties;
+type MarginValue =
+  | Dimension
+  | `spacingX.${SpacingX}`
+  | `spacingY.${SpacingY}`
+  | 0
+  | "auto"
+  | (string & {});
+
+/**
+ * Dimension tokens are left out: every token resolves to `var()`, and Lynx drops an inline
+ * `calc()` that contains `var()`, so a negated token would silently apply no margin.
+ */
+type BleedValue = 0 | `${number}px` | "safeArea";
+
+interface MarginStyleProps {
+  margin?: MarginValue;
+  m?: MarginValue;
+  marginX?: MarginValue;
+  mx?: MarginValue;
+  marginY?: MarginValue;
+  my?: MarginValue;
+  marginTop?: MarginValue;
+  mt?: MarginValue;
+  marginRight?: MarginValue;
+  mr?: MarginValue;
+  marginBottom?: MarginValue;
+  mb?: MarginValue;
+  marginLeft?: MarginValue;
+  ml?: MarginValue;
 }
 
+interface BleedStyleProps {
+  bleed?: BleedValue;
+  bleedX?: BleedValue;
+  bleedY?: BleedValue;
+  bleedTop?: BleedValue;
+  bleedRight?: BleedValue;
+  bleedBottom?: BleedValue;
+  bleedLeft?: BleedValue;
+}
+
+/**
+ * Margin and bleed props both resolve to `margin-*` values, so they are mutually exclusive at
+ * the type level.
+ */
+export type MarginBleedStyleProps =
+  | (BleedStyleProps & { [K in keyof MarginStyleProps]?: never })
+  | (MarginStyleProps & { [K in keyof BleedStyleProps]?: never });
+
+type UseStyleProps = StyleProps &
+  MarginStyleProps &
+  BleedStyleProps & {
+    style?: CSSProperties;
+  };
+
 export function useStyleProps<T extends UseStyleProps>(
   props: T,
 ): {
@@ -286,6 +355,27 @@ export function useStyleProps<T extends UseStyleProps>(
     pr,
     pb,
     pl,
+    margin,
+    m,
+    marginX,
+    mx,
+    marginY,
+    my,
+    marginTop,
+    mt,
+    marginRight,
+    mr,
+    marginBottom,
+    mb,
+    marginLeft,
+    ml,
+    bleed,
+    bleedX,
+    bleedY,
+    bleedTop,
+    bleedRight,
+    bleedBottom,
+    bleedLeft,
     bottom,
     left,
     right,
@@ -308,7 +398,8 @@ export function useStyleProps<T extends UseStyleProps>(
     style,
     ...restProps
   } = props;
-  const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();
+  const { safeAreaInsetTop, safeAreaInsetRight, safeAreaInsetBottom, safeAreaInsetLeft } =
+    useSafeArea();
 
   const backgroundValue = handleColor(background ?? bg);
   const paddingValue = handleDimension(padding ?? p);
@@ -316,10 +407,33 @@ export function useStyleProps<T extends UseStyleProps>(
   const paddingYValue = handleDimension(paddingY ?? py) ?? paddingValue;
   const paddingTopValue =
     handlePaddingWithSafeArea(paddingTop ?? pt, safeAreaInsetTop) ?? paddingYValue;
-  const paddingRightValue = handleDimension(paddingRight ?? pr) ?? paddingXValue;
+  const paddingRightValue =
+    handlePaddingWithSafeArea(paddingRight ?? pr, safeAreaInsetRight) ?? paddingXValue;
   const paddingBottomValue =
     handlePaddingWithSafeArea(paddingBottom ?? pb, safeAreaInsetBottom) ?? paddingYValue;
-  const paddingLeftValue = handleDimension(paddingLeft ?? pl) ?? paddingXValue;
+  const paddingLeftValue =
+    handlePaddingWithSafeArea(paddingLeft ?? pl, safeAreaInsetLeft) ?? paddingXValue;
+
+  const marginValue = handleDimension(margin ?? m);
+  const marginXValue = handleDimension(marginX ?? mx) ?? marginValue;
+  const marginYValue = handleDimension(marginY ?? my) ?? marginValue;
+  const marginTopValue =
+    handleDimension(marginTop ?? mt) ??
+    marginYValue ??
+    handleBleed(bleedTop ?? bleedY ?? bleed, safeAreaInsetTop);
+  const marginRightValue =
+    handleDimension(marginRight ?? mr) ??
+    marginXValue ??
+    handleBleed(bleedRight ?? bleedX ?? bleed, safeAreaInsetRight);
+  const marginBottomValue =
+    handleDimension(marginBottom ?? mb) ??
+    marginYValue ??
+    handleBleed(bleedBottom ?? bleedY ?? bleed, safeAreaInsetBottom);
+  const marginLeftValue =
+    handleDimension(marginLeft ?? ml) ??
+    marginXValue ??
+    handleBleed(bleedLeft ?? bleedX ?? bleed, safeAreaInsetLeft);
+
   const hasBorderStyle =
     borderColor != null ||
     borderWidth != null ||
@@ -354,6 +468,10 @@ export function useStyleProps<T extends UseStyleProps>(
       paddingRight: paddingRightValue,
       paddingBottom: paddingBottomValue,
       paddingLeft: paddingLeftValue,
+      marginTop: marginTopValue,
+      marginRight: marginRightValue,
+      marginBottom: marginBottomValue,
+      marginLeft: marginLeftValue,
       top: handleDimension(top),
       left: handleDimension(left),
       right: handleDimension(right),