@tamagui/demos 1.28.0 → 1.28.1

package/dist/cjs/BuildAButtonDemo.js

@@ -0,0 +1,65 @@
+"use strict";
+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: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__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: true }), mod);
+var BuildAButtonDemo_exports = {};
+__export(BuildAButtonDemo_exports, {
+  BuildAButtonDemo: () => BuildAButtonDemo
+});
+module.exports = __toCommonJS(BuildAButtonDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_icons = require("@tamagui/lucide-icons");
+var import_tamagui = require("tamagui");
+const outlined = {
+  backgroundColor: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  borderRadius: "$10",
+  hoverStyle: {
+    backgroundColor: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: true, ov: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { mah: 200, y: -100, x: -40, rotate: "-10deg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { y: 35, size: "$2", ...outlined, subTheme: "alt1", borderWidth: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { y: 30 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { y: -50, ...outlined }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { ...outlined, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Hand, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$6", subTheme: "alt2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$6", subTheme: "alt2", ...outlined }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$8", subTheme: "alt2", iconAfter: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Drumstick, {}), ...outlined })
+  ] }) });
+}
+function ButtonCol(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$2", space: "$3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: props.subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "orange" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "yellow" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "green" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "blue" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "purple" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "pink" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "red" + subTheme, ...props, children: "Hello" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BuildAButtonDemo
+});
+//# sourceMappingURL=BuildAButtonDemo.js.map

package/dist/cjs/BuildAButtonDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/BuildAButtonDemo.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AAlBN,0BAAgE;AAChE,qBAA8E;AAE9E,MAAM,WAAW;AAAA,EACf,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EAEd,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACf;AACF;AAEO,SAAS,mBAAmB;AACjC,SACE,4CAAC,yBAAO,YAAU,MAAC,IAAG,UACpB,uDAAC,yBAAO,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,QAAO,UACxC;AAAA,gDAAC,aAAU,GAAG,IAAI,MAAK,MAAM,GAAG,UAAU,UAAS,QAAO,aAAa,GAAG;AAAA,IAC1E,4CAAC,aAAU,GAAG,IAAI;AAAA,IAClB,4CAAC,aAAU,GAAG,KAAM,GAAG,UAAU;AAAA,IACjC,4CAAC,aAAW,GAAG,UAAU,MAAM,4CAAC,4BAAK,GAAI;AAAA,IACzC,4CAAC,aAAU,MAAK,MAAK,UAAS,QAAO;AAAA,IACrC,4CAAC,aAAU,MAAK,MAAK,UAAS,QAAQ,GAAG,UAAU;AAAA,IACnD,4CAAC,aAAU,MAAK,MAAK,UAAS,QAAO,WAAW,4CAAC,iCAAU,GAAK,GAAG,UAAU;AAAA,KAC/E,GACF;AAEJ;AAEA,SAAS,UACP,OAGA;AACA,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,aAAa;AACzD,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAM,MACzB;AAAA,gDAAC,yBAAO,OAAO,MAAM,UAAW,GAAG,OAAO,mBAE1C;AAAA,IACA,4CAAC,yBAAO,OAAQ,WAAW,UAAyB,GAAG,OAAO,mBAE9D;AAAA,IACA,4CAAC,yBAAO,OAAQ,WAAW,UAAyB,GAAG,OAAO,mBAE9D;AAAA,IACA,4CAAC,yBAAO,OAAQ,UAAU,UAAyB,GAAG,OAAO,mBAE7D;AAAA,IACA,4CAAC,yBAAO,OAAQ,SAAS,UAAyB,GAAG,OAAO,mBAE5D;AAAA,IACA,4CAAC,yBAAO,OAAQ,WAAW,UAAyB,GAAG,OAAO,mBAE9D;AAAA,IACA,4CAAC,yBAAO,OAAQ,SAAS,UAAyB,GAAG,OAAO,mBAE5D;AAAA,IACA,4CAAC,yBAAO,OAAQ,QAAQ,UAAyB,GAAG,OAAO,mBAE3D;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -23,7 +23,7 @@ __reExport(src_exports, require("./AnimationsTimingDemo"), module.exports);
 __reExport(src_exports, require("./AnimationsPresenceDemo"), module.exports);
 __reExport(src_exports, require("./AvatarDemo"), module.exports);
 __reExport(src_exports, require("./ButtonDemo"), module.exports);
-__reExport(src_exports, require("./ButtonNewDemo"), module.exports);
+__reExport(src_exports, require("./BuildAButtonDemo"), module.exports);
 __reExport(src_exports, require("./CardDemo"), module.exports);
 __reExport(src_exports, require("./DialogDemo"), module.exports);
 __reExport(src_exports, require("./AddThemeDemo"), module.exports);
@@ -72,7 +72,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   ...require("./AnimationsPresenceDemo"),
   ...require("./AvatarDemo"),
   ...require("./ButtonDemo"),
-  ...require("./ButtonNewDemo"),
+  ...require("./BuildAButtonDemo"),
   ...require("./CardDemo"),
   ...require("./DialogDemo"),
   ...require("./AddThemeDemo"),

package/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,6BADd;AAEA,wBAAc,kCAFd;AAGA,wBAAc,kCAHd;AAIA,wBAAc,mCAJd;AAKA,wBAAc,qCALd;AAMA,wBAAc,yBANd;AAOA,wBAAc,yBAPd;AAQA,wBAAc,4BARd;AASA,wBAAc,uBATd;AAUA,wBAAc,yBAVd;AAWA,wBAAc,2BAXd;AAYA,wBAAc,8BAZd;AAaA,wBAAc,+BAbd;AAcA,wBAAc,wBAdd;AAeA,wBAAc,yBAfd;AAgBA,wBAAc,wBAhBd;AAiBA,wBAAc,2BAjBd;AAkBA,wBAAc,wBAlBd;AAmBA,wBAAc,wBAnBd;AAoBA,wBAAc,iCApBd;AAqBA,wBAAc,2BArBd;AAsBA,wBAAc,8BAtBd;AAuBA,wBAAc,0BAvBd;AAwBA,wBAAc,2BAxBd;AAyBA,wBAAc,6BAzBd;AA0BA,wBAAc,yBA1Bd;AA2BA,wBAAc,4BA3Bd;AA4BA,wBAAc,yBA5Bd;AA6BA,wBAAc,6BA7Bd;AA8BA,wBAAc,wBA9Bd;AA+BA,wBAAc,yBA/Bd;AAgCA,wBAAc,0BAhCd;AAiCA,wBAAc,yBAjCd;AAkCA,wBAAc,yBAlCd;AAmCA,wBAAc,2BAnCd;AAoCA,wBAAc,uBApCd;AAqCA,wBAAc,+BArCd;AAsCA,wBAAc,0BAtCd;AAuCA,wBAAc,yBAvCd;AAwCA,wBAAc,yBAxCd;AAyCA,wBAAc,wBAzCd;AA0CA,wBAAc,iCA1Cd;AA2CA,wBAAc,uBA3Cd;AA4CA,wBAAc,+BA5Cd;AA6CA,wBAAc,8BA7Cd;AA8CA,wBAAc,gCA9Cd;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,6BADd;AAEA,wBAAc,kCAFd;AAGA,wBAAc,kCAHd;AAIA,wBAAc,mCAJd;AAKA,wBAAc,qCALd;AAMA,wBAAc,yBANd;AAOA,wBAAc,yBAPd;AAQA,wBAAc,+BARd;AASA,wBAAc,uBATd;AAUA,wBAAc,yBAVd;AAWA,wBAAc,2BAXd;AAYA,wBAAc,8BAZd;AAaA,wBAAc,+BAbd;AAcA,wBAAc,wBAdd;AAeA,wBAAc,yBAfd;AAgBA,wBAAc,wBAhBd;AAiBA,wBAAc,2BAjBd;AAkBA,wBAAc,wBAlBd;AAmBA,wBAAc,wBAnBd;AAoBA,wBAAc,iCApBd;AAqBA,wBAAc,2BArBd;AAsBA,wBAAc,8BAtBd;AAuBA,wBAAc,0BAvBd;AAwBA,wBAAc,2BAxBd;AAyBA,wBAAc,6BAzBd;AA0BA,wBAAc,yBA1Bd;AA2BA,wBAAc,4BA3Bd;AA4BA,wBAAc,yBA5Bd;AA6BA,wBAAc,6BA7Bd;AA8BA,wBAAc,wBA9Bd;AA+BA,wBAAc,yBA/Bd;AAgCA,wBAAc,0BAhCd;AAiCA,wBAAc,yBAjCd;AAkCA,wBAAc,yBAlCd;AAmCA,wBAAc,2BAnCd;AAoCA,wBAAc,uBApCd;AAqCA,wBAAc,+BArCd;AAsCA,wBAAc,0BAtCd;AAuCA,wBAAc,yBAvCd;AAwCA,wBAAc,yBAxCd;AAyCA,wBAAc,wBAzCd;AA0CA,wBAAc,iCA1Cd;AA2CA,wBAAc,uBA3Cd;AA4CA,wBAAc,+BA5Cd;AA6CA,wBAAc,8BA7Cd;AA8CA,wBAAc,gCA9Cd;",
   "names": []
 }

package/dist/esm/BuildAButtonDemo.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drumstick, Hand } from "@tamagui/lucide-icons";
+import { Button, XStack, YStack } from "tamagui";
+const outlined = {
+  backgroundColor: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  borderRadius: "$10",
+  hoverStyle: {
+    backgroundColor: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return /* @__PURE__ */ jsx(YStack, { fullscreen: true, ov: "hidden", children: /* @__PURE__ */ jsxs(XStack, { mah: 200, y: -100, x: -40, rotate: "-10deg", children: [
+    /* @__PURE__ */ jsx(ButtonCol, { y: 35, size: "$2", ...outlined, subTheme: "alt1", borderWidth: 1 }),
+    /* @__PURE__ */ jsx(ButtonCol, { y: 30 }),
+    /* @__PURE__ */ jsx(ButtonCol, { y: -50, ...outlined }),
+    /* @__PURE__ */ jsx(ButtonCol, { ...outlined, icon: /* @__PURE__ */ jsx(Hand, {}) }),
+    /* @__PURE__ */ jsx(ButtonCol, { size: "$6", subTheme: "alt2" }),
+    /* @__PURE__ */ jsx(ButtonCol, { size: "$6", subTheme: "alt2", ...outlined }),
+    /* @__PURE__ */ jsx(ButtonCol, { size: "$8", subTheme: "alt2", iconAfter: /* @__PURE__ */ jsx(Drumstick, {}), ...outlined })
+  ] }) });
+}
+function ButtonCol(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$2", space: "$3", children: [
+    /* @__PURE__ */ jsx(Button, { theme: props.subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "orange" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "yellow" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "green" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "blue" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "purple" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "pink" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ jsx(Button, { theme: "red" + subTheme, ...props, children: "Hello" })
+  ] });
+}
+export {
+  BuildAButtonDemo
+};
+//# sourceMappingURL=BuildAButtonDemo.js.map

package/dist/esm/BuildAButtonDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/BuildAButtonDemo.tsx"],
+  "mappings": "AAkBM,SACE,KADF;AAlBN,SAA4B,WAAwB,YAAY;AAChE,SAAS,QAA+C,QAAQ,cAAc;AAE9E,MAAM,WAAW;AAAA,EACf,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EAEd,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACf;AACF;AAEO,SAAS,mBAAmB;AACjC,SACE,oBAAC,UAAO,YAAU,MAAC,IAAG,UACpB,+BAAC,UAAO,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,QAAO,UACxC;AAAA,wBAAC,aAAU,GAAG,IAAI,MAAK,MAAM,GAAG,UAAU,UAAS,QAAO,aAAa,GAAG;AAAA,IAC1E,oBAAC,aAAU,GAAG,IAAI;AAAA,IAClB,oBAAC,aAAU,GAAG,KAAM,GAAG,UAAU;AAAA,IACjC,oBAAC,aAAW,GAAG,UAAU,MAAM,oBAAC,QAAK,GAAI;AAAA,IACzC,oBAAC,aAAU,MAAK,MAAK,UAAS,QAAO;AAAA,IACrC,oBAAC,aAAU,MAAK,MAAK,UAAS,QAAQ,GAAG,UAAU;AAAA,IACnD,oBAAC,aAAU,MAAK,MAAK,UAAS,QAAO,WAAW,oBAAC,aAAU,GAAK,GAAG,UAAU;AAAA,KAC/E,GACF;AAEJ;AAEA,SAAS,UACP,OAGA;AACA,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,aAAa;AACzD,SACE,qBAAC,UAAO,SAAQ,MAAK,OAAM,MACzB;AAAA,wBAAC,UAAO,OAAO,MAAM,UAAW,GAAG,OAAO,mBAE1C;AAAA,IACA,oBAAC,UAAO,OAAQ,WAAW,UAAyB,GAAG,OAAO,mBAE9D;AAAA,IACA,oBAAC,UAAO,OAAQ,WAAW,UAAyB,GAAG,OAAO,mBAE9D;AAAA,IACA,oBAAC,UAAO,OAAQ,UAAU,UAAyB,GAAG,OAAO,mBAE7D;AAAA,IACA,oBAAC,UAAO,OAAQ,SAAS,UAAyB,GAAG,OAAO,mBAE5D;AAAA,IACA,oBAAC,UAAO,OAAQ,WAAW,UAAyB,GAAG,OAAO,mBAE9D;AAAA,IACA,oBAAC,UAAO,OAAQ,SAAS,UAAyB,GAAG,OAAO,mBAE5D;AAAA,IACA,oBAAC,UAAO,OAAQ,QAAQ,UAAyB,GAAG,OAAO,mBAE3D;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/index.js

@@ -6,7 +6,7 @@ export * from "./AnimationsTimingDemo";
 export * from "./AnimationsPresenceDemo";
 export * from "./AvatarDemo";
 export * from "./ButtonDemo";
-export * from "./ButtonNewDemo";
+export * from "./BuildAButtonDemo";
 export * from "./CardDemo";
 export * from "./DialogDemo";
 export * from "./AddThemeDemo";

package/dist/jsx/BuildAButtonDemo.js

@@ -0,0 +1,40 @@
+import { Drumstick, Hand } from "@tamagui/lucide-icons";
+import { Button, XStack, YStack } from "tamagui";
+const outlined = {
+  backgroundColor: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  borderRadius: "$10",
+  hoverStyle: {
+    backgroundColor: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return <YStack fullscreen ov="hidden"><XStack mah={200} y={-100} x={-40} rotate="-10deg">
+    <ButtonCol y={35} size="$2" {...outlined} subTheme="alt1" borderWidth={1} />
+    <ButtonCol y={30} />
+    <ButtonCol y={-50} {...outlined} />
+    <ButtonCol {...outlined} icon={<Hand />} />
+    <ButtonCol size="$6" subTheme="alt2" />
+    <ButtonCol size="$6" subTheme="alt2" {...outlined} />
+    <ButtonCol size="$8" subTheme="alt2" iconAfter={<Drumstick />} {...outlined} />
+  </XStack></YStack>;
+}
+function ButtonCol(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return <YStack padding="$2" space="$3">
+    <Button theme={props.subTheme} {...props}>Hello</Button>
+    <Button theme={"orange" + subTheme} {...props}>Hello</Button>
+    <Button theme={"yellow" + subTheme} {...props}>Hello</Button>
+    <Button theme={"green" + subTheme} {...props}>Hello</Button>
+    <Button theme={"blue" + subTheme} {...props}>Hello</Button>
+    <Button theme={"purple" + subTheme} {...props}>Hello</Button>
+    <Button theme={"pink" + subTheme} {...props}>Hello</Button>
+    <Button theme={"red" + subTheme} {...props}>Hello</Button>
+  </YStack>;
+}
+export {
+  BuildAButtonDemo
+};
+//# sourceMappingURL=BuildAButtonDemo.js.map

package/dist/jsx/BuildAButtonDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/BuildAButtonDemo.tsx"],
+  "mappings": "AAAA,SAA4B,WAAwB,YAAY;AAChE,SAAS,QAA+C,QAAQ,cAAc;AAE9E,MAAM,WAAW;AAAA,EACf,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EAEd,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACf;AACF;AAEO,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO,WAAW,GAAG,SACpB,CAAC,OAAO,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,OAAO;AAAA,IACxC,CAAC,UAAU,GAAG,IAAI,KAAK,SAAS,UAAU,SAAS,OAAO,aAAa,GAAG;AAAA,IAC1E,CAAC,UAAU,GAAG,IAAI;AAAA,IAClB,CAAC,UAAU,GAAG,SAAS,UAAU;AAAA,IACjC,CAAC,cAAc,UAAU,MAAM,CAAC,KAAK,IAAI;AAAA,IACzC,CAAC,UAAU,KAAK,KAAK,SAAS,OAAO;AAAA,IACrC,CAAC,UAAU,KAAK,KAAK,SAAS,WAAW,UAAU;AAAA,IACnD,CAAC,UAAU,KAAK,KAAK,SAAS,OAAO,WAAW,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC/E,EARC,OASH,EAVC;AAYL;AAEA,SAAS,UACP,OAGA;AACA,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,aAAa;AACzD,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,OAAO,MAAM,cAAc,OAAO,KAE1C,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,WAAW,cAA4B,OAAO,KAE9D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,WAAW,cAA4B,OAAO,KAE9D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,UAAU,cAA4B,OAAO,KAE7D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,SAAS,cAA4B,OAAO,KAE5D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,WAAW,cAA4B,OAAO,KAE9D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,SAAS,cAA4B,OAAO,KAE5D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,QAAQ,cAA4B,OAAO,KAE3D,EAFC;AAAA,EAGH,EAzBC;AA2BL;",
+  "names": []
+}

package/dist/jsx/BuildAButtonDemo.mjs

@@ -0,0 +1,40 @@
+import { Drumstick, Hand } from "@tamagui/lucide-icons";
+import { Button, XStack, YStack } from "tamagui";
+const outlined = {
+  backgroundColor: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  borderRadius: "$10",
+  hoverStyle: {
+    backgroundColor: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return <YStack fullscreen ov="hidden"><XStack mah={200} y={-100} x={-40} rotate="-10deg">
+    <ButtonCol y={35} size="$2" {...outlined} subTheme="alt1" borderWidth={1} />
+    <ButtonCol y={30} />
+    <ButtonCol y={-50} {...outlined} />
+    <ButtonCol {...outlined} icon={<Hand />} />
+    <ButtonCol size="$6" subTheme="alt2" />
+    <ButtonCol size="$6" subTheme="alt2" {...outlined} />
+    <ButtonCol size="$8" subTheme="alt2" iconAfter={<Drumstick />} {...outlined} />
+  </XStack></YStack>;
+}
+function ButtonCol(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return <YStack padding="$2" space="$3">
+    <Button theme={props.subTheme} {...props}>Hello</Button>
+    <Button theme={"orange" + subTheme} {...props}>Hello</Button>
+    <Button theme={"yellow" + subTheme} {...props}>Hello</Button>
+    <Button theme={"green" + subTheme} {...props}>Hello</Button>
+    <Button theme={"blue" + subTheme} {...props}>Hello</Button>
+    <Button theme={"purple" + subTheme} {...props}>Hello</Button>
+    <Button theme={"pink" + subTheme} {...props}>Hello</Button>
+    <Button theme={"red" + subTheme} {...props}>Hello</Button>
+  </YStack>;
+}
+export {
+  BuildAButtonDemo
+};
+//# sourceMappingURL=BuildAButtonDemo.mjs.map

package/dist/jsx/BuildAButtonDemo.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/BuildAButtonDemo.tsx"],
+  "mappings": "AAAA,SAA4B,WAAwB,YAAY;AAChE,SAAS,QAA+C,QAAQ,cAAc;AAE9E,MAAM,WAAW;AAAA,EACf,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EAEd,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACf;AACF;AAEO,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO,WAAW,GAAG,SACpB,CAAC,OAAO,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,OAAO;AAAA,IACxC,CAAC,UAAU,GAAG,IAAI,KAAK,SAAS,UAAU,SAAS,OAAO,aAAa,GAAG;AAAA,IAC1E,CAAC,UAAU,GAAG,IAAI;AAAA,IAClB,CAAC,UAAU,GAAG,SAAS,UAAU;AAAA,IACjC,CAAC,cAAc,UAAU,MAAM,CAAC,KAAK,IAAI;AAAA,IACzC,CAAC,UAAU,KAAK,KAAK,SAAS,OAAO;AAAA,IACrC,CAAC,UAAU,KAAK,KAAK,SAAS,WAAW,UAAU;AAAA,IACnD,CAAC,UAAU,KAAK,KAAK,SAAS,OAAO,WAAW,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC/E,EARC,OASH,EAVC;AAYL;AAEA,SAAS,UACP,OAGA;AACA,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,aAAa;AACzD,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,OAAO,MAAM,cAAc,OAAO,KAE1C,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,WAAW,cAA4B,OAAO,KAE9D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,WAAW,cAA4B,OAAO,KAE9D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,UAAU,cAA4B,OAAO,KAE7D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,SAAS,cAA4B,OAAO,KAE5D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,WAAW,cAA4B,OAAO,KAE9D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,SAAS,cAA4B,OAAO,KAE5D,EAFC;AAAA,IAGD,CAAC,OAAO,OAAQ,QAAQ,cAA4B,OAAO,KAE3D,EAFC;AAAA,EAGH,EAzBC;AA2BL;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -6,7 +6,7 @@ export * from "./AnimationsTimingDemo";
 export * from "./AnimationsPresenceDemo";
 export * from "./AvatarDemo";
 export * from "./ButtonDemo";
-export * from "./ButtonNewDemo";
+export * from "./BuildAButtonDemo";
 export * from "./CardDemo";
 export * from "./DialogDemo";
 export * from "./AddThemeDemo";

package/dist/jsx/index.mjs

@@ -6,7 +6,7 @@ export * from "./AnimationsTimingDemo";
 export * from "./AnimationsPresenceDemo";
 export * from "./AvatarDemo";
 export * from "./ButtonDemo";
-export * from "./ButtonNewDemo";
+export * from "./BuildAButtonDemo";
 export * from "./CardDemo";
 export * from "./DialogDemo";
 export * from "./AddThemeDemo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "sideEffects": [
     "*.css"
   ],
@@ -28,29 +28,29 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.28.0",
-    "@tamagui/button": "1.28.0",
-    "@tamagui/config": "1.28.0",
-    "@tamagui/core": "1.28.0",
-    "@tamagui/list-item": "1.28.0",
-    "@tamagui/logo": "1.28.0",
-    "@tamagui/menu": "1.28.0",
-    "@tamagui/popover": "1.28.0",
-    "@tamagui/progress": "1.28.0",
-    "@tamagui/radio-group": "1.28.0",
-    "@tamagui/select": "1.28.0",
-    "@tamagui/sheet": "1.28.0",
-    "@tamagui/slider": "1.28.0",
-    "@tamagui/stacks": "1.28.0",
-    "@tamagui/toast": "1.28.0",
-    "tamagui": "1.28.0"
+    "@tamagui/avatar": "1.28.1",
+    "@tamagui/button": "1.28.1",
+    "@tamagui/config": "1.28.1",
+    "@tamagui/core": "1.28.1",
+    "@tamagui/list-item": "1.28.1",
+    "@tamagui/logo": "1.28.1",
+    "@tamagui/menu": "1.28.1",
+    "@tamagui/popover": "1.28.1",
+    "@tamagui/progress": "1.28.1",
+    "@tamagui/radio-group": "1.28.1",
+    "@tamagui/select": "1.28.1",
+    "@tamagui/sheet": "1.28.1",
+    "@tamagui/slider": "1.28.1",
+    "@tamagui/stacks": "1.28.1",
+    "@tamagui/toast": "1.28.1",
+    "tamagui": "1.28.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.28.0",
+    "@tamagui/build": "1.28.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/BuildAButtonDemo.tsx

@@ -0,0 +1,66 @@
+import { Activity, Airplay, Drumstick, FileWarning, Hand } from '@tamagui/lucide-icons'
+import { Button, ButtonProps, Theme, ThemeName, XGroup, XStack, YStack } from 'tamagui'
+
+const outlined = {
+  backgroundColor: 'transparent',
+  borderWidth: 2,
+  borderColor: '$background',
+  borderRadius: '$10',
+
+  hoverStyle: {
+    backgroundColor: 'transparent',
+    borderColor: '$backgroundPress',
+  },
+}
+
+export function BuildAButtonDemo() {
+  return (
+    <YStack fullscreen ov="hidden">
+      <XStack mah={200} y={-100} x={-40} rotate="-10deg">
+        <ButtonCol y={35} size="$2" {...outlined} subTheme="alt1" borderWidth={1} />
+        <ButtonCol y={30} />
+        <ButtonCol y={-50} {...outlined} />
+        <ButtonCol {...outlined} icon={<Hand />} />
+        <ButtonCol size="$6" subTheme="alt2" />
+        <ButtonCol size="$6" subTheme="alt2" {...outlined} />
+        <ButtonCol size="$8" subTheme="alt2" iconAfter={<Drumstick />} {...outlined} />
+      </XStack>
+    </YStack>
+  )
+}
+
+function ButtonCol(
+  props: ButtonProps & {
+    subTheme?: any
+  }
+) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : ''
+  return (
+    <YStack padding="$2" space="$3">
+      <Button theme={props.subTheme} {...props}>
+        Hello
+      </Button>
+      <Button theme={('orange' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+      <Button theme={('yellow' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+      <Button theme={('green' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+      <Button theme={('blue' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+      <Button theme={('purple' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+      <Button theme={('pink' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+      <Button theme={('red' + subTheme) as ThemeName} {...props}>
+        Hello
+      </Button>
+    </YStack>
+  )
+}

package/src/index.tsx

@@ -6,7 +6,7 @@ export * from './AnimationsTimingDemo'
 export * from './AnimationsPresenceDemo'
 export * from './AvatarDemo'
 export * from './ButtonDemo'
-export * from './ButtonNewDemo'
+export * from './BuildAButtonDemo'
 export * from './CardDemo'
 export * from './DialogDemo'
 export * from './AddThemeDemo'

package/types/BuildAButtonDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function BuildAButtonDemo(): JSX.Element;
+//# sourceMappingURL=BuildAButtonDemo.d.ts.map

package/types/BuildAButtonDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuildAButtonDemo.d.ts","sourceRoot":"","sources":["../src/BuildAButtonDemo.tsx"],"names":[],"mappings":";AAeA,wBAAgB,gBAAgB,gBAc/B"}

package/types/index.d.ts

@@ -6,7 +6,7 @@ export * from './AnimationsTimingDemo';
 export * from './AnimationsPresenceDemo';
 export * from './AvatarDemo';
 export * from './ButtonDemo';
-export * from './ButtonNewDemo';
+export * from './BuildAButtonDemo';
 export * from './CardDemo';
 export * from './DialogDemo';
 export * from './AddThemeDemo';

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA"}

package/src/ButtonNewDemo.tsx

@@ -1,50 +0,0 @@
-import { Activity, Airplay } from '@tamagui/lucide-icons'
-import { Button, XGroup, XStack, YStack } from 'tamagui'
-
-export function ButtonNewDemo(props) {
-  return (
-    <YStack padding="$3" space="$3" {...props}>
-      <Button>
-        <Button.Text>Plain</Button.Text>
-      </Button>
-      <Button alignSelf="center" size="$6" space="$2">
-        <Button.Icon>
-          <Airplay />
-        </Button.Icon>
-        <Button.Text>Large</Button.Text>
-      </Button>
-      <XStack space="$2" justifyContent="center">
-        <Button size="$3" theme="alt2">
-          <Button.Text>Alt2</Button.Text>
-        </Button>
-        <Button size="$3" theme="yellow">
-          <Button.Text>Yellow</Button.Text>
-        </Button>
-      </XStack>
-      <XStack space="$2">
-        <Button themeInverse size="$3">
-          <Button.Text>Small Inverse</Button.Text>
-        </Button>
-        <Button size="$3" space="$2">
-          <Button.Text>After</Button.Text>
-          <Button.Icon>
-            <Activity />
-          </Button.Icon>
-        </Button>
-      </XStack>
-      <XGroup>
-        <XGroup.Item>
-          <Button width="50%" size="$2" disabled opacity={0.5}>
-            <Button.Text>disabled</Button.Text>
-          </Button>
-        </XGroup.Item>
-
-        <XGroup.Item>
-          <Button width="50%" size="$2" chromeless>
-            <Button.Text>chromeless</Button.Text>
-          </Button>
-        </XGroup.Item>
-      </XGroup>
-    </YStack>
-  )
-}