@tamagui/demos 1.15.14 → 1.15.16

package/dist/cjs/SelectDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SelectDemo.tsx"],
-  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger width={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            borderRadius=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator marginLeft=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            borderRadius=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Raspberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
   "mappings": "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",
   "names": []
 }

package/dist/cjs/SeparatorDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack width=\"100%\" maxWidth={300} marginHorizontal={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator marginVertical={15} />\n      <XStack height={20} alignItems=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAqD;AAE9C,SAAS,gBAAgB;AAC9B,SACE,6CAAC,yBAAO,OAAM,QAAO,UAAU,KAAK,kBAAkB,IACpD;AAAA,gDAAC,4BAAU,YAAW,OAAM,qBAAO;AAAA,IACnC,4CAAC,4BAAU,iDAAmC;AAAA,IAC9C,4CAAC,4BAAU,gBAAgB,IAAI;AAAA,IAC/B,6CAAC,yBAAO,QAAQ,IAAI,YAAW,UAC7B;AAAA,kDAAC,4BAAU,kBAAI;AAAA,MACf,4CAAC,4BAAU,WAAU,WAAU,UAAQ,MAAC,kBAAkB,IAAI;AAAA,MAC9D,4CAAC,4BAAU,kBAAI;AAAA,MACf,4CAAC,4BAAU,WAAU,WAAU,UAAQ,MAAC,kBAAkB,IAAI;AAAA,MAC9D,4CAAC,4BAAU,oBAAM;AAAA,OACnB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ShapesDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ShapesDemo.tsx"],
-  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack padding=\"$2\" space=\"$4\">\n      <Square size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n      <Circle size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAM,MACzB;AAAA,gDAAC,yBAAO,MAAM,KAAK,iBAAgB,UAAS,WAAU,MAAK;AAAA,IAC3D,4CAAC,yBAAO,MAAM,KAAK,iBAAgB,UAAS,WAAU,MAAK;AAAA,KAC7D;AAEJ;",
   "names": []
 }

package/dist/cjs/SheetDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame flex={1} padding=\"$4\" justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input width={200} />\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame flex={1} justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n        <Sheet.ScrollView padding=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            alignSelf=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM;AAdN,0BAAuC;AACvC,mBAAsB;AAEtB,mBAAyB;AACzB,qBAAyD;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,SACE,4EACE;AAAA,iDAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,yBAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,kBAAI;AAAA,MAC1C,4CAAC,yBAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,GACtC,kBAAQ,gBAAgB,gBAC3B;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,WAAU;AAAA,QAEV;AAAA,sDAAC,mBAAM,SAAN,EAAc;AAAA,UACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,UACd,6CAAC,mBAAM,OAAN,EAAY,MAAM,GAAG,SAAQ,MAAK,gBAAe,UAAS,YAAW,UAAS,OAAM,MACnF;AAAA,wDAAC,yBAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,iCAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,YAC7E,4CAAC,wBAAM,OAAO,KAAK;AAAA,YAClB,SACC,4EACE;AAAA,0DAAC,cAAW,MAAM,WAAW,cAAc,cAAc;AAAA,cACzD;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,SAAS,MAAM,aAAa,IAAI;AAAA;AAAA,cACjC;AAAA,eACH;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,6CAAC,sBAAM,OAAK,MAAC,YAAY,CAAC,EAAE,GAAG,uBAAqB,MAAE,GAAG,OACvD;AAAA,gDAAC,mBAAM,SAAN,EAAc;AAAA,IACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,IACd,4CAAC,mBAAM,OAAN,EAAY,MAAM,GAAG,gBAAe,UAAS,YAAW,UAAS,OAAM,MACtE,uDAAC,mBAAM,YAAN,EAAiB,SAAQ,MAAK,OAAK,MAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAG;AAnExB;AAmE2B,+BAAM,iBAAN,+BAAqB;AAAA;AAAA;AAAA,MACtC;AAAA,MACA,4CAAC,qBAAG,yBAAW;AAAA,MACf,4CAAC,qBAAG,+BAAiB;AAAA,MACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,4CAAC,4BAAkB,MAAK,OAAM,0XAAd,CAMhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/SliderDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} alignItems=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoD;AAE7C,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,QAAQ,KAAK,YAAW,UAAS,OAAM,MAC7C;AAAA,gDAAC,gBAAa,QAAQ,KAAK,aAAY,YAAW;AAAA,IAClD,4CAAC,gBAAa,OAAO,KAAK;AAAA,KAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,6CAAC,yBAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,GAAI,GAAG,OACjD;AAAA,gDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,IACA,4CAAC,sBAAO,OAAP,EAAa,OAAO,GAAG,UAAQ,MAAC,SAAO,MAAC;AAAA,IACxC;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/cjs/SpinnerDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
-  "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$4\" alignItems=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAgC;AAEzB,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,gDAAC,0BAAQ,MAAK,SAAQ,OAAM,YAAW;AAAA,IACvC,4CAAC,0BAAQ,MAAK,SAAQ,OAAM,aAAY;AAAA,KAC1C;AAEJ;",
   "names": []
 }

package/dist/cjs/StacksDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/StacksDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n  return (\n    <XStack maw={250} p=\"$2\" als=\"center\" space>\n      <YStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </YStack>\n\n      <XStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </XStack>\n\n      <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>\n        <YStack fullscreen borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack\n          fullscreen\n          y={20}\n          x={20}\n          borderWidth={2}\n          backgroundColor=\"$color\"\n          borderRadius=\"$4\"\n          padding=\"$2\"\n        />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,KAAK,KAAK,GAAE,MAAK,KAAI,UAAS,OAAK,MACzC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,sDAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,sDAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA,6CAAC,yBAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM,GACrD;AAAA,kDAAC,yBAAO,YAAU,MAAC,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAClE,4CAAC,yBAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAChF;AAAA,QAAC;AAAA;AAAA,UACC,YAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/SwitchDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SwitchDemo.tsx"],
-  "sourcesContent": ["import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'tamagui'\n\nexport function SwitchDemo() {\n  return (\n    <YStack width={200} alignItems=\"center\" space=\"$3\">\n      <SwitchWithLabel size=\"$2\" />\n      <SwitchWithLabel size=\"$3\" />\n      <SwitchWithLabel size=\"$4\" />\n      <SwitchWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n  const id = `switch-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={200} alignItems=\"center\" space=\"$4\">\n      <Label\n        paddingRight=\"$0\"\n        minWidth={90}\n        justifyContent=\"flex-end\"\n        size={props.size}\n        htmlFor={id}\n      >\n        Dark mode\n      </Label>\n      <Separator minHeight={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA6E;AAEtE,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,4CAAC,4BAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,4CAAC,yBAAO,IAAQ,MAAM,MAAM,MAC1B,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/TabsAdvancedDemo.js.map

@@ -1,7 +1,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": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/cjs/TabsDemo.js.map

@@ -1,7 +1,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": []
 }

package/dist/cjs/TextDemo.js.map

@@ -1,7 +1,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAA6D;AAEtD,SAAS,WAAW;AACzB,SACE,6CAAC,yBAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,gDAAC,8BAAY,MAAK,MAAK,yBAAW;AAAA,IAClC,6CAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,8BAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,MACA,4CAAC,8BAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,OACF;AAAA,IACA,4CAAC,4BAAU,MAAK,MAAK,YAAW,OAAM,uBAEtC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ThemeInverseDemo.js.map

@@ -1,7 +1,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA8C;AAEvC,SAAS,mBAAmB;AACjC,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,WAAQ;AAAA,IACT,4CAAC,wBAAM,SAAO,MACZ,sDAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,6CAAC,yBAAO,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;AAAA,gDAAC,yBAAO,kBAAI;AAAA,IACZ,4CAAC,yBAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,4CAAC,yBAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,4CAAC,wBAAM,MAAK,UACV,sDAAC,yBAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ToastDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Toast, useToastController, useToastState } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, SizableText, Switch, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const currentToast = useToastState()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n      viewportName={currentToast.viewportName}\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToastController()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI;AARJ,mBAAyD;AACzD,mBAAkB;AAClB,qBAA4D;AAErD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAS,KAAK;AAEhD,SACE,6CAAC,yBAAO,OAAK,MAAC,YAAW,UACvB;AAAA,gDAAC,gBAAa,QAAgB;AAAA,IAC9B,4CAAC,gBAAa;AAAA,IAEd,4CAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,mBAAe,4BAAc;AAEnC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,WAAU;AAAA,MACV,cAAc,aAAa;AAAA,MAE3B,uDAAC,yBACC;AAAA,oDAAC,mBAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,4CAAC,mBAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAfK,aAAa;AAAA,EAgBpB;AAEJ;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,YAAQ,iCAAmB;AACjC,SACE,6CAAC,yBAAO,OAAM,MAAK,gBAAe,UAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,YACT;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,6CAAC,yBAAO,OAAM,MACZ;AAAA,gDAAC,8BAAY,MAAK,MAAK,oBAAM;AAAA,IAE7B;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS,CAAC,CAAC;AAAA,QACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,QAEvC;AAAA,UAAC,sBAAO;AAAA,UAAP;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,WAAW;AAAA,kBACT,mBAAmB;AAAA,gBACrB;AAAA,cACF;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEA,4CAAC,8BAAY,MAAK,MAAK,oBAAM;AAAA,KAC/B;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/ToastDuplicateDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport { Toast } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM;AAVN,0BAA6B;AAC7B,mBAAsB;AACtB,mBAAkB;AAClB,qBAAuC;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAS,CAAC;AAEpD,SACE,6CAAC,yBAAO,YAAW,UACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QAEb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,uDAAC,yBAAO,OAAK,MAAC,YAAW,UACvB;AAAA,sDAAC,yBACC,sDAAC,oCAAa,GAChB;AAAA,UAEA,6CAAC,yBACC;AAAA,wDAAC,mBAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,4CAAC,mBAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/ToggleGroupDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack paddingHorizontal=\"$4\">\n      <XStack alignItems=\"center\" space=\"$10\">\n        <YStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n        </YStack>\n        <XStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n        </XStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      space=\"$4\"\n    >\n      <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === 'single' ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AAPR,0BAAmD;AACnD,qBAA+D;AAExD,SAAS,kBAAkB;AAChC,SACE,4CAAC,yBAAO,mBAAkB,MACxB,uDAAC,yBAAO,YAAW,UAAS,OAAM,OAChC;AAAA,iDAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,0DAAC,2BAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,sDAAC,iCAAU,GACb;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,sDAAC,mCAAY,GACf;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,sDAAC,kCAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/TokensDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TokensDemo.tsx"],
-  "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n  {\n    name: `Size`,\n    key: `size`,\n  },\n  {\n    name: `Space`,\n    key: 'space',\n  },\n  {\n    name: `Space (-)`,\n    key: `spaceNegative`,\n  },\n  {\n    name: `Radius`,\n    key: `radius`,\n  },\n]\n\nexport function TokensDemo() {\n  const [section, setSection] = useState<Section>('size')\n\n  return (\n    <YStack space>\n      <XGroup alignItems=\"center\" alignSelf=\"center\">\n        {sections.map(({ name, key }) => {\n          return (\n            <XGroup.Item key={key}>\n              <Button\n                size=\"$3\"\n                theme={section === key ? 'active' : null}\n                fontFamily=\"$silkscreen\"\n                onPress={() => setSection(key)}\n              >\n                {name}\n              </Button>\n            </XGroup.Item>\n          )\n        })}\n      </XGroup>\n\n      {(section === 'size' ||\n        section === 'spaceNegative' ||\n        section === 'space' ||\n        section === 'radius') && <SizeSection section={section} />}\n    </YStack>\n  )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n  const allTokens = getConfig().tokens\n  const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n  const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n  const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n  const spaceTokensNegative = st\n    .filter((t) => parseFloat(t) < 0)\n    .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n  return (\n    <YStack flex={1} space>\n      <H2>Sizes</H2>\n      <YStack width=\"100%\" space=\"$2\" separator={<Separator />}>\n        {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n          (token) => {\n            return (\n              <XStack width=\"100%\" alignItems=\"center\" key={token}>\n                <YStack width=\"25%\">\n                  <H3 size=\"$6\">${token}</H3>\n                </YStack>\n                <YStack width=\"20%\">\n                  <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n                </YStack>\n                <Square\n                  size={tokens[token]?.val}\n                  backgroundColor=\"$color5\"\n                  {...(section === 'spaceNegative' && {\n                    backgroundColor: '$red5',\n                    size: -tokens[\n                      spaceTokensNegative.find(\n                        (t) => parseFloat(t) === -parseFloat(token)\n                      ) ?? token\n                    ]?.val,\n                  })}\n                  {...(section === 'radius' && {\n                    // @ts-ignore\n                    size: allTokens.size[token]?.val,\n                    borderRadius: tokens[token]?.val,\n                  })}\n                />\n              </XStack>\n            )\n          }\n        )}\n      </YStack>\n    </YStack>\n  )\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/cjs/TooltipDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TooltipDemo.tsx"],
-  "sourcesContent": ["import {\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  Circle,\n} from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Paragraph,\n  Theme,\n  Tooltip,\n  TooltipGroup,\n  TooltipProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nexport function TooltipDemo() {\n  return (\n    <TooltipGroup delay={{ open: 3000, close: 100 }}>\n      <YStack space=\"$2\" alignSelf=\"center\">\n        <XStack space=\"$2\">\n          <Demo groupId=\"0\" placement=\"top-end\" Icon={Circle} />\n          <Demo groupId=\"1\" placement=\"top\" Icon={ChevronUp} />\n          <Demo groupId=\"2\" placement=\"top-start\" Icon={Circle} />\n        </XStack>\n        <XStack space=\"$2\">\n          <Demo groupId=\"3\" placement=\"left\" Icon={ChevronLeft} />\n          <YStack flex={1} />\n          <Demo groupId=\"4\" placement=\"right\" Icon={ChevronRight} />\n        </XStack>\n        <XStack space=\"$2\">\n          <Demo groupId=\"5\" placement=\"bottom-end\" Icon={Circle} />\n          <Demo groupId=\"6\" placement=\"bottom\" Icon={ChevronDown} />\n          <Demo groupId=\"7\" placement=\"bottom-start\" Icon={Circle} />\n        </XStack>\n      </YStack>\n    </TooltipGroup>\n  )\n}\n\nexport function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {\n  return (\n    <Tooltip {...props}>\n      <Tooltip.Trigger>\n        <Button icon={Icon} circular />\n      </Tooltip.Trigger>\n      <Theme inverse>\n        <Tooltip.Content\n          enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}\n          scale={1}\n          x={0}\n          y={0}\n          opacity={1}\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        >\n          <Tooltip.Arrow />\n          <Paragraph size=\"$2\" lineHeight=\"$1\">\n            Hello world\n          </Paragraph>\n        </Tooltip.Content>\n      </Theme>\n    </Tooltip>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBQ;AAvBR,0BAMO;AAEP,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,4CAAC,+BAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,uDAAC,yBAAO,OAAM,MAAK,WAAU,UAC3B;AAAA,iDAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,WAAU,MAAM,4BAAQ;AAAA,MACpD,4CAAC,QAAK,SAAQ,KAAI,WAAU,OAAM,MAAM,+BAAW;AAAA,MACnD,4CAAC,QAAK,SAAQ,KAAI,WAAU,aAAY,MAAM,4BAAQ;AAAA,OACxD;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,QAAO,MAAM,iCAAa;AAAA,MACtD,4CAAC,yBAAO,MAAM,GAAG;AAAA,MACjB,4CAAC,QAAK,SAAQ,KAAI,WAAU,SAAQ,MAAM,kCAAc;AAAA,OAC1D;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,cAAa,MAAM,4BAAQ;AAAA,MACvD,4CAAC,QAAK,SAAQ,KAAI,WAAU,UAAS,MAAM,iCAAa;AAAA,MACxD,4CAAC,QAAK,SAAQ,KAAI,WAAU,gBAAe,MAAM,4BAAQ;AAAA,OAC3D;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AACtE,SACE,6CAAC,0BAAS,GAAG,OACX;AAAA,gDAAC,uBAAQ,SAAR,EACC,sDAAC,yBAAO,MAAM,MAAM,UAAQ,MAAC,GAC/B;AAAA,IACA,4CAAC,wBAAM,SAAO,MACZ;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,QAClD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,QACjD,OAAO;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QAEA;AAAA,sDAAC,uBAAQ,OAAR,EAAc;AAAA,UACf,4CAAC,4BAAU,MAAK,MAAK,YAAW,MAAK,yBAErC;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/UpdateThemeDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/UpdateThemeDemo.tsx"],
-  "sourcesContent": ["import * as Config from '@tamagui/config'\nimport { addTheme, updateTheme } from '@tamagui/theme'\nimport React, { useState } from 'react'\nimport {\n  Button,\n  Square,\n  Theme,\n  YStack,\n  getVariableValue,\n  useForceUpdate,\n  useIsomorphicLayoutEffect,\n} from 'tamagui'\n\nconst colors = Config.config.tokens.color\nconst colorKeys = Object.keys(colors)\n\nexport function UpdateThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n  const update = useForceUpdate()\n\n  useIsomorphicLayoutEffect(() => {\n    addTheme({\n      name: 'custom',\n      insertCSS: true,\n      theme: {\n        color: 'red',\n      },\n    })\n    setTheme('custom')\n  }, [])\n\n  return (\n    <YStack alignItems=\"center\" space>\n      <Theme name={theme ?? null}>\n        <Square borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        onPress={() => {\n          const randomColor = getVariableValue(\n            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]\n          )\n          updateTheme({\n            name: 'custom',\n            theme: {\n              color: randomColor,\n            },\n          })\n          update()\n        }}\n      >\n        Set to random color\n      </Button>\n    </YStack>\n  )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCI;AAhCJ,aAAwB;AACxB,mBAAsC;AACtC,mBAAgC;AAChC,qBAQO;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO;AACpC,MAAM,YAAY,OAAO,KAAK,MAAM;AAE7B,SAAS,kBAAkB;AAChC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAc;AACxC,QAAM,aAAS,+BAAe;AAE9B,gDAA0B,MAAM;AAC9B,+BAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,MACT;AAAA,IACF,CAAC;AACD,aAAS,QAAQ;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,gDAAC,wBAAM,MAAM,SAAS,MACpB,sDAAC,yBAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,kBAAc;AAAA,YAClB,OAAO,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC;AAAA,UAChE;AACA,wCAAY;AAAA,YACV,MAAM;AAAA,YACN,OAAO;AAAA,cACL,OAAO;AAAA,YACT;AAAA,UACF,CAAC;AACD,iBAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/conf.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/conf.tsx"],
-  "sourcesContent": ["import { config } from '@tamagui/config'\nimport { InferTamaguiConfig } from '@tamagui/core'\n\nexport { config } from '@tamagui/config'\n\nexport type Conf = InferTamaguiConfig<typeof config>\n\ndeclare module 'tamagui' {\n  interface TamaguiCustomConfig extends Conf {}\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAAA,iBAAuB;",
   "names": ["import_config"]
 }

package/dist/cjs/index.js

@@ -28,6 +28,7 @@ __export(src_exports, {
   AnimationsTimingDemo: () => import_AnimationsTimingDemo.AnimationsTimingDemo,
   AvatarDemo: () => import_AvatarDemo.AvatarDemo,
   ButtonDemo: () => import_ButtonDemo.ButtonDemo,
+  ButtonNewDemo: () => import_ButtonNewDemo.ButtonNewDemo,
   CardDemo: () => import_CardDemo.CardDemo,
   CheckboxDemo: () => import_CheckboxDemo.CheckboxDemo,
   ColorsDemo: () => import_ColorsDemo.ColorsDemo,
@@ -73,6 +74,7 @@ var import_AnimationsTimingDemo = require("./AnimationsTimingDemo");
 var import_AnimationsPresenceDemo = require("./AnimationsPresenceDemo");
 var import_AvatarDemo = require("./AvatarDemo");
 var import_ButtonDemo = require("./ButtonDemo");
+var import_ButtonNewDemo = require("./ButtonNewDemo");
 var import_CardDemo = require("./CardDemo");
 var import_DialogDemo = require("./DialogDemo");
 var import_AddThemeDemo = require("./AddThemeDemo");
@@ -121,6 +123,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   AnimationsTimingDemo,
   AvatarDemo,
   ButtonDemo,
+  ButtonNewDemo,
   CardDemo,
   CheckboxDemo,
   ColorsDemo,
@@ -155,6 +158,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   ToggleGroupDemo,
   TokensDemo,
   TooltipDemo,
-  UpdateThemeDemo
+  UpdateThemeDemo,
+  ...require("./useOnIntersecting")
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport { ToggleGroupDemo } from './ToggleGroupDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,wBAA2B;AAC3B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,4BAA+B;AAC/B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,uBAA0B;AAC1B,gCAAmC;AACnC,sBAAyB;AACzB,8BAAiC;AACjC,6BAAgC;AAChC,wBAAc,gCA5Cd;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,2BAA8B;AAC9B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,wBAA2B;AAC3B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,4BAA+B;AAC/B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,uBAA0B;AAC1B,gCAAmC;AACnC,sBAAyB;AACzB,8BAAiC;AACjC,6BAAgC;AAChC,wBAAc,gCA7Cd;",
   "names": []
 }

package/dist/cjs/tamagui.config.js

@@ -23,6 +23,4 @@ __export(tamagui_config_exports, {
 module.exports = __toCommonJS(tamagui_config_exports);
 var import_conf = require("./conf");
 var tamagui_config_default = import_conf.config;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
 //# sourceMappingURL=tamagui.config.js.map

package/dist/cjs/tamagui.config.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/tamagui.config.ts"],
-  "sourcesContent": ["import { config } from './conf'\nexport default config\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuB;AACvB,IAAO,yBAAQ;",
   "names": []
 }

package/dist/cjs/useOnIntersecting.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useOnIntersecting.tsx"],
-  "sourcesContent": ["import { MutableRefObject, useEffect, useState } from 'react'\nimport { isWeb, useEvent } from 'tamagui'\n\ntype DisposeFn = () => void\n\ntype IntersectCallback = (\n  props: (IntersectionObserverEntry | null)[],\n  didResize?: boolean\n) => DisposeFn | void | null\n\ntype HTMLRef = MutableRefObject<HTMLElement | null>\n\nexport function useIsIntersecting<Ref extends HTMLRef | HTMLRef[]>(\n  refs: Ref,\n  { once, ...opts }: IntersectionObserverInit & { once?: boolean } = {}\n): Ref extends any[] ? boolean[] : boolean {\n  const [values, setValues] = useState<boolean[]>([])\n\n  if (isWeb) {\n    useOnIntersecting(\n      refs,\n      (entries) => {\n        const intersecting = entries.some((x) => x?.isIntersecting)\n        if (once && !intersecting) return\n        setValues((prev) => {\n          const next = entries.map((e) => e?.isIntersecting ?? false)\n          if (prev.length === next.length && prev.every((e, i) => e === next[i])) {\n            return prev\n          }\n          return next\n        })\n      },\n      opts\n    )\n  }\n\n  return (Array.isArray(refs) ? values : values[0]) as any\n}\n\nexport function useOnIntersecting<Ref extends HTMLRef | HTMLRef[]>(\n  refsIn: Ref,\n  incomingCbRaw: IntersectCallback,\n  { threshold = 0, root, rootMargin }: IntersectionObserverInit = {},\n  mountArgs: any[] = []\n) {\n  const onIntersectEvent = useEvent(incomingCbRaw)\n\n  useEffect(() => {\n    const refs = (Array.isArray(refsIn) ? refsIn : [refsIn]) as HTMLRef[]\n    if (!refs.length) return\n\n    let dispose: DisposeFn | null = null\n    let currentEntries: (IntersectionObserverEntry | null)[] = []\n    const options = {\n      threshold,\n      root,\n      rootMargin,\n    }\n    const io = new IntersectionObserver((entries) => {\n      currentEntries = refs.map((ref, index) => {\n        return (\n          entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null\n        )\n      })\n      dispose?.()\n      dispose = onIntersectEvent(currentEntries) || null\n    }, options)\n\n    for (const ref of refs) {\n      if (ref.current) {\n        io.observe(ref.current)\n      }\n    }\n\n    return () => {\n      dispose?.()\n      io.disconnect()\n    }\n  }, [\n    onIntersectEvent,\n    refsIn,\n    root,\n    rootMargin,\n    threshold,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    ...mountArgs,\n  ])\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AACtD,qBAAgC;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAoB,CAAC,CAAC;AAElD,MAAI,sBAAO;AACT;AAAA,MACE;AAAA,MACA,CAAC,YAAY;AACX,cAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,uBAAG,cAAc;AAC1D,YAAI,QAAQ,CAAC;AAAc;AAC3B,kBAAU,CAAC,SAAS;AAClB,gBAAM,OAAO,QAAQ,IAAI,CAAC,OAAM,uBAAG,mBAAkB,KAAK;AAC1D,cAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG;AACtE,mBAAO;AAAA,UACT;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAQ,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,uBAAmB,yBAAS,aAAa;AAE/C,8BAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B;AAChC,QAAI,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAAU;AACxC,eACE,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK;AAAA,MAE9E,CAAC;AACD;AACA,gBAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO,MAAM;AACtB,UAAI,IAAI,SAAS;AACf,WAAG,QAAQ,IAAI,OAAO;AAAA,MACxB;AAAA,IACF;AAEA,WAAO,MAAM;AACX;AACA,SAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }

package/dist/esm/AddThemeDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AddThemeDemo.tsx"],
-  "sourcesContent": ["import { addTheme } from '@tamagui/theme'\nimport { useState } from 'react'\nimport { Button, H3, Square, Theme, YStack } from 'tamagui'\n\nexport function AddThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n\n  return (\n    <YStack alignItems=\"center\" space>\n      <H3>Theme: {theme ?? 'none'}</H3>\n\n      <Theme name={theme ?? 'red'}>\n        <Square borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        disabled={theme === 'superblue'}\n        onPress={() => {\n          addTheme({\n            name: 'superblue',\n            insertCSS: true,\n            theme: {\n              background: '#000',\n              color: 'blue',\n            },\n          })\n          setTheme('superblue')\n        }}\n      >\n        Add superblue theme\n      </Button>\n    </YStack>\n  )\n}\n"],
   "mappings": "AASM,SAGE,KAHF;AATN,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,QAAQ,OAAO,cAAc;AAE3C,SAAS,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc;AAExC,SACE,qBAAC,UAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,yBAAC,MAAG;AAAA;AAAA,MAAQ,SAAS;AAAA,OAAO;AAAA,IAE5B,oBAAC,SAAM,MAAM,SAAS,OACpB,8BAAC,UAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,UAAU;AAAA,QACpB,SAAS,MAAM;AACb,mBAAS;AAAA,YACP,MAAM;AAAA,YACN,WAAW;AAAA,YACX,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,UACF,CAAC;AACD,mBAAS,WAAW;AAAA,QACtB;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/AddThemeDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AddThemeDemo.tsx"],
-  "sourcesContent": ["import { addTheme } from '@tamagui/theme'\nimport { useState } from 'react'\nimport { Button, H3, Square, Theme, YStack } from 'tamagui'\n\nexport function AddThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n\n  return (\n    <YStack alignItems=\"center\" space>\n      <H3>Theme: {theme ?? 'none'}</H3>\n\n      <Theme name={theme ?? 'red'}>\n        <Square borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        disabled={theme === 'superblue'}\n        onPress={() => {\n          addTheme({\n            name: 'superblue',\n            insertCSS: true,\n            theme: {\n              background: '#000',\n              color: 'blue',\n            },\n          })\n          setTheme('superblue')\n        }}\n      >\n        Add superblue theme\n      </Button>\n    </YStack>\n  )\n}\n"],
   "mappings": "AASM,SAGE,KAHF;AATN,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,QAAQ,OAAO,cAAc;AAE3C,SAAS,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc;AAExC,SACE,qBAAC,UAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,yBAAC,MAAG;AAAA;AAAA,MAAQ,SAAS;AAAA,OAAO;AAAA,IAE5B,oBAAC,SAAM,MAAM,SAAS,OACpB,8BAAC,UAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,UAAU;AAAA,QACpB,SAAS,MAAM;AACb,mBAAS;AAAA,YACP,MAAM;AAAA,YACN,WAAW;AAAA,YACX,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,UACF,CAAC;AACD,mBAAS,WAAW;AAAA,QACtB;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/AlertDialogDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
-  "sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{ opacity: 0 }}\n          exitStyle={{ opacity: 0 }}\n        />\n        <AlertDialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" justifyContent=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
   "mappings": "AAMQ,cAoCI,YApCJ;AANR,SAAS,aAAa,QAAQ,QAAQ,cAAc;AAE7C,SAAS,kBAAkB;AAChC,SACE,qBAAC,eAAY,QAAM,MACjB;AAAA,wBAAC,YAAY,SAAZ,EAAoB,SAAO,MAC1B,8BAAC,UAAO,wBAAU,GACpB;AAAA,IAEA,qBAAC,YAAY,QAAZ,EACC;AAAA;AAAA,QAAC,YAAY;AAAA,QAAZ;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAE,SAAS,EAAE;AAAA,UACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,QAJpB;AAAA,MAKN;AAAA,MACA;AAAA,QAAC,YAAY;AAAA,QAAZ;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,GAAG;AAAA,UACH,OAAO;AAAA,UACP,SAAS;AAAA,UACT,GAAG;AAAA,UAEH,+BAAC,UAAO,OAAK,MACX;AAAA,gCAAC,YAAY,OAAZ,EAAkB,oBAAM;AAAA,YACzB,oBAAC,YAAY,aAAZ,EAAwB,mEAEzB;AAAA,YAEA,qBAAC,UAAO,OAAM,MAAK,gBAAe,YAChC;AAAA,kCAAC,YAAY,QAAZ,EAAmB,SAAO,MACzB,8BAAC,UAAO,oBAAM,GAChB;AAAA,cACA,oBAAC,YAAY,QAAZ,EAAmB,SAAO,MACzB,8BAAC,UAAO,OAAM,UAAS,oBAAM,GAC/B;AAAA,eACF;AAAA,aACF;AAAA;AAAA,QA9BI;AAAA,MA+BN;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/AlertDialogDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
-  "sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{ opacity: 0 }}\n          exitStyle={{ opacity: 0 }}\n        />\n        <AlertDialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" justifyContent=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
   "mappings": "AAMQ,cAoCI,YApCJ;AANR,SAAS,aAAa,QAAQ,QAAQ,cAAc;AAE7C,SAAS,kBAAkB;AAChC,SACE,qBAAC,eAAY,QAAM,MACjB;AAAA,wBAAC,YAAY,SAAZ,EAAoB,SAAO,MAC1B,8BAAC,UAAO,wBAAU,GACpB;AAAA,IAEA,qBAAC,YAAY,QAAZ,EACC;AAAA;AAAA,QAAC,YAAY;AAAA,QAAZ;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAE,SAAS,EAAE;AAAA,UACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,QAJpB;AAAA,MAKN;AAAA,MACA;AAAA,QAAC,YAAY;AAAA,QAAZ;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,GAAG;AAAA,UACH,OAAO;AAAA,UACP,SAAS;AAAA,UACT,GAAG;AAAA,UAEH,+BAAC,UAAO,OAAK,MACX;AAAA,gCAAC,YAAY,OAAZ,EAAkB,oBAAM;AAAA,YACzB,oBAAC,YAAY,aAAZ,EAAwB,mEAEzB;AAAA,YAEA,qBAAC,UAAO,OAAM,MAAK,gBAAe,YAChC;AAAA,kCAAC,YAAY,QAAZ,EAAmB,SAAO,MACzB,8BAAC,UAAO,oBAAM,GAChB;AAAA,cACA,oBAAC,YAAY,QAAZ,EAAmB,SAAO,MACzB,8BAAC,UAAO,OAAM,UAAS,oBAAM,GAC/B;AAAA,eACF;AAAA,aACF;AAAA;AAAA,QA9BI;AAAA,MA+BN;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        borderColor=\"$borderColor\"\n        borderWidth={1}\n        borderRadius=\"$9\"\n        backgroundColor=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        position=\"absolute\"\n        bottom={20}\n        left={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
   "mappings": "AAkBI,mBAiBuB,KAjBvB;AAlBJ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,QAAQ,QAAQ,sBAAsB,gBAAgB;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,UAAU,SAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,aAAa;AAAA,QAC9B;AAAA,QACA,MAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAa;AAAA,QACb,cAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,IAChD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/AnimationsDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        borderColor=\"$borderColor\"\n        borderWidth={1}\n        borderRadius=\"$9\"\n        backgroundColor=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        position=\"absolute\"\n        bottom={20}\n        left={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
   "mappings": "AAkBI,mBAiBuB,KAjBvB;AAlBJ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,QAAQ,QAAQ,sBAAsB,gBAAgB;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,UAAU,SAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,aAAa;AAAA,QAC9B;AAAA,QACA,MAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAa;AAAA,QACb,cAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,IAChD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/AnimationsEnterDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        backgroundColor=\"$pink10\"\n        borderRadius=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
   "mappings": "AAYW,SAIP,UAJO,KAIP,YAJO;AAZX,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,oBAAC,UAAO,KAAU;AAAA,EAC3B;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,iBAAgB;AAAA,QAChB,cAAa;AAAA,QAEZ,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,oBAAC,UAAO,MAAK,MAAK,WAAU,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEvE;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsEnterDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        backgroundColor=\"$pink10\"\n        borderRadius=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
   "mappings": "AAYW,SAIP,UAJO,KAIP,YAJO;AAZX,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,oBAAC,UAAO,KAAU;AAAA,EAC3B;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,iBAAgB;AAAA,QAChB,cAAa;AAAA,QAEZ,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,oBAAC,UAAO,MAAK,MAAK,WAAU,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEvE;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsHoverDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      borderColor=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
   "mappings": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsHoverDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      borderColor=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
   "mappings": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsPresenceDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack\n      overflow=\"hidden\"\n      backgroundColor=\"#000\"\n      position=\"relative\"\n      height={300}\n      width=\"100%\"\n      alignItems=\"center\"\n    >\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} opacity={1}>\n          <Image source={{ uri: images[imageIndex], width: 780, height: 300 }} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        position=\"absolute\"\n        left=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        position=\"absolute\"\n        right=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
   "mappings": "AAkCI,SAUM,KAVN;AAlCJ,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,iBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,YAAW;AAAA,MAEX;AAAA,4BAAC,mBAAgB,cAA4B,aAC3C,8BAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,SAAS,GACvE,8BAAC,SAAM,QAAQ,EAAE,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,IAAI,GAAG,KADjD,IAEtB,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAmB;AAAA,YACnB,MAAM;AAAA,YACN,MAAK;AAAA,YACL,UAAS;AAAA,YACT,MAAK;AAAA,YACL,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,QAC5B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAmB;AAAA,YACnB,MAAM;AAAA,YACN,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAM;AAAA,YACN,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,QAC3B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
   "names": []
 }

package/dist/esm/AnimationsPresenceDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack\n      overflow=\"hidden\"\n      backgroundColor=\"#000\"\n      position=\"relative\"\n      height={300}\n      width=\"100%\"\n      alignItems=\"center\"\n    >\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} opacity={1}>\n          <Image source={{ uri: images[imageIndex], width: 780, height: 300 }} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        position=\"absolute\"\n        left=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        position=\"absolute\"\n        right=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
   "mappings": "AAkCI,SAUM,KAVN;AAlCJ,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,iBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,YAAW;AAAA,MAEX;AAAA,4BAAC,mBAAgB,cAA4B,aAC3C,8BAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,SAAS,GACvE,8BAAC,SAAM,QAAQ,EAAE,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,IAAI,GAAG,KADjD,IAEtB,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAmB;AAAA,YACnB,MAAM;AAAA,YACN,MAAK;AAAA,YACL,UAAS;AAAA,YACT,MAAK;AAAA,YACL,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,QAC5B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAmB;AAAA,YACnB,MAAM;AAAA,YACN,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAM;AAAA,YACN,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,QAC3B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
   "names": []
 }

package/dist/esm/AnimationsTimingDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsTimingDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      backgroundColor=\"$pink10\"\n      animation=\"100ms\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
   "mappings": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsTimingDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsTimingDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      backgroundColor=\"$pink10\"\n      animation=\"100ms\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
   "mappings": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }