@tamagui/demos 1.88.12 → 1.89.0-1706308641099

package/dist/jsx/TabsAdvancedDemo.mjs

@@ -0,0 +1,303 @@
+import { useState } from "react";
+import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const demos = ["background", "underline"],
+  demosTitle = {
+    background: "Background Indicator",
+    underline: "Underline Indicator"
+  },
+  TabsAdvancedDemo = () => {
+    const [demoIndex, setDemoIndex] = useState(0),
+      demo = demos[demoIndex];
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [demo === "underline" ? /* @__PURE__ */jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */jsx(TabsAdvancedBackground, {}), /* @__PURE__ */jsx(XStack, {
+        alignItems: "center",
+        space: !0,
+        position: "absolute",
+        bottom: "$3",
+        left: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$2",
+          onPress: () => setDemoIndex(x => (x + 1) % demos.length),
+          children: demosTitle[demo]
+        })
+      })]
+    });
+  },
+  TabsAdvancedBackground = () => {
+    const [tabState, setTabState] = 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,
+      enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade",
+      exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade",
+      handleOnInteraction = (type, layout) => {
+        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
+      };
+    return /* @__PURE__ */jsxs(Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      padding: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      position: "relative",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        children: [/* @__PURE__ */jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
+            borderRadius: "$4",
+            width: intentAt.width,
+            height: intentAt.height,
+            x: intentAt.x,
+            y: intentAt.y
+          })
+        }), /* @__PURE__ */jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
+            borderRadius: "$4",
+            theme: "active",
+            width: activeAt.width,
+            height: activeAt.height,
+            x: activeAt.x,
+            y: activeAt.y
+          })
+        }), /* @__PURE__ */jsxs(Tabs.List, {
+          disablePassBorderRadius: !0,
+          loop: !1,
+          "aria-label": "Manage your account",
+          space: "$2",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */jsx(Tabs.Tab, {
+            unstyled: !0,
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */jsx(SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */jsx(Tabs.Tab, {
+            unstyled: !0,
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */jsx(SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */jsx(Tabs.Tab, {
+            unstyled: !0,
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */jsx(SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */jsx(AnimatePresence, {
+        exitBeforeEnter: !0,
+        enterVariant,
+        exitVariant,
+        children: /* @__PURE__ */jsx(AnimatedYStack, {
+          animation: "100ms",
+          x: 0,
+          opacity: 1,
+          flex: 1,
+          children: /* @__PURE__ */jsx(Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justifyContent: "center",
+            children: /* @__PURE__ */jsx(H5, {
+              textAlign: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsAdvancedUnderline = () => {
+    const [tabState, setTabState] = 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,
+      enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade",
+      exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade",
+      handleOnInteraction = (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",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        children: [/* @__PURE__ */jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
+            width: intentAt.width,
+            height: "$0.5",
+            x: intentAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
+            theme: "active",
+            active: !0,
+            width: activeAt.width,
+            height: "$0.5",
+            x: activeAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */jsxs(Tabs.List, {
+          disablePassBorderRadius: !0,
+          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,
+            padding: "$5",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */jsx(SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */jsx(Tabs.Tab, {
+            unstyled: !0,
+            padding: "$5",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */jsx(SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */jsx(Tabs.Tab, {
+            unstyled: !0,
+            padding: "$5",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */jsx(SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */jsx(AnimatePresence, {
+        exitBeforeEnter: !0,
+        enterVariant,
+        exitVariant,
+        children: /* @__PURE__ */jsx(AnimatedYStack, {
+          animation: "100ms",
+          x: 0,
+          opacity: 1,
+          flex: 1,
+          children: /* @__PURE__ */jsx(Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justifyContent: "center",
+            children: /* @__PURE__ */jsx(H5, {
+              textAlign: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsRovingIndicator = ({
+    active,
+    ...props
+  }) => /* @__PURE__ */jsx(YStack, {
+    position: "absolute",
+    backgroundColor: "$color5",
+    opacity: 0.7,
+    animation: "100ms",
+    enterStyle: {
+      opacity: 0
+    },
+    exitStyle: {
+      opacity: 0
+    },
+    ...(active && {
+      backgroundColor: "$color8",
+      opacity: 0.6
+    }),
+    ...props
+  }),
+  AnimatedYStack = styled(YStack, {
+    variants: {
+      isLeft: {
+        true: {
+          x: -25,
+          opacity: 0
+        }
+      },
+      isRight: {
+        true: {
+          x: 25,
+          opacity: 0
+        }
+      },
+      defaultFade: {
+        true: {
+          opacity: 0
+        }
+      }
+    }
+  });
+export { TabsAdvancedDemo };

package/dist/jsx/TabsDemo.mjs

@@ -0,0 +1,158 @@
+import { useState } from "react";
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const demos = ["horizontal", "vertical"],
+  demosTitle = {
+    horizontal: "Horizontal",
+    vertical: "Vertical"
+  };
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0),
+    demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */
+    jsxs(YStack, {
+      paddingHorizontal: "$4",
+      ...(isWeb && {
+        position: "unset"
+      }),
+      children: [demo === "horizontal" ? /* @__PURE__ */jsx(HorizontalTabs, {}) : /* @__PURE__ */jsx(VerticalTabs, {}), /* @__PURE__ */jsx(XStack, {
+        alignItems: "center",
+        space: !0,
+        position: "absolute",
+        bottom: "$3",
+        left: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$2",
+          onPress: () => setDemoIndex(x => (x + 1) % demos.length),
+          children: demosTitle[demo]
+        })
+      })]
+    })
+  );
+}
+const HorizontalTabs = () => /* @__PURE__ */jsxs(Tabs, {
+    defaultValue: "tab1",
+    orientation: "horizontal",
+    flexDirection: "column",
+    width: 400,
+    height: 150,
+    borderRadius: "$4",
+    borderWidth: "$0.25",
+    overflow: "hidden",
+    borderColor: "$borderColor",
+    children: [/* @__PURE__ */jsxs(Tabs.List, {
+      separator: /* @__PURE__ */jsx(Separator, {
+        vertical: !0
+      }),
+      disablePassBorderRadius: "bottom",
+      "aria-label": "Manage your account",
+      children: [/* @__PURE__ */jsx(Tabs.Tab, {
+        flex: 1,
+        value: "tab1",
+        children: /* @__PURE__ */jsx(SizableText, {
+          fontFamily: "$body",
+          children: "Profile"
+        })
+      }), /* @__PURE__ */jsx(Tabs.Tab, {
+        flex: 1,
+        value: "tab2",
+        children: /* @__PURE__ */jsx(SizableText, {
+          fontFamily: "$body",
+          children: "Connections"
+        })
+      }), /* @__PURE__ */jsx(Tabs.Tab, {
+        flex: 1,
+        value: "tab3",
+        children: /* @__PURE__ */jsx(SizableText, {
+          fontFamily: "$body",
+          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,
+    borderRadius: "$4",
+    borderWidth: "$0.25",
+    overflow: "hidden",
+    borderColor: "$borderColor",
+    children: [/* @__PURE__ */jsxs(Tabs.List, {
+      disablePassBorderRadius: "end",
+      "aria-label": "Manage your account",
+      separator: /* @__PURE__ */jsx(Separator, {}),
+      children: [/* @__PURE__ */jsx(Tabs.Tab, {
+        value: "tab1",
+        children: /* @__PURE__ */jsx(SizableText, {
+          children: "Profile"
+        })
+      }), /* @__PURE__ */jsx(Tabs.Tab, {
+        value: "tab2",
+        children: /* @__PURE__ */jsx(SizableText, {
+          children: "Connections"
+        })
+      }), /* @__PURE__ */jsx(Tabs.Tab, {
+        value: "tab3",
+        children: /* @__PURE__ */jsx(SizableText, {
+          children: "Notifications"
+        })
+      })]
+    }), /* @__PURE__ */jsx(Separator, {
+      vertical: !0
+    }), /* @__PURE__ */jsx(TabsContent, {
+      value: "tab1",
+      children: /* @__PURE__ */jsx(H5, {
+        textAlign: "center",
+        children: "Profile"
+      })
+    }), /* @__PURE__ */jsx(TabsContent, {
+      value: "tab2",
+      children: /* @__PURE__ */jsx(H5, {
+        textAlign: "center",
+        children: "Connections"
+      })
+    }), /* @__PURE__ */jsx(TabsContent, {
+      value: "tab3",
+      children: /* @__PURE__ */jsx(H5, {
+        textAlign: "center",
+        children: "Notifications"
+      })
+    })]
+  }),
+  TabsContent = props => /* @__PURE__ */jsx(Tabs.Content, {
+    backgroundColor: "$background",
+    padding: "$2",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    borderColor: "$background",
+    borderRadius: "$2",
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderWidth: "$2",
+    ...props,
+    children: props.children
+  }, "tab3");
+export { TabsDemo };

package/dist/jsx/TextDemo.mjs

@@ -0,0 +1,28 @@
+import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    space: "$2",
+    alignItems: "center",
+    children: [/* @__PURE__ */jsx(SizableText, {
+      size: "$3",
+      children: "SizableText"
+    }), /* @__PURE__ */jsxs(XStack, {
+      space: !0,
+      children: [/* @__PURE__ */jsx(SizableText, {
+        theme: "alt1",
+        size: "$3",
+        children: "alt1"
+      }), /* @__PURE__ */jsx(SizableText, {
+        theme: "alt2",
+        size: "$3",
+        children: "alt2"
+      })]
+    }), /* @__PURE__ */jsx(Paragraph, {
+      size: "$2",
+      fontWeight: "800",
+      children: "Paragraph"
+    })]
+  });
+}
+export { TextDemo };

package/dist/jsx/ThemeBuilderDemo.mjs

@@ -0,0 +1,154 @@
+import { Square, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    fullscreen: !0,
+    ov: "hidden",
+    children: /* @__PURE__ */jsxs(XStack, {
+      mah: 200,
+      y: -100,
+      x: -50,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */jsx(Col, {
+        y: 35,
+        bc: "$color9"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        y: 30,
+        bc: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: -50,
+        bc: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        bc: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$2",
+        bc: "$color1"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        y: 50,
+        bc: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: 80,
+        bc: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        bc: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        bc: "$color9"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        bc: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: 80,
+        bc: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        y: 50,
+        bc: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$2",
+        bc: "$color1"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$4",
+        bc: "$color3"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$6",
+        y: -50,
+        bc: "$color5"
+      }), /* @__PURE__ */jsx(Col, {
+        size: "$8",
+        y: 30,
+        bc: "$color7"
+      }), /* @__PURE__ */jsx(Col, {
+        y: 35,
+        bc: "$color9"
+      })]
+    })
+  });
+}
+function Col(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */jsxs(YStack, {
+    padding: "$2.5",
+    space: "$3.5",
+    children: [/* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "blue" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "purple" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "pink" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "red" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */jsx(Square, {
+      br: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    })]
+  });
+}
+export { ThemeBuilderDemo };

package/dist/jsx/ThemeInverseDemo.mjs

@@ -0,0 +1,45 @@
+import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThemeInverseDemo() {
+  const themeName = useThemeName(),
+    opposite = themeName.includes("dark") ? "light" : "dark";
+  return /* @__PURE__ */jsxs(XStack, {
+    space: !0,
+    children: [/* @__PURE__ */jsx(Buttons, {
+      title: "Normal",
+      name: themeName
+    }), /* @__PURE__ */jsx(Theme, {
+      inverse: !0,
+      children: /* @__PURE__ */jsx(Buttons, {
+        title: "Inversed",
+        name: themeName.replace(themeName.split("_")[0], opposite)
+      })
+    })]
+  });
+}
+function Buttons(props) {
+  return /* @__PURE__ */jsxs(YStack, {
+    elevation: "$4",
+    backgroundColor: "$background",
+    padding: "$4",
+    borderRadius: "$4",
+    space: "$3",
+    children: [/* @__PURE__ */jsx(H5, {
+      children: props.title
+    }), /* @__PURE__ */jsx(Button, {
+      children: props.name
+    }), /* @__PURE__ */jsx(Button, {
+      themeInverse: !0,
+      children: "inversed"
+    }), /* @__PURE__ */jsxs(Button, {
+      theme: "alt1",
+      children: [props.name, "_alt1"]
+    }), /* @__PURE__ */jsx(Theme, {
+      name: "yellow",
+      children: /* @__PURE__ */jsx(Button, {
+        children: props.name.split("_")[0] + "_yellow"
+      })
+    })]
+  });
+}
+export { ThemeInverseDemo };