@tamagui/demos 1.88.12 → 1.89.0-1706308641099

package/dist/jsx/InputsDemo.mjs

@@ -0,0 +1,36 @@
+import { Button, Input, TextArea, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+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, {
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    space: "$2",
+    children: [/* @__PURE__ */jsx(Input, {
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */jsx(Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}
+export { InputsDemo };

package/dist/jsx/LabelDemo.mjs

@@ -0,0 +1,36 @@
+import { Input, Label, Switch, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 };

package/dist/jsx/LinearGradientDemo.mjs

@@ -0,0 +1,24 @@
+import { XStack } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LinearGradientDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    space: !0,
+    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 };

package/dist/jsx/ListItemDemo.mjs

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

package/dist/jsx/LucideIconsDemo.mjs

@@ -0,0 +1,58 @@
+import * as LucideIcons from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import { ScrollView } from "react-native-web";
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
+import { Grid } from "./Grid.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const lucideIcons = Object.keys(
+// vite tree shaking workaround
+typeof LucideIcons < "u" ? LucideIcons : {}).map(name => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: LucideIcons[name]
+}));
+function LucideIconsDemo() {
+  const [searchRaw, setSearch] = useState(""),
+    search = useDebounceValue(searchRaw, 400),
+    size = 100,
+    iconsMemo = useMemo(() => lucideIcons.filter(x => x.key.includes(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: !0,
+    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 };

package/dist/jsx/PopoverDemo.mjs

@@ -0,0 +1,106 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import { Adapt, Button, Input, Label, Popover, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+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: !0,
+    ...props,
+    children: [/* @__PURE__ */jsx(Popover.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */jsx(Button, {
+        icon: Icon
+      })
+    }), /* @__PURE__ */jsx(Adapt, {
+      when: "sm",
+      platform: "touch",
+      children: /* @__PURE__ */jsxs(Popover.Sheet, {
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        children: [/* @__PURE__ */jsx(Popover.Sheet.Frame, {
+          padding: "$4",
+          children: /* @__PURE__ */jsx(Adapt.Contents, {})
+        }), /* @__PURE__ */jsx(Popover.Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */jsxs(Popover.Content, {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      enterStyle: {
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        y: -10,
+        opacity: 0
+      },
+      elevate: !0,
+      animation: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      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: !0,
+          children: /* @__PURE__ */jsx(Button, {
+            size: "$3",
+            onPress: () => {},
+            children: "Submit"
+          })
+        })]
+      })]
+    })]
+  });
+}
+export { Demo, PopoverDemo };

package/dist/jsx/ProgressDemo.mjs

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ProgressDemo() {
+  const [size, setSize] = useState(4),
+    [progress, setProgress] = useState(20),
+    sizeProp = `$${size}`;
+  return useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []), /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(YStack, {
+      height: 60,
+      alignItems: "center",
+      space: !0,
+      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: !0,
+      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: !0,
+          index: 0
+        })]
+      }), /* @__PURE__ */jsx(Button, {
+        size: "$2",
+        onPress: () => setProgress(prev => (prev + 20) % 100),
+        children: "Load"
+      })]
+    })]
+  });
+}
+export { ProgressDemo };

package/dist/jsx/RadioGroupDemo.mjs

@@ -0,0 +1,46 @@
+import { Label, RadioGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroupDemo() {
+  return /* @__PURE__ */jsx(RadioGroup, {
+    "aria-labelledby": "Select one item",
+    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 };

package/dist/jsx/ReplaceThemeDemo.mjs

@@ -0,0 +1,43 @@
+import { addTheme, replaceTheme } from "@tamagui/theme";
+import { useState } from "react";
+import { Button, Square, Theme, XStack, YStack, useForceUpdate, useIsomorphicLayoutEffect } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReplaceThemeDemo() {
+  const [theme, setTheme] = useState(),
+    update = useForceUpdate();
+  return useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), /* @__PURE__ */jsxs(YStack, {
+    alignItems: "center",
+    space: !0,
+    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 };

package/dist/jsx/ScrollViewDemo.mjs

@@ -0,0 +1,50 @@
+import { Circle, ScrollView, Square, XStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollViewDemo() {
+  return /* @__PURE__ */jsx(ScrollView, {
+    maxHeight: 250,
+    width: "75%",
+    backgroundColor: "$background",
+    padding: "$4",
+    borderRadius: "$4",
+    children: /* @__PURE__ */jsxs(XStack, {
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center",
+      children: [/* @__PURE__ */jsx(Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$red9"
+      }), /* @__PURE__ */jsx(Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$orange9"
+      }), /* @__PURE__ */jsx(Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$yellow9"
+      }), /* @__PURE__ */jsx(Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$green9"
+      }), /* @__PURE__ */jsx(Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$blue9"
+      }), /* @__PURE__ */jsx(Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$purple9"
+      }), /* @__PURE__ */jsx(Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$pink9"
+      }), /* @__PURE__ */jsx(Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$red9"
+      })]
+    })
+  });
+}
+export { ScrollViewDemo };