@openiot-devteam/layout 0.3.0

package/dist/web/ScreenLayout.mjs

@@ -0,0 +1,118 @@
+import { LAYOUT } from "../tokens.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/web/ScreenLayout.tsx
+/**
+* 스크롤형 화면 골격 — 헤더 고정 + 본문 스크롤 + 하단 슬롯.
+*
+* 구 `BasicLayout` · `TabsLayout` · `ContentLayout` 의 하단 CTA · smart-key 의 full-bleed
+* 조립을 모두 대체한다. 하단에 무엇이 오느냐(`footer`)만 달랐던 것들이라 prop 하나로 흡수된다.
+*
+* 하단 CTA 를 그릴 수 있는 곳은 여기 `footer` 하나뿐이다. 예전에는 BasicLayout 과
+* ContentLayout 양쪽에서 그릴 수 있어 같은 화면에 CTA 가 두 번 잡히는 일이 있었다.
+*
+* @example
+* ```tsx
+* <ScreenLayout header={<Header title="방문차량 등록" onBackPress={back} />}
+*               footer={<Button>등록하기</Button>}>
+*   <Stack>…</Stack>
+* </ScreenLayout>
+*
+* // 탭 하위 화면 — 탭바가 safe-area 를 직접 처리한다
+* <ScreenLayout header={<Header leftIcon={<Logo />} />}
+*               footer={<TabBar />} safeBottom={false}>
+*   …
+* </ScreenLayout>
+* ```
+*/
+function ScreenLayout({ header, children, footer, banner, safeBottom = true, maxWidth = LAYOUT.maxWidth, className, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center",
+			width: "100%"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				width: "100%",
+				height: "100dvh",
+				overflow: "hidden",
+				...maxWidth === false ? null : { maxWidth },
+				...style
+			},
+			children: [
+				header !== void 0 && /* @__PURE__ */ jsx("header", {
+					style: {
+						position: "sticky",
+						top: 0,
+						zIndex: 50,
+						flex: "none",
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						width: "100%",
+						minHeight: LAYOUT.header.minHeight
+					},
+					children: header
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						flex: 1,
+						display: "flex",
+						flexDirection: "column",
+						width: "100%",
+						minHeight: 0,
+						overflowY: "auto",
+						overflowX: "hidden",
+						gap: LAYOUT.content.gap,
+						paddingLeft: LAYOUT.content.paddingX,
+						paddingRight: LAYOUT.content.paddingX,
+						paddingTop: LAYOUT.content.paddingTop,
+						paddingBottom: footer === void 0 && safeBottom ? `calc(${LAYOUT.content.paddingBottom}px + env(safe-area-inset-bottom))` : LAYOUT.content.paddingBottom
+					},
+					children
+				}),
+				footer !== void 0 && /* @__PURE__ */ jsx("div", {
+					style: {
+						flex: "none",
+						width: "100%",
+						paddingLeft: LAYOUT.footer.paddingX,
+						paddingRight: LAYOUT.footer.paddingX,
+						paddingTop: LAYOUT.footer.paddingY,
+						paddingBottom: safeBottom ? `calc(${LAYOUT.footer.paddingY}px + env(safe-area-inset-bottom))` : LAYOUT.footer.paddingY
+					},
+					children: footer
+				}),
+				banner !== void 0 && /* @__PURE__ */ jsx("div", {
+					style: {
+						flex: "none",
+						width: "100%"
+					},
+					children: banner
+				})
+			]
+		})
+	});
+}
+/**
+* 섹션을 일정 간격으로 쌓는 유틸. 구 `ContentLayout` 의 실체이며,
+* 레이아웃이 아니라 간격 유틸이라 하단 CTA 슬롯은 갖지 않는다 — 그건 `ScreenLayout.footer` 다.
+*/
+function Stack({ children, gap = LAYOUT.stackGap, className, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap,
+			...style
+		},
+		children
+	});
+}
+//#endregion
+export { ScreenLayout, Stack };
+
+//# sourceMappingURL=ScreenLayout.mjs.map

package/dist/web/ScreenLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenLayout.mjs","names":[],"sources":["../../src/web/ScreenLayout.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react'\nimport { LAYOUT } from '../tokens.js'\nimport type { ScreenLayoutBaseProps } from '../types.js'\n\nexport interface ScreenLayoutProps extends ScreenLayoutBaseProps {\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * 스크롤형 화면 골격 — 헤더 고정 + 본문 스크롤 + 하단 슬롯.\n *\n * 구 `BasicLayout` · `TabsLayout` · `ContentLayout` 의 하단 CTA · smart-key 의 full-bleed\n * 조립을 모두 대체한다. 하단에 무엇이 오느냐(`footer`)만 달랐던 것들이라 prop 하나로 흡수된다.\n *\n * 하단 CTA 를 그릴 수 있는 곳은 여기 `footer` 하나뿐이다. 예전에는 BasicLayout 과\n * ContentLayout 양쪽에서 그릴 수 있어 같은 화면에 CTA 가 두 번 잡히는 일이 있었다.\n *\n * @example\n * ```tsx\n * <ScreenLayout header={<Header title=\"방문차량 등록\" onBackPress={back} />}\n *               footer={<Button>등록하기</Button>}>\n *   <Stack>…</Stack>\n * </ScreenLayout>\n *\n * // 탭 하위 화면 — 탭바가 safe-area 를 직접 처리한다\n * <ScreenLayout header={<Header leftIcon={<Logo />} />}\n *               footer={<TabBar />} safeBottom={false}>\n *   …\n * </ScreenLayout>\n * ```\n */\nexport function ScreenLayout({\n  header,\n  children,\n  footer,\n  banner,\n  safeBottom = true,\n  maxWidth = LAYOUT.maxWidth,\n  className,\n  style,\n}: ScreenLayoutProps) {\n  const column: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100dvh',\n    overflow: 'hidden',\n    ...(maxWidth === false ? null : { maxWidth }),\n  }\n\n  return (\n    <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>\n      <div className={className} style={{ ...column, ...style }}>\n        {header !== undefined && (\n          <header\n            style={{\n              position: 'sticky',\n              top: 0,\n              zIndex: 50,\n              flex: 'none',\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: 'center',\n              width: '100%',\n              minHeight: LAYOUT.header.minHeight,\n            }}\n          >\n            {header}\n          </header>\n        )}\n\n        <div\n          style={{\n            flex: 1,\n            display: 'flex',\n            flexDirection: 'column',\n            width: '100%',\n            minHeight: 0,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n            gap: LAYOUT.content.gap,\n            paddingLeft: LAYOUT.content.paddingX,\n            paddingRight: LAYOUT.content.paddingX,\n            paddingTop: LAYOUT.content.paddingTop,\n            // footer 가 없을 때만 본문이 하단 safe-area 를 책임진다.\n            paddingBottom:\n              footer === undefined && safeBottom\n                ? `calc(${LAYOUT.content.paddingBottom}px + env(safe-area-inset-bottom))`\n                : LAYOUT.content.paddingBottom,\n          }}\n        >\n          {children}\n        </div>\n\n        {footer !== undefined && (\n          <div\n            style={{\n              flex: 'none',\n              width: '100%',\n              paddingLeft: LAYOUT.footer.paddingX,\n              paddingRight: LAYOUT.footer.paddingX,\n              paddingTop: LAYOUT.footer.paddingY,\n              paddingBottom: safeBottom\n                ? `calc(${LAYOUT.footer.paddingY}px + env(safe-area-inset-bottom))`\n                : LAYOUT.footer.paddingY,\n            }}\n          >\n            {footer}\n          </div>\n        )}\n\n        {banner !== undefined && <div style={{ flex: 'none', width: '100%' }}>{banner}</div>}\n      </div>\n    </div>\n  )\n}\n\nexport interface StackProps {\n  children: ReactNode\n  /** 항목 간격 (기본 16). */\n  gap?: number\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * 섹션을 일정 간격으로 쌓는 유틸. 구 `ContentLayout` 의 실체이며,\n * 레이아웃이 아니라 간격 유틸이라 하단 CTA 슬롯은 갖지 않는다 — 그건 `ScreenLayout.footer` 다.\n */\nexport function Stack({ children, gap = LAYOUT.stackGap, className, style }: StackProps) {\n  return (\n    <div className={className} style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,aAAa,EAC3B,QACA,UACA,QACA,QACA,aAAa,MACb,WAAW,OAAO,UAClB,WACA,SACoB;CAUpB,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,SAAS;GAAQ,gBAAgB;GAAU,OAAO;EAAO;YACrE,qBAAC,OAAD;GAAgB;GAAW,OAAO;IAVpC,SAAS;IACT,eAAe;IACf,OAAO;IACP,QAAQ;IACR,UAAU;IACV,GAAI,aAAa,QAAQ,OAAO,EAAE,SAAS;IAKM,GAAG;GAAM;aAAxD;IACG,WAAW,KAAA,KACV,oBAAC,UAAD;KACE,OAAO;MACL,UAAU;MACV,KAAK;MACL,QAAQ;MACR,MAAM;MACN,SAAS;MACT,eAAe;MACf,gBAAgB;MAChB,OAAO;MACP,WAAW,OAAO,OAAO;KAC3B;eAEC;IACK,CAAA;IAGV,oBAAC,OAAD;KACE,OAAO;MACL,MAAM;MACN,SAAS;MACT,eAAe;MACf,OAAO;MACP,WAAW;MACX,WAAW;MACX,WAAW;MACX,KAAK,OAAO,QAAQ;MACpB,aAAa,OAAO,QAAQ;MAC5B,cAAc,OAAO,QAAQ;MAC7B,YAAY,OAAO,QAAQ;MAE3B,eACE,WAAW,KAAA,KAAa,aACpB,QAAQ,OAAO,QAAQ,cAAc,qCACrC,OAAO,QAAQ;KACvB;KAEC;IACE,CAAA;IAEJ,WAAW,KAAA,KACV,oBAAC,OAAD;KACE,OAAO;MACL,MAAM;MACN,OAAO;MACP,aAAa,OAAO,OAAO;MAC3B,cAAc,OAAO,OAAO;MAC5B,YAAY,OAAO,OAAO;MAC1B,eAAe,aACX,QAAQ,OAAO,OAAO,SAAS,qCAC/B,OAAO,OAAO;KACpB;eAEC;IACE,CAAA;IAGN,WAAW,KAAA,KAAa,oBAAC,OAAD;KAAK,OAAO;MAAE,MAAM;MAAQ,OAAO;KAAO;eAAI;IAAY,CAAA;GAChF;;CACF,CAAA;AAET;;;;;AAcA,SAAgB,MAAM,EAAE,UAAU,MAAM,OAAO,UAAU,WAAW,SAAqB;CACvF,OACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE,SAAS;GAAQ,eAAe;GAAU;GAAK,GAAG;EAAM;EACzF;CACE,CAAA;AAET"}

package/dist/web/overlays.d.mts

@@ -0,0 +1,58 @@
+import { BottomSheetBaseProps, DialogBaseProps } from "../types.mjs";
+import { CSSProperties } from "react";
+
+//#region src/web/overlays.d.ts
+interface BottomSheetProps extends BottomSheetBaseProps {
+  /** 시트 폭 상한 (기본 428). */
+  maxWidth?: number | false;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * 아래에서 올라오는 시트.
+ *
+ * 구 `BottomSheetCalendar` · `BottomSheetTimePicker` · `BottomSheetBanner` 를 대체한다.
+ * 세 변형의 차이는 안에 들어가는 내용뿐이라 껍데기만 공통화했다.
+ *
+ * shadcn `sheet` 와 달리 `side` 를 열지 않는다 — 실사용이 bottom 하나뿐인데 4방향을
+ * 열어두면 쓰이지 않을 조합까지 유지보수해야 한다.
+ *
+ * 열릴 때 {@link setDimHandler} 로 등록한 딤 핸들러를 자동으로 호출한다.
+ */
+declare function BottomSheet({
+  open,
+  onOpenChange,
+  dismissible,
+  label,
+  children,
+  maxWidth,
+  className,
+  style
+}: BottomSheetProps): import("react").JSX.Element;
+interface DialogProps extends DialogBaseProps {
+  maxWidth?: number | false;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * 확인이 필요한 동작에 쓰는 중앙 다이얼로그.
+ *
+ * 구 `StandardModal`(RN)과 `AppDialog`(웹)를 하나의 계약으로 합쳤다.
+ * 버튼을 직접 구성하고 싶으면 `children` 을 쓰고, 그러면 `cancel`/`confirm` 은 무시된다.
+ */
+declare function Dialog({
+  open,
+  onOpenChange,
+  dismissible,
+  title,
+  description,
+  cancel,
+  confirm,
+  children,
+  maxWidth,
+  className,
+  style
+}: DialogProps): import("react").JSX.Element;
+//#endregion
+export { BottomSheet, BottomSheetProps, Dialog, DialogProps };
+//# sourceMappingURL=overlays.d.mts.map

package/dist/web/overlays.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.d.mts","names":[],"sources":["../../src/web/overlays.tsx"],"mappings":";;;;UAqCiB,gBAAA,SAAyB,oBAAoB;;EAE5D,QAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAA;AAAA;;;;;;;AAAa;AAcvB;;;;iBAAgB,WAAA;EACd,IAAA;EACA,YAAA;EACA,WAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA;AAAA,GACC,gBAAA,mBAAgB,GAAA,CAAA,OAAA;AAAA,UAoDF,WAAA,SAAoB,eAAe;EAClD,QAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAA;AAAA;;;;;;;iBASM,MAAA;EACd,IAAA;EACA,YAAA;EACA,WAAA;EACA,KAAA;EACA,WAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA;AAAA,GACC,WAAA,mBAAW,GAAA,CAAA,OAAA"}

package/dist/web/overlays.mjs

@@ -0,0 +1,173 @@
+"use client";
+import { LAYOUT } from "../tokens.mjs";
+import { acquireDim, releaseDim } from "../dim-bridge.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { useEffect } from "react";
+//#region src/web/overlays.tsx
+/** 오버레이가 열려 있는 동안 네이티브 딤을 잡아 둔다 (웹뷰가 아니면 no-op). */
+function useDim(open) {
+	useEffect(() => {
+		if (!open) return;
+		acquireDim();
+		return releaseDim;
+	}, [open]);
+}
+const overlayStyle = {
+	position: "fixed",
+	inset: 0,
+	zIndex: 100,
+	backgroundColor: `rgba(0, 0, 0, ${LAYOUT.dimOpacity})`
+};
+/** 시트·다이얼로그를 모바일 폭에 맞춰 가운데 정렬하기 위한 래퍼. */
+function centered(maxWidth) {
+	return {
+		position: "fixed",
+		left: 0,
+		right: 0,
+		zIndex: 101,
+		display: "flex",
+		justifyContent: "center",
+		...maxWidth === false ? null : { pointerEvents: "none" }
+	};
+}
+/**
+* 아래에서 올라오는 시트.
+*
+* 구 `BottomSheetCalendar` · `BottomSheetTimePicker` · `BottomSheetBanner` 를 대체한다.
+* 세 변형의 차이는 안에 들어가는 내용뿐이라 껍데기만 공통화했다.
+*
+* shadcn `sheet` 와 달리 `side` 를 열지 않는다 — 실사용이 bottom 하나뿐인데 4방향을
+* 열어두면 쓰이지 않을 조합까지 유지보수해야 한다.
+*
+* 열릴 때 {@link setDimHandler} 로 등록한 딤 핸들러를 자동으로 호출한다.
+*/
+function BottomSheet({ open, onOpenChange, dismissible = true, label, children, maxWidth = LAYOUT.maxWidth, className, style }) {
+	useDim(open);
+	return /* @__PURE__ */ jsx(RadixDialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [/* @__PURE__ */ jsx(RadixDialog.Overlay, { style: overlayStyle }), /* @__PURE__ */ jsx("div", {
+			style: {
+				...centered(maxWidth),
+				bottom: 0
+			},
+			children: /* @__PURE__ */ jsxs(RadixDialog.Content, {
+				className,
+				"aria-label": label,
+				onPointerDownOutside: (e) => {
+					if (!dismissible) e.preventDefault();
+				},
+				onEscapeKeyDown: (e) => {
+					if (!dismissible) e.preventDefault();
+				},
+				style: {
+					pointerEvents: "auto",
+					width: "100%",
+					...maxWidth === false ? null : { maxWidth },
+					borderTopLeftRadius: LAYOUT.sheetRadius,
+					borderTopRightRadius: LAYOUT.sheetRadius,
+					paddingLeft: LAYOUT.content.paddingX,
+					paddingRight: LAYOUT.content.paddingX,
+					paddingTop: 12,
+					paddingBottom: `calc(24px + env(safe-area-inset-bottom))`,
+					maxHeight: "86dvh",
+					overflowY: "auto",
+					...style
+				},
+				children: [/* @__PURE__ */ jsx(RadixDialog.Title, {
+					style: {
+						position: "absolute",
+						width: 1,
+						height: 1,
+						overflow: "hidden",
+						clip: "rect(0 0 0 0)",
+						whiteSpace: "nowrap"
+					},
+					children: label
+				}), children]
+			})
+		})] })
+	});
+}
+/**
+* 확인이 필요한 동작에 쓰는 중앙 다이얼로그.
+*
+* 구 `StandardModal`(RN)과 `AppDialog`(웹)를 하나의 계약으로 합쳤다.
+* 버튼을 직접 구성하고 싶으면 `children` 을 쓰고, 그러면 `cancel`/`confirm` 은 무시된다.
+*/
+function Dialog({ open, onOpenChange, dismissible = true, title, description, cancel, confirm, children, maxWidth = LAYOUT.maxWidth - LAYOUT.dialog.insetX * 2, className, style }) {
+	useDim(open);
+	return /* @__PURE__ */ jsx(RadixDialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [/* @__PURE__ */ jsx(RadixDialog.Overlay, { style: overlayStyle }), /* @__PURE__ */ jsx("div", {
+			style: {
+				...centered(maxWidth),
+				top: 0,
+				bottom: 0,
+				alignItems: "center"
+			},
+			children: /* @__PURE__ */ jsxs(RadixDialog.Content, {
+				className,
+				onPointerDownOutside: (e) => {
+					if (!dismissible) e.preventDefault();
+				},
+				onEscapeKeyDown: (e) => {
+					if (!dismissible) e.preventDefault();
+				},
+				style: {
+					pointerEvents: "auto",
+					width: `calc(100% - ${LAYOUT.dialog.insetX * 2}px)`,
+					...maxWidth === false ? null : { maxWidth },
+					borderRadius: LAYOUT.dialog.radius,
+					padding: "26px 22px 18px",
+					display: "flex",
+					flexDirection: "column",
+					gap: 12,
+					textAlign: "center",
+					...style
+				},
+				children: [
+					/* @__PURE__ */ jsx(RadixDialog.Title, {
+						style: { margin: 0 },
+						children: title
+					}),
+					description !== void 0 && /* @__PURE__ */ jsx(RadixDialog.Description, {
+						style: { margin: 0 },
+						children: description
+					}),
+					children ?? /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							gap: 10,
+							marginTop: 6
+						},
+						children: [cancel && /* @__PURE__ */ jsx(RadixDialog.Close, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								style: { flex: 1 },
+								onClick: cancel.onPress,
+								children: cancel.label
+							})
+						}), confirm && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							style: { flex: 1 },
+							"data-tone": confirm.tone ?? "default",
+							onClick: () => {
+								confirm.onPress?.();
+								onOpenChange(false);
+							},
+							children: confirm.label
+						})]
+					})
+				]
+			})
+		})] })
+	});
+}
+//#endregion
+export { BottomSheet, Dialog };
+
+//# sourceMappingURL=overlays.mjs.map

package/dist/web/overlays.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.mjs","names":[],"sources":["../../src/web/overlays.tsx"],"sourcesContent":["'use client'\n\nimport * as RadixDialog from '@radix-ui/react-dialog'\nimport { useEffect, type CSSProperties } from 'react'\nimport { acquireDim, releaseDim } from '../dim-bridge.js'\nimport { LAYOUT } from '../tokens.js'\nimport type { BottomSheetBaseProps, DialogBaseProps } from '../types.js'\n\n/** 오버레이가 열려 있는 동안 네이티브 딤을 잡아 둔다 (웹뷰가 아니면 no-op). */\nfunction useDim(open: boolean) {\n  useEffect(() => {\n    if (!open) return\n    acquireDim()\n    return releaseDim\n  }, [open])\n}\n\nconst overlayStyle: CSSProperties = {\n  position: 'fixed',\n  inset: 0,\n  zIndex: 100,\n  backgroundColor: `rgba(0, 0, 0, ${LAYOUT.dimOpacity})`,\n}\n\n/** 시트·다이얼로그를 모바일 폭에 맞춰 가운데 정렬하기 위한 래퍼. */\nfunction centered(maxWidth: number | false): CSSProperties {\n  return {\n    position: 'fixed',\n    left: 0,\n    right: 0,\n    zIndex: 101,\n    display: 'flex',\n    justifyContent: 'center',\n    ...(maxWidth === false ? null : { pointerEvents: 'none' as const }),\n  }\n}\n\nexport interface BottomSheetProps extends BottomSheetBaseProps {\n  /** 시트 폭 상한 (기본 428). */\n  maxWidth?: number | false\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * 아래에서 올라오는 시트.\n *\n * 구 `BottomSheetCalendar` · `BottomSheetTimePicker` · `BottomSheetBanner` 를 대체한다.\n * 세 변형의 차이는 안에 들어가는 내용뿐이라 껍데기만 공통화했다.\n *\n * shadcn `sheet` 와 달리 `side` 를 열지 않는다 — 실사용이 bottom 하나뿐인데 4방향을\n * 열어두면 쓰이지 않을 조합까지 유지보수해야 한다.\n *\n * 열릴 때 {@link setDimHandler} 로 등록한 딤 핸들러를 자동으로 호출한다.\n */\nexport function BottomSheet({\n  open,\n  onOpenChange,\n  dismissible = true,\n  label,\n  children,\n  maxWidth = LAYOUT.maxWidth,\n  className,\n  style,\n}: BottomSheetProps) {\n  useDim(open)\n\n  return (\n    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>\n      <RadixDialog.Portal>\n        <RadixDialog.Overlay style={overlayStyle} />\n        <div style={{ ...centered(maxWidth), bottom: 0 }}>\n          <RadixDialog.Content\n            className={className}\n            aria-label={label}\n            onPointerDownOutside={(e) => {\n              if (!dismissible) e.preventDefault()\n            }}\n            onEscapeKeyDown={(e) => {\n              if (!dismissible) e.preventDefault()\n            }}\n            style={{\n              pointerEvents: 'auto',\n              width: '100%',\n              ...(maxWidth === false ? null : { maxWidth }),\n              borderTopLeftRadius: LAYOUT.sheetRadius,\n              borderTopRightRadius: LAYOUT.sheetRadius,\n              paddingLeft: LAYOUT.content.paddingX,\n              paddingRight: LAYOUT.content.paddingX,\n              paddingTop: 12,\n              paddingBottom: `calc(24px + env(safe-area-inset-bottom))`,\n              maxHeight: '86dvh',\n              overflowY: 'auto',\n              ...style,\n            }}\n          >\n            <RadixDialog.Title\n              style={{\n                position: 'absolute',\n                width: 1,\n                height: 1,\n                overflow: 'hidden',\n                clip: 'rect(0 0 0 0)',\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {label}\n            </RadixDialog.Title>\n            {children}\n          </RadixDialog.Content>\n        </div>\n      </RadixDialog.Portal>\n    </RadixDialog.Root>\n  )\n}\n\nexport interface DialogProps extends DialogBaseProps {\n  maxWidth?: number | false\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * 확인이 필요한 동작에 쓰는 중앙 다이얼로그.\n *\n * 구 `StandardModal`(RN)과 `AppDialog`(웹)를 하나의 계약으로 합쳤다.\n * 버튼을 직접 구성하고 싶으면 `children` 을 쓰고, 그러면 `cancel`/`confirm` 은 무시된다.\n */\nexport function Dialog({\n  open,\n  onOpenChange,\n  dismissible = true,\n  title,\n  description,\n  cancel,\n  confirm,\n  children,\n  maxWidth = LAYOUT.maxWidth - LAYOUT.dialog.insetX * 2,\n  className,\n  style,\n}: DialogProps) {\n  useDim(open)\n\n  return (\n    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>\n      <RadixDialog.Portal>\n        <RadixDialog.Overlay style={overlayStyle} />\n        <div style={{ ...centered(maxWidth), top: 0, bottom: 0, alignItems: 'center' }}>\n          <RadixDialog.Content\n            className={className}\n            onPointerDownOutside={(e) => {\n              if (!dismissible) e.preventDefault()\n            }}\n            onEscapeKeyDown={(e) => {\n              if (!dismissible) e.preventDefault()\n            }}\n            style={{\n              pointerEvents: 'auto',\n              width: `calc(100% - ${LAYOUT.dialog.insetX * 2}px)`,\n              ...(maxWidth === false ? null : { maxWidth }),\n              borderRadius: LAYOUT.dialog.radius,\n              padding: '26px 22px 18px',\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 12,\n              textAlign: 'center',\n              ...style,\n            }}\n          >\n            <RadixDialog.Title style={{ margin: 0 }}>{title}</RadixDialog.Title>\n            {description !== undefined && (\n              <RadixDialog.Description style={{ margin: 0 }}>{description}</RadixDialog.Description>\n            )}\n\n            {children ?? (\n              <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>\n                {cancel && (\n                  <RadixDialog.Close asChild>\n                    <button type=\"button\" style={{ flex: 1 }} onClick={cancel.onPress}>\n                      {cancel.label}\n                    </button>\n                  </RadixDialog.Close>\n                )}\n                {confirm && (\n                  <button\n                    type=\"button\"\n                    style={{ flex: 1 }}\n                    data-tone={confirm.tone ?? 'default'}\n                    onClick={() => {\n                      confirm.onPress?.()\n                      onOpenChange(false)\n                    }}\n                  >\n                    {confirm.label}\n                  </button>\n                )}\n              </div>\n            )}\n          </RadixDialog.Content>\n        </div>\n      </RadixDialog.Portal>\n    </RadixDialog.Root>\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@openiot-devteam/layout",
+  "version": "0.3.0",
+  "description": "OpenIoT 모바일 레이아웃 — 웹(Next)과 RN(Expo)에서 같은 API로 쓰는 화면 골격",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openiot-devteam/000-design-system.git",
+    "directory": "packages/layout"
+  },
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/native.d.mts",
+        "import": "./dist/native.mjs"
+      },
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.mts",
+      "import": "./dist/tokens.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": ">=0.76",
+    "react-native-safe-area-context": ">=4.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.17"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "react-native": "0.83.2",
+    "react-native-safe-area-context": "^5.6.0"
+  }
+}