@hanzogui/demos 8.2.1 → 8.3.2

package/dist/cjs/SwitchHeadlessDemo.native.js

@@ -1,112 +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 SwitchHeadlessDemo_exports = {};
-__export(SwitchHeadlessDemo_exports, {
-  SwitchHeadlessDemo: () => SwitchHeadlessDemo
-});
-module.exports = __toCommonJS(SwitchHeadlessDemo_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"), 1);
-var import_switch_headless = require("@hanzogui/switch-headless");
-var import_react_native = require("react-native");
-var import_gui = require("@hanzo/gui");
-function SwitchHeadlessDemo() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
-    width: 200,
-    items: "center",
-    gap: "$3",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-      gap: "$3",
-      items: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
-        htmlFor: "headless",
-        children: "Headless"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadlessSwitch, {
-        defaultChecked: true,
-        id: "headless"
-      })]
-    })
-  });
-}
-var HeadlessSwitch = /* @__PURE__ */import_react.default.forwardRef(function (props, ref) {
-  var [checked, setChecked] = import_react.default.useState(props.defaultChecked || false);
-  var {
-    switchProps,
-    switchRef,
-    bubbleInput
-  } = (0, import_switch_headless.useSwitch)(props, [checked, setChecked], ref);
-  var [animation] = import_react.default.useState(function () {
-    return new import_react_native.Animated.Value(0);
-  });
-  import_react.default.useEffect(function () {
-    import_react_native.Animated.timing(animation, {
-      toValue: checked ? 1 : 0,
-      duration: 100,
-      useNativeDriver: true
-    }).start();
-  }, [checked, animation]);
-  var translateX = import_react.default.useMemo(function () {
-    return animation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 20]
-    });
-  }, [animation]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
-      style: {
-        width: 40,
-        height: 20,
-        borderRadius: 100,
-        backgroundColor: checked ? "lightblue" : "silver"
-      },
-      ref: switchRef,
-      ...switchProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Animated.View, {
-        style: [{
-          backgroundColor: "black",
-          borderRadius: 100,
-          width: 20,
-          height: 20
-        }, {
-          transform: [{
-            translateX
-          }]
-        }]
-      })
-    }), bubbleInput]
-  });
-});
-//# sourceMappingURL=SwitchHeadlessDemo.native.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SwitchHeadlessDemo_exports","__export","SwitchHeadlessDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_switch_headless","import_react_native","import_gui","jsx","YStack","width","items","gap","children","jsxs","XStack","Label","htmlFor","HeadlessSwitch","defaultChecked","id","default","forwardRef","props","ref","checked","setChecked","useState","switchProps","switchRef","bubbleInput","useSwitch","animation","Animated","Value","useEffect","timing","toValue","duration","useNativeDriver","start","translateX","useMemo","interpolate","inputRange","outputRange","Fragment","Pressable","style","height"],"sources":["../../src/SwitchHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,0BAAA;AAAAC,QAAA,CAAAD,0BAAA;EAAAE,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,0BAAA;AAElB,IAAAK,kBAAA,GAAAC,OAA0B;AAG1B,IAAAC,YAAA,GAAAC,OAAoC,CAAAF,OAAA;AACpC,IAAAG,sBAAsC,GAAAH,OAAA;AAKhC,IAAAI,mBAAA,GAAAJ,OAAA;AAHC,IAAAK,UAAS,GAAAL,OAAA,aAAqB;AACnC,SACEJ,mBAAA;EAEI,0BAAAG,kBAAA,CAACO,GAAA,EAAAD,UAAA,CAAAE,MAAM;IACPC,KAAA;IAA6CC,KAEjD;IAEJC,GAAA;IAEAC,QAAM,iBAAiB,IAAAZ,kBAAM,CAAAa,IAAuC,EAAAP,UAAO,CAAAQ,MAAQ;MACjFH,GAAO;MACPD,KAAQ;MACNE,QAAA,GACC,eAAmB,IAAAZ,kBAAA,CAAAO,GAAA,EAAAD,UAAA,CAAAS,KAAA;QACpBC,OAAA;QACFJ,QAAA;MAEM,CAAC,GAEP,eAAM,IAAAZ,kBAAgB,CAAAO,GAAA,EAAAU,cAAA;QACpBC,cAAA;QACEC,EAAA;MACA;IAEF,CAAC;EACH;AAEA;AAAyB,IACvBF,cACE,GAAU,eAAYf,YAAA,CAAAkB,OAAA,CAAAC,UAAA,WAAAC,KAAA,EAAAC,GAAA;EAAA,IACpB,CAAAC,OAAA,EAAAC,UAAiB,IAAAvB,YAAA,CAAAkB,OAAA,CAAAM,QAAA,CAAAJ,KAAA,CAAAJ,cAAA;EAAA,IACjB;IAAAS,WAAa;IAACC,SAAK;IAAAC;EAAA,QAAAzB,sBAAA,CAAA0B,SAAA,EAAAR,KAAA,GACrBE,OAAC,EACHC,UAAU,CACZ,EAAAF,GAAA;EAEA,KAAAQ,SACE,IAAA7B,YAAA,CAAAkB,OAAA,CAAAM,QAAA;IACE,WAAArB,mBAAA,CAAA2B,QAAA,CAAAC,KAAA;EAAA;EAAC/B,YAAA,CAAAkB,OAAA,CAAAc,SAAA;IAAA7B,mBACQ,CAAA2B,QAAA,CAAAG,MAAA,CAAAJ,SAAA;MAAAK,OACL,EAAAZ,OAAO;MAAAa,QACP,KAAQ;MAAAC,eACR;IAAc,GAAAC,KACd;EAAyC,IAC3Cf,OACA,EAAKO,SACD;EAEJ,IAAAS,UAAC,GAAAtC,YAAA,CAAAkB,OAAS,CAAAqB,OAAA;IAAA,OAATV,SAAA,CAAAW,WAAA;MAAAC,UACC,GAAO,GACL,EACmB;MACHC,WACd,GAAO,GACC;IAEV;EAC4B,IAC5Bb,SACF;EAAA,OACF,mBAAA/B,kBAAA,CAAAa,IAAA,EAAAb,kBAAA,CAAA6C,QAAA;IAAAjC,QAAA,GACF,mBAAAZ,kBAAA,CAAAO,GAAA,EAAAF,mBAAA,CAAAyC,SAAA;MACCC,KAAA;QACHtC,KAAA;QAEHuC,MAAA","ignoreList":[]}

package/dist/cjs/SwitchUnstyledDemo.cjs

@@ -1,91 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var SwitchUnstyledDemo_exports = {};
-__export(SwitchUnstyledDemo_exports, {
-  Switch: () => Switch,
-  SwitchUnstyledDemo: () => SwitchUnstyledDemo
-});
-module.exports = __toCommonJS(SwitchUnstyledDemo_exports);
-var import_core = require("@hanzogui/core");
-var import_switch = require("@hanzogui/switch");
-var import_gui = require("@hanzo/gui");
-var import_jsx_runtime = require("react/jsx-runtime");
-const Frame = (0, import_core.styled)(import_core.View, {
-  width: 40,
-  height: 20,
-  rounded: 20,
-  variants: {
-    checked: {
-      true: {
-        backgroundColor: "lightblue"
-      },
-      false: {
-        backgroundColor: "silver"
-      }
-    }
-  },
-  defaultVariants: {
-    checked: false
-  }
-});
-const Thumb = (0, import_core.styled)(import_core.View, {
-  width: 20,
-  height: 20,
-  bg: "black",
-  rounded: 20,
-  variants: {
-    checked: {
-      true: {
-        opacity: 0.8
-      },
-      false: {
-        opacity: 0.5
-      }
-    }
-  }
-});
-const Switch = (0, import_switch.createSwitch)({
-  Frame,
-  Thumb
-});
-function SwitchUnstyledDemo() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
-    width: 200,
-    items: "center",
-    gap: "$3",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-      gap: "$3",
-      items: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
-        htmlFor: "unstyled-switch",
-        children: "Unstyled"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Switch, {
-        defaultChecked: true,
-        id: "unstyled-switch",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Switch.Thumb, {
-          transition: "quickest"
-        })
-      })]
-    })
-  });
-}

package/dist/cjs/SwitchUnstyledDemo.native.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var SwitchUnstyledDemo_exports = {};
-__export(SwitchUnstyledDemo_exports, {
-  Switch: () => Switch,
-  SwitchUnstyledDemo: () => SwitchUnstyledDemo
-});
-module.exports = __toCommonJS(SwitchUnstyledDemo_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_core = require("@hanzogui/core");
-var import_switch = require("@hanzogui/switch");
-var import_gui = require("@hanzo/gui");
-var Frame = (0, import_core.styled)(import_core.View, {
-  width: 40,
-  height: 20,
-  rounded: 20,
-  variants: {
-    checked: {
-      true: {
-        backgroundColor: "lightblue"
-      },
-      false: {
-        backgroundColor: "silver"
-      }
-    }
-  },
-  defaultVariants: {
-    checked: false
-  }
-});
-var Thumb = (0, import_core.styled)(import_core.View, {
-  width: 20,
-  height: 20,
-  bg: "black",
-  rounded: 20,
-  variants: {
-    checked: {
-      true: {
-        opacity: 0.8
-      },
-      false: {
-        opacity: 0.5
-      }
-    }
-  }
-});
-var Switch = (0, import_switch.createSwitch)({
-  Frame,
-  Thumb
-});
-function SwitchUnstyledDemo() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
-    width: 200,
-    items: "center",
-    gap: "$3",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-      gap: "$3",
-      items: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
-        htmlFor: "unstyled-switch",
-        children: "Unstyled"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Switch, {
-        defaultChecked: true,
-        id: "unstyled-switch",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Switch.Thumb, {
-          transition: "quickest"
-        })
-      })]
-    })
-  });
-}
-//# sourceMappingURL=SwitchUnstyledDemo.native.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SwitchUnstyledDemo_exports","__export","Switch","SwitchUnstyledDemo","module","exports","import_jsx_runtime","require","import_core","import_switch","import_gui","Frame","styled","View","width","height","rounded","variants","checked","true","backgroundColor","false","defaultVariants","Thumb","bg","opacity","createSwitch","jsx","YStack","items","gap"],"sources":["../../src/SwitchUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,0BAAA;AAAAC,QAAA,CAAAD,0BAAA;EAAAE,MAAA,EAAAA,CAAA,KAAAA,MAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAV,YAA6B,CAAAK,0BAAA;AAC7B,IAAAM,kBAA6B,GAAAC,OAAA;AAC7B,IAAAC,WAAA,GAAsCD,OAAA;AA+ChC,IAAAE,aAAA,GAAAF,OAAA;AA7CN,IAAAG,UAAM,GAAAH,OAAQ,cAAO;AAAM,IACzBI,KAAO,OAAAH,WAAA,CAAAI,MAAA,EAAAJ,WAAA,CAAAK,IAAA;EACPC,KAAA,IAAQ;EACRC,MAAA,IAAS;EACTC,OAAA,IAAU;EAAAC,QACR;IAASC,OACP,EAAM;MAAAC,IACJ;QACFC,eAAA;MACA;MAAOC,KACL;QACFD,eAAA;MACF;IACF;EACA;EAAiBE,eACN;IACXJ,OAAA;EACD;AAED;AAA2B,IACzBK,KAAO,OAAAf,WAAA,CAAAI,MAAA,EAAAJ,WAAA,CAAAK,IAAA;EACPC,KAAA,IAAQ;EACRC,MAAI;EACJS,EAAA,SAAS;EAETR,OAAA,IAAU;EAAAC,QACR;IAASC,OACP,EAAM;MAAAC,IACJ;QACFM,OAAA;MACA;MAAOJ,KACL;QACFI,OAAA;MACF;IACF;EACD;AAEM;AAA4B,IACjCvB,MAAA,OAAAO,aAAA,CAAAiB,YAAA;EACAf,KAAA;EACDY;AAEM;AACL,SACEpB,mBAAA;EAEI,0BAAAG,kBAAA,CAACqB,GAAA,EAAAjB,UAAA,CAAAkB,MAAM;IACPd,KAAA;IAEAe,KAEJ;IAEJC,GAAA","ignoreList":[]}

package/dist/cjs/TabsAdvancedDemo.cjs

@@ -1,362 +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 TabsAdvancedDemo_exports = {};
-__export(TabsAdvancedDemo_exports, {
-  TabsAdvancedDemo: () => TabsAdvancedDemo
-});
-module.exports = __toCommonJS(TabsAdvancedDemo_exports);
-var import_react = __toESM(require("react"), 1);
-var import_gui = require("@hanzo/gui");
-var import_jsx_runtime = require("react/jsx-runtime");
-const demos = ["background", "underline"];
-const demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-};
-const TabsAdvancedDemo = () => {
-  const [demoIndex, setDemoIndex] = import_react.default.useState(0);
-  const 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: () => setDemoIndex(x => (x + 1) % demos.length),
-        children: demosTitle[demo]
-      })
-    })]
-  });
-};
-const TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = import_react.default.useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = currentTab2 => setTabState({
-    ...tabState,
-    currentTab: currentTab2
-  });
-  const setIntentIndicator = intentAt2 => setTabState({
-    ...tabState,
-    intentAt: intentAt2
-  });
-  const setActiveIndicator = activeAt2 => setTabState({
-    ...tabState,
-    prevActiveAt: tabState.activeAt,
-    activeAt: activeAt2
-  });
-  const {
-    activeAt,
-    intentAt,
-    prevActiveAt,
-    currentTab
-  } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const handleOnInteraction = (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)
-    })]
-  });
-};
-const TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = import_react.default.useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = currentTab2 => setTabState({
-    ...tabState,
-    currentTab: currentTab2
-  });
-  const setIntentIndicator = intentAt2 => setTabState({
-    ...tabState,
-    intentAt: intentAt2
-  });
-  const setActiveIndicator = activeAt2 => setTabState({
-    ...tabState,
-    prevActiveAt: tabState.activeAt,
-    activeAt: activeAt2
-  });
-  const {
-    activeAt,
-    intentAt,
-    prevActiveAt,
-    currentTab
-  } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const handleOnInteraction = (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)
-    })]
-  });
-};
-const TabsRovingIndicator = ({
-  active,
-  ...props
-}) => {
-  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
-  });
-};
-const 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": direction => ({
-        enterStyle: {
-          x: direction > 0 ? -25 : 25,
-          opacity: 0
-        },
-        exitStyle: {
-          zIndex: 0,
-          x: direction < 0 ? -25 : 25,
-          opacity: 0
-        }
-      })
-    }
-  }
-});