@tamagui/demos 1.114.4 → 1.115.0

package/dist/cjs/ProgressDemo.cjs

@@ -0,0 +1,106 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var ProgressDemo_exports = {};
+__export(ProgressDemo_exports, {
+  ProgressDemo: () => ProgressDemo
+});
+module.exports = __toCommonJS(ProgressDemo_exports);
+var import_react = __toESM(require("react")),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ProgressDemo() {
+  const [key, setKey] = import_react.default.useState(0),
+    [size, setSize] = import_react.default.useState(4),
+    [progress, setProgress] = import_react.default.useState(0),
+    sizeProp = `$${size}`;
+  return import_react.default.useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      height: 60,
+      alignItems: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
+        height: 30,
+        opacity: 0.5,
+        children: ["Size: ", size]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
+        size: sizeProp,
+        value: progress,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, {
+          animation: "bouncy"
+        })
+      }, key)]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: "$2",
+      position: "absolute",
+      bottom: "$3",
+      left: "$4",
+      $xxs: {
+        display: "none"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
+        size: "$2",
+        width: 130,
+        defaultValue: [4],
+        min: 2,
+        max: 6,
+        step: 1,
+        onValueChange: ([val]) => {
+          setSize(val);
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
+          borderWidth: 1,
+          borderColor: "$color5",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, {
+          circular: !0,
+          index: 0
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$2",
+        onPress: () => setProgress(prev => (prev + 20) % 100),
+        children: "Load"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$2",
+        onPress: () => {
+          setKey(Math.random()), setProgress(0);
+        },
+        children: "Reset"
+      })]
+    })]
+  });
+}

package/dist/cjs/RadioGroupDemo.cjs

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var RadioGroupDemo_exports = {};
+__export(RadioGroupDemo_exports, {
+  RadioGroupDemo: () => RadioGroupDemo,
+  RadioGroupItemWithLabel: () => RadioGroupItemWithLabel
+});
+module.exports = __toCommonJS(RadioGroupDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function RadioGroupDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup, {
+    "aria-labelledby": "Select one item",
+    defaultValue: "3",
+    name: "form",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      width: 300,
+      alignItems: "center",
+      space: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        size: "$3",
+        value: "2",
+        label: "Second value"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        size: "$4",
+        value: "3",
+        label: "Third value"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        size: "$5",
+        value: "4",
+        label: "Fourth value"
+      })]
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    width: 300,
+    alignItems: "center",
+    space: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Item, {
+      value: props.value,
+      id,
+      size: props.size,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Indicator, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+      size: props.size,
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}

package/dist/cjs/RadioGroupHeadlessDemo.cjs

@@ -0,0 +1,168 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var RadioGroupHeadlessDemo_exports = {};
+__export(RadioGroupHeadlessDemo_exports, {
+  RadioGroupHeadlessDemo: () => RadioGroupHeadlessDemo
+});
+module.exports = __toCommonJS(RadioGroupHeadlessDemo_exports);
+var import_radio_headless = require("@tamagui/radio-headless"),
+  import_roving_focus = require("@tamagui/roving-focus"),
+  import_react = __toESM(require("react")),
+  import_react_native = require("react-native-web"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const RadioGroupContext = import_react.default.createContext({}),
+  RadioGroupItemContext = import_react.default.createContext({
+    checked: !1,
+    disabled: !1
+  });
+function RadioGroupHeadlessDemo() {
+  const {
+    providerValue,
+    frameAttrs,
+    rovingFocusGroupAttrs
+  } = (0, import_radio_headless.useRadioGroup)({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+      ...rovingFocusGroupAttrs,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+        style: styles.radioGroup,
+        ...frameAttrs,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "2",
+          id: "2",
+          label: "First Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "3",
+          id: "3",
+          label: "Second Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "4",
+          id: "4",
+          label: "Third Value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItem(props) {
+  const theme = (0, import_tamagui.useTheme)(),
+    {
+      value,
+      id,
+      label
+    } = props,
+    {
+      providerValue,
+      native,
+      bubbleInput,
+      rovingFocusGroupAttrs,
+      frameAttrs,
+      isFormControl,
+      checked
+    } = (0, import_radio_headless.useRadioGroupItem)({
+      radioGroupContext: RadioGroupContext,
+      value,
+      id
+    });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: import_tamagui.isWeb && native ? bubbleInput : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+      style: styles.radioGroupItemContainer,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        ...rovingFocusGroupAttrs,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+          style: {
+            ...styles.radioGroupItem,
+            borderColor: theme.borderColor.get(),
+            ...(checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: theme.background.get()
+            })
+          },
+          ...frameAttrs,
+          onFocus: frameAttrs.onFocus,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemIndicator, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Text, {
+        style: {
+          color: theme.color.get()
+        },
+        children: label
+      }), isFormControl && bubbleInput]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  const theme = (0, import_tamagui.useTheme)(),
+    params = (0, import_radio_headless.useRadioGroupItemIndicator)({
+      radioGroupItemContext: RadioGroupItemContext,
+      disabled: !1
+    });
+  return params.checked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+    style: {
+      ...styles.radioGroupItemIndicator,
+      backgroundColor: theme.color.get()
+    },
+    ...params
+  }) : null;
+}
+const styles = import_react_native.StyleSheet.create({
+  radioGroup: {
+    flexDirection: "column",
+    gap: 20,
+    alignItems: "flex-start"
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  radioGroupItemIndicator: {
+    width: "35%",
+    height: "35%"
+  },
+  radioGroupItemContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  }
+});

package/dist/cjs/RadioGroupUnstyledDemo.cjs

@@ -0,0 +1,142 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var RadioGroupUnstyledDemo_exports = {};
+__export(RadioGroupUnstyledDemo_exports, {
+  RadioGroupUnstyledDemo: () => RadioGroupUnstyledDemo
+});
+module.exports = __toCommonJS(RadioGroupUnstyledDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_radio_group = require("@tamagui/radio-group"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
+  RadioGroupItemFrame = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
+    name: RADIO_GROUP_ITEM_NAME,
+    tag: "button",
+    borderRadius: 1e3,
+    backgroundColor: "$background",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    padding: 0,
+    hoverStyle: {
+      borderColor: "$borderColorHover",
+      backgroundColor: "$backgroundHover"
+    },
+    focusStyle: {
+      borderColor: "$borderColorHover",
+      backgroundColor: "$backgroundHover"
+    },
+    focusVisibleStyle: {
+      outlineStyle: "solid",
+      outlineWidth: 2,
+      outlineColor: "$outlineColor"
+    },
+    pressStyle: {
+      borderColor: "$borderColorFocus",
+      backgroundColor: "$backgroundFocus"
+    },
+    variants: {
+      disabled: {
+        true: {
+          pointerEvents: "none",
+          userSelect: "none",
+          cursor: "not-allowed",
+          hoverStyle: {
+            borderColor: "$borderColor",
+            backgroundColor: "$background"
+          },
+          pressStyle: {
+            borderColor: "$borderColor",
+            backgroundColor: "$background"
+          },
+          focusVisibleStyle: {
+            outlineWidth: 0
+          }
+        }
+      }
+    }
+  }),
+  RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator",
+  RadioGroupIndicatorFrame = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: "53%",
+    height: "53%",
+    borderRadius: 1e3,
+    backgroundColor: "$color",
+    pressTheme: !0
+  }),
+  RADIO_GROUP_NAME = "RadioGroup",
+  RadioGroupFrame = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
+    name: RADIO_GROUP_NAME,
+    variants: {
+      orientation: {
+        horizontal: {
+          flexDirection: "row",
+          spaceDirection: "horizontal"
+        },
+        vertical: {
+          flexDirection: "column",
+          spaceDirection: "vertical"
+        }
+      }
+    }
+  }),
+  RadioGroup = (0, import_radio_group.createRadioGroup)({
+    Frame: RadioGroupFrame,
+    Indicator: RadioGroupIndicatorFrame,
+    Item: RadioGroupItemFrame
+  });
+function RadioGroupUnstyledDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup, {
+    "aria-labelledby": "Select one item",
+    defaultValue: "3",
+    name: "form",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      width: 200,
+      alignItems: "center",
+      space: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        value: "2",
+        label: "Option One"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        value: "3",
+        label: "Option Two"
+      })]
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    width: 300,
+    alignItems: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup.Item, {
+      value: props.value,
+      id,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup.Indicator, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}

package/dist/cjs/ReplaceThemeDemo.cjs

@@ -0,0 +1,78 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var ReplaceThemeDemo_exports = {};
+__export(ReplaceThemeDemo_exports, {
+  ReplaceThemeDemo: () => ReplaceThemeDemo
+});
+module.exports = __toCommonJS(ReplaceThemeDemo_exports);
+var import_react = __toESM(require("react")),
+  import_theme = require("@tamagui/theme"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ReplaceThemeDemo() {
+  const [theme, setTheme] = import_react.default.useState(),
+    update = (0, import_tamagui.useForceUpdate)();
+  return (0, import_tamagui.useIsomorphicLayoutEffect)(() => {
+    (0, import_theme.addTheme)({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignItems: "center",
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: "$5",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+        name: theme ?? null,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+          borderRadius: "$8",
+          size: 100,
+          backgroundColor: "$color"
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      onPress: () => {
+        (0, import_theme.replaceTheme)({
+          name: "mytheme",
+          theme: {
+            color: "blue"
+          }
+        }), update();
+      },
+      children: "Replace theme to only have $color: blue"
+    })]
+  });
+}

package/dist/cjs/ScrollViewDemo.cjs

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ScrollViewDemo_exports = {};
+__export(ScrollViewDemo_exports, {
+  ScrollViewDemo: () => ScrollViewDemo
+});
+module.exports = __toCommonJS(ScrollViewDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ScrollViewDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+    maxHeight: 250,
+    width: "75%",
+    backgroundColor: "$background",
+    padding: "$4",
+    borderRadius: "$4",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$red9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$orange9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$yellow9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$green9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$blue9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$purple9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$pink9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
+        margin: "$4",
+        size: 120,
+        backgroundColor: "$red9"
+      })]
+    })
+  });
+}