@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/ToastDuplicateDemo.mjs.map

@@ -2,6 +2,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,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,SAAAC,MAAa,iBACtB,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,MAAMC,EAAqB,IAAM,CACtC,KAAM,CAACC,EAAYC,CAAa,EAAIN,EAAM,SAAS,CAAC,EAEpD,MACE,CAACG,EAAO,WAAW,SACjB,CAACF,EACC,SAAS,IAAM,CACbK,EAAeC,GAAQA,EAAM,CAAC,CAChC,GACD,UAED,EANCN,GAOA,CAAC,GAAG,MAAMI,CAAU,CAAC,EAAE,IAAI,CAACG,EAAGC,IAC9B,CAACV,EACC,aAAa,mBACb,KAAKU,EACL,UAAU,IACV,YAAY,CAAE,QAAS,EAAG,MAAO,GAAK,EAAG,GAAI,EAC7C,WAAW,CAAE,QAAS,EAAG,MAAO,EAAG,EAAG,GAAI,EAC1C,GAAG,EACH,SAAS,EACT,OAAO,EACP,UAAU,QAEV,CAACP,EAAO,MAAM,WAAW,SACvB,CAACC,EACC,CAACL,CAAa,EAChB,EAFCK,EAID,CAACA,EACC,CAACJ,EAAM,MAAM,mBAAmB,EAA/BA,EAAM,MACP,CAACA,EAAM,YAAY,mCAAmC,EAArDA,EAAM,YACT,EAHCI,EAIH,EATCD,EAUH,EArBCH,EAsBF,EACH,EAhCCI,EAkCL",
-  "names": ["CheckCircle2", "Toast", "React", "Button", "XStack", "YStack", "ToastDuplicateDemo", "savedCount", "setSavedCount", "old", "_", "index"]
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB,SAAS,QAAQ,QAAQ,cAAc;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,WAAW;AAAA,IACjB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,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,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,WAAW;AAAA,MACvB,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
+  "names": []
 }

package/dist/jsx/ToggleGroupDemo.js

@@ -1,2 +1,40 @@
-import{AlignCenter as G,AlignLeft as C,AlignRight as L}from"@tamagui/lucide-icons";import{Label as X,ToggleGroup as $,XStack as I,YStack as T}from"tamagui";function R(){return<T paddingHorizontal="$4"><I alignItems="center"space="$10"><T alignItems="center"space="$6"><S type="single"size="$3"orientation="horizontal"/><S type="multiple"size="$4"orientation="horizontal"/></T><I alignItems="center"space="$6"><S type="single"size="$3"orientation="vertical"/><S type="multiple"size="$4"orientation="vertical"/></I></I></T>}function S(e){const k=`switch-${e.size.toString().slice(1)}-${e.type}`;return<I flexDirection={e.orientation==="horizontal"?"row":"column"}alignItems="center"justifyContent="center"space="$4"><X paddingRight="$0"justifyContent="flex-end"size={e.size}htmlFor={k}>{e.type==="single"?"Single":"Multiple"}</X><$ orientation={e.orientation}id={k}type={e.type}size={e.size}disableDeactivation={e.type==="single"?!0:void 0}><$.Item value="left"aria-label="Left aligned"><C/></$.Item><$.Item value="center"aria-label="Center aligned"><G/></$.Item><$.Item value="right"aria-label="Right aligned"><L/></$.Item></$></I>}export{R as ToggleGroupDemo};
+import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+function ToggleGroupDemo() {
+  return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
+    <YStack alignItems="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
+    </YStack>
+    <XStack alignItems="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
+    </XStack>
+  </XStack></YStack>;
+}
+function ToggleGroupComponent(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
+  return <XStack
+    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
+    alignItems="center"
+    justifyContent="center"
+    space="$4"
+  >
+    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <ToggleGroup
+      orientation={props.orientation}
+      id={id}
+      type={props.type}
+      size={props.size}
+      disableDeactivation={props.type === "single" ? true : void 0}
+    >
+      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
+      <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
+      <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
+    </ToggleGroup>
+  </XStack>;
+}
+export {
+  ToggleGroupDemo
+};
 //# sourceMappingURL=ToggleGroupDemo.js.map

package/dist/jsx/ToggleGroupDemo.js.map

@@ -2,6 +2,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,OAAS,eAAAA,EAAa,aAAAC,EAAW,cAAAC,MAAkB,wBACnD,OAAS,SAAAC,EAAmB,eAAAC,EAAa,UAAAC,EAAQ,UAAAC,MAAc,UAExD,SAASC,GAAkB,CAChC,MACE,CAACD,EAAO,kBAAkB,KACxB,CAACD,EAAO,WAAW,QAAS,MAAM,MAChC,CAACC,EAAO,WAAW,QAAS,MAAM,KAChC,CAACE,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,YAAa,EACvE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,YAAa,EAC3E,EAHCF,EAID,CAACD,EAAO,WAAW,QAAS,MAAM,KAChC,CAACG,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,UAAW,EACrE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,UAAW,EACzE,EAHCH,EAIH,EATCA,EAUH,EAXCC,EAaL,CAEA,SAASE,EAAqBC,EAI3B,CACD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAKA,EAAM,OAC7D,MACE,CAACJ,EACC,eAAeI,EAAM,cAAgB,aAAe,MAAQ,SAC5D,WAAW,QACX,eAAe,QACf,MAAM,KAEN,CAACN,EAAM,aAAa,IAAK,eAAe,UAAW,MAAMM,EAAM,KAAM,SAASC,IAC3ED,EAAM,OAAS,SAAW,SAAW,WACxC,EAFCN,EAKD,CAACC,EACC,aAAaK,EAAM,YACnB,IAAIC,EACJ,MAAMD,EAAM,KACZ,MAAMA,EAAM,KACZ,qBAAqBA,EAAM,OAAS,SAAW,GAAO,QAEtD,CAACL,EAAY,KAAK,MAAM,MAAO,WAAW,eACxC,CAACH,CAAU,EACb,EAFCG,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,QAAS,WAAW,iBAC1C,CAACJ,CAAY,EACf,EAFCI,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,OAAQ,WAAW,gBACzC,CAACF,CAAW,EACd,EAFCE,EAAY,KAGf,EAhBCA,EAiBH,EA5BCC,EA8BL",
-  "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "ToggleGroupComponent", "props", "id"]
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
+  "names": []
 }

package/dist/jsx/ToggleGroupDemo.mjs

@@ -1,2 +1,40 @@
-import{AlignCenter as G,AlignLeft as C,AlignRight as L}from"@tamagui/lucide-icons";import{Label as X,ToggleGroup as $,XStack as I,YStack as T}from"tamagui";function R(){return<T paddingHorizontal="$4"><I alignItems="center"space="$10"><T alignItems="center"space="$6"><S type="single"size="$3"orientation="horizontal"/><S type="multiple"size="$4"orientation="horizontal"/></T><I alignItems="center"space="$6"><S type="single"size="$3"orientation="vertical"/><S type="multiple"size="$4"orientation="vertical"/></I></I></T>}function S(e){const k=`switch-${e.size.toString().slice(1)}-${e.type}`;return<I flexDirection={e.orientation==="horizontal"?"row":"column"}alignItems="center"justifyContent="center"space="$4"><X paddingRight="$0"justifyContent="flex-end"size={e.size}htmlFor={k}>{e.type==="single"?"Single":"Multiple"}</X><$ orientation={e.orientation}id={k}type={e.type}size={e.size}disableDeactivation={e.type==="single"?!0:void 0}><$.Item value="left"aria-label="Left aligned"><C/></$.Item><$.Item value="center"aria-label="Center aligned"><G/></$.Item><$.Item value="right"aria-label="Right aligned"><L/></$.Item></$></I>}export{R as ToggleGroupDemo};
+import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+function ToggleGroupDemo() {
+  return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
+    <YStack alignItems="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
+    </YStack>
+    <XStack alignItems="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
+    </XStack>
+  </XStack></YStack>;
+}
+function ToggleGroupComponent(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
+  return <XStack
+    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
+    alignItems="center"
+    justifyContent="center"
+    space="$4"
+  >
+    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <ToggleGroup
+      orientation={props.orientation}
+      id={id}
+      type={props.type}
+      size={props.size}
+      disableDeactivation={props.type === "single" ? true : void 0}
+    >
+      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
+      <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
+      <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
+    </ToggleGroup>
+  </XStack>;
+}
+export {
+  ToggleGroupDemo
+};
 //# sourceMappingURL=ToggleGroupDemo.mjs.map

package/dist/jsx/ToggleGroupDemo.mjs.map

@@ -2,6 +2,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,OAAS,eAAAA,EAAa,aAAAC,EAAW,cAAAC,MAAkB,wBACnD,OAAS,SAAAC,EAAmB,eAAAC,EAAa,UAAAC,EAAQ,UAAAC,MAAc,UAExD,SAASC,GAAkB,CAChC,MACE,CAACD,EAAO,kBAAkB,KACxB,CAACD,EAAO,WAAW,QAAS,MAAM,MAChC,CAACC,EAAO,WAAW,QAAS,MAAM,KAChC,CAACE,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,YAAa,EACvE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,YAAa,EAC3E,EAHCF,EAID,CAACD,EAAO,WAAW,QAAS,MAAM,KAChC,CAACG,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,UAAW,EACrE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,UAAW,EACzE,EAHCH,EAIH,EATCA,EAUH,EAXCC,EAaL,CAEA,SAASE,EAAqBC,EAI3B,CACD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAKA,EAAM,OAC7D,MACE,CAACJ,EACC,eAAeI,EAAM,cAAgB,aAAe,MAAQ,SAC5D,WAAW,QACX,eAAe,QACf,MAAM,KAEN,CAACN,EAAM,aAAa,IAAK,eAAe,UAAW,MAAMM,EAAM,KAAM,SAASC,IAC3ED,EAAM,OAAS,SAAW,SAAW,WACxC,EAFCN,EAKD,CAACC,EACC,aAAaK,EAAM,YACnB,IAAIC,EACJ,MAAMD,EAAM,KACZ,MAAMA,EAAM,KACZ,qBAAqBA,EAAM,OAAS,SAAW,GAAO,QAEtD,CAACL,EAAY,KAAK,MAAM,MAAO,WAAW,eACxC,CAACH,CAAU,EACb,EAFCG,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,QAAS,WAAW,iBAC1C,CAACJ,CAAY,EACf,EAFCI,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,OAAQ,WAAW,gBACzC,CAACF,CAAW,EACd,EAFCE,EAAY,KAGf,EAhBCA,EAiBH,EA5BCC,EA8BL",
-  "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "ToggleGroupComponent", "props", "id"]
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
+  "names": []
 }

package/dist/jsx/TokensDemo.js

@@ -1,2 +1,78 @@
-import{getConfig as h}from"@tamagui/core";import{useState as H}from"react";import{Button as N,H2 as T,H3 as Y,H4 as X,Separator as I,Square as C,XGroup as F,XStack as G,YStack as S}from"tamagui";const B=[{name:"Size",key:"size"},{name:"Space",key:"space"},{name:"Space (-)",key:"spaceNegative"},{name:"Radius",key:"radius"}];function P(){const[a,u]=H("size");return<S space><F alignItems="center"alignSelf="center">{B.map(({name:t,key:s})=><F.Item key={s}><N size="$3"theme={a===s?"active":null}fontFamily="$silkscreen"onPress={()=>u(s)}>{t}</N></F.Item>)}</F>{(a==="size"||a==="spaceNegative"||a==="space"||a==="radius")&&<R section={a}/>}</S>}function R({section:a}){const u=h().tokens,t=u[a.startsWith("space")?"space":a],s=Object.keys(t).sort((e,o)=>parseFloat(e)>parseFloat(o)?1:-1),$=s.filter(e=>parseFloat(e)>=0),m=s.filter(e=>parseFloat(e)<0).sort((e,o)=>parseFloat(e)>parseFloat(o)?-1:1);return<S flex={1}space><T>Sizes</T><S width="100%"space="$2"separator={<I/>}>{(a==="spaceNegative"?m:$).map(e=><G width="100%"alignItems="center"key={e}><S width="25%"><Y size="$6">${e}</Y></S><S width="20%"><X size="$5">{t[e]?.val}px</X></S><C size={t[e]?.val}backgroundColor="$color5"{...a==="spaceNegative"&&{backgroundColor:"$red5",size:-t[m.find(o=>parseFloat(o)===-parseFloat(e))??e]?.val}}{...a==="radius"&&{size:u.size[e]?.val,borderRadius:t[e]?.val}}/></G>)}</S></S>}export{P as TokensDemo};
+import { getConfig } from "@tamagui/core";
+import { useState } from "react";
+import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
+const sections = [
+  {
+    name: `Size`,
+    key: `size`
+  },
+  {
+    name: `Space`,
+    key: "space"
+  },
+  {
+    name: `Space (-)`,
+    key: `spaceNegative`
+  },
+  {
+    name: `Radius`,
+    key: `radius`
+  }
+];
+function TokensDemo() {
+  const [section, setSection] = useState("size");
+  return <YStack space>
+    <XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => {
+      return <XGroup.Item key={key}><Button
+        size="$3"
+        theme={section === key ? "active" : null}
+        fontFamily="$silkscreen"
+        onPress={() => setSection(key)}
+      >{name}</Button></XGroup.Item>;
+    })}</XGroup>
+    {(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
+  </YStack>;
+}
+function SizeSection({ section }) {
+  const allTokens = getConfig().tokens;
+  const tokens = allTokens[section.startsWith("space") ? "space" : section];
+  const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
+  const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
+  const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
+  return <YStack flex={1} space>
+    <H2>Sizes</H2>
+    <YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => {
+        return <XStack width="100%" alignItems="center" key={token}>
+          <YStack width="25%"><H3 size="$6">
+            {"$"}
+            {token}
+          </H3></YStack>
+          <YStack width="20%"><H4 size="$5">
+            {tokens[token]?.val}
+            {"px"}
+          </H4></YStack>
+          <Square
+            size={tokens[token]?.val}
+            backgroundColor="$color5"
+            {...section === "spaceNegative" && {
+              backgroundColor: "$red5",
+              size: -tokens[spaceTokensNegative.find(
+                (t) => parseFloat(t) === -parseFloat(token)
+              ) ?? token]?.val
+            }}
+            {...section === "radius" && {
+              // @ts-ignore
+              size: allTokens.size[token]?.val,
+              borderRadius: tokens[token]?.val
+            }}
+          />
+        </XStack>;
+      }
+    )}</YStack>
+  </YStack>;
+}
+export {
+  TokensDemo
+};
 //# sourceMappingURL=TokensDemo.js.map

package/dist/jsx/TokensDemo.js.map

@@ -2,6 +2,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": "AAAA,OAAiB,aAAAA,MAAiB,gBAClC,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,MAAAC,EAAI,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAI9E,MAAMC,EAA6C,CACjD,CACE,KAAM,OACN,IAAK,MACP,EACA,CACE,KAAM,QACN,IAAK,OACP,EACA,CACE,KAAM,YACN,IAAK,eACP,EACA,CACE,KAAM,SACN,IAAK,QACP,CACF,EAEO,SAASC,GAAa,CAC3B,KAAM,CAACC,EAASC,CAAU,EAAIb,EAAkB,MAAM,EAEtD,MACE,CAACS,EAAO,MACN,CAACF,EAAO,WAAW,QAAS,UAAU,UACnCG,EAAS,IAAI,CAAC,CAAE,KAAAI,EAAM,IAAAC,CAAI,IAEvB,CAACR,EAAO,KAAK,KAAKQ,GAChB,CAACd,EACC,KAAK,IACL,OAAOW,IAAYG,EAAM,SAAW,KACpC,WAAW,aACX,SAAS,IAAMF,EAAWE,CAAG,IAE5BD,EACH,EAPCb,EAQH,EATCM,EAAO,KAWX,EACH,EAfCA,IAiBCK,IAAY,QACZA,IAAY,iBACZA,IAAY,SACZA,IAAY,WAAa,CAACI,EAAY,SAASJ,EAAS,GAC5D,EAtBCH,EAwBL,CAEA,SAASO,EAAY,CAAE,QAAAJ,CAAQ,EAAyB,CACtD,MAAMK,EAAYlB,EAAU,EAAE,OACxBmB,EAASD,EAAUL,EAAQ,WAAW,OAAO,EAAI,QAAUA,CAAO,EAClEO,EAAK,OAAO,KAAKD,CAAM,EAAE,KAAK,CAACE,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,EAAI,EAAG,EAChFC,EAAcH,EAAG,OAAQI,GAAM,WAAWA,CAAC,GAAK,CAAC,EACjDC,EAAsBL,EACzB,OAAQI,GAAM,WAAWA,CAAC,EAAI,CAAC,EAC/B,KAAK,CAACH,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,GAAK,CAAE,EAE1D,MACE,CAACZ,EAAO,MAAM,EAAG,MACf,CAACP,EAAG,KAAK,EAARA,EACD,CAACO,EAAO,MAAM,MAAO,MAAM,IAAK,WAAW,CAACJ,CAAU,MAClDO,IAAY,gBAAkBY,EAAsBF,GAAa,IAChEG,GAEG,CAACjB,EAAO,MAAM,MAAO,WAAW,QAAS,KAAKiB,GAC5C,CAAChB,EAAO,MAAM,MACZ,CAACN,EAAG,KAAK,KAAK,EAAEsB,EAAM,EAArBtB,EACH,EAFCM,EAGD,CAACA,EAAO,MAAM,MACZ,CAACL,EAAG,KAAK,MAAMc,EAAOO,CAAK,GAAG,IAAI,EAAE,EAAnCrB,EACH,EAFCK,EAGD,CAACH,EACC,MAAMY,EAAOO,CAAK,GAAG,IACrB,gBAAgB,aACXb,IAAY,iBAAmB,CAClC,gBAAiB,QACjB,KAAM,CAACM,EACLM,EAAoB,KACjBD,GAAM,WAAWA,CAAC,IAAM,CAAC,WAAWE,CAAK,CAC5C,GAAKA,CACP,GAAG,GACL,MACKb,IAAY,UAAY,CAE3B,KAAMK,EAAU,KAAKQ,CAAK,GAAG,IAC7B,aAAcP,EAAOO,CAAK,GAAG,GAC/B,EACF,EACF,EAxBCjB,EA2BP,EACF,EAhCCC,EAiCH,EAnCCA,EAqCL",
-  "names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "TokensDemo", "section", "setSection", "name", "key", "SizeSection", "allTokens", "tokens", "st", "a", "b", "spaceTokens", "t", "spaceTokensNegative", "token"]
+  "mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC;AACvD,QAAM,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,MAAM,GAAG;AAAA,IACf,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAClD,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAAU;AACT,eACE,CAAC,OAAO,MAAM,OAAO,WAAW,SAAS,KAAK;AAAA,UAC5C,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,aAAK;AAAA,aAAE;AAAA,UAAM,EAArB,GACH,EAFC;AAAA,UAGD,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,aAAM,OAAO,KAAK,GAAG;AAAA,aAAI;AAAA,UAAE,EAAnC,GACH,EAFC;AAAA,UAGD,CAAC;AAAA,YACC,MAAM,OAAO,KAAK,GAAG;AAAA,YACrB,gBAAgB;AAAA,gBACX,YAAY,mBAAmB;AAAA,cAClC,iBAAiB;AAAA,cACjB,MAAM,CAAC,OACL,oBAAoB;AAAA,gBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,cAC5C,KAAK,KACP,GAAG;AAAA,YACL;AAAA,gBACK,YAAY,YAAY;AAAA;AAAA,cAE3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,cAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,YAC/B;AAAA,UACF;AAAA,QACF,EAxBC;AAAA,MA0BL;AAAA,IACF,EACF,EAhCC;AAAA,EAiCH,EAnCC;AAqCL;",
+  "names": []
 }

package/dist/jsx/TokensDemo.mjs

@@ -1,2 +1,78 @@
-import{getConfig as h}from"@tamagui/core";import{useState as H}from"react";import{Button as N,H2 as T,H3 as Y,H4 as X,Separator as I,Square as C,XGroup as F,XStack as G,YStack as S}from"tamagui";const B=[{name:"Size",key:"size"},{name:"Space",key:"space"},{name:"Space (-)",key:"spaceNegative"},{name:"Radius",key:"radius"}];function P(){const[a,u]=H("size");return<S space><F alignItems="center"alignSelf="center">{B.map(({name:t,key:s})=><F.Item key={s}><N size="$3"theme={a===s?"active":null}fontFamily="$silkscreen"onPress={()=>u(s)}>{t}</N></F.Item>)}</F>{(a==="size"||a==="spaceNegative"||a==="space"||a==="radius")&&<R section={a}/>}</S>}function R({section:a}){const u=h().tokens,t=u[a.startsWith("space")?"space":a],s=Object.keys(t).sort((e,o)=>parseFloat(e)>parseFloat(o)?1:-1),$=s.filter(e=>parseFloat(e)>=0),m=s.filter(e=>parseFloat(e)<0).sort((e,o)=>parseFloat(e)>parseFloat(o)?-1:1);return<S flex={1}space><T>Sizes</T><S width="100%"space="$2"separator={<I/>}>{(a==="spaceNegative"?m:$).map(e=><G width="100%"alignItems="center"key={e}><S width="25%"><Y size="$6">${e}</Y></S><S width="20%"><X size="$5">{t[e]?.val}px</X></S><C size={t[e]?.val}backgroundColor="$color5"{...a==="spaceNegative"&&{backgroundColor:"$red5",size:-t[m.find(o=>parseFloat(o)===-parseFloat(e))??e]?.val}}{...a==="radius"&&{size:u.size[e]?.val,borderRadius:t[e]?.val}}/></G>)}</S></S>}export{P as TokensDemo};
+import { getConfig } from "@tamagui/core";
+import { useState } from "react";
+import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
+const sections = [
+  {
+    name: `Size`,
+    key: `size`
+  },
+  {
+    name: `Space`,
+    key: "space"
+  },
+  {
+    name: `Space (-)`,
+    key: `spaceNegative`
+  },
+  {
+    name: `Radius`,
+    key: `radius`
+  }
+];
+function TokensDemo() {
+  const [section, setSection] = useState("size");
+  return <YStack space>
+    <XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => {
+      return <XGroup.Item key={key}><Button
+        size="$3"
+        theme={section === key ? "active" : null}
+        fontFamily="$silkscreen"
+        onPress={() => setSection(key)}
+      >{name}</Button></XGroup.Item>;
+    })}</XGroup>
+    {(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
+  </YStack>;
+}
+function SizeSection({ section }) {
+  const allTokens = getConfig().tokens;
+  const tokens = allTokens[section.startsWith("space") ? "space" : section];
+  const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
+  const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
+  const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
+  return <YStack flex={1} space>
+    <H2>Sizes</H2>
+    <YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => {
+        return <XStack width="100%" alignItems="center" key={token}>
+          <YStack width="25%"><H3 size="$6">
+            {"$"}
+            {token}
+          </H3></YStack>
+          <YStack width="20%"><H4 size="$5">
+            {tokens[token]?.val}
+            {"px"}
+          </H4></YStack>
+          <Square
+            size={tokens[token]?.val}
+            backgroundColor="$color5"
+            {...section === "spaceNegative" && {
+              backgroundColor: "$red5",
+              size: -tokens[spaceTokensNegative.find(
+                (t) => parseFloat(t) === -parseFloat(token)
+              ) ?? token]?.val
+            }}
+            {...section === "radius" && {
+              // @ts-ignore
+              size: allTokens.size[token]?.val,
+              borderRadius: tokens[token]?.val
+            }}
+          />
+        </XStack>;
+      }
+    )}</YStack>
+  </YStack>;
+}
+export {
+  TokensDemo
+};
 //# sourceMappingURL=TokensDemo.mjs.map

package/dist/jsx/TokensDemo.mjs.map

@@ -2,6 +2,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": "AAAA,OAAiB,aAAAA,MAAiB,gBAClC,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,MAAAC,EAAI,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAI9E,MAAMC,EAA6C,CACjD,CACE,KAAM,OACN,IAAK,MACP,EACA,CACE,KAAM,QACN,IAAK,OACP,EACA,CACE,KAAM,YACN,IAAK,eACP,EACA,CACE,KAAM,SACN,IAAK,QACP,CACF,EAEO,SAASC,GAAa,CAC3B,KAAM,CAACC,EAASC,CAAU,EAAIb,EAAkB,MAAM,EAEtD,MACE,CAACS,EAAO,MACN,CAACF,EAAO,WAAW,QAAS,UAAU,UACnCG,EAAS,IAAI,CAAC,CAAE,KAAAI,EAAM,IAAAC,CAAI,IAEvB,CAACR,EAAO,KAAK,KAAKQ,GAChB,CAACd,EACC,KAAK,IACL,OAAOW,IAAYG,EAAM,SAAW,KACpC,WAAW,aACX,SAAS,IAAMF,EAAWE,CAAG,IAE5BD,EACH,EAPCb,EAQH,EATCM,EAAO,KAWX,EACH,EAfCA,IAiBCK,IAAY,QACZA,IAAY,iBACZA,IAAY,SACZA,IAAY,WAAa,CAACI,EAAY,SAASJ,EAAS,GAC5D,EAtBCH,EAwBL,CAEA,SAASO,EAAY,CAAE,QAAAJ,CAAQ,EAAyB,CACtD,MAAMK,EAAYlB,EAAU,EAAE,OACxBmB,EAASD,EAAUL,EAAQ,WAAW,OAAO,EAAI,QAAUA,CAAO,EAClEO,EAAK,OAAO,KAAKD,CAAM,EAAE,KAAK,CAACE,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,EAAI,EAAG,EAChFC,EAAcH,EAAG,OAAQI,GAAM,WAAWA,CAAC,GAAK,CAAC,EACjDC,EAAsBL,EACzB,OAAQI,GAAM,WAAWA,CAAC,EAAI,CAAC,EAC/B,KAAK,CAACH,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,GAAK,CAAE,EAE1D,MACE,CAACZ,EAAO,MAAM,EAAG,MACf,CAACP,EAAG,KAAK,EAARA,EACD,CAACO,EAAO,MAAM,MAAO,MAAM,IAAK,WAAW,CAACJ,CAAU,MAClDO,IAAY,gBAAkBY,EAAsBF,GAAa,IAChEG,GAEG,CAACjB,EAAO,MAAM,MAAO,WAAW,QAAS,KAAKiB,GAC5C,CAAChB,EAAO,MAAM,MACZ,CAACN,EAAG,KAAK,KAAK,EAAEsB,EAAM,EAArBtB,EACH,EAFCM,EAGD,CAACA,EAAO,MAAM,MACZ,CAACL,EAAG,KAAK,MAAMc,EAAOO,CAAK,GAAG,IAAI,EAAE,EAAnCrB,EACH,EAFCK,EAGD,CAACH,EACC,MAAMY,EAAOO,CAAK,GAAG,IACrB,gBAAgB,aACXb,IAAY,iBAAmB,CAClC,gBAAiB,QACjB,KAAM,CAACM,EACLM,EAAoB,KACjBD,GAAM,WAAWA,CAAC,IAAM,CAAC,WAAWE,CAAK,CAC5C,GAAKA,CACP,GAAG,GACL,MACKb,IAAY,UAAY,CAE3B,KAAMK,EAAU,KAAKQ,CAAK,GAAG,IAC7B,aAAcP,EAAOO,CAAK,GAAG,GAC/B,EACF,EACF,EAxBCjB,EA2BP,EACF,EAhCCC,EAiCH,EAnCCA,EAqCL",
-  "names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "TokensDemo", "section", "setSection", "name", "key", "SizeSection", "allTokens", "tokens", "st", "a", "b", "spaceTokens", "t", "spaceTokensNegative", "token"]
+  "mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC;AACvD,QAAM,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,MAAM,GAAG;AAAA,IACf,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAClD,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAAU;AACT,eACE,CAAC,OAAO,MAAM,OAAO,WAAW,SAAS,KAAK;AAAA,UAC5C,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,aAAK;AAAA,aAAE;AAAA,UAAM,EAArB,GACH,EAFC;AAAA,UAGD,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,aAAM,OAAO,KAAK,GAAG;AAAA,aAAI;AAAA,UAAE,EAAnC,GACH,EAFC;AAAA,UAGD,CAAC;AAAA,YACC,MAAM,OAAO,KAAK,GAAG;AAAA,YACrB,gBAAgB;AAAA,gBACX,YAAY,mBAAmB;AAAA,cAClC,iBAAiB;AAAA,cACjB,MAAM,CAAC,OACL,oBAAoB;AAAA,gBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,cAC5C,KAAK,KACP,GAAG;AAAA,YACL;AAAA,gBACK,YAAY,YAAY;AAAA;AAAA,cAE3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,cAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,YAC/B;AAAA,UACF;AAAA,QACF,EAxBC;AAAA,MA0BL;AAAA,IACF,EACF,EAhCC;AAAA,EAiCH,EAnCC;AAqCL;",
+  "names": []
 }

package/dist/jsx/TooltipDemo.js

@@ -1,2 +1,64 @@
-import{ChevronDown as v,ChevronLeft as $,ChevronRight as P,ChevronUp as X,Circle as s}from"@tamagui/lucide-icons";import{Button as D,Paragraph as G,Theme as H,Tooltip as T,TooltipGroup as R,XStack as S,YStack as C}from"tamagui";function L(){return<R delay={{open:3e3,close:100}}><C space="$2"alignSelf="center"><S space="$2"><I groupId="0"placement="top-end"Icon={s}/><I groupId="1"placement="top"Icon={X}/><I groupId="2"placement="top-start"Icon={s}/></S><S space="$2"><I groupId="3"placement="left"Icon={$}/><C flex={1}/><I groupId="4"placement="right"Icon={P}/></S><S space="$2"><I groupId="5"placement="bottom-end"Icon={s}/><I groupId="6"placement="bottom"Icon={v}/><I groupId="7"placement="bottom-start"Icon={s}/></S></C></R>}function I({Icon:k,...x}){return<T{...x}><T.Trigger><D icon={k}circular/></T.Trigger><H inverse><T.Content enterStyle={{x:0,y:-5,opacity:0,scale:.9}}exitStyle={{x:0,y:-5,opacity:0,scale:.9}}scale={1}x={0}y={0}opacity={1}animation={["quick",{opacity:{overshootClamping:!0}}]}><T.Arrow/><G size="$2"lineHeight="$1">Hello world</G></T.Content></H></T>}export{I as Demo,L as TooltipDemo};
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle
+} from "@tamagui/lucide-icons";
+import {
+  Button,
+  Paragraph,
+  Theme,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack
+} from "tamagui";
+function TooltipDemo() {
+  return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" alignSelf="center">
+    <XStack space="$2">
+      <Demo groupId="0" placement="top-end" Icon={Circle} />
+      <Demo groupId="1" placement="top" Icon={ChevronUp} />
+      <Demo groupId="2" placement="top-start" Icon={Circle} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="3" placement="left" Icon={ChevronLeft} />
+      <YStack flex={1} />
+      <Demo groupId="4" placement="right" Icon={ChevronRight} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="5" placement="bottom-end" Icon={Circle} />
+      <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
+      <Demo groupId="7" placement="bottom-start" Icon={Circle} />
+    </XStack>
+  </YStack></TooltipGroup>;
+}
+function Demo({ Icon, ...props }) {
+  return <Tooltip {...props}>
+    <Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
+    <Theme inverse><Tooltip.Content
+      enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+      exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+      scale={1}
+      x={0}
+      y={0}
+      opacity={1}
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: true
+          }
+        }
+      ]}
+    >
+      <Tooltip.Arrow />
+      <Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
+    </Tooltip.Content></Theme>
+  </Tooltip>;
+}
+export {
+  Demo,
+  TooltipDemo
+};
 //# sourceMappingURL=TooltipDemo.js.map

package/dist/jsx/TooltipDemo.js.map

@@ -2,6 +2,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,OACE,eAAAA,EACA,eAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,UAAAC,MACK,wBAEP,OACE,UAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EACA,gBAAAC,EAEA,UAAAC,EACA,UAAAC,MACK,UAEA,SAASC,GAAc,CAC5B,MACE,CAACH,EAAa,OAAO,CAAE,KAAM,IAAM,MAAO,GAAI,GAC5C,CAACE,EAAO,MAAM,IAAK,UAAU,SAC3B,CAACD,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,SAAU,MAAMT,EAAQ,EACpD,CAACS,EAAK,QAAQ,GAAI,UAAU,KAAM,MAAMV,EAAW,EACnD,CAACU,EAAK,QAAQ,GAAI,UAAU,WAAY,MAAMT,EAAQ,EACxD,EAJCM,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,MAAO,MAAMZ,EAAa,EACtD,CAACU,EAAO,MAAM,EAAG,EACjB,CAACE,EAAK,QAAQ,GAAI,UAAU,OAAQ,MAAMX,EAAc,EAC1D,EAJCQ,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,YAAa,MAAMT,EAAQ,EACvD,CAACS,EAAK,QAAQ,GAAI,UAAU,QAAS,MAAMb,EAAa,EACxD,CAACa,EAAK,QAAQ,GAAI,UAAU,cAAe,MAAMT,EAAQ,EAC3D,EAJCM,EAKH,EAhBCC,EAiBH,EAlBCF,EAoBL,CAEO,SAASI,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAkC,CACtE,MACE,CAACP,KAAYO,GACX,CAACP,EAAQ,QACP,CAACH,EAAO,MAAMS,EAAM,QAAS,EAC/B,EAFCN,EAAQ,QAGT,CAACD,EAAM,QACL,CAACC,EAAQ,QACP,YAAY,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EAClD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EACjD,OAAO,EACP,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,GAEA,CAACA,EAAQ,KAAM,EACf,CAACF,EAAU,KAAK,IAAK,WAAW,KAAK,WAErC,EAFCA,EAGH,EApBCE,EAAQ,QAqBX,EAtBCD,EAuBH,EA3BCC,EA6BL",
-  "names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Button", "Paragraph", "Theme", "Tooltip", "TooltipGroup", "XStack", "YStack", "TooltipDemo", "Demo", "Icon", "props"]
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,aAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,CAAC,OAAO,MAAM,KAAK,UAAU;AAAA,IAC3B,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,UAAU,MAAM,QAAQ;AAAA,MACpD,CAAC,KAAK,QAAQ,IAAI,UAAU,MAAM,MAAM,WAAW;AAAA,MACnD,CAAC,KAAK,QAAQ,IAAI,UAAU,YAAY,MAAM,QAAQ;AAAA,IACxD,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,OAAO,MAAM,aAAa;AAAA,MACtD,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,KAAK,QAAQ,IAAI,UAAU,QAAQ,MAAM,cAAc;AAAA,IAC1D,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,aAAa,MAAM,QAAQ;AAAA,MACvD,CAAC,KAAK,QAAQ,IAAI,UAAU,SAAS,MAAM,aAAa;AAAA,MACxD,CAAC,KAAK,QAAQ,IAAI,UAAU,eAAe,MAAM,QAAQ;AAAA,IAC3D,EAJC;AAAA,EAKH,EAhBC,OAiBH,EAlBC;AAoBL;AAEO,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AACtE,SACE,CAAC,YAAY;AAAA,IACX,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,SAAS,EAC/B,EAFC,QAAQ;AAAA,IAGT,CAAC,MAAM,QACL,CAAC,QAAQ;AAAA,MACP,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,MAClD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,MACjD,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MACf,CAAC,UAAU,KAAK,KAAK,WAAW,KAAK,WAErC,EAFC;AAAA,IAGH,EApBC,QAAQ,QAqBX,EAtBC;AAAA,EAuBH,EA3BC;AA6BL;",
+  "names": []
 }

package/dist/jsx/TooltipDemo.mjs

@@ -1,2 +1,64 @@
-import{ChevronDown as v,ChevronLeft as $,ChevronRight as P,ChevronUp as X,Circle as s}from"@tamagui/lucide-icons";import{Button as D,Paragraph as G,Theme as H,Tooltip as T,TooltipGroup as R,XStack as S,YStack as C}from"tamagui";function L(){return<R delay={{open:3e3,close:100}}><C space="$2"alignSelf="center"><S space="$2"><I groupId="0"placement="top-end"Icon={s}/><I groupId="1"placement="top"Icon={X}/><I groupId="2"placement="top-start"Icon={s}/></S><S space="$2"><I groupId="3"placement="left"Icon={$}/><C flex={1}/><I groupId="4"placement="right"Icon={P}/></S><S space="$2"><I groupId="5"placement="bottom-end"Icon={s}/><I groupId="6"placement="bottom"Icon={v}/><I groupId="7"placement="bottom-start"Icon={s}/></S></C></R>}function I({Icon:k,...x}){return<T{...x}><T.Trigger><D icon={k}circular/></T.Trigger><H inverse><T.Content enterStyle={{x:0,y:-5,opacity:0,scale:.9}}exitStyle={{x:0,y:-5,opacity:0,scale:.9}}scale={1}x={0}y={0}opacity={1}animation={["quick",{opacity:{overshootClamping:!0}}]}><T.Arrow/><G size="$2"lineHeight="$1">Hello world</G></T.Content></H></T>}export{I as Demo,L as TooltipDemo};
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle
+} from "@tamagui/lucide-icons";
+import {
+  Button,
+  Paragraph,
+  Theme,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack
+} from "tamagui";
+function TooltipDemo() {
+  return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" alignSelf="center">
+    <XStack space="$2">
+      <Demo groupId="0" placement="top-end" Icon={Circle} />
+      <Demo groupId="1" placement="top" Icon={ChevronUp} />
+      <Demo groupId="2" placement="top-start" Icon={Circle} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="3" placement="left" Icon={ChevronLeft} />
+      <YStack flex={1} />
+      <Demo groupId="4" placement="right" Icon={ChevronRight} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="5" placement="bottom-end" Icon={Circle} />
+      <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
+      <Demo groupId="7" placement="bottom-start" Icon={Circle} />
+    </XStack>
+  </YStack></TooltipGroup>;
+}
+function Demo({ Icon, ...props }) {
+  return <Tooltip {...props}>
+    <Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
+    <Theme inverse><Tooltip.Content
+      enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+      exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+      scale={1}
+      x={0}
+      y={0}
+      opacity={1}
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: true
+          }
+        }
+      ]}
+    >
+      <Tooltip.Arrow />
+      <Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
+    </Tooltip.Content></Theme>
+  </Tooltip>;
+}
+export {
+  Demo,
+  TooltipDemo
+};
 //# sourceMappingURL=TooltipDemo.mjs.map

package/dist/jsx/TooltipDemo.mjs.map

@@ -2,6 +2,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,OACE,eAAAA,EACA,eAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,UAAAC,MACK,wBAEP,OACE,UAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EACA,gBAAAC,EAEA,UAAAC,EACA,UAAAC,MACK,UAEA,SAASC,GAAc,CAC5B,MACE,CAACH,EAAa,OAAO,CAAE,KAAM,IAAM,MAAO,GAAI,GAC5C,CAACE,EAAO,MAAM,IAAK,UAAU,SAC3B,CAACD,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,SAAU,MAAMT,EAAQ,EACpD,CAACS,EAAK,QAAQ,GAAI,UAAU,KAAM,MAAMV,EAAW,EACnD,CAACU,EAAK,QAAQ,GAAI,UAAU,WAAY,MAAMT,EAAQ,EACxD,EAJCM,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,MAAO,MAAMZ,EAAa,EACtD,CAACU,EAAO,MAAM,EAAG,EACjB,CAACE,EAAK,QAAQ,GAAI,UAAU,OAAQ,MAAMX,EAAc,EAC1D,EAJCQ,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,YAAa,MAAMT,EAAQ,EACvD,CAACS,EAAK,QAAQ,GAAI,UAAU,QAAS,MAAMb,EAAa,EACxD,CAACa,EAAK,QAAQ,GAAI,UAAU,cAAe,MAAMT,EAAQ,EAC3D,EAJCM,EAKH,EAhBCC,EAiBH,EAlBCF,EAoBL,CAEO,SAASI,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAkC,CACtE,MACE,CAACP,KAAYO,GACX,CAACP,EAAQ,QACP,CAACH,EAAO,MAAMS,EAAM,QAAS,EAC/B,EAFCN,EAAQ,QAGT,CAACD,EAAM,QACL,CAACC,EAAQ,QACP,YAAY,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EAClD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EACjD,OAAO,EACP,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,GAEA,CAACA,EAAQ,KAAM,EACf,CAACF,EAAU,KAAK,IAAK,WAAW,KAAK,WAErC,EAFCA,EAGH,EApBCE,EAAQ,QAqBX,EAtBCD,EAuBH,EA3BCC,EA6BL",
-  "names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Button", "Paragraph", "Theme", "Tooltip", "TooltipGroup", "XStack", "YStack", "TooltipDemo", "Demo", "Icon", "props"]
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,aAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,CAAC,OAAO,MAAM,KAAK,UAAU;AAAA,IAC3B,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,UAAU,MAAM,QAAQ;AAAA,MACpD,CAAC,KAAK,QAAQ,IAAI,UAAU,MAAM,MAAM,WAAW;AAAA,MACnD,CAAC,KAAK,QAAQ,IAAI,UAAU,YAAY,MAAM,QAAQ;AAAA,IACxD,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,OAAO,MAAM,aAAa;AAAA,MACtD,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,KAAK,QAAQ,IAAI,UAAU,QAAQ,MAAM,cAAc;AAAA,IAC1D,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,aAAa,MAAM,QAAQ;AAAA,MACvD,CAAC,KAAK,QAAQ,IAAI,UAAU,SAAS,MAAM,aAAa;AAAA,MACxD,CAAC,KAAK,QAAQ,IAAI,UAAU,eAAe,MAAM,QAAQ;AAAA,IAC3D,EAJC;AAAA,EAKH,EAhBC,OAiBH,EAlBC;AAoBL;AAEO,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AACtE,SACE,CAAC,YAAY;AAAA,IACX,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,SAAS,EAC/B,EAFC,QAAQ;AAAA,IAGT,CAAC,MAAM,QACL,CAAC,QAAQ;AAAA,MACP,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,MAClD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,MACjD,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MACf,CAAC,UAAU,KAAK,KAAK,WAAW,KAAK,WAErC,EAFC;AAAA,IAGH,EApBC,QAAQ,QAqBX,EAtBC;AAAA,EAuBH,EA3BC;AA6BL;",
+  "names": []
 }