@tamagui/stacks 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/esm/Stacks.js

@@ -1,17 +1,17 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import {
   Stack,
   getVariableValue,
   isVariable,
   styled
 } from "@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 = isVariable(token) ? +token.val : size;
   return getSizedElevation(sizeNum, extras);
-}, "getElevation");
+};
 const fullscreenStyle = {
   position: "absolute",
   top: 0,
@@ -19,45 +19,52 @@ const fullscreenStyle = {
   right: 0,
   bottom: 0
 };
+const variants = {
+  fullscreen: {
+    true: fullscreenStyle
+  },
+  elevation: {
+    "...size": getElevation
+  }
+};
 const YStack = styled(Stack, {
   flexDirection: "column",
   name: "YStack",
-  variants: {
-    fullscreen: {
-      true: fullscreenStyle
-    },
-    elevation: {
-      "...size": getElevation
-    }
-  }
+  variants
 });
 const XStack = styled(Stack, {
   flexDirection: "row",
   name: "XStack",
-  variants: {
-    fullscreen: {
-      true: fullscreenStyle
-    },
-    elevation: {
-      "...size": getElevation
-    }
-  }
+  variants
 });
-const ZStack = styled(YStack, {
-  name: "ZStack",
-  position: "relative"
-}, {
-  neverFlatten: true,
-  isZStack: true
-});
-const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
-  const num = val === false ? 0 : val === true ? (() => {
+const ZStack = styled(
+  YStack,
+  {
+    name: "ZStack",
+    position: "relative"
+  },
+  {
+    neverFlatten: true,
+    isZStack: true
+  }
+);
+const getSizedElevation = (val, { theme, tokens }) => {
+  let num = 0;
+  if (val === true) {
     const val2 = 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 (num !== null && 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,
@@ -65,11 +72,12 @@ const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
     shadowOffset: { height, width: 0 }
   };
   return shadow;
-}, "getSizedElevation");
+};
 export {
   XStack,
   YStack,
   ZStack,
+  getElevation,
   getSizedElevation
 };
 //# sourceMappingURL=Stacks.js.map

package/dist/esm/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;AAgBA,MAAM,eAAsD,wBAAC,MAAM,WAAW;AAC5E,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,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,OAAO,OAAO;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,OAAO,OAAO;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,OACpB,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,iBAAiB,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;",
-  "names": []
+  "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 (num !== null && isNaN(num)) {\n      // eslint-disable-next-line no-console\n      console.warn('NaN shadow', num, val)\n    }\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,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,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,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,OAAM,iBAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,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": ["val"]
 }

package/dist/esm/ThemeableStack.js

@@ -0,0 +1,54 @@
+import { styled } from "@tamagui/core";
+import { YStack } from "./Stacks";
+import {
+  bordered,
+  circular,
+  elevate,
+  focusTheme,
+  hoverTheme,
+  padded,
+  pressTheme,
+  radiused
+} from "./variants";
+const chromelessStyle = {
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  shadowColor: "transparent"
+};
+const ThemeableStack = styled(YStack, {
+  name: "SizableStack",
+  variants: {
+    fontFamily: () => ({}),
+    backgrounded: {
+      true: {
+        backgroundColor: "$background"
+      }
+    },
+    radiused,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    padded,
+    elevate,
+    bordered,
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: chromelessStyle,
+      all: {
+        ...chromelessStyle,
+        hoverStyle: chromelessStyle,
+        pressStyle: chromelessStyle,
+        focusStyle: chromelessStyle
+      }
+    }
+  }
+});
+export {
+  ThemeableStack
+};
+//# sourceMappingURL=ThemeableStack.js.map

package/dist/esm/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\nconst chromelessStyle = {\n  backgroundColor: 'transparent',\n  borderColor: 'transparent',\n  shadowColor: 'transparent',\n}\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: chromelessStyle,\n      all: {\n        ...chromelessStyle,\n        hoverStyle: chromelessStyle,\n        pressStyle: chromelessStyle,\n        focusStyle: chromelessStyle,\n      },\n    },\n  } as const,\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
+  "mappings": "AAAA,SAAmB,cAAc;AAEjC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AACf;AAEO,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;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,MACN,KAAK;AAAA,QACH,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export * from "./Stacks";
 export * from "./SizableStack";
+export * from "./ThemeableStack";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/variants.js

@@ -0,0 +1,97 @@
+import { getElevation } from "./Stacks";
+const elevate = {
+  true: (_, extras) => {
+    return getElevation(extras.props["size"], extras);
+  }
+};
+const bordered = (val, { props }) => {
+  return {
+    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: {}
+};
+export {
+  bordered,
+  circular,
+  elevate,
+  focusTheme,
+  hoverTheme,
+  padded,
+  pressTheme,
+  radiused
+};
+//# sourceMappingURL=variants.js.map

package/dist/esm/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,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;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,MAAM,IAAI;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,OAAO,MAAM;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/jsx/.tamagui-dynamic-eval-SizableStack.js.js

@@ -0,0 +1,23 @@
+import { getButtonSize, styled } from "@tamagui/core";
+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: () => ({}),
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    elevate,
+    bordered,
+    size: {
+      "...size": getButtonSize
+    }
+  }
+});
+export { SizableStack };
+//# sourceMappingURL=SizableStack.js.map

package/dist/jsx/SizableStack.js

@@ -1,80 +1,26 @@
-import { getButtonSize, styled } from "@tamagui/core";
-import { XStack } from "./Stacks";
-const SizableStack = styled(XStack, {
+import { styled } from "@tamagui/core";
+import { getButtonSized } from "@tamagui/get-button-sized";
+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": getButtonSized
     }
   }
 });
 export {
   SizableStack
 };
+//# sourceMappingURL=SizableStack.js.map

package/dist/jsx/SizableStack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SizableStack.tsx"],
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\nimport { getButtonSized } from '@tamagui/get-button-sized'\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': getButtonSized,\n    },\n  } as const,\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
+  "mappings": "AAAA,SAAmB,cAAc;AACjC,SAAS,sBAAsB;AAE/B,SAAS,cAAc;AACvB,SAAS,UAAU,UAAU,SAAS,YAAY,YAAY,kBAAkB;AAEzE,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;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/jsx/Stacks.js

@@ -1,17 +1,17 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import {
   Stack,
   getVariableValue,
   isVariable,
   styled
 } from "@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 = isVariable(token) ? +token.val : size;
   return getSizedElevation(sizeNum, extras);
-}, "getElevation");
+};
 const fullscreenStyle = {
   position: "absolute",
   top: 0,
@@ -19,45 +19,52 @@ const fullscreenStyle = {
   right: 0,
   bottom: 0
 };
+const variants = {
+  fullscreen: {
+    true: fullscreenStyle
+  },
+  elevation: {
+    "...size": getElevation
+  }
+};
 const YStack = styled(Stack, {
   flexDirection: "column",
   name: "YStack",
-  variants: {
-    fullscreen: {
-      true: fullscreenStyle
-    },
-    elevation: {
-      "...size": getElevation
-    }
-  }
+  variants
 });
 const XStack = styled(Stack, {
   flexDirection: "row",
   name: "XStack",
-  variants: {
-    fullscreen: {
-      true: fullscreenStyle
-    },
-    elevation: {
-      "...size": getElevation
-    }
-  }
+  variants
 });
-const ZStack = styled(YStack, {
-  name: "ZStack",
-  position: "relative"
-}, {
-  neverFlatten: true,
-  isZStack: true
-});
-const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
-  const num = val === false ? 0 : val === true ? (() => {
+const ZStack = styled(
+  YStack,
+  {
+    name: "ZStack",
+    position: "relative"
+  },
+  {
+    neverFlatten: true,
+    isZStack: true
+  }
+);
+const getSizedElevation = (val, { theme, tokens }) => {
+  let num = 0;
+  if (val === true) {
     const val2 = 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 (num !== null && 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,
@@ -65,10 +72,12 @@ const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
     shadowOffset: { height, width: 0 }
   };
   return shadow;
-}, "getSizedElevation");
+};
 export {
   XStack,
   YStack,
   ZStack,
+  getElevation,
   getSizedElevation
 };
+//# sourceMappingURL=Stacks.js.map

package/dist/jsx/Stacks.js.map

@@ -0,0 +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 = 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 (num !== null && isNaN(num)) {\n      // eslint-disable-next-line no-console\n      console.warn('NaN shadow', num, val)\n    }\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,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,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,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,OAAM,iBAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,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": ["val"]
+}

package/dist/jsx/ThemeableStack.js

@@ -0,0 +1,54 @@
+import { styled } from "@tamagui/core";
+import { YStack } from "./Stacks";
+import {
+  bordered,
+  circular,
+  elevate,
+  focusTheme,
+  hoverTheme,
+  padded,
+  pressTheme,
+  radiused
+} from "./variants";
+const chromelessStyle = {
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  shadowColor: "transparent"
+};
+const ThemeableStack = styled(YStack, {
+  name: "SizableStack",
+  variants: {
+    fontFamily: () => ({}),
+    backgrounded: {
+      true: {
+        backgroundColor: "$background"
+      }
+    },
+    radiused,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    padded,
+    elevate,
+    bordered,
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: chromelessStyle,
+      all: {
+        ...chromelessStyle,
+        hoverStyle: chromelessStyle,
+        pressStyle: chromelessStyle,
+        focusStyle: chromelessStyle
+      }
+    }
+  }
+});
+export {
+  ThemeableStack
+};
+//# sourceMappingURL=ThemeableStack.js.map

package/dist/jsx/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\nconst chromelessStyle = {\n  backgroundColor: 'transparent',\n  borderColor: 'transparent',\n  shadowColor: 'transparent',\n}\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: chromelessStyle,\n      all: {\n        ...chromelessStyle,\n        hoverStyle: chromelessStyle,\n        pressStyle: chromelessStyle,\n        focusStyle: chromelessStyle,\n      },\n    },\n  } as const,\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
+  "mappings": "AAAA,SAAmB,cAAc;AAEjC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AACf;AAEO,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;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,MACN,KAAK;AAAA,QACH,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -1,2 +1,4 @@
 export * from "./Stacks";
 export * from "./SizableStack";
+export * from "./ThemeableStack";
+//# sourceMappingURL=index.js.map