@tamagui/stacks 1.0.0-beta.9 → 1.0.1-beta.101

package/dist/cjs/SizableStack.js

@@ -22,78 +22,22 @@ __export(SizableStack_exports, {
 module.exports = __toCommonJS(SizableStack_exports);
 var import_core = require("@tamagui/core");
 var import_Stacks = require("./Stacks");
-const SizableStack = (0, import_core.styled)(import_Stacks.XStack, {
+var import_variants = require("./variants");
+const SizableStack = (0, import_core.styled)(import_Stacks.YStack, {
   name: "SizableStack",
   backgroundColor: "$background",
   flexDirection: "row",
   flexShrink: 1,
   variants: {
     fontFamily: () => ({}),
-    hoverable: {
-      true: {
-        hoverStyle: {
-          backgroundColor: "$backgroundHover",
-          borderColor: "$borderColorHover"
-        }
-      },
-      false: {
-        hoverStyle: {
-          backgroundColor: "$background",
-          borderColor: "$borderColor"
-        }
-      }
-    },
-    pressable: {
-      true: {
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorPress"
-        }
-      },
-      false: {
-        pressStyle: {
-          backgroundColor: "$background",
-          borderColor: "$borderColor"
-        }
-      }
-    },
-    focusable: {
-      true: {
-        focusStyle: {
-          backgroundColor: "$backgroundFocus",
-          borderColor: "$borderColorFocus"
-        }
-      }
-    },
-    bordered: {
-      true: {
-        borderWidth: 1,
-        borderColor: "$borderColor"
-      }
-    },
+    hoverTheme: import_variants.hoverTheme,
+    pressTheme: import_variants.pressTheme,
+    focusTheme: import_variants.focusTheme,
+    circular: import_variants.circular,
+    elevate: import_variants.elevate,
+    bordered: import_variants.bordered,
     size: {
-      "...size": (0, import_core.getButtonSize)()
-    },
-    disabled: {
-      true: {
-        opacity: 0.45,
-        backgroundColor: "$background",
-        hoverStyle: {
-          backgroundColor: "$background"
-        }
-      }
-    },
-    transparent: {
-      true: {
-        backgroundColor: "transparent"
-      }
-    },
-    chromeless: {
-      true: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        shadowColor: "transparent"
-      }
+      "...size": import_core.getButtonSize
     }
   }
 });

package/dist/cjs/SizableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableStack.tsx"],
-  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { XStack } from './Stacks'\n\nexport const SizableStack = styled(XStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverable: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n          borderColor: '$borderColorHover',\n        },\n      },\n      false: {\n        hoverStyle: {\n          backgroundColor: '$background',\n          borderColor: '$borderColor',\n        },\n      },\n    },\n\n    pressable: {\n      true: {\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n          borderColor: '$borderColorPress',\n        },\n      },\n      false: {\n        pressStyle: {\n          backgroundColor: '$background',\n          borderColor: '$borderColor',\n        },\n      },\n    },\n\n    focusable: {\n      true: {\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    bordered: {\n      true: {\n        borderWidth: 1,\n        borderColor: '$borderColor',\n      },\n    },\n\n    size: {\n      '...size': getButtonSize(),\n    },\n\n    disabled: {\n      true: {\n        // pointerEvents: 'none',\n        opacity: 0.45,\n        backgroundColor: '$background',\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: {\n        backgroundColor: 'transparent',\n        borderColor: 'transparent',\n        shadowColor: 'transparent',\n        // this would be a breaking change...\n        // hoverStyle: {\n        //   backgroundColor: 'transparent',\n        // },\n      },\n    },\n  },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AAEhB,MAAM,eAAe,wBAAO,sBAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,+BAAc;AAAA,IAC3B;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QAEJ,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MAKf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSize,\n    },\n  },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,sBAAgF;AAEzE,MAAM,eAAe,wBAAO,sBAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/cjs/Stacks.js

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -21,16 +20,19 @@ __export(Stacks_exports, {
   XStack: () => XStack,
   YStack: () => YStack,
   ZStack: () => ZStack,
+  getElevation: () => getElevation,
   getSizedElevation: () => getSizedElevation
 });
 module.exports = __toCommonJS(Stacks_exports);
 var import_core = require("@tamagui/core");
-const getElevation = /* @__PURE__ */ __name((size, extras) => {
+const getElevation = (size, extras) => {
+  if (!size)
+    return;
   const { tokens } = extras;
   const token = tokens.size[size];
   const sizeNum = (0, import_core.isVariable)(token) ? +token.val : size;
   return getSizedElevation(sizeNum, extras);
-}, "getElevation");
+};
 const fullscreenStyle = {
   position: "absolute",
   top: 0,
@@ -38,29 +40,23 @@ const fullscreenStyle = {
   right: 0,
   bottom: 0
 };
+const variants = {
+  fullscreen: {
+    true: fullscreenStyle
+  },
+  elevation: {
+    "...size": getElevation
+  }
+};
 const YStack = (0, import_core.styled)(import_core.Stack, {
   flexDirection: "column",
   name: "YStack",
-  variants: {
-    fullscreen: {
-      true: fullscreenStyle
-    },
-    elevation: {
-      "...size": getElevation
-    }
-  }
+  variants
 });
 const XStack = (0, import_core.styled)(import_core.Stack, {
   flexDirection: "row",
   name: "XStack",
-  variants: {
-    fullscreen: {
-      true: fullscreenStyle
-    },
-    elevation: {
-      "...size": getElevation
-    }
-  }
+  variants
 });
 const ZStack = (0, import_core.styled)(YStack, {
   name: "ZStack",
@@ -69,14 +65,22 @@ const ZStack = (0, import_core.styled)(YStack, {
   neverFlatten: true,
   isZStack: true
 });
-const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
-  const num = val === false ? 0 : val === true ? (() => {
+const getSizedElevation = (val, { theme, tokens }) => {
+  let num = 0;
+  if (val === true) {
     const val2 = (0, import_core.getVariableValue)(tokens.size["true"]);
     if (typeof val2 === "number") {
-      return val2;
+      num = val2;
+    } else {
+      num = 10;
     }
-    return 10;
-  })() : +val;
+  } else {
+    num = +val;
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (isNaN(num))
+      console.warn("NaN shadow", num, val);
+  }
   const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
   const shadow = {
     shadowColor: theme.shadowColor,
@@ -84,12 +88,13 @@ const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
     shadowOffset: { height, width: 0 }
   };
   return shadow;
-}, "getSizedElevation");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   XStack,
   YStack,
   ZStack,
+  getElevation,
   getSizedElevation
 });
 //# sourceMappingURL=Stacks.js.map

package/dist/cjs/Stacks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Stacks.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  SizeVariantSpreadFunction,\n  Stack,\n  StackProps,\n  VariantSpreadExtras,\n  getVariableValue,\n  isVariable,\n  styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = GetProps<typeof YStack>\nexport type ZStackProps = GetProps<typeof ZStack>\n\nconst getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n  const { tokens } = extras\n  const token = tokens.size[size]\n  const sizeNum = (isVariable(token) ? +token.val : size) as number\n  // TODO this could be configurable with require('tamagui').configure({ elevation: () => {} })\n  return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n} as const\n\nexport const YStack = styled(Stack, {\n  flexDirection: 'column',\n  name: 'YStack',\n  variants: {\n    fullscreen: {\n      true: fullscreenStyle,\n    },\n    elevation: {\n      '...size': getElevation,\n    },\n  },\n})\n\nexport const XStack = styled(Stack, {\n  flexDirection: 'row',\n  name: 'XStack',\n  variants: {\n    fullscreen: {\n      true: fullscreenStyle,\n    },\n    elevation: {\n      '...size': getElevation,\n    },\n  },\n})\n\nexport const ZStack = styled(\n  YStack,\n  {\n    name: 'ZStack',\n    position: 'relative',\n  },\n  {\n    neverFlatten: true,\n    isZStack: true,\n  }\n)\n\nexport const getSizedElevation = (\n  val: SizeTokens | number | boolean,\n  { theme, tokens }: VariantSpreadExtras<any>\n) => {\n  const num =\n    val === false\n      ? 0\n      : val === true\n      ? // handles true\n        (() => {\n          const val = getVariableValue(tokens.size['true'])\n          if (typeof val === 'number') {\n            return val\n          }\n          return 10\n        })()\n      : +val\n  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n  const shadow = {\n    shadowColor: theme.shadowColor,\n    shadowRadius,\n    shadowOffset: { height, width: 0 },\n  }\n  return shadow\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMP,MAAM,eAAsD,wBAAC,MAAM,WAAW;AAC5E,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,4BAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,SAAO,kBAAkB,SAAS,MAAM;AAC1C,GAN4D;AAQ5D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS,wBACpB,QACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AACZ,GACA;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AACZ,CACF;AAEO,MAAM,oBAAoB,wBAC/B,KACA,EAAE,OAAO,aACN;AACH,QAAM,MACJ,QAAQ,QACJ,IACA,QAAQ,OAEP,OAAM;AACL,UAAM,OAAM,kCAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAO,SAAQ,UAAU;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,IACH,CAAC;AACP,QAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT,GAxBiC;",
+  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  SizeVariantSpreadFunction,\n  Stack,\n  StackProps,\n  VariantSpreadExtras,\n  getVariableValue,\n  isVariable,\n  styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n  if (!size) return\n  const { tokens } = extras\n  const token = tokens.size[size]\n  const sizeNum = (isVariable(token) ? +token.val : size) as number\n  return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n} as const\n\nconst variants = {\n  fullscreen: {\n    true: fullscreenStyle,\n  },\n  elevation: {\n    '...size': getElevation,\n  },\n} as const\n\nexport const YStack = styled(Stack, {\n  flexDirection: 'column',\n  name: 'YStack',\n  variants,\n})\n\nexport const XStack = styled(Stack, {\n  flexDirection: 'row',\n  name: 'XStack',\n  variants,\n})\n\nexport const ZStack = styled(\n  YStack,\n  {\n    name: 'ZStack',\n    position: 'relative',\n  },\n  {\n    neverFlatten: true,\n    isZStack: true,\n  }\n)\n\nexport const getSizedElevation = (\n  val: SizeTokens | number | boolean,\n  { theme, tokens }: VariantSpreadExtras<any>\n) => {\n  let num = 0\n  if (val === true) {\n    const val = getVariableValue(tokens.size['true'])\n    if (typeof val === 'number') {\n      num = val\n    } else {\n      num = 10\n    }\n  } else {\n    num = +val\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (isNaN(num)) console.warn('NaN shadow', num, val)\n  }\n  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n  const shadow = {\n    shadowColor: theme.shadowColor,\n    shadowRadius,\n    shadowOffset: { height, width: 0 },\n  }\n  return shadow\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,4BAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,wBACpB,QACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AACZ,GACA;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AACZ,CACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,aACN;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAM,OAAM,kCAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAO,SAAQ,UAAU;AAC3B,YAAM;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,GAAG;AAAG,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,EACrD;AACA,QAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/ThemeableSizableStack.js

@@ -0,0 +1,70 @@
+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 ThemeableSizableStack_exports = {};
+__export(ThemeableSizableStack_exports, {
+  ThemeableSizableStack: () => ThemeableSizableStack
+});
+module.exports = __toCommonJS(ThemeableSizableStack_exports);
+var import_core = require("@tamagui/core");
+var import_Stacks = require("./Stacks");
+var import_variants = require("./variants");
+const ThemeableSizableStack = (0, import_core.styled)(import_Stacks.YStack, {
+  name: "SizableStack",
+  backgroundColor: "$background",
+  flexDirection: "row",
+  flexShrink: 1,
+  variants: {
+    fontFamily: () => ({}),
+    hoverable: import_variants.hoverable,
+    pressable: import_variants.pressable,
+    focusable: import_variants.focusable,
+    circular: import_variants.circular,
+    pad: import_variants.pad,
+    elevate: import_variants.elevate,
+    bordered: import_variants.bordered,
+    size: {
+      "...size": import_core.getButtonSize
+    },
+    disabled: {
+      true: {
+        opacity: 0.45,
+        backgroundColor: "$background",
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        shadowColor: "transparent"
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeableSizableStack
+});
+//# sourceMappingURL=ThemeableSizableStack.js.map

package/dist/cjs/ThemeableSizableStack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeableSizableStack.tsx"],
+  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pad, pressable } from './variants'\n\nexport const ThemeableSizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverable,\n    pressable,\n    focusable,\n    circular,\n    pad,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSize,\n    },\n\n    disabled: {\n      true: {\n        // pointerEvents: 'none',\n        opacity: 0.45,\n        backgroundColor: '$background',\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: {\n        backgroundColor: 'transparent',\n        borderColor: 'transparent',\n        shadowColor: 'transparent',\n      },\n    },\n  },\n})\n\nexport type ThemeableSizableStackProps = GetProps<typeof ThemeableSizableStack>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,sBAAkF;AAE3E,MAAM,wBAAwB,wBAAO,sBAAQ;AAAA,EAClD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QAEJ,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "names": []
+}

package/dist/cjs/ThemeableStack.js

@@ -0,0 +1,61 @@
+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 ThemeableStack_exports = {};
+__export(ThemeableStack_exports, {
+  ThemeableStack: () => ThemeableStack
+});
+module.exports = __toCommonJS(ThemeableStack_exports);
+var import_core = require("@tamagui/core");
+var import_Stacks = require("./Stacks");
+var import_variants = require("./variants");
+const ThemeableStack = (0, import_core.styled)(import_Stacks.YStack, {
+  name: "SizableStack",
+  variants: {
+    fontFamily: () => ({}),
+    backgrounded: {
+      true: {
+        backgroundColor: "$background"
+      }
+    },
+    radiused: import_variants.radiused,
+    hoverTheme: import_variants.hoverTheme,
+    pressTheme: import_variants.pressTheme,
+    focusTheme: import_variants.focusTheme,
+    circular: import_variants.circular,
+    padded: import_variants.padded,
+    elevate: import_variants.elevate,
+    bordered: import_variants.bordered,
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        shadowColor: "transparent"
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeableStack
+});
+//# sourceMappingURL=ThemeableStack.js.map

package/dist/cjs/ThemeableStack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeableStack.tsx"],
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport {\n  bordered,\n  circular,\n  elevate,\n  focusTheme,\n  hoverTheme,\n  padded,\n  pressTheme,\n  radiused,\n} from './variants'\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    backgrounded: {\n      true: {\n        backgroundColor: '$background',\n      },\n    },\n\n    radiused,\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    padded,\n    elevate,\n    bordered,\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: {\n        backgroundColor: 'transparent',\n        borderColor: 'transparent',\n        shadowColor: 'transparent',\n      },\n    },\n  },\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAEjC,oBAAuB;AACvB,sBASO;AAEA,MAAM,iBAAiB,wBAAO,sBAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -16,4 +16,5 @@ var src_exports = {};
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./Stacks"), module.exports);
 __reExport(src_exports, require("./SizableStack"), module.exports);
+__reExport(src_exports, require("./ThemeableStack"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;",
+  "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,6BAFd;",
   "names": []
 }

package/dist/cjs/variants.js

@@ -0,0 +1,138 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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 variants_exports = {};
+__export(variants_exports, {
+  bordered: () => bordered,
+  circular: () => circular,
+  elevate: () => elevate,
+  focusTheme: () => focusTheme,
+  hoverTheme: () => hoverTheme,
+  padded: () => padded,
+  pressTheme: () => pressTheme,
+  radiused: () => radiused
+});
+module.exports = __toCommonJS(variants_exports);
+var import_Stacks = require("./Stacks");
+const elevate = {
+  true: (_, extras) => {
+    return (0, import_Stacks.getElevation)(extras.props["size"], extras);
+  }
+};
+const bordered = (val, { props }) => {
+  return __spreadValues(__spreadValues(__spreadValues({
+    borderWidth: typeof val === "number" ? val : 1,
+    borderColor: "$borderColor"
+  }, props.hoverTheme && {
+    hoverStyle: {
+      borderColor: "$borderColorHover"
+    }
+  }), props.pressTheme && {
+    pressStyle: {
+      borderColor: "$borderColorPress"
+    }
+  }), props.focusTheme && {
+    focusStyle: {
+      borderColor: "$borderColorFocus"
+    }
+  });
+};
+const padded = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      padding: tokens.space[props.size] || tokens.space["$4"]
+    };
+  }
+};
+const radiused = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      borderRadius: tokens.radius[props.size] || tokens.radius["$4"]
+    };
+  }
+};
+const circular = {
+  true: (_, { props, tokens }) => {
+    const size = tokens.size[props.size];
+    return {
+      width: size,
+      height: size,
+      maxWidth: size,
+      maxHeight: size,
+      minWidth: size,
+      minHeight: size,
+      borderRadius: 1e5,
+      paddingVertical: 0,
+      paddingHorizontal: 0
+    };
+  }
+};
+const hoverTheme = {
+  true: {
+    hoverStyle: {
+      backgroundColor: "$backgroundHover",
+      borderColor: "$borderColorHover"
+    }
+  },
+  false: {}
+};
+const pressTheme = {
+  true: {
+    pressStyle: {
+      backgroundColor: "$backgroundPress",
+      borderColor: "$borderColorPress"
+    }
+  },
+  false: {}
+};
+const focusTheme = {
+  true: {
+    focusStyle: {
+      backgroundColor: "$backgroundFocus",
+      borderColor: "$borderColorFocus"
+    }
+  },
+  false: {}
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  bordered,
+  circular,
+  elevate,
+  focusTheme,
+  hoverTheme,
+  padded,
+  pressTheme,
+  radiused
+});
+//# sourceMappingURL=variants.js.map

package/dist/cjs/variants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/variants.tsx"],
+  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_: boolean, extras: any) => {\n    return getElevation(extras.props['size'], extras)\n  },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n  return {\n    // TODO size it with size in '...size'\n    borderWidth: typeof val === 'number' ? val : 1,\n    borderColor: '$borderColor',\n\n    ...(props.hoverTheme && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressTheme && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusTheme && {\n      focusStyle: {\n        borderColor: '$borderColorFocus',\n      },\n    }),\n  }\n}\n\nexport const padded = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.space[props.size] || tokens.space['$4'],\n    }\n  },\n}\n\nexport const radiused = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, { props, tokens }) => {\n    const size = tokens.size[props.size]\n    return {\n      width: size,\n      height: size,\n      maxWidth: size,\n      maxHeight: size,\n      minWidth: size,\n      minHeight: size,\n      borderRadius: 100_000,\n      paddingVertical: 0,\n      paddingHorizontal: 0,\n    }\n  },\n}\n\nexport const hoverTheme = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressTheme = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusTheme = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,gCAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,KAET,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF;AAEJ;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,SAAS,OAAO,MAAM;AAAA,IACpD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,SAAS,OAAO,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,aAAa;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM;AAC/B,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
+  "names": []
+}

package/dist/esm/SizableStack.js

@@ -1,77 +1,21 @@
 import { getButtonSize, styled } from "@tamagui/core";
-import { XStack } from "./Stacks";
-const SizableStack = styled(XStack, {
+import { YStack } from "./Stacks";
+import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from "./variants";
+const SizableStack = styled(YStack, {
   name: "SizableStack",
   backgroundColor: "$background",
   flexDirection: "row",
   flexShrink: 1,
   variants: {
     fontFamily: () => ({}),
-    hoverable: {
-      true: {
-        hoverStyle: {
-          backgroundColor: "$backgroundHover",
-          borderColor: "$borderColorHover"
-        }
-      },
-      false: {
-        hoverStyle: {
-          backgroundColor: "$background",
-          borderColor: "$borderColor"
-        }
-      }
-    },
-    pressable: {
-      true: {
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorPress"
-        }
-      },
-      false: {
-        pressStyle: {
-          backgroundColor: "$background",
-          borderColor: "$borderColor"
-        }
-      }
-    },
-    focusable: {
-      true: {
-        focusStyle: {
-          backgroundColor: "$backgroundFocus",
-          borderColor: "$borderColorFocus"
-        }
-      }
-    },
-    bordered: {
-      true: {
-        borderWidth: 1,
-        borderColor: "$borderColor"
-      }
-    },
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    elevate,
+    bordered,
     size: {
-      "...size": getButtonSize()
-    },
-    disabled: {
-      true: {
-        opacity: 0.45,
-        backgroundColor: "$background",
-        hoverStyle: {
-          backgroundColor: "$background"
-        }
-      }
-    },
-    transparent: {
-      true: {
-        backgroundColor: "transparent"
-      }
-    },
-    chromeless: {
-      true: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        shadowColor: "transparent"
-      }
+      "...size": getButtonSize
     }
   }
 });