@tamagui/demos 1.114.3 → 1.115.0

package/dist/cjs/StacksDemo.cjs

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

package/dist/cjs/SwitchDemo.cjs

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

package/dist/cjs/SwitchHeadlessDemo.cjs

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

package/dist/cjs/SwitchUnstyledDemo.cjs

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