@tamagui/demos 1.116.1 → 1.116.2

package/dist/cjs/TabsAdvancedDemo.js

@@ -0,0 +1,283 @@
+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
+        }
+      })
+    }
+  }
+});
+//# sourceMappingURL=TabsAdvancedDemo.js.map

package/dist/cjs/TabsDemo.js

@@ -0,0 +1,144 @@
+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"
+);
+//# sourceMappingURL=TabsDemo.js.map

package/dist/cjs/TextDemo.js

@@ -0,0 +1,31 @@
+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" })
+  ] });
+}
+//# sourceMappingURL=TextDemo.js.map

package/dist/cjs/ThemeBuilderDemo.js

@@ -0,0 +1,149 @@
+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 ThemeBuilderDemo_exports = {};
+__export(ThemeBuilderDemo_exports, {
+  ThemeBuilderDemo: () => ThemeBuilderDemo
+});
+module.exports = __toCommonJS(ThemeBuilderDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: !0, ov: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { mah: 200, y: -100, x: -50, rotate: "-10deg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { y: 35, bg: "$color9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$8", y: 30, bg: "$color7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$6", y: -50, bg: "$color5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$4", bg: "$color3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$2", bg: "$color1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$4", y: 50, bg: "$color3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$6", y: 80, bg: "$color5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$8", bg: "$color7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { bg: "$color9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$8", bg: "$color7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$6", y: 80, bg: "$color5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$4", y: 50, bg: "$color3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$2", bg: "$color1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$4", bg: "$color3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$6", y: -50, bg: "$color5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { size: "$8", y: 30, bg: "$color7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Col, { y: 35, bg: "$color9" })
+  ] }) });
+}
+function Col(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$2.5", space: "$3.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { br: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "orange" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "yellow" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "green" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "blue" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "purple" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "pink" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "red" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { br: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "orange" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "yellow" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        br: "$6",
+        size: "$10",
+        theme: "green" + subTheme,
+        bg: "$background",
+        ...props
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=ThemeBuilderDemo.js.map

package/dist/cjs/ThemeInverseDemo.js

@@ -0,0 +1,56 @@
+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 ThemeInverseDemo_exports = {};
+__export(ThemeInverseDemo_exports, {
+  ThemeInverseDemo: () => ThemeInverseDemo
+});
+module.exports = __toCommonJS(ThemeInverseDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function ThemeInverseDemo() {
+  const themeName = (0, import_tamagui.useThemeName)(), opposite = themeName.includes("dark") ? "light" : "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Buttons, { title: "Normal", name: themeName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { inverse: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Buttons,
+      {
+        title: "Inversed",
+        name: themeName.replace(themeName.split("_")[0], opposite)
+      }
+    ) })
+  ] });
+}
+function Buttons(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.YStack,
+    {
+      elevation: "$4",
+      backgroundColor: "$background",
+      padding: "$4",
+      borderRadius: "$4",
+      space: "$3",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: props.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: props.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { themeInverse: !0, children: "inversed" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Button, { theme: "alt1", children: [
+          props.name,
+          "_alt1"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: "yellow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: props.name.split("_")[0] + "_yellow" }) })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=ThemeInverseDemo.js.map