@tamagui/demos 1.122.8 → 1.123.0

package/dist/cjs/ToggleGroupDemo.cjs

@@ -26,6 +26,13 @@ module.exports = __toCommonJS(ToggleGroupDemo_exports);
 var import_lucide_icons = require("@tamagui/lucide-icons"),
   import_tamagui = require("tamagui"),
   import_jsx_runtime = require("react/jsx-runtime");
+const Item = (0, import_tamagui.styled)(import_tamagui.ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     paddingHorizontal: "$4",
@@ -79,15 +86,15 @@ function ToggleGroupComponent(props) {
       type: props.type,
       size: props.size,
       disableDeactivation: props.type === "single" ? !0 : void 0,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
         value: "left",
         "aria-label": "Left aligned",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {})
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
         value: "center",
         "aria-label": "Center aligned",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {})
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
         value: "right",
         "aria-label": "Right aligned",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {})

package/dist/cjs/ToggleGroupDemo.js

@@ -18,6 +18,13 @@ __export(ToggleGroupDemo_exports, {
 });
 module.exports = __toCommonJS(ToggleGroupDemo_exports);
 var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+const Item = (0, import_tamagui.styled)(import_tamagui.ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$10", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: "$6", children: [
@@ -50,9 +57,9 @@ function ToggleGroupComponent(props) {
             size: props.size,
             disableDeactivation: props.type === "single" ? !0 : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {}) })
             ]
           }
         )

package/dist/cjs/ToggleGroupDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAmD,kCAEnD,iBAAmD,oBAM3C;AAJD,SAAS,kBAAkB;AAChC,SACE,4CAAC,yBAAO,mBAAkB,MACxB,uDAAC,yBAAO,YAAW,UAAS,OAAM,OAChC;AAAA,iDAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,0DAAC,2BAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,sDAAC,iCAAU,GACb;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,sDAAC,mCAAY,GACf;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,sDAAC,kCAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAmD,kCAEnD,iBAA2D,oBAenD;AAbR,MAAM,WAAO,uBAAO,2BAAY,MAAM;AAAA,EACpC,OAAO;AAAA,EAEP,YAAY;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,EACnB;AACF,CAAC;AAEM,SAAS,kBAAkB;AAChC,SACE,4CAAC,yBAAO,mBAAkB,MACxB,uDAAC,yBAAO,YAAW,UAAS,OAAM,OAChC;AAAA,iDAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,0DAAC,QAAK,OAAM,QAAO,cAAW,gBAC5B,sDAAC,iCAAU,GACb;AAAA,cACA,4CAAC,QAAK,OAAM,UAAS,cAAW,kBAC9B,sDAAC,mCAAY,GACf;AAAA,cACA,4CAAC,QAAK,OAAM,SAAQ,cAAW,iBAC7B,sDAAC,kCAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ToggleGroupDemo.native.js

@@ -18,7 +18,13 @@ __export(ToggleGroupDemo_exports, {
   ToggleGroupDemo: () => ToggleGroupDemo
 });
 module.exports = __toCommonJS(ToggleGroupDemo_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime"), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), Item = (0, import_tamagui.styled)(import_tamagui.ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     paddingHorizontal: "$4",
@@ -86,17 +92,17 @@ function ToggleGroupComponent(props) {
         size: props.size,
         disableDeactivation: props.type === "single" ? !0 : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, {
             value: "left",
             "aria-label": "Left aligned",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {})
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, {
             value: "center",
             "aria-label": "Center aligned",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {})
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, {
             value: "right",
             "aria-label": "Right aligned",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {})

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/code/demos/src/ToggleGroupDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;uDAAA,sBAAmD,kCAEnD,iBAAmD;AAE5C,SAASA,kBAAAA;AACd,SACE,uCAAAC,KAACC,uBAAAA;IAAOC,mBAAkB;cACxB,uCAAAC,MAACC,uBAAAA;MAAOC,YAAW;MAASC,OAAM;;QAChC,uCAAAH,MAACF,uBAAAA;UAAOI,YAAW;UAASC,OAAM;;YAChC,uCAAAN,KAACO,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,uCAAAV,KAACO,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,uCAAAP,MAACC,uBAAAA;UAAOC,YAAW;UAASC,OAAM;;YAChC,uCAAAN,KAACO,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,uCAAAV,KAACO,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAK,UAAUD,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,CAAA,IAAMH,MAAMH,IAAI;AACjE,SACE,uCAAAL,MAACC,uBAAAA;IACCW,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,uCAAAN,KAACiB,sBAAAA;QAAMC,cAAa;QAAKF,gBAAe;QAAWP,MAAME,MAAMF;QAAMU,SAASP;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;;MAIxC,uCAAAL,MAACiB,4BAAAA;QACCV,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;;QACZC,MAAME,MAAMF;QACZY,qBAAqBV,MAAMH,SAAS,WAAW,KAAOc;;UAEtD,uCAAAtB,KAACoB,2BAAYG,MAAI;YAACC,OAAM;YAAOC,cAAW;sBACxC,uCAAAzB,KAAC0B,+BAAAA,CAAAA,CAAAA;;UAEH,uCAAA1B,KAACoB,2BAAYG,MAAI;YAACC,OAAM;YAASC,cAAW;sBAC1C,uCAAAzB,KAAC2B,iCAAAA,CAAAA,CAAAA;;UAEH,uCAAA3B,KAACoB,2BAAYG,MAAI;YAACC,OAAM;YAAQC,cAAW;sBACzC,uCAAAzB,KAAC4B,gCAAAA,CAAAA,CAAAA;;;;;;AAKX;",
-  "names": ["ToggleGroupDemo", "_jsx", "YStack", "paddingHorizontal", "_jsxs", "XStack", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "Label", "paddingRight", "htmlFor", "ToggleGroup", "disableDeactivation", "undefined", "Item", "value", "aria-label", "AlignLeft", "AlignCenter", "AlignRight"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;uDAAA,sBAAmD,kCAEnD,iBAA2D,oBAErDA,WAAOC,uBAAOC,2BAAYF,MAAM;EACpCG,OAAO;EAEPC,YAAY;IACVD,OAAO;IACPE,iBAAiB;EACnB;AACF,CAAA;AAEO,SAASC,kBAAAA;AACd,SACE,uCAAAC,KAACC,uBAAAA;IAAOC,mBAAkB;cACxB,uCAAAC,MAACC,uBAAAA;MAAOC,YAAW;MAASC,OAAM;;QAChC,uCAAAH,MAACF,uBAAAA;UAAOI,YAAW;UAASC,OAAM;;YAChC,uCAAAN,KAACO,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,uCAAAV,KAACO,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,uCAAAP,MAACC,uBAAAA;UAAOC,YAAW;UAASC,OAAM;;YAChC,uCAAAN,KAACO,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,uCAAAV,KAACO,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAK,UAAUD,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,CAAA,IAAMH,MAAMH,IAAI;AACjE,SACE,uCAAAL,MAACC,uBAAAA;IACCW,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,uCAAAN,KAACiB,sBAAAA;QAAMC,cAAa;QAAKF,gBAAe;QAAWP,MAAME,MAAMF;QAAMU,SAASP;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;;MAIxC,uCAAAL,MAACR,4BAAAA;QACCe,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;;QACZC,MAAME,MAAMF;QACZW,qBAAqBT,MAAMH,SAAS,WAAW,KAAOa;;UAEtD,uCAAArB,KAACP,MAAAA;YAAK6B,OAAM;YAAOC,cAAW;sBAC5B,uCAAAvB,KAACwB,+BAAAA,CAAAA,CAAAA;;UAEH,uCAAAxB,KAACP,MAAAA;YAAK6B,OAAM;YAASC,cAAW;sBAC9B,uCAAAvB,KAACyB,iCAAAA,CAAAA,CAAAA;;UAEH,uCAAAzB,KAACP,MAAAA;YAAK6B,OAAM;YAAQC,cAAW;sBAC7B,uCAAAvB,KAAC0B,gCAAAA,CAAAA,CAAAA;;;;;;AAKX;",
+  "names": ["Item", "styled", "ToggleGroup", "color", "focusStyle", "backgroundColor", "ToggleGroupDemo", "_jsx", "YStack", "paddingHorizontal", "_jsxs", "XStack", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "Label", "paddingRight", "htmlFor", "disableDeactivation", "undefined", "value", "aria-label", "AlignLeft", "AlignCenter", "AlignRight"]
 }

package/dist/esm/ToggleGroupDemo.js

@@ -1,6 +1,13 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+const Item = styled(ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */ jsx(YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$10", children: [
     /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: "$6", children: [
@@ -33,9 +40,9 @@ function ToggleGroupComponent(props) {
             size: props.size,
             disableDeactivation: props.type === "single" ? !0 : void 0,
             children: [
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ jsx(AlignRight, {}) })
+              /* @__PURE__ */ jsx(Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
+              /* @__PURE__ */ jsx(Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
+              /* @__PURE__ */ jsx(Item, { value: "right", "aria-label": "Right aligned", 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,aAAa,QAAQ,cAAc;AAM3C,SACE,KADF;AAJD,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;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,YAAW,UAAS,OAAM,MAChC;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,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AAEnD,SAAS,OAAO,QAAQ,aAAa,QAAQ,cAAc;AAenD,SACE,KADF;AAbR,MAAM,OAAO,OAAO,YAAY,MAAM;AAAA,EACpC,OAAO;AAAA,EAEP,YAAY;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,EACnB;AACF,CAAC;AAEM,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;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,YAAW,UAAS,OAAM,MAChC;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,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,kCAAC,QAAK,OAAM,QAAO,cAAW,gBAC5B,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,QAAK,OAAM,UAAS,cAAW,kBAC9B,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,QAAK,OAAM,SAAQ,cAAW,iBAC7B,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/ToggleGroupDemo.mjs

@@ -1,6 +1,13 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+const Item = styled(ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */jsx(YStack, {
     paddingHorizontal: "$4",
@@ -54,15 +61,15 @@ function ToggleGroupComponent(props) {
       type: props.type,
       size: props.size,
       disableDeactivation: props.type === "single" ? !0 : void 0,
-      children: [/* @__PURE__ */jsx(ToggleGroup.Item, {
+      children: [/* @__PURE__ */jsx(Item, {
         value: "left",
         "aria-label": "Left aligned",
         children: /* @__PURE__ */jsx(AlignLeft, {})
-      }), /* @__PURE__ */jsx(ToggleGroup.Item, {
+      }), /* @__PURE__ */jsx(Item, {
         value: "center",
         "aria-label": "Center aligned",
         children: /* @__PURE__ */jsx(AlignCenter, {})
-      }), /* @__PURE__ */jsx(ToggleGroup.Item, {
+      }), /* @__PURE__ */jsx(Item, {
         value: "right",
         "aria-label": "Right aligned",
         children: /* @__PURE__ */jsx(AlignRight, {})

package/dist/esm/ToggleGroupDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["AlignCenter","AlignLeft","AlignRight","Label","ToggleGroup","XStack","YStack","jsx","jsxs","ToggleGroupDemo","paddingHorizontal","children","alignItems","space","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justifyContent","paddingRight","htmlFor","disableDeactivation","Item","value"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,SAAA,EAAWC,UAAA,QAAkB;AAEnD,SAASC,KAAA,EAAOC,WAAA,EAAaC,MAAA,EAAQC,MAAA,QAAc;AAM3C,SACEC,GAAA,EADFC,IAAA;AAJD,SAASC,gBAAA,EAAkB;EAChC,OACE,eAAAF,GAAA,CAACD,MAAA;IAAOI,iBAAA,EAAkB;IACxBC,QAAA,iBAAAH,IAAA,CAACH,MAAA;MAAOO,UAAA,EAAW;MAASC,KAAA,EAAM;MAChCF,QAAA,kBAAAH,IAAA,CAACF,MAAA;QAAOM,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAJ,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa,GACvE,eAAAV,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa;MAAA,CAC3E,GACA,eAAAT,IAAA,CAACH,MAAA;QAAOO,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAJ,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW,GACrE,eAAAV,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW;MAAA,CACzE;IAAA,CACF;EAAA,CACF;AAEJ;AAEA,SAASH,qBAAqBI,KAAA,EAI3B;EACD,MAAMC,EAAA,GAAK,UAAUD,KAAA,CAAMF,IAAA,CAAKI,QAAA,CAAS,EAAEC,KAAA,CAAM,CAAC,CAAC,IAAIH,KAAA,CAAMH,IAAI;EACjE,OACE,eAAAP,IAAA,CAACH,MAAA;IACCiB,aAAA,EAAeJ,KAAA,CAAMD,WAAA,KAAgB,eAAe,QAAQ;IAC5DL,UAAA,EAAW;IACXW,cAAA,EAAe;IACfV,KAAA,EAAM;IAENF,QAAA,kBAAAJ,GAAA,CAACJ,KAAA;MAAMqB,YAAA,EAAa;MAAKD,cAAA,EAAe;MAAWP,IAAA,EAAME,KAAA,CAAMF,IAAA;MAAMS,OAAA,EAASN,EAAA;MAC3ER,QAAA,EAAAO,KAAA,CAAMH,IAAA,KAAS,WAAW,WAAW;IAAA,CACxC,GAGA,eAAAP,IAAA,CAACJ,WAAA;MACCa,WAAA,EAAaC,KAAA,CAAMD,WAAA;MACnBE,EAAA;MACAJ,IAAA,EAAMG,KAAA,CAAMH,IAAA;MACZC,IAAA,EAAME,KAAA,CAAMF,IAAA;MACZU,mBAAA,EAAqBR,KAAA,CAAMH,IAAA,KAAS,WAAW,KAAO;MAEtDJ,QAAA,kBAAAJ,GAAA,CAACH,WAAA,CAAYuB,IAAA,EAAZ;QAAiBC,KAAA,EAAM;QAAO,cAAW;QACxCjB,QAAA,iBAAAJ,GAAA,CAACN,SAAA,IAAU;MAAA,CACb,GACA,eAAAM,GAAA,CAACH,WAAA,CAAYuB,IAAA,EAAZ;QAAiBC,KAAA,EAAM;QAAS,cAAW;QAC1CjB,QAAA,iBAAAJ,GAAA,CAACP,WAAA,IAAY;MAAA,CACf,GACA,eAAAO,GAAA,CAACH,WAAA,CAAYuB,IAAA,EAAZ;QAAiBC,KAAA,EAAM;QAAQ,cAAW;QACzCjB,QAAA,iBAAAJ,GAAA,CAACL,UAAA,IAAW;MAAA,CACd;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["AlignCenter","AlignLeft","AlignRight","Label","styled","ToggleGroup","XStack","YStack","jsx","jsxs","Item","color","focusStyle","backgroundColor","ToggleGroupDemo","paddingHorizontal","children","alignItems","space","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justifyContent","paddingRight","htmlFor","disableDeactivation","value"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,SAAA,EAAWC,UAAA,QAAkB;AAEnD,SAASC,KAAA,EAAOC,MAAA,EAAQC,WAAA,EAAaC,MAAA,EAAQC,MAAA,QAAc;AAenD,SACEC,GAAA,EADFC,IAAA;AAbR,MAAMC,IAAA,GAAON,MAAA,CAAOC,WAAA,CAAYK,IAAA,EAAM;EACpCC,KAAA,EAAO;EAEPC,UAAA,EAAY;IACVD,KAAA,EAAO;IACPE,eAAA,EAAiB;EACnB;AACF,CAAC;AAEM,SAASC,gBAAA,EAAkB;EAChC,OACE,eAAAN,GAAA,CAACD,MAAA;IAAOQ,iBAAA,EAAkB;IACxBC,QAAA,iBAAAP,IAAA,CAACH,MAAA;MAAOW,UAAA,EAAW;MAASC,KAAA,EAAM;MAChCF,QAAA,kBAAAP,IAAA,CAACF,MAAA;QAAOU,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAR,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa,GACvE,eAAAd,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa;MAAA,CAC3E,GACA,eAAAb,IAAA,CAACH,MAAA;QAAOW,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAR,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW,GACrE,eAAAd,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW;MAAA,CACzE;IAAA,CACF;EAAA,CACF;AAEJ;AAEA,SAASH,qBAAqBI,KAAA,EAI3B;EACD,MAAMC,EAAA,GAAK,UAAUD,KAAA,CAAMF,IAAA,CAAKI,QAAA,CAAS,EAAEC,KAAA,CAAM,CAAC,CAAC,IAAIH,KAAA,CAAMH,IAAI;EACjE,OACE,eAAAX,IAAA,CAACH,MAAA;IACCqB,aAAA,EAAeJ,KAAA,CAAMD,WAAA,KAAgB,eAAe,QAAQ;IAC5DL,UAAA,EAAW;IACXW,cAAA,EAAe;IACfV,KAAA,EAAM;IAENF,QAAA,kBAAAR,GAAA,CAACL,KAAA;MAAM0B,YAAA,EAAa;MAAKD,cAAA,EAAe;MAAWP,IAAA,EAAME,KAAA,CAAMF,IAAA;MAAMS,OAAA,EAASN,EAAA;MAC3ER,QAAA,EAAAO,KAAA,CAAMH,IAAA,KAAS,WAAW,WAAW;IAAA,CACxC,GAGA,eAAAX,IAAA,CAACJ,WAAA;MACCiB,WAAA,EAAaC,KAAA,CAAMD,WAAA;MACnBE,EAAA;MACAJ,IAAA,EAAMG,KAAA,CAAMH,IAAA;MACZC,IAAA,EAAME,KAAA,CAAMF,IAAA;MACZU,mBAAA,EAAqBR,KAAA,CAAMH,IAAA,KAAS,WAAW,KAAO;MAEtDJ,QAAA,kBAAAR,GAAA,CAACE,IAAA;QAAKsB,KAAA,EAAM;QAAO,cAAW;QAC5BhB,QAAA,iBAAAR,GAAA,CAACP,SAAA,IAAU;MAAA,CACb,GACA,eAAAO,GAAA,CAACE,IAAA;QAAKsB,KAAA,EAAM;QAAS,cAAW;QAC9BhB,QAAA,iBAAAR,GAAA,CAACR,WAAA,IAAY;MAAA,CACf,GACA,eAAAQ,GAAA,CAACE,IAAA;QAAKsB,KAAA,EAAM;QAAQ,cAAW;QAC7BhB,QAAA,iBAAAR,GAAA,CAACN,UAAA,IAAW;MAAA,CACd;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/ToggleGroupDemo.native.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
+var Item = styled(ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */ _jsx(YStack, {
     paddingHorizontal: "$4",
@@ -68,17 +75,17 @@ function ToggleGroupComponent(props) {
         size: props.size,
         disableDeactivation: props.type === "single" ? !0 : void 0,
         children: [
-          /* @__PURE__ */ _jsx(ToggleGroup.Item, {
+          /* @__PURE__ */ _jsx(Item, {
             value: "left",
             "aria-label": "Left aligned",
             children: /* @__PURE__ */ _jsx(AlignLeft, {})
           }),
-          /* @__PURE__ */ _jsx(ToggleGroup.Item, {
+          /* @__PURE__ */ _jsx(Item, {
             value: "center",
             "aria-label": "Center aligned",
             children: /* @__PURE__ */ _jsx(AlignCenter, {})
           }),
-          /* @__PURE__ */ _jsx(ToggleGroup.Item, {
+          /* @__PURE__ */ _jsx(Item, {
             value: "right",
             "aria-label": "Right aligned",
             children: /* @__PURE__ */ _jsx(AlignRight, {})

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/code/demos/src/ToggleGroupDemo.tsx"],
-  "mappings": ";AAAA,SAASA,aAAaC,WAAWC,kBAAkB;AAEnD,SAASC,OAAOC,aAAaC,QAAQC,cAAc;AAE5C,SAASC,kBAAAA;AACd,SACE,qBAACD,QAAAA;IAAOE,mBAAkB;cACxB,sBAACH,QAAAA;MAAOI,YAAW;MAASC,OAAM;;QAChC,sBAACJ,QAAAA;UAAOG,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,sBAACT,QAAAA;UAAOI,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAK,UAAUD,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,CAAA,IAAMH,MAAMH,IAAI;AACjE,SACE,sBAACP,QAAAA;IACCc,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,qBAACP,OAAAA;QAAMkB,cAAa;QAAKD,gBAAe;QAAWP,MAAME,MAAMF;QAAMS,SAASN;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;;MAIxC,sBAACR,aAAAA;QACCU,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;;QACZC,MAAME,MAAMF;QACZU,qBAAqBR,MAAMH,SAAS,WAAW,KAAOY;;UAEtD,qBAACpB,YAAYqB,MAAI;YAACC,OAAM;YAAOC,cAAW;sBACxC,qBAAC1B,WAAAA,CAAAA,CAAAA;;UAEH,qBAACG,YAAYqB,MAAI;YAACC,OAAM;YAASC,cAAW;sBAC1C,qBAAC3B,aAAAA,CAAAA,CAAAA;;UAEH,qBAACI,YAAYqB,MAAI;YAACC,OAAM;YAAQC,cAAW;sBACzC,qBAACzB,YAAAA,CAAAA,CAAAA;;;;;;AAKX;",
-  "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "paddingHorizontal", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "paddingRight", "htmlFor", "disableDeactivation", "undefined", "Item", "value", "aria-label"]
+  "mappings": ";AAAA,SAASA,aAAaC,WAAWC,kBAAkB;AAEnD,SAASC,OAAOC,QAAQC,aAAaC,QAAQC,cAAc;AAE3D,IAAMC,OAAOJ,OAAOC,YAAYG,MAAM;EACpCC,OAAO;EAEPC,YAAY;IACVD,OAAO;IACPE,iBAAiB;EACnB;AACF,CAAA;AAEO,SAASC,kBAAAA;AACd,SACE,qBAACL,QAAAA;IAAOM,mBAAkB;cACxB,sBAACP,QAAAA;MAAOQ,YAAW;MAASC,OAAM;;QAChC,sBAACR,QAAAA;UAAOO,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,sBAACb,QAAAA;UAAOQ,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAK,UAAUD,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,CAAA,IAAMH,MAAMH,IAAI;AACjE,SACE,sBAACX,QAAAA;IACCkB,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,qBAACZ,OAAAA;QAAMuB,cAAa;QAAKD,gBAAe;QAAWP,MAAME,MAAMF;QAAMS,SAASN;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;;MAIxC,sBAACZ,aAAAA;QACCc,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;;QACZC,MAAME,MAAMF;QACZU,qBAAqBR,MAAMH,SAAS,WAAW,KAAOY;;UAEtD,qBAACrB,MAAAA;YAAKsB,OAAM;YAAOC,cAAW;sBAC5B,qBAAC9B,WAAAA,CAAAA,CAAAA;;UAEH,qBAACO,MAAAA;YAAKsB,OAAM;YAASC,cAAW;sBAC9B,qBAAC/B,aAAAA,CAAAA,CAAAA;;UAEH,qBAACQ,MAAAA;YAAKsB,OAAM;YAAQC,cAAW;sBAC7B,qBAAC7B,YAAAA,CAAAA,CAAAA;;;;;;AAKX;",
+  "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "styled", "ToggleGroup", "XStack", "YStack", "Item", "color", "focusStyle", "backgroundColor", "ToggleGroupDemo", "paddingHorizontal", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "paddingRight", "htmlFor", "disableDeactivation", "undefined", "value", "aria-label"]
 }

package/dist/jsx/ToggleGroupDemo.js

@@ -1,6 +1,13 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+const Item = styled(ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */ jsx(YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$10", children: [
     /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: "$6", children: [
@@ -33,9 +40,9 @@ function ToggleGroupComponent(props) {
             size: props.size,
             disableDeactivation: props.type === "single" ? !0 : void 0,
             children: [
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ jsx(AlignRight, {}) })
+              /* @__PURE__ */ jsx(Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
+              /* @__PURE__ */ jsx(Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
+              /* @__PURE__ */ jsx(Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ jsx(AlignRight, {}) })
             ]
           }
         )

package/dist/jsx/ToggleGroupDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AAEnD,SAAS,OAAO,aAAa,QAAQ,cAAc;AAM3C,SACE,KADF;AAJD,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;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,YAAW,UAAS,OAAM,MAChC;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,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AAEnD,SAAS,OAAO,QAAQ,aAAa,QAAQ,cAAc;AAenD,SACE,KADF;AAbR,MAAM,OAAO,OAAO,YAAY,MAAM;AAAA,EACpC,OAAO;AAAA,EAEP,YAAY;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,EACnB;AACF,CAAC;AAEM,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;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,YAAW,UAAS,OAAM,MAChC;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,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,kCAAC,QAAK,OAAM,QAAO,cAAW,gBAC5B,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,QAAK,OAAM,UAAS,cAAW,kBAC9B,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,QAAK,OAAM,SAAQ,cAAW,iBAC7B,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.mjs

@@ -1,6 +1,13 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+const Item = styled(ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */jsx(YStack, {
     paddingHorizontal: "$4",
@@ -54,15 +61,15 @@ function ToggleGroupComponent(props) {
       type: props.type,
       size: props.size,
       disableDeactivation: props.type === "single" ? !0 : void 0,
-      children: [/* @__PURE__ */jsx(ToggleGroup.Item, {
+      children: [/* @__PURE__ */jsx(Item, {
         value: "left",
         "aria-label": "Left aligned",
         children: /* @__PURE__ */jsx(AlignLeft, {})
-      }), /* @__PURE__ */jsx(ToggleGroup.Item, {
+      }), /* @__PURE__ */jsx(Item, {
         value: "center",
         "aria-label": "Center aligned",
         children: /* @__PURE__ */jsx(AlignCenter, {})
-      }), /* @__PURE__ */jsx(ToggleGroup.Item, {
+      }), /* @__PURE__ */jsx(Item, {
         value: "right",
         "aria-label": "Right aligned",
         children: /* @__PURE__ */jsx(AlignRight, {})

package/dist/jsx/ToggleGroupDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["AlignCenter","AlignLeft","AlignRight","Label","ToggleGroup","XStack","YStack","jsx","jsxs","ToggleGroupDemo","paddingHorizontal","children","alignItems","space","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justifyContent","paddingRight","htmlFor","disableDeactivation","Item","value"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,SAAA,EAAWC,UAAA,QAAkB;AAEnD,SAASC,KAAA,EAAOC,WAAA,EAAaC,MAAA,EAAQC,MAAA,QAAc;AAM3C,SACEC,GAAA,EADFC,IAAA;AAJD,SAASC,gBAAA,EAAkB;EAChC,OACE,eAAAF,GAAA,CAACD,MAAA;IAAOI,iBAAA,EAAkB;IACxBC,QAAA,iBAAAH,IAAA,CAACH,MAAA;MAAOO,UAAA,EAAW;MAASC,KAAA,EAAM;MAChCF,QAAA,kBAAAH,IAAA,CAACF,MAAA;QAAOM,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAJ,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa,GACvE,eAAAV,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa;MAAA,CAC3E,GACA,eAAAT,IAAA,CAACH,MAAA;QAAOO,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAJ,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW,GACrE,eAAAV,GAAA,CAACO,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW;MAAA,CACzE;IAAA,CACF;EAAA,CACF;AAEJ;AAEA,SAASH,qBAAqBI,KAAA,EAI3B;EACD,MAAMC,EAAA,GAAK,UAAUD,KAAA,CAAMF,IAAA,CAAKI,QAAA,CAAS,EAAEC,KAAA,CAAM,CAAC,CAAC,IAAIH,KAAA,CAAMH,IAAI;EACjE,OACE,eAAAP,IAAA,CAACH,MAAA;IACCiB,aAAA,EAAeJ,KAAA,CAAMD,WAAA,KAAgB,eAAe,QAAQ;IAC5DL,UAAA,EAAW;IACXW,cAAA,EAAe;IACfV,KAAA,EAAM;IAENF,QAAA,kBAAAJ,GAAA,CAACJ,KAAA;MAAMqB,YAAA,EAAa;MAAKD,cAAA,EAAe;MAAWP,IAAA,EAAME,KAAA,CAAMF,IAAA;MAAMS,OAAA,EAASN,EAAA;MAC3ER,QAAA,EAAAO,KAAA,CAAMH,IAAA,KAAS,WAAW,WAAW;IAAA,CACxC,GAGA,eAAAP,IAAA,CAACJ,WAAA;MACCa,WAAA,EAAaC,KAAA,CAAMD,WAAA;MACnBE,EAAA;MACAJ,IAAA,EAAMG,KAAA,CAAMH,IAAA;MACZC,IAAA,EAAME,KAAA,CAAMF,IAAA;MACZU,mBAAA,EAAqBR,KAAA,CAAMH,IAAA,KAAS,WAAW,KAAO;MAEtDJ,QAAA,kBAAAJ,GAAA,CAACH,WAAA,CAAYuB,IAAA,EAAZ;QAAiBC,KAAA,EAAM;QAAO,cAAW;QACxCjB,QAAA,iBAAAJ,GAAA,CAACN,SAAA,IAAU;MAAA,CACb,GACA,eAAAM,GAAA,CAACH,WAAA,CAAYuB,IAAA,EAAZ;QAAiBC,KAAA,EAAM;QAAS,cAAW;QAC1CjB,QAAA,iBAAAJ,GAAA,CAACP,WAAA,IAAY;MAAA,CACf,GACA,eAAAO,GAAA,CAACH,WAAA,CAAYuB,IAAA,EAAZ;QAAiBC,KAAA,EAAM;QAAQ,cAAW;QACzCjB,QAAA,iBAAAJ,GAAA,CAACL,UAAA,IAAW;MAAA,CACd;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["AlignCenter","AlignLeft","AlignRight","Label","styled","ToggleGroup","XStack","YStack","jsx","jsxs","Item","color","focusStyle","backgroundColor","ToggleGroupDemo","paddingHorizontal","children","alignItems","space","ToggleGroupComponent","type","size","orientation","props","id","toString","slice","flexDirection","justifyContent","paddingRight","htmlFor","disableDeactivation","value"],"sources":["../../src/ToggleGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,SAAA,EAAWC,UAAA,QAAkB;AAEnD,SAASC,KAAA,EAAOC,MAAA,EAAQC,WAAA,EAAaC,MAAA,EAAQC,MAAA,QAAc;AAenD,SACEC,GAAA,EADFC,IAAA;AAbR,MAAMC,IAAA,GAAON,MAAA,CAAOC,WAAA,CAAYK,IAAA,EAAM;EACpCC,KAAA,EAAO;EAEPC,UAAA,EAAY;IACVD,KAAA,EAAO;IACPE,eAAA,EAAiB;EACnB;AACF,CAAC;AAEM,SAASC,gBAAA,EAAkB;EAChC,OACE,eAAAN,GAAA,CAACD,MAAA;IAAOQ,iBAAA,EAAkB;IACxBC,QAAA,iBAAAP,IAAA,CAACH,MAAA;MAAOW,UAAA,EAAW;MAASC,KAAA,EAAM;MAChCF,QAAA,kBAAAP,IAAA,CAACF,MAAA;QAAOU,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAR,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa,GACvE,eAAAd,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAa;MAAA,CAC3E,GACA,eAAAb,IAAA,CAACH,MAAA;QAAOW,UAAA,EAAW;QAASC,KAAA,EAAM;QAChCF,QAAA,kBAAAR,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAASC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW,GACrE,eAAAd,GAAA,CAACW,oBAAA;UAAqBC,IAAA,EAAK;UAAWC,IAAA,EAAK;UAAKC,WAAA,EAAY;QAAA,CAAW;MAAA,CACzE;IAAA,CACF;EAAA,CACF;AAEJ;AAEA,SAASH,qBAAqBI,KAAA,EAI3B;EACD,MAAMC,EAAA,GAAK,UAAUD,KAAA,CAAMF,IAAA,CAAKI,QAAA,CAAS,EAAEC,KAAA,CAAM,CAAC,CAAC,IAAIH,KAAA,CAAMH,IAAI;EACjE,OACE,eAAAX,IAAA,CAACH,MAAA;IACCqB,aAAA,EAAeJ,KAAA,CAAMD,WAAA,KAAgB,eAAe,QAAQ;IAC5DL,UAAA,EAAW;IACXW,cAAA,EAAe;IACfV,KAAA,EAAM;IAENF,QAAA,kBAAAR,GAAA,CAACL,KAAA;MAAM0B,YAAA,EAAa;MAAKD,cAAA,EAAe;MAAWP,IAAA,EAAME,KAAA,CAAMF,IAAA;MAAMS,OAAA,EAASN,EAAA;MAC3ER,QAAA,EAAAO,KAAA,CAAMH,IAAA,KAAS,WAAW,WAAW;IAAA,CACxC,GAGA,eAAAX,IAAA,CAACJ,WAAA;MACCiB,WAAA,EAAaC,KAAA,CAAMD,WAAA;MACnBE,EAAA;MACAJ,IAAA,EAAMG,KAAA,CAAMH,IAAA;MACZC,IAAA,EAAME,KAAA,CAAMF,IAAA;MACZU,mBAAA,EAAqBR,KAAA,CAAMH,IAAA,KAAS,WAAW,KAAO;MAEtDJ,QAAA,kBAAAR,GAAA,CAACE,IAAA;QAAKsB,KAAA,EAAM;QAAO,cAAW;QAC5BhB,QAAA,iBAAAR,GAAA,CAACP,SAAA,IAAU;MAAA,CACb,GACA,eAAAO,GAAA,CAACE,IAAA;QAAKsB,KAAA,EAAM;QAAS,cAAW;QAC9BhB,QAAA,iBAAAR,GAAA,CAACR,WAAA,IAAY;MAAA,CACf,GACA,eAAAQ,GAAA,CAACE,IAAA;QAAKsB,KAAA,EAAM;QAAQ,cAAW;QAC7BhB,QAAA,iBAAAR,GAAA,CAACN,UAAA,IAAW;MAAA,CACd;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/jsx/ToggleGroupDemo.native.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { Label, styled, ToggleGroup, XStack, YStack } from "tamagui";
+var Item = styled(ToggleGroup.Item, {
+  color: "$color10",
+  focusStyle: {
+    color: "$color1",
+    backgroundColor: "$color12"
+  }
+});
 function ToggleGroupDemo() {
   return /* @__PURE__ */ _jsx(YStack, {
     paddingHorizontal: "$4",
@@ -68,17 +75,17 @@ function ToggleGroupComponent(props) {
         size: props.size,
         disableDeactivation: props.type === "single" ? !0 : void 0,
         children: [
-          /* @__PURE__ */ _jsx(ToggleGroup.Item, {
+          /* @__PURE__ */ _jsx(Item, {
             value: "left",
             "aria-label": "Left aligned",
             children: /* @__PURE__ */ _jsx(AlignLeft, {})
           }),
-          /* @__PURE__ */ _jsx(ToggleGroup.Item, {
+          /* @__PURE__ */ _jsx(Item, {
             value: "center",
             "aria-label": "Center aligned",
             children: /* @__PURE__ */ _jsx(AlignCenter, {})
           }),
-          /* @__PURE__ */ _jsx(ToggleGroup.Item, {
+          /* @__PURE__ */ _jsx(Item, {
             value: "right",
             "aria-label": "Right aligned",
             children: /* @__PURE__ */ _jsx(AlignRight, {})

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/code/demos/src/ToggleGroupDemo.tsx"],
-  "mappings": ";AAAA,SAASA,aAAaC,WAAWC,kBAAkB;AAEnD,SAASC,OAAOC,aAAaC,QAAQC,cAAc;AAE5C,SAASC,kBAAAA;AACd,SACE,qBAACD,QAAAA;IAAOE,mBAAkB;cACxB,sBAACH,QAAAA;MAAOI,YAAW;MAASC,OAAM;;QAChC,sBAACJ,QAAAA;UAAOG,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,sBAACT,QAAAA;UAAOI,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAK,UAAUD,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,CAAA,IAAMH,MAAMH,IAAI;AACjE,SACE,sBAACP,QAAAA;IACCc,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,qBAACP,OAAAA;QAAMkB,cAAa;QAAKD,gBAAe;QAAWP,MAAME,MAAMF;QAAMS,SAASN;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;;MAIxC,sBAACR,aAAAA;QACCU,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;;QACZC,MAAME,MAAMF;QACZU,qBAAqBR,MAAMH,SAAS,WAAW,KAAOY;;UAEtD,qBAACpB,YAAYqB,MAAI;YAACC,OAAM;YAAOC,cAAW;sBACxC,qBAAC1B,WAAAA,CAAAA,CAAAA;;UAEH,qBAACG,YAAYqB,MAAI;YAACC,OAAM;YAASC,cAAW;sBAC1C,qBAAC3B,aAAAA,CAAAA,CAAAA;;UAEH,qBAACI,YAAYqB,MAAI;YAACC,OAAM;YAAQC,cAAW;sBACzC,qBAACzB,YAAAA,CAAAA,CAAAA;;;;;;AAKX;",
-  "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "paddingHorizontal", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "paddingRight", "htmlFor", "disableDeactivation", "undefined", "Item", "value", "aria-label"]
+  "mappings": ";AAAA,SAASA,aAAaC,WAAWC,kBAAkB;AAEnD,SAASC,OAAOC,QAAQC,aAAaC,QAAQC,cAAc;AAE3D,IAAMC,OAAOJ,OAAOC,YAAYG,MAAM;EACpCC,OAAO;EAEPC,YAAY;IACVD,OAAO;IACPE,iBAAiB;EACnB;AACF,CAAA;AAEO,SAASC,kBAAAA;AACd,SACE,qBAACL,QAAAA;IAAOM,mBAAkB;cACxB,sBAACP,QAAAA;MAAOQ,YAAW;MAASC,OAAM;;QAChC,sBAACR,QAAAA;UAAOO,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,sBAACb,QAAAA;UAAOQ,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAK,UAAUD,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,CAAA,IAAMH,MAAMH,IAAI;AACjE,SACE,sBAACX,QAAAA;IACCkB,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,qBAACZ,OAAAA;QAAMuB,cAAa;QAAKD,gBAAe;QAAWP,MAAME,MAAMF;QAAMS,SAASN;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;;MAIxC,sBAACZ,aAAAA;QACCc,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;;QACZC,MAAME,MAAMF;QACZU,qBAAqBR,MAAMH,SAAS,WAAW,KAAOY;;UAEtD,qBAACrB,MAAAA;YAAKsB,OAAM;YAAOC,cAAW;sBAC5B,qBAAC9B,WAAAA,CAAAA,CAAAA;;UAEH,qBAACO,MAAAA;YAAKsB,OAAM;YAASC,cAAW;sBAC9B,qBAAC/B,aAAAA,CAAAA,CAAAA;;UAEH,qBAACQ,MAAAA;YAAKsB,OAAM;YAAQC,cAAW;sBAC7B,qBAAC7B,YAAAA,CAAAA,CAAAA;;;;;;AAKX;",
+  "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "styled", "ToggleGroup", "XStack", "YStack", "Item", "color", "focusStyle", "backgroundColor", "ToggleGroupDemo", "paddingHorizontal", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "paddingRight", "htmlFor", "disableDeactivation", "undefined", "value", "aria-label"]
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.122.8",
+  "version": "1.123.0",
   "sideEffects": [
     "*.css"
   ],
   "source": "demos/src/index.tsx",
-  "types": "./types/index.d.ts",
+  "types": "./src",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
@@ -15,8 +15,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tamagui-build",
-    "watch": "tamagui-build --watch",
+    "build": "tamagui-build --skip-types",
+    "watch": "tamagui-build --skip-types --watch",
     "lint": "biome check src",
     "lint:fix": "biome check --write src",
     "clean": "tamagui-build clean",
@@ -30,7 +30,7 @@
         "import": "./dist/esm/index.native.js",
         "require": "./dist/cjs/index.native.js"
       },
-      "types": "./types/index.d.ts",
+      "types": "./src/index.tsx",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/cjs/index.native.js"
@@ -46,29 +46,29 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.122.8",
-    "@tamagui/button": "1.122.8",
-    "@tamagui/config": "1.122.8",
-    "@tamagui/core": "1.122.8",
-    "@tamagui/list-item": "1.122.8",
-    "@tamagui/logo": "1.122.8",
-    "@tamagui/lucide-icons": "1.122.8",
-    "@tamagui/menu": "1.122.8",
-    "@tamagui/popover": "1.122.8",
-    "@tamagui/progress": "1.122.8",
-    "@tamagui/radio-group": "1.122.8",
-    "@tamagui/select": "1.122.8",
-    "@tamagui/sheet": "1.122.8",
-    "@tamagui/slider": "1.122.8",
-    "@tamagui/stacks": "1.122.8",
-    "@tamagui/toast": "1.122.8",
-    "tamagui": "1.122.8"
+    "@tamagui/avatar": "1.123.0",
+    "@tamagui/button": "1.123.0",
+    "@tamagui/config": "1.123.0",
+    "@tamagui/core": "1.123.0",
+    "@tamagui/list-item": "1.123.0",
+    "@tamagui/logo": "1.123.0",
+    "@tamagui/lucide-icons": "1.123.0",
+    "@tamagui/menu": "1.123.0",
+    "@tamagui/popover": "1.123.0",
+    "@tamagui/progress": "1.123.0",
+    "@tamagui/radio-group": "1.123.0",
+    "@tamagui/select": "1.123.0",
+    "@tamagui/sheet": "1.123.0",
+    "@tamagui/slider": "1.123.0",
+    "@tamagui/stacks": "1.123.0",
+    "@tamagui/toast": "1.123.0",
+    "tamagui": "1.123.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.122.8",
+    "@tamagui/build": "1.123.0",
     "react": "*"
   },
   "publishConfig": {

package/src/ToggleGroupDemo.tsx

@@ -1,6 +1,15 @@
 import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'
 import type { SizeTokens } from 'tamagui'
-import { Label, ToggleGroup, XStack, YStack } from 'tamagui'
+import { Label, styled, ToggleGroup, XStack, YStack } from 'tamagui'
+
+const Item = styled(ToggleGroup.Item, {
+  color: '$color10',
+
+  focusStyle: {
+    color: '$color1',
+    backgroundColor: '$color12',
+  },
+})
 
 export function ToggleGroupDemo() {
   return (
@@ -44,15 +53,15 @@ function ToggleGroupComponent(props: {
         size={props.size}
         disableDeactivation={props.type === 'single' ? true : undefined}
       >
-        <ToggleGroup.Item value="left" aria-label="Left aligned">
+        <Item value="left" aria-label="Left aligned">
           <AlignLeft />
-        </ToggleGroup.Item>
-        <ToggleGroup.Item value="center" aria-label="Center aligned">
+        </Item>
+        <Item value="center" aria-label="Center aligned">
           <AlignCenter />
-        </ToggleGroup.Item>
-        <ToggleGroup.Item value="right" aria-label="Right aligned">
+        </Item>
+        <Item value="right" aria-label="Right aligned">
           <AlignRight />
-        </ToggleGroup.Item>
+        </Item>
       </ToggleGroup>
     </XStack>
   )

package/types/AccordionDemo.d.ts

@@ -1,2 +0,0 @@
-export declare function AccordionDemo(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AccordionDemo.d.ts.map

package/types/AccordionDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionDemo.d.ts","sourceRoot":"","sources":["../src/AccordionDemo.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,4CAsD5B"}

package/types/AddThemeDemo.d.ts

@@ -1,2 +0,0 @@
-export declare function AddThemeDemo(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AddThemeDemo.d.ts.map

package/types/AddThemeDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AddThemeDemo.d.ts","sourceRoot":"","sources":["../src/AddThemeDemo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,4CA6B3B"}

package/types/AlertDialogDemo.d.ts

@@ -1,2 +0,0 @@
-export declare function AlertDialogDemo(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AlertDialogDemo.d.ts.map

package/types/AlertDialogDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlertDialogDemo.d.ts","sourceRoot":"","sources":["../src/AlertDialogDemo.tsx"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,4CAqD9B"}

package/types/AnimationsDemo.d.ts

@@ -1,21 +0,0 @@
-export declare function AnimationsDemo(props: any): import("react/jsx-runtime").JSX.Element;
-export declare const positions: ({
-    x: number;
-    y: number;
-    scale: number;
-    rotate: string;
-    hoverStyle?: undefined;
-    pressStyle?: undefined;
-} | {
-    x: number;
-    y: number;
-    scale: number;
-    rotate: string;
-    hoverStyle: {
-        scale: number;
-    };
-    pressStyle: {
-        scale: number;
-    };
-})[];
-//# sourceMappingURL=AnimationsDemo.d.ts.map

package/types/AnimationsDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnimationsDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsDemo.tsx"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAAC,KAAK,KAAA,2CA+CnC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;IA+BrB,CAAA"}

package/types/AnimationsEnterDemo.d.ts

@@ -1,2 +0,0 @@
-export declare function AnimationsEnterDemo(props: any): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AnimationsEnterDemo.d.ts.map

package/types/AnimationsEnterDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnimationsEnterDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsEnterDemo.tsx"],"names":[],"mappings":"AAOA,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,2CAsC7C"}

package/types/AnimationsHoverDemo.d.ts

@@ -1,2 +0,0 @@
-export declare function AnimationsHoverDemo(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AnimationsHoverDemo.d.ts.map

package/types/AnimationsHoverDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnimationsHoverDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsHoverDemo.tsx"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,4CAmBlC"}