@hanzogui/demos 2.0.0

package/dist/cjs/TabsAdvancedDemo.cjs

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