@apps-in-toss/framework 2.10.4 → 2.10.6

package/dist/index.cjs

@@ -1215,24 +1215,30 @@ var import_tds_react_native9 = require("@toss/tds-react-native");
 var import_react15 = require("react");
 var import_react_native20 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function TopNavigation({ left, center, right }) {
+function TopNavigation(props) {
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
+  const transparent = parsedNavigationBar?.transparentBackground ?? false;
+  const theme = parsedNavigationBar?.theme ?? "light";
+  if (transparent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopTransparentNavigation, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopDefaultNavigation, { theme, ...props });
+}
+function TopDefaultNavigation({ left, center, right, theme }) {
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const navigation = (0, import_react_native19.useNavigation)();
   (0, import_react15.useEffect)(() => {
-    const { navigationBar } = getAppsInTossGlobals();
-    const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
-    const transparent = parsedNavigationBar?.transparentBackground ?? false;
-    const theme = parsedNavigationBar?.theme ?? "light";
     navigation.setOptions({
-      headerTransparent: transparent,
+      headerShown: true,
+      headerTransparent: false,
       header: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         import_react_native20.View,
         {
           style: {
             width: "100%",
-            backgroundColor: transparent ? void 0 : theme === "light" ? import_tds_react_native9.colors.lightThemeBackground : import_tds_react_native9.colors.darkThemeBackground
+            backgroundColor: theme === "light" ? import_tds_react_native9.colors.lightThemeBackground : import_tds_react_native9.colors.darkThemeBackground
           },
-          pointerEvents: "box-none",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native20.View, { style: { width: "100%", height: insets.top } }),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -1278,9 +1284,60 @@ function TopNavigation({ left, center, right }) {
         }
       )
     });
-  }, [navigation, insets, left, center, right]);
+  }, [navigation, insets, left, center, right, theme]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
 }
+function TopTransparentNavigation({ left, center, right }) {
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const navigation = (0, import_react_native19.useNavigation)();
+  (0, import_react15.useEffect)(() => {
+    navigation.setOptions({
+      headerShown: false,
+      header: () => null
+    });
+  }, [navigation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react_native20.View,
+    {
+      style: {
+        position: "absolute",
+        top: insets.top,
+        left: insets.left,
+        right: insets.right,
+        height: 44,
+        zIndex: 1,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      pointerEvents: "box-none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native20.View, { children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native20.View,
+          {
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            pointerEvents: "box-none",
+            children: center
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native20.View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: right
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/NavigationBar/TopNavigation/BackButton.tsx
 var import_react_native_svg = require("@granite-js/native/react-native-svg");
@@ -3273,7 +3330,7 @@ function resolveTossAppBundleId(os) {
 var package_default = {
   name: "@apps-in-toss/framework",
   type: "module",
-  version: "2.10.4",
+  version: "2.10.6",
   description: "The framework for Apps In Toss",
   scripts: {
     typecheck: "tsc --noEmit",

package/dist/index.js

@@ -1178,24 +1178,30 @@ import { colors } from "@toss/tds-react-native";
 import { useEffect as useEffect6 } from "react";
 import { View as View3 } from "react-native";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-function TopNavigation({ left, center, right }) {
+function TopNavigation(props) {
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
+  const transparent = parsedNavigationBar?.transparentBackground ?? false;
+  const theme = parsedNavigationBar?.theme ?? "light";
+  if (transparent) {
+    return /* @__PURE__ */ jsx10(TopTransparentNavigation, { ...props });
+  }
+  return /* @__PURE__ */ jsx10(TopDefaultNavigation, { theme, ...props });
+}
+function TopDefaultNavigation({ left, center, right, theme }) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation2();
   useEffect6(() => {
-    const { navigationBar } = getAppsInTossGlobals();
-    const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
-    const transparent = parsedNavigationBar?.transparentBackground ?? false;
-    const theme = parsedNavigationBar?.theme ?? "light";
     navigation.setOptions({
-      headerTransparent: transparent,
+      headerShown: true,
+      headerTransparent: false,
       header: () => /* @__PURE__ */ jsxs3(
         View3,
         {
           style: {
             width: "100%",
-            backgroundColor: transparent ? void 0 : theme === "light" ? colors.lightThemeBackground : colors.darkThemeBackground
+            backgroundColor: theme === "light" ? colors.lightThemeBackground : colors.darkThemeBackground
           },
-          pointerEvents: "box-none",
           children: [
             /* @__PURE__ */ jsx10(View3, { style: { width: "100%", height: insets.top } }),
             /* @__PURE__ */ jsxs3(
@@ -1241,9 +1247,60 @@ function TopNavigation({ left, center, right }) {
         }
       )
     });
-  }, [navigation, insets, left, center, right]);
+  }, [navigation, insets, left, center, right, theme]);
   return /* @__PURE__ */ jsx10(Fragment4, {});
 }
+function TopTransparentNavigation({ left, center, right }) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation2();
+  useEffect6(() => {
+    navigation.setOptions({
+      headerShown: false,
+      header: () => null
+    });
+  }, [navigation]);
+  return /* @__PURE__ */ jsxs3(
+    View3,
+    {
+      style: {
+        position: "absolute",
+        top: insets.top,
+        left: insets.left,
+        right: insets.right,
+        height: 44,
+        zIndex: 1,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      pointerEvents: "box-none",
+      children: [
+        /* @__PURE__ */ jsx10(View3, { children: left }),
+        /* @__PURE__ */ jsx10(
+          View3,
+          {
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            pointerEvents: "box-none",
+            children: center
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          View3,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: right
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/NavigationBar/TopNavigation/BackButton.tsx
 import { SvgXml } from "@granite-js/native/react-native-svg";
@@ -3265,7 +3322,7 @@ function resolveTossAppBundleId(os) {
 var package_default = {
   name: "@apps-in-toss/framework",
   type: "module",
-  version: "2.10.4",
+  version: "2.10.6",
   description: "The framework for Apps In Toss",
   scripts: {
     typecheck: "tsc --noEmit",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "2.10.4",
+  "version": "2.10.6",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -55,12 +55,12 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/analytics": "2.10.4",
-    "@apps-in-toss/cli": "2.10.4",
-    "@apps-in-toss/native-modules": "2.10.4",
-    "@apps-in-toss/plugins": "2.10.4",
-    "@apps-in-toss/types": "2.10.4",
-    "@apps-in-toss/user-scripts": "^2.10.4",
+    "@apps-in-toss/analytics": "2.10.6",
+    "@apps-in-toss/cli": "2.10.6",
+    "@apps-in-toss/native-modules": "2.10.6",
+    "@apps-in-toss/plugins": "2.10.6",
+    "@apps-in-toss/types": "2.10.6",
+    "@apps-in-toss/user-scripts": "^2.10.6",
     "es-hangul": "^2.3.2"
   },
   "devDependencies": {
@@ -71,7 +71,7 @@
     "@granite-js/plugin-core": "1.0.20",
     "@granite-js/react-native": "1.0.20",
     "@granite-js/utils": "1.0.20",
-    "@toss/tds-react-native": "2.0.3",
+    "@toss/tds-react-native": "2.0.4",
     "@types/kill-port": "2.0.1",
     "@types/react": "19.2.3",
     "brick-module": "0.5.2",