@tamagui/stacks 1.0.1-beta.53 → 1.0.1-beta.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/index.js +0 -12
  2. package/dist/cjs/index.js.map +2 -2
  3. package/dist/cjs/variants.js +2 -12
  4. package/dist/cjs/variants.js.map +2 -2
  5. package/dist/esm/index.js +0 -4
  6. package/dist/esm/index.js.map +2 -2
  7. package/dist/esm/variants.js +2 -11
  8. package/dist/esm/variants.js.map +2 -2
  9. package/dist/jsx/index.js +0 -4
  10. package/dist/jsx/variants.js +2 -11
  11. package/package.json +3 -3
  12. package/types/index.d.ts +0 -1
  13. package/types/index.d.ts.map +1 -1
  14. package/types/variants.d.ts +17 -16
  15. package/types/variants.d.ts.map +1 -1
package/dist/cjs/index.js CHANGED
@@ -2,10 +2,6 @@ var __defProp = Object.defineProperty;
2
2
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all) => {
6
- for (var name in all)
7
- __defProp(target, name, { get: all[name], enumerable: true });
8
- };
9
5
  var __copyProps = (to, from, except, desc) => {
10
6
  if (from && typeof from === "object" || typeof from === "function") {
11
7
  for (let key of __getOwnPropNames(from))
@@ -17,16 +13,8 @@ var __copyProps = (to, from, except, desc) => {
17
13
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
18
14
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
15
  var src_exports = {};
20
- __export(src_exports, {
21
- getCircleSize: () => import_variants.getCircleSize
22
- });
23
16
  module.exports = __toCommonJS(src_exports);
24
17
  __reExport(src_exports, require("./Stacks"), module.exports);
25
18
  __reExport(src_exports, require("./SizableStack"), module.exports);
26
19
  __reExport(src_exports, require("./ThemeableStack"), module.exports);
27
- var import_variants = require("./variants");
28
- // Annotate the CommonJS export names for ESM import in node:
29
- 0 && (module.exports = {
30
- getCircleSize
31
- });
32
20
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts"],
4
- "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\nexport { getCircleSize } from './variants'\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,6BAFd;AAGA,sBAA8B;",
4
+ "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\n"],
5
+ "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,6BAFd;",
6
6
  "names": []
7
7
  }
package/dist/cjs/variants.js CHANGED
@@ -36,21 +36,13 @@ __export(variants_exports, {
36
36
  circular: () => circular,
37
37
  elevate: () => elevate,
38
38
  focusable: () => focusable,
39
- getCircleSize: () => getCircleSize,
40
39
  hoverable: () => hoverable,
41
40
  padded: () => padded,
42
41
  pressable: () => pressable,
43
42
  radiused: () => radiused
44
43
  });
45
44
  module.exports = __toCommonJS(variants_exports);
46
- var import_core = require("@tamagui/core");
47
45
  var import_Stacks = require("./Stacks");
48
- function getCircleSize(size, extras) {
49
- const sizeVal = size ?? "$4";
50
- const scale = (0, import_core.getSizeScaledToFont)(sizeVal, import_core.buttonScaling, extras);
51
- return scale.minHeight;
52
- }
53
- __name(getCircleSize, "getCircleSize");
54
46
  const elevate = {
55
47
  true: (_, extras) => {
56
48
  return (0, import_Stacks.getElevation)(extras.props["size"], extras);
@@ -91,9 +83,8 @@ const radiused = {
91
83
  }
92
84
  };
93
85
  const circular = {
94
- true: (_, extras) => {
95
- const { props } = extras;
96
- const size = getCircleSize(props.size, extras);
86
+ true: (_, { props, tokens }) => {
87
+ const size = tokens.size[props.size];
97
88
  return {
98
89
  width: size,
99
90
  height: size,
@@ -155,7 +146,6 @@ const focusable = {
155
146
  circular,
156
147
  elevate,
157
148
  focusable,
158
- getCircleSize,
159
149
  hoverable,
160
150
  padded,
161
151
  pressable,
package/dist/cjs/variants.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/variants.tsx"],
4
- "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 padded = {\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 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: (_, 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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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,SAAS;AAAA,EACpB,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,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,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;",
4
+ "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.size[props.size] || tokens.size['$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"],
5
+ "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,KAAK,MAAM,SAAS,OAAO,KAAK;AAAA,IAClD;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;",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js CHANGED
@@ -1,8 +1,4 @@
1
1
  export * from "./Stacks";
2
2
  export * from "./SizableStack";
3
3
  export * from "./ThemeableStack";
4
- import { getCircleSize } from "./variants";
5
- export {
6
- getCircleSize
7
- };
8
4
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts"],
4
- "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\nexport { getCircleSize } from './variants'\n"],
5
- "mappings": "AAAA;AACA;AACA;AACA;",
4
+ "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\n"],
5
+ "mappings": "AAAA;AACA;AACA;",
6
6
  "names": []
7
7
  }
package/dist/esm/variants.js CHANGED
@@ -1,13 +1,6 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import { buttonScaling, getSizeScaledToFont } from "@tamagui/core";
4
3
  import { getElevation } from "./Stacks";
5
- function getCircleSize(size, extras) {
6
- const sizeVal = size != null ? size : "$4";
7
- const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras);
8
- return scale.minHeight;
9
- }
10
- __name(getCircleSize, "getCircleSize");
11
4
  const elevate = {
12
5
  true: (_, extras) => {
13
6
  return getElevation(extras.props["size"], extras);
@@ -51,9 +44,8 @@ const radiused = {
51
44
  }
52
45
  };
53
46
  const circular = {
54
- true: (_, extras) => {
55
- const { props } = extras;
56
- const size = getCircleSize(props.size, extras);
47
+ true: (_, { props, tokens }) => {
48
+ const size = tokens.size[props.size];
57
49
  return {
58
50
  width: size,
59
51
  height: size,
@@ -114,7 +106,6 @@ export {
114
106
  circular,
115
107
  elevate,
116
108
  focusable,
117
- getCircleSize,
118
109
  hoverable,
119
110
  padded,
120
111
  pressable,
package/dist/esm/variants.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/variants.tsx"],
4
- "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 padded = {\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 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: (_, 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"],
5
- "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,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,KAAK,MAAM,SAAS,OAAO,KAAK;AAAA,IAClD;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,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;",
4
+ "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.size[props.size] || tokens.size['$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"],
5
+ "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,KAAK,MAAM,SAAS,OAAO,KAAK;AAAA,IAClD;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;",
6
6
  "names": []
7
7
  }
package/dist/jsx/index.js CHANGED
@@ -1,7 +1,3 @@
1
1
  export * from "./Stacks";
2
2
  export * from "./SizableStack";
3
3
  export * from "./ThemeableStack";
4
- import { getCircleSize } from "./variants";
5
- export {
6
- getCircleSize
7
- };
package/dist/jsx/variants.js CHANGED
@@ -1,13 +1,6 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import { buttonScaling, getSizeScaledToFont } from "@tamagui/core";
4
3
  import { getElevation } from "./Stacks";
5
- function getCircleSize(size, extras) {
6
- const sizeVal = size != null ? size : "$4";
7
- const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras);
8
- return scale.minHeight;
9
- }
10
- __name(getCircleSize, "getCircleSize");
11
4
  const elevate = {
12
5
  true: (_, extras) => {
13
6
  return getElevation(extras.props["size"], extras);
@@ -51,9 +44,8 @@ const radiused = {
51
44
  }
52
45
  };
53
46
  const circular = {
54
- true: (_, extras) => {
55
- const { props } = extras;
56
- const size = getCircleSize(props.size, extras);
47
+ true: (_, { props, tokens }) => {
48
+ const size = tokens.size[props.size];
57
49
  return {
58
50
  width: size,
59
51
  height: size,
@@ -114,7 +106,6 @@ export {
114
106
  circular,
115
107
  elevate,
116
108
  focusable,
117
- getCircleSize,
118
109
  hoverable,
119
110
  padded,
120
111
  pressable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/stacks",
3
- "version": "1.0.1-beta.53",
3
+ "version": "1.0.1-beta.56",
4
4
  "sideEffects": false,
5
5
  "source": "src/index.ts",
6
6
  "types": "./types/index.d.ts",
@@ -16,14 +16,14 @@
16
16
  "watch": "tamagui-build --watch"
17
17
  },
18
18
  "dependencies": {
19
- "@tamagui/core": "^1.0.1-beta.53"
19
+ "@tamagui/core": "^1.0.1-beta.56"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "react": "*",
23
23
  "react-dom": "*"
24
24
  },
25
25
  "devDependencies": {
26
- "@tamagui/build": "^1.0.1-beta.53",
26
+ "@tamagui/build": "^1.0.1-beta.56",
27
27
  "react": "*",
28
28
  "react-dom": "*"
29
29
  },
package/types/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export * from './Stacks';
2
2
  export * from './SizableStack';
3
3
  export * from './ThemeableStack';
4
- export { getCircleSize } from './variants';
5
4
  //# sourceMappingURL=index.d.ts.map
package/types/index.d.ts.map CHANGED
@@ -1 +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,kBAAkB,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
1
+ {"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"}
package/types/variants.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { ScaleVariantExtras, SizeTokens } from '@tamagui/core';
3
- export declare function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras): number;
4
2
  export declare const elevate: {
5
3
  true: (_: any, extras: any) => {
6
4
  [x: `$${string}`]: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core").PseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>>) | import("@tamagui/core").Variable<any> | undefined;
@@ -139,7 +137,7 @@ export declare const elevate: {
139
137
  flexGrow?: number | import("@tamagui/core").Variable<any> | undefined;
140
138
  flexShrink?: number | import("@tamagui/core").Variable<any> | undefined;
141
139
  flexWrap?: import("@tamagui/core").Variable<any> | "wrap" | "nowrap" | "wrap-reverse" | undefined;
142
- height?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
140
+ height?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
143
141
  justifyContent?: import("@tamagui/core").Variable<any> | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
144
142
  left?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
145
143
  margin?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
@@ -151,10 +149,10 @@ export declare const elevate: {
151
149
  marginStart?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
152
150
  marginTop?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
153
151
  marginVertical?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
154
- maxHeight?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
155
- maxWidth?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
156
- minHeight?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
157
- minWidth?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
152
+ maxHeight?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
153
+ maxWidth?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
154
+ minHeight?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
155
+ minWidth?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
158
156
  overflow?: import("@tamagui/core").Variable<any> | "visible" | "hidden" | "scroll" | undefined;
159
157
  padding?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
160
158
  paddingBottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
@@ -169,7 +167,7 @@ export declare const elevate: {
169
167
  right?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
170
168
  start?: string | number | import("@tamagui/core").Variable<any> | undefined;
171
169
  top?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
172
- width?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
170
+ width?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
173
171
  zIndex?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | import("@tamagui/core").ZIndexTokens | undefined;
174
172
  direction?: "inherit" | import("@tamagui/core").Variable<any> | "ltr" | "rtl" | undefined;
175
173
  shadowColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
@@ -181,7 +179,7 @@ export declare const elevate: {
181
179
  height: number;
182
180
  } | undefined;
183
181
  shadowOpacity?: number | import("@tamagui/core").Variable<any> | undefined;
184
- shadowRadius?: SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
182
+ shadowRadius?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").Variable<any> | undefined;
185
183
  transform?: import("@tamagui/core").Variable<any> | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
186
184
  transformMatrix?: number[] | import("@tamagui/core").Variable<any> | undefined;
187
185
  rotation?: number | import("@tamagui/core").Variable<any> | undefined;
@@ -224,13 +222,16 @@ export declare const radiused: {
224
222
  };
225
223
  };
226
224
  export declare const circular: {
227
- true: (_: any, extras: any) => {
228
- width: number;
229
- height: number;
230
- maxWidth: number;
231
- maxHeight: number;
232
- minWidth: number;
233
- minHeight: number;
225
+ true: (_: any, { props, tokens }: {
226
+ props: any;
227
+ tokens: any;
228
+ }) => {
229
+ width: any;
230
+ height: any;
231
+ maxWidth: any;
232
+ maxHeight: any;
233
+ minWidth: any;
234
+ minHeight: any;
234
235
  borderRadius: number;
235
236
  paddingVertical: number;
236
237
  paddingHorizontal: number;
package/types/variants.d.ts.map CHANGED
@@ -1 +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,MAAM;;;;CAOlB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;CAOpB,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"}
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"}