@tamagui/demos 1.88.12 → 1.89.0-1706308641099

package/dist/esm/SelectDemo.mjs

@@ -0,0 +1,188 @@
+import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import { Adapt, Label, Select, Sheet, XStack, YStack, getFontSize } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    space: !0,
+    children: [/* @__PURE__ */jsxs(XStack, {
+      ai: "center",
+      space: !0,
+      children: [/* @__PURE__ */jsx(Label, {
+        f: 1,
+        fb: 0,
+        children: "Custom"
+      }), /* @__PURE__ */jsx(SelectDemoItem, {})]
+    }), /* @__PURE__ */jsxs(XStack, {
+      ai: "center",
+      space: !0,
+      children: [/* @__PURE__ */jsx(Label, {
+        f: 1,
+        fb: 0,
+        children: "Native"
+      }), /* @__PURE__ */jsx(SelectDemoItem, {
+        native: !0
+      })]
+    })]
+  });
+}
+function SelectDemoItem(props) {
+  const [val, setVal] = useState("apple");
+  return /* @__PURE__ */jsxs(Select, {
+    id: "food",
+    value: val,
+    onValueChange: setVal,
+    disablePreventBodyScroll: !0,
+    ...props,
+    children: [/* @__PURE__ */jsx(Select.Trigger, {
+      width: 220,
+      iconAfter: ChevronDown,
+      children: /* @__PURE__ */jsx(Select.Value, {
+        placeholder: "Something"
+      })
+    }), /* @__PURE__ */jsx(Adapt, {
+      when: "sm",
+      platform: "touch",
+      children: /* @__PURE__ */jsxs(Sheet, {
+        native: !!props.native,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        animationConfig: {
+          type: "spring",
+          damping: 20,
+          mass: 1.2,
+          stiffness: 250
+        },
+        children: [/* @__PURE__ */jsx(Sheet.Frame, {
+          children: /* @__PURE__ */jsx(Sheet.ScrollView, {
+            children: /* @__PURE__ */jsx(Adapt.Contents, {})
+          })
+        }), /* @__PURE__ */jsx(Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */jsxs(Select.Content, {
+      zIndex: 2e5,
+      children: [/* @__PURE__ */jsxs(Select.ScrollUpButton, {
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */jsx(YStack, {
+          zIndex: 10,
+          children: /* @__PURE__ */jsx(ChevronUp, {
+            size: 20
+          })
+        }), /* @__PURE__ */jsx(LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["$background", "transparent"],
+          borderRadius: "$4"
+        })]
+      }), /* @__PURE__ */jsxs(Select.Viewport, {
+        minWidth: 200,
+        children: [/* @__PURE__ */jsxs(Select.Group, {
+          children: [/* @__PURE__ */jsx(Select.Label, {
+            children: "Fruits"
+          }), useMemo(() => items.map((item, i) => /* @__PURE__ */jsxs(Select.Item, {
+            index: i,
+            value: item.name.toLowerCase(),
+            children: [/* @__PURE__ */jsx(Select.ItemText, {
+              children: item.name
+            }), /* @__PURE__ */jsx(Select.ItemIndicator, {
+              marginLeft: "auto",
+              children: /* @__PURE__ */jsx(Check, {
+                size: 16
+              })
+            })]
+          }, item.name)), [items])]
+        }), props.native && /* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          width: "$4",
+          pointerEvents: "none",
+          children: /* @__PURE__ */jsx(ChevronDown, {
+            size: getFontSize(props.size ?? "$true")
+          })
+        })]
+      }), /* @__PURE__ */jsxs(Select.ScrollDownButton, {
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */jsx(YStack, {
+          zIndex: 10,
+          children: /* @__PURE__ */jsx(ChevronDown, {
+            size: 20
+          })
+        }), /* @__PURE__ */jsx(LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["transparent", "$background"],
+          borderRadius: "$4"
+        })]
+      })]
+    })]
+  });
+}
+const items = [{
+  name: "Apple"
+}, {
+  name: "Pear"
+}, {
+  name: "Blackberry"
+}, {
+  name: "Peach"
+}, {
+  name: "Apricot"
+}, {
+  name: "Melon"
+}, {
+  name: "Honeydew"
+}, {
+  name: "Starfruit"
+}, {
+  name: "Blueberry"
+}, {
+  name: "Raspberry"
+}, {
+  name: "Strawberry"
+}, {
+  name: "Mango"
+}, {
+  name: "Pineapple"
+}, {
+  name: "Lime"
+}, {
+  name: "Lemon"
+}, {
+  name: "Coconut"
+}, {
+  name: "Guava"
+}, {
+  name: "Papaya"
+}, {
+  name: "Orange"
+}, {
+  name: "Grape"
+}, {
+  name: "Jackfruit"
+}, {
+  name: "Durian"
+}];
+export { SelectDemo, SelectDemoItem };

package/dist/esm/SeparatorDemo.mjs

@@ -0,0 +1,36 @@
+import { Paragraph, Separator, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SeparatorDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    width: "100%",
+    maxWidth: 300,
+    marginHorizontal: 15,
+    children: [/* @__PURE__ */jsx(Paragraph, {
+      fontWeight: "800",
+      children: "Tamagui"
+    }), /* @__PURE__ */jsx(Paragraph, {
+      children: "A cross-platform component library."
+    }), /* @__PURE__ */jsx(Separator, {
+      marginVertical: 15
+    }), /* @__PURE__ */jsxs(XStack, {
+      height: 20,
+      alignItems: "center",
+      children: [/* @__PURE__ */jsx(Paragraph, {
+        children: "Blog"
+      }), /* @__PURE__ */jsx(Separator, {
+        alignSelf: "stretch",
+        vertical: !0,
+        marginHorizontal: 15
+      }), /* @__PURE__ */jsx(Paragraph, {
+        children: "Docs"
+      }), /* @__PURE__ */jsx(Separator, {
+        alignSelf: "stretch",
+        vertical: !0,
+        marginHorizontal: 15
+      }), /* @__PURE__ */jsx(Paragraph, {
+        children: "Source"
+      })]
+    })]
+  });
+}
+export { SeparatorDemo };

package/dist/esm/ShapesDemo.mjs

@@ -0,0 +1,18 @@
+import { Circle, Square, XStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ShapesDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    padding: "$2",
+    space: "$4",
+    children: [/* @__PURE__ */jsx(Square, {
+      size: 100,
+      backgroundColor: "$color",
+      elevation: "$4"
+    }), /* @__PURE__ */jsx(Circle, {
+      size: 100,
+      backgroundColor: "$color",
+      elevation: "$4"
+    })]
+  });
+}
+export { ShapesDemo };

package/dist/esm/SheetDemo.mjs

@@ -0,0 +1,141 @@
+import { ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
+import { Sheet } from "@tamagui/sheet";
+import { useState } from "react";
+import { Button, H2, Input, Paragraph, XStack, YStack } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const spModes = ["percent", "constant", "fit", "mixed"],
+  SheetDemo = () => {
+    const [position, setPosition] = useState(0),
+      [open, setOpen] = useState(!1),
+      [modal, setModal] = useState(!0),
+      [innerOpen, setInnerOpen] = useState(!1),
+      [snapPointsMode, setSnapPointsMode] = useState("percent"),
+      [mixedFitDemo, setMixedFitDemo] = useState(!1),
+      isPercent = snapPointsMode === "percent",
+      isConstant = snapPointsMode === "constant",
+      isFit = snapPointsMode === "fit",
+      isMixed = snapPointsMode === "mixed",
+      snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsxs(YStack, {
+        space: !0,
+        children: [/* @__PURE__ */jsxs(XStack, {
+          space: !0,
+          $sm: {
+            flexDirection: "column",
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */jsx(Button, {
+            onPress: () => setOpen(!0),
+            children: "Open"
+          }), /* @__PURE__ */jsx(Button, {
+            onPress: () => setModal(x => !x),
+            children: modal ? "Type: Modal" : "Type: Inline"
+          }), /* @__PURE__ */jsx(Button, {
+            onPress: () => setSnapPointsMode(prev => spModes[(spModes.indexOf(prev) + 1) % spModes.length]),
+            children: `Mode: ${{
+              percent: "Percentage",
+              constant: "Constant",
+              fit: "Fit",
+              mixed: "Mixed"
+            }[snapPointsMode]}`
+          })]
+        }), isMixed ? /* @__PURE__ */jsx(Button, {
+          onPress: () => setMixedFitDemo(x => !x),
+          children: `Snap Points: ${JSON.stringify(snapPoints)}`
+        }) : /* @__PURE__ */jsx(XStack, {
+          paddingVertical: "$2.5",
+          justifyContent: "center",
+          children: /* @__PURE__ */jsx(Paragraph, {
+            children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
+          })
+        })]
+      }), /* @__PURE__ */jsxs(Sheet, {
+        forceRemoveScrollEnabled: open,
+        modal,
+        open,
+        onOpenChange: setOpen,
+        snapPoints,
+        snapPointsMode,
+        dismissOnSnapToBottom: !0,
+        position,
+        onPositionChange: setPosition,
+        zIndex: 1e5,
+        animation: "medium",
+        children: [/* @__PURE__ */jsx(Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */jsx(Sheet.Handle, {}), /* @__PURE__ */jsxs(Sheet.Frame, {
+          padding: "$4",
+          justifyContent: "center",
+          alignItems: "center",
+          space: "$5",
+          children: [/* @__PURE__ */jsx(Button, {
+            size: "$6",
+            circular: !0,
+            icon: ChevronDown,
+            onPress: () => setOpen(!1)
+          }), /* @__PURE__ */jsx(Input, {
+            width: 200
+          }), modal && isPercent && /* @__PURE__ */jsxs(Fragment, {
+            children: [/* @__PURE__ */jsx(InnerSheet, {
+              open: innerOpen,
+              onOpenChange: setInnerOpen
+            }), /* @__PURE__ */jsx(Button, {
+              size: "$6",
+              circular: !0,
+              icon: ChevronUp,
+              onPress: () => setInnerOpen(!0)
+            })]
+          })]
+        })]
+      })]
+    });
+  };
+function InnerSheet(props) {
+  return /* @__PURE__ */jsxs(Sheet, {
+    animation: "medium",
+    modal: !0,
+    snapPoints: [90],
+    dismissOnSnapToBottom: !0,
+    ...props,
+    children: [/* @__PURE__ */jsx(Sheet.Overlay, {
+      animation: "medium",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      }
+    }), /* @__PURE__ */jsx(Sheet.Handle, {}), /* @__PURE__ */jsx(Sheet.Frame, {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      space: "$5",
+      children: /* @__PURE__ */jsx(Sheet.ScrollView, {
+        children: /* @__PURE__ */jsxs(YStack, {
+          p: "$5",
+          gap: "$8",
+          children: [/* @__PURE__ */jsx(Button, {
+            size: "$6",
+            circular: !0,
+            alignSelf: "center",
+            icon: ChevronDown,
+            onPress: () => props.onOpenChange?.(!1)
+          }), /* @__PURE__ */jsx(H2, {
+            children: "Hello world"
+          }), [1, 2, 3, 4, 5, 6, 7, 8].map(i => /* @__PURE__ */jsx(Paragraph, {
+            size: "$8",
+            children: "Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint."
+          }, i))]
+        })
+      })
+    })]
+  });
+}
+export { SheetDemo };

package/dist/esm/SliderDemo.mjs

@@ -0,0 +1,34 @@
+import { Slider, XStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SliderDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    height: 200,
+    alignItems: "center",
+    space: "$8",
+    children: [/* @__PURE__ */jsx(SimpleSlider, {
+      height: 200,
+      orientation: "vertical"
+    }), /* @__PURE__ */jsx(SimpleSlider, {
+      width: 200
+    })]
+  });
+}
+function SimpleSlider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */jsxs(Slider, {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    ...props,
+    children: [/* @__PURE__ */jsx(Slider.Track, {
+      children: /* @__PURE__ */jsx(Slider.TrackActive, {})
+    }), /* @__PURE__ */jsx(Slider.Thumb, {
+      index: 0,
+      circular: !0,
+      elevate: !0
+    }), children]
+  });
+}
+export { SliderDemo };

package/dist/esm/SpinnerDemo.mjs

@@ -0,0 +1,17 @@
+import { Spinner, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SpinnerDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    padding: "$3",
+    space: "$4",
+    alignItems: "center",
+    children: [/* @__PURE__ */jsx(Spinner, {
+      size: "small",
+      color: "$green10"
+    }), /* @__PURE__ */jsx(Spinner, {
+      size: "large",
+      color: "$orange10"
+    })]
+  });
+}
+export { SpinnerDemo };

package/dist/esm/StacksDemo.mjs

@@ -0,0 +1,80 @@
+import { XStack, YStack, ZStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StacksDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    maxWidth: 250,
+    padding: "$2",
+    alignSelf: "center",
+    space: !0,
+    children: [/* @__PURE__ */jsxs(YStack, {
+      flex: 1,
+      space: "$2",
+      borderWidth: 2,
+      borderColor: "$color",
+      borderRadius: "$4",
+      padding: "$2",
+      children: [/* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color",
+        borderRadius: "$3",
+        padding: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color",
+        borderRadius: "$3",
+        padding: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color",
+        borderRadius: "$3",
+        padding: "$2"
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      flex: 1,
+      space: "$2",
+      borderWidth: 2,
+      borderColor: "$color",
+      borderRadius: "$4",
+      padding: "$2",
+      children: [/* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color",
+        borderRadius: "$3",
+        padding: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color",
+        borderRadius: "$3",
+        padding: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color",
+        borderRadius: "$3",
+        padding: "$2"
+      })]
+    }), /* @__PURE__ */jsxs(ZStack, {
+      maxWidth: 50,
+      maxHeight: 85,
+      width: 100,
+      flex: 1,
+      children: [/* @__PURE__ */jsx(YStack, {
+        fullscreen: !0,
+        borderRadius: "$4",
+        padding: "$2",
+        borderColor: "$color",
+        borderWidth: 2
+      }), /* @__PURE__ */jsx(YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 10,
+        x: 10,
+        borderWidth: 2,
+        borderRadius: "$4",
+        padding: "$2"
+      }), /* @__PURE__ */jsx(YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 20,
+        x: 20,
+        borderWidth: 2,
+        borderRadius: "$4",
+        padding: "$2"
+      })]
+    })]
+  });
+}
+export { StacksDemo };

package/dist/esm/SwitchDemo.mjs

@@ -0,0 +1,81 @@
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwitchDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    width: 200,
+    alignItems: "center",
+    space: "$3",
+    children: [/* @__PURE__ */jsxs(XStack, {
+      space: "$3",
+      $xs: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$2"
+      }), /* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$2",
+        defaultChecked: !0
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      space: "$3",
+      $xs: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$3"
+      }), /* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$3",
+        defaultChecked: !0
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      space: "$3",
+      $xs: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$4"
+      }), /* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$4",
+        defaultChecked: !0
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      space: "$3",
+      $xs: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$5"
+      }), /* @__PURE__ */jsx(SwitchWithLabel, {
+        size: "$5",
+        defaultChecked: !0
+      })]
+    })]
+  });
+}
+function SwitchWithLabel(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
+  return /* @__PURE__ */jsxs(XStack, {
+    width: 200,
+    alignItems: "center",
+    space: "$4",
+    children: [/* @__PURE__ */jsx(Label, {
+      paddingRight: "$0",
+      minWidth: 90,
+      justifyContent: "flex-end",
+      size: props.size,
+      htmlFor: id,
+      children: "Accept"
+    }), /* @__PURE__ */jsx(Separator, {
+      minHeight: 20,
+      vertical: !0
+    }), /* @__PURE__ */jsx(Switch, {
+      id,
+      size: props.size,
+      defaultChecked: props.defaultChecked,
+      children: /* @__PURE__ */jsx(Switch.Thumb, {
+        animation: "quicker"
+      })
+    })]
+  });
+}
+export { SwitchDemo, SwitchWithLabel };