@tamagui/demos 1.6.3 → 1.7.1

package/dist/esm/TabsHighlightedDemo.mjs

@@ -0,0 +1,172 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import {
+  AnimatePresence,
+  H5,
+  Stack,
+  Tabs,
+  XStack,
+  YStack,
+  styled
+} from "tamagui";
+function TabsHighlightedDemo() {
+  return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(HighlightTabs, {}) });
+}
+const TabsRovingIndicator = styled(Stack, {
+  name: "TabsRovingIndicator",
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8"
+      }
+    },
+    variants: {
+      active: {
+        true: {
+          backgroundColor: "$color8"
+        }
+      },
+      enter: {
+        true: {
+          opacity: 0
+        }
+      },
+      exit: {
+        true: {
+          opacity: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    position: "absolute",
+    backgroundColor: "$color5",
+    opacity: 1,
+    animation: "100ms",
+    borderRadius: "$4"
+  }
+});
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } }
+  }
+});
+const HighlightTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
+  const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
+  const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
+  const prevSelectionIndicatorLayout = useRef(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
+    setSelectionIndicatorLayout(newSize);
+  };
+  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
+  const direction = useMemo(() => {
+    if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x) {
+      return 0;
+    }
+    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1;
+  }, [selectionIndicatorLayout]);
+  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : void 0;
+  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      br: "$4",
+      p: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            loop: false,
+            "aria-label": "Manage your account",
+            disablePassBorderRadius: true,
+            overflow: "visible",
+            children: [
+              intentIndicatorLayout && /* @__PURE__ */ jsx(
+                TabsRovingIndicator,
+                {
+                  width: intentIndicatorLayout.width,
+                  height: intentIndicatorLayout.height,
+                  x: intentIndicatorLayout.x,
+                  y: intentIndicatorLayout.y
+                }
+              ),
+              selectionIndicatorLayout && /* @__PURE__ */ jsx(
+                TabsRovingIndicator,
+                {
+                  theme: "active",
+                  active: true,
+                  width: selectionIndicatorLayout.width,
+                  height: 2,
+                  x: selectionIndicatorLayout.x,
+                  y: 40
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tabs.Trigger,
+                {
+                  unstyled: true,
+                  color: "$color12",
+                  value: "tab1",
+                  size: "$3",
+                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
+                  onHoveredLayoutChange: setHoverIndicatorLayout,
+                  onFocusedLayoutChange: setFocusIndicatorLayout,
+                  children: "Profile"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tabs.Trigger,
+                {
+                  unstyled: true,
+                  color: "$color12",
+                  size: "$3",
+                  value: "tab2",
+                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
+                  onHoveredLayoutChange: setHoverIndicatorLayout,
+                  onFocusedLayoutChange: setFocusIndicatorLayout,
+                  children: "Connections"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tabs.Trigger,
+                {
+                  unstyled: true,
+                  color: "$color12",
+                  size: "$3",
+                  value: "tab3",
+                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
+                  onHoveredLayoutChange: setHoverIndicatorLayout,
+                  onFocusedLayoutChange: setFocusIndicatorLayout,
+                  children: "Notifications"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(YStack, { f: 1, children: /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, o: 1, f: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", f: 1, jc: "center", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  TabsHighlightedDemo
+};
+//# sourceMappingURL=TabsHighlightedDemo.mjs.map

package/dist/esm/TabsHighlightedDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TabsHighlightedDemo.tsx"],
+  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      p=\"$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        overflow=\"visible\"\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={2}\n            x={selectionIndicatorLayout.x}\n            y={40}\n          />\n        )}\n\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          size=\"$3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <YStack f={1}>\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 p=\"$2\" f={1} jc=\"center\">\n              <H5 ta=\"center\">{currentTab}</H5>\n            </Tabs.Content>\n          </AnimatedYStack>\n        </AnimatePresence>\n      </YStack>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/TabsUnderlinedDemo.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import {
+  AnimatePresence,
+  H5,
+  Stack,
+  Tabs,
+  XStack,
+  YStack,
+  styled
+} from "tamagui";
+function TabsUnderlinedDemo() {
+  return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(UnderlineTabs, {}) });
+}
+const TabsRovingIndicator = styled(Stack, {
+  name: "TabsRovingIndicator",
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8"
+      }
+    },
+    variants: {
+      active: {
+        true: {
+          backgroundColor: "$color8"
+        }
+      },
+      enter: {
+        true: {
+          opacity: 0
+        }
+      },
+      exit: {
+        true: {
+          opacity: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    position: "absolute",
+    backgroundColor: "$color5",
+    opacity: 1,
+    animation: "100ms"
+  }
+});
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isTop: { true: { y: -25, opacity: 0 } },
+    isBottom: { true: { y: 25, opacity: 0 } }
+  }
+});
+const UnderlineTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
+  const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
+  const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
+  const prevSelectionIndicatorLayout = useRef(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
+    setSelectionIndicatorLayout(newSize);
+  };
+  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
+  const direction = useMemo(() => {
+    if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y) {
+      return 0;
+    }
+    return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1;
+  }, [selectionIndicatorLayout]);
+  const enterVariant = direction === 1 ? "isTop" : direction === -1 ? "isBottom" : void 0;
+  const exitVariant = direction === 1 ? "isBottom" : direction === -1 ? "isTop" : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "vertical",
+      width: 300,
+      br: "$4",
+      ai: "center",
+      activationMode: "manual",
+      children: [
+        /* @__PURE__ */ jsx(YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ jsxs(Tabs.List, { loop: false, "aria-label": "Manage your account", disablePassBorderRadius: true, children: [
+          intentIndicatorLayout && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              width: "$0.5",
+              height: intentIndicatorLayout.height,
+              x: intentIndicatorLayout.x,
+              y: intentIndicatorLayout.y,
+              right: 0
+            }
+          ),
+          selectionIndicatorLayout && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              theme: "active",
+              active: true,
+              width: "$0.5",
+              height: selectionIndicatorLayout.height,
+              x: selectionIndicatorLayout.x,
+              y: selectionIndicatorLayout.y,
+              right: 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.Trigger,
+            {
+              unstyled: true,
+              color: "$color12",
+              value: "tab1",
+              onSelectedLayoutChange: handleUpdateSelectionIndicator,
+              onHoveredLayoutChange: setHoverIndicatorLayout,
+              onFocusedLayoutChange: setFocusIndicatorLayout,
+              children: "Profile"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.Trigger,
+            {
+              unstyled: true,
+              color: "$color12",
+              value: "tab2",
+              onSelectedLayoutChange: handleUpdateSelectionIndicator,
+              onHoveredLayoutChange: setHoverIndicatorLayout,
+              onFocusedLayoutChange: setFocusIndicatorLayout,
+              children: "Connections"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.Trigger,
+            {
+              unstyled: true,
+              color: "$color12",
+              value: "tab3",
+              onSelectedLayoutChange: handleUpdateSelectionIndicator,
+              onHoveredLayoutChange: setHoverIndicatorLayout,
+              onFocusedLayoutChange: setFocusIndicatorLayout,
+              children: "Notifications"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", y: 0, o: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TabsUnderlinedDemo
+};
+//# sourceMappingURL=TabsUnderlinedDemo.js.map

package/dist/esm/TabsUnderlinedDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TabsUnderlinedDemo.tsx"],
+  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsUnderlinedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <UnderlineTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isTop: { true: { y: -25, opacity: 0 } },\n    isBottom: { true: { y: 25, opacity: 0 } },\n  } as const,\n})\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from top\n   * 0: n/a\n   * 1: from bottom\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isTop' : direction === -1 ? 'isBottom' : undefined\n  const exitVariant =\n    direction === 1 ? 'isBottom' : direction === -1 ? 'isTop' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n      activationMode=\"manual\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <Tabs.List loop={false} aria-label=\"Manage your account\" disablePassBorderRadius>\n          {intentIndicatorLayout && (\n            <TabsRovingIndicator\n              width=\"$0.5\"\n              height={intentIndicatorLayout.height}\n              x={intentIndicatorLayout.x}\n              y={intentIndicatorLayout.y}\n              right={0}\n            />\n          )}\n          {selectionIndicatorLayout && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width=\"$0.5\"\n              height={selectionIndicatorLayout.height}\n              x={selectionIndicatorLayout.x}\n              y={selectionIndicatorLayout.y}\n              right={0}\n            />\n          )}\n          <Tabs.Trigger\n            unstyled\n            color=\"$color12\"\n            value=\"tab1\"\n            onSelectedLayoutChange={handleUpdateSelectionIndicator}\n            onHoveredLayoutChange={setHoverIndicatorLayout}\n            onFocusedLayoutChange={setFocusIndicatorLayout}\n          >\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger\n            unstyled\n            color=\"$color12\"\n            value=\"tab2\"\n            onSelectedLayoutChange={handleUpdateSelectionIndicator}\n            onHoveredLayoutChange={setHoverIndicatorLayout}\n            onFocusedLayoutChange={setFocusIndicatorLayout}\n          >\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger\n            unstyled\n            color=\"$color12\"\n            value=\"tab3\"\n            onSelectedLayoutChange={handleUpdateSelectionIndicator}\n            onHoveredLayoutChange={setHoverIndicatorLayout}\n            onFocusedLayoutChange={setFocusIndicatorLayout}\n          >\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" y={0} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/TabsUnderlinedDemo.mjs

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import {
+  AnimatePresence,
+  H5,
+  Stack,
+  Tabs,
+  XStack,
+  YStack,
+  styled
+} from "tamagui";
+function TabsUnderlinedDemo() {
+  return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(UnderlineTabs, {}) });
+}
+const TabsRovingIndicator = styled(Stack, {
+  name: "TabsRovingIndicator",
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8"
+      }
+    },
+    variants: {
+      active: {
+        true: {
+          backgroundColor: "$color8"
+        }
+      },
+      enter: {
+        true: {
+          opacity: 0
+        }
+      },
+      exit: {
+        true: {
+          opacity: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    position: "absolute",
+    backgroundColor: "$color5",
+    opacity: 1,
+    animation: "100ms"
+  }
+});
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isTop: { true: { y: -25, opacity: 0 } },
+    isBottom: { true: { y: 25, opacity: 0 } }
+  }
+});
+const UnderlineTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
+  const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
+  const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
+  const prevSelectionIndicatorLayout = useRef(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
+    setSelectionIndicatorLayout(newSize);
+  };
+  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
+  const direction = useMemo(() => {
+    if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y) {
+      return 0;
+    }
+    return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1;
+  }, [selectionIndicatorLayout]);
+  const enterVariant = direction === 1 ? "isTop" : direction === -1 ? "isBottom" : void 0;
+  const exitVariant = direction === 1 ? "isBottom" : direction === -1 ? "isTop" : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "vertical",
+      width: 300,
+      br: "$4",
+      ai: "center",
+      activationMode: "manual",
+      children: [
+        /* @__PURE__ */ jsx(YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ jsxs(Tabs.List, { loop: false, "aria-label": "Manage your account", disablePassBorderRadius: true, children: [
+          intentIndicatorLayout && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              width: "$0.5",
+              height: intentIndicatorLayout.height,
+              x: intentIndicatorLayout.x,
+              y: intentIndicatorLayout.y,
+              right: 0
+            }
+          ),
+          selectionIndicatorLayout && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              theme: "active",
+              active: true,
+              width: "$0.5",
+              height: selectionIndicatorLayout.height,
+              x: selectionIndicatorLayout.x,
+              y: selectionIndicatorLayout.y,
+              right: 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.Trigger,
+            {
+              unstyled: true,
+              color: "$color12",
+              value: "tab1",
+              onSelectedLayoutChange: handleUpdateSelectionIndicator,
+              onHoveredLayoutChange: setHoverIndicatorLayout,
+              onFocusedLayoutChange: setFocusIndicatorLayout,
+              children: "Profile"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.Trigger,
+            {
+              unstyled: true,
+              color: "$color12",
+              value: "tab2",
+              onSelectedLayoutChange: handleUpdateSelectionIndicator,
+              onHoveredLayoutChange: setHoverIndicatorLayout,
+              onFocusedLayoutChange: setFocusIndicatorLayout,
+              children: "Connections"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.Trigger,
+            {
+              unstyled: true,
+              color: "$color12",
+              value: "tab3",
+              onSelectedLayoutChange: handleUpdateSelectionIndicator,
+              onHoveredLayoutChange: setHoverIndicatorLayout,
+              onFocusedLayoutChange: setFocusIndicatorLayout,
+              children: "Notifications"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", y: 0, o: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TabsUnderlinedDemo
+};
+//# sourceMappingURL=TabsUnderlinedDemo.mjs.map

package/dist/esm/TabsUnderlinedDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TabsUnderlinedDemo.tsx"],
+  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsUnderlinedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <UnderlineTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isTop: { true: { y: -25, opacity: 0 } },\n    isBottom: { true: { y: 25, opacity: 0 } },\n  } as const,\n})\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from top\n   * 0: n/a\n   * 1: from bottom\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.y === prevSelectionIndicatorLayout.current.y\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.y > prevSelectionIndicatorLayout.current.y ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isTop' : direction === -1 ? 'isBottom' : undefined\n  const exitVariant =\n    direction === 1 ? 'isBottom' : direction === -1 ? 'isTop' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n      activationMode=\"manual\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <Tabs.List loop={false} aria-label=\"Manage your account\" disablePassBorderRadius>\n          {intentIndicatorLayout && (\n            <TabsRovingIndicator\n              width=\"$0.5\"\n              height={intentIndicatorLayout.height}\n              x={intentIndicatorLayout.x}\n              y={intentIndicatorLayout.y}\n              right={0}\n            />\n          )}\n          {selectionIndicatorLayout && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width=\"$0.5\"\n              height={selectionIndicatorLayout.height}\n              x={selectionIndicatorLayout.x}\n              y={selectionIndicatorLayout.y}\n              right={0}\n            />\n          )}\n          <Tabs.Trigger\n            unstyled\n            color=\"$color12\"\n            value=\"tab1\"\n            onSelectedLayoutChange={handleUpdateSelectionIndicator}\n            onHoveredLayoutChange={setHoverIndicatorLayout}\n            onFocusedLayoutChange={setFocusIndicatorLayout}\n          >\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger\n            unstyled\n            color=\"$color12\"\n            value=\"tab2\"\n            onSelectedLayoutChange={handleUpdateSelectionIndicator}\n            onHoveredLayoutChange={setHoverIndicatorLayout}\n            onFocusedLayoutChange={setFocusIndicatorLayout}\n          >\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger\n            unstyled\n            color=\"$color12\"\n            value=\"tab3\"\n            onSelectedLayoutChange={handleUpdateSelectionIndicator}\n            onHoveredLayoutChange={setHoverIndicatorLayout}\n            onFocusedLayoutChange={setFocusIndicatorLayout}\n          >\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" y={0} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

@@ -37,6 +37,8 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { TabsDemo } from "./TabsDemo";
+import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -73,6 +75,8 @@ export {
   SpinnerDemo,
   StacksDemo,
   SwitchDemo,
+  TabsAdvancedDemo,
+  TabsDemo,
   TextDemo,
   ThemeInverseDemo,
   TokensDemo,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/dist/esm/index.mjs

@@ -37,6 +37,8 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { TabsDemo } from "./TabsDemo";
+import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -73,6 +75,8 @@ export {
   SpinnerDemo,
   StacksDemo,
   SwitchDemo,
+  TabsAdvancedDemo,
+  TabsDemo,
   TextDemo,
   ThemeInverseDemo,
   TokensDemo,

package/dist/esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }