@tamagui/demos 1.110.4 → 1.111.0

package/dist/esm/TabsAdvancedDemo.native.mjs

@@ -0,0 +1,351 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from "tamagui";
+var demos = ["background", "underline"],
+  demosTitle = {
+    background: "Background Indicator",
+    underline: "Underline Indicator"
+  },
+  TabsAdvancedDemo = function () {
+    var [demoIndex, setDemoIndex] = React.useState(0),
+      demo = demos[demoIndex];
+    return /* @__PURE__ */_jsxs(_Fragment, {
+      children: [demo === "underline" ? /* @__PURE__ */_jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */_jsx(TabsAdvancedBackground, {}), /* @__PURE__ */_jsx(XStack, {
+        alignItems: "center",
+        gap: "$4",
+        position: "absolute",
+        bottom: "$3",
+        left: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */_jsx(Button, {
+          size: "$2",
+          onPress: function () {
+            return setDemoIndex(function (x) {
+              return (x + 1) % demos.length;
+            });
+          },
+          children: demosTitle[demo]
+        })
+      })]
+    });
+  },
+  TabsAdvancedBackground = function () {
+    var [tabState, setTabState] = React.useState(
+      /**
+      * Layout of the Tab user might intend to select (hovering / focusing)
+      */
+      /**
+      * Layout of the Tab user selected
+      */
+      /**
+      * Used to get the direction of activation for animating the active indicator
+      */
+      {
+        activeAt: null,
+        currentTab: "tab1",
+        intentAt: null,
+        prevActiveAt: null
+      }),
+      setCurrentTab = function (currentTab2) {
+        return setTabState({
+          ...tabState,
+          currentTab: currentTab2
+        });
+      },
+      setIntentIndicator = function (intentAt2) {
+        return setTabState({
+          ...tabState,
+          intentAt: intentAt2
+        });
+      },
+      setActiveIndicator = function (activeAt2) {
+        return setTabState({
+          ...tabState,
+          prevActiveAt: tabState.activeAt,
+          activeAt: activeAt2
+        });
+      },
+      {
+        activeAt,
+        intentAt,
+        prevActiveAt,
+        currentTab
+      } = tabState,
+      direction = function () {
+        return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
+      }(),
+      handleOnInteraction = function (type, layout) {
+        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
+      };
+    return /* @__PURE__ */_jsxs(Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      padding: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      position: "relative",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        children: [/* @__PURE__ */_jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            borderRadius: "$4",
+            width: intentAt.width,
+            height: intentAt.height,
+            x: intentAt.x,
+            y: intentAt.y
+          })
+        }), /* @__PURE__ */_jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            borderRadius: "$4",
+            theme: "active",
+            width: activeAt.width,
+            height: activeAt.height,
+            x: activeAt.x,
+            y: activeAt.y
+          })
+        }), /* @__PURE__ */_jsxs(Tabs.List, {
+          disablePassBorderRadius: !0,
+          loop: !1,
+          "aria-label": "Manage your account",
+          gap: "$2",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */_jsx(AnimatePresence, {
+        exitBeforeEnter: !0,
+        custom: {
+          direction
+        },
+        initial: !1,
+        children: /* @__PURE__ */_jsx(AnimatedYStack, {
+          children: /* @__PURE__ */_jsx(Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justifyContent: "center",
+            children: /* @__PURE__ */_jsx(H5, {
+              textAlign: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsAdvancedUnderline = function () {
+    var [tabState, setTabState] = React.useState(
+      /**
+      * Layout of the Tab user might intend to select (hovering / focusing)
+      */
+      /**
+      * Layout of the Tab user selected
+      */
+      /**
+      * Used to get the direction of activation for animating the active indicator
+      */
+      {
+        activeAt: null,
+        currentTab: "tab1",
+        intentAt: null,
+        prevActiveAt: null
+      }),
+      setCurrentTab = function (currentTab2) {
+        return setTabState({
+          ...tabState,
+          currentTab: currentTab2
+        });
+      },
+      setIntentIndicator = function (intentAt2) {
+        return setTabState({
+          ...tabState,
+          intentAt: intentAt2
+        });
+      },
+      setActiveIndicator = function (activeAt2) {
+        return setTabState({
+          ...tabState,
+          prevActiveAt: tabState.activeAt,
+          activeAt: activeAt2
+        });
+      },
+      {
+        activeAt,
+        intentAt,
+        prevActiveAt,
+        currentTab
+      } = tabState,
+      direction = function () {
+        return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
+      }(),
+      handleOnInteraction = function (type, layout) {
+        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
+      };
+    return /* @__PURE__ */_jsxs(Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        children: [/* @__PURE__ */_jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            width: intentAt.width,
+            height: "$0.5",
+            x: intentAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */_jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            theme: "active",
+            active: !0,
+            width: activeAt.width,
+            height: "$0.5",
+            x: activeAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */_jsxs(Tabs.List, {
+          disablePassBorderRadius: !0,
+          loop: !1,
+          "aria-label": "Manage your account",
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          paddingBottom: "$1.5",
+          borderColor: "$color3",
+          borderBottomWidth: "$0.5",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */_jsx(AnimatePresence, {
+        exitBeforeEnter: !0,
+        custom: {
+          direction
+        },
+        initial: !1,
+        children: /* @__PURE__ */_jsx(AnimatedYStack, {
+          children: /* @__PURE__ */_jsx(Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justifyContent: "center",
+            children: /* @__PURE__ */_jsx(H5, {
+              textAlign: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsRovingIndicator = function (param) {
+    var {
+      active,
+      ...props
+    } = param;
+    return /* @__PURE__ */_jsx(YStack, {
+      position: "absolute",
+      backgroundColor: "$color5",
+      opacity: 0.7,
+      animation: "100ms",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      },
+      ...(active && {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }),
+      ...props
+    });
+  },
+  AnimatedYStack = styled(YStack, {
+    flex: 1,
+    x: 0,
+    opacity: 1,
+    animation: "100ms",
+    variants: {
+      // 1 = right, 0 = nowhere, -1 = left
+      direction: {
+        ":number": function (direction) {
+          return {
+            enterStyle: {
+              x: direction > 0 ? -25 : 25,
+              opacity: 0
+            },
+            exitStyle: {
+              zIndex: 0,
+              x: direction < 0 ? -25 : 25,
+              opacity: 0
+            }
+          };
+        }
+      }
+    }
+  });
+export { TabsAdvancedDemo };
+//# sourceMappingURL=TabsAdvancedDemo.native.mjs.map

package/dist/esm/TabsAdvancedDemo.native.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","AnimatePresence","Button","H5","SizableText","Tabs","XStack","YStack","styled","demos","demosTitle","background","underline","TabsAdvancedDemo","demoIndex","setDemoIndex","useState","demo","children","TabsAdvancedUnderline","TabsAdvancedBackground","alignItems","gap","position","bottom","left","$xxs","display","size","onPress","x","length","tabState","setTabState","activeAt","currentTab","intentAt","prevActiveAt","setCurrentTab","currentTab2","setIntentIndicator","intentAt2","setActiveIndicator","activeAt2","direction","handleOnInteraction","type","layout","value","onValueChange","orientation","padding","height","flexDirection","activationMode","backgroundColor","borderRadius","TabsRovingIndicator","width","y","theme","List","disablePassBorderRadius","loop","Tab","unstyled","paddingVertical","paddingHorizontal","onInteraction","exitBeforeEnter","custom","initial","AnimatedYStack","Content","forceMount","flex","justifyContent","textAlign","active","borderBottomLeftRadius","borderBottomRightRadius","paddingBottom","borderColor","borderBottomWidth"],"sources":["../../src/TabsAdvancedDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/TabsDemo.native.js

@@ -1,81 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb } from "tamagui";
-function _array_like_to_array(arr, len) {
-  (len == null || len > arr.length) && (len = arr.length);
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _array_with_holes(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _define_property(obj, key, value) {
-  return key in obj ? Object.defineProperty(obj, key, {
-    value,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : obj[key] = value, obj;
-}
-function _iterable_to_array_limit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i != null) {
-    var _arr = [], _n = !0, _d = !1, _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
-        ;
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        !_n && _i.return != null && _i.return();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-function _non_iterable_rest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
-    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-    }))), ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-  }), target;
-}
-function _sliced_to_array(arr, i) {
-  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-  if (o) {
-    if (typeof o == "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-  }
-}
 var demos = [
   "horizontal",
   "vertical"
@@ -84,14 +9,14 @@ var demos = [
   vertical: "Vertical"
 };
 function TabsDemo() {
-  var _React_useState = _sliced_to_array(React.useState(0), 2), demoIndex = _React_useState[0], setDemoIndex = _React_useState[1], demo = demos[demoIndex];
+  var [demoIndex, setDemoIndex] = React.useState(0), demo = demos[demoIndex];
   return (
     // web only fix for position relative
-    /* @__PURE__ */ _jsxs(YStack, _object_spread_props(_object_spread({
-      paddingHorizontal: "$4"
-    }, isWeb && {
-      position: "unset"
-    }), {
+    /* @__PURE__ */ _jsxs(YStack, {
+      paddingHorizontal: "$4",
+      ...isWeb && {
+        position: "unset"
+      },
       children: [
         demo === "horizontal" ? /* @__PURE__ */ _jsx(HorizontalTabs, {}) : /* @__PURE__ */ _jsx(VerticalTabs, {}),
         /* @__PURE__ */ _jsx(XStack, {
@@ -114,7 +39,7 @@ function TabsDemo() {
           })
         })
       ]
-    }))
+    })
   );
 }
 var HorizontalTabs = function() {
@@ -246,7 +171,7 @@ var HorizontalTabs = function() {
     ]
   });
 }, TabsContent = function(props) {
-  return /* @__PURE__ */ _jsx(Tabs.Content, _object_spread_props(_object_spread({
+  return /* @__PURE__ */ _jsx(Tabs.Content, {
     backgroundColor: "$background",
     padding: "$2",
     alignItems: "center",
@@ -256,10 +181,10 @@ var HorizontalTabs = function() {
     borderRadius: "$2",
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
-    borderWidth: "$2"
-  }, props), {
+    borderWidth: "$2",
+    ...props,
     children: props.children
-  }), "tab3");
+  }, "tab3");
 };
 export {
   TabsDemo

package/dist/esm/TabsDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/code/demos/src/TabsDemo.tsx"],
-  "mappings": "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",
-  "names": ["React", "Button", "H5", "Separator", "SizableText", "Tabs", "XStack", "YStack", "isWeb", "demos", "demosTitle", "horizontal", "vertical", "TabsDemo", "useState", "demoIndex", "setDemoIndex", "demo", "paddingHorizontal", "position", "HorizontalTabs", "VerticalTabs", "alignItems", "space", "bottom", "left", "$xxs", "display", "size", "onPress", "x", "length", "defaultValue", "orientation", "flexDirection", "width", "height", "borderRadius", "borderWidth", "overflow", "borderColor", "List", "separator", "disablePassBorderRadius", "aria-label", "Tab", "flex", "value", "fontFamily", "TabsContent", "textAlign", "props", "Content", "backgroundColor", "padding", "justifyContent", "borderTopLeftRadius", "borderTopRightRadius", "children"]
+  "mappings": "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",
+  "names": ["React", "Button", "H5", "Separator", "SizableText", "Tabs", "XStack", "YStack", "isWeb", "demos", "demosTitle", "horizontal", "vertical", "TabsDemo", "demoIndex", "setDemoIndex", "useState", "demo", "paddingHorizontal", "position", "HorizontalTabs", "VerticalTabs", "alignItems", "space", "bottom", "left", "$xxs", "display", "size", "onPress", "x", "length", "defaultValue", "orientation", "flexDirection", "width", "height", "borderRadius", "borderWidth", "overflow", "borderColor", "List", "separator", "disablePassBorderRadius", "aria-label", "Tab", "flex", "value", "fontFamily", "TabsContent", "textAlign", "props", "Content", "backgroundColor", "padding", "justifyContent", "borderTopLeftRadius", "borderTopRightRadius", "children"]
 }

package/dist/esm/TabsDemo.native.mjs

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb } from "tamagui";
+var demos = ["horizontal", "vertical"],
+  demosTitle = {
+    horizontal: "Horizontal",
+    vertical: "Vertical"
+  };
+function TabsDemo() {
+  var [demoIndex, setDemoIndex] = React.useState(0),
+    demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */
+    _jsxs(YStack, {
+      paddingHorizontal: "$4",
+      ...(isWeb && {
+        position: "unset"
+      }),
+      children: [demo === "horizontal" ? /* @__PURE__ */_jsx(HorizontalTabs, {}) : /* @__PURE__ */_jsx(VerticalTabs, {}), /* @__PURE__ */_jsx(XStack, {
+        alignItems: "center",
+        space: !0,
+        position: "absolute",
+        bottom: "$3",
+        left: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */_jsx(Button, {
+          size: "$2",
+          onPress: function () {
+            return setDemoIndex(function (x) {
+              return (x + 1) % demos.length;
+            });
+          },
+          children: demosTitle[demo]
+        })
+      })]
+    })
+  );
+}
+var HorizontalTabs = function () {
+    return /* @__PURE__ */_jsxs(Tabs, {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      width: 400,
+      height: 150,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */_jsxs(Tabs.List, {
+        separator: /* @__PURE__ */_jsx(Separator, {
+          vertical: !0
+        }),
+        disablePassBorderRadius: "bottom",
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+          flex: 1,
+          value: "tab1",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            fontFamily: "$body",
+            children: "Profile"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          flex: 1,
+          value: "tab2",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            fontFamily: "$body",
+            children: "Connections"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          flex: 1,
+          value: "tab3",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            fontFamily: "$body",
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */_jsx(H5, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */_jsx(H5, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */_jsx(H5, {
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  VerticalTabs = function () {
+    return /* @__PURE__ */_jsxs(Tabs, {
+      defaultValue: "tab1",
+      flexDirection: "row",
+      orientation: "vertical",
+      width: 400,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */_jsxs(Tabs.List, {
+        disablePassBorderRadius: "end",
+        "aria-label": "Manage your account",
+        separator: /* @__PURE__ */_jsx(Separator, {}),
+        children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+          value: "tab1",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            children: "Profile"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          value: "tab2",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            children: "Connections"
+          })
+        }), /* @__PURE__ */_jsx(Tabs.Tab, {
+          value: "tab3",
+          children: /* @__PURE__ */_jsx(SizableText, {
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */_jsx(Separator, {
+        vertical: !0
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */_jsx(H5, {
+          textAlign: "center",
+          children: "Profile"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */_jsx(H5, {
+          textAlign: "center",
+          children: "Connections"
+        })
+      }), /* @__PURE__ */_jsx(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */_jsx(H5, {
+          textAlign: "center",
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  TabsContent = function (props) {
+    return /* @__PURE__ */_jsx(Tabs.Content, {
+      backgroundColor: "$background",
+      padding: "$2",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      borderColor: "$background",
+      borderRadius: "$2",
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderWidth: "$2",
+      ...props,
+      children: props.children
+    }, "tab3");
+  };
+export { TabsDemo };
+//# sourceMappingURL=TabsDemo.native.mjs.map