@tamagui/stacks 1.0.1-beta.31 → 1.0.1-beta.34

package/dist/cjs/ThemeableSizableStack.js

@@ -34,6 +34,7 @@ const ThemeableSizableStack = (0, import_core.styled)(import_Stacks.YStack, {
     pressable: import_variants.pressable,
     focusable: import_variants.focusable,
     circular: import_variants.circular,
+    pad: import_variants.pad,
     elevate: import_variants.elevate,
     bordered: import_variants.bordered,
     size: {

package/dist/cjs/ThemeableSizableStack.js.map

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

package/dist/cjs/ThemeableStack.js

@@ -1 +1,65 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ThemeableStack_exports = {};
+__export(ThemeableStack_exports, {
+  ThemeableStack: () => ThemeableStack
+});
+module.exports = __toCommonJS(ThemeableStack_exports);
+var import_core = require("@tamagui/core");
+var import_Stacks = require("./Stacks");
+var import_variants = require("./variants");
+const ThemeableStack = (0, import_core.styled)(import_Stacks.YStack, {
+  name: "SizableStack",
+  backgroundColor: "$background",
+  flexDirection: "row",
+  flexShrink: 1,
+  variants: {
+    fontFamily: () => ({}),
+    hoverable: import_variants.hoverable,
+    pressable: import_variants.pressable,
+    focusable: import_variants.focusable,
+    circular: import_variants.circular,
+    pad: import_variants.pad,
+    elevate: import_variants.elevate,
+    bordered: import_variants.bordered,
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        shadowColor: "transparent"
+      }
+    }
+  }
+});
+const Test = (0, import_core.styled)(ThemeableStack, {
+  variants: {
+    something: {
+      true: {}
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeableStack
+});
 //# sourceMappingURL=ThemeableStack.js.map

package/dist/cjs/ThemeableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
+  "sources": ["../../src/ThemeableStack.tsx"],
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pad, pressable } from './variants'\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverable,\n    pressable,\n    focusable,\n    circular,\n    pad,\n    elevate,\n    bordered,\n\n    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\nconst Test = styled(ThemeableStack, {\n  variants: {\n    something: {\n      true: {},\n    },\n  },\n})\n\ntype T = GetProps<typeof Test>\ntype x = T['chromeless']\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAEjC,oBAAuB;AACvB,sBAAkF;AAE3E,MAAM,iBAAiB,wBAAO,sBAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,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;AAID,MAAM,OAAO,wBAAO,gBAAgB;AAAA,EAClC,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/cjs/index.js

@@ -23,7 +23,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./Stacks"), module.exports);
 __reExport(src_exports, require("./SizableStack"), module.exports);
-__reExport(src_exports, require("./ThemeableSizableStack"), module.exports);
+__reExport(src_exports, require("./ThemeableStack"), module.exports);
 var import_variants = require("./variants");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/index.js.map

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

package/dist/cjs/variants.js

@@ -38,6 +38,7 @@ __export(variants_exports, {
   focusable: () => focusable,
   getCircleSize: () => getCircleSize,
   hoverable: () => hoverable,
+  pad: () => pad,
   pressable: () => pressable
 });
 module.exports = __toCommonJS(variants_exports);
@@ -72,6 +73,14 @@ const bordered = /* @__PURE__ */ __name((val, { props }) => {
     }
   });
 }, "bordered");
+const pad = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      padding: tokens.size[props.size] || tokens.size["$4"]
+    };
+  }
+};
 const circular = {
   true: (_, extras) => {
     const { props } = extras;
@@ -139,6 +148,7 @@ const focusable = {
   focusable,
   getCircleSize,
   hoverable,
+  pad,
   pressable
 });
 //# sourceMappingURL=variants.js.map

package/dist/cjs/variants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variants.tsx"],
-  "sourcesContent": ["import { ScaleVariantExtras, SizeTokens, buttonScaling, getSizeScaledToFont } from '@tamagui/core'\n\nimport { getElevation } from './Stacks'\n\nexport function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras) {\n  const sizeVal = size ?? '$4'\n  const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras)\n  return scale.minHeight\n}\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 circular = {\n  true: (_, extras) => {\n    const { props } = extras\n    const size = getCircleSize(props.size, extras)\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,kBAAmF;AAEnF,oBAA6B;AAEtB,uBAAuB,MAAkB,QAA4B;AAC1E,QAAM,UAAU,QAAQ;AACxB,QAAM,QAAQ,qCAAoB,SAAS,2BAAe,MAAM;AAChE,SAAO,MAAM;AACf;AAJgB;AAMT,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,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,UAAU;AAClB,UAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAC7C,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 { ScaleVariantExtras, SizeTokens, buttonScaling, getSizeScaledToFont } from '@tamagui/core'\n\nimport { getElevation } from './Stacks'\n\nexport function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras) {\n  const sizeVal = size ?? '$4'\n  const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras)\n  return scale.minHeight\n}\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 pad = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.size[props.size] || tokens.size['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, extras) => {\n    const { props } = extras\n    const size = getCircleSize(props.size, extras)\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,kBAAmF;AAEnF,oBAA6B;AAEtB,uBAAuB,MAAkB,QAA4B;AAC1E,QAAM,UAAU,QAAQ;AACxB,QAAM,QAAQ,qCAAoB,SAAS,2BAAe,MAAM;AAChE,SAAO,MAAM;AACf;AAJgB;AAMT,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,MAAM;AAAA,EACjB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK;AAAA,IAClD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,UAAU;AAClB,UAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAC7C,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;",
   "names": []
 }

package/dist/esm/ThemeableSizableStack.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, focusable, hoverable, pad, pressable } from "./variants";
 const ThemeableSizableStack = styled(YStack, {
   name: "SizableStack",
   backgroundColor: "$background",
@@ -12,6 +12,7 @@ const ThemeableSizableStack = styled(YStack, {
     pressable,
     focusable,
     circular,
+    pad,
     elevate,
     bordered,
     size: {

package/dist/esm/ThemeableSizableStack.js.map

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

package/dist/esm/ThemeableStack.js

@@ -1 +1,42 @@
+import { styled } from "@tamagui/core";
+import { YStack } from "./Stacks";
+import { bordered, circular, elevate, focusable, hoverable, pad, pressable } from "./variants";
+const ThemeableStack = styled(YStack, {
+  name: "SizableStack",
+  backgroundColor: "$background",
+  flexDirection: "row",
+  flexShrink: 1,
+  variants: {
+    fontFamily: () => ({}),
+    hoverable,
+    pressable,
+    focusable,
+    circular,
+    pad,
+    elevate,
+    bordered,
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        shadowColor: "transparent"
+      }
+    }
+  }
+});
+const Test = styled(ThemeableStack, {
+  variants: {
+    something: {
+      true: {}
+    }
+  }
+});
+export {
+  ThemeableStack
+};
 //# sourceMappingURL=ThemeableStack.js.map

package/dist/esm/ThemeableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
+  "sources": ["../../src/ThemeableStack.tsx"],
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pad, pressable } from './variants'\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverable,\n    pressable,\n    focusable,\n    circular,\n    pad,\n    elevate,\n    bordered,\n\n    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\nconst Test = styled(ThemeableStack, {\n  variants: {\n    something: {\n      true: {},\n    },\n  },\n})\n\ntype T = GetProps<typeof Test>\ntype x = T['chromeless']\n"],
+  "mappings": "AAAA;AAEA;AACA;AAEO,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,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;AAID,MAAM,OAAO,OAAO,gBAAgB;AAAA,EAClC,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export * from "./Stacks";
 export * from "./SizableStack";
-export * from "./ThemeableSizableStack";
+export * from "./ThemeableStack";
 import { getCircleSize } from "./variants";
 export {
   getCircleSize

package/dist/esm/index.js.map

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

package/dist/esm/variants.js

@@ -34,6 +34,14 @@ const bordered = /* @__PURE__ */ __name((val, { props }) => {
     }
   };
 }, "bordered");
+const pad = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      padding: tokens.size[props.size] || tokens.size["$4"]
+    };
+  }
+};
 const circular = {
   true: (_, extras) => {
     const { props } = extras;
@@ -100,6 +108,7 @@ export {
   focusable,
   getCircleSize,
   hoverable,
+  pad,
   pressable
 };
 //# sourceMappingURL=variants.js.map

package/dist/esm/variants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variants.tsx"],
-  "sourcesContent": ["import { ScaleVariantExtras, SizeTokens, buttonScaling, getSizeScaledToFont } from '@tamagui/core'\n\nimport { getElevation } from './Stacks'\n\nexport function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras) {\n  const sizeVal = size ?? '$4'\n  const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras)\n  return scale.minHeight\n}\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 circular = {\n  true: (_, extras) => {\n    const { props } = extras\n    const size = getCircleSize(props.size, extras)\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;AAEA;AAEO,uBAAuB,MAAkB,QAA4B;AAC1E,QAAM,UAAU,sBAAQ;AACxB,QAAM,QAAQ,oBAAoB,SAAS,eAAe,MAAM;AAChE,SAAO,MAAM;AACf;AAJgB;AAMT,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,OAET,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,OAEI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,OAEI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,GAxBwB;AA0BjB,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,UAAU;AAClB,UAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAC7C,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 { ScaleVariantExtras, SizeTokens, buttonScaling, getSizeScaledToFont } from '@tamagui/core'\n\nimport { getElevation } from './Stacks'\n\nexport function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras) {\n  const sizeVal = size ?? '$4'\n  const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras)\n  return scale.minHeight\n}\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 pad = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.size[props.size] || tokens.size['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, extras) => {\n    const { props } = extras\n    const size = getCircleSize(props.size, extras)\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;AAEA;AAEO,uBAAuB,MAAkB,QAA4B;AAC1E,QAAM,UAAU,sBAAQ;AACxB,QAAM,QAAQ,oBAAoB,SAAS,eAAe,MAAM;AAChE,SAAO,MAAM;AACf;AAJgB;AAMT,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,OAET,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,OAEI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,OAEI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,GAxBwB;AA0BjB,MAAM,MAAM;AAAA,EACjB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK;AAAA,IAClD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,UAAU;AAClB,UAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAC7C,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;",
   "names": []
 }

package/dist/jsx/ThemeableSizableStack.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, focusable, hoverable, pad, pressable } from "./variants";
 const ThemeableSizableStack = styled(YStack, {
   name: "SizableStack",
   backgroundColor: "$background",
@@ -12,6 +12,7 @@ const ThemeableSizableStack = styled(YStack, {
     pressable,
     focusable,
     circular,
+    pad,
     elevate,
     bordered,
     size: {

package/dist/jsx/ThemeableStack.js

@@ -0,0 +1,41 @@
+import { styled } from "@tamagui/core";
+import { YStack } from "./Stacks";
+import { bordered, circular, elevate, focusable, hoverable, pad, pressable } from "./variants";
+const ThemeableStack = styled(YStack, {
+  name: "SizableStack",
+  backgroundColor: "$background",
+  flexDirection: "row",
+  flexShrink: 1,
+  variants: {
+    fontFamily: () => ({}),
+    hoverable,
+    pressable,
+    focusable,
+    circular,
+    pad,
+    elevate,
+    bordered,
+    transparent: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    chromeless: {
+      true: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        shadowColor: "transparent"
+      }
+    }
+  }
+});
+const Test = styled(ThemeableStack, {
+  variants: {
+    something: {
+      true: {}
+    }
+  }
+});
+export {
+  ThemeableStack
+};

package/dist/jsx/index.js

@@ -1,6 +1,6 @@
 export * from "./Stacks";
 export * from "./SizableStack";
-export * from "./ThemeableSizableStack";
+export * from "./ThemeableStack";
 import { getCircleSize } from "./variants";
 export {
   getCircleSize

package/dist/jsx/variants.js

@@ -34,6 +34,14 @@ const bordered = /* @__PURE__ */ __name((val, { props }) => {
     }
   };
 }, "bordered");
+const pad = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      padding: tokens.size[props.size] || tokens.size["$4"]
+    };
+  }
+};
 const circular = {
   true: (_, extras) => {
     const { props } = extras;
@@ -100,5 +108,6 @@ export {
   focusable,
   getCircleSize,
   hoverable,
+  pad,
   pressable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/stacks",
-  "version": "1.0.1-beta.31",
+  "version": "1.0.1-beta.34",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -16,14 +16,14 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.31"
+    "@tamagui/core": "^1.0.1-beta.34"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.31",
+    "@tamagui/build": "^1.0.1-beta.34",
     "react": "*",
     "react-dom": "*"
   },

package/types/ThemeableSizableStack.d.ts

@@ -2,12 +2,13 @@ import { GetProps } from '@tamagui/core';
 export declare const ThemeableSizableStack: 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<{
     fullscreen?: boolean | undefined;
     elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
+}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "pad" | "chromeless"> & {
     fontFamily?: unknown;
     hoverable?: boolean | undefined;
     pressable?: boolean | undefined;
     focusable?: boolean | undefined;
     circular?: boolean | undefined;
+    pad?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     size?: import("@tamagui/core").SizeTokens | undefined;
@@ -17,12 +18,13 @@ export declare const ThemeableSizableStack: import("@tamagui/core").TamaguiCompo
 } & 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<{
     fullscreen?: boolean | undefined;
     elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
+}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "pad" | "chromeless"> & {
     fontFamily?: unknown;
     hoverable?: boolean | undefined;
     pressable?: boolean | undefined;
     focusable?: boolean | undefined;
     circular?: boolean | undefined;
+    pad?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     size?: import("@tamagui/core").SizeTokens | undefined;
@@ -32,12 +34,13 @@ export declare const ThemeableSizableStack: import("@tamagui/core").TamaguiCompo
 }>> & 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<{
     fullscreen?: boolean | undefined;
     elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
+}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "pad" | "chromeless"> & {
     fontFamily?: unknown;
     hoverable?: boolean | undefined;
     pressable?: boolean | undefined;
     focusable?: boolean | undefined;
     circular?: boolean | undefined;
+    pad?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     size?: import("@tamagui/core").SizeTokens | undefined;
@@ -53,6 +56,7 @@ export declare const ThemeableSizableStack: import("@tamagui/core").TamaguiCompo
     pressable?: boolean | undefined;
     focusable?: boolean | undefined;
     circular?: boolean | undefined;
+    pad?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     size?: import("@tamagui/core").SizeTokens | undefined;

package/types/ThemeableSizableStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeableSizableStack.d.ts","sourceRoot":"","sources":["../src/ThemeableSizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAK/D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ChC,CAAA;AAEF,oBAAY,0BAA0B,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAA"}
+{"version":3,"file":"ThemeableSizableStack.d.ts","sourceRoot":"","sources":["../src/ThemeableSizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAK/D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ChC,CAAA;AAEF,oBAAY,0BAA0B,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAA"}

package/types/ThemeableStack.d.ts

@@ -1 +1,60 @@
+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<{
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+}, "focusable" | "fontFamily" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "pad" | "chromeless"> & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+} & 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<{
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+}, "focusable" | "fontFamily" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "pad" | "chromeless"> & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}>> & 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<{
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+}, "focusable" | "fontFamily" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "pad" | "chromeless"> & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}>>, any, import("@tamagui/core").StackPropsBase, {
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}>;
+export declare type ThemeableStackProps = GetProps<typeof ThemeableStack>;
 //# sourceMappingURL=ThemeableStack.d.ts.map

package/types/ThemeableStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeableStack.d.ts","sourceRoot":"","sources":["../src/ThemeableStack.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"ThemeableStack.d.ts","sourceRoot":"","sources":["../src/ThemeableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAA;AAKhD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCzB,CAAA;AAEF,oBAAY,mBAAmB,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA"}

package/types/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Stacks';
 export * from './SizableStack';
-export * from './ThemeableSizableStack';
+export * from './ThemeableStack';
 export { getCircleSize } from './variants';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/types/variants.d.ts

@@ -94,6 +94,7 @@ export declare const elevate: {
         id?: string | import("@tamagui/core").Variable | undefined;
         tag?: string | import("@tamagui/core").Variable | undefined;
         theme?: import("@tamagui/core").Variable | import("@tamagui/core").ThemeName | null | undefined;
+        componentName?: string | import("@tamagui/core").Variable | undefined;
         onHoverIn?: import("@tamagui/core").Variable | ((e: MouseEvent) => any) | undefined;
         onHoverOut?: import("@tamagui/core").Variable | ((e: MouseEvent) => any) | undefined;
         onPress?: ((e: import("react-native").GestureResponderEvent) => any) | import("@tamagui/core").Variable | undefined;
@@ -211,6 +212,11 @@ export declare const elevate: {
 export declare const bordered: (val: boolean | number, { props }: {
     props: any;
 }) => any;
+export declare const pad: {
+    true: (_: any, extras: any) => {
+        padding: any;
+    };
+};
 export declare const circular: {
     true: (_: any, extras: any) => {
         width: number;

package/types/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../src/variants.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAsC,MAAM,eAAe,CAAA;AAIlG,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,kBAAkB,UAIzE;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAA;AAED,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,MAAM;;SAwB7C,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAgBpB,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":";AAAA,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAsC,MAAM,eAAe,CAAA;AAIlG,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,kBAAkB,UAIzE;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAA;AAED,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,MAAM;;SAwB7C,CAAA;AAED,eAAO,MAAM,GAAG;;;;CAOf,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAgBpB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA"}