@tamagui/demos 1.27.2 → 1.28.0

package/dist/esm/TabsAdvancedDemo.mjs

@@ -1,283 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//! debug
-import { useState } from "react";
-import {
-  AnimatePresence,
-  Button,
-  H5,
-  SizableText,
-  Stack,
-  Tabs,
-  XStack,
-  YStack,
-  styled
-} from "tamagui";
-const demos = ["background", "underline"];
-const demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-};
-const TabsAdvancedDemo = () => {
-  const [demoIndex, setDemoIndex] = useState(0);
-  const demo = demos[demoIndex];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    demo === "underline" ? /* @__PURE__ */ jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ jsx(TabsAdvancedBackground, {}),
-    /* @__PURE__ */ jsx(
-      XStack,
-      {
-        alignItems: "center",
-        space: true,
-        position: "absolute",
-        bottom: "$3",
-        left: "$4",
-        $xxs: { display: "none" },
-        children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] })
-      }
-    )
-  ] });
-};
-const TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
-  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
-  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
-  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
-  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
-  const handleOnInteraction = (type, layout) => {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      setIntentIndicator(layout);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      size: "$4",
-      padding: "$2",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      backgroundColor: "$background",
-      borderRadius: "$4",
-      position: "relative",
-      children: [
-        /* @__PURE__ */ jsxs(YStack, { children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              borderRadius: "$4",
-              width: intentAt.width,
-              height: intentAt.height,
-              x: intentAt.x,
-              y: intentAt.y
-            }
-          ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              borderRadius: "$4",
-              theme: "active",
-              width: activeAt.width,
-              height: activeAt.height,
-              x: activeAt.x,
-              y: activeAt.y
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            Tabs.List,
-            {
-              disablePassBorderRadius: true,
-              loop: false,
-              "aria-label": "Manage your account",
-              space: "$2",
-              backgroundColor: "transparent",
-              children: [
-                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab1", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
-                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab2", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
-                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab3", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
-          {
-            exitBeforeEnter: true,
-            enterVariant,
-            exitVariant,
-            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
-          }
-        )
-      ]
-    }
-  );
-};
-const TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
-  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
-  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
-  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
-  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
-  const handleOnInteraction = (type, layout) => {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      setIntentIndicator(layout);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      size: "$4",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      backgroundColor: "$background",
-      borderRadius: "$4",
-      children: [
-        /* @__PURE__ */ jsxs(YStack, { children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              width: intentAt.width,
-              height: "$0.5",
-              x: intentAt.x,
-              bottom: 0
-            }
-          ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              theme: "active",
-              active: true,
-              width: activeAt.width,
-              height: "$0.5",
-              x: activeAt.x,
-              bottom: 0
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            Tabs.List,
-            {
-              disablePassBorderRadius: true,
-              loop: false,
-              "aria-label": "Manage your account",
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-              paddingBottom: "$1.5",
-              borderColor: "$color3",
-              borderBottomWidth: "$0.5",
-              backgroundColor: "transparent",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: true,
-                    padding: "$5",
-                    value: "tab1",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: true,
-                    padding: "$5",
-                    value: "tab2",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: true,
-                    padding: "$5",
-                    value: "tab3",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
-          {
-            exitBeforeEnter: true,
-            enterVariant,
-            exitVariant,
-            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
-          }
-        )
-      ]
-    }
-  );
-};
-const TabsRovingIndicator = ({ active, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    Stack,
-    {
-      position: "absolute",
-      backgroundColor: "$color5",
-      opacity: 0.7,
-      animation: "100ms",
-      enterStyle: {
-        opacity: 0
-      },
-      exitStyle: {
-        opacity: 0
-      },
-      ...active && {
-        backgroundColor: "$color8",
-        opacity: 0.6
-      },
-      ...props
-    }
-  );
-};
-const AnimatedYStack = styled(YStack, {
-  variants: {
-    isLeft: { true: { x: -25, opacity: 0 } },
-    isRight: { true: { x: 25, opacity: 0 } },
-    defaultFade: { true: { opacity: 0 } }
-  }
-});
-export {
-  TabsAdvancedDemo
-};
-//# sourceMappingURL=TabsAdvancedDemo.mjs.map

package/dist/esm/TabsDemo.mjs

@@ -1,141 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import {
-  Button,
-  H5,
-  Separator,
-  SizableText,
-  Tabs,
-  XStack,
-  YStack,
-  isWeb
-} from "tamagui";
-const demos = ["horizontal", "vertical"];
-const demosTitle = {
-  horizontal: "Horizontal",
-  vertical: "Vertical"
-};
-function TabsDemo() {
-  const [demoIndex, setDemoIndex] = useState(0);
-  const demo = demos[demoIndex];
-  return (
-    // web only fix for position relative
-    /* @__PURE__ */ jsxs(
-      YStack,
-      {
-        paddingHorizontal: "$4",
-        ...isWeb && {
-          position: "unset"
-        },
-        children: [
-          demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
-          /* @__PURE__ */ jsx(
-            XStack,
-            {
-              alignItems: "center",
-              space: true,
-              position: "absolute",
-              bottom: "$3",
-              left: "$4",
-              $xxs: { display: "none" },
-              children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] })
-            }
-          )
-        ]
-      }
-    )
-  );
-}
-const HorizontalTabs = () => {
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      defaultValue: "tab1",
-      orientation: "horizontal",
-      flexDirection: "column",
-      width: 400,
-      height: 150,
-      borderRadius: "$4",
-      borderWidth: "$0.25",
-      overflow: "hidden",
-      borderColor: "$borderColor",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Tabs.List,
-          {
-            separator: /* @__PURE__ */ jsx(Separator, { vertical: true }),
-            disablePassBorderRadius: "bottom",
-            "aria-label": "Manage your account",
-            children: [
-              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { flex: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Notifications" }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Separator, {}),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tab1", children: /* @__PURE__ */ jsx(H5, { children: "Profile" }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tab2", children: /* @__PURE__ */ jsx(H5, { children: "Connections" }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tab3", children: /* @__PURE__ */ jsx(H5, { children: "Notifications" }) })
-      ]
-    }
-  );
-};
-const VerticalTabs = () => {
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      defaultValue: "tab1",
-      flexDirection: "row",
-      orientation: "vertical",
-      width: 400,
-      borderRadius: "$4",
-      borderWidth: "$0.25",
-      overflow: "hidden",
-      borderColor: "$borderColor",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Tabs.List,
-          {
-            disablePassBorderRadius: "end",
-            "aria-label": "Manage your account",
-            separator: /* @__PURE__ */ jsx(Separator, {}),
-            children: [
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Separator, { vertical: true }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tab1", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Profile" }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tab2", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Connections" }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tab3", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Notifications" }) })
-      ]
-    }
-  );
-};
-const TabsContent = (props) => {
-  return /* @__PURE__ */ jsx(
-    Tabs.Content,
-    {
-      backgroundColor: "$background",
-      padding: "$2",
-      alignItems: "center",
-      justifyContent: "center",
-      flex: 1,
-      borderColor: "$background",
-      borderRadius: "$2",
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-      borderWidth: "$2",
-      ...props,
-      children: props.children
-    },
-    "tab3"
-  );
-};
-export {
-  TabsDemo
-};
-//# sourceMappingURL=TabsDemo.mjs.map

package/dist/esm/TextDemo.mjs

@@ -1,16 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Paragraph, SizableText, XStack, YStack } from "tamagui";
-function TextDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { space: "$2", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(SizableText, { size: "$3", children: "SizableText" }),
-    /* @__PURE__ */ jsxs(XStack, { space: true, children: [
-      /* @__PURE__ */ jsx(SizableText, { theme: "alt1", size: "$3", children: "alt1" }),
-      /* @__PURE__ */ jsx(SizableText, { theme: "alt2", size: "$3", children: "alt2" })
-    ] }),
-    /* @__PURE__ */ jsx(Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" })
-  ] });
-}
-export {
-  TextDemo
-};
-//# sourceMappingURL=TextDemo.mjs.map

package/dist/esm/ThemeInverseDemo.mjs

@@ -1,42 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
-function ThemeInverseDemo() {
-  const themeName = useThemeName();
-  const opposite = themeName.includes("dark") ? "light" : "dark";
-  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
-    /* @__PURE__ */ jsx(Buttons, { title: "Normal", name: themeName }),
-    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(
-      Buttons,
-      {
-        title: "Inversed",
-        name: themeName.replace(themeName.split("_")[0], opposite)
-      }
-    ) })
-  ] });
-}
-function Buttons(props) {
-  return /* @__PURE__ */ jsxs(
-    YStack,
-    {
-      elevation: "$4",
-      backgroundColor: "$background",
-      padding: "$4",
-      borderRadius: "$4",
-      space: "$3",
-      children: [
-        /* @__PURE__ */ jsx(H5, { children: props.title }),
-        /* @__PURE__ */ jsx(Button, { children: props.name }),
-        /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "inversed" }),
-        /* @__PURE__ */ jsxs(Button, { theme: "alt1", children: [
-          props.name,
-          "_alt1"
-        ] }),
-        /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: props.name.split("_")[0] + "_yellow" }) })
-      ]
-    }
-  );
-}
-export {
-  ThemeInverseDemo
-};
-//# sourceMappingURL=ThemeInverseDemo.mjs.map

package/dist/esm/ToastDemo.mjs

@@ -1,101 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Toast, useToastController, useToastState } from "@tamagui/toast";
-import React from "react";
-import { Button, Label, Switch, XStack, YStack } from "tamagui";
-const ToastDemo = () => {
-  const [native, setNative] = React.useState(false);
-  return /* @__PURE__ */ jsxs(YStack, { space: true, alignItems: "center", children: [
-    /* @__PURE__ */ jsx(ToastControl, { native }),
-    /* @__PURE__ */ jsx(CurrentToast, {}),
-    /* @__PURE__ */ jsx(NativeOptions, { native, setNative })
-  ] });
-};
-const CurrentToast = () => {
-  const currentToast = useToastState();
-  if (!currentToast || currentToast.isHandledNatively)
-    return null;
-  return /* @__PURE__ */ jsx(
-    Toast,
-    {
-      duration: currentToast.duration,
-      enterStyle: { opacity: 0, scale: 0.5, y: -25 },
-      exitStyle: { opacity: 0, scale: 1, y: -20 },
-      y: 0,
-      opacity: 1,
-      scale: 1,
-      animation: "100ms",
-      viewportName: currentToast.viewportName,
-      children: /* @__PURE__ */ jsxs(YStack, { children: [
-        /* @__PURE__ */ jsx(Toast.Title, { children: currentToast.title }),
-        !!currentToast.message && /* @__PURE__ */ jsx(Toast.Description, { children: currentToast.message })
-      ] })
-    },
-    currentToast.id
-  );
-};
-const ToastControl = ({ native }) => {
-  const toast = useToastController();
-  return /* @__PURE__ */ jsxs(XStack, { space: "$2", justifyContent: "center", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onPress: () => {
-          toast.show("Successfully saved!", {
-            message: "Don't worry, we've got your data.",
-            native
-          });
-        },
-        children: "Show"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        id: "wot",
-        nativeID: "woot",
-        onPress: () => {
-          toast.hide();
-        },
-        children: "Hide"
-      }
-    )
-  ] });
-};
-const NativeOptions = ({
-  native,
-  setNative
-}) => {
-  return /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
-    /* @__PURE__ */ jsx(Label, { size: "$1", onPress: () => setNative(false), children: "Custom" }),
-    /* @__PURE__ */ jsx(
-      Switch,
-      {
-        debug: "verbose",
-        id: "native-toggle",
-        nativeID: "native-toggle",
-        theme: "active",
-        size: "$1",
-        checked: !!native,
-        onCheckedChange: (val) => setNative(val),
-        children: /* @__PURE__ */ jsx(
-          Switch.Thumb,
-          {
-            animation: [
-              "quick",
-              {
-                transform: {
-                  overshootClamping: true
-                }
-              }
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(Label, { size: "$1", onPress: () => setNative(true), children: "Native" })
-  ] });
-};
-export {
-  ToastDemo
-};
-//# sourceMappingURL=ToastDemo.mjs.map

package/dist/esm/ToastDuplicateDemo.mjs

@@ -1,44 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckCircle2 } from "@tamagui/lucide-icons";
-import { Toast } from "@tamagui/toast";
-import React from "react";
-import { Button, XStack, YStack } from "tamagui";
-const ToastDuplicateDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onPress: () => {
-          setSavedCount((old) => old + 1);
-        },
-        children: "Show toast"
-      }
-    ),
-    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ jsx(
-      Toast,
-      {
-        viewportName: "viewport-multiple",
-        duration: 4e3,
-        enterStyle: { opacity: 0, scale: 0.5, y: -25 },
-        exitStyle: { opacity: 0, scale: 1, y: -20 },
-        y: 0,
-        opacity: 1,
-        scale: 1,
-        animation: "100ms",
-        children: /* @__PURE__ */ jsxs(XStack, { space: true, alignItems: "center", children: [
-          /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(CheckCircle2, {}) }),
-          /* @__PURE__ */ jsxs(YStack, { children: [
-            /* @__PURE__ */ jsx(Toast.Title, { children: "Successfully saved!" }),
-            /* @__PURE__ */ jsx(Toast.Description, { children: "Don't worry... We've got your data." })
-          ] })
-        ] })
-      },
-      index
-    ))
-  ] });
-};
-export {
-  ToastDuplicateDemo
-};
-//# sourceMappingURL=ToastDuplicateDemo.mjs.map

package/dist/esm/ToggleGroupDemo.mjs

@@ -1,49 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, XStack, YStack } from "tamagui";
-function ToggleGroupDemo() {
-  return /* @__PURE__ */ jsx(YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$10", children: [
-    /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: "$6", children: [
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
-      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { alignItems: "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,
-    {
-      flexDirection: props.orientation === "horizontal" ? "row" : "column",
-      alignItems: "center",
-      justifyContent: "center",
-      space: "$4",
-      children: [
-        /* @__PURE__ */ jsx(Label, { paddingRight: "$0", justifyContent: "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" ? true : void 0,
-            children: [
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
-              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ jsx(AlignRight, {}) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  ToggleGroupDemo
-};
-//# sourceMappingURL=ToggleGroupDemo.mjs.map