@tamagui/demos 1.114.4 → 1.115.0

package/dist/cjs/ThemeBuilderDemo.cjs

@@ -0,0 +1,178 @@
+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 ThemeBuilderDemo_exports = {};
+__export(ThemeBuilderDemo_exports, {
+  ThemeBuilderDemo: () => ThemeBuilderDemo
+});
+module.exports = __toCommonJS(ThemeBuilderDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    fullscreen: !0,
+    ov: "hidden",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      mah: 200,
+      y: -100,
+      x: -50,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        y: 35,
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Col, {
+        y: 35,
+        bg: "$color9"
+      })]
+    })
+  });
+}
+function Col(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    padding: "$2.5",
+    space: "$3.5",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "blue" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "purple" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "pink" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "red" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+      br: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    })]
+  });
+}

package/dist/cjs/ThemeInverseDemo.cjs

@@ -0,0 +1,69 @@
+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 ThemeInverseDemo_exports = {};
+__export(ThemeInverseDemo_exports, {
+  ThemeInverseDemo: () => ThemeInverseDemo
+});
+module.exports = __toCommonJS(ThemeInverseDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ThemeInverseDemo() {
+  const themeName = (0, import_tamagui.useThemeName)(),
+    opposite = themeName.includes("dark") ? "light" : "dark";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Buttons, {
+      title: "Normal",
+      name: themeName
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+      inverse: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Buttons, {
+        title: "Inversed",
+        name: themeName.replace(themeName.split("_")[0], opposite)
+      })
+    })]
+  });
+}
+function Buttons(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    elevation: "$4",
+    backgroundColor: "$background",
+    padding: "$4",
+    borderRadius: "$4",
+    space: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+      children: props.title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      children: props.name
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      themeInverse: !0,
+      children: "inversed"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Button, {
+      theme: "alt1",
+      children: [props.name, "_alt1"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+      name: "yellow",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        children: props.name.split("_")[0] + "_yellow"
+      })
+    })]
+  });
+}

package/dist/cjs/ToastDemo.cjs

@@ -0,0 +1,133 @@
+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 ToastDemo_exports = {};
+__export(ToastDemo_exports, {
+  ToastDemo: () => ToastDemo
+});
+module.exports = __toCommonJS(ToastDemo_exports);
+var import_toast = require("@tamagui/toast"),
+  import_react = __toESM(require("react")),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const ToastDemo = () => {
+    const [native, setNative] = import_react.default.useState(!1);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      space: !0,
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastControl, {
+        native
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CurrentToast, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeOptions, {
+        native,
+        setNative
+      })]
+    });
+  },
+  CurrentToast = () => {
+    const currentToast = (0, import_toast.useToastState)();
+    return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast, {
+      duration: currentToast.duration,
+      enterStyle: {
+        opacity: 0,
+        scale: 0.5,
+        y: -25
+      },
+      exitStyle: {
+        opacity: 0,
+        scale: 1,
+        y: -20
+      },
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      animation: "100ms",
+      viewportName: currentToast.viewportName,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Title, {
+          children: currentToast.title
+        }), !!currentToast.message && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Description, {
+          children: currentToast.message
+        })]
+      })
+    }, currentToast.id);
+  },
+  ToastControl = ({
+    native
+  }) => {
+    const toast = (0, import_toast.useToastController)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      justifyContent: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        onPress: () => {
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data.",
+            native
+          });
+        },
+        children: "Show"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      })]
+    });
+  },
+  NativeOptions = ({
+    native,
+    setNative
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+      size: "$1",
+      onPress: () => setNative(!1),
+      children: "Custom"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Switch, {
+      id: "native-toggle",
+      nativeID: "native-toggle",
+      theme: "active",
+      size: "$1",
+      checked: !!native,
+      onCheckedChange: val => setNative(val),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, {
+        animation: ["quick", {
+          transform: {
+            overshootClamping: !0
+          }
+        }]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+      size: "$1",
+      onPress: () => setNative(!0),
+      children: "Native"
+    })]
+  });

package/dist/cjs/ToastDuplicateDemo.cjs

@@ -0,0 +1,83 @@
+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 ToastDuplicateDemo_exports = {};
+__export(ToastDuplicateDemo_exports, {
+  ToastDuplicateDemo: () => ToastDuplicateDemo
+});
+module.exports = __toCommonJS(ToastDuplicateDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_toast = require("@tamagui/toast"),
+  import_react = __toESM(require("react")),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const ToastDuplicateDemo = () => {
+  const [savedCount, setSavedCount] = import_react.default.useState(0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignItems: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      onPress: () => {
+        setSavedCount(old => old + 1);
+      },
+      children: "Show toast"
+    }), [...Array(savedCount)].map((_, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast, {
+      viewportName: "viewport-multiple",
+      duration: 4e3,
+      enterStyle: {
+        opacity: 0,
+        scale: 0.5,
+        y: -25
+      },
+      exitStyle: {
+        opacity: 0,
+        scale: 1,
+        y: -20
+      },
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      animation: "100ms",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        space: !0,
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.CheckCircle2, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Title, {
+            children: "Successfully saved!"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Description, {
+            children: "Don't worry... We've got your data."
+          })]
+        })]
+      })
+    }, index))]
+  });
+};

package/dist/cjs/ToggleGroupDemo.cjs

@@ -0,0 +1,97 @@
+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 ToggleGroupDemo_exports = {};
+__export(ToggleGroupDemo_exports, {
+  ToggleGroupDemo: () => ToggleGroupDemo
+});
+module.exports = __toCommonJS(ToggleGroupDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ToggleGroupDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    paddingHorizontal: "$4",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      space: "$10",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        alignItems: "center",
+        space: "$6",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "single",
+          size: "$3",
+          orientation: "horizontal"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "multiple",
+          size: "$4",
+          orientation: "horizontal"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        space: "$6",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "single",
+          size: "$3",
+          orientation: "vertical"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupComponent, {
+          type: "multiple",
+          size: "$4",
+          orientation: "vertical"
+        })]
+      })]
+    })
+  });
+}
+function ToggleGroupComponent(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexDirection: props.orientation === "horizontal" ? "row" : "column",
+    alignItems: "center",
+    justifyContent: "center",
+    space: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+      paddingRight: "$0",
+      justifyContent: "flex-end",
+      size: props.size,
+      htmlFor: id,
+      children: props.type === "single" ? "Single" : "Multiple"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ToggleGroup, {
+      orientation: props.orientation,
+      id,
+      type: props.type,
+      size: props.size,
+      disableDeactivation: props.type === "single" ? !0 : void 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+        value: "left",
+        "aria-label": "Left aligned",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {})
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+        value: "center",
+        "aria-label": "Center aligned",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {})
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, {
+        value: "right",
+        "aria-label": "Right aligned",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {})
+      })]
+    })]
+  });
+}

package/dist/cjs/TokensDemo.cjs

@@ -0,0 +1,125 @@
+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 TokensDemo_exports = {};
+__export(TokensDemo_exports, {
+  TokensDemo: () => TokensDemo
+});
+module.exports = __toCommonJS(TokensDemo_exports);
+var import_react = __toESM(require("react")),
+  import_core = require("@tamagui/core"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const sections = [{
+  name: "Size",
+  key: "size"
+}, {
+  name: "Space",
+  key: "space"
+}, {
+  name: "Space (-)",
+  key: "spaceNegative"
+}, {
+  name: "Radius",
+  key: "radius"
+}];
+function TokensDemo() {
+  const [section, setSection] = import_react.default.useState("size");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XGroup, {
+      alignItems: "center",
+      alignSelf: "center",
+      children: sections.map(({
+        name,
+        key
+      }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: "$3",
+          theme: section === key ? "active" : null,
+          fontFamily: "$silkscreen",
+          onPress: () => setSection(key),
+          children: name
+        })
+      }, key))
+    }), (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeSection, {
+      section
+    })]
+  });
+}
+function SizeSection({
+  section
+}) {
+  const allTokens = (0, import_core.getConfig)().tokens,
+    tokens = allTokens[section.startsWith("space") ? "space" : section],
+    st = Object.keys(tokens).sort((a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1),
+    spaceTokens = st.filter(t => Number.parseFloat(t) >= 0),
+    spaceTokensNegative = st.filter(t => Number.parseFloat(t) < 0).sort((a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    flex: 1,
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+      children: "Sizes"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      width: "100%",
+      space: "$2",
+      separator: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+      children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(token => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        width: "100%",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          width: "25%",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.H3, {
+            size: "$6",
+            children: ["$", token]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          width: "20%",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.H4, {
+            size: "$5",
+            children: [tokens[token]?.val, "px"]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+          size: tokens[token]?.val,
+          backgroundColor: "$color5",
+          ...(section === "spaceNegative" && {
+            backgroundColor: "$red5",
+            size: -tokens[spaceTokensNegative.find(t => Number.parseFloat(t) === -Number.parseFloat(token)) ?? token]?.val
+          }),
+          ...(section === "radius" && {
+            size: allTokens.size[token]?.val,
+            borderRadius: tokens[token]?.val
+          })
+        })]
+      }, token))
+    })]
+  });
+}