@hanzogui/demos 8.3.0 → 8.3.2

package/dist/esm/TabsAdvancedDemo.mjs

@@ -1,326 +0,0 @@
-import React from "react";
-import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from "@hanzo/gui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const demos = ["background", "underline"];
-const demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-};
-const TabsAdvancedDemo = () => {
-  const [demoIndex, setDemoIndex] = React.useState(0);
-  const 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: () => setDemoIndex(x => (x + 1) % demos.length),
-        children: demosTitle[demo]
-      })
-    })]
-  });
-};
-const TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = React.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__ */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: false,
-        "aria-label": "Manage your account",
-        gap: "$2",
-        backgroundColor: "transparent",
-        children: [/* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            children: "Profile"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            children: "Connections"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            children: "Notifications"
-          })
-        })]
-      })
-    }), /* @__PURE__ */jsx(AnimatePresence, {
-      exitBeforeEnter: true,
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */jsx(AnimatedYStack, {
-        children: /* @__PURE__ */jsx(Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          children: /* @__PURE__ */jsx(H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
-};
-const TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = React.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__ */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: true,
-          width: activeAt.width,
-          height: "$0.5",
-          x: activeAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */jsxs(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__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Profile"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Connections"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Notifications"
-          })
-        })]
-      })]
-    }), /* @__PURE__ */jsx(AnimatePresence, {
-      mode: "wait",
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */jsx(AnimatedYStack, {
-        children: /* @__PURE__ */jsx(Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          flexBasis: "auto",
-          children: /* @__PURE__ */jsx(H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
-};
-const TabsRovingIndicator = ({
-  active,
-  ...props
-}) => {
-  return /* @__PURE__ */jsx(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 = styled(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
-        }
-      })
-    }
-  }
-});
-export { TabsAdvancedDemo };
-//# sourceMappingURL=TabsAdvancedDemo.mjs.map

package/dist/esm/TabsAdvancedDemo.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","AnimatePresence","Button","H5","SizableText","Tabs","XStack","YStack","styled","Fragment","jsx","jsxs","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","paddingHorizontal","onInteraction","exitBeforeEnter","custom","initial","AnimatedYStack","Content","forceMount","flex","justify","text","active","borderBottomLeftRadius","borderBottomRightRadius","paddingBottom","borderColor","borderBottomWidth","select","cursor","mode","flexBasis","props","opacity","transition","enterStyle","exitStyle","variants","zIndex"],"sources":["../../src/TabsAdvancedDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/TabsAdvancedDemo.native.js

@@ -1,365 +0,0 @@
-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"];
-var demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-};
-var TabsAdvancedDemo = function () {
-  var [demoIndex, setDemoIndex] = React.useState(0);
-  var 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]
-      })
-    })]
-  });
-};
-var 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
-  });
-  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__ */_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: false,
-        "aria-label": "Manage your account",
-        gap: "$2",
-        backgroundColor: "transparent",
-        children: [/* @__PURE__ */_jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */_jsx(SizableText, {
-            children: "Profile"
-          })
-        }), /* @__PURE__ */_jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */_jsx(SizableText, {
-            children: "Connections"
-          })
-        }), /* @__PURE__ */_jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */_jsx(SizableText, {
-            children: "Notifications"
-          })
-        })]
-      })
-    }), /* @__PURE__ */_jsx(AnimatePresence, {
-      exitBeforeEnter: true,
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */_jsx(AnimatedYStack, {
-        children: /* @__PURE__ */_jsx(Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          children: /* @__PURE__ */_jsx(H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
-};
-var 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
-  });
-  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__ */_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: true,
-          width: activeAt.width,
-          height: "$0.5",
-          x: activeAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */_jsxs(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__ */_jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */_jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Profile"
-          })
-        }), /* @__PURE__ */_jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */_jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Connections"
-          })
-        }), /* @__PURE__ */_jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */_jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Notifications"
-          })
-        })]
-      })]
-    }), /* @__PURE__ */_jsx(AnimatePresence, {
-      mode: "wait",
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */_jsx(AnimatedYStack, {
-        children: /* @__PURE__ */_jsx(Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          flexBasis: "auto",
-          children: /* @__PURE__ */_jsx(H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
-};
-var 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: "$color5",
-      opacity: 0.6
-    }),
-    ...props
-  });
-};
-var 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