@tamagui/demos 1.26.1 → 1.27.0-1684260142805

package/dist/esm/ColorsDemo.mjs

@@ -1,98 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  H2,
-  Paragraph,
-  Separator,
-  Square,
-  XStack,
-  YStack,
-  getTokens,
-  getVariableValue
-} from "tamagui";
-const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
-function ColorsDemo() {
-  const colors = getTokens({ prefixed: false }).color;
-  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
-  return /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
-    /* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
-    /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
-  ] });
-}
-function ColorsRow({ title, colors }) {
-  return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
-    /* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
-    /* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
-      /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, alignSelf: "center", children: [
-        colors.map((group, index) => {
-          return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
-            return /* @__PURE__ */ jsx(
-              Square,
-              {
-                borderRadius: "$2",
-                size: "$4",
-                height: "$4",
-                borderWidth: 1,
-                backgroundColor: getVariableValue(color),
-                borderColor: "$color7",
-                $sm: {
-                  size: "$2"
-                },
-                $xs: {
-                  size: "$1"
-                }
-              },
-              `${color.key}${index}`
-            );
-          }) }, index);
-        }),
-        /* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
-          return /* @__PURE__ */ jsx(
-            Paragraph,
-            {
-              color: "$color10",
-              textAlign: "center",
-              width: "$4",
-              $sm: {
-                width: "$2"
-              },
-              $xs: {
-                width: "$1"
-              },
-              children: index
-            },
-            index
-          );
-        }) })
-      ] }),
-      /* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
-        Paragraph,
-        {
-          theme: name,
-          color: "$color10",
-          height: "$4",
-          rotate: "-10deg",
-          $sm: {
-            height: "$2"
-          },
-          $xs: {
-            height: "$1"
-          },
-          children: name
-        },
-        name
-      )) })
-    ] })
-  ] });
-}
-function getColors(colors, dark = false) {
-  return colorGroups.map((group) => {
-    return Object.keys(colors).filter(
-      (color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
-    ).map((key) => colors[key]);
-  });
-}
-export {
-  ColorsDemo
-};
-//# sourceMappingURL=ColorsDemo.mjs.map

package/dist/esm/DialogDemo.mjs

@@ -1,84 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { X } from "@tamagui/lucide-icons";
-import {
-  Adapt,
-  Button,
-  Dialog,
-  Fieldset,
-  Input,
-  Label,
-  Paragraph,
-  Sheet,
-  TooltipSimple,
-  Unspaced,
-  YStack
-} from "tamagui";
-import { SelectDemoItem } from "./SelectDemo";
-function DialogDemo() {
-  return /* @__PURE__ */ jsxs(Dialog, { modal: true, children: [
-    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Edit Profile" }) }),
-    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { zIndex: 2e5, modal: true, dismissOnSnapToBottom: true, children: [
-      /* @__PURE__ */ jsx(Sheet.Frame, { padding: "$4", space: true, children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
-      /* @__PURE__ */ jsx(Sheet.Overlay, {})
-    ] }) }),
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        Dialog.Overlay,
-        {
-          animation: "quick",
-          opacity: 0.5,
-          enterStyle: { opacity: 0 },
-          exitStyle: { opacity: 0 }
-        },
-        "overlay"
-      ),
-      /* @__PURE__ */ jsxs(
-        Dialog.Content,
-        {
-          bordered: true,
-          elevate: true,
-          animation: [
-            "quick",
-            {
-              opacity: {
-                overshootClamping: true
-              }
-            }
-          ],
-          enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
-          exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
-          space: true,
-          children: [
-            /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
-            /* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
-            /* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
-              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
-              /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
-            ] }),
-            /* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
-              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ jsx(TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" }) }) }),
-              /* @__PURE__ */ jsx(SelectDemoItem, {})
-            ] }),
-            /* @__PURE__ */ jsx(YStack, { alignItems: "flex-end", marginTop: "$2", children: /* @__PURE__ */ jsx(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
-            /* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                position: "absolute",
-                top: "$3",
-                right: "$3",
-                size: "$2",
-                circular: true,
-                icon: X
-              }
-            ) }) })
-          ]
-        },
-        "content"
-      )
-    ] })
-  ] });
-}
-export {
-  DialogDemo
-};
-//# sourceMappingURL=DialogDemo.mjs.map

package/dist/esm/FormsDemo.mjs

@@ -1,36 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Button, Form, H4, Spinner } from "tamagui";
-function FormsDemo(props) {
-  const [status, setStatus] = useState("off");
-  useEffect(() => {
-    if (status === "submitting") {
-      const timer = setTimeout(() => setStatus("off"), 2e3);
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [status]);
-  return /* @__PURE__ */ jsxs(
-    Form,
-    {
-      alignItems: "center",
-      minWidth: 300,
-      space: true,
-      onSubmit: () => setStatus("submitting"),
-      borderWidth: 1,
-      borderRadius: "$4",
-      backgroundColor: "$background",
-      borderColor: "$borderColor",
-      padding: "$8",
-      children: [
-        /* @__PURE__ */ jsx(H4, { children: status[0].toUpperCase() + status.slice(1) }),
-        /* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ jsx(Button, { icon: status === "submitting" ? () => /* @__PURE__ */ jsx(Spinner, {}) : void 0, children: "Submit" }) })
-      ]
-    }
-  );
-}
-export {
-  FormsDemo
-};
-//# sourceMappingURL=FormsDemo.mjs.map

package/dist/esm/GroupDemo.mjs

@@ -1,25 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Activity, Airplay } from "@tamagui/lucide-icons";
-import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
-function GroupDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$2", alignItems: "center", children: [
-    /* @__PURE__ */ jsxs(Group, { axis: "horizontal", children: [
-      /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "First" }) }),
-      /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Second" }) }),
-      /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Third" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(XGroup, { size: "$3", $gtSm: { size: "$5" }, children: [
-      /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { size: "$3", icon: Activity, children: "First" }) }),
-      /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { size: "$3", icon: Airplay, children: "Second" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(YGroup, { separator: /* @__PURE__ */ jsx(Separator, {}), children: [
-      /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { title: "First" }) }),
-      /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { title: "Second", subTitle: "Second subtitle" }) }),
-      /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { children: "Third" }) })
-    ] })
-  ] });
-}
-export {
-  GroupDemo
-};
-//# sourceMappingURL=GroupDemo.mjs.map

package/dist/esm/HeadingsDemo.mjs

@@ -1,16 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
-function HeadingsDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { alignSelf: "center", children: [
-    /* @__PURE__ */ jsx(H1, { children: "Heading 1" }),
-    /* @__PURE__ */ jsx(H2, { children: "Heading 2" }),
-    /* @__PURE__ */ jsx(H3, { children: "Heading 3" }),
-    /* @__PURE__ */ jsx(H4, { children: "Heading 4" }),
-    /* @__PURE__ */ jsx(H5, { children: "Heading 5" }),
-    /* @__PURE__ */ jsx(H6, { children: "Heading 6" })
-  ] });
-}
-export {
-  HeadingsDemo
-};
-//# sourceMappingURL=HeadingsDemo.mjs.map

package/dist/esm/ImageDemo.mjs

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Image } from "tamagui";
-function ImageDemo() {
-  return /* @__PURE__ */ jsx(
-    Image,
-    {
-      source: {
-        uri: "https://placekitten.com/200/300",
-        width: 200,
-        height: 300
-      }
-    }
-  );
-}
-export {
-  ImageDemo
-};
-//# sourceMappingURL=ImageDemo.mjs.map

package/dist/esm/InputsDemo.mjs

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

package/dist/esm/LabelDemo.mjs

@@ -1,18 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Input, Label, Switch, XStack, YStack } from "tamagui";
-function LabelDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", minWidth: 300, space: "$4", children: [
-    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(Label, { width: 90, htmlFor: "name", children: "Name" }),
-      /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(Label, { width: 90, htmlFor: "notify", children: "Notifications" }),
-      /* @__PURE__ */ jsx(Switch, { id: "notify", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
-    ] })
-  ] });
-}
-export {
-  LabelDemo
-};
-//# sourceMappingURL=LabelDemo.mjs.map

package/dist/esm/LinearGradientDemo.mjs

@@ -1,33 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { XStack } from "tamagui";
-import { LinearGradient } from "tamagui/linear-gradient";
-function LinearGradientDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
-    /* @__PURE__ */ jsx(
-      LinearGradient,
-      {
-        width: "$6",
-        height: "$6",
-        borderRadius: "$4",
-        colors: ["$red10", "$yellow10"],
-        start: [0, 1],
-        end: [0, 0]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      LinearGradient,
-      {
-        width: "$6",
-        height: "$6",
-        borderRadius: "$4",
-        colors: ["$background", "$color"],
-        start: [1, 1],
-        end: [0, 0]
-      }
-    )
-  ] });
-}
-export {
-  LinearGradientDemo
-};
-//# sourceMappingURL=LinearGradientDemo.mjs.map

package/dist/esm/ListItemDemo.mjs

@@ -1,47 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
-import { ListItem, Separator, XStack, YGroup } from "tamagui";
-function ListItemDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, paddingHorizontal: "$4", space: true, children: [
-    /* @__PURE__ */ jsx(ListItemDemo1, {}),
-    /* @__PURE__ */ jsx(ListItemDemo2, {})
-  ] });
-}
-function ListItemDemo1() {
-  return /* @__PURE__ */ jsxs(YGroup, { alignSelf: "center", bordered: true, width: 240, size: "$4", children: [
-    /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }) }),
-    /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }) }),
-    /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }) }),
-    /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" }) })
-  ] });
-}
-function ListItemDemo2() {
-  return /* @__PURE__ */ jsxs(YGroup, { alignSelf: "center", bordered: true, width: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
-    /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
-      ListItem,
-      {
-        hoverTheme: true,
-        pressTheme: true,
-        title: "Star",
-        subTitle: "Subtitle",
-        icon: Star,
-        iconAfter: ChevronRight
-      }
-    ) }),
-    /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
-      ListItem,
-      {
-        hoverTheme: true,
-        pressTheme: true,
-        title: "Moon",
-        subTitle: "Subtitle",
-        icon: Moon,
-        iconAfter: ChevronRight
-      }
-    ) })
-  ] });
-}
-export {
-  ListItemDemo
-};
-//# sourceMappingURL=ListItemDemo.mjs.map

package/dist/esm/LucideIconsDemo.mjs

@@ -1,52 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as LucideIcons from "@tamagui/lucide-icons";
-import { useMemo, useState } from "react";
-import { ScrollView } from "react-native";
-import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
-const lucideIcons = Object.keys(LucideIcons).map((name) => ({
-  key: name.toLowerCase(),
-  name,
-  Icon: LucideIcons[name]
-}));
-function LucideIconsDemo() {
-  const [searchRaw, setSearch] = useState("");
-  const search = useDebounceValue(searchRaw, 400);
-  const size = 100;
-  const iconsMemo = useMemo(
-    () => lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase())).map(({ Icon, name }) => /* @__PURE__ */ jsxs(
-      YStack,
-      {
-        height: size + 20,
-        alignItems: "center",
-        justifyContent: "center",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
-          /* @__PURE__ */ jsx(Spacer, {}),
-          /* @__PURE__ */ jsx(
-            Paragraph,
-            {
-              height: "$6",
-              wordWrap: "break-word",
-              maxWidth: "100%",
-              textAlign: "center",
-              paddingHorizontal: "$2",
-              size: "$1",
-              opacity: 0.5,
-              children: name
-            }
-          )
-        ]
-      },
-      name
-    )),
-    [search]
-  );
-  return /* @__PURE__ */ jsxs(YStack, { minWidth: "100%", padding: "$4", paddingBottom: "$0", space: true, children: [
-    /* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
-    /* @__PURE__ */ jsx(YStack, { height: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
-  ] });
-}
-export {
-  LucideIconsDemo
-};
-//# sourceMappingURL=LucideIconsDemo.mjs.map

package/dist/esm/PopoverDemo.mjs

@@ -1,76 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
-import {
-  Adapt,
-  Button,
-  Input,
-  Label,
-  Popover,
-  XStack,
-  YStack
-} from "tamagui";
-function PopoverDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { space: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
-    /* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
-    /* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
-    /* @__PURE__ */ jsx(Demo, { placement: "right", Icon: ChevronRight, Name: "right-popover" })
-  ] });
-}
-function Demo({
-  Icon,
-  Name,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Popover, { size: "$5", allowFlip: true, ...props, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { icon: Icon }) }),
-    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
-      /* @__PURE__ */ jsx(Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
-      /* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
-    ] }) }),
-    /* @__PURE__ */ jsxs(
-      Popover.Content,
-      {
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        enterStyle: { x: 0, y: -10, opacity: 0 },
-        exitStyle: { x: 0, y: -10, opacity: 0 },
-        x: 0,
-        y: 0,
-        opacity: 1,
-        animation: [
-          "quick",
-          {
-            opacity: {
-              overshootClamping: true
-            }
-          }
-        ],
-        elevate: true,
-        children: [
-          /* @__PURE__ */ jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
-          /* @__PURE__ */ jsxs(YStack, { space: "$3", children: [
-            /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
-              /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),
-              /* @__PURE__ */ jsx(Input, { size: "$3", id: Name })
-            ] }),
-            /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "$3",
-                onPress: () => {
-                },
-                children: "Submit"
-              }
-            ) })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-export {
-  Demo,
-  PopoverDemo
-};
-//# sourceMappingURL=PopoverDemo.mjs.map

package/dist/esm/ProgressDemo.mjs

@@ -1,59 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
-function ProgressDemo() {
-  const [size, setSize] = useState(4);
-  const [progress, setProgress] = useState(20);
-  const sizeProp = `$${size}`;
-  useEffect(() => {
-    const timer = setTimeout(() => setProgress(60), 1e3);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(YStack, { height: 60, alignItems: "center", space: true, children: [
-      /* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
-        "Size: ",
-        size
-      ] }),
-      /* @__PURE__ */ jsx(Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ jsx(Progress.Indicator, { animation: "bouncy" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      XStack,
-      {
-        alignItems: "center",
-        space: true,
-        position: "absolute",
-        bottom: "$3",
-        left: "$4",
-        $xxs: { display: "none" },
-        children: [
-          /* @__PURE__ */ jsxs(
-            Slider,
-            {
-              size: "$2",
-              width: 130,
-              defaultValue: [4],
-              min: 2,
-              max: 6,
-              step: 1,
-              onValueChange: ([val]) => {
-                setSize(val);
-              },
-              children: [
-                /* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
-                /* @__PURE__ */ jsx(Slider.Thumb, { circular: true, index: 0 })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setProgress((prev) => (prev + 20) % 100), children: "Load" })
-        ]
-      }
-    )
-  ] });
-}
-export {
-  ProgressDemo
-};
-//# sourceMappingURL=ProgressDemo.mjs.map

package/dist/esm/RadioGroupDemo.mjs

@@ -1,21 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Label, RadioGroup, XStack, YStack } from "tamagui";
-function RadioGroupDemo() {
-  return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { width: 300, alignItems: "center", space: "$2", children: [
-    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$3", value: "2", label: "Second value" }),
-    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$4", value: "3", label: "Third value" }),
-    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$5", value: "4", label: "Fourth value" })
-  ] }) });
-}
-function RadioGroupItemWithLabel(props) {
-  const id = `radiogroup-${props.value}`;
-  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", space: "$4", children: [
-    /* @__PURE__ */ jsx(RadioGroup.Item, { value: props.value, id, size: props.size, children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {}) }),
-    /* @__PURE__ */ jsx(Label, { size: props.size, htmlFor: id, children: props.label })
-  ] });
-}
-export {
-  RadioGroupDemo,
-  RadioGroupItemWithLabel
-};
-//# sourceMappingURL=RadioGroupDemo.mjs.map

package/dist/esm/ReplaceThemeDemo.mjs

@@ -1,49 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { addTheme, replaceTheme } from "@tamagui/theme";
-import { useState } from "react";
-import {
-  Button,
-  Square,
-  Theme,
-  XStack,
-  YStack,
-  useForceUpdate,
-  useIsomorphicLayoutEffect
-} from "tamagui";
-function ReplaceThemeDemo() {
-  const [theme, setTheme] = useState();
-  const update = useForceUpdate();
-  useIsomorphicLayoutEffect(() => {
-    addTheme({
-      name: "mytheme",
-      insertCSS: true,
-      theme: {
-        color: "red",
-        color2: "green"
-      }
-    });
-    setTheme("mytheme");
-  }, []);
-  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: true, children: [
-    /* @__PURE__ */ jsx(XStack, { gap: "$5", children: /* @__PURE__ */ jsx(Theme, { name: theme ?? null, children: /* @__PURE__ */ jsx(Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onPress: () => {
-          replaceTheme({
-            name: "mytheme",
-            theme: {
-              color: "blue"
-            }
-          });
-          update();
-        },
-        children: "Replace theme to only have $color: blue"
-      }
-    )
-  ] });
-}
-export {
-  ReplaceThemeDemo
-};
-//# sourceMappingURL=ReplaceThemeDemo.mjs.map