@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/TabsAdvancedDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","AnimatePresence","Button","H5","SizableText","Tabs","XStack","YStack","styled","demos","demosTitle","background","underline","TabsAdvancedDemo","demoIndex","setDemoIndex","useState","demo","children","TabsAdvancedUnderline","TabsAdvancedBackground","items","gap","position","b","l","$xxs","display","size","onPress","x","length","tabState","setTabState","activeAt","currentTab","intentAt","prevActiveAt","setCurrentTab","currentTab2","setIntentIndicator","intentAt2","setActiveIndicator","activeAt2","direction","handleOnInteraction","type","layout","value","onValueChange","orientation","p","height","flexDirection","activationMode","bg","rounded","TabsRovingIndicator","width","y","theme","List","loop","backgroundColor","Tab","unstyled","paddingHorizontal","onInteraction","exitBeforeEnter","custom","initial","AnimatedYStack","Content","forceMount","flex","justify","text","active","borderBottomLeftRadius","borderBottomRightRadius","paddingBottom","borderColor","borderBottomWidth","select","cursor"],"sources":["../../src/TabsAdvancedDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabsAdvancedDemo.native.js","names":["_Fragment"],"sources":["esm/TabsAdvancedDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from \"tamagui\";\nvar demos = [\n  \"background\",\n  \"underline\"\n];\nvar demosTitle = {\n  background: \"Background Indicator\",\n  underline: \"Underline Indicator\"\n};\nvar TabsAdvancedDemo = function() {\n  var [demoIndex, setDemoIndex] = React.useState(0);\n  var demo = demos[demoIndex];\n  return /* @__PURE__ */ _jsxs(_Fragment, {\n    children: [\n      demo === \"underline\" ? /* @__PURE__ */ _jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ _jsx(TabsAdvancedBackground, {}),\n      /* @__PURE__ */ _jsx(XStack, {\n        items: \"center\",\n        gap: \"4\",\n        position: \"absolute\",\n        b: \"3\",\n        l: \"4\",\n        display: \"xxs:none\",\n        children: /* @__PURE__ */ _jsx(Button, {\n          size: \"2\",\n          onPress: function() {\n            return setDemoIndex(function(x) {\n              return (x + 1) % demos.length;\n            });\n          },\n          children: demosTitle[demo]\n        })\n      })\n    ]\n  });\n};\nvar TabsAdvancedBackground = function() {\n  var [tabState, setTabState] = React.useState(\n    /**\n    * Layout of the Tab user might intend to select (hovering / focusing)\n    */\n    /**\n    * Layout of the Tab user selected\n    */\n    /**\n    * Used to get the direction of activation for animating the active indicator\n    */\n    {\n      activeAt: null,\n      currentTab: \"tab1\",\n      intentAt: null,\n      prevActiveAt: null\n    }\n  );\n  var setCurrentTab = function(currentTab2) {\n    return setTabState({\n      ...tabState,\n      currentTab: currentTab2\n    });\n  };\n  var setIntentIndicator = function(intentAt2) {\n    return setTabState({\n      ...tabState,\n      intentAt: intentAt2\n    });\n  };\n  var setActiveIndicator = function(activeAt2) {\n    return setTabState({\n      ...tabState,\n      prevActiveAt: tabState.activeAt,\n      activeAt: activeAt2\n    });\n  };\n  var { activeAt, intentAt, prevActiveAt, currentTab } = tabState;\n  var direction = (function() {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0;\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1;\n  })();\n  var handleOnInteraction = function(type, layout) {\n    if (type === \"select\") {\n      setActiveIndicator(layout);\n    } else {\n      setIntentIndicator(layout);\n    }\n  };\n  return /* @__PURE__ */ _jsxs(Tabs, {\n    value: currentTab,\n    onValueChange: setCurrentTab,\n    orientation: \"horizontal\",\n    size: \"4\",\n    p: \"2\",\n    height: 150,\n    flexDirection: \"column\",\n    bg: \"background\",\n    rounded: \"4\",\n    activationMode: \"manual\",\n    children: [\n      /* @__PURE__ */ _jsx(AnimatePresence, {\n        children: intentAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {\n          rounded: \"4\",\n          width: intentAt.width,\n          height: intentAt.height,\n          x: intentAt.x,\n          y: intentAt.y\n        })\n      }),\n      /* @__PURE__ */ _jsx(AnimatePresence, {\n        children: activeAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {\n          rounded: \"4\",\n          theme: \"accent\",\n          width: activeAt.width,\n          height: activeAt.height,\n          x: activeAt.x,\n          y: activeAt.y\n        })\n      }),\n      /* @__PURE__ */ _jsx(YStack, {\n        position: \"relative\",\n        children: /* @__PURE__ */ _jsxs(Tabs.List, {\n          loop: false,\n          \"aria-label\": \"Manage your account\",\n          gap: \"2\",\n          backgroundColor: \"transparent\",\n          children: [\n            /* @__PURE__ */ _jsx(Tabs.Tab, {\n              unstyled: true,\n              paddingHorizontal: \"3\",\n              value: \"tab1\",\n              onInteraction: handleOnInteraction,\n              children: /* @__PURE__ */ _jsx(SizableText, {\n                children: \"Profile\"\n              })\n            }),\n            /* @__PURE__ */ _jsx(Tabs.Tab, {\n              unstyled: true,\n              paddingHorizontal: \"3\",\n              value: \"tab2\",\n              onInteraction: handleOnInteraction,\n              children: /* @__PURE__ */ _jsx(SizableText, {\n                children: \"Connections\"\n              })\n            }),\n            /* @__PURE__ */ _jsx(Tabs.Tab, {\n              unstyled: true,\n              paddingHorizontal: \"3\",\n              value: \"tab3\",\n              onInteraction: handleOnInteraction,\n              children: /* @__PURE__ */ _jsx(SizableText, {\n                children: \"Notifications\"\n              })\n            })\n          ]\n        })\n      }),\n      /* @__PURE__ */ _jsx(AnimatePresence, {\n        mode: \"wait\",\n        custom: {\n          direction\n        },\n        initial: false,\n        children: /* @__PURE__ */ _jsx(AnimatedYStack, {\n          children: /* @__PURE__ */ _jsx(Tabs.Content, {\n            value: currentTab,\n            forceMount: true,\n            flex: 1,\n            justify: \"center\",\n            children: /* @__PURE__ */ _jsx(H5, {\n              text: \"center\",\n              children: currentTab\n            })\n          })\n        }, currentTab)\n      })\n    ]\n  });\n};\nvar TabsAdvancedUnderline = function() {\n  var [tabState, setTabState] = React.useState(\n    /**\n    * Layout of the Tab user might intend to select (hovering / focusing)\n    */\n    /**\n    * Layout of the Tab user selected\n    */\n    /**\n    * Used to get the direction of activation for animating the active indicator\n    */\n    {\n      activeAt: null,\n      currentTab: \"tab1\",\n      intentAt: null,\n      prevActiveAt: null\n    }\n  );\n  var setCurrentTab = function(currentTab2) {\n    return setTabState({\n      ...tabState,\n      currentTab: currentTab2\n    });\n  };\n  var setIntentIndicator = function(intentAt2) {\n    return setTabState({\n      ...tabState,\n      intentAt: intentAt2\n    });\n  };\n  var setActiveIndicator = function(activeAt2) {\n    return setTabState({\n      ...tabState,\n      prevActiveAt: tabState.activeAt,\n      activeAt: activeAt2\n    });\n  };\n  var { activeAt, intentAt, prevActiveAt, currentTab } = tabState;\n  var direction = (function() {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0;\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1;\n  })();\n  var handleOnInteraction = function(type, layout) {\n    if (type === \"select\") {\n      setActiveIndicator(layout);\n    } else {\n      setIntentIndicator(layout);\n    }\n  };\n  return /* @__PURE__ */ _jsxs(Tabs, {\n    value: currentTab,\n    onValueChange: setCurrentTab,\n    orientation: \"horizontal\",\n    size: \"4\",\n    height: 150,\n    flexDirection: \"column\",\n    bg: \"background\",\n    rounded: \"4\",\n    activationMode: \"manual\",\n    children: [\n      /* @__PURE__ */ _jsxs(YStack, {\n        position: \"relative\",\n        children: [\n          /* @__PURE__ */ _jsx(AnimatePresence, {\n            children: intentAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {\n              width: intentAt.width,\n              height: \"0-5\",\n              x: intentAt.x,\n              b: 0\n            })\n          }),\n          /* @__PURE__ */ _jsx(AnimatePresence, {\n            children: activeAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {\n              theme: \"accent\",\n              active: true,\n              width: activeAt.width,\n              height: \"0-5\",\n              x: activeAt.x,\n              b: 0\n            })\n          }),\n          /* @__PURE__ */ _jsxs(Tabs.List, {\n            loop: false,\n            \"aria-label\": \"Manage your account\",\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            paddingBottom: \"1-5\",\n            borderColor: \"color3\",\n            borderBottomWidth: \"0-5\",\n            backgroundColor: \"transparent\",\n            children: [\n              /* @__PURE__ */ _jsx(Tabs.Tab, {\n                unstyled: true,\n                paddingHorizontal: \"3\",\n                value: \"tab1\",\n                onInteraction: handleOnInteraction,\n                children: /* @__PURE__ */ _jsx(SizableText, {\n                  select: \"none\",\n                  cursor: \"default\",\n                  children: \"Profile\"\n                })\n              }),\n              /* @__PURE__ */ _jsx(Tabs.Tab, {\n                unstyled: true,\n                paddingHorizontal: \"3\",\n                value: \"tab2\",\n                onInteraction: handleOnInteraction,\n                children: /* @__PURE__ */ _jsx(SizableText, {\n                  select: \"none\",\n                  cursor: \"default\",\n                  children: \"Connections\"\n                })\n              }),\n              /* @__PURE__ */ _jsx(Tabs.Tab, {\n                unstyled: true,\n                paddingHorizontal: \"3\",\n                value: \"tab3\",\n                onInteraction: handleOnInteraction,\n                children: /* @__PURE__ */ _jsx(SizableText, {\n                  select: \"none\",\n                  cursor: \"default\",\n                  children: \"Notifications\"\n                })\n              })\n            ]\n          })\n        ]\n      }),\n      /* @__PURE__ */ _jsx(AnimatePresence, {\n        mode: \"wait\",\n        custom: {\n          direction\n        },\n        initial: false,\n        children: /* @__PURE__ */ _jsx(AnimatedYStack, {\n          children: /* @__PURE__ */ _jsx(Tabs.Content, {\n            value: currentTab,\n            forceMount: true,\n            flex: 1,\n            justify: \"center\",\n            flexBasis: \"auto\",\n            children: /* @__PURE__ */ _jsx(H5, {\n              text: \"center\",\n              children: currentTab\n            })\n          })\n        }, currentTab)\n      })\n    ]\n  });\n};\nvar TabsRovingIndicator = function(param) {\n  var { active, ...props } = param;\n  return /* @__PURE__ */ _jsx(YStack, {\n    position: \"absolute\",\n    backgroundColor: \"color5\",\n    opacity: \"0.7 enter:0 exit:0\",\n    transition: \"100ms\",\n    ...active && {\n      backgroundColor: \"color5\",\n      opacity: 0.6\n    },\n    ...props\n  });\n};\nvar AnimatedYStack = styled(YStack, {\n  flex: 1,\n  x: 0,\n  opacity: 1,\n  transition: \"100ms\",\n  variants: {\n    // 1 = right, 0 = nowhere, -1 = left\n    direction: {\n      number: function(direction) {\n        return {\n          x: `enter:${direction > 0 ? -25 : 25}px exit:${direction < 0 ? -25 : 25}px`,\n          opacity: \"enter:0 exit:0\",\n          zIndex: \"exit:0\"\n        };\n      }\n    }\n  }\n});\nexport {\n  TabsAdvancedDemo\n};\n//# sourceMappingURL=TabsAdvancedDemo.js.map\n"],"mappings":"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"}

package/dist/esm/TabsCustomDemo.mjs

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { Button, XStack, YStack, isWeb, resolveTokenSize, styled, withStaticProperties } from "tamagui";
+import { Tabs } from "@tamagui/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+const tabSizeVariant = (value, extras) => {
+	const { frame } = resolveTokenSize(value, {
+		tokens: extras.tokens,
+		font: extras.font
+	});
+	return {
+		borderRadius: frame.radius,
+		height: frame.size,
+		paddingHorizontal: frame.space
+	};
+};
+const demos = ["horizontal", "vertical"];
+const TabsFrame = styled(Tabs, { displayName: "TabsFrame" });
+const TabFrame = styled(Tabs.Tab, {
+	displayName: "TabsTrigger",
+	render: "button",
+	cursor: "pointer",
+	backgroundColor: "transparent",
+	variants: {
+		size: { Size: tabSizeVariant },
+		disabled: { true: { pointerEvents: "none" } },
+		active: { true: { backgroundColor: "hover:background focus:background" } }
+	}
+});
+const CONTENT_NAME = "TabsContent";
+const ContentFrame = styled(Tabs.Content, {
+	displayName: CONTENT_NAME,
+	flex: 1,
+	p: "6",
+	justify: "center",
+	items: "center",
+	bg: "color4",
+	rounded: "4"
+});
+const CustomTabs = withStaticProperties(TabsFrame, {
+	List: Tabs.List,
+	Tab: TabFrame,
+	Content: ContentFrame
+});
+function TabsCustomDemo() {
+	const [demo, setDemo] = useState(demos[0]);
+	return /* @__PURE__ */ jsxs(YStack, {
+		px: "4",
+		...isWeb && { position: "static" },
+		children: [/* @__PURE__ */ jsx(TabsView, { flexDirection: demo === "horizontal" ? "row" : "column" }), /* @__PURE__ */ jsx(XStack, {
+			items: "center",
+			gap: "4",
+			position: "absolute",
+			b: "3",
+			l: "4",
+			display: "xxs:none",
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "3",
+				onPress: () => setDemo(demo === "horizontal" ? "vertical" : "horizontal"),
+				children: /* @__PURE__ */ jsx(Button.Text, {
+					textTransform: "capitalize",
+					children: demo
+				})
+			})
+		})]
+	});
+}
+const content = [
+	"Home",
+	"Profile",
+	"Settings"
+];
+const TabsView = ({ flexDirection = "row" }) => {
+	return /* @__PURE__ */ jsxs(CustomTabs, {
+		flexDirection: flexDirection === "column" ? "row" : "column",
+		defaultValue: content[0],
+		children: [/* @__PURE__ */ jsx(CustomTabs.List, {
+			flexDirection,
+			children: content.map((name, index) => /* @__PURE__ */ jsx(CustomTabs.Tab, {
+				value: name,
+				activeStyle: { backgroundColor: "transparent" },
+				children: name
+			}, index))
+		}), content.map((name, index) => /* @__PURE__ */ jsx(CustomTabs.Content, {
+			value: name,
+			children: name
+		}, index))]
+	});
+};
+
+export { ContentFrame, CustomTabs, TabFrame, TabsCustomDemo, TabsFrame };
+//# sourceMappingURL=TabsCustomDemo.mjs.map

package/dist/esm/TabsCustomDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsCustomDemo.js","names":["TabsBehavior"],"sources":["esm/TabsCustomDemo.js"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  Button,\n  XStack,\n  YStack,\n  isWeb,\n  resolveTokenSize,\n  styled,\n  withStaticProperties\n} from \"tamagui\";\nimport { Tabs as TabsBehavior } from \"@tamagui/tabs\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst tabSizeVariant = (value, extras) => {\n  const { frame } = resolveTokenSize(value, {\n    tokens: extras.tokens,\n    font: extras.font\n  });\n  return {\n    borderRadius: frame.radius,\n    height: frame.size,\n    paddingHorizontal: frame.space\n  };\n};\nconst demos = [\"horizontal\", \"vertical\"];\nconst TabsFrame = styled(TabsBehavior, {\n  displayName: \"TabsFrame\"\n});\nconst TabFrame = styled(TabsBehavior.Tab, {\n  displayName: \"TabsTrigger\",\n  render: \"button\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  variants: {\n    size: {\n      Size: tabSizeVariant\n    },\n    disabled: {\n      true: {\n        pointerEvents: \"none\"\n      }\n    },\n    active: {\n      true: {\n        backgroundColor: \"hover:background focus:background\"\n      }\n    }\n  }\n});\nconst CONTENT_NAME = \"TabsContent\";\nconst ContentFrame = styled(TabsBehavior.Content, {\n  displayName: CONTENT_NAME,\n  flex: 1,\n  p: \"6\",\n  justify: \"center\",\n  items: \"center\",\n  bg: \"color4\",\n  rounded: \"4\"\n});\nconst CustomTabs = withStaticProperties(TabsFrame, {\n  List: TabsBehavior.List,\n  Tab: TabFrame,\n  Content: ContentFrame\n});\nfunction TabsCustomDemo() {\n  const [demo, setDemo] = useState(demos[0]);\n  return (\n    // web only fix for position relative\n    /* @__PURE__ */ jsxs(YStack, { px: \"4\", ...isWeb && { position: \"static\" }, children: [\n      /* @__PURE__ */ jsx(TabsView, { flexDirection: demo === \"horizontal\" ? \"row\" : \"column\" }),\n      /* @__PURE__ */ jsx(XStack, { items: \"center\", gap: \"4\", position: \"absolute\", b: \"3\", l: \"4\", display: \"xxs:none\", children: /* @__PURE__ */ jsx(\n        Button,\n        {\n          size: \"3\",\n          onPress: () => setDemo(demo === \"horizontal\" ? \"vertical\" : \"horizontal\"),\n          children: /* @__PURE__ */ jsx(Button.Text, { textTransform: \"capitalize\", children: demo })\n        }\n      ) })\n    ] })\n  );\n}\nconst content = [\"Home\", \"Profile\", \"Settings\"];\nconst TabsView = ({ flexDirection = \"row\" }) => {\n  return /* @__PURE__ */ jsxs(\n    CustomTabs,\n    {\n      flexDirection: flexDirection === \"column\" ? \"row\" : \"column\",\n      defaultValue: content[0],\n      children: [\n        /* @__PURE__ */ jsx(CustomTabs.List, { flexDirection, children: content.map((name, index) => /* @__PURE__ */ jsx(\n          CustomTabs.Tab,\n          {\n            value: name,\n            activeStyle: { backgroundColor: \"transparent\" },\n            children: name\n          },\n          index\n        )) }),\n        content.map((name, index) => /* @__PURE__ */ jsx(CustomTabs.Content, { value: name, children: name }, index))\n      ]\n    }\n  );\n};\nexport {\n  ContentFrame,\n  CustomTabs,\n  TabFrame,\n  TabsCustomDemo,\n  TabsFrame\n};\n//# sourceMappingURL=TabsCustomDemo.js.map\n"],"mappings":";;;;;;AAYA,MAAM,kBAAkB,OAAO,WAAW;CACxC,MAAM,EAAE,UAAU,iBAAiB,OAAO;EACxC,QAAQ,OAAO;EACf,MAAM,OAAO;CACf,CAAC;CACD,OAAO;EACL,cAAc,MAAM;EACpB,QAAQ,MAAM;EACd,mBAAmB,MAAM;CAC3B;AACF;AACA,MAAM,QAAQ,CAAC,cAAc,UAAU;AACvC,MAAM,YAAY,OAAOA,MAAc,EACrC,aAAa,YACf,CAAC;AACD,MAAM,WAAW,OAAOA,KAAa,KAAK;CACxC,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,iBAAiB;CACjB,UAAU;EACR,MAAM,EACJ,MAAM,eACR;EACA,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF;EACA,QAAQ,EACN,MAAM,EACJ,iBAAiB,oCACnB,EACF;CACF;AACF,CAAC;AACD,MAAM,eAAe;AACrB,MAAM,eAAe,OAAOA,KAAa,SAAS;CAChD,aAAa;CACb,MAAM;CACN,GAAG;CACH,SAAS;CACT,OAAO;CACP,IAAI;CACJ,SAAS;AACX,CAAC;AACD,MAAM,aAAa,qBAAqB,WAAW;CACjD,MAAMA,KAAa;CACnB,KAAK;CACL,SAAS;AACX,CAAC;AACD,SAAS,iBAAiB;CACxB,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM,EAAE;CACzC,OAEkB,qBAAK,QAAQ;EAAE,IAAI;EAAK,GAAG,SAAS,EAAE,UAAU,SAAS;EAAG,UAAU,CACpE,oBAAI,UAAU,EAAE,eAAe,SAAS,eAAe,QAAQ,SAAS,CAAC,GACzE,oBAAI,QAAQ;GAAE,OAAO;GAAU,KAAK;GAAK,UAAU;GAAY,GAAG;GAAK,GAAG;GAAK,SAAS;GAAY,UAA0B,oBAC5I,QACA;IACE,MAAM;IACN,eAAe,QAAQ,SAAS,eAAe,aAAa,YAAY;IACxE,UAA0B,oBAAI,OAAO,MAAM;KAAE,eAAe;KAAc,UAAU;IAAK,CAAC;GAC5F,CACF;EAAE,CAAC,CACL;CAAE,CAAC;AAEP;AACA,MAAM,UAAU;CAAC;CAAQ;CAAW;AAAU;AAC9C,MAAM,YAAY,EAAE,gBAAgB,YAAY;CAC9C,OAAuB,qBACrB,YACA;EACE,eAAe,kBAAkB,WAAW,QAAQ;EACpD,cAAc,QAAQ;EACtB,UAAU,CACQ,oBAAI,WAAW,MAAM;GAAE;GAAe,UAAU,QAAQ,KAAK,MAAM,UAA0B,oBAC3G,WAAW,KACX;IACE,OAAO;IACP,aAAa,EAAE,iBAAiB,cAAc;IAC9C,UAAU;GACZ,GACA,KACF,CAAC;EAAE,CAAC,GACJ,QAAQ,KAAK,MAAM,UAA0B,oBAAI,WAAW,SAAS;GAAE,OAAO;GAAM,UAAU;EAAK,GAAG,KAAK,CAAC,CAC9G;CACF,CACF;AACF"}

package/dist/esm/TabsCustomDemo.native.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, XStack, YStack, isWeb, resolveTokenSize, styled, withStaticProperties } from "tamagui";
+import { Tabs } from "@tamagui/tabs";
+
+var tabSizeVariant = function(value, extras) {
+	var { frame } = resolveTokenSize(value, {
+		tokens: extras.tokens,
+		font: extras.font
+	});
+	return {
+		borderRadius: frame.radius,
+		height: frame.size,
+		paddingHorizontal: frame.space
+	};
+};
+var demos = ["horizontal", "vertical"];
+var TabsFrame = styled(Tabs, { displayName: "TabsFrame" });
+var TabFrame = styled(Tabs.Tab, {
+	displayName: "TabsTrigger",
+	render: "button",
+	cursor: "pointer",
+	backgroundColor: "transparent",
+	variants: {
+		size: { Size: tabSizeVariant },
+		disabled: { true: { pointerEvents: "none" } },
+		active: { true: { backgroundColor: "hover:background focus:background" } }
+	}
+});
+var CONTENT_NAME = "TabsContent";
+var ContentFrame = styled(Tabs.Content, {
+	displayName: CONTENT_NAME,
+	flex: 1,
+	p: "6",
+	justify: "center",
+	items: "center",
+	bg: "color4",
+	rounded: "4"
+});
+var CustomTabs = withStaticProperties(TabsFrame, {
+	List: Tabs.List,
+	Tab: TabFrame,
+	Content: ContentFrame
+});
+function TabsCustomDemo() {
+	var [demo, setDemo] = useState(demos[0]);
+	return /* @__PURE__ */ jsxs(YStack, {
+		px: "4",
+		...isWeb && { position: "static" },
+		children: [/* @__PURE__ */ jsx(TabsView, { flexDirection: demo === "horizontal" ? "row" : "column" }), /* @__PURE__ */ jsx(XStack, {
+			items: "center",
+			gap: "4",
+			position: "absolute",
+			b: "3",
+			l: "4",
+			display: "xxs:none",
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "3",
+				onPress: function() {
+					return setDemo(demo === "horizontal" ? "vertical" : "horizontal");
+				},
+				children: /* @__PURE__ */ jsx(Button.Text, {
+					textTransform: "capitalize",
+					children: demo
+				})
+			})
+		})]
+	});
+}
+var content = [
+	"Home",
+	"Profile",
+	"Settings"
+];
+var TabsView = function(param) {
+	var { flexDirection = "row" } = param;
+	return /* @__PURE__ */ jsxs(CustomTabs, {
+		flexDirection: flexDirection === "column" ? "row" : "column",
+		defaultValue: content[0],
+		children: [/* @__PURE__ */ jsx(CustomTabs.List, {
+			flexDirection,
+			children: content.map(function(name, index) {
+				return /* @__PURE__ */ jsx(CustomTabs.Tab, {
+					value: name,
+					activeStyle: { backgroundColor: "transparent" },
+					children: name
+				}, index);
+			})
+		}), content.map(function(name, index) {
+			return /* @__PURE__ */ jsx(CustomTabs.Content, {
+				value: name,
+				children: name
+			}, index);
+		})]
+	});
+};
+
+export { ContentFrame, CustomTabs, TabFrame, TabsCustomDemo, TabsFrame };
+//# sourceMappingURL=TabsCustomDemo.native.js.map

package/dist/esm/TabsCustomDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsCustomDemo.native.js","names":["TabsBehavior"],"sources":["esm/TabsCustomDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useState } from \"react\";\nimport { Button, XStack, YStack, isWeb, resolveTokenSize, styled, withStaticProperties } from \"tamagui\";\nimport { Tabs as TabsBehavior } from \"@tamagui/tabs\";\nvar tabSizeVariant = function(value, extras) {\n  var { frame } = resolveTokenSize(value, {\n    tokens: extras.tokens,\n    font: extras.font\n  });\n  return {\n    borderRadius: frame.radius,\n    height: frame.size,\n    paddingHorizontal: frame.space\n  };\n};\nvar demos = [\n  \"horizontal\",\n  \"vertical\"\n];\nvar TabsFrame = styled(TabsBehavior, {\n  displayName: \"TabsFrame\"\n});\nvar TabFrame = styled(TabsBehavior.Tab, {\n  displayName: \"TabsTrigger\",\n  render: \"button\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  variants: {\n    size: {\n      Size: tabSizeVariant\n    },\n    disabled: {\n      true: {\n        pointerEvents: \"none\"\n      }\n    },\n    active: {\n      true: {\n        backgroundColor: \"hover:background focus:background\"\n      }\n    }\n  }\n});\nvar CONTENT_NAME = \"TabsContent\";\nvar ContentFrame = styled(TabsBehavior.Content, {\n  displayName: CONTENT_NAME,\n  flex: 1,\n  p: \"6\",\n  justify: \"center\",\n  items: \"center\",\n  bg: \"color4\",\n  rounded: \"4\"\n});\nvar CustomTabs = withStaticProperties(TabsFrame, {\n  List: TabsBehavior.List,\n  Tab: TabFrame,\n  Content: ContentFrame\n});\nfunction TabsCustomDemo() {\n  var [demo, setDemo] = useState(demos[0]);\n  return (\n    // web only fix for position relative\n    /* @__PURE__ */ _jsxs(YStack, {\n      px: \"4\",\n      ...isWeb && {\n        position: \"static\"\n      },\n      children: [\n        /* @__PURE__ */ _jsx(TabsView, {\n          flexDirection: demo === \"horizontal\" ? \"row\" : \"column\"\n        }),\n        /* @__PURE__ */ _jsx(XStack, {\n          items: \"center\",\n          gap: \"4\",\n          position: \"absolute\",\n          b: \"3\",\n          l: \"4\",\n          display: \"xxs:none\",\n          children: /* @__PURE__ */ _jsx(Button, {\n            size: \"3\",\n            onPress: function() {\n              return setDemo(demo === \"horizontal\" ? \"vertical\" : \"horizontal\");\n            },\n            children: /* @__PURE__ */ _jsx(Button.Text, {\n              textTransform: \"capitalize\",\n              children: demo\n            })\n          })\n        })\n      ]\n    })\n  );\n}\nvar content = [\n  \"Home\",\n  \"Profile\",\n  \"Settings\"\n];\nvar TabsView = function(param) {\n  var { flexDirection = \"row\" } = param;\n  return /* @__PURE__ */ _jsxs(CustomTabs, {\n    flexDirection: flexDirection === \"column\" ? \"row\" : \"column\",\n    defaultValue: content[0],\n    children: [\n      /* @__PURE__ */ _jsx(CustomTabs.List, {\n        flexDirection,\n        children: content.map(function(name, index) {\n          return /* @__PURE__ */ _jsx(CustomTabs.Tab, {\n            value: name,\n            activeStyle: {\n              backgroundColor: \"transparent\"\n            },\n            children: name\n          }, index);\n        })\n      }),\n      content.map(function(name, index) {\n        return /* @__PURE__ */ _jsx(CustomTabs.Content, {\n          value: name,\n          children: name\n        }, index);\n      })\n    ]\n  });\n};\nexport {\n  ContentFrame,\n  CustomTabs,\n  TabFrame,\n  TabsCustomDemo,\n  TabsFrame\n};\n//# sourceMappingURL=TabsCustomDemo.js.map\n"],"mappings":";;;;;;AAIA,IAAI,iBAAiB,SAAS,OAAO,QAAQ;CAC3C,IAAI,EAAE,UAAU,iBAAiB,OAAO;EACtC,QAAQ,OAAO;EACf,MAAM,OAAO;CACf,CAAC;CACD,OAAO;EACL,cAAc,MAAM;EACpB,QAAQ,MAAM;EACd,mBAAmB,MAAM;CAC3B;AACF;AACA,IAAI,QAAQ,CACV,cACA,UACF;AACA,IAAI,YAAY,OAAOA,MAAc,EACnC,aAAa,YACf,CAAC;AACD,IAAI,WAAW,OAAOA,KAAa,KAAK;CACtC,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,iBAAiB;CACjB,UAAU;EACR,MAAM,EACJ,MAAM,eACR;EACA,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF;EACA,QAAQ,EACN,MAAM,EACJ,iBAAiB,oCACnB,EACF;CACF;AACF,CAAC;AACD,IAAI,eAAe;AACnB,IAAI,eAAe,OAAOA,KAAa,SAAS;CAC9C,aAAa;CACb,MAAM;CACN,GAAG;CACH,SAAS;CACT,OAAO;CACP,IAAI;CACJ,SAAS;AACX,CAAC;AACD,IAAI,aAAa,qBAAqB,WAAW;CAC/C,MAAMA,KAAa;CACnB,KAAK;CACL,SAAS;AACX,CAAC;AACD,SAAS,iBAAiB;CACxB,IAAI,CAAC,MAAM,WAAW,SAAS,MAAM,EAAE;CACvC,OAEkB,qBAAM,QAAQ;EAC5B,IAAI;EACJ,GAAG,SAAS,EACV,UAAU,SACZ;EACA,UAAU,CACQ,oBAAK,UAAU,EAC7B,eAAe,SAAS,eAAe,QAAQ,SACjD,CAAC,GACe,oBAAK,QAAQ;GAC3B,OAAO;GACP,KAAK;GACL,UAAU;GACV,GAAG;GACH,GAAG;GACH,SAAS;GACT,UAA0B,oBAAK,QAAQ;IACrC,MAAM;IACN,SAAS,WAAW;KAClB,OAAO,QAAQ,SAAS,eAAe,aAAa,YAAY;IAClE;IACA,UAA0B,oBAAK,OAAO,MAAM;KAC1C,eAAe;KACf,UAAU;IACZ,CAAC;GACH,CAAC;EACH,CAAC,CACH;CACF,CAAC;AAEL;AACA,IAAI,UAAU;CACZ;CACA;CACA;AACF;AACA,IAAI,WAAW,SAAS,OAAO;CAC7B,IAAI,EAAE,gBAAgB,UAAU;CAChC,OAAuB,qBAAM,YAAY;EACvC,eAAe,kBAAkB,WAAW,QAAQ;EACpD,cAAc,QAAQ;EACtB,UAAU,CACQ,oBAAK,WAAW,MAAM;GACpC;GACA,UAAU,QAAQ,IAAI,SAAS,MAAM,OAAO;IAC1C,OAAuB,oBAAK,WAAW,KAAK;KAC1C,OAAO;KACP,aAAa,EACX,iBAAiB,cACnB;KACA,UAAU;IACZ,GAAG,KAAK;GACV,CAAC;EACH,CAAC,GACD,QAAQ,IAAI,SAAS,MAAM,OAAO;GAChC,OAAuB,oBAAK,WAAW,SAAS;IAC9C,OAAO;IACP,UAAU;GACZ,GAAG,KAAK;EACV,CAAC,CACH;CACF,CAAC;AACH"}

package/dist/esm/TabsDemo.mjs

@@ -1,184 +1,170 @@
-import React from "react";
-import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb, useWindowDimensions } from "tamagui";
+import React, { createElement } from "react";
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+
 const demos = ["horizontal", "vertical"];
 const demosTitle = {
-  horizontal: "Horizontal",
-  vertical: "Vertical"
+	horizontal: "Horizontal",
+	vertical: "Vertical"
 };
 function TabsDemo() {
-  const [demoIndex, setDemoIndex] = React.useState(0);
-  const demo = demos[demoIndex];
-  return /* @__PURE__ */jsxs(YStack, {
-    px: "$4",
-    ...(isWeb && {
-      position: "unset"
-    }),
-    children: [demo === "horizontal" ? /* @__PURE__ */jsx(HorizontalTabs, {}) : /* @__PURE__ */jsx(VerticalTabs, {}), /* @__PURE__ */jsx(XStack, {
-      items: "center",
-      gap: "$4",
-      position: "absolute",
-      b: "$3",
-      l: "$4",
-      $maxXs: {
-        display: "none"
-      },
-      children: /* @__PURE__ */jsx(Button, {
-        size: "$2",
-        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
-        children: demosTitle[demo]
-      })
-    })]
-  });
+	const [demoIndex, setDemoIndex] = React.useState(0);
+	const demo = demos[demoIndex];
+	return /* @__PURE__ */ jsxs(YStack, {
+		px: "4",
+		...isWeb && { position: "unset" },
+		children: [demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}), /* @__PURE__ */ jsx(XStack, {
+			items: "center",
+			gap: "4",
+			position: "absolute",
+			b: "3",
+			l: "4",
+			display: "max-xs:none",
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "2",
+				onPress: () => setDemoIndex((x) => (x + 1) % demos.length),
+				children: demosTitle[demo]
+			})
+		})]
+	});
 }
 const HorizontalTabs = () => {
-  const {
-    width
-  } = useWindowDimensions();
-  return /* @__PURE__ */jsxs(Tabs, {
-    defaultValue: "tab1",
-    orientation: "horizontal",
-    flexDirection: "column",
-    $maxMd: {
-      width: width - 32
-    },
-    width: 400,
-    height: 150,
-    rounded: "$4",
-    borderWidth: "$0.25",
-    borderColor: "$borderColor",
-    children: [/* @__PURE__ */jsxs(Tabs.List, {
-      "aria-label": "Manage your account",
-      children: [/* @__PURE__ */jsx(Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        flex: 1,
-        value: "tab1",
-        children: /* @__PURE__ */jsx(SizableText, {
-          fontFamily: "$body",
-          text: "center",
-          ellipsis: true,
-          children: "Profile"
-        })
-      }), /* @__PURE__ */jsx(Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        flex: 1,
-        value: "tab2",
-        children: /* @__PURE__ */jsx(SizableText, {
-          fontFamily: "$body",
-          text: "center",
-          ellipsis: true,
-          children: "Connections"
-        })
-      }), /* @__PURE__ */jsx(Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        flex: 1,
-        value: "tab3",
-        children: /* @__PURE__ */jsx(SizableText, {
-          fontFamily: "$body",
-          text: "center",
-          ellipsis: true,
-          children: "Notifications"
-        })
-      })]
-    }), /* @__PURE__ */jsx(Separator, {}), /* @__PURE__ */jsx(TabsContent, {
-      value: "tab1",
-      children: /* @__PURE__ */jsx(H5, {
-        children: "Profile"
-      })
-    }), /* @__PURE__ */jsx(TabsContent, {
-      value: "tab2",
-      children: /* @__PURE__ */jsx(H5, {
-        children: "Connections"
-      })
-    }), /* @__PURE__ */jsx(TabsContent, {
-      value: "tab3",
-      children: /* @__PURE__ */jsx(H5, {
-        children: "Notifications"
-      })
-    })]
-  });
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: "tab1",
+		orientation: "horizontal",
+		flexDirection: "column",
+		width: "400px max-md:calc(100vw - 32px)",
+		height: 150,
+		rounded: "4",
+		borderWidth: "0-25",
+		borderColor: "border-color",
+		children: [
+			/* @__PURE__ */ jsxs(Tabs.List, {
+				"aria-label": "Manage your account",
+				children: [
+					/* @__PURE__ */ jsx(Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab1",
+						children: /* @__PURE__ */ jsx(SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Profile"
+						})
+					}),
+					/* @__PURE__ */ jsx(Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab2",
+						children: /* @__PURE__ */ jsx(SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Connections"
+						})
+					}),
+					/* @__PURE__ */ jsx(Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						flex: 1,
+						value: "tab3",
+						children: /* @__PURE__ */ jsx(SizableText, {
+							fontFamily: "body",
+							text: "center",
+							ellipsis: true,
+							children: "Notifications"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Separator, {}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "tab1",
+				children: /* @__PURE__ */ jsx(H5, { children: "Profile" })
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "tab2",
+				children: /* @__PURE__ */ jsx(H5, { children: "Connections" })
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "tab3",
+				children: /* @__PURE__ */ jsx(H5, { children: "Notifications" })
+			})
+		]
+	});
 };
 const VerticalTabs = () => {
-  return /* @__PURE__ */jsxs(Tabs, {
-    defaultValue: "tab1",
-    flexDirection: "row",
-    orientation: "vertical",
-    width: 400,
-    rounded: "$4",
-    borderWidth: "$0.25",
-    overflow: "hidden",
-    borderColor: "$borderColor",
-    children: [/* @__PURE__ */jsxs(Tabs.List, {
-      "aria-label": "Manage your account",
-      children: [/* @__PURE__ */jsx(Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        value: "tab1",
-        children: /* @__PURE__ */jsx(SizableText, {
-          children: "Profile"
-        })
-      }), /* @__PURE__ */jsx(Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        value: "tab2",
-        children: /* @__PURE__ */jsx(SizableText, {
-          children: "Connections"
-        })
-      }), /* @__PURE__ */jsx(Tabs.Tab, {
-        activeStyle: {
-          backgroundColor: "$color3"
-        },
-        value: "tab3",
-        children: /* @__PURE__ */jsx(SizableText, {
-          children: "Notifications"
-        })
-      })]
-    }), /* @__PURE__ */jsx(Separator, {
-      vertical: true
-    }), /* @__PURE__ */jsx(TabsContent, {
-      value: "tab1",
-      children: /* @__PURE__ */jsx(H5, {
-        text: "center",
-        children: "Profile"
-      })
-    }), /* @__PURE__ */jsx(TabsContent, {
-      value: "tab2",
-      children: /* @__PURE__ */jsx(H5, {
-        text: "center",
-        children: "Connections"
-      })
-    }), /* @__PURE__ */jsx(TabsContent, {
-      value: "tab3",
-      children: /* @__PURE__ */jsx(H5, {
-        text: "center",
-        children: "Notifications"
-      })
-    })]
-  });
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: "tab1",
+		flexDirection: "row",
+		width: 400,
+		rounded: "4",
+		borderWidth: "0-25",
+		overflow: "hidden",
+		borderColor: "border-color",
+		orientation: "vertical",
+		children: [
+			/* @__PURE__ */ jsxs(Tabs.List, {
+				"aria-label": "Manage your account",
+				children: [
+					/* @__PURE__ */ jsx(Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab1",
+						children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
+					}),
+					/* @__PURE__ */ jsx(Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab2",
+						children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
+					}),
+					/* @__PURE__ */ jsx(Tabs.Tab, {
+						activeStyle: { backgroundColor: "color3" },
+						value: "tab3",
+						children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Separator, { vertical: true }),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "tab1",
+				children: /* @__PURE__ */ jsx(H5, {
+					text: "center",
+					children: "Profile"
+				})
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "tab2",
+				children: /* @__PURE__ */ jsx(H5, {
+					text: "center",
+					children: "Connections"
+				})
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "tab3",
+				children: /* @__PURE__ */ jsx(H5, {
+					text: "center",
+					children: "Notifications"
+				})
+			})
+		]
+	});
 };
-const TabsContent = props => {
-  return /* @__PURE__ */jsx(Tabs.Content, {
-    bg: "$background",
-    p: "$2",
-    items: "center",
-    justify: "center",
-    flex: 1,
-    borderColor: "$background",
-    rounded: "$2",
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderWidth: "$2",
-    ...props,
-    children: props.children
-  }, "tab3");
+const TabsContent = (props) => {
+	return /* @__PURE__ */ createElement(Tabs.Content, {
+		bg: "background",
+		p: "2",
+		items: "center",
+		justify: "center",
+		flex: 1,
+		borderColor: "background",
+		rounded: "2",
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 0,
+		borderWidth: "2",
+		...props,
+		key: "tab3"
+	}, props.children);
 };
+
 export { TabsDemo };
 //# sourceMappingURL=TabsDemo.mjs.map