@tamagui/demos 1.11.2 → 1.12.0

package/dist/cjs/TabsAdvancedDemo.js

@@ -24,26 +24,120 @@ module.exports = __toCommonJS(TabsAdvancedDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
+const demos = ["background", "underline"];
 const TabsAdvancedDemo = () => {
-  const [currentTab, setCurrentTab] = (0, import_react.useState)("tab1");
-  const [intentIndicator, setIntentIndicator] = (0, import_react.useState)(null);
-  const [selectIndicator, setSelectIndicator] = (0, import_react.useState)(null);
-  const prevSelectionIndicatorLayout = (0, import_react.useRef)(null);
-  const handleUpdateSelectionIndicator = (newSize) => {
-    prevSelectionIndicatorLayout.current = selectIndicator;
-    setSelectIndicator(newSize);
+  const [demoIndex, setDemoIndex] = (0, import_react.useState)(0);
+  const 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", space: true, 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: demo }) })
+  ] });
+};
+const TabsAdvancedBackground = () => {
+  const [tabState, setTabState] = (0, import_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 enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
+  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
+  const handleOnInteraction = (type, layout) => {
+    if (type === "select") {
+      setActiveIndicator(layout);
+    } else {
+      setIntentIndicator(layout);
+    }
   };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$3",
+      padding: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.Tabs.List,
+          {
+            loop: false,
+            "aria-label": "Manage your account",
+            disablePassBorderRadius: true,
+            children: [
+              intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TabsRovingIndicator,
+                {
+                  width: intentAt.width,
+                  height: intentAt.height,
+                  x: intentAt.x,
+                  y: intentAt.y
+                }
+              ),
+              activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TabsRovingIndicator,
+                {
+                  theme: "active",
+                  width: activeAt.width,
+                  height: activeAt.height,
+                  x: activeAt.x,
+                  y: activeAt.y
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { 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.Trigger, { 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.Trigger, { 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: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+const TabsAdvancedUnderline = () => {
+  const [tabState, setTabState] = (0, import_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 (!selectIndicator || !prevSelectionIndicatorLayout.current || selectIndicator.x === prevSelectionIndicatorLayout.current.x) {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
       return 0;
     }
-    return selectIndicator.x > prevSelectionIndicatorLayout.current.x ? -1 : 1;
+    return activeAt.x > prevActiveAt.x ? -1 : 1;
   })();
   const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
   const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
   const handleOnInteraction = (type, layout) => {
     if (type === "select") {
-      handleUpdateSelectionIndicator(layout);
+      setActiveIndicator(layout);
     } else {
       setIntentIndicator(layout);
     }
@@ -54,9 +148,8 @@ const TabsAdvancedDemo = () => {
       value: currentTab,
       onValueChange: setCurrentTab,
       orientation: "horizontal",
-      br: "$4",
       size: "$3",
-      p: "$2",
+      padding: "$2",
       height: 150,
       flexDirection: "column",
       activationMode: "manual",
@@ -67,26 +160,28 @@ const TabsAdvancedDemo = () => {
             loop: false,
             "aria-label": "Manage your account",
             disablePassBorderRadius: true,
-            overflow: "visible",
-            pb: "$1.5",
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            paddingBottom: "$1.5",
             children: [
-              intentIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 TabsRovingIndicator,
                 {
-                  width: intentIndicator.width,
-                  height: intentIndicator.height,
-                  x: intentIndicator.x,
-                  y: intentIndicator.y
+                  width: intentAt.width,
+                  height: "$0.25",
+                  x: intentAt.x,
+                  borderRadius: 0,
+                  bottom: -3
                 }
               ),
-              selectIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 TabsRovingIndicator,
                 {
                   theme: "active",
                   active: true,
-                  width: selectIndicator.width,
+                  width: activeAt.width,
                   height: "$0.25",
-                  x: selectIndicator.x,
+                  x: activeAt.x,
                   borderRadius: 0,
                   bottom: -3
                 }
@@ -103,7 +198,7 @@ const TabsAdvancedDemo = () => {
             exitBeforeEnter: true,
             enterVariant,
             exitVariant,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, o: 1, f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, f: 1, jc: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: currentTab }) }) }, currentTab)
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
           }
         )
       ]

package/dist/cjs/TabsAdvancedDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
-  "sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  SizableText,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  TabsTriggerProps,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n\n  // Layout of the trigger user might intend to select (hovering / focusing)\n  const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n  // Layout of the trigger user selected\n  const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectIndicator\n    setSelectIndicator(newSize)\n  }\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (\n      !selectIndicator ||\n      !prevSelectionIndicatorLayout.current ||\n      selectIndicator.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectIndicator.x > prevSelectionIndicatorLayout.current.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      handleUpdateSelectionIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      size=\"$3\"\n      p=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n        <Tabs.List\n          loop={false}\n          aria-label=\"Manage your account\"\n          disablePassBorderRadius\n          overflow=\"visible\"\n          pb=\"$1.5\"\n        >\n          {intentIndicator && (\n            <TabsRovingIndicator\n              width={intentIndicator.width}\n              height={intentIndicator.height}\n              x={intentIndicator.x}\n              y={intentIndicator.y}\n            />\n          )}\n\n          {selectIndicator && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={selectIndicator.width}\n              height=\"$0.25\"\n              x={selectIndicator.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1} f={1}>\n          <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 1,\n  animation: '100ms',\n  borderRadius: '$4',\n\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  TabsTriggerProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack alignItems=\"center\" space position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the trigger user might intend to select (hovering / focusing)\n     */\n    intentAt: TabTriggerLayout | null\n    /**\n     * Layout of the trigger user selected\n     */\n    activeAt: TabTriggerLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabTriggerLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$3\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentAt && (\n          <TabsRovingIndicator\n            width={intentAt.width}\n            height={intentAt.height}\n            x={intentAt.x}\n            y={intentAt.y}\n          />\n        )}\n\n        {activeAt && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            width={activeAt.width}\n            height={activeAt.height}\n            x={activeAt.x}\n            y={activeAt.y}\n          />\n        )}\n\n        <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the trigger user might intend to select (hovering / focusing)\n     */\n    intentAt: TabTriggerLayout | null\n    /**\n     * Layout of the trigger user selected\n     */\n    activeAt: TabTriggerLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabTriggerLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$3\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n        <Tabs.List\n          loop={false}\n          aria-label=\"Manage your account\"\n          disablePassBorderRadius\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n        >\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.25\"\n              x={intentAt.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.25\"\n              x={activeAt.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 1,\n  animation: '100ms',\n  borderRadius: '$4',\n\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
+  "mappings": "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",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/cjs/TabsDemo.js

@@ -21,16 +21,30 @@ __export(TabsDemo_exports, {
   TabsDemo: () => TabsDemo
 });
 module.exports = __toCommonJS(TabsDemo_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = (
+  // web only fix for position relative
+  require("react/jsx-runtime")
+);
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 const demos = ["horizontal", "vertical"];
 function TabsDemo() {
   const [demoIndex, setDemoIndex] = (0, import_react.useState)(0);
   const demo = demos[demoIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { paddingHorizontal: "$4", 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, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demo }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.XStack,
+      {
+        alignItems: "center",
+        space: true,
+        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: demo })
+      }
+    )
   ] });
 }
 const HorizontalTabs = () => {
@@ -42,16 +56,49 @@ const HorizontalTabs = () => {
       flexDirection: "column",
       width: 400,
       height: 150,
-      br: "$4",
+      borderRadius: "$4",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { disablePassBorderRadius: "bottom", "aria-label": "Manage your account", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", f: 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.Trigger, { theme: "Button", f: 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.Trigger, { theme: "Button", f: 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.Tabs.Trigger, { theme: "Button", 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.Trigger, { theme: "Button", 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.Trigger, { theme: "Button", 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.Tabs.Content, { value: "tab1", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Profile" }) }, "tab1"),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab2", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Connections" }) }, "tab2"),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab3", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Notifications" }) }, "tab3")
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Tabs.Content,
+          {
+            value: "tab1",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Profile" })
+          },
+          "tab1"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Tabs.Content,
+          {
+            value: "tab2",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Connections" })
+          },
+          "tab2"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Tabs.Content,
+          {
+            value: "tab3",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Notifications" })
+          },
+          "tab3"
+        )
       ]
     }
   );
@@ -64,16 +111,49 @@ const VerticalTabs = () => {
       flexDirection: "row",
       orientation: "vertical",
       width: 400,
-      br: "$4",
+      borderRadius: "$4",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Profile" }) }, "tab1"),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Connections" }) }, "tab2"),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab3", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Notifications" }) }, "tab3")
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Tabs.Content,
+          {
+            value: "tab1",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: "Profile" })
+          },
+          "tab1"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Tabs.Content,
+          {
+            value: "tab2",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: "Connections" })
+          },
+          "tab2"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Tabs.Content,
+          {
+            value: "tab3",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: "Notifications" })
+          },
+          "tab3"
+        )
       ]
     }
   );

package/dist/cjs/TabsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    <>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack, YStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/TextDemo.js

@@ -24,13 +24,13 @@ module.exports = __toCommonJS(TextDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function TextDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: "$2", ai: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: "$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: true, 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", fow: "800", children: "Paragraph" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/TextDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TextDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" ai=\"center\">\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fow=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAA6D;AAEtD,SAAS,WAAW;AACzB,SACE,6CAAC,yBAAO,OAAM,MAAK,IAAG,UACpB;AAAA,gDAAC,8BAAY,MAAK,MAAK,yBAAW;AAAA,IAClC,6CAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,8BAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,MACA,4CAAC,8BAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,OACF;AAAA,IACA,4CAAC,4BAAU,MAAK,MAAK,KAAI,OAAM,uBAE/B;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" alignItems=\"center\">\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fontWeight=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAA6D;AAEtD,SAAS,WAAW;AACzB,SACE,6CAAC,yBAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,gDAAC,8BAAY,MAAK,MAAK,yBAAW;AAAA,IAClC,6CAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,8BAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,MACA,4CAAC,8BAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,OACF;AAAA,IACA,4CAAC,4BAAU,MAAK,MAAK,YAAW,OAAM,uBAEtC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ThemeInverseDemo.js

@@ -30,7 +30,7 @@ function ThemeInverseDemo() {
   ] });
 }
 function Buttons() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { bc: "$background", p: "$3", br: "$3", space: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Dark" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { themeInverse: true, children: "Inversed" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "alt1", children: "Alt1 Dark" }),

package/dist/cjs/ThemeInverseDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeInverseDemo.tsx"],
-  "sourcesContent": ["import { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <Theme inverse>\n        <Buttons />\n      </Theme>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack bc=\"$background\" p=\"$3\" br=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA8C;AAEvC,SAAS,mBAAmB;AACjC,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,WAAQ;AAAA,IACT,4CAAC,wBAAM,SAAO,MACZ,sDAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,6CAAC,yBAAO,IAAG,eAAc,GAAE,MAAK,IAAG,MAAK,OAAK,MAC3C;AAAA,gDAAC,yBAAO,kBAAI;AAAA,IACZ,4CAAC,yBAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,4CAAC,yBAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,4CAAC,wBAAM,MAAK,UACV,sDAAC,yBAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <Theme inverse>\n        <Buttons />\n      </Theme>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack backgroundColor=\"$background\" padding=\"$3\" borderRadius=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA8C;AAEvC,SAAS,mBAAmB;AACjC,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,WAAQ;AAAA,IACT,4CAAC,wBAAM,SAAO,MACZ,sDAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,6CAAC,yBAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,gDAAC,yBAAO,kBAAI;AAAA,IACZ,4CAAC,yBAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,4CAAC,yBAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,4CAAC,wBAAM,MAAK,UACV,sDAAC,yBAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ToastDemo.js

@@ -32,16 +32,13 @@ __export(ToastDemo_exports, {
 });
 module.exports = __toCommonJS(ToastDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
 const ToastDemo = () => {
-  const [native, setNative] = import_react.default.useState([]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: "$5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ToastImperativeProvider, { options: { native }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastControl, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentToast, {})
-    ] }),
+  const [native, setNative] = import_react.default.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastControl, { native }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentToast, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptions, { native, setNative })
   ] });
 };
@@ -67,15 +64,16 @@ const CurrentToast = () => {
     currentToast.id
   );
 };
-const ToastControl = () => {
+const ToastControl = ({ native }) => {
   const toast = (0, import_tamagui.useToast)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", jc: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", justifyContent: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_tamagui.Button,
       {
         onPress: () => {
           toast.show("Successfully saved!", {
-            message: "Don't worry, we've got your data."
+            message: "Don't worry, we've got your data.",
+            native
           });
         },
         children: "Show"
@@ -96,29 +94,32 @@ const NativeOptions = ({
   native,
   setNative
 }) => {
-  const supportedNativePlatforms = ["web", "mobile"];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { space: true, children: supportedNativePlatforms.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { size: "$1", children: "Custom" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_tamagui.Checkbox,
+      import_tamagui.Switch,
       {
-        id: platform,
-        checked: native == null ? void 0 : native.includes(platform),
-        onCheckedChange: (checked) => {
-          if (checked)
-            setNative([...native, platform]);
-          else
-            setNative(native.filter((val) => val !== platform));
-        },
-        size: "$3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {}) })
+        theme: "active",
+        size: "$1",
+        checked: !!native,
+        onCheckedChange: (val) => setNative(val),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Switch.Thumb,
+          {
+            animation: [
+              "quick",
+              {
+                transform: {
+                  overshootClamping: true
+                }
+              }
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Label, { size: "$3", htmlFor: platform, children: [
-      "Native ",
-      platform,
-      " toast"
-    ] })
-  ] }, platform)) });
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { size: "$1", children: "Native" })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {