@tamagui/demos 1.9.21 → 1.10.0

package/dist/cjs/ToggleGroupDemo.js

@@ -25,28 +25,46 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_tamagui = require("tamagui");
 function ToggleGroupDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { w: 500, ai: "center", space: "$3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { w: 400, ai: "center", space: "$4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: "$10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { ai: "center", space: "$6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { w: 400, ai: "center", space: "$4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$3" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: "$6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
     ] })
   ] });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { w: 200, ai: "center", space: "$4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { pr: "$0", miw: 90, jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { mih: 20, vertical: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ToggleGroup, { id, type: props.type, elevation: 10, size: props.size, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", flexDirection: "row", 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, {}) })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.XStack,
+    {
+      flexDirection: props.orientation === "horizontal" ? "row" : "column",
+      ai: "center",
+      jc: "center",
+      space: "$4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { pr: "$0", jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.ToggleGroup,
+          {
+            orientation: props.orientation,
+            id,
+            type: props.type,
+            size: props.size,
+            disableDeactivation: props.type === "single",
+            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, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/ToggleGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons';\nimport {\n  Label,\n  Separator,\n  SizeTokens,\n  ToggleGroup,\n  XStack,\n  YStack\n} from 'tamagui';\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack w={500} ai=\"center\" space=\"$3\">\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"single\" size=\"$4\" />\n        <ToggleGroupComponent type=\"single\" size=\"$3\" />\n      </XStack>\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$3\" />\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: { size: SizeTokens; type: 'single' | 'multiple' }) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      <Separator mih={20} vertical />\n      <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\" flexDirection='row'>\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM;AAbN,0BAAmD;AACnD,qBAOO;AAEA,SAAS,kBAAkB;AAChC,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,iDAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK;AAAA,MAC9C,4CAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK;AAAA,OAChD;AAAA,IACA,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK;AAAA,MAChD,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK;AAAA,OAClD;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAA0D;AACtF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,wBAAM,IAAG,MAAK,KAAK,IAAI,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IAC9D,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,IACA,4CAAC,4BAAU,KAAK,IAAI,UAAQ,MAAC;AAAA,IAC7B,6CAAC,8BAAY,IAAQ,MAAM,MAAM,MAAM,WAAW,IAAI,MAAM,MAAM,MAChE;AAAA,kDAAC,2BAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBAAe,eAAc,OACrE,sDAAC,iCAAU,GACb;AAAA,MACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,sDAAC,mCAAY,GACf;AAAA,MACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,sDAAC,kCAAW,GACd;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\"}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAmD;AACnD,qBAA+D;AAExD,SAAS,kBAAkB;AAChC,SACE,6CAAC,yBAAO,IAAG,UAAS,OAAM,OACxB;AAAA,iDAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;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,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,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;AAAA,YAEpC;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;",
   "names": []
 }

package/dist/cjs/index.js

@@ -59,6 +59,7 @@ __export(src_exports, {
   ThemeInverseDemo: () => import_ThemeInverseDemo.ThemeInverseDemo,
   ToastDemo: () => import_ToastDemo.ToastDemo,
   ToastDuplicateDemo: () => import_ToastDuplicateDemo.ToastDuplicateDemo,
+  ToggleGroupDemo: () => import_ToggleGroupDemo.ToggleGroupDemo,
   TokensDemo: () => import_TokensDemo.TokensDemo,
   TooltipDemo: () => import_TooltipDemo.TooltipDemo,
   UpdateThemeDemo: () => import_UpdateThemeDemo.UpdateThemeDemo
@@ -107,6 +108,7 @@ var import_ToastDemo = require("./ToastDemo");
 var import_ToastDuplicateDemo = require("./ToastDuplicateDemo");
 var import_TabsDemo = require("./TabsDemo");
 var import_TabsAdvancedDemo = require("./TabsAdvancedDemo");
+var import_ToggleGroupDemo = require("./ToggleGroupDemo");
 __reExport(src_exports, require("./useOnIntersecting"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -150,6 +152,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   ThemeInverseDemo,
   ToastDemo,
   ToastDuplicateDemo,
+  ToggleGroupDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,wBAA2B;AAC3B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,4BAA+B;AAC/B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,uBAA0B;AAC1B,gCAAmC;AACnC,sBAAyB;AACzB,8BAAiC;AACjC,wBAAc,gCA3Cd;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport { ToggleGroupDemo } from './ToggleGroupDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,wBAA2B;AAC3B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,4BAA+B;AAC/B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,uBAA0B;AAC1B,gCAAmC;AACnC,sBAAyB;AACzB,8BAAiC;AACjC,6BAAgC;AAChC,wBAAc,gCA5Cd;",
   "names": []
 }

package/dist/esm/ToggleGroupDemo.js

@@ -1,35 +1,47 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import {
-  Label,
-  Separator,
-  ToggleGroup,
-  XStack,
-  YStack
-} from "tamagui";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { w: 500, ai: "center", space: "$3", children: [
-    /* @__PURE__ */ jsxs(XStack, { w: 400, ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$4" }),
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3" })
+  return /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$10", children: [
+    /* @__PURE__ */ jsxs(YStack, { ai: "center", space: "$6", children: [
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { w: 400, ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4" }),
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$3" })
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$6", children: [
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
     ] })
   ] });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return /* @__PURE__ */ jsxs(XStack, { w: 200, ai: "center", space: "$4", children: [
-    /* @__PURE__ */ jsx(Label, { pr: "$0", miw: 90, jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
-    /* @__PURE__ */ jsx(Separator, { mih: 20, vertical: true }),
-    /* @__PURE__ */ jsxs(ToggleGroup, { id, type: props.type, elevation: 10, size: props.size, children: [
-      /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", flexDirection: "row", 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, {}) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      flexDirection: props.orientation === "horizontal" ? "row" : "column",
+      ai: "center",
+      jc: "center",
+      space: "$4",
+      children: [
+        /* @__PURE__ */ jsx(Label, { pr: "$0", jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ jsxs(
+          ToggleGroup,
+          {
+            orientation: props.orientation,
+            id,
+            type: props.type,
+            size: props.size,
+            disableDeactivation: props.type === "single",
+            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, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   ToggleGroupDemo

package/dist/esm/ToggleGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons';\nimport {\n  Label,\n  Separator,\n  SizeTokens,\n  ToggleGroup,\n  XStack,\n  YStack\n} from 'tamagui';\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack w={500} ai=\"center\" space=\"$3\">\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"single\" size=\"$4\" />\n        <ToggleGroupComponent type=\"single\" size=\"$3\" />\n      </XStack>\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$3\" />\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: { size: SizeTokens; type: 'single' | 'multiple' }) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      <Separator mih={20} vertical />\n      <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\" flexDirection='row'>\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAaM,SACE,KADF;AAbN,SAAS,aAAa,WAAW,kBAAkB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,yBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK;AAAA,MAC9C,oBAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK;AAAA,OAChD;AAAA,IACA,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK;AAAA,MAChD,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK;AAAA,OAClD;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAA0D;AACtF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,IAAG,MAAK,KAAK,IAAI,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IAC9D,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,IACA,oBAAC,aAAU,KAAK,IAAI,UAAQ,MAAC;AAAA,IAC7B,qBAAC,eAAY,IAAQ,MAAM,MAAM,MAAM,WAAW,IAAI,MAAM,MAAM,MAChE;AAAA,0BAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBAAe,eAAc,OACrE,8BAAC,aAAU,GACb;AAAA,MACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,MACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\"}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;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,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,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;AAAA,YAEpC;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;",
   "names": []
 }

package/dist/esm/ToggleGroupDemo.mjs

@@ -1,35 +1,47 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import {
-  Label,
-  Separator,
-  ToggleGroup,
-  XStack,
-  YStack
-} from "tamagui";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { w: 500, ai: "center", space: "$3", children: [
-    /* @__PURE__ */ jsxs(XStack, { w: 400, ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$4" }),
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3" })
+  return /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$10", children: [
+    /* @__PURE__ */ jsxs(YStack, { ai: "center", space: "$6", children: [
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { w: 400, ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4" }),
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$3" })
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$6", children: [
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
     ] })
   ] });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return /* @__PURE__ */ jsxs(XStack, { w: 200, ai: "center", space: "$4", children: [
-    /* @__PURE__ */ jsx(Label, { pr: "$0", miw: 90, jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
-    /* @__PURE__ */ jsx(Separator, { mih: 20, vertical: true }),
-    /* @__PURE__ */ jsxs(ToggleGroup, { id, type: props.type, elevation: 10, size: props.size, children: [
-      /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", flexDirection: "row", 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, {}) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      flexDirection: props.orientation === "horizontal" ? "row" : "column",
+      ai: "center",
+      jc: "center",
+      space: "$4",
+      children: [
+        /* @__PURE__ */ jsx(Label, { pr: "$0", jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ jsxs(
+          ToggleGroup,
+          {
+            orientation: props.orientation,
+            id,
+            type: props.type,
+            size: props.size,
+            disableDeactivation: props.type === "single",
+            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, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   ToggleGroupDemo

package/dist/esm/ToggleGroupDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons';\nimport {\n  Label,\n  Separator,\n  SizeTokens,\n  ToggleGroup,\n  XStack,\n  YStack\n} from 'tamagui';\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack w={500} ai=\"center\" space=\"$3\">\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"single\" size=\"$4\" />\n        <ToggleGroupComponent type=\"single\" size=\"$3\" />\n      </XStack>\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$3\" />\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: { size: SizeTokens; type: 'single' | 'multiple' }) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      <Separator mih={20} vertical />\n      <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\" flexDirection='row'>\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAaM,SACE,KADF;AAbN,SAAS,aAAa,WAAW,kBAAkB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,yBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK;AAAA,MAC9C,oBAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK;AAAA,OAChD;AAAA,IACA,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK;AAAA,MAChD,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK;AAAA,OAClD;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAA0D;AACtF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,IAAG,MAAK,KAAK,IAAI,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IAC9D,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,IACA,oBAAC,aAAU,KAAK,IAAI,UAAQ,MAAC;AAAA,IAC7B,qBAAC,eAAY,IAAQ,MAAM,MAAM,MAAM,WAAW,IAAI,MAAM,MAAM,MAChE;AAAA,0BAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBAAe,eAAc,OACrE,8BAAC,aAAU,GACb;AAAA,MACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,MACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\"}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;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,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,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;AAAA,YAEpC;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;",
   "names": []
 }

package/dist/esm/index.js

@@ -41,6 +41,7 @@ import { ToastDemo } from "./ToastDemo";
 import { ToastDuplicateDemo } from "./ToastDuplicateDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
+import { ToggleGroupDemo } from "./ToggleGroupDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -83,6 +84,7 @@ export {
   ThemeInverseDemo,
   ToastDemo,
   ToastDuplicateDemo,
+  ToggleGroupDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport { ToggleGroupDemo } from './ToggleGroupDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,cAAc;",
   "names": []
 }

package/dist/esm/index.mjs

@@ -41,6 +41,7 @@ import { ToastDemo } from "./ToastDemo";
 import { ToastDuplicateDemo } from "./ToastDuplicateDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
+import { ToggleGroupDemo } from "./ToggleGroupDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -83,6 +84,7 @@ export {
   ThemeInverseDemo,
   ToastDemo,
   ToastDuplicateDemo,
+  ToggleGroupDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport { ToggleGroupDemo } from './ToggleGroupDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,cAAc;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.js

@@ -1,30 +1,34 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import {
-  Label,
-  Separator,
-  ToggleGroup,
-  XStack,
-  YStack
-} from "tamagui";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return <YStack w={500} ai="center" space="$3">
-    <XStack w={400} ai="center" space="$4">
-      <ToggleGroupComponent type="single" size="$4" />
-      <ToggleGroupComponent type="single" size="$3" />
+  return <XStack ai="center" space="$10">
+    <YStack ai="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
+    </YStack>
+    <XStack ai="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
     </XStack>
-    <XStack w={400} ai="center" space="$4">
-      <ToggleGroupComponent type="multiple" size="$4" />
-      <ToggleGroupComponent type="multiple" size="$3" />
-    </XStack>
-  </YStack>;
+  </XStack>;
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return <XStack w={200} ai="center" space="$4">
-    <Label pr="$0" miw={90} jc="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
-    <Separator mih={20} vertical />
-    <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>
-      <ToggleGroup.Item value="left" aria-label="Left aligned" flexDirection="row"><AlignLeft /></ToggleGroup.Item>
+  return <XStack
+    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
+    ai="center"
+    jc="center"
+    space="$4"
+  >
+    <Label pr="$0" jc="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <ToggleGroup
+      orientation={props.orientation}
+      id={id}
+      type={props.type}
+      size={props.size}
+      disableDeactivation={props.type === "single"}
+    >
+      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
       <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
       <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
     </ToggleGroup>

package/dist/jsx/ToggleGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons';\nimport {\n  Label,\n  Separator,\n  SizeTokens,\n  ToggleGroup,\n  XStack,\n  YStack\n} from 'tamagui';\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack w={500} ai=\"center\" space=\"$3\">\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"single\" size=\"$4\" />\n        <ToggleGroupComponent type=\"single\" size=\"$3\" />\n      </XStack>\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$3\" />\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: { size: SizeTokens; type: 'single' | 'multiple' }) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      <Separator mih={20} vertical />\n      <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\" flexDirection='row'>\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK;AAAA,MAC9C,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK;AAAA,IAChD,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK;AAAA,MAChD,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK;AAAA,IAClD,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAA0D;AACtF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KAC9D,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAGD,CAAC,UAAU,KAAK,IAAI,SAAS;AAAA,IAC7B,CAAC,YAAY,IAAI,IAAI,MAAM,MAAM,MAAM,WAAW,IAAI,MAAM,MAAM;AAAA,MAChE,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eAAe,cAAc,MACrE,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAVC;AAAA,EAWH,EAhBC;AAkBL;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\"}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS;AAAA;AAAA,MAEpC,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.mjs

@@ -1,30 +1,34 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import {
-  Label,
-  Separator,
-  ToggleGroup,
-  XStack,
-  YStack
-} from "tamagui";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return <YStack w={500} ai="center" space="$3">
-    <XStack w={400} ai="center" space="$4">
-      <ToggleGroupComponent type="single" size="$4" />
-      <ToggleGroupComponent type="single" size="$3" />
+  return <XStack ai="center" space="$10">
+    <YStack ai="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
+    </YStack>
+    <XStack ai="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
     </XStack>
-    <XStack w={400} ai="center" space="$4">
-      <ToggleGroupComponent type="multiple" size="$4" />
-      <ToggleGroupComponent type="multiple" size="$3" />
-    </XStack>
-  </YStack>;
+  </XStack>;
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return <XStack w={200} ai="center" space="$4">
-    <Label pr="$0" miw={90} jc="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
-    <Separator mih={20} vertical />
-    <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>
-      <ToggleGroup.Item value="left" aria-label="Left aligned" flexDirection="row"><AlignLeft /></ToggleGroup.Item>
+  return <XStack
+    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
+    ai="center"
+    jc="center"
+    space="$4"
+  >
+    <Label pr="$0" jc="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <ToggleGroup
+      orientation={props.orientation}
+      id={id}
+      type={props.type}
+      size={props.size}
+      disableDeactivation={props.type === "single"}
+    >
+      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
       <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
       <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
     </ToggleGroup>

package/dist/jsx/ToggleGroupDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons';\nimport {\n  Label,\n  Separator,\n  SizeTokens,\n  ToggleGroup,\n  XStack,\n  YStack\n} from 'tamagui';\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack w={500} ai=\"center\" space=\"$3\">\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"single\" size=\"$4\" />\n        <ToggleGroupComponent type=\"single\" size=\"$3\" />\n      </XStack>\n      <XStack w={400} ai=\"center\" space=\"$4\">\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$3\" />\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: { size: SizeTokens; type: 'single' | 'multiple' }) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      <Separator mih={20} vertical />\n      <ToggleGroup id={id} type={props.type} elevation={10} size={props.size}>\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\" flexDirection='row'>\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK;AAAA,MAC9C,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK;AAAA,IAChD,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK;AAAA,MAChD,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK;AAAA,IAClD,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAA0D;AACtF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KAC9D,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAGD,CAAC,UAAU,KAAK,IAAI,SAAS;AAAA,IAC7B,CAAC,YAAY,IAAI,IAAI,MAAM,MAAM,MAAM,WAAW,IAAI,MAAM,MAAM;AAAA,MAChE,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eAAe,cAAc,MACrE,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAVC;AAAA,EAWH,EAhBC;AAkBL;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\"}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS;AAAA;AAAA,MAEpC,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
   "names": []
 }

package/dist/jsx/index.js

@@ -41,6 +41,7 @@ import { ToastDemo } from "./ToastDemo";
 import { ToastDuplicateDemo } from "./ToastDuplicateDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
+import { ToggleGroupDemo } from "./ToggleGroupDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -83,6 +84,7 @@ export {
   ThemeInverseDemo,
   ToastDemo,
   ToastDuplicateDemo,
+  ToggleGroupDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/jsx/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport { ToggleGroupDemo } from './ToggleGroupDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,cAAc;",
   "names": []
 }

package/dist/jsx/index.mjs

@@ -41,6 +41,7 @@ import { ToastDemo } from "./ToastDemo";
 import { ToastDuplicateDemo } from "./ToastDuplicateDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
+import { ToggleGroupDemo } from "./ToggleGroupDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -83,6 +84,7 @@ export {
   ThemeInverseDemo,
   ToastDemo,
   ToastDuplicateDemo,
+  ToggleGroupDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/jsx/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { ToastDuplicateDemo } from './ToastDuplicateDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport { ToggleGroupDemo } from './ToggleGroupDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.9.21",
+  "version": "1.10.0",
   "sideEffects": [
     "*.css"
   ],
@@ -28,28 +28,28 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.9.21",
-    "@tamagui/button": "1.9.21",
-    "@tamagui/config": "1.9.21",
-    "@tamagui/core": "1.9.21",
-    "@tamagui/list-item": "1.9.21",
-    "@tamagui/logo": "1.9.21",
-    "@tamagui/menu": "1.9.21",
-    "@tamagui/popover": "1.9.21",
-    "@tamagui/progress": "1.9.21",
-    "@tamagui/radio-group": "1.9.21",
-    "@tamagui/select": "1.9.21",
-    "@tamagui/sheet": "1.9.21",
-    "@tamagui/slider": "1.9.21",
-    "@tamagui/stacks": "1.9.21",
-    "tamagui": "1.9.21"
+    "@tamagui/avatar": "1.10.0",
+    "@tamagui/button": "1.10.0",
+    "@tamagui/config": "1.10.0",
+    "@tamagui/core": "1.10.0",
+    "@tamagui/list-item": "1.10.0",
+    "@tamagui/logo": "1.10.0",
+    "@tamagui/menu": "1.10.0",
+    "@tamagui/popover": "1.10.0",
+    "@tamagui/progress": "1.10.0",
+    "@tamagui/radio-group": "1.10.0",
+    "@tamagui/select": "1.10.0",
+    "@tamagui/sheet": "1.10.0",
+    "@tamagui/slider": "1.10.0",
+    "@tamagui/stacks": "1.10.0",
+    "tamagui": "1.10.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.9.21",
+    "@tamagui/build": "1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/ToggleGroupDemo.tsx

@@ -0,0 +1,56 @@
+import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'
+import { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'
+
+export function ToggleGroupDemo() {
+  return (
+    <XStack ai="center" space="$10">
+      <YStack ai="center" space="$6">
+        <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
+        <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
+      </YStack>
+      <XStack ai="center" space="$6">
+        <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+        <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
+      </XStack>
+    </XStack>
+  )
+}
+
+function ToggleGroupComponent(props: {
+  size: SizeTokens
+  type: 'single' | 'multiple'
+  orientation: 'vertical' | 'horizontal'
+}) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`
+  return (
+    <XStack
+      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}
+      ai="center"
+      jc="center"
+      space="$4"
+    >
+      <Label pr="$0"  jc="flex-end" size={props.size} htmlFor={id}>
+        {props.type === 'single' ? 'Single' : 'Multiple'}
+      </Label>
+      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}
+
+      <ToggleGroup
+        orientation={props.orientation}
+        id={id}
+        type={props.type}
+        size={props.size}
+        disableDeactivation={props.type === "single"}
+      >
+        <ToggleGroup.Item value="left" aria-label="Left aligned">
+          <AlignLeft />
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned">
+          <AlignCenter />
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned">
+          <AlignRight />
+        </ToggleGroup.Item>
+      </ToggleGroup>
+    </XStack>
+  )
+}

package/src/index.tsx

@@ -41,4 +41,5 @@ export { ToastDemo } from './ToastDemo'
 export { ToastDuplicateDemo } from './ToastDuplicateDemo'
 export { TabsDemo } from './TabsDemo'
 export { TabsAdvancedDemo } from './TabsAdvancedDemo'
+export { ToggleGroupDemo } from './ToggleGroupDemo'
 export * from './useOnIntersecting'

package/types/AccordionDemo.d.ts.map

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

package/types/AddThemeDemo.d.ts.map

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

package/types/AlertDialogDemo.d.ts.map

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

package/types/AnimationsDemo.d.ts.map

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

package/types/AnimationsEnterDemo.d.ts.map

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

package/types/AnimationsHoverDemo.d.ts.map

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

package/types/AnimationsPresenceDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsPresenceDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsPresenceDemo.tsx"],"names":[],"mappings":";AAYA,eAAO,MAAM,MAAM,OAAkD,CAAA;AASrE,wBAAgB,sBAAsB,gBA0CrC"}

package/types/AnimationsTimingDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsTimingDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsTimingDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,oBAAoB,gBAkBnC"}

package/types/AvatarDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarDemo.d.ts","sourceRoot":"","sources":["../src/AvatarDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,UAAU,gBAoBzB"}

package/types/ButtonDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDemo.d.ts","sourceRoot":"","sources":["../src/ButtonDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,UAAU,CAAC,KAAK,KAAA,eAsC/B"}

package/types/CardDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardDemo.d.ts","sourceRoot":"","sources":["../src/CardDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,QAAQ,gBAevB"}

package/types/CheckboxDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,YAAY,gBAQ3B"}

package/types/ColorsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorsDemo.d.ts","sourceRoot":"","sources":["../src/ColorsDemo.tsx"],"names":[],"mappings":";AAcA,wBAAgB,UAAU,gBAWzB"}

package/types/DialogDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDemo.d.ts","sourceRoot":"","sources":["../src/DialogDemo.tsx"],"names":[],"mappings":";AAkBA,wBAAgB,UAAU,gBA6EzB"}

package/types/DrawerDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerDemo.d.ts","sourceRoot":"","sources":["../src/DrawerDemo.tsx"],"names":[],"mappings":";AAMA,wBAAgB,UAAU,gBA2BzB"}

package/types/FeatherIconsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatherIconsDemo.d.ts","sourceRoot":"","sources":["../src/FeatherIconsDemo.tsx"],"names":[],"mappings":";AAYA,wBAAgB,gBAAgB,gBAgC/B"}

package/types/FormsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormsDemo.d.ts","sourceRoot":"","sources":["../src/FormsDemo.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAoB,UAAU,EAA2B,MAAM,SAAS,CAAA;AAE/E,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,eAiCpD"}

package/types/GroupDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDemo.d.ts","sourceRoot":"","sources":["../src/GroupDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,SAAS,gBA2CxB"}

package/types/HeadingsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingsDemo.d.ts","sourceRoot":"","sources":["../src/HeadingsDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,YAAY,gBAW3B"}

package/types/ImageDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDemo.d.ts","sourceRoot":"","sources":["../src/ImageDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,SAAS,gBAExB"}

package/types/InputsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputsDemo.d.ts","sourceRoot":"","sources":["../src/InputsDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,UAAU,gBASzB"}

package/types/LabelDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelDemo.d.ts","sourceRoot":"","sources":["../src/LabelDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,SAAS,gBAoBxB"}

package/types/LinearGradientDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradientDemo.d.ts","sourceRoot":"","sources":["../src/LinearGradientDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,kBAAkB,gBAwBjC"}

package/types/ListItemDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemDemo.d.ts","sourceRoot":"","sources":["../src/ListItemDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,YAAY,gBAO3B"}

package/types/LucideIconsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideIconsDemo.d.ts","sourceRoot":"","sources":["../src/LucideIconsDemo.tsx"],"names":[],"mappings":";AAWA,wBAAgB,eAAe,gBAgC9B"}

package/types/MenuDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDemo.d.ts","sourceRoot":"","sources":["../src/MenuDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,QAAQ,gBA2BvB"}

package/types/PopoverDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverDemo.d.ts","sourceRoot":"","sources":["../src/PopoverDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EAML,YAAY,EAGb,MAAM,SAAS,CAAA;AAEhB,wBAAgB,WAAW,gBAS1B;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,eA6D9C"}

package/types/PopperDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperDemo.d.ts","sourceRoot":"","sources":["../src/PopperDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EASL,WAAW,EAOZ,MAAM,SAAS,CAAA;AAEhB,wBAAgB,UAAU,gBAYzB;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,eAoCrF"}

package/types/ProgressDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDemo.d.ts","sourceRoot":"","sources":["../src/ProgressDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,YAAY,gBA+C3B"}

package/types/RadioGroupDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupDemo.d.ts","sourceRoot":"","sources":["../src/RadioGroupDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,cAAc,gBAU7B"}

package/types/ScrollViewDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollViewDemo.d.ts","sourceRoot":"","sources":["../src/ScrollViewDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,cAAc,gBAe7B"}

package/types/SelectDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,UAAU,gBAgEzB"}

package/types/SeparatorDemo.d.ts.map

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

package/types/ShapesDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapesDemo.d.ts","sourceRoot":"","sources":["../src/ShapesDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,UAAU,gBAOzB"}

package/types/SheetDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetDemo.d.ts","sourceRoot":"","sources":["../src/SheetDemo.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,SAAS,mBA+CrB,CAAA"}

package/types/SliderDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderDemo.d.ts","sourceRoot":"","sources":["../src/SliderDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,UAAU,gBAOzB"}

package/types/SpinnerDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDemo.d.ts","sourceRoot":"","sources":["../src/SpinnerDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,WAAW,gBAO1B"}

package/types/StacksDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StacksDemo.d.ts","sourceRoot":"","sources":["../src/StacksDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,UAAU,gBAsBzB"}

package/types/SwitchDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchDemo.d.ts","sourceRoot":"","sources":["../src/SwitchDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,UAAU,gBASzB"}

package/types/TabsAdvancedDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,gBAAgB,mBA8G5B,CAAA"}

package/types/TabsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsDemo.d.ts","sourceRoot":"","sources":["../src/TabsDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,QAAQ,gBAevB"}

package/types/TabsHighlightedDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsHighlightedDemo.d.ts","sourceRoot":"","sources":["../src/TabsHighlightedDemo.tsx"],"names":[],"mappings":";AAYA,wBAAgB,mBAAmB,gBAMlC"}

package/types/TabsUnderlinedDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsUnderlinedDemo.d.ts","sourceRoot":"","sources":["../src/TabsUnderlinedDemo.tsx"],"names":[],"mappings":";AAYA,wBAAgB,kBAAkB,gBAMjC"}

package/types/TextDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDemo.d.ts","sourceRoot":"","sources":["../src/TextDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,QAAQ,gBAiBvB"}

package/types/ThemeInverseDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeInverseDemo.d.ts","sourceRoot":"","sources":["../src/ThemeInverseDemo.tsx"],"names":[],"mappings":";AAEA,wBAAgB,gBAAgB,gBAS/B"}

package/types/ToastDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDemo.d.ts","sourceRoot":"","sources":["../src/ToastDemo.tsx"],"names":[],"mappings":";AAcA,eAAO,MAAM,SAAS,mBAarB,CAAA"}

package/types/ToastDuplicateDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDuplicateDemo.d.ts","sourceRoot":"","sources":["../src/ToastDuplicateDemo.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,kBAAkB,mBAsC9B,CAAA"}

package/types/ToggleGroup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=ToggleGroup.d.ts.map

package/types/ToggleGroupDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function ToggleGroupDemo(): JSX.Element;
+//# sourceMappingURL=ToggleGroupDemo.d.ts.map

package/types/ToggleGroupDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupDemo.d.ts","sourceRoot":"","sources":["../src/ToggleGroupDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,eAAe,gBAa9B"}

package/types/TokensDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokensDemo.d.ts","sourceRoot":"","sources":["../src/TokensDemo.tsx"],"names":[],"mappings":";AAyBA,wBAAgB,UAAU,gBA4BzB"}

package/types/TooltipDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipDemo.d.ts","sourceRoot":"","sources":["../src/TooltipDemo.tsx"],"names":[],"mappings":";AAQA,OAAO,EAML,YAAY,EAGb,MAAM,SAAS,CAAA;AAEhB,wBAAgB,WAAW,gBAsB1B;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,eA+BrE"}

package/types/UpdateThemeDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateThemeDemo.d.ts","sourceRoot":"","sources":["../src/UpdateThemeDemo.tsx"],"names":[],"mappings":";AAiBA,wBAAgB,eAAe,gBAuC9B"}

package/types/conf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conf.d.ts","sourceRoot":"","sources":["../src/conf.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,MAAM,MAAM,IAAI,GAAG,kBAAkB,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpD,OAAO,QAAQ,SAAS,CAAC;IACvB,UAAU,mBAAoB,SAAQ,IAAI;KAAG;CAC9C"}

package/types/index.d.ts

@@ -41,5 +41,6 @@ export { ToastDemo } from './ToastDemo';
 export { ToastDuplicateDemo } from './ToastDuplicateDemo';
 export { TabsDemo } from './TabsDemo';
 export { TabsAdvancedDemo } from './TabsAdvancedDemo';
+export { ToggleGroupDemo } from './ToggleGroupDemo';
 export * from './useOnIntersecting';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,qBAAqB,CAAA"}

package/types/tamagui.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tamagui.config.d.ts","sourceRoot":"","sources":["../src/tamagui.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,eAAe,MAAM,CAAA"}

package/types/useOnIntersecting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnIntersecting.d.ts","sourceRoot":"","sources":["../src/useOnIntersecting.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAA;AAG7D,KAAK,SAAS,GAAG,MAAM,IAAI,CAAA;AAE3B,KAAK,iBAAiB,GAAG,CACvB,KAAK,EAAE,CAAC,yBAAyB,GAAG,IAAI,CAAC,EAAE,EAC3C,SAAS,CAAC,EAAE,OAAO,KAChB,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5B,KAAK,OAAO,GAAG,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;AAEnD,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,OAAO,GAAG,OAAO,EAAE,EAC/D,IAAI,EAAE,GAAG,EACT,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAE,wBAAwB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAO,GACpE,GAAG,SAAS,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,CAsBzC;AAED,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,OAAO,GAAG,OAAO,EAAE,EAC/D,MAAM,EAAE,GAAG,EACX,aAAa,EAAE,iBAAiB,EAChC,EAAE,SAAa,EAAE,IAAI,EAAE,UAAU,EAAE,GAAE,wBAA6B,EAClE,SAAS,GAAE,GAAG,EAAO,QA4CtB"}