@tamagui/demos 1.116.1 → 1.116.3

package/dist/cjs/SeparatorDemo.js

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

package/dist/cjs/ShapesDemo.js

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

package/dist/cjs/SheetDemo.js

@@ -0,0 +1,120 @@
+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_lucide_icons = require("@tamagui/lucide-icons"), import_sheet = require("@tamagui/sheet"), import_react = __toESM(require("react")), 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, { gap: "$4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$4", $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", gap: "$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", gap: "$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))
+    ] }) }) })
+  ] });
+}
+//# sourceMappingURL=SheetDemo.js.map

package/dist/cjs/SliderDemo.js

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

package/dist/cjs/SpinnerDemo.js

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

package/dist/cjs/StacksDemo.js

@@ -0,0 +1,93 @@
+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 StacksDemo_exports = {};
+__export(StacksDemo_exports, {
+  StacksDemo: () => StacksDemo
+});
+module.exports = __toCommonJS(StacksDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function StacksDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { maxWidth: 250, padding: "$2", alignSelf: "center", space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.YStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.XStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ZStack, { maxWidth: 50, maxHeight: 85, width: 100, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.YStack,
+        {
+          fullscreen: !0,
+          borderRadius: "$4",
+          padding: "$2",
+          borderColor: "$color",
+          borderWidth: 2
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.YStack,
+        {
+          borderColor: "$color",
+          fullscreen: !0,
+          y: 10,
+          x: 10,
+          borderWidth: 2,
+          borderRadius: "$4",
+          padding: "$2"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.YStack,
+        {
+          borderColor: "$color",
+          fullscreen: !0,
+          y: 20,
+          x: 20,
+          borderWidth: 2,
+          borderRadius: "$4",
+          padding: "$2"
+        }
+      )
+    ] })
+  ] });
+}
+//# sourceMappingURL=StacksDemo.js.map

package/dist/cjs/SwitchDemo.js

@@ -0,0 +1,56 @@
+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 SwitchDemo_exports = {};
+__export(SwitchDemo_exports, {
+  SwitchDemo: () => SwitchDemo,
+  SwitchWithLabel: () => SwitchWithLabel
+});
+module.exports = __toCommonJS(SwitchDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function SwitchDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { width: 200, alignItems: "center", gap: "$3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", $xs: { flexDirection: "column" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2", defaultChecked: !0 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", $xs: { flexDirection: "column" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3", defaultChecked: !0 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", $xs: { flexDirection: "column" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4", defaultChecked: !0 })
+    ] })
+  ] });
+}
+function SwitchWithLabel(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: 200, alignItems: "center", gap: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Label,
+      {
+        paddingRight: "$0",
+        minWidth: 90,
+        justifyContent: "flex-end",
+        size: props.size,
+        htmlFor: id,
+        children: "Accept"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { minHeight: 20, vertical: !0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { id, size: props.size, defaultChecked: props.defaultChecked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, { animation: "quicker" }) })
+  ] });
+}
+//# sourceMappingURL=SwitchDemo.js.map

package/dist/cjs/SwitchHeadlessDemo.js

@@ -0,0 +1,87 @@
+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 SwitchHeadlessDemo_exports = {};
+__export(SwitchHeadlessDemo_exports, {
+  SwitchHeadlessDemo: () => SwitchHeadlessDemo
+});
+module.exports = __toCommonJS(SwitchHeadlessDemo_exports);
+var import_react = __toESM(require("react")), import_switch_headless = require("@tamagui/switch-headless"), import_react_native = require("react-native-web"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function SwitchHeadlessDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: 200, alignItems: "center", space: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { htmlFor: "headless", children: "Headless" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadlessSwitch, { defaultChecked: !0, id: "headless" })
+  ] }) });
+}
+const HeadlessSwitch = import_react.default.forwardRef((props, ref) => {
+  const [checked, setChecked] = import_react.default.useState(props.defaultChecked || !1), { switchProps, switchRef, bubbleInput } = (0, import_switch_headless.useSwitch)(
+    props,
+    [checked, setChecked],
+    ref
+  ), animation = import_react.default.useRef(new import_react_native.Animated.Value(checked ? 1 : 0)).current;
+  return import_react.default.useEffect(() => {
+    import_react_native.Animated.timing(animation, {
+      toValue: checked ? 1 : 0,
+      duration: 100,
+      useNativeDriver: !0
+    }).start();
+  }, [checked]), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        style: {
+          width: 40,
+          height: 20,
+          borderRadius: 100,
+          backgroundColor: checked ? "lightblue" : "silver"
+        },
+        ref: switchRef,
+        ...switchProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_native.Animated.View,
+          {
+            style: [
+              {
+                backgroundColor: "black",
+                borderRadius: 100,
+                width: 20,
+                height: 20
+              },
+              {
+                transform: [
+                  {
+                    translateX: animation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0, 20]
+                    })
+                  }
+                ]
+              }
+            ]
+          }
+        )
+      }
+    ),
+    bubbleInput
+  ] });
+});
+//# sourceMappingURL=SwitchHeadlessDemo.js.map

package/dist/cjs/SwitchUnstyledDemo.js

@@ -0,0 +1,64 @@
+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 SwitchUnstyledDemo_exports = {};
+__export(SwitchUnstyledDemo_exports, {
+  Switch: () => Switch,
+  SwitchUnstyledDemo: () => SwitchUnstyledDemo
+});
+module.exports = __toCommonJS(SwitchUnstyledDemo_exports);
+var import_core = require("@tamagui/core"), import_switch = require("@tamagui/switch"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+const Frame = (0, import_core.styled)(import_core.Stack, {
+  width: 40,
+  height: 20,
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: "lightblue"
+      },
+      false: {
+        backgroundColor: "silver"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Thumb = (0, import_core.styled)(import_core.Stack, {
+  width: 20,
+  height: 20,
+  backgroundColor: "black",
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        opacity: 0.8
+      },
+      false: {
+        opacity: 0.5
+      }
+    }
+  }
+}), Switch = (0, import_switch.createSwitch)({
+  Frame,
+  Thumb
+});
+function SwitchUnstyledDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: 200, alignItems: "center", space: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { htmlFor: "unstyled-switch", children: "Unstyled" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch, { defaultChecked: !0, id: "unstyled-switch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch.Thumb, { animation: "quick" }) })
+  ] }) });
+}
+//# sourceMappingURL=SwitchUnstyledDemo.js.map