@tamagui/stacks 1.0.1-beta.70 → 1.0.1-beta.73

package/dist/cjs/SizableStack.js

@@ -30,9 +30,9 @@ const SizableStack = (0, import_core.styled)(import_Stacks.YStack, {
   flexShrink: 1,
   variants: {
     fontFamily: () => ({}),
-    hoverable: import_variants.hoverable,
-    pressable: import_variants.pressable,
-    focusable: import_variants.focusable,
+    hoverTheme: import_variants.hoverTheme,
+    pressTheme: import_variants.pressTheme,
+    focusTheme: import_variants.focusTheme,
     circular: import_variants.circular,
     elevate: import_variants.elevate,
     bordered: import_variants.bordered,

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 { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pressable } 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    hoverable,\n    pressable,\n    focusable,\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,sBAA6E;AAEtE,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;",
+  "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 });
@@ -26,12 +25,12 @@ __export(Stacks_exports, {
 });
 module.exports = __toCommonJS(Stacks_exports);
 var import_core = require("@tamagui/core");
-const getElevation = /* @__PURE__ */ __name((size, extras) => {
+const getElevation = (size, extras) => {
   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,
@@ -64,7 +63,7 @@ const ZStack = (0, import_core.styled)(YStack, {
   neverFlatten: true,
   isZStack: true
 });
-const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
+const getSizedElevation = (val, { theme, tokens }) => {
   const num = val === false ? 0 : val === true ? (() => {
     const val2 = (0, import_core.getVariableValue)(tokens.size["true"]);
     if (typeof val2 === "number") {
@@ -79,7 +78,7 @@ 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,

package/dist/cjs/Stacks.js.map

@@ -2,6 +2,6 @@
   "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  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\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  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;AAAA,kBAUO;AAMA,MAAM,eAAsD,wBAAC,MAAM,WAAW;AACnF,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,4BAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,SAAO,kBAAkB,SAAS,MAAM;AAC1C,GANmE;AAQnE,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,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;",
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,4BAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,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,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;",
   "names": []
 }

package/dist/cjs/ThemeableStack.js

@@ -33,9 +33,9 @@ const ThemeableStack = (0, import_core.styled)(import_Stacks.YStack, {
       }
     },
     radiused: import_variants.radiused,
-    hoverable: import_variants.hoverable,
-    pressable: import_variants.pressable,
-    focusable: import_variants.focusable,
+    hoverTheme: import_variants.hoverTheme,
+    pressTheme: import_variants.pressTheme,
+    focusTheme: import_variants.focusTheme,
     circular: import_variants.circular,
     padded: import_variants.padded,
     elevate: import_variants.elevate,

package/dist/cjs/ThemeableStack.js.map

@@ -1,7 +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  focusable,\n  hoverable,\n  padded,\n  pressable,\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    hoverable,\n    pressable,\n    focusable,\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"],
+  "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/variants.js

@@ -16,7 +16,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-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 });
@@ -35,10 +34,10 @@ __export(variants_exports, {
   bordered: () => bordered,
   circular: () => circular,
   elevate: () => elevate,
-  focusable: () => focusable,
-  hoverable: () => hoverable,
+  focusTheme: () => focusTheme,
+  hoverTheme: () => hoverTheme,
   padded: () => padded,
-  pressable: () => pressable,
+  pressTheme: () => pressTheme,
   radiused: () => radiused
 });
 module.exports = __toCommonJS(variants_exports);
@@ -48,24 +47,24 @@ const elevate = {
     return (0, import_Stacks.getElevation)(extras.props["size"], extras);
   }
 };
-const bordered = /* @__PURE__ */ __name((val, { props }) => {
+const bordered = (val, { props }) => {
   return __spreadValues(__spreadValues(__spreadValues({
     borderWidth: typeof val === "number" ? val : 1,
     borderColor: "$borderColor"
-  }, props.hoverable && {
+  }, props.hoverTheme && {
     hoverStyle: {
       borderColor: "$borderColorHover"
     }
-  }), props.pressable && {
+  }), props.pressTheme && {
     pressStyle: {
       borderColor: "$borderColorPress"
     }
-  }), props.focusable && {
+  }), props.focusTheme && {
     focusStyle: {
       borderColor: "$borderColorFocus"
     }
   });
-}, "bordered");
+};
 const padded = {
   true: (_, extras) => {
     const { tokens, props } = extras;
@@ -98,7 +97,7 @@ const circular = {
     };
   }
 };
-const hoverable = {
+const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: "$backgroundHover",
@@ -107,7 +106,7 @@ const hoverable = {
   },
   false: {}
 };
-const pressable = {
+const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: "$backgroundPress",
@@ -116,7 +115,7 @@ const pressable = {
   },
   false: {}
 };
-const focusable = {
+const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: "$backgroundFocus",
@@ -130,10 +129,10 @@ const focusable = {
   bordered,
   circular,
   elevate,
-  focusable,
-  hoverable,
+  focusTheme,
+  hoverTheme,
   padded,
-  pressable,
+  pressTheme,
   radiused
 });
 //# sourceMappingURL=variants.js.map

package/dist/cjs/variants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variants.tsx"],
-  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_, extras) => {\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.hoverable && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressable && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusable && {\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 hoverable = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressable = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusable = {\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,GAAG,WAAW;AACnB,WAAO,gCAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,wBAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,KAET,MAAM,aAAa;AAAA,IACrB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,aAAa;AAAA,IACrB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,aAAa;AAAA,IACrB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF;AAEJ,GAxBwB;AA0BjB,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,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
+  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_, extras) => {\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,GAAG,WAAW;AACnB,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,6 +1,6 @@
 import { getButtonSize, styled } from "@tamagui/core";
 import { YStack } from "./Stacks";
-import { bordered, circular, elevate, focusable, hoverable, pressable } from "./variants";
+import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from "./variants";
 const SizableStack = styled(YStack, {
   name: "SizableStack",
   backgroundColor: "$background",
@@ -8,9 +8,9 @@ const SizableStack = styled(YStack, {
   flexShrink: 1,
   variants: {
     fontFamily: () => ({}),
-    hoverable,
-    pressable,
-    focusable,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
     circular,
     elevate,
     bordered,

package/dist/esm/SizableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableStack.tsx"],
-  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pressable } 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    hoverable,\n    pressable,\n    focusable,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSize,\n    },\n  },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
+  "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;AAEA;AACA;AAEO,MAAM,eAAe,OAAO,QAAQ;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/esm/Stacks.js

@@ -1,17 +1,15 @@
-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) => {
   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,
@@ -44,7 +42,7 @@ const ZStack = styled(YStack, {
   neverFlatten: true,
   isZStack: true
 });
-const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
+const getSizedElevation = (val, { theme, tokens }) => {
   const num = val === false ? 0 : val === true ? (() => {
     const val2 = getVariableValue(tokens.size["true"]);
     if (typeof val2 === "number") {
@@ -59,7 +57,7 @@ const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
     shadowOffset: { height, width: 0 }
   };
   return shadow;
-}, "getSizedElevation");
+};
 export {
   XStack,
   YStack,

package/dist/esm/Stacks.js.map

@@ -2,6 +2,6 @@
   "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  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\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  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;AAgBO,MAAM,eAAsD,wBAAC,MAAM,WAAW;AACnF,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,SAAO,kBAAkB,SAAS,MAAM;AAC1C,GANmE;AAQnE,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,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;",
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBO,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,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,OACpB,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,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;",
   "names": []
 }

package/dist/esm/ThemeableStack.js

@@ -4,10 +4,10 @@ import {
   bordered,
   circular,
   elevate,
-  focusable,
-  hoverable,
+  focusTheme,
+  hoverTheme,
   padded,
-  pressable,
+  pressTheme,
   radiused
 } from "./variants";
 const ThemeableStack = styled(YStack, {
@@ -20,9 +20,9 @@ const ThemeableStack = styled(YStack, {
       }
     },
     radiused,
-    hoverable,
-    pressable,
-    focusable,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
     circular,
     padded,
     elevate,

package/dist/esm/ThemeableStack.js.map

@@ -1,7 +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  focusable,\n  hoverable,\n  padded,\n  pressable,\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    hoverable,\n    pressable,\n    focusable,\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"],
+  "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;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,iBAAiB,OAAO,QAAQ;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/esm/variants.js

@@ -1,32 +1,30 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { getElevation } from "./Stacks";
 const elevate = {
   true: (_, extras) => {
     return getElevation(extras.props["size"], extras);
   }
 };
-const bordered = /* @__PURE__ */ __name((val, { props }) => {
+const bordered = (val, { props }) => {
   return {
     borderWidth: typeof val === "number" ? val : 1,
     borderColor: "$borderColor",
-    ...props.hoverable && {
+    ...props.hoverTheme && {
       hoverStyle: {
         borderColor: "$borderColorHover"
       }
     },
-    ...props.pressable && {
+    ...props.pressTheme && {
       pressStyle: {
         borderColor: "$borderColorPress"
       }
     },
-    ...props.focusable && {
+    ...props.focusTheme && {
       focusStyle: {
         borderColor: "$borderColorFocus"
       }
     }
   };
-}, "bordered");
+};
 const padded = {
   true: (_, extras) => {
     const { tokens, props } = extras;
@@ -59,7 +57,7 @@ const circular = {
     };
   }
 };
-const hoverable = {
+const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: "$backgroundHover",
@@ -68,7 +66,7 @@ const hoverable = {
   },
   false: {}
 };
-const pressable = {
+const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: "$backgroundPress",
@@ -77,7 +75,7 @@ const pressable = {
   },
   false: {}
 };
-const focusable = {
+const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: "$backgroundFocus",
@@ -90,10 +88,10 @@ export {
   bordered,
   circular,
   elevate,
-  focusable,
-  hoverable,
+  focusTheme,
+  hoverTheme,
   padded,
-  pressable,
+  pressTheme,
   radiused
 };
 //# sourceMappingURL=variants.js.map

package/dist/esm/variants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variants.tsx"],
-  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_, extras) => {\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.hoverable && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressable && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusable && {\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 hoverable = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressable = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusable = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
-  "mappings": ";;AAAA;AAEO,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAG,WAAW;AACnB,WAAO,aAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,wBAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,GAxBwB;AA0BjB,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,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
+  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_, extras) => {\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;AAEO,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAG,WAAW;AACnB,WAAO,aAAa,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,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,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/jsx/SizableStack.js

@@ -1,6 +1,6 @@
 import { getButtonSize, styled } from "@tamagui/core";
 import { YStack } from "./Stacks";
-import { bordered, circular, elevate, focusable, hoverable, pressable } from "./variants";
+import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from "./variants";
 const SizableStack = styled(YStack, {
   name: "SizableStack",
   backgroundColor: "$background",
@@ -8,9 +8,9 @@ const SizableStack = styled(YStack, {
   flexShrink: 1,
   variants: {
     fontFamily: () => ({}),
-    hoverable,
-    pressable,
-    focusable,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
     circular,
     elevate,
     bordered,

package/dist/jsx/Stacks.js

@@ -1,17 +1,15 @@
-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) => {
   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,
@@ -44,7 +42,7 @@ const ZStack = styled(YStack, {
   neverFlatten: true,
   isZStack: true
 });
-const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
+const getSizedElevation = (val, { theme, tokens }) => {
   const num = val === false ? 0 : val === true ? (() => {
     const val2 = getVariableValue(tokens.size["true"]);
     if (typeof val2 === "number") {
@@ -59,7 +57,7 @@ const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
     shadowOffset: { height, width: 0 }
   };
   return shadow;
-}, "getSizedElevation");
+};
 export {
   XStack,
   YStack,

package/dist/jsx/ThemeableStack.js

@@ -4,10 +4,10 @@ import {
   bordered,
   circular,
   elevate,
-  focusable,
-  hoverable,
+  focusTheme,
+  hoverTheme,
   padded,
-  pressable,
+  pressTheme,
   radiused
 } from "./variants";
 const ThemeableStack = styled(YStack, {
@@ -20,9 +20,9 @@ const ThemeableStack = styled(YStack, {
       }
     },
     radiused,
-    hoverable,
-    pressable,
-    focusable,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
     circular,
     padded,
     elevate,

package/dist/jsx/variants.js

@@ -1,32 +1,30 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { getElevation } from "./Stacks";
 const elevate = {
   true: (_, extras) => {
     return getElevation(extras.props["size"], extras);
   }
 };
-const bordered = /* @__PURE__ */ __name((val, { props }) => {
+const bordered = (val, { props }) => {
   return {
     borderWidth: typeof val === "number" ? val : 1,
     borderColor: "$borderColor",
-    ...props.hoverable && {
+    ...props.hoverTheme && {
       hoverStyle: {
         borderColor: "$borderColorHover"
       }
     },
-    ...props.pressable && {
+    ...props.pressTheme && {
       pressStyle: {
         borderColor: "$borderColorPress"
       }
     },
-    ...props.focusable && {
+    ...props.focusTheme && {
       focusStyle: {
         borderColor: "$borderColorFocus"
       }
     }
   };
-}, "bordered");
+};
 const padded = {
   true: (_, extras) => {
     const { tokens, props } = extras;
@@ -59,7 +57,7 @@ const circular = {
     };
   }
 };
-const hoverable = {
+const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: "$backgroundHover",
@@ -68,7 +66,7 @@ const hoverable = {
   },
   false: {}
 };
-const pressable = {
+const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: "$backgroundPress",
@@ -77,7 +75,7 @@ const pressable = {
   },
   false: {}
 };
-const focusable = {
+const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: "$backgroundFocus",
@@ -90,9 +88,9 @@ export {
   bordered,
   circular,
   elevate,
-  focusable,
-  hoverable,
+  focusTheme,
+  hoverTheme,
   padded,
-  pressable,
+  pressTheme,
   radiused
 };

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@tamagui/stacks",
-  "version": "1.0.1-beta.70",
-  "sideEffects": false,
+  "version": "1.0.1-beta.73",
+  "sideEffects": [
+    "*.css"
+  ],
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -17,14 +19,14 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.70"
+    "@tamagui/core": "^1.0.1-beta.73"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.70",
+    "@tamagui/build": "^1.0.1-beta.73",
     "react": "*",
     "react-dom": "*"
   },

package/src/SizableStack.tsx

@@ -1,7 +1,7 @@
 import { GetProps, getButtonSize, styled } from '@tamagui/core'
 
 import { YStack } from './Stacks'
-import { bordered, circular, elevate, focusable, hoverable, pressable } from './variants'
+import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'
 
 export const SizableStack = styled(YStack, {
   name: 'SizableStack',
@@ -13,9 +13,9 @@ export const SizableStack = styled(YStack, {
     // allows the type to come in for use in size
     fontFamily: () => ({}),
 
-    hoverable,
-    pressable,
-    focusable,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
     circular,
     elevate,
     bordered,

package/src/ThemeableStack.tsx

@@ -5,10 +5,10 @@ import {
   bordered,
   circular,
   elevate,
-  focusable,
-  hoverable,
+  focusTheme,
+  hoverTheme,
   padded,
-  pressable,
+  pressTheme,
   radiused,
 } from './variants'
 
@@ -26,9 +26,9 @@ export const ThemeableStack = styled(YStack, {
     },
 
     radiused,
-    hoverable,
-    pressable,
-    focusable,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
     circular,
     padded,
     elevate,

package/src/variants.tsx

@@ -12,19 +12,19 @@ export const bordered = (val: boolean | number, { props }) => {
     borderWidth: typeof val === 'number' ? val : 1,
     borderColor: '$borderColor',
 
-    ...(props.hoverable && {
+    ...(props.hoverTheme && {
       hoverStyle: {
         borderColor: '$borderColorHover',
       },
     }),
 
-    ...(props.pressable && {
+    ...(props.pressTheme && {
       pressStyle: {
         borderColor: '$borderColorPress',
       },
     }),
 
-    ...(props.focusable && {
+    ...(props.focusTheme && {
       focusStyle: {
         borderColor: '$borderColorFocus',
       },
@@ -67,7 +67,7 @@ export const circular = {
   },
 }
 
-export const hoverable = {
+export const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: '$backgroundHover',
@@ -77,7 +77,7 @@ export const hoverable = {
   false: {},
 }
 
-export const pressable = {
+export const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: '$backgroundPress',
@@ -87,7 +87,7 @@ export const pressable = {
   false: {},
 }
 
-export const focusable = {
+export const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: '$backgroundFocus',

package/types/SizableStack.d.ts

@@ -2,11 +2,11 @@ import { GetProps } from '@tamagui/core';
 export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered"> & {
+}, "fontFamily" | "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
     fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
@@ -14,11 +14,11 @@ export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered"> & {
+}, "fontFamily" | "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
     fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
@@ -26,11 +26,11 @@ export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered"> & {
+}, "fontFamily" | "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
     fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
@@ -40,9 +40,9 @@ export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & {
     fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;

package/types/ThemeableStack.d.ts

@@ -2,13 +2,13 @@ import { GetProps } from '@tamagui/core';
 export declare const ThemeableStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "backgrounded" | "radiused" | "padded" | "chromeless"> & {
+}, "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered" | "transparent" | "backgrounded" | "radiused" | "padded" | "chromeless"> & {
     fontFamily?: unknown;
     backgrounded?: boolean | undefined;
     radiused?: boolean | undefined;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     padded?: boolean | undefined;
     elevate?: boolean | undefined;
@@ -18,13 +18,13 @@ export declare const ThemeableStack: import("@tamagui/core").TamaguiComponent<Om
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "backgrounded" | "radiused" | "padded" | "chromeless"> & {
+}, "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered" | "transparent" | "backgrounded" | "radiused" | "padded" | "chromeless"> & {
     fontFamily?: unknown;
     backgrounded?: boolean | undefined;
     radiused?: boolean | undefined;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     padded?: boolean | undefined;
     elevate?: boolean | undefined;
@@ -34,13 +34,13 @@ export declare const ThemeableStack: import("@tamagui/core").TamaguiComponent<Om
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "backgrounded" | "radiused" | "padded" | "chromeless"> & {
+}, "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered" | "transparent" | "backgrounded" | "radiused" | "padded" | "chromeless"> & {
     fontFamily?: unknown;
     backgrounded?: boolean | undefined;
     radiused?: boolean | undefined;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     padded?: boolean | undefined;
     elevate?: boolean | undefined;
@@ -54,9 +54,9 @@ export declare const ThemeableStack: import("@tamagui/core").TamaguiComponent<Om
     fontFamily?: unknown;
     backgrounded?: boolean | undefined;
     radiused?: boolean | undefined;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
     circular?: boolean | undefined;
     padded?: boolean | undefined;
     elevate?: boolean | undefined;

package/types/variants.d.ts

@@ -239,7 +239,7 @@ export declare const circular: {
         paddingHorizontal: number;
     };
 };
-export declare const hoverable: {
+export declare const hoverTheme: {
     true: {
         hoverStyle: {
             backgroundColor: string;
@@ -248,7 +248,7 @@ export declare const hoverable: {
     };
     false: {};
 };
-export declare const pressable: {
+export declare const pressTheme: {
     true: {
         pressStyle: {
             backgroundColor: string;
@@ -257,7 +257,7 @@ export declare const pressable: {
     };
     false: {};
 };
-export declare const focusable: {
+export declare const focusTheme: {
     true: {
         focusStyle: {
             backgroundColor: string;

package/types/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../src/variants.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAA;AAED,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,MAAM;;SAwB7C,CAAA;AAED,eAAO,MAAM,MAAM;;;;CAOlB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;CAOpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAepB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../src/variants.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAA;AAED,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,MAAM;;SAwB7C,CAAA;AAED,eAAO,MAAM,MAAM;;;;CAOlB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;CAOpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAepB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAA"}