@tamagui/demos 1.15.24 → 1.15.25

package/dist/jsx/DrawerDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DrawerDemo.tsx"],
-  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onOpenChange={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,aAAa,iBAAiB;AAEvC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,WAAW,cAAc;AAEnC,SAAS,aAAa;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,CAAC,OAAO,UAAU,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,SAAS,WACxE,CAAC,OAAO;AAAA,IACN,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACA,CAAC,OAAO,MAAM,MAAM,cAAc,SAChC,CAAC,OAAO,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK;AAAA,MACnD,CAAC,UAAU,YAAY,OAAO,MAAM,EAAnC;AAAA,MACD,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACF,EATC,OAAO,MAUV,EAXC;AAAA,EAYH,EApBC,OAAO,SAqBV,EAtBC;AAwBL;",
-  "names": []
-}

package/dist/jsx/FeatherIconsDemo.js

@@ -1,32 +0,0 @@
-import * as FeatherIcons from "@tamagui/lucide-icons";
-import { useMemo, useState } from "react";
-import { ScrollView } from "react-native";
-import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
-const featherIcons = Object.keys(FeatherIcons).map((name) => ({
-  key: name.toLowerCase(),
-  name,
-  Icon: FeatherIcons[name]
-}));
-function FeatherIconsDemo() {
-  const [searchRaw, setSearch] = useState("");
-  const search = useDebounceValue(searchRaw, 400);
-  const size = 100;
-  const iconsMemo = useMemo(() => {
-    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
-    return icons.map(({ Icon, name }) => {
-      return <YStack h={size} ai="center" jc="center" key={name}>
-        <Icon size={size * 0.25} />
-        <Spacer />
-        <Paragraph size="$2" o={0.5}>{name}</Paragraph>
-      </YStack>;
-    });
-  }, [search]);
-  return <YStack als="stretch" p="$4" pb="$0" space>
-    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
-    <YStack h={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
-  </YStack>;
-}
-export {
-  FeatherIconsDemo
-};
-//# sourceMappingURL=FeatherIconsDemo.js.map

package/dist/jsx/FeatherIconsDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/FeatherIconsDemo.tsx"],
-  "sourcesContent": ["import * as FeatherIcons from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,YAAY,kBAAkB;AAE9B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,UAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa,IAAI;AACzB,EAAE;AAEK,SAAS,mBAAmB;AACjC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACnC,aACE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QAC5C,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC,UAAU,KAAK,KAAK,GAAG,MACrB,KACH,EAFC;AAAA,MAGH,EANC;AAAA,IAQL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,UAAU,EAAE,KAAK,GAAG,KAAK;AAAA,IACnC,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,GAAG,KACT,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
-  "names": []
-}

package/dist/jsx/FeatherIconsDemo.mjs

@@ -1,32 +0,0 @@
-import * as FeatherIcons from "@tamagui/lucide-icons";
-import { useMemo, useState } from "react";
-import { ScrollView } from "react-native";
-import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
-const featherIcons = Object.keys(FeatherIcons).map((name) => ({
-  key: name.toLowerCase(),
-  name,
-  Icon: FeatherIcons[name]
-}));
-function FeatherIconsDemo() {
-  const [searchRaw, setSearch] = useState("");
-  const search = useDebounceValue(searchRaw, 400);
-  const size = 100;
-  const iconsMemo = useMemo(() => {
-    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
-    return icons.map(({ Icon, name }) => {
-      return <YStack h={size} ai="center" jc="center" key={name}>
-        <Icon size={size * 0.25} />
-        <Spacer />
-        <Paragraph size="$2" o={0.5}>{name}</Paragraph>
-      </YStack>;
-    });
-  }, [search]);
-  return <YStack als="stretch" p="$4" pb="$0" space>
-    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
-    <YStack h={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
-  </YStack>;
-}
-export {
-  FeatherIconsDemo
-};
-//# sourceMappingURL=FeatherIconsDemo.mjs.map

package/dist/jsx/FeatherIconsDemo.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/FeatherIconsDemo.tsx"],
-  "sourcesContent": ["import * as FeatherIcons from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,YAAY,kBAAkB;AAE9B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,UAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa,IAAI;AACzB,EAAE;AAEK,SAAS,mBAAmB;AACjC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACnC,aACE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QAC5C,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC,UAAU,KAAK,KAAK,GAAG,MACrB,KACH,EAFC;AAAA,MAGH,EANC;AAAA,IAQL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,UAAU,EAAE,KAAK,GAAG,KAAK;AAAA,IACnC,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,GAAG,KACT,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
-  "names": []
-}

package/dist/jsx/MenuDemo.js

@@ -1,15 +0,0 @@
-import { Menu as MenuIcon } from "@tamagui/feather-icons";
-import { Menu } from "@tamagui/menu";
-import { useState } from "react";
-import { Button, H4, Paragraph, YStack } from "tamagui";
-function MenuDemo() {
-  const [show, setShow] = useState(false);
-  return <Menu.Provider><Menu open={show} onOpenChange={setShow} trigger={<Button size="$6" icon={MenuIcon} theme={show ? "active" : null} circular onPress={() => setShow((x) => !x)} />}><Menu.Item><YStack p="$2">
-    <H4>Menu contents</H4>
-    <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>
-  </YStack></Menu.Item></Menu></Menu.Provider>;
-}
-export {
-  MenuDemo
-};
-//# sourceMappingURL=MenuDemo.js.map

package/dist/jsx/MenuDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/MenuDemo.tsx"],
-  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onOpenChange={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY;AACrB,SAAgB,gBAAgB;AAChC,SAAS,QAAQ,IAAI,WAAW,cAAc;AAEvC,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,SACE,CAAC,KAAK,SACJ,CAAC,KACC,MAAM,MACN,cAAc,SACd,SACE,CAAC,OACC,KAAK,KACL,MAAM,UACN,OAAO,OAAO,WAAW,MACzB,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAClC,IAGF,CAAC,KAAK,KACJ,CAAC,OAAO,EAAE;AAAA,IACR,CAAC,GAAG,aAAa,EAAhB;AAAA,IACD,CAAC,UAAU,2BAA2B,EAArC;AAAA,EACH,EAHC,OAIH,EALC,KAAK,KAMR,EAnBC,KAoBH,EArBC,KAAK;AAuBV;",
-  "names": []
-}

package/dist/jsx/PopperDemo.js

@@ -1,41 +0,0 @@
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
-import {
-  Button,
-  Input,
-  Label,
-  Popper,
-  PopperAnchor,
-  PopperArrow,
-  PopperContent,
-  Portal,
-  XStack,
-  YGroup
-} from "tamagui";
-function PopperDemo() {
-  return <XStack space="$2" f={1} justifyContent="center" alignItems="center">
-    <Demo placement="left-end" Icon={ChevronLeft} Id="left" />
-    <Demo placement="bottom-end" Icon={ChevronDown} Id="bottom" />
-    <Demo placement="top-end" Icon={ChevronUp} Id="top" />
-    <Demo placement="right-end" Icon={ChevronRight} Id="right" />
-  </XStack>;
-}
-function Demo({ Icon, Id, ...props }) {
-  return <Popper placement={props.placement}>
-    <PopperAnchor><Button icon={Icon} /></PopperAnchor>
-    <Portal><PopperContent>
-      <PopperArrow bw={1} boc="$borderColor" />
-      <YGroup space="$3" width={200} bw={1} boc="$borderColor">
-        <XStack space="$3">
-          <Label size="$3" htmlFor={Id}>Name</Label>
-          <Input size="$3" id={Id} />
-        </XStack>
-        <Button size="$3">Submit</Button>
-      </YGroup>
-    </PopperContent></Portal>
-  </Popper>;
-}
-export {
-  Demo,
-  PopperDemo
-};
-//# sourceMappingURL=PopperDemo.js.map

package/dist/jsx/PopperDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/PopperDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popper,\n  PopperAnchor,\n  PopperArrow,\n  PopperContent,\n  PopperProps,\n  Portal,\n  PortalHost,\n  PortalItem,\n  XGroup,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopperDemo() {\n  return (\n\n\n      <XStack space=\"$2\" f={1} justifyContent='center' alignItems='center'>\n        <Demo placement=\"left-end\" Icon={ChevronLeft} Id=\"left\" />\n        <Demo placement=\"bottom-end\" Icon={ChevronDown} Id=\"bottom\" />\n        <Demo placement=\"top-end\" Icon={ChevronUp} Id=\"top\" />\n        <Demo placement=\"right-end\" Icon={ChevronRight} Id=\"right\" />\n      </XStack>\n\n  )\n}\n\nexport function Demo({ Icon, Id, ...props }: PopperProps & { Icon?: any, Id?: string }) {\n  return (\n    \n    <Popper placement={props.placement}>\n      <PopperAnchor>\n        <Button icon={Icon} />\n      </PopperAnchor>\n\n      <Portal>\n        <PopperContent>\n            <PopperArrow bw={1} boc=\"$borderColor\" />\n\n            <YGroup space=\"$3\" width={200} bw={1} boc=\"$borderColor\">\n              <XStack space=\"$3\">\n                <Label size=\"$3\" htmlFor={Id}>\n                  Name\n                </Label>\n                <Input size=\"$3\" id={Id} />\n              </XStack>\n              \n                <Button\n                  size=\"$3\"\n                >\n                  Submit\n                </Button>\n            </YGroup>\n\n          </PopperContent>\n        </Portal>\n\n\n    </Popper>\n\n  )\n\n\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,aAAa;AAC3B,SAGI,CAAC,OAAO,MAAM,KAAK,GAAG,GAAG,eAAe,SAAS,WAAW;AAAA,IAC1D,CAAC,KAAK,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACxD,CAAC,KAAK,UAAU,aAAa,MAAM,aAAa,GAAG,SAAS;AAAA,IAC5D,CAAC,KAAK,UAAU,UAAU,MAAM,WAAW,GAAG,MAAM;AAAA,IACpD,CAAC,KAAK,UAAU,YAAY,MAAM,cAAc,GAAG,QAAQ;AAAA,EAC7D,EALC;AAQP;AAEO,SAAS,KAAK,EAAE,MAAM,OAAO,MAAM,GAA8C;AACtF,SAEE,CAAC,OAAO,WAAW,MAAM;AAAA,IACvB,CAAC,aACC,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC;AAAA,IAID,CAAC,OACC,CAAC;AAAA,MACG,CAAC,YAAY,IAAI,GAAG,IAAI,eAAe;AAAA,MAEvC,CAAC,OAAO,MAAM,KAAK,OAAO,KAAK,IAAI,GAAG,IAAI;AAAA,QACxC,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,SAAS,IAAI,IAE9B,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI;AAAA,QAC3B,EALC;AAAA,QAOC,CAAC,OACC,KAAK,KACN,MAED,EAJC;AAAA,MAKL,EAbC;AAAA,IAeH,EAlBD,cAmBD,EApBD;AAAA,EAuBH,EA5BC;AAiCL;",
-  "names": []
-}

package/dist/jsx/TabsAnimatedDemo.js

@@ -1,114 +0,0 @@
-import { useState } from "react";
-import { AnimatePresence, H5, Tabs, XStack, YStack } from "tamagui";
-function TabsAnimatedDemo() {
-  return <XStack maxHeight="100%" maxWidth="100%" justifyContent="flex-start"><XStack space="$3" px="$8">
-    <UnderlineTabs />
-    <HighlightTabs />
-  </XStack></XStack>;
-}
-const UnderlineTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [direction, setDirection] = useState(0);
-  return <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    onDirectionChange={setDirection}
-    orientation="vertical"
-    width={300}
-    br="$4"
-    ai="center"
-  >
-    <YStack borderColor="$color3" borderRightWidth="$0.5" mr="$2"><YStack>
-      <Tabs.RovingIndicator
-        highlightMode="hoverOrFocus"
-        width="$0.5"
-        right={0}
-        animation="100ms"
-      />
-      <Tabs.RovingIndicator
-        highlightMode="select"
-        width="$0.5"
-        right={0}
-        animation="100ms"
-      />
-      <Tabs.List aria-label="Manage your account" flexDirection="column">
-        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
-      </Tabs.List>
-    </YStack></YStack>
-    <AnimatePresence exitBeforeEnter><Tabs.Content
-      value={currentTab}
-      key={currentTab}
-      forceMount
-      p="$2"
-      animation="100ms"
-      o={1}
-      y={0}
-      f={1}
-      enterStyle={{
-        ...direction === -1 ? { y: -25 } : {},
-        ...direction === 1 ? { y: 25 } : {},
-        opacity: 0
-      }}
-      exitStyle={{
-        ...direction === -1 ? { y: 25 } : {},
-        ...direction === 1 ? { y: -25 } : {},
-        opacity: 0
-      }}
-    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
-  </Tabs>;
-};
-const HighlightTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [direction, setDirection] = useState(0);
-  return <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    onDirectionChange={setDirection}
-    orientation="horizontal"
-    br="$4"
-    flexDirection="column"
-  >
-    <YStack>
-      <Tabs.RovingIndicator
-        highlightMode="hoverOrFocus"
-        borderRadius="$4"
-        animation="100ms"
-      />
-      <Tabs.RovingIndicator
-        highlightMode="select"
-        borderRadius="$4"
-        animation="100ms"
-      />
-      <Tabs.List aria-label="Manage your account">
-        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
-      </Tabs.List>
-    </YStack>
-    <AnimatePresence exitBeforeEnter><Tabs.Content
-      value={currentTab}
-      key={currentTab}
-      forceMount
-      p="$2"
-      animation="100ms"
-      o={1}
-      x={0}
-      enterStyle={{
-        ...direction === -1 ? { x: -25 } : {},
-        ...direction === 1 ? { x: 25 } : {},
-        opacity: 0
-      }}
-      exitStyle={{
-        ...direction === -1 ? { x: 25 } : {},
-        ...direction === 1 ? { x: -25 } : {},
-        opacity: 0
-      }}
-    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
-  </Tabs>;
-};
-export {
-  TabsAnimatedDemo
-};
-//# sourceMappingURL=TabsAnimatedDemo.js.map

package/dist/jsx/TabsAnimatedDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TabsAnimatedDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n      <XStack space=\"$3\" px=\"$8\">\n        <UnderlineTabs />\n        <HighlightTabs />\n      </XStack>\n    </XStack>\n  )\n}\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <YStack>\n          <Tabs.RovingIndicator\n            highlightMode=\"hoverOrFocus\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.RovingIndicator\n            highlightMode=\"select\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n              Connections\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n              Notifications\n            </Tabs.Trigger>\n          </Tabs.List>\n        </YStack>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          y={0}\n          f={1}\n          enterStyle={{\n            ...(direction === -1 ? { y: -25 } : {}),\n            ...(direction === 1 ? { y: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { y: 25 } : {}),\n            ...(direction === 1 ? { y: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      flexDirection=\"column\"\n    >\n      <YStack>\n        <Tabs.RovingIndicator\n          highlightMode=\"hoverOrFocus\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.RovingIndicator\n          highlightMode=\"select\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.List aria-label=\"Manage your account\">\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          x={0}\n          enterStyle={{\n            ...(direction === -1 ? { x: -25 } : {}),\n            ...(direction === 1 ? { x: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { x: 25 } : {}),\n            ...(direction === 1 ? { x: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,IAAI,MAAM,QAAQ,cAAc;AAEnD,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO,UAAU,OAAO,SAAS,OAAO,eAAe,aACtD,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC,cAAc;AAAA,IACf,CAAC,cAAc;AAAA,EACjB,EAHC,OAIH,EALC;AAOL;AAEA,MAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,MAAM;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,CAAC;AAExD,SACE,CAAC;AAAA,IACC,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA;AAAA,IAEH,CAAC,OAAO,YAAY,UAAU,iBAAiB,OAAO,GAAG,KACvD,CAAC;AAAA,MACC,CAAC,KAAK;AAAA,QACJ,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA,MACA,CAAC,KAAK;AAAA,QACJ,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA,MACA,CAAC,KAAK,KAAK,WAAW,sBAAsB,cAAc;AAAA,QACxD,CAAC,KAAK,QAAQ,SAAS,MAAM,WAAW,MAAM,OAAO,OAErD,EAFC,KAAK;AAAA,QAGN,CAAC,KAAK,QAAQ,SAAS,MAAM,WAAW,MAAM,OAAO,WAErD,EAFC,KAAK;AAAA,QAGN,CAAC,KAAK,QAAQ,SAAS,MAAM,WAAW,MAAM,OAAO,aAErD,EAFC,KAAK;AAAA,MAGR,EAVC,KAAK;AAAA,IAWR,EAxBC,OAyBH,EA1BC;AAAA,IA2BD,CAAC,gBAAgB,gBACf,CAAC,KAAK;AAAA,MACJ,OAAO;AAAA,MACP,KAAK;AAAA,MACL;AAAA,MACA,EAAE;AAAA,MACF,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,YAAY;AAAA,QACV,GAAI,cAAc,KAAK,EAAE,GAAG,IAAI,IAAI,CAAC;AAAA,QACrC,GAAI,cAAc,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC;AAAA,QACnC,SAAS;AAAA,MACX;AAAA,MACA,WAAW;AAAA,QACT,GAAI,cAAc,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;AAAA,QACpC,GAAI,cAAc,IAAI,EAAE,GAAG,IAAI,IAAI,CAAC;AAAA,QACpC,SAAS;AAAA,MACX;AAAA,KAEA,CAAC,GAAG,GAAG,UAAU,WAAW,EAA3B,GACH,EArBC,KAAK,QAsBR,EAvBC;AAAA,EAwBH,EA5DC;AA8DL;AAEA,MAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,MAAM;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,CAAC;AAExD,SACE,CAAC;AAAA,IACC,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,GAAG;AAAA,IACH,cAAc;AAAA;AAAA,IAEd,CAAC;AAAA,MACC,CAAC,KAAK;AAAA,QACJ,cAAc;AAAA,QACd,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA,CAAC,KAAK;AAAA,QACJ,cAAc;AAAA,QACd,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA,CAAC,KAAK,KAAK,WAAW;AAAA,QACpB,CAAC,KAAK,QAAQ,SAAS,MAAM,WAAW,MAAM,OAAO,OAErD,EAFC,KAAK;AAAA,QAGN,CAAC,KAAK,QAAQ,SAAS,MAAM,WAAW,MAAM,OAAO,WAErD,EAFC,KAAK;AAAA,QAGN,CAAC,KAAK,QAAQ,SAAS,MAAM,WAAW,MAAM,OAAO,aAErD,EAFC,KAAK;AAAA,MAGR,EAVC,KAAK;AAAA,IAWR,EAtBC;AAAA,IAuBD,CAAC,gBAAgB,gBACf,CAAC,KAAK;AAAA,MACJ,OAAO;AAAA,MACP,KAAK;AAAA,MACL;AAAA,MACA,EAAE;AAAA,MACF,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,YAAY;AAAA,QACV,GAAI,cAAc,KAAK,EAAE,GAAG,IAAI,IAAI,CAAC;AAAA,QACrC,GAAI,cAAc,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC;AAAA,QACnC,SAAS;AAAA,MACX;AAAA,MACA,WAAW;AAAA,QACT,GAAI,cAAc,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;AAAA,QACpC,GAAI,cAAc,IAAI,EAAE,GAAG,IAAI,IAAI,CAAC;AAAA,QACpC,SAAS;AAAA,MACX;AAAA,KAEA,CAAC,GAAG,GAAG,UAAU,WAAW,EAA3B,GACH,EApBC,KAAK,QAqBR,EAtBC;AAAA,EAuBH,EAtDC;AAwDL;",
-  "names": []
-}

package/dist/jsx/TabsAnimatedDemo.mjs

@@ -1,114 +0,0 @@
-import { useState } from "react";
-import { AnimatePresence, H5, Tabs, XStack, YStack } from "tamagui";
-function TabsAnimatedDemo() {
-  return <XStack maxHeight="100%" maxWidth="100%" justifyContent="flex-start"><XStack space="$3" px="$8">
-    <UnderlineTabs />
-    <HighlightTabs />
-  </XStack></XStack>;
-}
-const UnderlineTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [direction, setDirection] = useState(0);
-  return <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    onDirectionChange={setDirection}
-    orientation="vertical"
-    width={300}
-    br="$4"
-    ai="center"
-  >
-    <YStack borderColor="$color3" borderRightWidth="$0.5" mr="$2"><YStack>
-      <Tabs.RovingIndicator
-        highlightMode="hoverOrFocus"
-        width="$0.5"
-        right={0}
-        animation="100ms"
-      />
-      <Tabs.RovingIndicator
-        highlightMode="select"
-        width="$0.5"
-        right={0}
-        animation="100ms"
-      />
-      <Tabs.List aria-label="Manage your account" flexDirection="column">
-        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
-      </Tabs.List>
-    </YStack></YStack>
-    <AnimatePresence exitBeforeEnter><Tabs.Content
-      value={currentTab}
-      key={currentTab}
-      forceMount
-      p="$2"
-      animation="100ms"
-      o={1}
-      y={0}
-      f={1}
-      enterStyle={{
-        ...direction === -1 ? { y: -25 } : {},
-        ...direction === 1 ? { y: 25 } : {},
-        opacity: 0
-      }}
-      exitStyle={{
-        ...direction === -1 ? { y: 25 } : {},
-        ...direction === 1 ? { y: -25 } : {},
-        opacity: 0
-      }}
-    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
-  </Tabs>;
-};
-const HighlightTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [direction, setDirection] = useState(0);
-  return <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    onDirectionChange={setDirection}
-    orientation="horizontal"
-    br="$4"
-    flexDirection="column"
-  >
-    <YStack>
-      <Tabs.RovingIndicator
-        highlightMode="hoverOrFocus"
-        borderRadius="$4"
-        animation="100ms"
-      />
-      <Tabs.RovingIndicator
-        highlightMode="select"
-        borderRadius="$4"
-        animation="100ms"
-      />
-      <Tabs.List aria-label="Manage your account">
-        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
-        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
-      </Tabs.List>
-    </YStack>
-    <AnimatePresence exitBeforeEnter><Tabs.Content
-      value={currentTab}
-      key={currentTab}
-      forceMount
-      p="$2"
-      animation="100ms"
-      o={1}
-      x={0}
-      enterStyle={{
-        ...direction === -1 ? { x: -25 } : {},
-        ...direction === 1 ? { x: 25 } : {},
-        opacity: 0
-      }}
-      exitStyle={{
-        ...direction === -1 ? { x: 25 } : {},
-        ...direction === 1 ? { x: -25 } : {},
-        opacity: 0
-      }}
-    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
-  </Tabs>;
-};
-export {
-  TabsAnimatedDemo
-};
-//# sourceMappingURL=TabsAnimatedDemo.mjs.map

package/dist/jsx/TabsAnimatedDemo.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TabsAnimatedDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n      <XStack space=\"$3\" px=\"$8\">\n        <UnderlineTabs />\n        <HighlightTabs />\n      </XStack>\n    </XStack>\n  )\n}\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <YStack>\n          <Tabs.RovingIndicator\n            highlightMode=\"hoverOrFocus\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.RovingIndicator\n            highlightMode=\"select\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n              Connections\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n              Notifications\n            </Tabs.Trigger>\n          </Tabs.List>\n        </YStack>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          y={0}\n          f={1}\n          enterStyle={{\n            ...(direction === -1 ? { y: -25 } : {}),\n            ...(direction === 1 ? { y: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { y: 25 } : {}),\n            ...(direction === 1 ? { y: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      flexDirection=\"column\"\n    >\n      <YStack>\n        <Tabs.RovingIndicator\n          highlightMode=\"hoverOrFocus\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.RovingIndicator\n          highlightMode=\"select\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.List aria-label=\"Manage your account\">\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          x={0}\n          enterStyle={{\n            ...(direction === -1 ? { x: -25 } : {}),\n            ...(direction === 1 ? { x: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { x: 25 } : {}),\n            ...(direction === 1 ? { x: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/jsx/TabsHighlightedDemo.js

@@ -1,137 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import {
-  AnimatePresence,
-  H5,
-  Stack,
-  Tabs,
-  XStack,
-  YStack,
-  styled
-} from "tamagui";
-function TabsHighlightedDemo() {
-  return <XStack maxHeight="100%" maxWidth="100%" justifyContent="flex-start" px="$4"><HighlightTabs /></XStack>;
-}
-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 <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    orientation="horizontal"
-    br="$4"
-    height={150}
-    flexDirection="column"
-    activationMode="manual"
-  >
-    <Tabs.List
-      scrollable
-      loop={false}
-      aria-label="Manage your account"
-      disablePassBorderRadius
-    >
-      {intentIndicatorLayout && <TabsRovingIndicator
-        width={intentIndicatorLayout.width}
-        height={intentIndicatorLayout.height}
-        x={intentIndicatorLayout.x}
-        y={intentIndicatorLayout.y}
-      />}
-      {selectionIndicatorLayout && <TabsRovingIndicator
-        theme="active"
-        active
-        width={selectionIndicatorLayout.width}
-        height={selectionIndicatorLayout.height}
-        x={selectionIndicatorLayout.x}
-        y={selectionIndicatorLayout.y}
-      />}
-      <Tabs.Trigger
-        unstyled
-        color="$color12"
-        value="tab1"
-        onSelectedLayoutChange={handleUpdateSelectionIndicator}
-        onHoveredLayoutChange={setHoverIndicatorLayout}
-        onFocusedLayoutChange={setFocusIndicatorLayout}
-      >Profile</Tabs.Trigger>
-      <Tabs.Trigger
-        unstyled
-        color="$color12"
-        value="tab2"
-        onSelectedLayoutChange={handleUpdateSelectionIndicator}
-        onHoveredLayoutChange={setHoverIndicatorLayout}
-        onFocusedLayoutChange={setFocusIndicatorLayout}
-      >Connections</Tabs.Trigger>
-      <Tabs.Trigger
-        unstyled
-        color="$color12"
-        value="tab3"
-        onSelectedLayoutChange={handleUpdateSelectionIndicator}
-        onHoveredLayoutChange={setHoverIndicatorLayout}
-        onFocusedLayoutChange={setFocusIndicatorLayout}
-      >Notifications</Tabs.Trigger>
-    </Tabs.List>
-    <AnimatePresence
-      exitBeforeEnter
-      enterVariant={enterVariant}
-      exitVariant={exitVariant}
-    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1}><Tabs.Content value={currentTab} forceMount p="$2"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
-  </Tabs>;
-};
-export {
-  TabsHighlightedDemo
-};
-//# sourceMappingURL=TabsHighlightedDemo.js.map

package/dist/jsx/TabsHighlightedDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "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      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        scrollable\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={selectionIndicatorLayout.height}\n            x={selectionIndicatorLayout.x}\n            y={selectionIndicatorLayout.y}\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\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={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": []
-}