@tamagui/stacks 1.0.1-beta.68 → 1.0.1-beta.71

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/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

@@ -35,10 +35,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);
@@ -52,15 +52,15 @@ const bordered = /* @__PURE__ */ __name((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"
     }
@@ -98,57 +98,42 @@ const circular = {
     };
   }
 };
-const hoverable = {
+const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: "$backgroundHover",
       borderColor: "$borderColorHover"
     }
   },
-  false: {
-    hoverStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
-const pressable = {
+const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: "$backgroundPress",
       borderColor: "$borderColorPress"
     }
   },
-  false: {
-    pressStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
-const focusable = {
+const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: "$backgroundFocus",
       borderColor: "$borderColorFocus"
     }
   },
-  false: {
-    focusStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   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    hoverStyle: {\n      backgroundColor: '$background',\n      borderColor: '$borderColor',\n    },\n  },\n}\n\nexport const pressable = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {\n    pressStyle: {\n      backgroundColor: '$background',\n      borderColor: '$borderColor',\n    },\n  },\n}\n\nexport const focusable = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {\n    focusStyle: {\n      backgroundColor: '$background',\n      borderColor: '$borderColor',\n    },\n  },\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;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;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;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;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;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
+  "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,wBAAC,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,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,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/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

@@ -10,17 +10,17 @@ const bordered = /* @__PURE__ */ __name((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"
       }
@@ -59,56 +59,41 @@ const circular = {
     };
   }
 };
-const hoverable = {
+const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: "$backgroundHover",
       borderColor: "$borderColorHover"
     }
   },
-  false: {
-    hoverStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
-const pressable = {
+const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: "$backgroundPress",
       borderColor: "$borderColorPress"
     }
   },
-  false: {
-    pressStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
-const focusable = {
+const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: "$backgroundFocus",
       borderColor: "$borderColorFocus"
     }
   },
-  false: {
-    focusStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
 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    hoverStyle: {\n      backgroundColor: '$background',\n      borderColor: '$borderColor',\n    },\n  },\n}\n\nexport const pressable = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {\n    pressStyle: {\n      backgroundColor: '$background',\n      borderColor: '$borderColor',\n    },\n  },\n}\n\nexport const focusable = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {\n    focusStyle: {\n      backgroundColor: '$background',\n      borderColor: '$borderColor',\n    },\n  },\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;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;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;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;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;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
+  "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,wBAAC,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,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,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/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

@@ -10,17 +10,17 @@ const bordered = /* @__PURE__ */ __name((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"
       }
@@ -59,55 +59,40 @@ const circular = {
     };
   }
 };
-const hoverable = {
+const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: "$backgroundHover",
       borderColor: "$borderColorHover"
     }
   },
-  false: {
-    hoverStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
-const pressable = {
+const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: "$backgroundPress",
       borderColor: "$borderColorPress"
     }
   },
-  false: {
-    pressStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
-const focusable = {
+const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: "$backgroundFocus",
       borderColor: "$borderColorFocus"
     }
   },
-  false: {
-    focusStyle: {
-      backgroundColor: "$background",
-      borderColor: "$borderColor"
-    }
-  }
+  false: {}
 };
 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.68",
-  "sideEffects": false,
+  "version": "1.0.1-beta.71",
+  "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.68"
+    "@tamagui/core": "^1.0.1-beta.71"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.68",
+    "@tamagui/build": "^1.0.1-beta.71",
     "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,47 +67,32 @@ export const circular = {
   },
 }
 
-export const hoverable = {
+export const hoverTheme = {
   true: {
     hoverStyle: {
       backgroundColor: '$backgroundHover',
       borderColor: '$borderColorHover',
     },
   },
-  false: {
-    hoverStyle: {
-      backgroundColor: '$background',
-      borderColor: '$borderColor',
-    },
-  },
+  false: {},
 }
 
-export const pressable = {
+export const pressTheme = {
   true: {
     pressStyle: {
       backgroundColor: '$backgroundPress',
       borderColor: '$borderColorPress',
     },
   },
-  false: {
-    pressStyle: {
-      backgroundColor: '$background',
-      borderColor: '$borderColor',
-    },
-  },
+  false: {},
 }
 
-export const focusable = {
+export const focusTheme = {
   true: {
     focusStyle: {
       backgroundColor: '$backgroundFocus',
       borderColor: '$borderColorFocus',
     },
   },
-  false: {
-    focusStyle: {
-      backgroundColor: '$background',
-      borderColor: '$borderColor',
-    },
-  },
+  false: {},
 }

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

@@ -94,6 +94,7 @@ export declare const elevate: {
         tag?: string | import("@tamagui/core").Variable<any> | undefined;
         theme?: import("@tamagui/core").Variable<any> | import("@tamagui/core").ThemeName | null | undefined;
         componentName?: string | import("@tamagui/core").Variable<any> | undefined;
+        forceStyle?: import("@tamagui/core").Variable<any> | "hover" | "press" | "focus" | undefined;
         onHoverIn?: import("@tamagui/core").Variable<any> | ((e: MouseEvent) => any) | undefined;
         onHoverOut?: import("@tamagui/core").Variable<any> | ((e: MouseEvent) => any) | undefined;
         onPress?: ((e: import("react-native").GestureResponderEvent) => any) | import("@tamagui/core").Variable<any> | undefined;
@@ -238,46 +239,31 @@ export declare const circular: {
         paddingHorizontal: number;
     };
 };
-export declare const hoverable: {
+export declare const hoverTheme: {
     true: {
         hoverStyle: {
             backgroundColor: string;
             borderColor: string;
         };
     };
-    false: {
-        hoverStyle: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
+    false: {};
 };
-export declare const pressable: {
+export declare const pressTheme: {
     true: {
         pressStyle: {
             backgroundColor: string;
             borderColor: string;
         };
     };
-    false: {
-        pressStyle: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
+    false: {};
 };
-export declare const focusable: {
+export declare const focusTheme: {
     true: {
         focusStyle: {
             backgroundColor: string;
             borderColor: string;
         };
     };
-    false: {
-        focusStyle: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-    };
+    false: {};
 };
 //# sourceMappingURL=variants.d.ts.map

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"}