@hanzogui/demos 8.3.0 → 8.3.2

package/dist/cjs/TabsAdvancedDemo.native.js

@@ -1,404 +0,0 @@
-"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(
-// 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
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var TabsAdvancedDemo_exports = {};
-__export(TabsAdvancedDemo_exports, {
-  TabsAdvancedDemo: () => TabsAdvancedDemo
-});
-module.exports = __toCommonJS(TabsAdvancedDemo_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"), 1);
-var import_gui = require("@hanzo/gui");
-var demos = ["background", "underline"];
-var demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-};
-var TabsAdvancedDemo = function () {
-  var [demoIndex, setDemoIndex] = import_react.default.useState(0);
-  var 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]
-      })
-    })]
-  });
-};
-var 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
-  });
-  var setCurrentTab = function (currentTab2) {
-    return setTabState({
-      ...tabState,
-      currentTab: currentTab2
-    });
-  };
-  var setIntentIndicator = function (intentAt2) {
-    return setTabState({
-      ...tabState,
-      intentAt: intentAt2
-    });
-  };
-  var setActiveIndicator = function (activeAt2) {
-    return setTabState({
-      ...tabState,
-      prevActiveAt: tabState.activeAt,
-      activeAt: activeAt2
-    });
-  };
-  var {
-    activeAt,
-    intentAt,
-    prevActiveAt,
-    currentTab
-  } = tabState;
-  var direction = function () {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  }();
-  var handleOnInteraction = function (type, layout) {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      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: false,
-        "aria-label": "Manage your account",
-        gap: "$2",
-        backgroundColor: "transparent",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
-          unstyled: true,
-          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: true,
-          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: true,
-          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: true,
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
-};
-var 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
-  });
-  var setCurrentTab = function (currentTab2) {
-    return setTabState({
-      ...tabState,
-      currentTab: currentTab2
-    });
-  };
-  var setIntentIndicator = function (intentAt2) {
-    return setTabState({
-      ...tabState,
-      intentAt: intentAt2
-    });
-  };
-  var setActiveIndicator = function (activeAt2) {
-    return setTabState({
-      ...tabState,
-      prevActiveAt: tabState.activeAt,
-      activeAt: activeAt2
-    });
-  };
-  var {
-    activeAt,
-    intentAt,
-    prevActiveAt,
-    currentTab
-  } = tabState;
-  var direction = function () {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  }();
-  var handleOnInteraction = function (type, layout) {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      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: true,
-          width: activeAt.width,
-          height: "$0.5",
-          x: activeAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Tabs.List, {
-        loop: false,
-        "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: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Profile"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Connections"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Notifications"
-          })
-        })]
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
-      mode: "wait",
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          flexBasis: "auto",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
-};
-var 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: "$color5",
-      opacity: 0.6
-    }),
-    ...props
-  });
-};
-var 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

@@ -1 +0,0 @@
-{"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","paddingHorizontal","onInteraction","SizableText","exitBeforeEnter","custom","initial","AnimatedYStack","Content","forceMount","flex","justify","H5","text","active","borderBottomLeftRadius","borderBottomRightRadius","paddingBottom","borderColor","borderBottomWidth","select","cursor"],"sources":["../../src/TabsAdvancedDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/TabsDemo.cjs

@@ -1,220 +0,0 @@
-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(
-// 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
-}) : 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_react = __toESM(require("react"), 1);
-var import_gui = require("@hanzo/gui");
-var import_jsx_runtime = require("react/jsx-runtime");
-const demos = ["horizontal", "vertical"];
-const demosTitle = {
-  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_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: true,
-          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: true,
-          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: true,
-          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"
-      })
-    })]
-  });
-};
-const VerticalTabs = () => {
-  return /* @__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: true
-    }), /* @__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"
-      })
-    })]
-  });
-};
-const TabsContent = props => {
-  return /* @__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");
-};