@tamagui/demos 1.114.4 → 1.115.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")),
+  import_tamagui = require("tamagui"),
+  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_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$4",
+        position: "absolute",
+        bottom: "$3",
+        left: "$4",
+        $xxs: {
+          display: "none"
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+          children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+            borderRadius: "$4",
+            width: intentAt.width,
+            height: intentAt.height,
+            x: intentAt.x,
+            y: intentAt.y
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+          children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+            borderRadius: "$4",
+            theme: "active",
+            width: activeAt.width,
+            height: activeAt.height,
+            x: activeAt.x,
+            y: activeAt.y
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+          disablePassBorderRadius: !0,
+          loop: !1,
+          "aria-label": "Manage your account",
+          gap: "$2",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+        exitBeforeEnter: !0,
+        custom: {
+          direction
+        },
+        initial: !1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justifyContent: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+              textAlign: "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_tamagui.Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+          children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+            width: intentAt.width,
+            height: "$0.5",
+            x: intentAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+          children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+            theme: "active",
+            active: !0,
+            width: activeAt.width,
+            height: "$0.5",
+            x: activeAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              children: "Profile"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              children: "Connections"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+        exitBeforeEnter: !0,
+        custom: {
+          direction
+        },
+        initial: !1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
+            value: currentTab,
+            forceMount: !0,
+            flex: 1,
+            justifyContent: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+              textAlign: "center",
+              children: currentTab
+            })
+          })
+        }, currentTab)
+      })]
+    });
+  },
+  TabsRovingIndicator = ({
+    active,
+    ...props
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    position: "absolute",
+    backgroundColor: "$color5",
+    opacity: 0.7,
+    animation: "100ms",
+    enterStyle: {
+      opacity: 0
+    },
+    exitStyle: {
+      opacity: 0
+    },
+    ...(active && {
+      backgroundColor: "$color8",
+      opacity: 0.6
+    }),
+    ...props
+  }),
+  AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
+    flex: 1,
+    x: 0,
+    opacity: 1,
+    animation: "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
+          }
+        })
+      }
+    }
+  });

package/dist/cjs/TabsDemo.cjs

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

package/dist/cjs/TextDemo.cjs

@@ -0,0 +1,52 @@
+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: !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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var TextDemo_exports = {};
+__export(TextDemo_exports, {
+  TextDemo: () => TextDemo
+});
+module.exports = __toCommonJS(TextDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function TextDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$2",
+    alignItems: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      size: "$3",
+      children: "SizableText"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      space: !0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        theme: "alt1",
+        size: "$3",
+        children: "alt1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        theme: "alt2",
+        size: "$3",
+        children: "alt2"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      size: "$2",
+      fontWeight: "800",
+      children: "Paragraph"
+    })]
+  });
+}