@tamagui/demos 1.95.3 → 1.97.0

package/dist/jsx/AccordionDemo.js

@@ -4,18 +4,22 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AccordionDemo() {
   return /* @__PURE__ */ jsxs(Accordion, { overflow: "hidden", width: "$20", type: "multiple", children: [
     /* @__PURE__ */ jsxs(Accordion.Item, { value: "a1", children: [
-      /* @__PURE__ */ jsx(Accordion.Trigger, { flexDirection: "row", justifyContent: "space-between", children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Accordion.Trigger, { flexDirection: "row", justifyContent: "space-between", children: ({
+        open
+      }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Paragraph, { children: "1. Take a cold shower" }),
         /* @__PURE__ */ jsx(Square, { animation: "quick", rotate: open ? "180deg" : "0deg", children: /* @__PURE__ */ jsx(ChevronDown, { size: "$1" }) })
       ] }) }),
-      /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) })
+      /* @__PURE__ */ jsx(Accordion.HeightAnimator, { animation: "medium", children: /* @__PURE__ */ jsx(Accordion.Content, { animation: "medium", exitStyle: { opacity: 0 }, children: /* @__PURE__ */ jsx(Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) }) })
     ] }),
     /* @__PURE__ */ jsxs(Accordion.Item, { value: "a2", children: [
-      /* @__PURE__ */ jsx(Accordion.Trigger, { flexDirection: "row", justifyContent: "space-between", children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Accordion.Trigger, { flexDirection: "row", justifyContent: "space-between", children: ({
+        open
+      }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Paragraph, { children: "2. Eat 4 eggs" }),
         /* @__PURE__ */ jsx(Square, { animation: "quick", rotate: open ? "180deg" : "0deg", children: /* @__PURE__ */ jsx(ChevronDown, { size: "$1" }) })
       ] }) }),
-      /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals." }) })
+      /* @__PURE__ */ jsx(Accordion.HeightAnimator, { animation: "medium", children: /* @__PURE__ */ jsx(Accordion.Content, { animation: "medium", exitStyle: { opacity: 0 }, children: /* @__PURE__ */ jsx(Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals." }) }) })
     ] })
   ] });
 }

package/dist/jsx/AccordionDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AccordionDemo.tsx"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,WAAW,cAAc;AAQjC,mBACE,KADF;AANL,SAAS,gBAAgB;AAC9B,SACE,qBAAC,aAAU,UAAS,UAAS,OAAM,OAAM,MAAK,YAC5C;AAAA,yBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EAAkB,eAAc,OAAM,gBAAe,iBACnD,WAAC,EAAE,KAAK,MACP,iCACE;AAAA,4BAAC,aAAU,mCAAqB;AAAA,QAChC,oBAAC,UAAO,WAAU,SAAQ,QAAQ,OAAO,WAAW,QAClD,8BAAC,eAAY,MAAK,MAAK,GACzB;AAAA,SACF,GAEJ;AAAA,MACA,oBAAC,UAAU,SAAV,EACC,8BAAC,aAAU,wJAGX,GACF;AAAA,OACF;AAAA,IAEA,qBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EAAkB,eAAc,OAAM,gBAAe,iBACnD,WAAC,EAAE,KAAK,MACP,iCACE;AAAA,4BAAC,aAAU,2BAAa;AAAA,QACxB,oBAAC,UAAO,WAAU,SAAQ,QAAQ,OAAO,WAAW,QAClD,8BAAC,eAAY,MAAK,MAAK,GACzB;AAAA,SACF,GAEJ;AAAA,MACA,oBAAC,UAAU,SAAV,EACC,8BAAC,aAAU,qJAGX,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,WAAW,cAAc;AAYjC,mBACE,KADF;AAVL,SAAS,gBAAgB;AAC9B,SACE,qBAAC,aAAU,UAAS,UAAS,OAAM,OAAM,MAAK,YAC5C;AAAA,yBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EAAkB,eAAc,OAAM,gBAAe,iBACnD,WAAC;AAAA,QACA;AAAA,MACF,MAGE,iCACE;AAAA,4BAAC,aAAU,mCAAqB;AAAA,QAChC,oBAAC,UAAO,WAAU,SAAQ,QAAQ,OAAO,WAAW,QAClD,8BAAC,eAAY,MAAK,MAAK,GACzB;AAAA,SACF,GAEJ;AAAA,MACA,oBAAC,UAAU,gBAAV,EAAyB,WAAU,UAClC,8BAAC,UAAU,SAAV,EAAkB,WAAU,UAAS,WAAW,EAAE,SAAS,EAAE,GAC5D,8BAAC,aAAU,wJAGX,GACF,GACF;AAAA,OACF;AAAA,IAEA,qBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EAAkB,eAAc,OAAM,gBAAe,iBACnD,WAAC;AAAA,QACA;AAAA,MACF,MAGE,iCACE;AAAA,4BAAC,aAAU,2BAAa;AAAA,QACxB,oBAAC,UAAO,WAAU,SAAQ,QAAQ,OAAO,WAAW,QAClD,8BAAC,eAAY,MAAK,MAAK,GACzB;AAAA,SACF,GAEJ;AAAA,MACA,oBAAC,UAAU,gBAAV,EAAyB,WAAU,UAClC,8BAAC,UAAU,SAAV,EAAkB,WAAU,UAAS,WAAW,EAAE,SAAS,EAAE,GAC5D,8BAAC,aAAU,qJAGX,GACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/jsx/AccordionDemo.mjs

@@ -24,9 +24,16 @@ function AccordionDemo() {
             })
           })]
         })
-      }), /* @__PURE__ */jsx(Accordion.Content, {
-        children: /* @__PURE__ */jsx(Paragraph, {
-          children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue."
+      }), /* @__PURE__ */jsx(Accordion.HeightAnimator, {
+        animation: "medium",
+        children: /* @__PURE__ */jsx(Accordion.Content, {
+          animation: "medium",
+          exitStyle: {
+            opacity: 0
+          },
+          children: /* @__PURE__ */jsx(Paragraph, {
+            children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue."
+          })
         })
       })]
     }), /* @__PURE__ */jsxs(Accordion.Item, {
@@ -47,9 +54,16 @@ function AccordionDemo() {
             })
           })]
         })
-      }), /* @__PURE__ */jsx(Accordion.Content, {
-        children: /* @__PURE__ */jsx(Paragraph, {
-          children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals."
+      }), /* @__PURE__ */jsx(Accordion.HeightAnimator, {
+        animation: "medium",
+        children: /* @__PURE__ */jsx(Accordion.Content, {
+          animation: "medium",
+          exitStyle: {
+            opacity: 0
+          },
+          children: /* @__PURE__ */jsx(Paragraph, {
+            children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals."
+          })
         })
       })]
     })]

package/dist/jsx/AccordionDemo.native.js

@@ -31,9 +31,16 @@ function AccordionDemo() {
               });
             }
           }),
-          /* @__PURE__ */ _jsx(Accordion.Content, {
-            children: /* @__PURE__ */ _jsx(Paragraph, {
-              children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue."
+          /* @__PURE__ */ _jsx(Accordion.HeightAnimator, {
+            animation: "medium",
+            children: /* @__PURE__ */ _jsx(Accordion.Content, {
+              animation: "medium",
+              exitStyle: {
+                opacity: 0
+              },
+              children: /* @__PURE__ */ _jsx(Paragraph, {
+                children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue."
+              })
             })
           })
         ]
@@ -62,9 +69,16 @@ function AccordionDemo() {
               });
             }
           }),
-          /* @__PURE__ */ _jsx(Accordion.Content, {
-            children: /* @__PURE__ */ _jsx(Paragraph, {
-              children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals."
+          /* @__PURE__ */ _jsx(Accordion.HeightAnimator, {
+            animation: "medium",
+            children: /* @__PURE__ */ _jsx(Accordion.Content, {
+              animation: "medium",
+              exitStyle: {
+                opacity: 0
+              },
+              children: /* @__PURE__ */ _jsx(Paragraph, {
+                children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals."
+              })
             })
           })
         ]

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/AccordionDemo.tsx"],
-  "mappings": ";AAAA,SAASA,mBAAmB;AAC5B,SAASC,WAAWC,WAAWC,cAAc;AAEtC,SAASC,gBAAAA;AACd,SACE,sBAACH,WAAAA;IAAUI,UAAS;IAASC,OAAM;IAAMC,MAAK;;MAC5C,sBAACN,UAAUO,MAAI;QAACC,OAAM;;UACpB,qBAACR,UAAUS,SAAO;YAACC,eAAc;YAAMC,gBAAe;sBACnD,SAAA,OAAA;kBAAGC,OAAAA,MAAAA;qBACF,sBAAA,WAAA;;kBACE,qBAACX,WAAAA;8BAAU;;kBACX,qBAACC,QAAAA;oBAAOW,WAAU;oBAAQC,QAAQF,OAAO,WAAW;8BAClD,qBAACb,aAAAA;sBAAYgB,MAAK;;;;;;;UAK1B,qBAACf,UAAUgB,SAAO;sBAChB,qBAACf,WAAAA;wBAAU;;;;;MAOf,sBAACD,UAAUO,MAAI;QAACC,OAAM;;UACpB,qBAACR,UAAUS,SAAO;YAACC,eAAc;YAAMC,gBAAe;sBACnD,SAAA,OAAA;kBAAGC,OAAAA,MAAAA;qBACF,sBAAA,WAAA;;kBACE,qBAACX,WAAAA;8BAAU;;kBACX,qBAACC,QAAAA;oBAAOW,WAAU;oBAAQC,QAAQF,OAAO,WAAW;8BAClD,qBAACb,aAAAA;sBAAYgB,MAAK;;;;;;;UAK1B,qBAACf,UAAUgB,SAAO;sBAChB,qBAACf,WAAAA;wBAAU;;;;;;;AAQrB;",
-  "names": ["ChevronDown", "Accordion", "Paragraph", "Square", "AccordionDemo", "overflow", "width", "type", "Item", "value", "Trigger", "flexDirection", "justifyContent", "open", "animation", "rotate", "size", "Content"]
+  "mappings": ";AAAA,SAASA,mBAAmB;AAC5B,SAASC,WAAWC,WAAWC,cAAc;AAEtC,SAASC,gBAAAA;AACd,SACE,sBAACH,WAAAA;IAAUI,UAAS;IAASC,OAAM;IAAMC,MAAK;;MAC5C,sBAACN,UAAUO,MAAI;QAACC,OAAM;;UACpB,qBAACR,UAAUS,SAAO;YAACC,eAAc;YAAMC,gBAAe;sBACnD,SAAA,OAAA;kBACCC,OAAAA,MAAAA;qBAIA,sBAAA,WAAA;;kBACE,qBAACX,WAAAA;8BAAU;;kBACX,qBAACC,QAAAA;oBAAOW,WAAU;oBAAQC,QAAQF,OAAO,WAAW;8BAClD,qBAACb,aAAAA;sBAAYgB,MAAK;;;;;;;UAK1B,qBAACf,UAAUgB,gBAAc;YAACH,WAAU;sBAClC,qBAACb,UAAUiB,SAAO;cAACJ,WAAU;cAASK,WAAW;gBAAEC,SAAS;cAAE;wBAC5D,qBAAClB,WAAAA;0BAAU;;;;;;MAQjB,sBAACD,UAAUO,MAAI;QAACC,OAAM;;UACpB,qBAACR,UAAUS,SAAO;YAACC,eAAc;YAAMC,gBAAe;sBACnD,SAAA,OAAA;kBACCC,OAAAA,MAAAA;qBAIA,sBAAA,WAAA;;kBACE,qBAACX,WAAAA;8BAAU;;kBACX,qBAACC,QAAAA;oBAAOW,WAAU;oBAAQC,QAAQF,OAAO,WAAW;8BAClD,qBAACb,aAAAA;sBAAYgB,MAAK;;;;;;;UAK1B,qBAACf,UAAUgB,gBAAc;YAACH,WAAU;sBAClC,qBAACb,UAAUiB,SAAO;cAACJ,WAAU;cAASK,WAAW;gBAAEC,SAAS;cAAE;wBAC5D,qBAAClB,WAAAA;0BAAU;;;;;;;;AASvB;",
+  "names": ["ChevronDown", "Accordion", "Paragraph", "Square", "AccordionDemo", "overflow", "width", "type", "Item", "value", "Trigger", "flexDirection", "justifyContent", "open", "animation", "rotate", "size", "HeightAnimator", "Content", "exitStyle", "opacity"]
 }

package/dist/jsx/NewInputsDemo.js

@@ -0,0 +1,32 @@
+import { Button, XStack, YStack } from "tamagui";
+import { Input, TextArea } from "@tamagui/input";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NewInputsDemo() {
+  return /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      width: 200,
+      minHeight: 250,
+      overflow: "hidden",
+      space: "$2",
+      margin: "$3",
+      padding: "$2",
+      children: [
+        /* @__PURE__ */ jsx(InputDemo, { size: "$2" }),
+        /* @__PURE__ */ jsx(InputDemo, { size: "$3" }),
+        /* @__PURE__ */ jsx(InputDemo, { size: "$4" }),
+        /* @__PURE__ */ jsx(TextArea, { placeholder: "Enter your details..." })
+      ]
+    }
+  );
+}
+function InputDemo(props) {
+  return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(Input, { flex: 1, size: props.size, placeholder: `Size ${props.size}...` }),
+    /* @__PURE__ */ jsx(Button, { size: props.size, children: "Go" })
+  ] });
+}
+export {
+  NewInputsDemo
+};
+//# sourceMappingURL=NewInputsDemo.js.map

package/dist/jsx/NewInputsDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/NewInputsDemo.tsx"],
+  "mappings": "AACA,SAAS,QAAQ,QAAQ,cAAc;AACvC,SAAS,OAAO,gBAAgB;AAI5B,SAQE,KARF;AAFG,SAAS,gBAAgB;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAS;AAAA,MACT,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MAER;AAAA,4BAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,YAAS,aAAY,yBAAwB;AAAA;AAAA;AAAA,EAChD;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,IAAI,OAAO;AAAA,IACxE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
+  "names": []
+}

package/dist/jsx/NewInputsDemo.mjs

@@ -0,0 +1,37 @@
+import { Button, XStack, YStack } from "tamagui";
+import { Input, TextArea } from "@tamagui/input";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NewInputsDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    width: 200,
+    minHeight: 250,
+    overflow: "hidden",
+    space: "$2",
+    margin: "$3",
+    padding: "$2",
+    children: [/* @__PURE__ */jsx(InputDemo, {
+      size: "$2"
+    }), /* @__PURE__ */jsx(InputDemo, {
+      size: "$3"
+    }), /* @__PURE__ */jsx(InputDemo, {
+      size: "$4"
+    }), /* @__PURE__ */jsx(TextArea, {
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    space: "$2",
+    children: [/* @__PURE__ */jsx(Input, {
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */jsx(Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}
+export { NewInputsDemo };

package/dist/jsx/NewInputsDemo.native.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, XStack, YStack } from "tamagui";
+import { Input, TextArea } from "@tamagui/input";
+function NewInputsDemo() {
+  return /* @__PURE__ */ _jsxs(YStack, {
+    width: 200,
+    minHeight: 250,
+    overflow: "hidden",
+    space: "$2",
+    margin: "$3",
+    padding: "$2",
+    children: [
+      /* @__PURE__ */ _jsx(InputDemo, {
+        size: "$2"
+      }),
+      /* @__PURE__ */ _jsx(InputDemo, {
+        size: "$3"
+      }),
+      /* @__PURE__ */ _jsx(InputDemo, {
+        size: "$4"
+      }),
+      /* @__PURE__ */ _jsx(TextArea, {
+        placeholder: "Enter your details..."
+      })
+    ]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */ _jsxs(XStack, {
+    alignItems: "center",
+    space: "$2",
+    children: [
+      /* @__PURE__ */ _jsx(Input, {
+        flex: 1,
+        size: props.size,
+        placeholder: "Size ".concat(props.size, "...")
+      }),
+      /* @__PURE__ */ _jsx(Button, {
+        size: props.size,
+        children: "Go"
+      })
+    ]
+  });
+}
+export {
+  NewInputsDemo
+};
+//# sourceMappingURL=NewInputsDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/packages/demos/src/NewInputsDemo.tsx"],
+  "mappings": ";AACA,SAASA,QAAQC,QAAQC,cAAc;AACvC,SAASC,OAAOC,gBAAgB;AAEzB,SAASC,gBAAAA;AACd,SACE,sBAACH,QAAAA;IACCI,OAAO;IACPC,WAAW;IACXC,UAAS;IACTC,OAAM;IACNC,QAAO;IACPC,SAAQ;;MAER,qBAACC,WAAAA;QAAUC,MAAK;;MAChB,qBAACD,WAAAA;QAAUC,MAAK;;MAChB,qBAACD,WAAAA;QAAUC,MAAK;;MAChB,qBAACT,UAAAA;QAASU,aAAY;;;;AAG5B;AAEA,SAASF,UAAUG,OAA2B;AAC5C,SACE,sBAACd,QAAAA;IAAOe,YAAW;IAASP,OAAM;;MAChC,qBAACN,OAAAA;QAAMc,MAAM;QAAGJ,MAAME,MAAMF;QAAMC,aAAc,QAAkB,OAAXC,MAAMF,MAAK,KAAA;;MAClE,qBAACb,QAAAA;QAAOa,MAAME,MAAMF;kBAAM;;;;AAGhC;",
+  "names": ["Button", "XStack", "YStack", "Input", "TextArea", "NewInputsDemo", "width", "minHeight", "overflow", "space", "margin", "padding", "InputDemo", "size", "placeholder", "props", "alignItems", "flex"]
+}

package/dist/jsx/RadioGroupHeadlessDemo.js

@@ -0,0 +1,102 @@
+import {
+  useRadioGroup,
+  useRadioGroupItem,
+  useRadioGroupItemIndicator
+} from "@tamagui/radio-headless";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { createContext } from "react";
+import { StyleSheet, View, Pressable, Text } from "react-native-web";
+import { isWeb, useTheme } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RadioGroupContext = createContext({}), RadioGroupItemContext = createContext({
+  checked: !1,
+  disabled: !1
+});
+function RadioGroupHeadlessDemo() {
+  const { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(RovingFocusGroup, { ...rovingFocusGroupAttrs, children: /* @__PURE__ */ jsxs(View, { style: styles.radioGroup, ...frameAttrs, children: [
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: "2", id: "2", label: "First Value" }),
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: "3", id: "3", label: "Second Value" }),
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: "4", id: "4", label: "Third Value" })
+  ] }) }) });
+}
+function RadioGroupItem(props) {
+  const theme = useTheme(), { value, id, label } = props, {
+    providerValue,
+    native,
+    bubbleInput,
+    rovingFocusGroupAttrs,
+    frameAttrs,
+    isFormControl,
+    checked
+  } = useRadioGroupItem({
+    radioGroupContext: RadioGroupContext,
+    value,
+    id
+  });
+  return /* @__PURE__ */ jsx(RadioGroupItemContext.Provider, { value: providerValue, children: isWeb && native ? bubbleInput : /* @__PURE__ */ jsxs(View, { style: styles.radioGroupItemContainer, children: [
+    /* @__PURE__ */ jsx(RovingFocusGroup.Item, { ...rovingFocusGroupAttrs, children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: {
+          ...styles.radioGroupItem,
+          borderColor: theme.borderColor.get(),
+          ...checked ? { borderWidth: 4 } : { backgroundColor: theme.background.get() }
+        },
+        ...frameAttrs,
+        onFocus: frameAttrs.onFocus,
+        children: /* @__PURE__ */ jsx(RadioGroupItemIndicator, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Text, { style: { color: theme.color.get() }, children: label }),
+    isFormControl && bubbleInput
+  ] }) });
+}
+function RadioGroupItemIndicator() {
+  const theme = useTheme(), params = useRadioGroupItemIndicator({
+    radioGroupItemContext: RadioGroupItemContext,
+    disabled: !1
+  });
+  return params.checked ? /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        ...styles.radioGroupItemIndicator,
+        backgroundColor: theme.color.get()
+      },
+      ...params
+    }
+  ) : null;
+}
+const styles = StyleSheet.create({
+  radioGroup: {
+    flexDirection: "column",
+    gap: 20,
+    alignItems: "flex-start"
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  radioGroupItemIndicator: {
+    width: "35%",
+    height: "35%"
+  },
+  radioGroupItemContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  }
+});
+export {
+  RadioGroupHeadlessDemo
+};
+//# sourceMappingURL=RadioGroupHeadlessDemo.js.map

package/dist/jsx/RadioGroupHeadlessDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/RadioGroupHeadlessDemo.tsx"],
+  "mappings": "AAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,YAAY,MAAM,WAAW,YAAY;AAClD,SAAS,OAAO,gBAAgB;AAiBxB,SACE,KADF;AAfR,MAAM,oBAAoB,cAAsC,CAAC,CAAC,GAC5D,wBAAwB,cAA0C;AAAA,EACtE,SAAS;AAAA,EACT,UAAU;AACZ,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,EAAE,eAAe,YAAY,sBAAsB,IAAI,cAAc;AAAA,IACzE,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,EAChB,CAAC;AACD,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,eACjC,8BAAC,oBAAkB,GAAG,uBACpB,+BAAC,QAAK,OAAO,OAAO,YAAa,GAAG,YAClC;AAAA,wBAAC,kBAAe,OAAM,KAAI,IAAG,KAAI,OAAM,eAAc;AAAA,IACrD,oBAAC,kBAAe,OAAM,KAAI,IAAG,KAAI,OAAM,gBAAe;AAAA,IACtD,oBAAC,kBAAe,OAAM,KAAI,IAAG,KAAI,OAAM,eAAc;AAAA,KACvD,GACF,GACF;AAEJ;AAEA,SAAS,eAAe,OAIrB;AACD,QAAM,QAAQ,SAAS,GACjB,EAAE,OAAO,IAAI,MAAM,IAAI,OACvB;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAAA,IACpB,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,eACpC,mBAAS,SACR,cAEA,qBAAC,QAAK,OAAO,OAAO,yBAClB;AAAA,wBAAC,iBAAiB,MAAjB,EAAuB,GAAG,uBACzB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,GAAG,OAAO;AAAA,UACL,aAAa,MAAM,YAAY,IAAI;AAAA,UACxC,GAAI,UACA,EAAE,aAAa,EAAE,IACjB,EAAE,iBAAiB,MAAM,WAAW,IAAI,EAAE;AAAA,QAChD;AAAA,QACC,GAAG;AAAA,QACJ,SAAS,WAAW;AAAA,QAEpB,8BAAC,2BAAwB;AAAA;AAAA,IAC3B,GACF;AAAA,IACA,oBAAC,QAAK,OAAO,EAAE,OAAO,MAAM,MAAM,IAAI,EAAE,GAAI,iBAAM;AAAA,IACjD,iBAAiB;AAAA,KACpB,GAEJ;AAEJ;AAEA,SAAS,0BAA0B;AACjC,QAAM,QAAQ,SAAS,GACjB,SAAS,2BAA2B;AAAA,IACxC,uBAAuB;AAAA,IACvB,UAAU;AAAA,EACZ,CAAC;AACD,SAAI,OAAO,UAEP;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,iBAAiB,MAAM,MAAM,IAAI;AAAA,MACnC;AAAA,MACC,GAAG;AAAA;AAAA,EACN,IAGG;AACT;AAEA,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/jsx/RadioGroupHeadlessDemo.mjs

@@ -0,0 +1,133 @@
+import { useRadioGroup, useRadioGroupItem, useRadioGroupItemIndicator } from "@tamagui/radio-headless";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { createContext } from "react";
+import { StyleSheet, View, Pressable, Text } from "react-native-web";
+import { isWeb, useTheme } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RadioGroupContext = createContext({}),
+  RadioGroupItemContext = createContext({
+    checked: !1,
+    disabled: !1
+  });
+function RadioGroupHeadlessDemo() {
+  const {
+    providerValue,
+    frameAttrs,
+    rovingFocusGroupAttrs
+  } = useRadioGroup({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */jsx(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */jsx(RovingFocusGroup, {
+      ...rovingFocusGroupAttrs,
+      children: /* @__PURE__ */jsxs(View, {
+        style: styles.radioGroup,
+        ...frameAttrs,
+        children: [/* @__PURE__ */jsx(RadioGroupItem, {
+          value: "2",
+          id: "2",
+          label: "First Value"
+        }), /* @__PURE__ */jsx(RadioGroupItem, {
+          value: "3",
+          id: "3",
+          label: "Second Value"
+        }), /* @__PURE__ */jsx(RadioGroupItem, {
+          value: "4",
+          id: "4",
+          label: "Third Value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItem(props) {
+  const theme = useTheme(),
+    {
+      value,
+      id,
+      label
+    } = props,
+    {
+      providerValue,
+      native,
+      bubbleInput,
+      rovingFocusGroupAttrs,
+      frameAttrs,
+      isFormControl,
+      checked
+    } = useRadioGroupItem({
+      radioGroupContext: RadioGroupContext,
+      value,
+      id
+    });
+  return /* @__PURE__ */jsx(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: isWeb && native ? bubbleInput : /* @__PURE__ */jsxs(View, {
+      style: styles.radioGroupItemContainer,
+      children: [/* @__PURE__ */jsx(RovingFocusGroup.Item, {
+        ...rovingFocusGroupAttrs,
+        children: /* @__PURE__ */jsx(Pressable, {
+          style: {
+            ...styles.radioGroupItem,
+            borderColor: theme.borderColor.get(),
+            ...(checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: theme.background.get()
+            })
+          },
+          ...frameAttrs,
+          onFocus: frameAttrs.onFocus,
+          children: /* @__PURE__ */jsx(RadioGroupItemIndicator, {})
+        })
+      }), /* @__PURE__ */jsx(Text, {
+        style: {
+          color: theme.color.get()
+        },
+        children: label
+      }), isFormControl && bubbleInput]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  const theme = useTheme(),
+    params = useRadioGroupItemIndicator({
+      radioGroupItemContext: RadioGroupItemContext,
+      disabled: !1
+    });
+  return params.checked ? /* @__PURE__ */jsx(View, {
+    style: {
+      ...styles.radioGroupItemIndicator,
+      backgroundColor: theme.color.get()
+    },
+    ...params
+  }) : null;
+}
+const styles = StyleSheet.create({
+  radioGroup: {
+    flexDirection: "column",
+    gap: 20,
+    alignItems: "flex-start"
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  radioGroupItemIndicator: {
+    width: "35%",
+    height: "35%"
+  },
+  radioGroupItemContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  }
+});
+export { RadioGroupHeadlessDemo };

package/dist/jsx/RadioGroupHeadlessDemo.native.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRadioGroup, useRadioGroupItem, useRadioGroupItemIndicator } from "@tamagui/radio-headless";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { createContext } from "react";
+import { StyleSheet, View, Pressable, Text } from "react-native";
+import { isWeb, useTheme } from "tamagui";
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
+var RadioGroupContext = /* @__PURE__ */ createContext({}), RadioGroupItemContext = /* @__PURE__ */ createContext({
+  checked: !1,
+  disabled: !1
+});
+function RadioGroupHeadlessDemo() {
+  var _useRadioGroup = useRadioGroup({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  }), providerValue = _useRadioGroup.providerValue, frameAttrs = _useRadioGroup.frameAttrs, rovingFocusGroupAttrs = _useRadioGroup.rovingFocusGroupAttrs;
+  return /* @__PURE__ */ _jsx(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */ _jsx(RovingFocusGroup, _object_spread_props(_object_spread({}, rovingFocusGroupAttrs), {
+      children: /* @__PURE__ */ _jsxs(View, _object_spread_props(_object_spread({
+        style: styles.radioGroup
+      }, frameAttrs), {
+        children: [
+          /* @__PURE__ */ _jsx(RadioGroupItem, {
+            value: "2",
+            id: "2",
+            label: "First Value"
+          }),
+          /* @__PURE__ */ _jsx(RadioGroupItem, {
+            value: "3",
+            id: "3",
+            label: "Second Value"
+          }),
+          /* @__PURE__ */ _jsx(RadioGroupItem, {
+            value: "4",
+            id: "4",
+            label: "Third Value"
+          })
+        ]
+      }))
+    }))
+  });
+}
+function RadioGroupItem(props) {
+  var theme = useTheme(), value = props.value, id = props.id, label = props.label, _useRadioGroupItem = useRadioGroupItem({
+    radioGroupContext: RadioGroupContext,
+    value,
+    id
+  }), providerValue = _useRadioGroupItem.providerValue, native = _useRadioGroupItem.native, bubbleInput = _useRadioGroupItem.bubbleInput, rovingFocusGroupAttrs = _useRadioGroupItem.rovingFocusGroupAttrs, frameAttrs = _useRadioGroupItem.frameAttrs, isFormControl = _useRadioGroupItem.isFormControl, checked = _useRadioGroupItem.checked;
+  return /* @__PURE__ */ _jsx(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: isWeb && native ? bubbleInput : /* @__PURE__ */ _jsxs(View, {
+      style: styles.radioGroupItemContainer,
+      children: [
+        /* @__PURE__ */ _jsx(RovingFocusGroup.Item, _object_spread_props(_object_spread({}, rovingFocusGroupAttrs), {
+          children: /* @__PURE__ */ _jsx(Pressable, _object_spread_props(_object_spread({
+            style: _object_spread({}, styles.radioGroupItem, {
+              borderColor: theme.borderColor.get()
+            }, checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: theme.background.get()
+            })
+          }, frameAttrs), {
+            onFocus: frameAttrs.onFocus,
+            children: /* @__PURE__ */ _jsx(RadioGroupItemIndicator, {})
+          }))
+        })),
+        /* @__PURE__ */ _jsx(Text, {
+          style: {
+            color: theme.color.get()
+          },
+          children: label
+        }),
+        isFormControl && bubbleInput
+      ]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  var theme = useTheme(), params = useRadioGroupItemIndicator({
+    radioGroupItemContext: RadioGroupItemContext,
+    disabled: !1
+  });
+  return params.checked ? /* @__PURE__ */ _jsx(View, _object_spread({
+    style: _object_spread_props(_object_spread({}, styles.radioGroupItemIndicator), {
+      backgroundColor: theme.color.get()
+    })
+  }, params)) : null;
+}
+var styles = StyleSheet.create({
+  radioGroup: {
+    flexDirection: "column",
+    gap: 20,
+    alignItems: "flex-start"
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  radioGroupItemIndicator: {
+    width: "35%",
+    height: "35%"
+  },
+  radioGroupItemContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  }
+});
+export {
+  RadioGroupHeadlessDemo
+};
+//# sourceMappingURL=RadioGroupHeadlessDemo.js.map