@hanzogui/demos 2.0.0

package/dist/cjs/TabsAdvancedDemo.native.js

@@ -0,0 +1,388 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__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: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var TabsAdvancedDemo_exports = {};
+__export(TabsAdvancedDemo_exports, {
+  TabsAdvancedDemo: () => TabsAdvancedDemo
+});
+module.exports = __toCommonJS(TabsAdvancedDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  demos = ["background", "underline"],
+  demosTitle = {
+    background: "Background Indicator",
+    underline: "Underline Indicator"
+  },
+  TabsAdvancedDemo = function () {
+    var [demoIndex, setDemoIndex] = import_react.default.useState(0),
+      demo = demos[demoIndex];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [demo === "underline" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+        items: "center",
+        gap: "$4",
+        position: "absolute",
+        b: "$3",
+        l: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$2",
+          onPress: function () {
+            return setDemoIndex(function (x) {
+              return (x + 1) % demos.length;
+            });
+          },
+          children: demosTitle[demo]
+        })
+      })]
+    });
+  },
+  TabsAdvancedBackground = function () {
+    var [tabState, setTabState] = import_react.default.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__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      p: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      bg: "$background",
+      rounded: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+        children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+          rounded: "$4",
+          width: intentAt.width,
+          height: intentAt.height,
+          x: intentAt.x,
+          y: intentAt.y
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+        children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+          rounded: "$4",
+          theme: "accent",
+          width: activeAt.width,
+          height: activeAt.height,
+          x: activeAt.x,
+          y: activeAt.y
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        position: "relative",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs.List, {
+          loop: !1,
+          "aria-label": "Manage your account",
+          gap: "$2",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+        exitBeforeEnter: !0,
+        custom: {
+          direction
+        },
+        initial: !1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justify: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+              text: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsAdvancedUnderline = function () {
+    var [tabState, setTabState] = import_react.default.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__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      bg: "$background",
+      rounded: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        position: "relative",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+          children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+            width: intentAt.width,
+            height: "$0.5",
+            x: intentAt.x,
+            b: 0
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+          children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+            theme: "accent",
+            active: !0,
+            width: activeAt.width,
+            height: "$0.5",
+            x: activeAt.x,
+            b: 0
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs.List, {
+          loop: !1,
+          "aria-label": "Manage your account",
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          paddingBottom: "$1.5",
+          borderColor: "$color3",
+          borderBottomWidth: "$0.5",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+        exitBeforeEnter: !0,
+        custom: {
+          direction
+        },
+        initial: !1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justify: "center",
+            flexBasis: "auto",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+              text: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsRovingIndicator = function (param) {
+    var {
+      active,
+      ...props
+    } = param;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+      position: "absolute",
+      backgroundColor: "$color5",
+      opacity: 0.7,
+      transition: "100ms",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      },
+      ...(active && {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }),
+      ...props
+    });
+  },
+  AnimatedYStack = (0, import_gui.styled)(import_gui.YStack, {
+    flex: 1,
+    x: 0,
+    opacity: 1,
+    transition: "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
+            }
+          };
+        }
+      }
+    }
+  });
+//# sourceMappingURL=TabsAdvancedDemo.native.js.map

package/dist/cjs/TabsAdvancedDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","TabsAdvancedDemo_exports","__export","TabsAdvancedDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_gui","demos","demosTitle","background","underline","demoIndex","setDemoIndex","default","useState","demo","jsxs","Fragment","children","jsx","TabsAdvancedUnderline","TabsAdvancedBackground","XStack","items","gap","position","b","l","$xxs","display","Button","size","onPress","x","length","tabState","setTabState","activeAt","currentTab","intentAt","prevActiveAt","setCurrentTab","currentTab2","setIntentIndicator","intentAt2","setActiveIndicator","activeAt2","direction","handleOnInteraction","type","layout","Tabs","onValueChange","orientation","p","height","flexDirection","activationMode","bg","rounded","AnimatePresence","TabsRovingIndicator","width","y","theme","YStack","List","loop","backgroundColor","Tab","unstyled","paddingVertical","paddingHorizontal","onInteraction","SizableText","exitBeforeEnter","custom","initial","AnimatedYStack","Content","forceMount","flex","justify","H5","text","active","borderBottomLeftRadius","borderBottomRightRadius","paddingBottom","borderColor","borderBottomWidth"],"sources":["../../src/TabsAdvancedDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/TabsDemo.cjs

@@ -0,0 +1,214 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__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: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var TabsDemo_exports = {};
+__export(TabsDemo_exports, {
+  TabsDemo: () => TabsDemo
+});
+module.exports = __toCommonJS(TabsDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const demos = ["horizontal", "vertical"],
+  demosTitle = {
+    horizontal: "Horizontal",
+    vertical: "Vertical"
+  };
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = import_react.default.useState(0),
+    demo = demos[demoIndex];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    px: "$4",
+    ...(import_gui.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_gui.XStack, {
+      items: "center",
+      gap: "$4",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $maxXs: {
+        display: "none"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$2",
+        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
+        children: demosTitle[demo]
+      })
+    })]
+  });
+}
+const HorizontalTabs = () => {
+    const {
+      width
+    } = (0, import_gui.useWindowDimensions)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.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_gui.Tabs.List, {
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab1",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Profile"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab2",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Connections"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab3",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Notifications"
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab1",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab2",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+        value: "tab3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+          children: "Notifications"
+        })
+      })]
+    });
+  },
+  VerticalTabs = () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.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_gui.Tabs.List, {
+      "aria-label": "Manage your account",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+        activeStyle: {
+          backgroundColor: "$color3"
+        },
+        value: "tab1",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+        activeStyle: {
+          backgroundColor: "$color3"
+        },
+        value: "tab2",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
+        activeStyle: {
+          backgroundColor: "$color3"
+        },
+        value: "tab3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
+          children: "Notifications"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+      vertical: !0
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+      value: "tab1",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+        text: "center",
+        children: "Profile"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+      value: "tab2",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+        text: "center",
+        children: "Connections"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsContent, {
+      value: "tab3",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
+        text: "center",
+        children: "Notifications"
+      })
+    })]
+  }),
+  TabsContent = props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.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");