@tamagui/demos 1.14.0 → 1.14.2

package/dist/esm/TokensDemo.js

@@ -1,2 +1,87 @@
-import{jsx as t,jsxs as c}from"react/jsx-runtime";import{getConfig as f}from"@tamagui/core";import{useState as z}from"react";import{Button as v,H2 as y,H3 as F,H4 as $,Separator as h,Square as H,XGroup as m,XStack as N,YStack as i}from"tamagui";const T=[{name:"Size",key:"size"},{name:"Space",key:"space"},{name:"Space (-)",key:"spaceNegative"},{name:"Radius",key:"radius"}];function C(){const[a,n]=z("size");return c(i,{space:!0,children:[t(m,{alignItems:"center",alignSelf:"center",children:T.map(({name:s,key:o})=>t(m.Item,{children:t(v,{size:"$3",theme:a===o?"active":null,fontFamily:"$silkscreen",onPress:()=>n(o),children:s})},o))}),(a==="size"||a==="spaceNegative"||a==="space"||a==="radius")&&t(Y,{section:a})]})}function Y({section:a}){const n=f().tokens,s=n[a.startsWith("space")?"space":a],o=Object.keys(s).sort((e,r)=>parseFloat(e)>parseFloat(r)?1:-1),d=o.filter(e=>parseFloat(e)>=0),p=o.filter(e=>parseFloat(e)<0).sort((e,r)=>parseFloat(e)>parseFloat(r)?-1:1);return c(i,{flex:1,space:!0,children:[t(y,{children:"Sizes"}),t(i,{width:"100%",space:"$2",separator:t(h,{}),children:(a==="spaceNegative"?p:d).map(e=>{var r,l,S,u,k;return c(N,{width:"100%",alignItems:"center",children:[t(i,{width:"25%",children:c(F,{size:"$6",children:["$",e]})}),t(i,{width:"20%",children:c($,{size:"$5",children:[(r=s[e])==null?void 0:r.val,"px"]})}),t(H,{size:(l=s[e])==null?void 0:l.val,backgroundColor:"$color5",...a==="spaceNegative"&&{backgroundColor:"$red5",size:-((S=s[p.find(g=>parseFloat(g)===-parseFloat(e))??e])==null?void 0:S.val)},...a==="radius"&&{size:(u=n.size[e])==null?void 0:u.val,borderRadius:(k=s[e])==null?void 0:k.val}})]},e)})})]})}export{C as TokensDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(YStack, { space: true, children: [
+    /* @__PURE__ */ jsx(XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => {
+      return /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "$3",
+          theme: section === key ? "active" : null,
+          fontFamily: "$silkscreen",
+          onPress: () => setSection(key),
+          children: name
+        }
+      ) }, key);
+    }) }),
+    (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ jsx(SizeSection, { section })
+  ] });
+}
+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 /* @__PURE__ */ jsxs(YStack, { flex: 1, space: true, children: [
+    /* @__PURE__ */ jsx(H2, { children: "Sizes" }),
+    /* @__PURE__ */ jsx(YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => {
+        var _a, _b, _c, _d, _e;
+        return /* @__PURE__ */ jsxs(XStack, { width: "100%", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(YStack, { width: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
+            "$",
+            token
+          ] }) }),
+          /* @__PURE__ */ jsx(YStack, { width: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
+            (_a = tokens[token]) == null ? void 0 : _a.val,
+            "px"
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Square,
+            {
+              size: (_b = tokens[token]) == null ? void 0 : _b.val,
+              backgroundColor: "$color5",
+              ...section === "spaceNegative" && {
+                backgroundColor: "$red5",
+                size: -((_c = tokens[spaceTokensNegative.find(
+                  (t) => parseFloat(t) === -parseFloat(token)
+                ) ?? token]) == null ? void 0 : _c.val)
+              },
+              ...section === "radius" && {
+                // @ts-ignore
+                size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
+                borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
+              }
+            }
+          )
+        ] }, token);
+      }
+    ) })
+  ] });
+}
+export {
+  TokensDemo
+};
 //# sourceMappingURL=TokensDemo.js.map

package/dist/esm/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": "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",
-  "names": ["jsx", "jsxs", "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", "_a", "_b", "_c", "_d", "_e"]
+  "mappings": "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",
+  "names": []
 }

package/dist/esm/TokensDemo.mjs

@@ -1,2 +1,87 @@
-import{jsx as t,jsxs as c}from"react/jsx-runtime";import{getConfig as f}from"@tamagui/core";import{useState as z}from"react";import{Button as v,H2 as y,H3 as F,H4 as $,Separator as h,Square as H,XGroup as m,XStack as N,YStack as i}from"tamagui";const T=[{name:"Size",key:"size"},{name:"Space",key:"space"},{name:"Space (-)",key:"spaceNegative"},{name:"Radius",key:"radius"}];function C(){const[a,n]=z("size");return c(i,{space:!0,children:[t(m,{alignItems:"center",alignSelf:"center",children:T.map(({name:s,key:o})=>t(m.Item,{children:t(v,{size:"$3",theme:a===o?"active":null,fontFamily:"$silkscreen",onPress:()=>n(o),children:s})},o))}),(a==="size"||a==="spaceNegative"||a==="space"||a==="radius")&&t(Y,{section:a})]})}function Y({section:a}){const n=f().tokens,s=n[a.startsWith("space")?"space":a],o=Object.keys(s).sort((e,r)=>parseFloat(e)>parseFloat(r)?1:-1),d=o.filter(e=>parseFloat(e)>=0),p=o.filter(e=>parseFloat(e)<0).sort((e,r)=>parseFloat(e)>parseFloat(r)?-1:1);return c(i,{flex:1,space:!0,children:[t(y,{children:"Sizes"}),t(i,{width:"100%",space:"$2",separator:t(h,{}),children:(a==="spaceNegative"?p:d).map(e=>{var r,l,S,u,k;return c(N,{width:"100%",alignItems:"center",children:[t(i,{width:"25%",children:c(F,{size:"$6",children:["$",e]})}),t(i,{width:"20%",children:c($,{size:"$5",children:[(r=s[e])==null?void 0:r.val,"px"]})}),t(H,{size:(l=s[e])==null?void 0:l.val,backgroundColor:"$color5",...a==="spaceNegative"&&{backgroundColor:"$red5",size:-((S=s[p.find(g=>parseFloat(g)===-parseFloat(e))??e])==null?void 0:S.val)},...a==="radius"&&{size:(u=n.size[e])==null?void 0:u.val,borderRadius:(k=s[e])==null?void 0:k.val}})]},e)})})]})}export{C as TokensDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(YStack, { space: true, children: [
+    /* @__PURE__ */ jsx(XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => {
+      return /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "$3",
+          theme: section === key ? "active" : null,
+          fontFamily: "$silkscreen",
+          onPress: () => setSection(key),
+          children: name
+        }
+      ) }, key);
+    }) }),
+    (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ jsx(SizeSection, { section })
+  ] });
+}
+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 /* @__PURE__ */ jsxs(YStack, { flex: 1, space: true, children: [
+    /* @__PURE__ */ jsx(H2, { children: "Sizes" }),
+    /* @__PURE__ */ jsx(YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => {
+        var _a, _b, _c, _d, _e;
+        return /* @__PURE__ */ jsxs(XStack, { width: "100%", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(YStack, { width: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
+            "$",
+            token
+          ] }) }),
+          /* @__PURE__ */ jsx(YStack, { width: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
+            (_a = tokens[token]) == null ? void 0 : _a.val,
+            "px"
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Square,
+            {
+              size: (_b = tokens[token]) == null ? void 0 : _b.val,
+              backgroundColor: "$color5",
+              ...section === "spaceNegative" && {
+                backgroundColor: "$red5",
+                size: -((_c = tokens[spaceTokensNegative.find(
+                  (t) => parseFloat(t) === -parseFloat(token)
+                ) ?? token]) == null ? void 0 : _c.val)
+              },
+              ...section === "radius" && {
+                // @ts-ignore
+                size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
+                borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
+              }
+            }
+          )
+        ] }, token);
+      }
+    ) })
+  ] });
+}
+export {
+  TokensDemo
+};
 //# sourceMappingURL=TokensDemo.mjs.map

package/dist/esm/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": "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",
-  "names": ["jsx", "jsxs", "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", "_a", "_b", "_c", "_d", "_e"]
+  "mappings": "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",
+  "names": []
 }

package/dist/esm/TooltipDemo.js

@@ -1,2 +1,69 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{ChevronDown as i,ChevronLeft as m,ChevronRight as g,ChevronUp as u,Circle as p}from"@tamagui/lucide-icons";import{Button as I,Paragraph as s,Theme as T,Tooltip as r,TooltipGroup as d,XStack as n,YStack as c}from"tamagui";function k(){return o(d,{delay:{open:3e3,close:100},children:e(c,{space:"$2",alignSelf:"center",children:[e(n,{space:"$2",children:[o(t,{groupId:"0",placement:"top-end",Icon:p}),o(t,{groupId:"1",placement:"top",Icon:u}),o(t,{groupId:"2",placement:"top-start",Icon:p})]}),e(n,{space:"$2",children:[o(t,{groupId:"3",placement:"left",Icon:m}),o(c,{flex:1}),o(t,{groupId:"4",placement:"right",Icon:g})]}),e(n,{space:"$2",children:[o(t,{groupId:"5",placement:"bottom-end",Icon:p}),o(t,{groupId:"6",placement:"bottom",Icon:i}),o(t,{groupId:"7",placement:"bottom-start",Icon:p})]})]})})}function t({Icon:a,...l}){return e(r,{...l,children:[o(r.Trigger,{children:o(I,{icon:a,circular:!0})}),o(T,{inverse:!0,children:e(r.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}}],children:[o(r.Arrow,{}),o(s,{size:"$2",lineHeight:"$1",children:"Hello world"})]})})]})}export{t as Demo,k as TooltipDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle
+} from "@tamagui/lucide-icons";
+import {
+  Button,
+  Paragraph,
+  Theme,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack
+} from "tamagui";
+function TooltipDemo() {
+  return /* @__PURE__ */ jsx(TooltipGroup, { delay: { open: 3e3, close: 100 }, children: /* @__PURE__ */ jsxs(YStack, { space: "$2", alignSelf: "center", children: [
+    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
+      /* @__PURE__ */ jsx(Demo, { groupId: "0", placement: "top-end", Icon: Circle }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "1", placement: "top", Icon: ChevronUp }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "2", placement: "top-start", Icon: Circle })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
+      /* @__PURE__ */ jsx(Demo, { groupId: "3", placement: "left", Icon: ChevronLeft }),
+      /* @__PURE__ */ jsx(YStack, { flex: 1 }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "4", placement: "right", Icon: ChevronRight })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
+      /* @__PURE__ */ jsx(Demo, { groupId: "5", placement: "bottom-end", Icon: Circle }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "6", placement: "bottom", Icon: ChevronDown }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "7", placement: "bottom-start", Icon: Circle })
+    ] })
+  ] }) });
+}
+function Demo({ Icon, ...props }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Button, { icon: Icon, circular: true }) }),
+    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsxs(
+      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
+            }
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Tooltip.Arrow, {}),
+          /* @__PURE__ */ jsx(Paragraph, { size: "$2", lineHeight: "$1", children: "Hello world" })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  Demo,
+  TooltipDemo
+};
 //# sourceMappingURL=TooltipDemo.js.map

package/dist/esm/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": "AAuBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvBR,OACE,eAAAC,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,OACEd,EAACW,EAAA,CAAa,MAAO,CAAE,KAAM,IAAM,MAAO,GAAI,EAC5C,SAAAV,EAACY,EAAA,CAAO,MAAM,KAAK,UAAU,SAC3B,UAAAZ,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,UAAU,KAAMT,EAAQ,EACpDN,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,MAAM,KAAMV,EAAW,EACnDL,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,YAAY,KAAMT,EAAQ,GACxD,EACAL,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,OAAO,KAAMZ,EAAa,EACtDH,EAACa,EAAA,CAAO,KAAM,EAAG,EACjBb,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,QAAQ,KAAMX,EAAc,GAC1D,EACAH,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,aAAa,KAAMT,EAAQ,EACvDN,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,SAAS,KAAMb,EAAa,EACxDF,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,eAAe,KAAMT,EAAQ,GAC3D,GACF,EACF,CAEJ,CAEO,SAASS,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAkC,CACtE,OACEhB,EAACS,EAAA,CAAS,GAAGO,EACX,UAAAjB,EAACU,EAAQ,QAAR,CACC,SAAAV,EAACO,EAAA,CAAO,KAAMS,EAAM,SAAQ,GAAC,EAC/B,EACAhB,EAACS,EAAA,CAAM,QAAO,GACZ,SAAAR,EAACS,EAAQ,QAAR,CACC,WAAY,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EAClD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EACjD,MAAO,EACP,EAAG,EACH,EAAG,EACH,QAAS,EACT,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EAEA,UAAAV,EAACU,EAAQ,MAAR,EAAc,EACfV,EAACQ,EAAA,CAAU,KAAK,KAAK,WAAW,KAAK,uBAErC,GACF,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Button", "Paragraph", "Theme", "Tooltip", "TooltipGroup", "XStack", "YStack", "TooltipDemo", "Demo", "Icon", "props"]
+  "mappings": "AAuBQ,SACE,KADF;AAvBR;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,oBAAC,gBAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,+BAAC,UAAO,OAAM,MAAK,WAAU,UAC3B;AAAA,yBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,QAAK,SAAQ,KAAI,WAAU,WAAU,MAAM,QAAQ;AAAA,MACpD,oBAAC,QAAK,SAAQ,KAAI,WAAU,OAAM,MAAM,WAAW;AAAA,MACnD,oBAAC,QAAK,SAAQ,KAAI,WAAU,aAAY,MAAM,QAAQ;AAAA,OACxD;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,QAAK,SAAQ,KAAI,WAAU,QAAO,MAAM,aAAa;AAAA,MACtD,oBAAC,UAAO,MAAM,GAAG;AAAA,MACjB,oBAAC,QAAK,SAAQ,KAAI,WAAU,SAAQ,MAAM,cAAc;AAAA,OAC1D;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,QAAK,SAAQ,KAAI,WAAU,cAAa,MAAM,QAAQ;AAAA,MACvD,oBAAC,QAAK,SAAQ,KAAI,WAAU,UAAS,MAAM,aAAa;AAAA,MACxD,oBAAC,QAAK,SAAQ,KAAI,WAAU,gBAAe,MAAM,QAAQ;AAAA,OAC3D;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AACtE,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,QAAQ,SAAR,EACC,8BAAC,UAAO,MAAM,MAAM,UAAQ,MAAC,GAC/B;AAAA,IACA,oBAAC,SAAM,SAAO,MACZ;AAAA,MAAC,QAAQ;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,8BAAC,QAAQ,OAAR,EAAc;AAAA,UACf,oBAAC,aAAU,MAAK,MAAK,YAAW,MAAK,yBAErC;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/TooltipDemo.mjs

@@ -1,2 +1,69 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{ChevronDown as i,ChevronLeft as m,ChevronRight as g,ChevronUp as u,Circle as p}from"@tamagui/lucide-icons";import{Button as I,Paragraph as s,Theme as T,Tooltip as r,TooltipGroup as d,XStack as n,YStack as c}from"tamagui";function k(){return o(d,{delay:{open:3e3,close:100},children:e(c,{space:"$2",alignSelf:"center",children:[e(n,{space:"$2",children:[o(t,{groupId:"0",placement:"top-end",Icon:p}),o(t,{groupId:"1",placement:"top",Icon:u}),o(t,{groupId:"2",placement:"top-start",Icon:p})]}),e(n,{space:"$2",children:[o(t,{groupId:"3",placement:"left",Icon:m}),o(c,{flex:1}),o(t,{groupId:"4",placement:"right",Icon:g})]}),e(n,{space:"$2",children:[o(t,{groupId:"5",placement:"bottom-end",Icon:p}),o(t,{groupId:"6",placement:"bottom",Icon:i}),o(t,{groupId:"7",placement:"bottom-start",Icon:p})]})]})})}function t({Icon:a,...l}){return e(r,{...l,children:[o(r.Trigger,{children:o(I,{icon:a,circular:!0})}),o(T,{inverse:!0,children:e(r.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}}],children:[o(r.Arrow,{}),o(s,{size:"$2",lineHeight:"$1",children:"Hello world"})]})})]})}export{t as Demo,k as TooltipDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle
+} from "@tamagui/lucide-icons";
+import {
+  Button,
+  Paragraph,
+  Theme,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack
+} from "tamagui";
+function TooltipDemo() {
+  return /* @__PURE__ */ jsx(TooltipGroup, { delay: { open: 3e3, close: 100 }, children: /* @__PURE__ */ jsxs(YStack, { space: "$2", alignSelf: "center", children: [
+    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
+      /* @__PURE__ */ jsx(Demo, { groupId: "0", placement: "top-end", Icon: Circle }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "1", placement: "top", Icon: ChevronUp }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "2", placement: "top-start", Icon: Circle })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
+      /* @__PURE__ */ jsx(Demo, { groupId: "3", placement: "left", Icon: ChevronLeft }),
+      /* @__PURE__ */ jsx(YStack, { flex: 1 }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "4", placement: "right", Icon: ChevronRight })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
+      /* @__PURE__ */ jsx(Demo, { groupId: "5", placement: "bottom-end", Icon: Circle }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "6", placement: "bottom", Icon: ChevronDown }),
+      /* @__PURE__ */ jsx(Demo, { groupId: "7", placement: "bottom-start", Icon: Circle })
+    ] })
+  ] }) });
+}
+function Demo({ Icon, ...props }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Button, { icon: Icon, circular: true }) }),
+    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsxs(
+      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
+            }
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Tooltip.Arrow, {}),
+          /* @__PURE__ */ jsx(Paragraph, { size: "$2", lineHeight: "$1", children: "Hello world" })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  Demo,
+  TooltipDemo
+};
 //# sourceMappingURL=TooltipDemo.mjs.map

package/dist/esm/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": "AAuBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvBR,OACE,eAAAC,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,OACEd,EAACW,EAAA,CAAa,MAAO,CAAE,KAAM,IAAM,MAAO,GAAI,EAC5C,SAAAV,EAACY,EAAA,CAAO,MAAM,KAAK,UAAU,SAC3B,UAAAZ,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,UAAU,KAAMT,EAAQ,EACpDN,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,MAAM,KAAMV,EAAW,EACnDL,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,YAAY,KAAMT,EAAQ,GACxD,EACAL,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,OAAO,KAAMZ,EAAa,EACtDH,EAACa,EAAA,CAAO,KAAM,EAAG,EACjBb,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,QAAQ,KAAMX,EAAc,GAC1D,EACAH,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,aAAa,KAAMT,EAAQ,EACvDN,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,SAAS,KAAMb,EAAa,EACxDF,EAACe,EAAA,CAAK,QAAQ,IAAI,UAAU,eAAe,KAAMT,EAAQ,GAC3D,GACF,EACF,CAEJ,CAEO,SAASS,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAkC,CACtE,OACEhB,EAACS,EAAA,CAAS,GAAGO,EACX,UAAAjB,EAACU,EAAQ,QAAR,CACC,SAAAV,EAACO,EAAA,CAAO,KAAMS,EAAM,SAAQ,GAAC,EAC/B,EACAhB,EAACS,EAAA,CAAM,QAAO,GACZ,SAAAR,EAACS,EAAQ,QAAR,CACC,WAAY,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EAClD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EACjD,MAAO,EACP,EAAG,EACH,EAAG,EACH,QAAS,EACT,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EAEA,UAAAV,EAACU,EAAQ,MAAR,EAAc,EACfV,EAACQ,EAAA,CAAU,KAAK,KAAK,WAAW,KAAK,uBAErC,GACF,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Button", "Paragraph", "Theme", "Tooltip", "TooltipGroup", "XStack", "YStack", "TooltipDemo", "Demo", "Icon", "props"]
+  "mappings": "AAuBQ,SACE,KADF;AAvBR;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,oBAAC,gBAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,+BAAC,UAAO,OAAM,MAAK,WAAU,UAC3B;AAAA,yBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,QAAK,SAAQ,KAAI,WAAU,WAAU,MAAM,QAAQ;AAAA,MACpD,oBAAC,QAAK,SAAQ,KAAI,WAAU,OAAM,MAAM,WAAW;AAAA,MACnD,oBAAC,QAAK,SAAQ,KAAI,WAAU,aAAY,MAAM,QAAQ;AAAA,OACxD;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,QAAK,SAAQ,KAAI,WAAU,QAAO,MAAM,aAAa;AAAA,MACtD,oBAAC,UAAO,MAAM,GAAG;AAAA,MACjB,oBAAC,QAAK,SAAQ,KAAI,WAAU,SAAQ,MAAM,cAAc;AAAA,OAC1D;AAAA,IACA,qBAAC,UAAO,OAAM,MACZ;AAAA,0BAAC,QAAK,SAAQ,KAAI,WAAU,cAAa,MAAM,QAAQ;AAAA,MACvD,oBAAC,QAAK,SAAQ,KAAI,WAAU,UAAS,MAAM,aAAa;AAAA,MACxD,oBAAC,QAAK,SAAQ,KAAI,WAAU,gBAAe,MAAM,QAAQ;AAAA,OAC3D;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AACtE,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,QAAQ,SAAR,EACC,8BAAC,UAAO,MAAM,MAAM,UAAQ,MAAC,GAC/B;AAAA,IACA,oBAAC,SAAM,SAAO,MACZ;AAAA,MAAC,QAAQ;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,8BAAC,QAAQ,OAAR,EAAc;AAAA,UACf,oBAAC,aAAU,MAAK,MAAK,YAAW,MAAK,yBAErC;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/UpdateThemeDemo.js

@@ -1,2 +1,54 @@
-import{jsx as o,jsxs as T}from"react/jsx-runtime";import*as n from"@tamagui/config";import{addTheme as s,updateTheme as u}from"@tamagui/theme";import{useState as l}from"react";import{Button as d,Square as h,Theme as i,YStack as p,getVariableValue as f,useForceUpdate as S,useIsomorphicLayoutEffect as g}from"tamagui";const e=n.config.tokens.color,t=Object.keys(e);function B(){const[r,m]=l(),a=S();return g(()=>{s({name:"custom",insertCSS:!0,theme:{color:"red"}}),m("custom")},[]),T(p,{alignItems:"center",space:!0,children:[o(i,{name:r??null,children:o(h,{borderRadius:"$8",size:100,backgroundColor:"$color"})}),o(d,{onPress:()=>{const c=f(e[t[Math.floor(Math.random()*t.length)]]);u({name:"custom",theme:{color:c}}),a()},children:"Set to random color"})]})}export{B as UpdateThemeDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Config from "@tamagui/config";
+import { addTheme, updateTheme } from "@tamagui/theme";
+import { useState } from "react";
+import {
+  Button,
+  Square,
+  Theme,
+  YStack,
+  getVariableValue,
+  useForceUpdate,
+  useIsomorphicLayoutEffect
+} from "tamagui";
+const colors = Config.config.tokens.color;
+const colorKeys = Object.keys(colors);
+function UpdateThemeDemo() {
+  const [theme, setTheme] = useState();
+  const update = useForceUpdate();
+  useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "custom",
+      insertCSS: true,
+      theme: {
+        color: "red"
+      }
+    });
+    setTheme("custom");
+  }, []);
+  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: true, children: [
+    /* @__PURE__ */ jsx(Theme, { name: theme ?? null, children: /* @__PURE__ */ jsx(Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onPress: () => {
+          const randomColor = getVariableValue(
+            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
+          );
+          updateTheme({
+            name: "custom",
+            theme: {
+              color: randomColor
+            }
+          });
+          update();
+        },
+        children: "Set to random color"
+      }
+    )
+  ] });
+}
+export {
+  UpdateThemeDemo
+};
 //# sourceMappingURL=UpdateThemeDemo.js.map

package/dist/esm/UpdateThemeDemo.js.map

@@ -2,6 +2,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": "AAgCI,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAhCJ,UAAYC,MAAY,kBACxB,OAAS,YAAAC,EAAU,eAAAC,MAAmB,iBACtC,OAAgB,YAAAC,MAAgB,QAChC,OACE,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,6BAAAC,MACK,UAEP,MAAMC,EAASX,EAAO,OAAO,OAAO,MAC9BY,EAAY,OAAO,KAAKD,CAAM,EAE7B,SAASE,GAAkB,CAChC,KAAM,CAACC,EAAOC,CAAQ,EAAIZ,EAAc,EAClCa,EAASP,EAAe,EAE9B,OAAAC,EAA0B,IAAM,CAC9BT,EAAS,CACP,KAAM,SACN,UAAW,GACX,MAAO,CACL,MAAO,KACT,CACF,CAAC,EACDc,EAAS,QAAQ,CACnB,EAAG,CAAC,CAAC,EAGHhB,EAACQ,EAAA,CAAO,WAAW,SAAS,MAAK,GAC/B,UAAAT,EAACQ,EAAA,CAAM,KAAMQ,GAAS,KACpB,SAAAhB,EAACO,EAAA,CAAO,aAAa,KAAK,KAAM,IAAK,gBAAgB,SAAS,EAChE,EAEAP,EAACM,EAAA,CACC,QAAS,IAAM,CACb,MAAMa,EAAcT,EAClBG,EAAOC,EAAU,KAAK,MAAM,KAAK,OAAO,EAAIA,EAAU,MAAM,CAAC,CAAC,CAChE,EACAV,EAAY,CACV,KAAM,SACN,MAAO,CACL,MAAOe,CACT,CACF,CAAC,EACDD,EAAO,CACT,EACD,+BAED,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Config", "addTheme", "updateTheme", "useState", "Button", "Square", "Theme", "YStack", "getVariableValue", "useForceUpdate", "useIsomorphicLayoutEffect", "colors", "colorKeys", "UpdateThemeDemo", "theme", "setTheme", "update", "randomColor"]
+  "mappings": "AAgCI,SAEI,KAFJ;AAhCJ,YAAY,YAAY;AACxB,SAAS,UAAU,mBAAmB;AACtC,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO;AACpC,MAAM,YAAY,OAAO,KAAK,MAAM;AAE7B,SAAS,kBAAkB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc;AACxC,QAAM,SAAS,eAAe;AAE9B,4BAA0B,MAAM;AAC9B,aAAS;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,qBAAC,UAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,wBAAC,SAAM,MAAM,SAAS,MACpB,8BAAC,UAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,cAAc;AAAA,YAClB,OAAO,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC;AAAA,UAChE;AACA,sBAAY;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/esm/UpdateThemeDemo.mjs

@@ -1,2 +1,54 @@
-import{jsx as o,jsxs as T}from"react/jsx-runtime";import*as n from"@tamagui/config";import{addTheme as s,updateTheme as u}from"@tamagui/theme";import{useState as l}from"react";import{Button as d,Square as h,Theme as i,YStack as p,getVariableValue as f,useForceUpdate as S,useIsomorphicLayoutEffect as g}from"tamagui";const e=n.config.tokens.color,t=Object.keys(e);function B(){const[r,m]=l(),a=S();return g(()=>{s({name:"custom",insertCSS:!0,theme:{color:"red"}}),m("custom")},[]),T(p,{alignItems:"center",space:!0,children:[o(i,{name:r??null,children:o(h,{borderRadius:"$8",size:100,backgroundColor:"$color"})}),o(d,{onPress:()=>{const c=f(e[t[Math.floor(Math.random()*t.length)]]);u({name:"custom",theme:{color:c}}),a()},children:"Set to random color"})]})}export{B as UpdateThemeDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Config from "@tamagui/config";
+import { addTheme, updateTheme } from "@tamagui/theme";
+import { useState } from "react";
+import {
+  Button,
+  Square,
+  Theme,
+  YStack,
+  getVariableValue,
+  useForceUpdate,
+  useIsomorphicLayoutEffect
+} from "tamagui";
+const colors = Config.config.tokens.color;
+const colorKeys = Object.keys(colors);
+function UpdateThemeDemo() {
+  const [theme, setTheme] = useState();
+  const update = useForceUpdate();
+  useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "custom",
+      insertCSS: true,
+      theme: {
+        color: "red"
+      }
+    });
+    setTheme("custom");
+  }, []);
+  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: true, children: [
+    /* @__PURE__ */ jsx(Theme, { name: theme ?? null, children: /* @__PURE__ */ jsx(Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onPress: () => {
+          const randomColor = getVariableValue(
+            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
+          );
+          updateTheme({
+            name: "custom",
+            theme: {
+              color: randomColor
+            }
+          });
+          update();
+        },
+        children: "Set to random color"
+      }
+    )
+  ] });
+}
+export {
+  UpdateThemeDemo
+};
 //# sourceMappingURL=UpdateThemeDemo.mjs.map

package/dist/esm/UpdateThemeDemo.mjs.map

@@ -2,6 +2,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": "AAgCI,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAhCJ,UAAYC,MAAY,kBACxB,OAAS,YAAAC,EAAU,eAAAC,MAAmB,iBACtC,OAAgB,YAAAC,MAAgB,QAChC,OACE,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,6BAAAC,MACK,UAEP,MAAMC,EAASX,EAAO,OAAO,OAAO,MAC9BY,EAAY,OAAO,KAAKD,CAAM,EAE7B,SAASE,GAAkB,CAChC,KAAM,CAACC,EAAOC,CAAQ,EAAIZ,EAAc,EAClCa,EAASP,EAAe,EAE9B,OAAAC,EAA0B,IAAM,CAC9BT,EAAS,CACP,KAAM,SACN,UAAW,GACX,MAAO,CACL,MAAO,KACT,CACF,CAAC,EACDc,EAAS,QAAQ,CACnB,EAAG,CAAC,CAAC,EAGHhB,EAACQ,EAAA,CAAO,WAAW,SAAS,MAAK,GAC/B,UAAAT,EAACQ,EAAA,CAAM,KAAMQ,GAAS,KACpB,SAAAhB,EAACO,EAAA,CAAO,aAAa,KAAK,KAAM,IAAK,gBAAgB,SAAS,EAChE,EAEAP,EAACM,EAAA,CACC,QAAS,IAAM,CACb,MAAMa,EAAcT,EAClBG,EAAOC,EAAU,KAAK,MAAM,KAAK,OAAO,EAAIA,EAAU,MAAM,CAAC,CAAC,CAChE,EACAV,EAAY,CACV,KAAM,SACN,MAAO,CACL,MAAOe,CACT,CACF,CAAC,EACDD,EAAO,CACT,EACD,+BAED,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Config", "addTheme", "updateTheme", "useState", "Button", "Square", "Theme", "YStack", "getVariableValue", "useForceUpdate", "useIsomorphicLayoutEffect", "colors", "colorKeys", "UpdateThemeDemo", "theme", "setTheme", "update", "randomColor"]
+  "mappings": "AAgCI,SAEI,KAFJ;AAhCJ,YAAY,YAAY;AACxB,SAAS,UAAU,mBAAmB;AACtC,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO;AACpC,MAAM,YAAY,OAAO,KAAK,MAAM;AAE7B,SAAS,kBAAkB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc;AACxC,QAAM,SAAS,eAAe;AAE9B,4BAA0B,MAAM;AAC9B,aAAS;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,qBAAC,UAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,wBAAC,SAAM,MAAM,SAAS,MACpB,8BAAC,UAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,cAAc;AAAA,YAClB,OAAO,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC;AAAA,UAChE;AACA,sBAAY;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": []
 }