@tamagui/demos 1.14.0 → 1.14.2

package/dist/esm/TabsAdvancedDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\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 ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | 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: TabsTabProps['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=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\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 TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | 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: TabsTabProps['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=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\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        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\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: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\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": ["Fragment", "jsx", "jsxs", "useState", "AnimatePresence", "Button", "H5", "SizableText", "Stack", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "x", "tabState", "setTabState", "setCurrentTab", "currentTab", "setIntentIndicator", "intentAt", "setActiveIndicator", "activeAt", "prevActiveAt", "direction", "enterVariant", "exitVariant", "handleOnInteraction", "type", "layout", "TabsRovingIndicator", "AnimatedYStack"]
+  "mappings": "AAyBI,mBAC0B,KAD1B;AAzBJ,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,QAAQ,CAAC,cAAc,WAAW;AACxC,MAAM,aAAqD;AAAA,EACzD,YAAY;AAAA,EACZ,WAAW;AACb;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAC5B,SACE,iCACG;AAAA,aAAS,cAAc,oBAAC,yBAAsB,IAAK,oBAAC,0BAAuB;AAAA,IAE5E,oBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE,8BAAC,UAAO,MAAK,MAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,GACxE,qBAAW,IAAI,GAClB,GACF;AAAA,KACF;AAEJ;AAEA,MAAM,yBAAyB,MAAM;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAc7B;AAAA,IACD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,gBAAgB,CAACA,gBAAuB,YAAY,EAAE,GAAG,UAAU,YAAAA,YAAW,CAAC;AACrF,QAAM,qBAAqB,CAACC,cAAa,YAAY,EAAE,GAAG,UAAU,UAAAA,UAAS,CAAC;AAC9E,QAAM,qBAAqB,CAACC,cAC1B,YAAY,EAAE,GAAG,UAAU,cAAc,SAAS,UAAU,UAAAA,UAAS,CAAC;AACxE,QAAM,EAAE,UAAU,UAAU,cAAc,WAAW,IAAI;AAOzD,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,YAAY,CAAC,gBAAgB,SAAS,MAAM,aAAa,GAAG;AAC/D,aAAO;AAAA,IACT;AACA,WAAO,SAAS,IAAI,aAAa,IAAI,KAAK;AAAA,EAC5C,GAAG;AAEH,QAAM,eACJ,cAAc,IAAI,WAAW,cAAc,KAAK,YAAY;AAC9D,QAAM,cACJ,cAAc,IAAI,YAAY,cAAc,KAAK,WAAW;AAE9D,QAAM,sBAAqD,CAAC,MAAM,WAAW;AAC3E,QAAI,SAAS,UAAU;AACrB,yBAAmB,MAAM;AAAA,IAC3B,OAAO;AACL,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,cAAa;AAAA,MACb,UAAS;AAAA,MAET;AAAA,6BAAC,UACC;AAAA,8BAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAa;AAAA,cACb,OAAO,SAAS;AAAA,cAChB,QAAQ,SAAS;AAAA,cACjB,GAAG,SAAS;AAAA,cACZ,GAAG,SAAS;AAAA;AAAA,UACd,GAEJ;AAAA,UACA,oBAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAO,SAAS;AAAA,cAChB,QAAQ,SAAS;AAAA,cACjB,GAAG,SAAS;AAAA,cACZ,GAAG,SAAS;AAAA;AAAA,UACd,GAEJ;AAAA,UAEA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,yBAAuB;AAAA,cACvB,MAAM;AAAA,cACN,cAAW;AAAA,cACX,OAAM;AAAA,cACN,iBAAgB;AAAA,cAEhB;AAAA,oCAAC,KAAK,KAAL,EAAS,UAAQ,MAAC,OAAM,QAAO,eAAe,qBAC7C,8BAAC,eAAY,qBAAO,GACtB;AAAA,gBACA,oBAAC,KAAK,KAAL,EAAS,UAAQ,MAAC,OAAM,QAAO,eAAe,qBAC7C,8BAAC,eAAY,yBAAW,GAC1B;AAAA,gBACA,oBAAC,KAAK,KAAL,EAAS,UAAQ,MAAC,OAAM,QAAO,eAAe,qBAC7C,8BAAC,eAAY,2BAAa,GAC5B;AAAA;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,iBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEA,8BAAC,kBAAgC,WAAU,SAAQ,GAAG,GAAG,SAAS,GAAG,MAAM,GACzE,8BAAC,KAAK,SAAL,EAAa,OAAO,YAAY,YAAU,MAAC,MAAM,GAAG,gBAAe,UAClE,8BAAC,MAAG,WAAU,UAAU,sBAAW,GACrC,KAHmB,UAIrB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAc7B;AAAA,IACD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,gBAAgB,CAACF,gBAAuB,YAAY,EAAE,GAAG,UAAU,YAAAA,YAAW,CAAC;AACrF,QAAM,qBAAqB,CAACC,cAAa,YAAY,EAAE,GAAG,UAAU,UAAAA,UAAS,CAAC;AAC9E,QAAM,qBAAqB,CAACC,cAC1B,YAAY,EAAE,GAAG,UAAU,cAAc,SAAS,UAAU,UAAAA,UAAS,CAAC;AACxE,QAAM,EAAE,UAAU,UAAU,cAAc,WAAW,IAAI;AAOzD,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,YAAY,CAAC,gBAAgB,SAAS,MAAM,aAAa,GAAG;AAC/D,aAAO;AAAA,IACT;AACA,WAAO,SAAS,IAAI,aAAa,IAAI,KAAK;AAAA,EAC5C,GAAG;AAEH,QAAM,eACJ,cAAc,IAAI,WAAW,cAAc,KAAK,YAAY;AAC9D,QAAM,cACJ,cAAc,IAAI,YAAY,cAAc,KAAK,WAAW;AAE9D,QAAM,sBAAqD,CAAC,MAAM,WAAW;AAC3E,QAAI,SAAS,UAAU;AACrB,yBAAmB,MAAM;AAAA,IAC3B,OAAO;AACL,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,cAAa;AAAA,MAEb;AAAA,6BAAC,UACC;AAAA,8BAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,SAAS;AAAA,cAChB,QAAO;AAAA,cACP,GAAG,SAAS;AAAA,cACZ,QAAQ;AAAA;AAAA,UACV,GAEJ;AAAA,UACA,oBAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,QAAM;AAAA,cACN,OAAO,SAAS;AAAA,cAChB,QAAO;AAAA,cACP,GAAG,SAAS;AAAA,cACZ,QAAQ;AAAA;AAAA,UACV,GAEJ;AAAA,UACA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,yBAAuB;AAAA,cACvB,MAAM;AAAA,cACN,cAAW;AAAA,cACX,wBAAwB;AAAA,cACxB,yBAAyB;AAAA,cACzB,eAAc;AAAA,cACd,aAAY;AAAA,cACZ,mBAAkB;AAAA,cAClB,iBAAgB;AAAA,cAEhB;AAAA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,SAAQ;AAAA,oBACR,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,qBAAO;AAAA;AAAA,gBACtB;AAAA,gBACA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,SAAQ;AAAA,oBACR,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,yBAAW;AAAA;AAAA,gBAC1B;AAAA,gBACA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,SAAQ;AAAA,oBACR,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,2BAAa;AAAA;AAAA,gBAC5B;AAAA;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,iBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEA,8BAAC,kBAAgC,WAAU,SAAQ,GAAG,GAAG,SAAS,GAAG,MAAM,GACzE,8BAAC,KAAK,SAAL,EAAa,OAAO,YAAY,YAAU,MAAC,MAAM,GAAG,gBAAe,UAClE,8BAAC,MAAG,WAAU,UAAU,sBAAW,GACrC,KAHmB,UAIrB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EACpC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,IACvC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,EAAE;AAAA,IACvC,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;AAAA,EACtC;AACF,CAAC;",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/esm/TabsDemo.js

@@ -1,2 +1,131 @@
-import{jsx as t,jsxs as r}from"react/jsx-runtime";import{useState as T}from"react";import{Button as u,H5 as a,Separator as b,SizableText as o,Tabs as e,XStack as f,YStack as C}from"tamagui";const l=["horizontal","vertical"],x={horizontal:"Horizontal",vertical:"Vertical"};function p(){const[i,d]=T(0),s=l[i];return r(C,{paddingHorizontal:"$4",position:"unset",children:[s==="horizontal"?t(m,{}):t(v,{}),t(f,{alignItems:"center",space:!0,position:"absolute",bottom:"$3",left:"$4",$xxs:{display:"none"},children:t(u,{size:"$2",onPress:()=>d(c=>(c+1)%l.length),children:x[s]})})]})}const m=()=>r(e,{defaultValue:"tab1",orientation:"horizontal",flexDirection:"column",width:400,height:150,borderRadius:"$4",borderWidth:"$0.25",overflow:"hidden",borderColor:"$borderColor",children:[r(e.List,{separator:t(b,{vertical:!0}),disablePassBorderRadius:"bottom","aria-label":"Manage your account",children:[t(e.Tab,{flex:1,value:"tab1",children:t(o,{fontFamily:"$body",children:"Profile"})}),t(e.Tab,{flex:1,value:"tab2",children:t(o,{fontFamily:"$body",children:"Connections"})}),t(e.Tab,{flex:1,value:"tab3",children:t(o,{fontFamily:"$body",children:"Notifications"})})]}),t(b,{}),t(n,{value:"tab1",children:t(a,{children:"Profile"})}),t(n,{value:"tab2",children:t(a,{children:"Connections"})}),t(n,{value:"tab3",children:t(a,{children:"Notifications"})})]}),v=()=>r(e,{defaultValue:"tab1",flexDirection:"row",orientation:"vertical",width:400,borderRadius:"$4",borderWidth:"$0.25",overflow:"hidden",borderColor:"$borderColor",children:[r(e.List,{disablePassBorderRadius:"end","aria-label":"Manage your account",separator:t(b,{}),children:[t(e.Tab,{value:"tab1",children:t(o,{children:"Profile"})}),t(e.Tab,{value:"tab2",children:t(o,{children:"Connections"})}),t(e.Tab,{value:"tab3",children:t(o,{children:"Notifications"})})]}),t(b,{vertical:!0}),t(n,{value:"tab1",children:t(a,{textAlign:"center",children:"Profile"})}),t(n,{value:"tab2",children:t(a,{textAlign:"center",children:"Connections"})}),t(n,{value:"tab3",children:t(a,{textAlign:"center",children:"Notifications"})})]}),n=i=>t(e.Content,{backgroundColor:"$background",padding:"$2",alignItems:"center",justifyContent:"center",flex:1,borderColor:"$background",borderRadius:"$2",borderTopLeftRadius:0,borderTopRightRadius:0,borderWidth:"$2",...i,children:i.children},"tab3");export{p as TabsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack
+} from "tamagui";
+const demos = ["horizontal", "vertical"];
+const demosTitle = {
+  horizontal: "Horizontal",
+  vertical: "Vertical"
+};
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0);
+  const demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */ jsxs(YStack, { paddingHorizontal: "$4", position: "unset", children: [
+      demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
+      /* @__PURE__ */ jsx(
+        XStack,
+        {
+          alignItems: "center",
+          space: true,
+          position: "absolute",
+          bottom: "$3",
+          left: "$4",
+          $xxs: { display: "none" },
+          children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] })
+        }
+      )
+    ] })
+  );
+}
+const HorizontalTabs = () => {
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      width: 400,
+      height: 150,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            separator: /* @__PURE__ */ jsx(Separator, { vertical: true }),
+            disablePassBorderRadius: "bottom",
+            "aria-label": "Manage your account",
+            children: [
+              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", 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,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            disablePassBorderRadius: "end",
+            "aria-label": "Manage your account",
+            separator: /* @__PURE__ */ jsx(Separator, {}),
+            children: [
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { vertical: true }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "tab1", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Profile" }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "tab2", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Connections" }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "tab3", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Notifications" }) })
+      ]
+    }
+  );
+};
+const TabsContent = (props) => {
+  return /* @__PURE__ */ jsx(
+    Tabs.Content,
+    {
+      backgroundColor: "$background",
+      padding: "$2",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      borderColor: "$background",
+      borderRadius: "$2",
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderWidth: "$2",
+      ...props,
+      children: props.children
+    },
+    "tab3"
+  );
+};
+export {
+  TabsDemo
+};
 //# sourceMappingURL=TabsDemo.js.map

package/dist/esm/TabsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  Button,\n  H5,\n  Separator,\n  SizableText,\n  Tabs,\n  TabsContentProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  horizontal: 'Horizontal',\n  vertical: 'Vertical',\n}\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          {demosTitle[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      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        separator={<Separator vertical />}\n        disablePassBorderRadius=\"bottom\"\n        aria-label=\"Manage your account\"\n      >\n        <Tabs.Tab flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator />\n      <TabsContent value=\"tab1\">\n        <H5>Profile</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab2\">\n        <H5>Connections</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab3\">\n        <H5>Notifications</H5>\n      </TabsContent>\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      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        disablePassBorderRadius=\"end\"\n        aria-label=\"Manage your account\"\n        separator={<Separator />}\n      >\n        <Tabs.Tab value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator vertical />\n      <TabsContent value=\"tab1\">\n        <H5 textAlign=\"center\">Profile</H5>\n      </TabsContent>\n      <TabsContent value=\"tab2\">\n        <H5 textAlign=\"center\">Connections</H5>\n      </TabsContent>\n      <TabsContent value=\"tab3\">\n        <H5 textAlign=\"center\">Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst TabsContent = (props: TabsContentProps) => {\n  return (\n    <Tabs.Content\n      backgroundColor=\"$background\"\n      key=\"tab3\"\n      padding=\"$2\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flex={1}\n      borderColor=\"$background\"\n      borderRadius=\"$2\"\n      borderTopLeftRadius={0}\n      borderTopRightRadius={0}\n      borderWidth=\"$2\"\n      {...props}\n    >\n      {props.children}\n    </Tabs.Content>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useState", "Button", "H5", "Separator", "SizableText", "Tabs", "XStack", "YStack", "demos", "demosTitle", "TabsDemo", "demoIndex", "setDemoIndex", "demo", "HorizontalTabs", "VerticalTabs", "x", "TabsContent", "props"]
+  "mappings": "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",
+  "names": []
 }

package/dist/esm/TabsDemo.mjs

@@ -1,2 +1,131 @@
-import{jsx as t,jsxs as r}from"react/jsx-runtime";import{useState as T}from"react";import{Button as u,H5 as a,Separator as b,SizableText as o,Tabs as e,XStack as f,YStack as C}from"tamagui";const l=["horizontal","vertical"],x={horizontal:"Horizontal",vertical:"Vertical"};function p(){const[i,d]=T(0),s=l[i];return r(C,{paddingHorizontal:"$4",position:"unset",children:[s==="horizontal"?t(m,{}):t(v,{}),t(f,{alignItems:"center",space:!0,position:"absolute",bottom:"$3",left:"$4",$xxs:{display:"none"},children:t(u,{size:"$2",onPress:()=>d(c=>(c+1)%l.length),children:x[s]})})]})}const m=()=>r(e,{defaultValue:"tab1",orientation:"horizontal",flexDirection:"column",width:400,height:150,borderRadius:"$4",borderWidth:"$0.25",overflow:"hidden",borderColor:"$borderColor",children:[r(e.List,{separator:t(b,{vertical:!0}),disablePassBorderRadius:"bottom","aria-label":"Manage your account",children:[t(e.Tab,{flex:1,value:"tab1",children:t(o,{fontFamily:"$body",children:"Profile"})}),t(e.Tab,{flex:1,value:"tab2",children:t(o,{fontFamily:"$body",children:"Connections"})}),t(e.Tab,{flex:1,value:"tab3",children:t(o,{fontFamily:"$body",children:"Notifications"})})]}),t(b,{}),t(n,{value:"tab1",children:t(a,{children:"Profile"})}),t(n,{value:"tab2",children:t(a,{children:"Connections"})}),t(n,{value:"tab3",children:t(a,{children:"Notifications"})})]}),v=()=>r(e,{defaultValue:"tab1",flexDirection:"row",orientation:"vertical",width:400,borderRadius:"$4",borderWidth:"$0.25",overflow:"hidden",borderColor:"$borderColor",children:[r(e.List,{disablePassBorderRadius:"end","aria-label":"Manage your account",separator:t(b,{}),children:[t(e.Tab,{value:"tab1",children:t(o,{children:"Profile"})}),t(e.Tab,{value:"tab2",children:t(o,{children:"Connections"})}),t(e.Tab,{value:"tab3",children:t(o,{children:"Notifications"})})]}),t(b,{vertical:!0}),t(n,{value:"tab1",children:t(a,{textAlign:"center",children:"Profile"})}),t(n,{value:"tab2",children:t(a,{textAlign:"center",children:"Connections"})}),t(n,{value:"tab3",children:t(a,{textAlign:"center",children:"Notifications"})})]}),n=i=>t(e.Content,{backgroundColor:"$background",padding:"$2",alignItems:"center",justifyContent:"center",flex:1,borderColor:"$background",borderRadius:"$2",borderTopLeftRadius:0,borderTopRightRadius:0,borderWidth:"$2",...i,children:i.children},"tab3");export{p as TabsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack
+} from "tamagui";
+const demos = ["horizontal", "vertical"];
+const demosTitle = {
+  horizontal: "Horizontal",
+  vertical: "Vertical"
+};
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0);
+  const demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */ jsxs(YStack, { paddingHorizontal: "$4", position: "unset", children: [
+      demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
+      /* @__PURE__ */ jsx(
+        XStack,
+        {
+          alignItems: "center",
+          space: true,
+          position: "absolute",
+          bottom: "$3",
+          left: "$4",
+          $xxs: { display: "none" },
+          children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] })
+        }
+      )
+    ] })
+  );
+}
+const HorizontalTabs = () => {
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      width: 400,
+      height: 150,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            separator: /* @__PURE__ */ jsx(Separator, { vertical: true }),
+            disablePassBorderRadius: "bottom",
+            "aria-label": "Manage your account",
+            children: [
+              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", 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,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            disablePassBorderRadius: "end",
+            "aria-label": "Manage your account",
+            separator: /* @__PURE__ */ jsx(Separator, {}),
+            children: [
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { vertical: true }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "tab1", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Profile" }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "tab2", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Connections" }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "tab3", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Notifications" }) })
+      ]
+    }
+  );
+};
+const TabsContent = (props) => {
+  return /* @__PURE__ */ jsx(
+    Tabs.Content,
+    {
+      backgroundColor: "$background",
+      padding: "$2",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      borderColor: "$background",
+      borderRadius: "$2",
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderWidth: "$2",
+      ...props,
+      children: props.children
+    },
+    "tab3"
+  );
+};
+export {
+  TabsDemo
+};
 //# sourceMappingURL=TabsDemo.mjs.map

package/dist/esm/TabsDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  Button,\n  H5,\n  Separator,\n  SizableText,\n  Tabs,\n  TabsContentProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  horizontal: 'Horizontal',\n  vertical: 'Vertical',\n}\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          {demosTitle[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      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        separator={<Separator vertical />}\n        disablePassBorderRadius=\"bottom\"\n        aria-label=\"Manage your account\"\n      >\n        <Tabs.Tab flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator />\n      <TabsContent value=\"tab1\">\n        <H5>Profile</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab2\">\n        <H5>Connections</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab3\">\n        <H5>Notifications</H5>\n      </TabsContent>\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      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        disablePassBorderRadius=\"end\"\n        aria-label=\"Manage your account\"\n        separator={<Separator />}\n      >\n        <Tabs.Tab value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator vertical />\n      <TabsContent value=\"tab1\">\n        <H5 textAlign=\"center\">Profile</H5>\n      </TabsContent>\n      <TabsContent value=\"tab2\">\n        <H5 textAlign=\"center\">Connections</H5>\n      </TabsContent>\n      <TabsContent value=\"tab3\">\n        <H5 textAlign=\"center\">Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst TabsContent = (props: TabsContentProps) => {\n  return (\n    <Tabs.Content\n      backgroundColor=\"$background\"\n      key=\"tab3\"\n      padding=\"$2\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flex={1}\n      borderColor=\"$background\"\n      borderRadius=\"$2\"\n      borderTopLeftRadius={0}\n      borderTopRightRadius={0}\n      borderWidth=\"$2\"\n      {...props}\n    >\n      {props.children}\n    </Tabs.Content>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useState", "Button", "H5", "Separator", "SizableText", "Tabs", "XStack", "YStack", "demos", "demosTitle", "TabsDemo", "demoIndex", "setDemoIndex", "demo", "HorizontalTabs", "VerticalTabs", "x", "TabsContent", "props"]
+  "mappings": "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",
+  "names": []
 }

package/dist/esm/TextDemo.js

@@ -1,2 +1,16 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Paragraph as i,SizableText as a,XStack as r,YStack as l}from"tamagui";function p(){return t(l,{space:"$2",alignItems:"center",children:[e(a,{size:"$3",children:"SizableText"}),t(r,{space:!0,children:[e(a,{theme:"alt1",size:"$3",children:"alt1"}),e(a,{theme:"alt2",size:"$3",children:"alt2"})]}),e(i,{size:"$2",fontWeight:"800",children:"Paragraph"})]})}export{p as TextDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+function TextDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { space: "$2", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(SizableText, { size: "$3", children: "SizableText" }),
+    /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+      /* @__PURE__ */ jsx(SizableText, { theme: "alt1", size: "$3", children: "alt1" }),
+      /* @__PURE__ */ jsx(SizableText, { theme: "alt2", size: "$3", children: "alt2" })
+    ] }),
+    /* @__PURE__ */ jsx(Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" })
+  ] });
+}
+export {
+  TextDemo
+};
 //# sourceMappingURL=TextDemo.js.map

package/dist/esm/TextDemo.js.map

@@ -2,6 +2,6 @@
   "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\" 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": "AAMM,cAAAA,EACA,QAAAC,MADA,oBALN,OAAS,aAAAC,EAAW,eAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAEtD,SAASC,GAAW,CACzB,OACEL,EAACI,EAAA,CAAO,MAAM,KAAK,WAAW,SAC5B,UAAAL,EAACG,EAAA,CAAY,KAAK,KAAK,uBAAW,EAClCF,EAACG,EAAA,CAAO,MAAK,GACX,UAAAJ,EAACG,EAAA,CAAY,MAAM,OAAO,KAAK,KAAK,gBAEpC,EACAH,EAACG,EAAA,CAAY,MAAM,OAAO,KAAK,KAAK,gBAEpC,GACF,EACAH,EAACE,EAAA,CAAU,KAAK,KAAK,WAAW,MAAM,qBAEtC,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Paragraph", "SizableText", "XStack", "YStack", "TextDemo"]
+  "mappings": "AAMM,cACA,YADA;AALN,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,eAAY,MAAK,MAAK,yBAAW;AAAA,IAClC,qBAAC,UAAO,OAAK,MACX;AAAA,0BAAC,eAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,MACA,oBAAC,eAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,OACF;AAAA,IACA,oBAAC,aAAU,MAAK,MAAK,YAAW,OAAM,uBAEtC;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/TextDemo.mjs

@@ -1,2 +1,16 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Paragraph as i,SizableText as a,XStack as r,YStack as l}from"tamagui";function p(){return t(l,{space:"$2",alignItems:"center",children:[e(a,{size:"$3",children:"SizableText"}),t(r,{space:!0,children:[e(a,{theme:"alt1",size:"$3",children:"alt1"}),e(a,{theme:"alt2",size:"$3",children:"alt2"})]}),e(i,{size:"$2",fontWeight:"800",children:"Paragraph"})]})}export{p as TextDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+function TextDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { space: "$2", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(SizableText, { size: "$3", children: "SizableText" }),
+    /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+      /* @__PURE__ */ jsx(SizableText, { theme: "alt1", size: "$3", children: "alt1" }),
+      /* @__PURE__ */ jsx(SizableText, { theme: "alt2", size: "$3", children: "alt2" })
+    ] }),
+    /* @__PURE__ */ jsx(Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" })
+  ] });
+}
+export {
+  TextDemo
+};
 //# sourceMappingURL=TextDemo.mjs.map

package/dist/esm/TextDemo.mjs.map

@@ -2,6 +2,6 @@
   "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\" 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": "AAMM,cAAAA,EACA,QAAAC,MADA,oBALN,OAAS,aAAAC,EAAW,eAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAEtD,SAASC,GAAW,CACzB,OACEL,EAACI,EAAA,CAAO,MAAM,KAAK,WAAW,SAC5B,UAAAL,EAACG,EAAA,CAAY,KAAK,KAAK,uBAAW,EAClCF,EAACG,EAAA,CAAO,MAAK,GACX,UAAAJ,EAACG,EAAA,CAAY,MAAM,OAAO,KAAK,KAAK,gBAEpC,EACAH,EAACG,EAAA,CAAY,MAAM,OAAO,KAAK,KAAK,gBAEpC,GACF,EACAH,EAACE,EAAA,CAAU,KAAK,KAAK,WAAW,MAAM,qBAEtC,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Paragraph", "SizableText", "XStack", "YStack", "TextDemo"]
+  "mappings": "AAMM,cACA,YADA;AALN,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,eAAY,MAAK,MAAK,yBAAW;AAAA,IAClC,qBAAC,UAAO,OAAK,MACX;AAAA,0BAAC,eAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,MACA,oBAAC,eAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,OACF;AAAA,IACA,oBAAC,aAAU,MAAK,MAAK,YAAW,OAAM,uBAEtC;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/ThemeInverseDemo.js

@@ -1,2 +1,20 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Button as t,Theme as n,XStack as a,YStack as u}from"tamagui";function k(){return r(a,{space:!0,children:[e(o,{}),e(n,{inverse:!0,children:e(o,{})})]})}function o(){return r(u,{backgroundColor:"$background",padding:"$3",borderRadius:"$3",space:!0,children:[e(t,{children:"Dark"}),e(t,{themeInverse:!0,children:"Inversed"}),e(t,{theme:"alt1",children:"Alt1 Dark"}),e(n,{name:"yellow",children:e(t,{children:"Yellow dark"})})]})}export{k as ThemeInverseDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+    /* @__PURE__ */ jsx(Buttons, {}),
+    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(Buttons, {}) })
+  ] });
+}
+function Buttons() {
+  return /* @__PURE__ */ jsxs(YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
+    /* @__PURE__ */ jsx(Button, { children: "Dark" }),
+    /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
+    /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),
+    /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: "Yellow dark" }) })
+  ] });
+}
+export {
+  ThemeInverseDemo
+};
 //# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/esm/ThemeInverseDemo.js.map

@@ -2,6 +2,6 @@
   "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 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": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,UAAAC,EAAQ,SAAAC,EAAO,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,SAASC,GAAmB,CACjC,OACEL,EAACG,EAAA,CAAO,MAAK,GACX,UAAAJ,EAACO,EAAA,EAAQ,EACTP,EAACG,EAAA,CAAM,QAAO,GACZ,SAAAH,EAACO,EAAA,EAAQ,EACX,GACF,CAEJ,CAEA,SAASA,GAAU,CACjB,OACEN,EAACI,EAAA,CAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK,MAAK,GACxE,UAAAL,EAACE,EAAA,CAAO,gBAAI,EACZF,EAACE,EAAA,CAAO,aAAY,GAAC,oBAAQ,EAC7BF,EAACE,EAAA,CAAO,MAAM,OAAO,qBAAS,EAC9BF,EAACG,EAAA,CAAM,KAAK,SACV,SAAAH,EAACE,EAAA,CAAO,uBAAW,EACrB,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Button", "Theme", "XStack", "YStack", "ThemeInverseDemo", "Buttons"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM,SAAO,MACZ,8BAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,qBAAC,UAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,wBAAC,UAAO,kBAAI;AAAA,IACZ,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,oBAAC,UAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/ThemeInverseDemo.mjs

@@ -1,2 +1,20 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Button as t,Theme as n,XStack as a,YStack as u}from"tamagui";function k(){return r(a,{space:!0,children:[e(o,{}),e(n,{inverse:!0,children:e(o,{})})]})}function o(){return r(u,{backgroundColor:"$background",padding:"$3",borderRadius:"$3",space:!0,children:[e(t,{children:"Dark"}),e(t,{themeInverse:!0,children:"Inversed"}),e(t,{theme:"alt1",children:"Alt1 Dark"}),e(n,{name:"yellow",children:e(t,{children:"Yellow dark"})})]})}export{k as ThemeInverseDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+    /* @__PURE__ */ jsx(Buttons, {}),
+    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(Buttons, {}) })
+  ] });
+}
+function Buttons() {
+  return /* @__PURE__ */ jsxs(YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
+    /* @__PURE__ */ jsx(Button, { children: "Dark" }),
+    /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
+    /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),
+    /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: "Yellow dark" }) })
+  ] });
+}
+export {
+  ThemeInverseDemo
+};
 //# sourceMappingURL=ThemeInverseDemo.mjs.map

package/dist/esm/ThemeInverseDemo.mjs.map

@@ -2,6 +2,6 @@
   "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 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": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,UAAAC,EAAQ,SAAAC,EAAO,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,SAASC,GAAmB,CACjC,OACEL,EAACG,EAAA,CAAO,MAAK,GACX,UAAAJ,EAACO,EAAA,EAAQ,EACTP,EAACG,EAAA,CAAM,QAAO,GACZ,SAAAH,EAACO,EAAA,EAAQ,EACX,GACF,CAEJ,CAEA,SAASA,GAAU,CACjB,OACEN,EAACI,EAAA,CAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK,MAAK,GACxE,UAAAL,EAACE,EAAA,CAAO,gBAAI,EACZF,EAACE,EAAA,CAAO,aAAY,GAAC,oBAAQ,EAC7BF,EAACE,EAAA,CAAO,MAAM,OAAO,qBAAS,EAC9BF,EAACG,EAAA,CAAM,KAAK,SACV,SAAAH,EAACE,EAAA,CAAO,uBAAW,EACrB,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Button", "Theme", "XStack", "YStack", "ThemeInverseDemo", "Buttons"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM,SAAO,MACZ,8BAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,qBAAC,UAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,wBAAC,UAAO,kBAAI;AAAA,IACZ,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,oBAAC,UAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
+  "names": []
 }