@tamagui/demos 1.123.17-1738863858128 → 1.124.0

package/dist/esm/ThemeBuilderDemo.js

@@ -1,128 +1,146 @@
 import { Square, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ThemeBuilderDemo() {
-  return /* @__PURE__ */ jsx(YStack, { fullscreen: !0, ov: "hidden", children: /* @__PURE__ */ jsxs(XStack, { mah: 200, y: -100, x: -50, rotate: "-10deg", children: [
-    /* @__PURE__ */ jsx(Col, { y: 35, bg: "$color9" }),
-    /* @__PURE__ */ jsx(Col, { size: "$8", y: 30, bg: "$color7" }),
-    /* @__PURE__ */ jsx(Col, { size: "$6", y: -50, bg: "$color5" }),
-    /* @__PURE__ */ jsx(Col, { size: "$4", bg: "$color3" }),
-    /* @__PURE__ */ jsx(Col, { size: "$2", bg: "$color1" }),
-    /* @__PURE__ */ jsx(Col, { size: "$4", y: 50, bg: "$color3" }),
-    /* @__PURE__ */ jsx(Col, { size: "$6", y: 80, bg: "$color5" }),
-    /* @__PURE__ */ jsx(Col, { size: "$8", bg: "$color7" }),
-    /* @__PURE__ */ jsx(Col, { bg: "$color9" }),
-    /* @__PURE__ */ jsx(Col, { size: "$8", bg: "$color7" }),
-    /* @__PURE__ */ jsx(Col, { size: "$6", y: 80, bg: "$color5" }),
-    /* @__PURE__ */ jsx(Col, { size: "$4", y: 50, bg: "$color3" }),
-    /* @__PURE__ */ jsx(Col, { size: "$2", bg: "$color1" }),
-    /* @__PURE__ */ jsx(Col, { size: "$4", bg: "$color3" }),
-    /* @__PURE__ */ jsx(Col, { size: "$6", y: -50, bg: "$color5" }),
-    /* @__PURE__ */ jsx(Col, { size: "$8", y: 30, bg: "$color7" }),
-    /* @__PURE__ */ jsx(Col, { y: 35, bg: "$color9" })
+  return /* @__PURE__ */ jsx(YStack, { fullscreen: !0, overflow: "hidden", children: /* @__PURE__ */ jsxs(XStack, { maxHeight: 200, y: -100, x: -50, rotate: "-10deg", children: [
+    /* @__PURE__ */ jsx(Col, { y: 35, backgroundColor: "$color9" }),
+    /* @__PURE__ */ jsx(Col, { size: "$8", y: 30, backgroundColor: "$color7" }),
+    /* @__PURE__ */ jsx(Col, { size: "$6", y: -50, backgroundColor: "$color5" }),
+    /* @__PURE__ */ jsx(Col, { size: "$4", backgroundColor: "$color3" }),
+    /* @__PURE__ */ jsx(Col, { size: "$2", backgroundColor: "$color1" }),
+    /* @__PURE__ */ jsx(Col, { size: "$4", y: 50, backgroundColor: "$color3" }),
+    /* @__PURE__ */ jsx(Col, { size: "$6", y: 80, backgroundColor: "$color5" }),
+    /* @__PURE__ */ jsx(Col, { size: "$8", backgroundColor: "$color7" }),
+    /* @__PURE__ */ jsx(Col, { backgroundColor: "$color9" }),
+    /* @__PURE__ */ jsx(Col, { size: "$8", backgroundColor: "$color7" }),
+    /* @__PURE__ */ jsx(Col, { size: "$6", y: 80, backgroundColor: "$color5" }),
+    /* @__PURE__ */ jsx(Col, { size: "$4", y: 50, backgroundColor: "$color3" }),
+    /* @__PURE__ */ jsx(Col, { size: "$2", backgroundColor: "$color1" }),
+    /* @__PURE__ */ jsx(Col, { size: "$4", backgroundColor: "$color3" }),
+    /* @__PURE__ */ jsx(Col, { size: "$6", y: -50, backgroundColor: "$color5" }),
+    /* @__PURE__ */ jsx(Col, { size: "$8", y: 30, backgroundColor: "$color7" }),
+    /* @__PURE__ */ jsx(Col, { y: 35, backgroundColor: "$color9" })
   ] }) });
 }
 function Col(props) {
   const subTheme = props.subTheme ? `_${props.subTheme}` : "";
   return /* @__PURE__ */ jsxs(YStack, { padding: "$2.5", space: "$3.5", children: [
-    /* @__PURE__ */ jsx(Square, { br: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
+        size: "$10",
+        theme: props.subTheme,
+        backgroundColor: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Square,
+      {
+        borderRadius: "$6",
         size: "$10",
         theme: "orange" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "yellow" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "green" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "blue" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "purple" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "pink" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "red" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Square,
+      {
+        borderRadius: "$6",
+        size: "$10",
+        theme: props.subTheme,
+        backgroundColor: "$background",
         ...props
       }
     ),
-    /* @__PURE__ */ jsx(Square, { br: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "orange" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "yellow" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     ),
     /* @__PURE__ */ jsx(
       Square,
       {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "green" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }
     )

package/dist/esm/ThemeBuilderDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeBuilderDemo.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/ThemeBuilderDemo.mjs

@@ -3,70 +3,70 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function ThemeBuilderDemo() {
   return /* @__PURE__ */jsx(YStack, {
     fullscreen: !0,
-    ov: "hidden",
+    overflow: "hidden",
     children: /* @__PURE__ */jsxs(XStack, {
-      mah: 200,
+      maxHeight: 200,
       y: -100,
       x: -50,
       rotate: "-10deg",
       children: [/* @__PURE__ */jsx(Col, {
         y: 35,
-        bg: "$color9"
+        backgroundColor: "$color9"
       }), /* @__PURE__ */jsx(Col, {
         size: "$8",
         y: 30,
-        bg: "$color7"
+        backgroundColor: "$color7"
       }), /* @__PURE__ */jsx(Col, {
         size: "$6",
         y: -50,
-        bg: "$color5"
+        backgroundColor: "$color5"
       }), /* @__PURE__ */jsx(Col, {
         size: "$4",
-        bg: "$color3"
+        backgroundColor: "$color3"
       }), /* @__PURE__ */jsx(Col, {
         size: "$2",
-        bg: "$color1"
+        backgroundColor: "$color1"
       }), /* @__PURE__ */jsx(Col, {
         size: "$4",
         y: 50,
-        bg: "$color3"
+        backgroundColor: "$color3"
       }), /* @__PURE__ */jsx(Col, {
         size: "$6",
         y: 80,
-        bg: "$color5"
+        backgroundColor: "$color5"
       }), /* @__PURE__ */jsx(Col, {
         size: "$8",
-        bg: "$color7"
+        backgroundColor: "$color7"
       }), /* @__PURE__ */jsx(Col, {
-        bg: "$color9"
+        backgroundColor: "$color9"
       }), /* @__PURE__ */jsx(Col, {
         size: "$8",
-        bg: "$color7"
+        backgroundColor: "$color7"
       }), /* @__PURE__ */jsx(Col, {
         size: "$6",
         y: 80,
-        bg: "$color5"
+        backgroundColor: "$color5"
       }), /* @__PURE__ */jsx(Col, {
         size: "$4",
         y: 50,
-        bg: "$color3"
+        backgroundColor: "$color3"
       }), /* @__PURE__ */jsx(Col, {
         size: "$2",
-        bg: "$color1"
+        backgroundColor: "$color1"
       }), /* @__PURE__ */jsx(Col, {
         size: "$4",
-        bg: "$color3"
+        backgroundColor: "$color3"
       }), /* @__PURE__ */jsx(Col, {
         size: "$6",
         y: -50,
-        bg: "$color5"
+        backgroundColor: "$color5"
       }), /* @__PURE__ */jsx(Col, {
         size: "$8",
         y: 30,
-        bg: "$color7"
+        backgroundColor: "$color7"
       }), /* @__PURE__ */jsx(Col, {
         y: 35,
-        bg: "$color9"
+        backgroundColor: "$color9"
       })]
     })
   });
@@ -77,76 +77,76 @@ function Col(props) {
     padding: "$2.5",
     space: "$3.5",
     children: [/* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: props.subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "orange" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "yellow" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "green" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "blue" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "purple" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "pink" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "red" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: props.subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "orange" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "yellow" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     }), /* @__PURE__ */jsx(Square, {
-      br: "$6",
+      borderRadius: "$6",
       size: "$10",
       theme: "green" + subTheme,
-      bg: "$background",
+      backgroundColor: "$background",
       ...props
     })]
   });

package/dist/esm/ThemeBuilderDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Square","XStack","YStack","jsx","jsxs","ThemeBuilderDemo","fullscreen","ov","children","mah","y","x","rotate","Col","bg","size","props","subTheme","padding","space","br","theme"],"sources":["../../src/ThemeBuilderDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Square","XStack","YStack","jsx","jsxs","ThemeBuilderDemo","fullscreen","overflow","children","maxHeight","y","x","rotate","Col","backgroundColor","size","props","subTheme","padding","space","borderRadius","theme"],"sources":["../../src/ThemeBuilderDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/ThemeBuilderDemo.native.js

@@ -3,87 +3,87 @@ import { Square, XStack, YStack } from "tamagui";
 function ThemeBuilderDemo() {
   return /* @__PURE__ */ _jsx(YStack, {
     fullscreen: !0,
-    ov: "hidden",
+    overflow: "hidden",
     children: /* @__PURE__ */ _jsxs(XStack, {
-      mah: 200,
+      maxHeight: 200,
       y: -100,
       x: -50,
       rotate: "-10deg",
       children: [
         /* @__PURE__ */ _jsx(Col, {
           y: 35,
-          bg: "$color9"
+          backgroundColor: "$color9"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$8",
           y: 30,
-          bg: "$color7"
+          backgroundColor: "$color7"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$6",
           y: -50,
-          bg: "$color5"
+          backgroundColor: "$color5"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$4",
-          bg: "$color3"
+          backgroundColor: "$color3"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$2",
-          bg: "$color1"
+          backgroundColor: "$color1"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$4",
           y: 50,
-          bg: "$color3"
+          backgroundColor: "$color3"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$6",
           y: 80,
-          bg: "$color5"
+          backgroundColor: "$color5"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$8",
-          bg: "$color7"
+          backgroundColor: "$color7"
         }),
         /* @__PURE__ */ _jsx(Col, {
-          bg: "$color9"
+          backgroundColor: "$color9"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$8",
-          bg: "$color7"
+          backgroundColor: "$color7"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$6",
           y: 80,
-          bg: "$color5"
+          backgroundColor: "$color5"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$4",
           y: 50,
-          bg: "$color3"
+          backgroundColor: "$color3"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$2",
-          bg: "$color1"
+          backgroundColor: "$color1"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$4",
-          bg: "$color3"
+          backgroundColor: "$color3"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$6",
           y: -50,
-          bg: "$color5"
+          backgroundColor: "$color5"
         }),
         /* @__PURE__ */ _jsx(Col, {
           size: "$8",
           y: 30,
-          bg: "$color7"
+          backgroundColor: "$color7"
         }),
         /* @__PURE__ */ _jsx(Col, {
           y: 35,
-          bg: "$color9"
+          backgroundColor: "$color9"
         })
       ]
     })
@@ -96,87 +96,87 @@ function Col(props) {
     space: "$3.5",
     children: [
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: props.subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "orange" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "yellow" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "green" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "blue" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "purple" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "pink" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "red" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: props.subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "orange" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "yellow" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       }),
       /* @__PURE__ */ _jsx(Square, {
-        br: "$6",
+        borderRadius: "$6",
         size: "$10",
         theme: "green" + subTheme,
-        bg: "$background",
+        backgroundColor: "$background",
         ...props
       })
     ]