@openiot-devteam/layout 0.3.0

package/README.md

@@ -0,0 +1,147 @@
+# @openiot-devteam/layout
+
+모바일 화면 골격을 웹(Next)과 React Native(Expo)에서 **같은 API**로 쓰는 패키지입니다.
+
+사내 앱 6곳에 흩어져 있던 레이아웃 14종을 4개로 정리한 결과물입니다. 가르는 축은
+**본문이 스크롤되는가** 하나이고, 나머지 차이는 전부 prop 으로 내려갑니다.
+
+| 컴포넌트       | 대체하는 것                                                                  |
+| -------------- | ---------------------------------------------------------------------------- |
+| `ScreenLayout` | `BasicLayout` · `TabsLayout` · `ContentLayout` 의 하단 CTA · full-bleed 조립 |
+| `FitLayout`    | `DeviceConnectLayout` · `DeviceControlLayout`                                |
+| `BottomSheet`  | `BottomSheetCalendar` · `BottomSheetTimePicker` · `BottomSheetBanner`        |
+| `Dialog`       | `StandardModal` · `AppDialog`                                                |
+
+## 설치
+
+```bash
+npm i @openiot-devteam/layout
+```
+
+RN 앱은 `react-native-safe-area-context` 가 필요합니다 (사내 앱 5곳 모두 이미 설치돼 있습니다).
+웹 전용 프로젝트는 추가 설치가 없습니다.
+
+## 쓰는 법
+
+import 경로는 웹과 RN 이 완전히 같습니다. `package.json` 의 `react-native` export 조건 덕분에
+Metro 는 네이티브 구현을, 그 외 번들러는 웹 구현을 자동으로 고릅니다.
+
+```tsx
+import { ScreenLayout, FitLayout, Stack, BottomSheet, Dialog } from '@openiot-devteam/layout'
+```
+
+### ScreenLayout — 스크롤형
+
+```tsx
+// 폼 · CTA
+<ScreenLayout header={<Header title="방문차량 등록" onBackPress={back} />} footer={<Button>등록하기</Button>}>
+  <Stack>
+    <VehicleCard />
+    <DateCard />
+  </Stack>
+</ScreenLayout>
+
+// 탭 하위 화면 — 탭바가 safe-area 를 직접 처리하므로 safeBottom 을 끕니다
+<ScreenLayout header={<Header leftIcon={<Logo />} />} footer={<TabBar />} safeBottom={false}>
+  …
+</ScreenLayout>
+
+// 헤더 2단 (구 smart-key full-bleed)
+<ScreenLayout header={<><LogoHeader /><TitleHeader /></>}>…</ScreenLayout>
+```
+
+하단 CTA 를 그릴 수 있는 곳은 `footer` **하나뿐**입니다. 예전에는 `BasicLayout` 과
+`ContentLayout` 양쪽에서 그릴 수 있어 같은 화면에 CTA 가 두 번 잡히는 일이 있었습니다.
+
+### FitLayout — 고정형 (스크롤 없음)
+
+단계가 바뀌어도 버튼 위치가 흔들리지 않아야 하는 화면에 씁니다. 내용 길이가 가변이면
+`ScreenLayout` 을 쓰세요.
+
+```tsx
+// 기기 연결 마법사
+<FitLayout
+  header={<Header onBackPress={back} />}
+  regions={[
+    { height: 160, node: <Guide /> },
+    { height: 328, node: <DeviceImage /> },
+    { height: 'fill', node: <Info /> },
+  ]}
+  action={<Button>기기 연결하기</Button>}
+/>
+
+// 기기 제어 — 마지막 구획을 시트로
+<FitLayout
+  header={<Header title="거실 공기청정기" onBackPress={back} />}
+  regions={[
+    { height: 336, node: <Summary /> },
+    { height: 'fill', variant: 'sheet', node: <Controls /> },
+  ]}
+  sheetBackground="#292E36"
+/>
+```
+
+### 오버레이
+
+```tsx
+<BottomSheet open={open} onOpenChange={setOpen} label="날짜 선택">
+  <Calendar />
+</BottomSheet>
+
+<Dialog
+  open={open}
+  onOpenChange={setOpen}
+  title="기기 연결을 해제할까요?"
+  description="해제하면 기록이 더 이상 수집되지 않아요"
+  cancel={{ label: '취소' }}
+  confirm={{ label: '해제', tone: 'danger', onPress: disconnect }}
+/>
+```
+
+`BottomSheet` 는 `side` 를 열지 않습니다. 실사용이 bottom 하나뿐인데 4방향을 열어두면
+쓰이지 않을 조합까지 유지보수해야 하기 때문입니다.
+
+### 웹뷰 앱의 딤
+
+웹이 직접 딤을 그리면 웹뷰 영역 안에만 칠해져 상태바와 홈 인디케이터가 밝게 남습니다.
+진입점에서 한 번 등록해 두면 `BottomSheet` · `Dialog` 가 알아서 신호를 올립니다.
+
+```ts
+import { setDimHandler } from '@openiot-devteam/layout'
+
+setDimHandler((visible) => postToRN({ type: 'DIALOG_DIM', payload: { visible } }))
+```
+
+등록하지 않으면 아무 일도 하지 않으므로 일반 브라우저에서도 그대로 동작합니다.
+오버레이가 중첩돼도 마지막 하나가 닫힐 때만 딤이 내려갑니다.
+
+## 스타일 정책
+
+구조(높이 · 여백 · flex)는 **인라인 스타일과 `StyleSheet`** 로 넣습니다. Tailwind 클래스를
+내보내지 않는 이유는, 소비 프로젝트가 이 패키지를 Tailwind content 범위에 넣지 않으면
+클래스가 CSS 로 생성되지 않아 레이아웃이 조용히 무너지기 때문입니다. RN 쪽도 같은 이유로
+NativeWind 를 쓰지 않아, NativeWind 를 설정하지 않은 앱(`openiot-203-app` ·
+`203-karking-guest-app`)에서도 그대로 동작합니다.
+
+색·타이포 같은 표현은 이 패키지가 건드리지 않습니다. `className`(웹)과 `style`(양쪽)이
+그대로 전달되니 앱의 테마를 얹으세요.
+
+한 가지 주의 — 구조 값은 인라인이라 클래스로 덮이지 않습니다. 여백을 바꾸고 싶으면
+클래스가 아니라 prop 을 쓰세요.
+
+## 토큰
+
+```ts
+import { LAYOUT } from '@openiot-devteam/layout/tokens'
+```
+
+플랫폼 의존이 없는 순수 상수라 RN·웹·빌드 스크립트 어디서나 import 할 수 있습니다.
+
+| 값                    | 용도                     |
+| --------------------- | ------------------------ |
+| `maxWidth` 428        | 모바일 콘텐츠 최대 폭    |
+| `header.minHeight` 40 | 헤더 최소 높이           |
+| `content` 20/24/32/48 | 본문 px / pt / pb / gap  |
+| `footer.height` 96    | 하단 CTA 영역            |
+| `tabBar` 60 / 68      | 웹 고정 / RN + safe-area |
+| `stackGap` 16         | 섹션 묶음 간격           |

package/dist/dim-bridge.d.mts

@@ -0,0 +1,21 @@
+//#region src/dim-bridge.d.ts
+/**
+ * 웹뷰 앱 전용 — 오버레이가 열릴 때 네이티브에 딤을 요청한다.
+ *
+ * 웹이 직접 딤을 그리면 웹뷰 영역 안에만 칠해져서 상태바와 홈 인디케이터가 밝게 남는다.
+ * 그래서 실제 딤은 RN 이 전체 화면에 그리고, 웹은 신호만 보낸다.
+ *
+ * 앱 진입점에서 한 번 등록해 두면 BottomSheet · Dialog 가 알아서 호출하므로
+ * 사용처에서는 신경 쓸 일이 없다. 등록하지 않으면 아무 일도 하지 않는다(브라우저에서 그대로 동작).
+ *
+ * @example
+ * ```ts
+ * // 웹뷰로 띄우는 앱의 진입점에서
+ * setDimHandler((visible) => postToRN({ type: 'DIALOG_DIM', payload: { visible } }))
+ * ```
+ */
+type DimHandler = (visible: boolean) => void;
+declare function setDimHandler(fn: DimHandler | null): void;
+//#endregion
+export { setDimHandler };
+//# sourceMappingURL=dim-bridge.d.mts.map

package/dist/dim-bridge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dim-bridge.d.mts","names":[],"sources":["../src/dim-bridge.ts"],"mappings":";;;;;;AAemC;AAMnC;;;;AAAmD;;;;;KAN9C,UAAA,IAAc,OAAgB;AAAA,iBAMnB,aAAA,CAAc,EAAqB,EAAjB,UAAU"}

package/dist/dim-bridge.mjs

@@ -0,0 +1,22 @@
+//#region src/dim-bridge.ts
+let handler = null;
+/** 동시에 열린 오버레이 수 — 중첩되어도 마지막 하나가 닫힐 때만 딤을 내린다. */
+let openCount = 0;
+function setDimHandler(fn) {
+	handler = fn;
+}
+/** @internal 오버레이가 열릴 때 호출. */
+function acquireDim() {
+	openCount += 1;
+	if (openCount === 1) handler?.(true);
+}
+/** @internal 오버레이가 닫힐 때 호출. */
+function releaseDim() {
+	if (openCount === 0) return;
+	openCount -= 1;
+	if (openCount === 0) handler?.(false);
+}
+//#endregion
+export { acquireDim, releaseDim, setDimHandler };
+
+//# sourceMappingURL=dim-bridge.mjs.map

package/dist/dim-bridge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dim-bridge.mjs","names":[],"sources":["../src/dim-bridge.ts"],"sourcesContent":["/**\n * 웹뷰 앱 전용 — 오버레이가 열릴 때 네이티브에 딤을 요청한다.\n *\n * 웹이 직접 딤을 그리면 웹뷰 영역 안에만 칠해져서 상태바와 홈 인디케이터가 밝게 남는다.\n * 그래서 실제 딤은 RN 이 전체 화면에 그리고, 웹은 신호만 보낸다.\n *\n * 앱 진입점에서 한 번 등록해 두면 BottomSheet · Dialog 가 알아서 호출하므로\n * 사용처에서는 신경 쓸 일이 없다. 등록하지 않으면 아무 일도 하지 않는다(브라우저에서 그대로 동작).\n *\n * @example\n * ```ts\n * // 웹뷰로 띄우는 앱의 진입점에서\n * setDimHandler((visible) => postToRN({ type: 'DIALOG_DIM', payload: { visible } }))\n * ```\n */\ntype DimHandler = (visible: boolean) => void\n\nlet handler: DimHandler | null = null\n/** 동시에 열린 오버레이 수 — 중첩되어도 마지막 하나가 닫힐 때만 딤을 내린다. */\nlet openCount = 0\n\nexport function setDimHandler(fn: DimHandler | null): void {\n  handler = fn\n}\n\n/** @internal 오버레이가 열릴 때 호출. */\nexport function acquireDim(): void {\n  openCount += 1\n  if (openCount === 1) handler?.(true)\n}\n\n/** @internal 오버레이가 닫힐 때 호출. */\nexport function releaseDim(): void {\n  if (openCount === 0) return\n  openCount -= 1\n  if (openCount === 0) handler?.(false)\n}\n"],"mappings":";AAiBA,IAAI,UAA6B;;AAEjC,IAAI,YAAY;AAEhB,SAAgB,cAAc,IAA6B;CACzD,UAAU;AACZ;;AAGA,SAAgB,aAAmB;CACjC,aAAa;CACb,IAAI,cAAc,GAAG,UAAU,IAAI;AACrC;;AAGA,SAAgB,aAAmB;CACjC,IAAI,cAAc,GAAG;CACrB,aAAa;CACb,IAAI,cAAc,GAAG,UAAU,KAAK;AACtC"}

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { BottomSheetBaseProps, DialogBaseProps, FitLayoutBaseProps, FitRegion, OverlayBaseProps, ScreenLayoutBaseProps } from "./types.mjs";
+import { ScreenLayout, ScreenLayoutProps, Stack, StackProps } from "./web/ScreenLayout.mjs";
+import { FitLayout, FitLayoutProps } from "./web/FitLayout.mjs";
+import { BottomSheet, BottomSheetProps, Dialog, DialogProps } from "./web/overlays.mjs";
+import { LAYOUT, LayoutTokens } from "./tokens.mjs";
+import { setDimHandler } from "./dim-bridge.mjs";
+export { BottomSheet, type BottomSheetBaseProps, type BottomSheetProps, Dialog, type DialogBaseProps, type DialogProps, FitLayout, type FitLayoutBaseProps, type FitLayoutProps, type FitRegion, LAYOUT, type LayoutTokens, type OverlayBaseProps, ScreenLayout, type ScreenLayoutBaseProps, type ScreenLayoutProps, Stack, type StackProps, setDimHandler };

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import { LAYOUT } from "./tokens.mjs";
+import { ScreenLayout, Stack } from "./web/ScreenLayout.mjs";
+import { FitLayout } from "./web/FitLayout.mjs";
+import { setDimHandler } from "./dim-bridge.mjs";
+import { BottomSheet, Dialog } from "./web/overlays.mjs";
+export { BottomSheet, Dialog, FitLayout, LAYOUT, ScreenLayout, Stack, setDimHandler };

package/dist/native/FitLayout.d.mts

@@ -0,0 +1,26 @@
+import { FitLayoutBaseProps } from "../types.mjs";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/native/FitLayout.d.ts
+interface FitLayoutProps extends FitLayoutBaseProps {
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * 고정형 화면 골격 (RN) — 웹의 `FitLayout` 과 같은 prop 계약.
+ *
+ * 스크롤 없이 구획을 배분한다. 구 `DeviceConnectLayout` · `DeviceControlLayout` 대체.
+ *
+ * `'sheet'` 구획이 마지막이면 하단 safe-area 는 시트 내용이 직접 처리하는 편이 자연스러워
+ * `action` 이 없을 때는 레이아웃이 하단 여백을 넣지 않는다.
+ */
+declare function FitLayout({
+  header,
+  regions,
+  action,
+  sheetBackground,
+  safeBottom,
+  style
+}: FitLayoutProps): import("react").JSX.Element;
+//#endregion
+export { FitLayout, FitLayoutProps };
+//# sourceMappingURL=FitLayout.d.mts.map

package/dist/native/FitLayout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FitLayout.d.mts","names":[],"sources":["../../src/native/FitLayout.tsx"],"mappings":";;;;UAKiB,cAAA,SAAuB,kBAAA;EACtC,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;iBA0BJ,SAAA;EACd,MAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,UAAA;EACA;AAAA,GACC,cAAA,mBAAc,GAAA,CAAA,OAAA"}

package/dist/native/FitLayout.mjs

@@ -0,0 +1,80 @@
+import { LAYOUT } from "../tokens.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+//#region src/native/FitLayout.tsx
+function regionStyle(region, sheetBackground) {
+	const base = region.height === "fill" ? {
+		flex: 1,
+		width: "100%"
+	} : {
+		height: region.height,
+		width: "100%"
+	};
+	if (region.variant !== "sheet") return base;
+	return {
+		...base,
+		borderTopLeftRadius: LAYOUT.fitSheetRadius,
+		borderTopRightRadius: LAYOUT.fitSheetRadius,
+		overflow: "hidden",
+		...sheetBackground ? { backgroundColor: sheetBackground } : null
+	};
+}
+/**
+* 고정형 화면 골격 (RN) — 웹의 `FitLayout` 과 같은 prop 계약.
+*
+* 스크롤 없이 구획을 배분한다. 구 `DeviceConnectLayout` · `DeviceControlLayout` 대체.
+*
+* `'sheet'` 구획이 마지막이면 하단 safe-area 는 시트 내용이 직접 처리하는 편이 자연스러워
+* `action` 이 없을 때는 레이아웃이 하단 여백을 넣지 않는다.
+*/
+function FitLayout({ header, regions, action, sheetBackground, safeBottom = true, style }) {
+	const insets = useSafeAreaInsets();
+	const lastIsSheet = regions[regions.length - 1]?.variant === "sheet";
+	return /* @__PURE__ */ jsxs(View, {
+		style: [
+			styles.root,
+			{
+				paddingTop: insets.top,
+				paddingBottom: action === void 0 && safeBottom && !lastIsSheet ? insets.bottom : 0
+			},
+			style
+		],
+		children: [
+			header !== void 0 && /* @__PURE__ */ jsx(View, {
+				style: styles.header,
+				children: header
+			}),
+			regions.map((region, i) => /* @__PURE__ */ jsx(View, {
+				style: regionStyle(region, sheetBackground),
+				children: region.node
+			}, region.key ?? i)),
+			action !== void 0 && /* @__PURE__ */ jsx(View, {
+				style: [styles.action, { paddingBottom: safeBottom ? LAYOUT.footer.paddingY + insets.bottom : LAYOUT.footer.paddingY }],
+				children: action
+			})
+		]
+	});
+}
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+		width: "100%",
+		flexDirection: "column"
+	},
+	header: {
+		width: "100%",
+		minHeight: LAYOUT.header.minHeight,
+		flexDirection: "column",
+		justifyContent: "center"
+	},
+	action: {
+		width: "100%",
+		paddingHorizontal: LAYOUT.footer.paddingX,
+		paddingTop: LAYOUT.footer.paddingY
+	}
+});
+//#endregion
+export { FitLayout };
+
+//# sourceMappingURL=FitLayout.mjs.map

package/dist/native/FitLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FitLayout.mjs","names":[],"sources":["../../src/native/FitLayout.tsx"],"sourcesContent":["import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { LAYOUT } from '../tokens.js'\nimport type { FitLayoutBaseProps, FitRegion } from '../types.js'\n\nexport interface FitLayoutProps extends FitLayoutBaseProps {\n  style?: StyleProp<ViewStyle>\n}\n\nfunction regionStyle(region: FitRegion, sheetBackground?: string): StyleProp<ViewStyle> {\n  const base: ViewStyle =\n    region.height === 'fill' ? { flex: 1, width: '100%' } : { height: region.height, width: '100%' }\n\n  if (region.variant !== 'sheet') return base\n\n  return {\n    ...base,\n    borderTopLeftRadius: LAYOUT.fitSheetRadius,\n    borderTopRightRadius: LAYOUT.fitSheetRadius,\n    overflow: 'hidden',\n    ...(sheetBackground ? { backgroundColor: sheetBackground } : null),\n  }\n}\n\n/**\n * 고정형 화면 골격 (RN) — 웹의 `FitLayout` 과 같은 prop 계약.\n *\n * 스크롤 없이 구획을 배분한다. 구 `DeviceConnectLayout` · `DeviceControlLayout` 대체.\n *\n * `'sheet'` 구획이 마지막이면 하단 safe-area 는 시트 내용이 직접 처리하는 편이 자연스러워\n * `action` 이 없을 때는 레이아웃이 하단 여백을 넣지 않는다.\n */\nexport function FitLayout({\n  header,\n  regions,\n  action,\n  sheetBackground,\n  safeBottom = true,\n  style,\n}: FitLayoutProps) {\n  const insets = useSafeAreaInsets()\n  const lastIsSheet = regions[regions.length - 1]?.variant === 'sheet'\n\n  return (\n    <View\n      style={[\n        styles.root,\n        {\n          paddingTop: insets.top,\n          paddingBottom: action === undefined && safeBottom && !lastIsSheet ? insets.bottom : 0,\n        },\n        style,\n      ]}\n    >\n      {header !== undefined && <View style={styles.header}>{header}</View>}\n\n      {regions.map((region, i) => (\n        <View key={region.key ?? i} style={regionStyle(region, sheetBackground)}>\n          {region.node}\n        </View>\n      ))}\n\n      {action !== undefined && (\n        <View\n          style={[\n            styles.action,\n            {\n              paddingBottom: safeBottom\n                ? LAYOUT.footer.paddingY + insets.bottom\n                : LAYOUT.footer.paddingY,\n            },\n          ]}\n        >\n          {action}\n        </View>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: { flex: 1, width: '100%', flexDirection: 'column' },\n  header: {\n    width: '100%',\n    minHeight: LAYOUT.header.minHeight,\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  action: {\n    width: '100%',\n    paddingHorizontal: LAYOUT.footer.paddingX,\n    paddingTop: LAYOUT.footer.paddingY,\n  },\n})\n"],"mappings":";;;;;AASA,SAAS,YAAY,QAAmB,iBAAgD;CACtF,MAAM,OACJ,OAAO,WAAW,SAAS;EAAE,MAAM;EAAG,OAAO;CAAO,IAAI;EAAE,QAAQ,OAAO;EAAQ,OAAO;CAAO;CAEjG,IAAI,OAAO,YAAY,SAAS,OAAO;CAEvC,OAAO;EACL,GAAG;EACH,qBAAqB,OAAO;EAC5B,sBAAsB,OAAO;EAC7B,UAAU;EACV,GAAI,kBAAkB,EAAE,iBAAiB,gBAAgB,IAAI;CAC/D;AACF;;;;;;;;;AAUA,SAAgB,UAAU,EACxB,QACA,SACA,QACA,iBACA,aAAa,MACb,SACiB;CACjB,MAAM,SAAS,kBAAkB;CACjC,MAAM,cAAc,QAAQ,QAAQ,SAAS,EAAE,EAAE,YAAY;CAE7D,OACE,qBAAC,MAAD;EACE,OAAO;GACL,OAAO;GACP;IACE,YAAY,OAAO;IACnB,eAAe,WAAW,KAAA,KAAa,cAAc,CAAC,cAAc,OAAO,SAAS;GACtF;GACA;EACF;YARF;GAUG,WAAW,KAAA,KAAa,oBAAC,MAAD;IAAM,OAAO,OAAO;cAAS;GAAa,CAAA;GAElE,QAAQ,KAAK,QAAQ,MACpB,oBAAC,MAAD;IAA4B,OAAO,YAAY,QAAQ,eAAe;cACnE,OAAO;GACJ,GAFK,OAAO,OAAO,CAEnB,CACP;GAEA,WAAW,KAAA,KACV,oBAAC,MAAD;IACE,OAAO,CACL,OAAO,QACP,EACE,eAAe,aACX,OAAO,OAAO,WAAW,OAAO,SAChC,OAAO,OAAO,SACpB,CACF;cAEC;GACG,CAAA;EAEJ;;AAEV;AAEA,MAAM,SAAS,WAAW,OAAO;CAC/B,MAAM;EAAE,MAAM;EAAG,OAAO;EAAQ,eAAe;CAAS;CACxD,QAAQ;EACN,OAAO;EACP,WAAW,OAAO,OAAO;EACzB,eAAe;EACf,gBAAgB;CAClB;CACA,QAAQ;EACN,OAAO;EACP,mBAAmB,OAAO,OAAO;EACjC,YAAY,OAAO,OAAO;CAC5B;AACF,CAAC"}

package/dist/native/ScreenLayout.d.mts

@@ -0,0 +1,42 @@
+import { ScreenLayoutBaseProps } from "../types.mjs";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/native/ScreenLayout.d.ts
+interface ScreenLayoutProps extends ScreenLayoutBaseProps {
+  style?: StyleProp<ViewStyle>;
+  /** 본문 스크롤을 끄고 싶을 때 (기본 true). */
+  scrollable?: boolean;
+}
+/**
+ * 스크롤형 화면 골격 (RN) — 웹의 `ScreenLayout` 과 같은 prop 계약.
+ *
+ * 상단 safe-area 는 이 레이아웃이 직접 padding 으로 처리한다. `SafeAreaView` 를 쓰지 않는
+ * 이유는 하단 inset 을 `footer` 유무에 따라 다르게 줘야 하기 때문이다.
+ *
+ * NativeWind 없이 `StyleSheet` 만 쓰므로 NativeWind 를 설정하지 않은 앱
+ * (openiot-203-app · 203-karking-guest-app)에서도 그대로 동작한다.
+ */
+declare function ScreenLayout({
+  header,
+  children,
+  footer,
+  banner,
+  safeBottom,
+  scrollable,
+  style
+}: ScreenLayoutProps): import("react").JSX.Element;
+interface StackProps {
+  children: ReactNode;
+  gap?: number;
+  style?: StyleProp<ViewStyle>;
+}
+/** 섹션을 일정 간격으로 쌓는 유틸 (구 `ContentLayout`). */
+declare function Stack({
+  children,
+  gap,
+  style
+}: StackProps): import("react").JSX.Element;
+//#endregion
+export { ScreenLayout, ScreenLayoutProps, Stack, StackProps };
+//# sourceMappingURL=ScreenLayout.d.mts.map

package/dist/native/ScreenLayout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenLayout.d.mts","names":[],"sources":["../../src/native/ScreenLayout.tsx"],"mappings":";;;;;UAMiB,iBAAA,SAA0B,qBAAA;EACzC,KAAA,GAAQ,SAAA,CAAU,SAAA;EADH;EAGf,UAAA;AAAA;;;;;;;;;;iBAYc,YAAA;EACd,MAAA;EACA,QAAA;EACA,MAAA;EACA,MAAA;EACA,UAAA;EACA,UAAA;EACA;AAAA,GACC,iBAAA,mBAAiB,GAAA,CAAA,OAAA;AAAA,UAiDH,UAAA;EACf,QAAA,EAAU,SAAA;EACV,GAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;iBAIJ,KAAA;EAAQ,QAAA;EAAU,GAAA;EAAuB;AAAA,GAAS,UAAA,mBAAU,GAAA,CAAA,OAAA"}

package/dist/native/ScreenLayout.mjs

@@ -0,0 +1,90 @@
+import { LAYOUT } from "../tokens.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+//#region src/native/ScreenLayout.tsx
+/**
+* 스크롤형 화면 골격 (RN) — 웹의 `ScreenLayout` 과 같은 prop 계약.
+*
+* 상단 safe-area 는 이 레이아웃이 직접 padding 으로 처리한다. `SafeAreaView` 를 쓰지 않는
+* 이유는 하단 inset 을 `footer` 유무에 따라 다르게 줘야 하기 때문이다.
+*
+* NativeWind 없이 `StyleSheet` 만 쓰므로 NativeWind 를 설정하지 않은 앱
+* (openiot-203-app · 203-karking-guest-app)에서도 그대로 동작한다.
+*/
+function ScreenLayout({ header, children, footer, banner, safeBottom = true, scrollable = true, style }) {
+	const insets = useSafeAreaInsets();
+	const contentPadding = {
+		paddingHorizontal: LAYOUT.content.paddingX,
+		paddingTop: LAYOUT.content.paddingTop,
+		paddingBottom: footer === void 0 && safeBottom ? LAYOUT.content.paddingBottom + insets.bottom : LAYOUT.content.paddingBottom,
+		gap: LAYOUT.content.gap
+	};
+	return /* @__PURE__ */ jsxs(View, {
+		style: [
+			styles.root,
+			{ paddingTop: insets.top },
+			style
+		],
+		children: [
+			header !== void 0 && /* @__PURE__ */ jsx(View, {
+				style: styles.header,
+				children: header
+			}),
+			scrollable ? /* @__PURE__ */ jsx(ScrollView, {
+				style: styles.flex,
+				contentContainerStyle: contentPadding,
+				showsVerticalScrollIndicator: false,
+				children
+			}) : /* @__PURE__ */ jsx(View, {
+				style: [styles.flex, contentPadding],
+				children
+			}),
+			footer !== void 0 && /* @__PURE__ */ jsx(View, {
+				style: [styles.footer, { paddingBottom: safeBottom ? LAYOUT.footer.paddingY + insets.bottom : LAYOUT.footer.paddingY }],
+				children: footer
+			}),
+			banner !== void 0 && /* @__PURE__ */ jsx(View, {
+				style: styles.banner,
+				children: banner
+			})
+		]
+	});
+}
+/** 섹션을 일정 간격으로 쌓는 유틸 (구 `ContentLayout`). */
+function Stack({ children, gap = LAYOUT.stackGap, style }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [{
+			flexDirection: "column",
+			gap
+		}, style],
+		children
+	});
+}
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+		width: "100%",
+		flexDirection: "column"
+	},
+	flex: {
+		flex: 1,
+		width: "100%"
+	},
+	header: {
+		width: "100%",
+		minHeight: LAYOUT.header.minHeight,
+		flexDirection: "column",
+		justifyContent: "center"
+	},
+	footer: {
+		width: "100%",
+		paddingHorizontal: LAYOUT.footer.paddingX,
+		paddingTop: LAYOUT.footer.paddingY
+	},
+	banner: { width: "100%" }
+});
+//#endregion
+export { ScreenLayout, Stack };
+
+//# sourceMappingURL=ScreenLayout.mjs.map

package/dist/native/ScreenLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenLayout.mjs","names":[],"sources":["../../src/native/ScreenLayout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { LAYOUT } from '../tokens.js'\nimport type { ScreenLayoutBaseProps } from '../types.js'\n\nexport interface ScreenLayoutProps extends ScreenLayoutBaseProps {\n  style?: StyleProp<ViewStyle>\n  /** 본문 스크롤을 끄고 싶을 때 (기본 true). */\n  scrollable?: boolean\n}\n\n/**\n * 스크롤형 화면 골격 (RN) — 웹의 `ScreenLayout` 과 같은 prop 계약.\n *\n * 상단 safe-area 는 이 레이아웃이 직접 padding 으로 처리한다. `SafeAreaView` 를 쓰지 않는\n * 이유는 하단 inset 을 `footer` 유무에 따라 다르게 줘야 하기 때문이다.\n *\n * NativeWind 없이 `StyleSheet` 만 쓰므로 NativeWind 를 설정하지 않은 앱\n * (openiot-203-app · 203-karking-guest-app)에서도 그대로 동작한다.\n */\nexport function ScreenLayout({\n  header,\n  children,\n  footer,\n  banner,\n  safeBottom = true,\n  scrollable = true,\n  style,\n}: ScreenLayoutProps) {\n  const insets = useSafeAreaInsets()\n\n  const contentPadding = {\n    paddingHorizontal: LAYOUT.content.paddingX,\n    paddingTop: LAYOUT.content.paddingTop,\n    paddingBottom:\n      footer === undefined && safeBottom\n        ? LAYOUT.content.paddingBottom + insets.bottom\n        : LAYOUT.content.paddingBottom,\n    gap: LAYOUT.content.gap,\n  }\n\n  return (\n    <View style={[styles.root, { paddingTop: insets.top }, style]}>\n      {header !== undefined && <View style={styles.header}>{header}</View>}\n\n      {scrollable ? (\n        <ScrollView\n          style={styles.flex}\n          contentContainerStyle={contentPadding}\n          showsVerticalScrollIndicator={false}\n        >\n          {children}\n        </ScrollView>\n      ) : (\n        <View style={[styles.flex, contentPadding]}>{children}</View>\n      )}\n\n      {footer !== undefined && (\n        <View\n          style={[\n            styles.footer,\n            {\n              paddingBottom: safeBottom\n                ? LAYOUT.footer.paddingY + insets.bottom\n                : LAYOUT.footer.paddingY,\n            },\n          ]}\n        >\n          {footer}\n        </View>\n      )}\n\n      {banner !== undefined && <View style={styles.banner}>{banner}</View>}\n    </View>\n  )\n}\n\nexport interface StackProps {\n  children: ReactNode\n  gap?: number\n  style?: StyleProp<ViewStyle>\n}\n\n/** 섹션을 일정 간격으로 쌓는 유틸 (구 `ContentLayout`). */\nexport function Stack({ children, gap = LAYOUT.stackGap, style }: StackProps) {\n  return <View style={[{ flexDirection: 'column', gap }, style]}>{children}</View>\n}\n\nconst styles = StyleSheet.create({\n  root: { flex: 1, width: '100%', flexDirection: 'column' },\n  flex: { flex: 1, width: '100%' },\n  header: {\n    width: '100%',\n    minHeight: LAYOUT.header.minHeight,\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  footer: {\n    width: '100%',\n    paddingHorizontal: LAYOUT.footer.paddingX,\n    paddingTop: LAYOUT.footer.paddingY,\n  },\n  banner: { width: '100%' },\n})\n"],"mappings":";;;;;;;;;;;;;;AAqBA,SAAgB,aAAa,EAC3B,QACA,UACA,QACA,QACA,aAAa,MACb,aAAa,MACb,SACoB;CACpB,MAAM,SAAS,kBAAkB;CAEjC,MAAM,iBAAiB;EACrB,mBAAmB,OAAO,QAAQ;EAClC,YAAY,OAAO,QAAQ;EAC3B,eACE,WAAW,KAAA,KAAa,aACpB,OAAO,QAAQ,gBAAgB,OAAO,SACtC,OAAO,QAAQ;EACrB,KAAK,OAAO,QAAQ;CACtB;CAEA,OACE,qBAAC,MAAD;EAAM,OAAO;GAAC,OAAO;GAAM,EAAE,YAAY,OAAO,IAAI;GAAG;EAAK;YAA5D;GACG,WAAW,KAAA,KAAa,oBAAC,MAAD;IAAM,OAAO,OAAO;cAAS;GAAa,CAAA;GAElE,aACC,oBAAC,YAAD;IACE,OAAO,OAAO;IACd,uBAAuB;IACvB,8BAA8B;IAE7B;GACS,CAAA,IAEZ,oBAAC,MAAD;IAAM,OAAO,CAAC,OAAO,MAAM,cAAc;IAAI;GAAe,CAAA;GAG7D,WAAW,KAAA,KACV,oBAAC,MAAD;IACE,OAAO,CACL,OAAO,QACP,EACE,eAAe,aACX,OAAO,OAAO,WAAW,OAAO,SAChC,OAAO,OAAO,SACpB,CACF;cAEC;GACG,CAAA;GAGP,WAAW,KAAA,KAAa,oBAAC,MAAD;IAAM,OAAO,OAAO;cAAS;GAAa,CAAA;EAC/D;;AAEV;;AASA,SAAgB,MAAM,EAAE,UAAU,MAAM,OAAO,UAAU,SAAqB;CAC5E,OAAO,oBAAC,MAAD;EAAM,OAAO,CAAC;GAAE,eAAe;GAAU;EAAI,GAAG,KAAK;EAAI;CAAe,CAAA;AACjF;AAEA,MAAM,SAAS,WAAW,OAAO;CAC/B,MAAM;EAAE,MAAM;EAAG,OAAO;EAAQ,eAAe;CAAS;CACxD,MAAM;EAAE,MAAM;EAAG,OAAO;CAAO;CAC/B,QAAQ;EACN,OAAO;EACP,WAAW,OAAO,OAAO;EACzB,eAAe;EACf,gBAAgB;CAClB;CACA,QAAQ;EACN,OAAO;EACP,mBAAmB,OAAO,OAAO;EACjC,YAAY,OAAO,OAAO;CAC5B;CACA,QAAQ,EAAE,OAAO,OAAO;AAC1B,CAAC"}

package/dist/native/overlays.d.mts

@@ -0,0 +1,43 @@
+import { BottomSheetBaseProps, DialogBaseProps } from "../types.mjs";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/native/overlays.d.ts
+interface BottomSheetProps extends BottomSheetBaseProps {
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * 아래에서 올라오는 시트 (RN) — 웹의 `BottomSheet` 와 같은 prop 계약.
+ *
+ * 안드로이드 하드웨어 back 은 `onRequestClose` 로 처리된다.
+ */
+declare function BottomSheet({
+  open,
+  onOpenChange,
+  dismissible,
+  label,
+  children,
+  style
+}: BottomSheetProps): import("react").JSX.Element;
+interface DialogProps extends DialogBaseProps {
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * 중앙 다이얼로그 (RN) — 웹의 `Dialog` 와 같은 prop 계약.
+ *
+ * 기본 버튼은 구조만 제공한다. 색·타이포는 앱의 버튼 컴포넌트를 `children` 으로 넣어
+ * 맞추는 것을 권장한다.
+ */
+declare function Dialog({
+  open,
+  onOpenChange,
+  dismissible,
+  title,
+  description,
+  cancel,
+  confirm,
+  children,
+  style
+}: DialogProps): import("react").JSX.Element;
+//#endregion
+export { BottomSheet, BottomSheetProps, Dialog, DialogProps };
+//# sourceMappingURL=overlays.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.d.mts","names":[],"sources":["../../src/native/overlays.tsx"],"mappings":";;;;UA2BiB,gBAAA,SAAyB,oBAAA;EACxC,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;iBAQJ,WAAA;EACd,IAAA;EACA,YAAA;EACA,WAAA;EACA,KAAA;EACA,QAAA;EACA;AAAA,GACC,gBAAA,mBAAgB,GAAA,CAAA,OAAA;AAAA,UAgCF,WAAA,SAAoB,eAAA;EACnC,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;AAhDS;AAQ7B;;iBAiDgB,MAAA;EACd,IAAA;EACA,YAAA;EACA,WAAA;EACA,KAAA;EACA,WAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA;AAAA,GACC,WAAA,mBAAW,GAAA,CAAA,OAAA"}