@tamagui/demos 1.114.4 → 1.115.0

package/dist/cjs/SelectDemo.cjs

@@ -0,0 +1,228 @@
+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"
+}];

package/dist/cjs/SeparatorDemo.cjs

@@ -0,0 +1,60 @@
+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 SeparatorDemo_exports = {};
+__export(SeparatorDemo_exports, {
+  SeparatorDemo: () => SeparatorDemo
+});
+module.exports = __toCommonJS(SeparatorDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function SeparatorDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width: "100%",
+    maxWidth: 300,
+    marginHorizontal: 15,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      fontWeight: "800",
+      children: "Tamagui"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      children: "A cross-platform component library."
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      marginVertical: 15
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      height: 20,
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        children: "Blog"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+        alignSelf: "stretch",
+        vertical: !0,
+        marginHorizontal: 15
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        children: "Docs"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+        alignSelf: "stretch",
+        vertical: !0,
+        marginHorizontal: 15
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        children: "Source"
+      })]
+    })]
+  });
+}

package/dist/cjs/ShapesDemo.cjs

@@ -0,0 +1,42 @@
+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 ShapesDemo_exports = {};
+__export(ShapesDemo_exports, {
+  ShapesDemo: () => ShapesDemo
+});
+module.exports = __toCommonJS(ShapesDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ShapesDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    padding: "$2",
+    space: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      size: 100,
+      backgroundColor: "$color",
+      elevation: "$4"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
+      size: 100,
+      backgroundColor: "$color",
+      elevation: "$4"
+    })]
+  });
+}

package/dist/cjs/SheetDemo.cjs

@@ -0,0 +1,176 @@
+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 SheetDemo_exports = {};
+__export(SheetDemo_exports, {
+  SheetDemo: () => SheetDemo
+});
+module.exports = __toCommonJS(SheetDemo_exports);
+var import_react = __toESM(require("react")),
+  import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_sheet = require("@tamagui/sheet"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const spModes = ["percent", "constant", "fit", "mixed"],
+  SheetDemo = () => {
+    const [position, setPosition] = import_react.default.useState(0),
+      [open, setOpen] = import_react.default.useState(!1),
+      [modal, setModal] = import_react.default.useState(!0),
+      [innerOpen, setInnerOpen] = import_react.default.useState(!1),
+      [snapPointsMode, setSnapPointsMode] = import_react.default.useState("percent"),
+      [mixedFitDemo, setMixedFitDemo] = import_react.default.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__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        space: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          space: !0,
+          $sm: {
+            flexDirection: "column",
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            onPress: () => setOpen(!0),
+            children: "Open"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            onPress: () => setModal(x => !x),
+            children: modal ? "Type: Modal" : "Type: Inline"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            onPress: () => setSnapPointsMode(prev => spModes[(spModes.indexOf(prev) + 1) % spModes.length]),
+            children: `Mode: ${{
+              percent: "Percentage",
+              constant: "Constant",
+              fit: "Fit",
+              mixed: "Mixed"
+            }[snapPointsMode]}`
+          })]
+        }), isMixed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          onPress: () => setMixedFitDemo(x => !x),
+          children: `Snap Points: ${JSON.stringify(snapPoints)}`
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          paddingVertical: "$2.5",
+          justifyContent: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
+        forceRemoveScrollEnabled: open,
+        modal,
+        open,
+        onOpenChange: setOpen,
+        snapPoints,
+        snapPointsMode,
+        dismissOnSnapToBottom: !0,
+        position,
+        onPositionChange: setPosition,
+        zIndex: 1e5,
+        animation: "medium",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet.Frame, {
+          padding: "$4",
+          justifyContent: "center",
+          alignItems: "center",
+          space: "$5",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$6",
+            circular: !0,
+            icon: import_lucide_icons.ChevronDown,
+            onPress: () => setOpen(!1)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+            width: 200
+          }), modal && isPercent && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(InnerSheet, {
+              open: innerOpen,
+              onOpenChange: setInnerOpen
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+              size: "$6",
+              circular: !0,
+              icon: import_lucide_icons.ChevronUp,
+              onPress: () => setInnerOpen(!0)
+            })]
+          })]
+        })]
+      })]
+    });
+  };
+function InnerSheet(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
+    animation: "medium",
+    modal: !0,
+    snapPoints: [90],
+    dismissOnSnapToBottom: !0,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
+      animation: "medium",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      space: "$5",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.ScrollView, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          p: "$5",
+          gap: "$8",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$6",
+            circular: !0,
+            alignSelf: "center",
+            icon: import_lucide_icons.ChevronDown,
+            onPress: () => props.onOpenChange?.(!1)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+            children: "Hello world"
+          }), [1, 2, 3, 4, 5, 6, 7, 8].map(i => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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))]
+        })
+      })
+    })]
+  });
+}

package/dist/cjs/SliderDemo.cjs

@@ -0,0 +1,58 @@
+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 SliderDemo_exports = {};
+__export(SliderDemo_exports, {
+  SliderDemo: () => SliderDemo
+});
+module.exports = __toCommonJS(SliderDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function SliderDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    height: 200,
+    alignItems: "center",
+    gap: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleSlider, {
+      height: 200,
+      orientation: "vertical"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleSlider, {
+      width: 200
+    })]
+  });
+}
+function SimpleSlider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, {
+      size: "$2",
+      index: 0,
+      circular: !0
+    }), children]
+  });
+}

package/dist/cjs/SpinnerDemo.cjs

@@ -0,0 +1,41 @@
+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 SpinnerDemo_exports = {};
+__export(SpinnerDemo_exports, {
+  SpinnerDemo: () => SpinnerDemo
+});
+module.exports = __toCommonJS(SpinnerDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function SpinnerDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    padding: "$3",
+    space: "$4",
+    alignItems: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+      size: "small",
+      color: "$green10"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+      size: "large",
+      color: "$orange10"
+    })]
+  });
+}