@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/TabsDemo.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,216 +6,192 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TabsDemo_exports = {};
-__export(TabsDemo_exports, {
-  TabsDemo: () => TabsDemo
-});
+__export(TabsDemo_exports, { TabsDemo: () => TabsDemo });
 module.exports = __toCommonJS(TabsDemo_exports);
 var import_react = __toESM(require("react"), 1);
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("react");
 const demos = ["horizontal", "vertical"];
 const demosTitle = {
-  horizontal: "Horizontal",
-  vertical: "Vertical"
+	horizontal: "Horizontal",
+	vertical: "Vertical"
 };
 function TabsDemo() {
-  const [demoIndex, setDemoIndex] = import_react.default.useState(0);
-  const demo = demos[demoIndex];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    px: "$4",
-    ...(import_tamagui.isWeb && {
-      position: "unset"
-    }),
-    children: [demo === "horizontal" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(HorizontalTabs, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(VerticalTabs, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      items: "center",
-      gap: "$4",
-      position: "absolute",
-      b: "$3",
-      l: "$4",
-      $maxXs: {
-        display: "none"
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        size: "$2",
-        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
-        children: demosTitle[demo]
-      })
-    })]
-  });
+	const [demoIndex, setDemoIndex] = import_react.default.useState(0);
+	const demo = demos[demoIndex];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+		px: "4",
+		...import_tamagui.isWeb && { position: "unset" },
+		children: [demo === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HorizontalTabs, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VerticalTabs, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+			items: "center",
+			gap: "4",
+			position: "absolute",
+			b: "3",
+			l: "4",
+			display: "max-xs:none",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+				size: "2",
+				onPress: () => setDemoIndex((x) => (x + 1) % demos.length),
+				children: demosTitle[demo]
+			})
+		})]
+	});
 }
 const HorizontalTabs = () => {
-  const {
-    width
-  } = (0, import_tamagui.useWindowDimensions)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
-    defaultValue: "tab1",
-    orientation: "horizontal",
-    flexDirection: "column",
-    $maxMd: {
-      width: width - 32
-    },
-    width: 400,
-    height: 150,
-    rounded: "$4",
-    borderWidth: "$0.25",
-    borderColor: "$borderColor",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
-      "aria-label": "Manage your account",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        flex: 1,
-        value: "tab1",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-          fontFamily: "$body",
-          text: "center",
-          ellipsis: true,
-          children: "Profile"
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        flex: 1,
-        value: "tab2",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-          fontFamily: "$body",
-          text: "center",
-          ellipsis: true,
-          children: "Connections"
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        flex: 1,
-        value: "tab3",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-          fontFamily: "$body",
-          text: "center",
-          ellipsis: true,
-          children: "Notifications"
-        })
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
-      value: "tab1",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-        children: "Profile"
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
-      value: "tab2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-        children: "Connections"
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
-      value: "tab3",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-        children: "Notifications"
-      })
-    })]
-  });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+		defaultValue: "tab1",
+		orientation: "horizontal",
+		flexDirection: "column",
+		width: "400px max-md:calc(100vw - 32px)",
+		height: 150,
+		rounded: "4",
+		borderWidth: "0-25",
+		borderColor: "border-color",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+				"aria-label": "Manage your account",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab1",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Profile"
+						})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab2",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Connections"
+						})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Notifications"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab1",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Profile" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Connections" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab3",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Notifications" })
+			})
+		]
+	});
 };
 const VerticalTabs = () => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
-    defaultValue: "tab1",
-    flexDirection: "row",
-    orientation: "vertical",
-    width: 400,
-    rounded: "$4",
-    borderWidth: "$0.25",
-    overflow: "hidden",
-    borderColor: "$borderColor",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
-      "aria-label": "Manage your account",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        value: "tab1",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-          children: "Profile"
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        value: "tab2",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-          children: "Connections"
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        value: "tab3",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-          children: "Notifications"
-        })
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-      vertical: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
-      value: "tab1",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-        text: "center",
-        children: "Profile"
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
-      value: "tab2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-        text: "center",
-        children: "Connections"
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
-      value: "tab3",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-        text: "center",
-        children: "Notifications"
-      })
-    })]
-  });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+		defaultValue: "tab1",
+		flexDirection: "row",
+		width: 400,
+		rounded: "4",
+		borderWidth: "0-25",
+		overflow: "hidden",
+		borderColor: "border-color",
+		orientation: "vertical",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+				"aria-label": "Manage your account",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab1",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab2",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" })
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { vertical: true }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab1",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: "Profile"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: "Connections"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab3",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: "Notifications"
+				})
+			})
+		]
+	});
+};
+const TabsContent = (props) => {
+	return /* @__PURE__ */ (0, import_react2.createElement)(import_tamagui.Tabs.Content, {
+		bg: "background",
+		p: "2",
+		items: "center",
+		justify: "center",
+		flex: 1,
+		borderColor: "background",
+		rounded: "2",
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0,
+		borderWidth: "2",
+		...props,
+		key: "tab3"
+	}, props.children);
 };
-const TabsContent = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
-    bg: "$background",
-    p: "$2",
-    items: "center",
-    justify: "center",
-    flex: 1,
-    borderColor: "$background",
-    rounded: "$2",
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderWidth: "$2",
-    ...props,
-    children: props.children
-  }, "tab3");
-};

package/dist/cjs/TabsDemo.native.cjs

@@ -0,0 +1,203 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TabsDemo_exports = {};
+__export(TabsDemo_exports, { TabsDemo: () => TabsDemo });
+module.exports = __toCommonJS(TabsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = __toESM(require("react"), 1);
+var import_tamagui = require("tamagui");
+var demos = ["horizontal", "vertical"];
+var demosTitle = {
+	horizontal: "Horizontal",
+	vertical: "Vertical"
+};
+function TabsDemo() {
+	var [demoIndex, setDemoIndex] = import_react2.default.useState(0);
+	var demo = demos[demoIndex];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+		px: "4",
+		...import_tamagui.isWeb && { position: "unset" },
+		children: [demo === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HorizontalTabs, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VerticalTabs, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+			items: "center",
+			gap: "4",
+			position: "absolute",
+			b: "3",
+			l: "4",
+			display: "max-xs:none",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+				size: "2",
+				onPress: function() {
+					return setDemoIndex(function(x) {
+						return (x + 1) % demos.length;
+					});
+				},
+				children: demosTitle[demo]
+			})
+		})]
+	});
+}
+var HorizontalTabs = function() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+		defaultValue: "tab1",
+		orientation: "horizontal",
+		flexDirection: "column",
+		width: "400px max-md:calc(100vw - 32px)",
+		height: 150,
+		rounded: "4",
+		borderWidth: "0-25",
+		borderColor: "border-color",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+				"aria-label": "Manage your account",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab1",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Profile"
+						})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab2",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Connections"
+						})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Notifications"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab1",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Profile" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Connections" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab3",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Notifications" })
+			})
+		]
+	});
+};
+var VerticalTabs = function() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+		defaultValue: "tab1",
+		flexDirection: "row",
+		width: 400,
+		rounded: "4",
+		borderWidth: "0-25",
+		overflow: "hidden",
+		borderColor: "border-color",
+		orientation: "vertical",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+				"aria-label": "Manage your account",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab1",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab2",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" })
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { vertical: true }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab1",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: "Profile"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: "Connections"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "tab3",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: "Notifications"
+				})
+			})
+		]
+	});
+};
+var TabsContent = function(props) {
+	return /* @__PURE__ */ (0, import_react.createElement)(import_tamagui.Tabs.Content, {
+		bg: "background",
+		p: "2",
+		items: "center",
+		justify: "center",
+		flex: 1,
+		borderColor: "background",
+		rounded: "2",
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0,
+		borderWidth: "2",
+		...props,
+		key: "tab3"
+	}, props.children);
+};