@hanzogui/demos 2.0.0

package/dist/esm/TabsAdvancedDemo.native.js

@@ -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 "@hanzo/gui";
+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, {
+        items: "center",
+        gap: "$4",
+        position: "absolute",
+        b: "$3",
+        l: "$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",
+      p: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      bg: "$background",
+      rounded: "$4",
+      children: [/* @__PURE__ */_jsx(AnimatePresence, {
+        children: intentAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+          rounded: "$4",
+          width: intentAt.width,
+          height: intentAt.height,
+          x: intentAt.x,
+          y: intentAt.y
+        })
+      }), /* @__PURE__ */_jsx(AnimatePresence, {
+        children: activeAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+          rounded: "$4",
+          theme: "accent",
+          width: activeAt.width,
+          height: activeAt.height,
+          x: activeAt.x,
+          y: activeAt.y
+        })
+      }), /* @__PURE__ */_jsx(YStack, {
+        position: "relative",
+        children: /* @__PURE__ */_jsxs(Tabs.List, {
+          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,
+            justify: "center",
+            children: /* @__PURE__ */_jsx(H5, {
+              text: "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",
+      bg: "$background",
+      rounded: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        position: "relative",
+        children: [/* @__PURE__ */_jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            width: intentAt.width,
+            height: "$0.5",
+            x: intentAt.x,
+            b: 0
+          })
+        }), /* @__PURE__ */_jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            theme: "accent",
+            active: !0,
+            width: activeAt.width,
+            height: "$0.5",
+            x: activeAt.x,
+            b: 0
+          })
+        }), /* @__PURE__ */_jsxs(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__ */_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,
+            justify: "center",
+            flexBasis: "auto",
+            children: /* @__PURE__ */_jsx(H5, {
+              text: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsRovingIndicator = function (param) {
+    var {
+      active,
+      ...props
+    } = param;
+    return /* @__PURE__ */_jsx(YStack, {
+      position: "absolute",
+      backgroundColor: "$color5",
+      opacity: 0.7,
+      transition: "100ms",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      },
+      ...(active && {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }),
+      ...props
+    });
+  },
+  AnimatedYStack = styled(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
+            }
+          };
+        }
+      }
+    }
+  });
+export { TabsAdvancedDemo };
+//# sourceMappingURL=TabsAdvancedDemo.native.js.map

package/dist/esm/TabsAdvancedDemo.native.js.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","items","gap","position","b","l","$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","p","height","flexDirection","activationMode","bg","rounded","TabsRovingIndicator","width","y","theme","List","loop","backgroundColor","Tab","unstyled","paddingVertical","paddingHorizontal","onInteraction","exitBeforeEnter","custom","initial","AnimatedYStack","Content","forceMount","flex","justify","text","active","borderBottomLeftRadius","borderBottomRightRadius","paddingBottom","borderColor","borderBottomWidth"],"sources":["../../src/TabsAdvancedDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/TabsDemo.mjs

@@ -0,0 +1,180 @@
+import React from "react";
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb, useWindowDimensions } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const demos = ["horizontal", "vertical"],
+  demosTitle = {
+    horizontal: "Horizontal",
+    vertical: "Vertical"
+  };
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = React.useState(0),
+    demo = demos[demoIndex];
+  return /* @__PURE__ */jsxs(YStack, {
+    px: "$4",
+    ...(isWeb && {
+      position: "unset"
+    }),
+    children: [demo === "horizontal" ? /* @__PURE__ */jsx(HorizontalTabs, {}) : /* @__PURE__ */jsx(VerticalTabs, {}), /* @__PURE__ */jsx(XStack, {
+      items: "center",
+      gap: "$4",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $maxXs: {
+        display: "none"
+      },
+      children: /* @__PURE__ */jsx(Button, {
+        size: "$2",
+        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
+        children: demosTitle[demo]
+      })
+    })]
+  });
+}
+const HorizontalTabs = () => {
+    const {
+      width
+    } = useWindowDimensions();
+    return /* @__PURE__ */jsxs(Tabs, {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      $maxMd: {
+        width: width - 32
+      },
+      width: 400,
+      height: 150,
+      rounded: "$4",
+      borderWidth: "$0.25",
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */jsxs(Tabs.List, {
+        "aria-label": "Manage your account",
+        children: [/* @__PURE__ */jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab1",
+          children: /* @__PURE__ */jsx(SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Profile"
+          })
+        }), /* @__PURE__ */jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab2",
+          children: /* @__PURE__ */jsx(SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            children: "Connections"
+          })
+        }), /* @__PURE__ */jsx(Tabs.Tab, {
+          activeStyle: {
+            backgroundColor: "$color3"
+          },
+          flex: 1,
+          value: "tab3",
+          children: /* @__PURE__ */jsx(SizableText, {
+            fontFamily: "$body",
+            text: "center",
+            ellipsis: !0,
+            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 = () => /* @__PURE__ */jsxs(Tabs, {
+    defaultValue: "tab1",
+    flexDirection: "row",
+    orientation: "vertical",
+    width: 400,
+    rounded: "$4",
+    borderWidth: "$0.25",
+    overflow: "hidden",
+    borderColor: "$borderColor",
+    children: [/* @__PURE__ */jsxs(Tabs.List, {
+      "aria-label": "Manage your account",
+      children: [/* @__PURE__ */jsx(Tabs.Tab, {
+        activeStyle: {
+          backgroundColor: "$color3"
+        },
+        value: "tab1",
+        children: /* @__PURE__ */jsx(SizableText, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */jsx(Tabs.Tab, {
+        activeStyle: {
+          backgroundColor: "$color3"
+        },
+        value: "tab2",
+        children: /* @__PURE__ */jsx(SizableText, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */jsx(Tabs.Tab, {
+        activeStyle: {
+          backgroundColor: "$color3"
+        },
+        value: "tab3",
+        children: /* @__PURE__ */jsx(SizableText, {
+          children: "Notifications"
+        })
+      })]
+    }), /* @__PURE__ */jsx(Separator, {
+      vertical: !0
+    }), /* @__PURE__ */jsx(TabsContent, {
+      value: "tab1",
+      children: /* @__PURE__ */jsx(H5, {
+        text: "center",
+        children: "Profile"
+      })
+    }), /* @__PURE__ */jsx(TabsContent, {
+      value: "tab2",
+      children: /* @__PURE__ */jsx(H5, {
+        text: "center",
+        children: "Connections"
+      })
+    }), /* @__PURE__ */jsx(TabsContent, {
+      value: "tab3",
+      children: /* @__PURE__ */jsx(H5, {
+        text: "center",
+        children: "Notifications"
+      })
+    })]
+  }),
+  TabsContent = props => /* @__PURE__ */jsx(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");
+export { TabsDemo };
+//# sourceMappingURL=TabsDemo.mjs.map

package/dist/esm/TabsDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","H5","Separator","SizableText","Tabs","XStack","YStack","isWeb","useWindowDimensions","jsx","jsxs","demos","demosTitle","horizontal","vertical","TabsDemo","demoIndex","setDemoIndex","useState","demo","px","position","children","HorizontalTabs","VerticalTabs","items","gap","b","l","$maxXs","display","size","onPress","x","length","width","defaultValue","orientation","flexDirection","$maxMd","height","rounded","borderWidth","borderColor","List","Tab","activeStyle","backgroundColor","flex","value","fontFamily","text","ellipsis","TabsContent","overflow","props","Content","bg","p","justify","borderTopLeftRadius","borderTopRightRadius"],"sources":["../../src/TabsDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}