@tamagui/demos 1.116.0 → 1.116.2

package/dist/cjs/ProgressDemo.js

@@ -0,0 +1,88 @@
+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"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=ProgressDemo.js.map

package/dist/cjs/RadioGroupDemo.js

@@ -0,0 +1,36 @@
+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 })
+  ] });
+}
+//# sourceMappingURL=RadioGroupDemo.js.map

package/dist/cjs/RadioGroupHeadlessDemo.js

@@ -0,0 +1,117 @@
+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
+  }
+});
+//# sourceMappingURL=RadioGroupHeadlessDemo.js.map

package/dist/cjs/RadioGroupUnstyledDemo.js

@@ -0,0 +1,107 @@
+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 })
+  ] });
+}
+//# sourceMappingURL=RadioGroupUnstyledDemo.js.map

package/dist/cjs/ReplaceThemeDemo.js

@@ -0,0 +1,58 @@
+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"
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=ReplaceThemeDemo.js.map

package/dist/cjs/ScrollViewDemo.js

@@ -0,0 +1,43 @@
+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" })
+      ] })
+    }
+  );
+}
+//# sourceMappingURL=ScrollViewDemo.js.map

package/dist/cjs/SelectDemo.js

@@ -0,0 +1,190 @@
+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 SelectDemo_exports = {};
+__export(SelectDemo_exports, {
+  SelectDemo: () => SelectDemo,
+  SelectDemoItem: () => SelectDemoItem
+});
+module.exports = __toCommonJS(SelectDemo_exports);
+var import_react = __toESM(require("react")), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_linear_gradient = require("tamagui/linear-gradient"), import_jsx_runtime = require("react/jsx-runtime");
+function SelectDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { gap: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", gap: "$4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { htmlFor: "select-demo-1", f: 1, miw: 80, children: "Custom" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectDemoItem, { id: "select-demo-1" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", gap: "$4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { htmlFor: "select-demo-2", f: 1, miw: 80, children: "Native" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectDemoItem, { id: "select-demo-2", native: !0 })
+    ] })
+  ] });
+}
+function SelectDemoItem(props) {
+  const [val, setVal] = import_react.default.useState("apple");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select, { value: val, onValueChange: setVal, disablePreventBodyScroll: !0, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Trigger, { width: 220, iconAfter: import_lucide_icons.ChevronDown, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, { placeholder: "Something" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.Sheet,
+      {
+        native: !!props.native,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        animationConfig: {
+          type: "spring",
+          damping: 20,
+          mass: 1.2,
+          stiffness: 250
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tamagui.Sheet.Overlay,
+            {
+              animation: "lazy",
+              enterStyle: { opacity: 0 },
+              exitStyle: { opacity: 0 }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Content, { zIndex: 2e5, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_tamagui.Select.ScrollUpButton,
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          width: "100%",
+          height: "$3",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronUp, { size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_linear_gradient.LinearGradient,
+              {
+                start: [0, 0],
+                end: [0, 1],
+                fullscreen: !0,
+                colors: ["$background", "transparent"],
+                borderRadius: "$4"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_tamagui.Select.Viewport,
+        {
+          minWidth: 200,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, { children: "Fruits" }),
+              import_react.default.useMemo(
+                () => items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_tamagui.Select.Item,
+                  {
+                    index: i,
+                    value: item.name.toLowerCase(),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, { children: item.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, { size: 16 }) })
+                    ]
+                  },
+                  item.name
+                )),
+                [items]
+              )
+            ] }),
+            props.native && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_tamagui.YStack,
+              {
+                position: "absolute",
+                right: 0,
+                top: 0,
+                bottom: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                width: "$4",
+                pointerEvents: "none",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_lucide_icons.ChevronDown,
+                  {
+                    size: (0, import_tamagui.getFontSize)(props.size ?? "$true")
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_tamagui.Select.ScrollDownButton,
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          width: "100%",
+          height: "$3",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_linear_gradient.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" }
+];
+//# sourceMappingURL=SelectDemo.js.map