@tamagui/demos 2.0.0-1768586279389 → 2.0.0-1768696252732

package/dist/esm/TextDemo.mjs

@@ -1,4 +1,4 @@
-import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+import { Paragraph, SizableText, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TextDemo() {
   return /* @__PURE__ */jsxs(YStack, {
@@ -7,17 +7,6 @@ function TextDemo() {
     children: [/* @__PURE__ */jsx(SizableText, {
       size: "$3",
       children: "SizableText"
-    }), /* @__PURE__ */jsxs(XStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */jsx(SizableText, {
-        theme: "alt1",
-        size: "$3",
-        children: "alt1"
-      }), /* @__PURE__ */jsx(SizableText, {
-        theme: "alt2",
-        size: "$3",
-        children: "alt2"
-      })]
     }), /* @__PURE__ */jsx(Paragraph, {
       size: "$2",
       fontWeight: "800",

package/dist/esm/TextDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Paragraph","SizableText","XStack","YStack","jsx","jsxs","TextDemo","gap","items","children","size","theme","fontWeight"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,SAAA,EAAWC,WAAA,EAAmBC,MAAA,EAAQC,MAAA,QAAc;AAKvD,SAAAC,GAAA,EACAC,IAAA,QADA;AAHC,SAASC,SAAA,EAAW;EACzB,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,GAAA,EAAI;IAAKC,KAAA,EAAM;IACrBC,QAAA,kBAAAL,GAAA,CAACH,WAAA;MAAYS,IAAA,EAAK;MAAKD,QAAA;IAAA,CAAW,GAClC,eAAAJ,IAAA,CAACH,MAAA;MAAOK,GAAA,EAAI;MACVE,QAAA,kBAAAL,GAAA,CAACH,WAAA;QAAYU,KAAA,EAAM;QAAOD,IAAA,EAAK;QAAKD,QAAA;MAAA,CAEpC,GACA,eAAAL,GAAA,CAACH,WAAA;QAAYU,KAAA,EAAM;QAAOD,IAAA,EAAK;QAAKD,QAAA;MAAA,CAEpC;IAAA,CACF,GACA,eAAAL,GAAA,CAACJ,SAAA;MAAUU,IAAA,EAAK;MAAKE,UAAA,EAAW;MAAMH,QAAA;IAAA,CAEtC;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["Paragraph","SizableText","YStack","jsx","jsxs","TextDemo","gap","items","children","size","fontWeight"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,EAAWC,WAAA,EAAaC,MAAA,QAAc;AAI3C,SACEC,GAAA,EADFC,IAAA;AAFG,SAASC,SAAA,EAAW;EACzB,OACE,eAAAD,IAAA,CAACF,MAAA;IAAOI,GAAA,EAAI;IAAKC,KAAA,EAAM;IACrBC,QAAA,kBAAAL,GAAA,CAACF,WAAA;MAAYQ,IAAA,EAAK;MAAKD,QAAA;IAAA,CAAW,GAClC,eAAAL,GAAA,CAACH,SAAA;MAAUS,IAAA,EAAK;MAAKC,UAAA,EAAW;MAAMF,QAAA;IAAA,CAEtC;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/TextDemo.native.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "react";
-import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+import { Paragraph, SizableText, YStack } from "tamagui";
 function TextDemo() {
   return /* @__PURE__ */_jsxs(YStack, {
     gap: "$2",
@@ -8,17 +7,6 @@ function TextDemo() {
     children: [/* @__PURE__ */_jsx(SizableText, {
       size: "$3",
       children: "SizableText"
-    }), /* @__PURE__ */_jsxs(XStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(SizableText, {
-        theme: "alt1",
-        size: "$3",
-        children: "alt1"
-      }), /* @__PURE__ */_jsx(SizableText, {
-        theme: "alt2",
-        size: "$3",
-        children: "alt2"
-      })]
     }), /* @__PURE__ */_jsx(Paragraph, {
       size: "$2",
       fontWeight: "800",

package/dist/esm/TextDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Paragraph","SizableText","XStack","YStack","TextDemo","gap","items","children","size"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAmB,QAAQ,mBAAc;AAKvD,cACA;AAJC,SAASC,SAAA,EAAWC,WAAA,EAAAC,MAAA,EAAAC,MAAA;AACzB,SACEC,SAAA;EACE,sBAACL,KAAA,CAAAI,MAAA,EAAY;IACbE,GAAA;IACEC,KAAA;IAEAC,QACA,GAEA,eACFV,IAAA,CAAAI,WAAA;MACAO,IAAA;MAGFD,QAAA;IAEJ,I","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Paragraph","SizableText","YStack","TextDemo","gap","items","children"],"sources":["../../src/TextDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAa,2BAAc;AAI3C,SACEC,SADF,EAAAC,WAAA,EAAAC,MAAA;AAFG,SAASC,SAAA,EAAW;EACzB,OACE,eAAAJ,KAAC,CAAAG,MAAA;IACCE,GAAA;IACAC,KAAA;IAEAC,QACF,GAEJ,eAAAT,IAAA,CAAAI,WAAA","ignoreList":[]}

package/dist/esm/ToggleGroupDemo.js

@@ -1,11 +1,12 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
-const GreenItem = styled(ToggleGroup.Item, {
-  color: "$green8",
+const StyledItem = styled(ToggleGroup.Item, {
+  hoverStyle: {
+    backgroundColor: "$color5"
+  },
   toggledStyle: {
-    backgroundColor: "$green9",
-    color: "$yellow9"
+    backgroundColor: "$color6"
   }
 });
 function ToggleGroupDemo() {
@@ -40,23 +41,14 @@ function ToggleGroupComponent(props) {
             size: props.size,
             disableDeactivation: props.type === "single" ? !0 : void 0,
             children: [
-              /* @__PURE__ */ jsx(
-                GreenItem,
-                {
-                  value: "left",
-                  "aria-label": "Left aligned",
-                  focusStyle: { background: "$color12" },
-                  children: /* @__PURE__ */ jsx(AlignLeft, {})
-                }
-              ),
+              /* @__PURE__ */ jsx(StyledItem, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
               /* @__PURE__ */ jsx(
                 ToggleGroup.Item,
                 {
                   value: "center",
                   "aria-label": "Center aligned",
-                  color: "$blue8",
-                  toggledStyle: { backgroundColor: "$blue9", color: "$green9" },
-                  focusStyle: { background: "$color12" },
+                  hoverStyle: { backgroundColor: "$color5" },
+                  toggledStyle: { backgroundColor: "$color6" },
                   children: /* @__PURE__ */ jsx(AlignCenter, {})
                 }
               ),
@@ -65,9 +57,8 @@ function ToggleGroupComponent(props) {
                 {
                   value: "right",
                   "aria-label": "Right aligned",
-                  color: "$red8",
-                  toggledStyle: { backgroundColor: "$red9", color: "$blue9" },
-                  focusStyle: { background: "$color12" },
+                  hoverStyle: { backgroundColor: "$color5" },
+                  toggledStyle: { backgroundColor: "$color6" },
                   children: /* @__PURE__ */ jsx(AlignRight, {})
                 }
               )

package/dist/esm/ToggleGroupDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AAEnD,SAAS,OAAO,QAAQ,aAAa,QAAQ,cAAc;AAenD,SACE,KADF;AAZR,MAAM,YAAY,OAAO,YAAY,MAAM;AAAA,EACzC,OAAO;AAAA,EACP,cAAc;AAAA,IACZ,iBAAiB;AAAA,IACjB,OAAO;AAAA,EACT;AACF,CAAC;AAEM,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,IAAG,MACT,+BAAC,UAAO,OAAM,UAAS,KAAI,OACzB;AAAA,yBAAC,UAAO,OAAM,UAAS,KAAI,MACzB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,OAAM,UAAS,KAAI,MACzB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,KAAI;AAAA,MAEJ;AAAA,4BAAC,SAAM,IAAG,MAAK,SAAQ,YAAW,MAAM,MAAM,MAAM,SAAS,IAC1D,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAGtD;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,YAAY,EAAE,YAAY,WAAW;AAAA,kBAErC,8BAAC,aAAU;AAAA;AAAA,cACb;AAAA,cAGA;AAAA,gBAAC,YAAY;AAAA,gBAAZ;AAAA,kBACC,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,OAAM;AAAA,kBACN,cAAc,EAAE,iBAAiB,UAAU,OAAO,UAAU;AAAA,kBAC5D,YAAY,EAAE,YAAY,WAAW;AAAA,kBAErC,8BAAC,eAAY;AAAA;AAAA,cACf;AAAA,cAGA;AAAA,gBAAC,YAAY;AAAA,gBAAZ;AAAA,kBACC,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,OAAM;AAAA,kBACN,cAAc,EAAE,iBAAiB,SAAS,OAAO,SAAS;AAAA,kBAC1D,YAAY,EAAE,YAAY,WAAW;AAAA,kBAErC,8BAAC,cAAW;AAAA;AAAA,cACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AAEnD,SAAS,OAAO,QAAQ,aAAa,QAAQ,cAAc;AAgBnD,SACE,KADF;AAbR,MAAM,aAAa,OAAO,YAAY,MAAM;AAAA,EAC1C,YAAY;AAAA,IACV,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AACF,CAAC;AAEM,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,IAAG,MACT,+BAAC,UAAO,OAAM,UAAS,KAAI,OACzB;AAAA,yBAAC,UAAO,OAAM,UAAS,KAAI,MACzB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,OAAM,UAAS,KAAI,MACzB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,KAAI;AAAA,MAEJ;AAAA,4BAAC,SAAM,IAAG,MAAK,SAAQ,YAAW,MAAM,MAAM,MAAM,SAAS,IAC1D,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAGtD;AAAA,kCAAC,cAAW,OAAM,QAAO,cAAW,gBAClC,8BAAC,aAAU,GACb;AAAA,cAGA;AAAA,gBAAC,YAAY;AAAA,gBAAZ;AAAA,kBACC,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,YAAY,EAAE,iBAAiB,UAAU;AAAA,kBACzC,cAAc,EAAE,iBAAiB,UAAU;AAAA,kBAE3C,8BAAC,eAAY;AAAA;AAAA,cACf;AAAA,cAGA;AAAA,gBAAC,YAAY;AAAA,gBAAZ;AAAA,kBACC,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,YAAY,EAAE,iBAAiB,UAAU;AAAA,kBACzC,cAAc,EAAE,iBAAiB,UAAU;AAAA,kBAE3C,8BAAC,cAAW;AAAA;AAAA,cACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/ToggleGroupDemo.mjs

@@ -1,11 +1,12 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
-const GreenItem = styled(ToggleGroup.Item, {
-  color: "$green8",
+const StyledItem = styled(ToggleGroup.Item, {
+  hoverStyle: {
+    backgroundColor: "$color5"
+  },
   toggledStyle: {
-    backgroundColor: "$green9",
-    color: "$yellow9"
+    backgroundColor: "$color6"
   }
 });
 function ToggleGroupDemo() {
@@ -61,35 +62,28 @@ function ToggleGroupComponent(props) {
       type: props.type,
       size: props.size,
       disableDeactivation: props.type === "single" ? !0 : void 0,
-      children: [/* @__PURE__ */jsx(GreenItem, {
+      children: [/* @__PURE__ */jsx(StyledItem, {
         value: "left",
         "aria-label": "Left aligned",
-        focusStyle: {
-          background: "$color12"
-        },
         children: /* @__PURE__ */jsx(AlignLeft, {})
       }), /* @__PURE__ */jsx(ToggleGroup.Item, {
         value: "center",
         "aria-label": "Center aligned",
-        color: "$blue8",
-        toggledStyle: {
-          backgroundColor: "$blue9",
-          color: "$green9"
+        hoverStyle: {
+          backgroundColor: "$color5"
         },
-        focusStyle: {
-          background: "$color12"
+        toggledStyle: {
+          backgroundColor: "$color6"
         },
         children: /* @__PURE__ */jsx(AlignCenter, {})
       }), /* @__PURE__ */jsx(ToggleGroup.Item, {
         value: "right",
         "aria-label": "Right aligned",
-        color: "$red8",
-        toggledStyle: {
-          backgroundColor: "$red9",
-          color: "$blue9"
+        hoverStyle: {
+          backgroundColor: "$color5"
         },
-        focusStyle: {
-          background: "$color12"
+        toggledStyle: {
+          backgroundColor: "$color6"
         },
         children: /* @__PURE__ */jsx(AlignRight, {})
       })]

package/dist/esm/ToggleGroupDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["AlignCenter","AlignLeft","AlignRight","Label","styled","ToggleGroup","XStack","YStack","jsx","jsxs","GreenItem","Item","color","toggledStyle","backgroundColor","ToggleGroupDemo","px","children","items","gap","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justify","pr","htmlFor","disableDeactivation","value","focusStyle","background"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["AlignCenter","AlignLeft","AlignRight","Label","styled","ToggleGroup","XStack","YStack","jsx","jsxs","StyledItem","Item","hoverStyle","backgroundColor","toggledStyle","ToggleGroupDemo","px","children","items","gap","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justify","pr","htmlFor","disableDeactivation","value"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/ToggleGroupDemo.native.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
-var GreenItem = styled(ToggleGroup.Item, {
-  color: "$green8",
+var StyledItem = styled(ToggleGroup.Item, {
+  hoverStyle: {
+    backgroundColor: "$color5"
+  },
   toggledStyle: {
-    backgroundColor: "$green9",
-    color: "$yellow9"
+    backgroundColor: "$color6"
   }
 });
 function ToggleGroupDemo() {
@@ -63,37 +64,30 @@ function ToggleGroupComponent(props) {
       size: props.size,
       disableDeactivation: props.type === "single" ? !0 : void 0,
       children: [/* Using styled() component */
-      /* @__PURE__ */_jsx(GreenItem, {
+      /* @__PURE__ */_jsx(StyledItem, {
         value: "left",
         "aria-label": "Left aligned",
-        focusStyle: {
-          background: "$color12"
-        },
         children: /* @__PURE__ */_jsx(AlignLeft, {})
       }), /* Using inline toggledStyle prop */
       /* @__PURE__ */_jsx(ToggleGroup.Item, {
         value: "center",
         "aria-label": "Center aligned",
-        color: "$blue8",
-        toggledStyle: {
-          backgroundColor: "$blue9",
-          color: "$green9"
+        hoverStyle: {
+          backgroundColor: "$color5"
         },
-        focusStyle: {
-          background: "$color12"
+        toggledStyle: {
+          backgroundColor: "$color6"
         },
         children: /* @__PURE__ */_jsx(AlignCenter, {})
       }), /* Using inline toggledStyle prop */
       /* @__PURE__ */_jsx(ToggleGroup.Item, {
         value: "right",
         "aria-label": "Right aligned",
-        color: "$red8",
-        toggledStyle: {
-          backgroundColor: "$red9",
-          color: "$blue9"
+        hoverStyle: {
+          backgroundColor: "$color5"
         },
-        focusStyle: {
-          background: "$color12"
+        toggledStyle: {
+          backgroundColor: "$color6"
         },
         children: /* @__PURE__ */_jsx(AlignRight, {})
       })]

package/dist/esm/ToggleGroupDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","AlignCenter","AlignLeft","AlignRight","Label","styled","ToggleGroup","XStack","YStack","GreenItem","Item","color","toggledStyle","backgroundColor","ToggleGroupDemo","px","children","items","gap","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justify","pr","htmlFor","disableDeactivation","value"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAaC,IAAA,IAAAC,KAAW,2BAAkB;AAEnD,SAASC,WAAO,EAAAC,SAAQ,EAAAC,UAAa,QAAQ,uBAAc;AAenD,SACEC,KADF,EAAAC,MAAA,EAAAC,WAAA,EAAAC,MAAA,EAAAC,MAAA;AAZR,IAAAC,SAAM,GAAAJ,MAAY,CAAAC,WAAO,CAAAI,IAAY;EACnCC,KAAA,EAAO;EACPC,YAAA,EAAc;IACZC,eAAA,EAAiB;IACjBF,KAAA,EAAO;EACT;AACF,CAAC;AAEM,SAASG,gBAAA,EAAkB;EAChC,OACE,eAAAhB,IAAC,CAAAU,MAAA;IAEGO,EAAA;IACEC,QAAA,iBAAChB,KAAA,CAAAO,MAAA;MACDU,KAAA;MAAyEC,GAC3E;MACAF,QAAA,GACE,eAAAhB,KAAC,CAAAQ,MAAA;QACDS,KAAA;QACFC,GAAA;QAEJF,QAAA,GAEJ,eAAAlB,IAAA,CAAAqB,oBAAA;UAESC,IAAA;UAKIC,IAAA,MAAU;UAEnBC,WAAA;QAAC,mBAAAxB,IAAA,CAAAqB,oBAAA;UACCC,IAAA,YAAqB;UACfC,IAAA;UACNC,WAAQ;QACJ;MAEJ,IAGA,eAAAtB,KAAA,CAAAO,MAAA;QAACU,KAAA;QAAAC,GAAA;QAAAF,QACC,GACA,eAAAlB,IAAA,CAAAqB,oBAAA;UACAC,IAAM,UAAM;UACZC,IAAM,MAAM;UACZC,WAAA;QAGA,mBAAAxB,IAAA,CAAAqB,oBAAA;UAAAC,IAAC;UAAAC,IAAA;UAAAC,WACO;QAAA;MAE+B;IAE1B;EACb;AAGA;AAAa,SAAAH,oBAAZA,CAAAI,KAAA;EAAA,IAAAC,EAAA,aACCD,KAAM,CAAAF,IAAA,CAAAI,QAAA,GAAAC,KAAA,OAAAH,KAAA,CAAAH,IAAA;EAAA,sBACNpB,KAAA,CAAAO,MAAW;IAAAoB,aAAA,EACXJ,KAAA,CAAMD,WAAA;IAAAL,KAAA,UACN;IAA4DW,OAAA,UAC5D;IAAqCV,GAAA;IAExBF,QAAA,kBACflB,IAAA,CAAAM,KAAA;MAAAyB,EAAA,MAGA;MAAAD,OAAA,EAAC;MAAYP,IAAA,EAAAE,KAAZ,CAAAF,IAAA;MAAAS,OAAA,EAAAN,EACC;MAAMR,QAAA,EACNO,KAAA,CAAAH,IAAA,KAAW;IAAA,IACL,eACNpB,KAAA,CAAAM,WAAgB;MAA0CgB,WAC1D,EAAAC,KAAA,CAAAD,WAAc;MAAuBE,EAAA;MAEzBJ,IAAA,EAAAG,KAAA,CAAAH,IAAA;MAAA;MACdC,IAAA,EAAAE,KAAA,CAAAF,IAAA;MAAAU,mBAAA,EAAAR,KAAA,CAAAH,IAAA;MACFJ,QAAA;MAAA,eAAAlB,IAAA,CAAAW,SAAA;QACFuB,KAAA;QAEJ","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","AlignCenter","AlignLeft","AlignRight","Label","styled","ToggleGroup","XStack","YStack","StyledItem","Item","hoverStyle","backgroundColor","toggledStyle","ToggleGroupDemo","px","children","items","gap","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justify","pr","htmlFor"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAaC,IAAA,IAAAC,KAAW,2BAAkB;AAEnD,SAASC,WAAO,EAAAC,SAAQ,EAAAC,UAAa,QAAQ,uBAAc;AAgBnD,SACEC,KADF,EAAAC,MAAA,EAAAC,WAAA,EAAAC,MAAA,EAAAC,MAAA;AAbR,IAAAC,UAAM,GAAAJ,MAAa,CAAAC,WAAO,CAAAI,IAAY;EACpCC,UAAA,EAAY;IACVC,eAAA,EAAiB;EACnB;EACAC,YAAA,EAAc;IACZD,eAAA,EAAiB;EACnB;AACF,CAAC;AAEM,SAASE,gBAAA,EAAkB;EAChC,OACE,eAAAhB,IAAC,CAAAU,MAAA;IAEGO,EAAA;IACEC,QAAA,iBAAChB,KAAA,CAAAO,MAAA;MACDU,KAAA;MAAyEC,GAC3E;MACAF,QAAA,GACE,eAAAhB,KAAC,CAAAQ,MAAA;QACDS,KAAA;QACFC,GAAA;QAEJF,QAAA,GAEJ,eAAAlB,IAAA,CAAAqB,oBAAA;UAESC,IAAA;UAKIC,IAAA,MAAU;UAEnBC,WAAA;QAAC,mBAAAxB,IAAA,CAAAqB,oBAAA;UACCC,IAAA,YAAqB;UACfC,IAAA;UACNC,WAAQ;QACJ;MAEJ,IAGA,eAAAtB,KAAA,CAAAO,MAAA;QAACU,KAAA;QAAAC,GAAA;QAAAF,QACC,GACA,eAAAlB,IAAA,CAAAqB,oBAAA;UACAC,IAAM,UAAM;UACZC,IAAM,MAAM;UACZC,WAAA;QAGA,mBAAAxB,IAAA,CAAAqB,oBAAY,EAAM;UAKlBC,IAAA;UAAAC,IAAC;UAAYC,WAAZ;QAAA;MAEY;IAEgC;EAE9B;AAAA;AACf,SAAAH,oBAGAA,CAAAI,KAAA;EAAA,IAAAC,EAAA,aAACD,KAAA,CAAAF,IAAY,CAAAI,QAAA,GAAAC,KAAA,OAAAH,KAAA,CAAAH,IAAA;EAAA,sBAAZpB,KAAA,CAAAO,MAAA;IAAAoB,aAAA,EACCJ,KAAA,CAAMD,WAAA;IAAAL,KAAA,UACN;IAAWW,OAAA,UACX;IAAyCV,GAAA;IACEF,QAAA,GAE/B,eAAAlB,IAAA,CAAAM,KAAA;MAAAyB,EAAA,MACd;MAAAD,OAAA;MAAAP,IAAA,EAAAE,KAAA,CAAAF,IAAA;MACFS,OAAA,EAAAN,EAAA;MAAAR,QAAA,EAAAO,KAAA,CAAAH,IAAA;IAAA,IACF,eAAApB,KAAA,CAAAM,WAAA;MAEJgB,WAAA,EAAAC,KAAA,CAAAD,WAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "2.0.0-1768586279389",
+  "version": "2.0.0-1768696252732",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -50,45 +50,46 @@
     }
   },
   "dependencies": {
-    "@tamagui/animate-presence": "2.0.0-1768586279389",
-    "@tamagui/avatar": "2.0.0-1768586279389",
-    "@tamagui/button": "2.0.0-1768586279389",
-    "@tamagui/checkbox": "2.0.0-1768586279389",
-    "@tamagui/checkbox-headless": "2.0.0-1768586279389",
-    "@tamagui/config": "2.0.0-1768586279389",
-    "@tamagui/context-menu": "2.0.0-1768586279389",
-    "@tamagui/core": "2.0.0-1768586279389",
-    "@tamagui/get-button-sized": "2.0.0-1768586279389",
-    "@tamagui/image": "2.0.0-1768586279389",
-    "@tamagui/input": "2.0.0-1768586279389",
-    "@tamagui/linear-gradient": "2.0.0-1768586279389",
-    "@tamagui/list-item": "2.0.0-1768586279389",
-    "@tamagui/logo": "2.0.0-1768586279389",
-    "@tamagui/lucide-icons": "2.0.0-1768586279389",
-    "@tamagui/menu": "2.0.0-1768586279389",
-    "@tamagui/popover": "2.0.0-1768586279389",
-    "@tamagui/progress": "2.0.0-1768586279389",
-    "@tamagui/radio-group": "2.0.0-1768586279389",
-    "@tamagui/radio-headless": "2.0.0-1768586279389",
-    "@tamagui/roving-focus": "2.0.0-1768586279389",
-    "@tamagui/select": "2.0.0-1768586279389",
-    "@tamagui/sheet": "2.0.0-1768586279389",
-    "@tamagui/slider": "2.0.0-1768586279389",
-    "@tamagui/stacks": "2.0.0-1768586279389",
-    "@tamagui/switch": "2.0.0-1768586279389",
-    "@tamagui/switch-headless": "2.0.0-1768586279389",
-    "@tamagui/tabs": "2.0.0-1768586279389",
-    "@tamagui/tamagui-dev-config": "2.0.0-1768586279389",
-    "@tamagui/theme": "2.0.0-1768586279389",
-    "@tamagui/toast": "2.0.0-1768586279389",
-    "tamagui": "2.0.0-1768586279389"
+    "@tamagui/animate-presence": "2.0.0-1768696252732",
+    "@tamagui/avatar": "2.0.0-1768696252732",
+    "@tamagui/button": "2.0.0-1768696252732",
+    "@tamagui/checkbox": "2.0.0-1768696252732",
+    "@tamagui/checkbox-headless": "2.0.0-1768696252732",
+    "@tamagui/colors": "2.0.0-1768696252732",
+    "@tamagui/config": "2.0.0-1768696252732",
+    "@tamagui/context-menu": "2.0.0-1768696252732",
+    "@tamagui/core": "2.0.0-1768696252732",
+    "@tamagui/get-button-sized": "2.0.0-1768696252732",
+    "@tamagui/image": "2.0.0-1768696252732",
+    "@tamagui/input": "2.0.0-1768696252732",
+    "@tamagui/linear-gradient": "2.0.0-1768696252732",
+    "@tamagui/list-item": "2.0.0-1768696252732",
+    "@tamagui/logo": "2.0.0-1768696252732",
+    "@tamagui/lucide-icons": "2.0.0-1768696252732",
+    "@tamagui/menu": "2.0.0-1768696252732",
+    "@tamagui/popover": "2.0.0-1768696252732",
+    "@tamagui/progress": "2.0.0-1768696252732",
+    "@tamagui/radio-group": "2.0.0-1768696252732",
+    "@tamagui/radio-headless": "2.0.0-1768696252732",
+    "@tamagui/roving-focus": "2.0.0-1768696252732",
+    "@tamagui/select": "2.0.0-1768696252732",
+    "@tamagui/sheet": "2.0.0-1768696252732",
+    "@tamagui/slider": "2.0.0-1768696252732",
+    "@tamagui/stacks": "2.0.0-1768696252732",
+    "@tamagui/switch": "2.0.0-1768696252732",
+    "@tamagui/switch-headless": "2.0.0-1768696252732",
+    "@tamagui/tabs": "2.0.0-1768696252732",
+    "@tamagui/tamagui-dev-config": "2.0.0-1768696252732",
+    "@tamagui/theme": "2.0.0-1768696252732",
+    "@tamagui/toast": "2.0.0-1768696252732",
+    "tamagui": "2.0.0-1768696252732"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-1768586279389",
+    "@tamagui/build": "2.0.0-1768696252732",
     "react": "*",
     "react-native": "0.81.5"
   },

package/src/AnimationsDelayDemo.tsx

@@ -3,7 +3,7 @@ import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from 'tamagui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 
-const colors = ['$red10', '$green10', '$blue10', '$purple10'] as const
+const colors = ['$color9', '$color10', '$color11', '$color12'] as const
 
 export function AnimationsDelayDemo() {
   const ref = React.useRef<HTMLElement>(null)

package/src/AnimationsEnterDemo.tsx

@@ -29,7 +29,7 @@ export function AnimationsEnterDemo(props: any) {
         opacity={1}
         scale={1}
         y={0}
-        bg="$pink10"
+        bg="$color9"
         rounded="$9"
       >
         {props.children ?? <LogoIcon downscale={0.75} />}

package/src/AnimationsTimingDemo.tsx

@@ -4,7 +4,7 @@ import { Square } from 'tamagui'
 export function AnimationsTimingDemo() {
   return (
     <Square
-      bg="$pink10"
+      bg="$color9"
       transition="100ms"
       elevation="$4"
       size={110}

package/src/ButtonDemo.tsx

@@ -3,8 +3,6 @@ import { Activity, Airplay } from '@tamagui/lucide-icons'
 import { Theme, XGroup, XStack, YStack } from 'tamagui'
 
 export function ButtonDemo(props) {
-  console.info('hi')
-
   return (
     <YStack p="$3" gap="$3" {...props}>
       <Button>Plain</Button>

package/src/CardDemo.tsx

@@ -23,7 +23,7 @@ export function DemoCard(props: CardProps) {
     <Card size="$4" borderWidth={1} borderColor="$borderColor" {...props}>
       <Card.Header p="$4">
         <H2>Sony A7IV</H2>
-        <Paragraph theme="alt2">Now available</Paragraph>
+        <Paragraph>Now available</Paragraph>
       </Card.Header>
       <Card.Footer p="$4">
         <XStack flex={1} />

package/src/ColorsDemo.tsx

@@ -1,49 +1,74 @@
-import type { Variable } from '@tamagui/core'
 import {
-  H2,
-  Paragraph,
-  Separator,
-  Square,
-  XStack,
-  YStack,
-  getTokens,
-  getVariableValue,
-} from 'tamagui'
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark,
+} from '@tamagui/colors'
+import { H2, Paragraph, Separator, Square, XStack, YStack } from 'tamagui'
 
-const colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']
+const colorGroups = ['gray', 'blue', 'green', 'yellow', 'red'] as const
 
-export function ColorsDemo() {
-  const colors = getTokens({ prefixed: false }).color
-  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]
+const lightColors = {
+  gray,
+  blue,
+  green,
+  yellow,
+  red,
+}
+
+const darkColors = {
+  gray: grayDark,
+  blue: blueDark,
+  green: greenDark,
+  yellow: yellowDark,
+  red: redDark,
+}
 
+export function ColorsDemo() {
   return (
     <YStack mt="$4" gap="$8">
-      <ColorsRow title="Light" colors={colorsLight} />
+      <ColorsRow title="Light" colorSets={lightColors} />
       <Separator />
-      <ColorsRow title="Dark" colors={colorsDark} />
+      <ColorsRow title="Dark" colorSets={darkColors} />
     </YStack>
   )
 }
 
-function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
+type ColorSet = Record<string, string>
+
+function ColorsRow({
+  title,
+  colorSets,
+}: {
+  title: string
+  colorSets: Record<(typeof colorGroups)[number], ColorSet>
+}) {
   return (
     <YStack gap="$4" $sm={{ gap: '$2' }}>
       <H2 size="$2">{title}</H2>
 
       <XStack gap="$4" self="center">
         <YStack gap="$4" $sm={{ gap: '$2' }} self="center">
-          {colors.map((group, index) => {
+          {colorGroups.map((groupName) => {
+            const colorSet = colorSets[groupName]
+            const colors = Object.values(colorSet)
             return (
-              <XStack gap="$2" key={index}>
-                {group.map((color) => {
+              <XStack gap="$2" key={groupName}>
+                {colors.map((color, index) => {
                   return (
                     <Square
-                      key={`${color.key}${index}`}
+                      key={`${groupName}${index}`}
                       rounded="$2"
                       size="$4"
                       height="$4"
                       borderWidth={1}
-                      bg={getVariableValue(color)}
+                      bg={color as any}
                       borderColor="$color7"
                       $sm={{
                         size: '$2',
@@ -106,19 +131,3 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
     </YStack>
   )
 }
-
-function getColors(colors: Record<string, Variable> | undefined, dark = false) {
-  if (!colors) {
-    console.warn(`⚠️ no colors?`, colors)
-    return []
-  }
-  return colorGroups.map((group) => {
-    return Object.keys(colors)
-      .filter(
-        (color) =>
-          color.startsWith(group) &&
-          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))
-      )
-      .map((key) => colors[key])
-  })
-}

package/src/ContextMenuDemo.tsx

@@ -19,7 +19,7 @@ export function ContextMenuDemo() {
     <ContextMenu allowFlip native={native} placement="bottom-start" offset={14}>
       <ContextMenu.Trigger asChild>
         <Text text="center" select={null}>
-          Right Click or longPress
+          Right Click or Long Press
         </Text>
       </ContextMenu.Trigger>
 

package/src/RadioGroupUnstyledDemo.tsx

@@ -6,7 +6,7 @@ const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'
 
 const RadioGroupItemFrame = styled(YStack, {
   name: RADIO_GROUP_ITEM_NAME,
-  tag: 'button',
+  render: 'button',
 
   rounded: 1000,
   bg: '$background',

package/src/ScrollViewDemo.tsx

@@ -4,14 +4,14 @@ export function ScrollViewDemo() {
   return (
     <ScrollView maxH={250} width="75%" bg="$background" p="$4" rounded="$4">
       <XStack flexWrap="wrap" items="center" justify="center">
-        <Square m="$4" size={120} bg="$red9" />
-        <Circle m="$4" size={120} bg="$orange9" />
-        <Square m="$4" size={120} bg="$yellow9" />
-        <Circle m="$4" size={120} bg="$red9" />
-        <Square m="$4" size={120} bg="$blue9" />
-        <Circle m="$4" size={120} bg="$purple9" />
-        <Square m="$4" size={120} bg="$pink9" />
-        <Circle m="$4" size={120} bg="$red9" />
+        <Square m="$4" size={120} bg="$color5" />
+        <Circle m="$4" size={120} bg="$color6" />
+        <Square m="$4" size={120} bg="$color7" />
+        <Circle m="$4" size={120} bg="$color8" />
+        <Square m="$4" size={120} bg="$color9" />
+        <Circle m="$4" size={120} bg="$color10" />
+        <Square m="$4" size={120} bg="$color11" />
+        <Circle m="$4" size={120} bg="$color12" />
       </XStack>
     </ScrollView>
   )

package/src/SelectDemo.tsx

@@ -100,7 +100,7 @@ export function SelectDemoContents(
           borderWidth={1}
           borderColor="$borderColor"
         >
-          <Select.Indicator transition="select" />
+          <Select.Indicator transition="quick" />
           <Select.Group>
             <Select.Label fontWeight="bold">Fruits</Select.Label>
             {/* for longer lists memoizing these is useful */}

package/src/TabsHeadlessDemo.tsx

@@ -20,7 +20,7 @@ export const TabsFrame = styled(SizableStack, {
 
 export const TabFrame = styled(ThemeableStack, {
   name: 'TabsTrigger',
-  tag: 'button',
+  render: 'button',
   cursor: 'pointer',
   variants: {
     size: {