@tamagui/core 1.0.1-beta.28 → 1.0.1-beta.29

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 (113) hide show
  1. package/dist/cjs/ThemeManager.js +18 -8
  2. package/dist/cjs/ThemeManager.js.map +2 -2
  3. package/dist/cjs/constants/platform.js +6 -6
  4. package/dist/cjs/constants/platform.js.map +2 -2
  5. package/dist/cjs/constants/rnw.js.map +2 -2
  6. package/dist/cjs/createComponent.js +23 -20
  7. package/dist/cjs/createComponent.js.map +2 -2
  8. package/dist/cjs/createTamagui.js +10 -2
  9. package/dist/cjs/createTamagui.js.map +2 -2
  10. package/dist/cjs/helpers/createMediaStyle.js +1 -0
  11. package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
  12. package/dist/cjs/helpers/createPropMapper.js +9 -39
  13. package/dist/cjs/helpers/createPropMapper.js.map +2 -2
  14. package/dist/cjs/helpers/generateAtomicStyles.js +453 -0
  15. package/dist/cjs/helpers/generateAtomicStyles.js.map +7 -0
  16. package/dist/cjs/helpers/getSplitStyles.js +67 -65
  17. package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
  18. package/dist/cjs/helpers/getStylesAtomic.js +31 -40
  19. package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
  20. package/dist/cjs/helpers/mergeTransform.js +42 -0
  21. package/dist/cjs/helpers/mergeTransform.js.map +7 -0
  22. package/dist/cjs/helpers/prefixStyles.js +192 -0
  23. package/dist/cjs/helpers/prefixStyles.js.map +7 -0
  24. package/dist/cjs/hooks/useIsTouchDevice.js +1 -1
  25. package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
  26. package/dist/cjs/hooks/useTheme.js +8 -7
  27. package/dist/cjs/hooks/useTheme.js.map +2 -2
  28. package/dist/cjs/types.js.map +1 -1
  29. package/dist/cjs/views/Theme.js.map +2 -2
  30. package/dist/cjs/views/ThemeProvider.js +1 -1
  31. package/dist/cjs/views/ThemeProvider.js.map +2 -2
  32. package/dist/cjs/views/ThemeReset.js +1 -0
  33. package/dist/cjs/views/ThemeReset.js.map +2 -2
  34. package/dist/esm/ThemeManager.js +18 -8
  35. package/dist/esm/ThemeManager.js.map +2 -2
  36. package/dist/esm/constants/platform.js +4 -4
  37. package/dist/esm/constants/platform.js.map +2 -2
  38. package/dist/esm/constants/rnw.js.map +2 -2
  39. package/dist/esm/createComponent.js +24 -20
  40. package/dist/esm/createComponent.js.map +2 -2
  41. package/dist/esm/createTamagui.js +8 -1
  42. package/dist/esm/createTamagui.js.map +2 -2
  43. package/dist/esm/helpers/createMediaStyle.js +1 -0
  44. package/dist/esm/helpers/createMediaStyle.js.map +2 -2
  45. package/dist/esm/helpers/createPropMapper.js +9 -40
  46. package/dist/esm/helpers/createPropMapper.js.map +2 -2
  47. package/dist/esm/helpers/generateAtomicStyles.js +425 -0
  48. package/dist/esm/helpers/generateAtomicStyles.js.map +7 -0
  49. package/dist/esm/helpers/getSplitStyles.js +70 -73
  50. package/dist/esm/helpers/getSplitStyles.js.map +2 -2
  51. package/dist/esm/helpers/getStylesAtomic.js +26 -39
  52. package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
  53. package/dist/esm/helpers/mergeTransform.js +19 -0
  54. package/dist/esm/helpers/mergeTransform.js.map +7 -0
  55. package/dist/esm/helpers/prefixStyles.js +166 -0
  56. package/dist/esm/helpers/prefixStyles.js.map +7 -0
  57. package/dist/esm/hooks/useIsTouchDevice.js +2 -2
  58. package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
  59. package/dist/esm/hooks/useTheme.js +8 -7
  60. package/dist/esm/hooks/useTheme.js.map +2 -2
  61. package/dist/esm/views/Theme.js.map +2 -2
  62. package/dist/esm/views/ThemeProvider.js +1 -1
  63. package/dist/esm/views/ThemeProvider.js.map +2 -2
  64. package/dist/esm/views/ThemeReset.js +1 -0
  65. package/dist/esm/views/ThemeReset.js.map +2 -2
  66. package/dist/jsx/ThemeManager.js +18 -8
  67. package/dist/jsx/constants/platform.js +4 -4
  68. package/dist/jsx/createComponent.js +24 -20
  69. package/dist/jsx/createTamagui.js +8 -1
  70. package/dist/jsx/helpers/createMediaStyle.js +1 -0
  71. package/dist/jsx/helpers/createPropMapper.js +9 -40
  72. package/dist/jsx/helpers/generateAtomicStyles.js +424 -0
  73. package/dist/jsx/helpers/getSplitStyles.js +70 -73
  74. package/dist/jsx/helpers/getStylesAtomic.js +26 -39
  75. package/dist/jsx/helpers/mergeTransform.js +18 -0
  76. package/dist/jsx/helpers/prefixStyles.js +165 -0
  77. package/dist/jsx/hooks/useIsTouchDevice.js +2 -2
  78. package/dist/jsx/hooks/useTheme.js +8 -7
  79. package/dist/jsx/views/ThemeProvider.js +1 -1
  80. package/dist/jsx/views/ThemeReset.js +1 -1
  81. package/package.json +8 -5
  82. package/reset.css +2 -1
  83. package/types/Tamagui.d.ts +1 -1
  84. package/types/Tamagui.d.ts.map +1 -1
  85. package/types/ThemeManager.d.ts +9 -6
  86. package/types/ThemeManager.d.ts.map +1 -1
  87. package/types/constants/platform.d.ts +2 -2
  88. package/types/constants/platform.d.ts.map +1 -1
  89. package/types/constants/rnw.d.ts +1 -1
  90. package/types/constants/rnw.d.ts.map +1 -1
  91. package/types/createComponent.d.ts.map +1 -1
  92. package/types/createTamagui.d.ts +1 -0
  93. package/types/createTamagui.d.ts.map +1 -1
  94. package/types/helpers/createMediaStyle.d.ts.map +1 -1
  95. package/types/helpers/createPropMapper.d.ts +2 -2
  96. package/types/helpers/createPropMapper.d.ts.map +1 -1
  97. package/types/helpers/generateAtomicStyles.d.ts +22 -0
  98. package/types/helpers/generateAtomicStyles.d.ts.map +1 -0
  99. package/types/helpers/getSplitStyles.d.ts.map +1 -1
  100. package/types/helpers/getStylesAtomic.d.ts +10 -10
  101. package/types/helpers/getStylesAtomic.d.ts.map +1 -1
  102. package/types/helpers/mergeTransform.d.ts +7 -0
  103. package/types/helpers/mergeTransform.d.ts.map +1 -0
  104. package/types/helpers/prefixStyles.d.ts +5 -0
  105. package/types/helpers/prefixStyles.d.ts.map +1 -0
  106. package/types/hooks/useTheme.d.ts +13 -4
  107. package/types/hooks/useTheme.d.ts.map +1 -1
  108. package/types/types.d.ts +3 -4
  109. package/types/types.d.ts.map +1 -1
  110. package/types/views/Theme.d.ts +1 -9
  111. package/types/views/Theme.d.ts.map +1 -1
  112. package/types/views/ThemeProvider.d.ts +1 -0
  113. package/types/views/ThemeProvider.d.ts.map +1 -1
@@ -1,12 +1,6 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import {
4
- mergeTransform,
5
- stylePropsText,
6
- stylePropsTransform,
7
- validPseudoKeys,
8
- validStyles
9
- } from "@tamagui/helpers";
3
+ import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from "@tamagui/helpers";
10
4
  import { useInsertionEffect } from "react";
11
5
  import { getConfig } from "../conf";
12
6
  import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
@@ -20,6 +14,7 @@ import {
20
14
  updateInserted,
21
15
  updateInsertedCache
22
16
  } from "./insertStyleRule";
17
+ import { mergeTransform } from "./mergeTransform";
23
18
  const skipProps = {
24
19
  animation: true,
25
20
  animateOnly: true,
@@ -42,18 +37,14 @@ const skipProps = {
42
37
  let conf;
43
38
  const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
44
39
  var _a;
45
- if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
46
- console.log(" \xBB getSplitStyles", { props, state, defaultClassNames });
47
- }
48
40
  conf = conf || getConfig();
49
41
  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
50
42
  const viewProps = {};
51
- const style = {};
52
- const classNames = {
53
- ...defaultClassNames
54
- };
55
43
  const pseudos = {};
56
44
  const medias = {};
45
+ let style = {};
46
+ let classNames = {};
47
+ const usedKeys = /* @__PURE__ */ new Set();
57
48
  const rulesToInsert = [];
58
49
  function addStyle(prop, rule) {
59
50
  rulesToInsert.push([prop, rule]);
@@ -104,55 +95,32 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
104
95
  }
105
96
  }
106
97
  __name(mergeClassName, "mergeClassName");
107
- function push() {
108
- if (!cur)
109
- return;
110
- normalizeStyleObject(cur);
111
- if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
112
- console.log(" \xBB getSplitStyles push", cur, state);
113
- }
114
- if (isWeb && !state.noClassNames) {
115
- const atomic = getStylesAtomic(cur);
116
- for (const atomicStyle of atomic) {
117
- if (!state.noClassNames) {
118
- addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
119
- mergeClassName(atomicStyle.property, atomicStyle.identifier);
120
- } else {
121
- style[atomicStyle.property] = atomicStyle.value;
122
- }
123
- }
124
- }
125
- if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
126
- for (const key in cur) {
127
- if (skipProps[key]) {
128
- continue;
129
- }
130
- if (key in stylePropsTransform) {
131
- mergeTransform(style, key, cur[key]);
132
- } else {
133
- style[key] = cur[key];
134
- }
135
- }
136
- }
137
- cur = null;
138
- }
139
- __name(push, "push");
140
- for (const keyInit in props) {
141
- if (skipProps[keyInit]) {
98
+ const propKeys = Object.keys(props);
99
+ for (let i = propKeys.length - 1; i >= 0; i--) {
100
+ const keyInit = propKeys[i];
101
+ if (usedKeys.has(keyInit))
142
102
  continue;
143
- }
144
- if (!isWeb && keyInit.startsWith("data-")) {
103
+ if (skipProps[keyInit])
104
+ continue;
105
+ if (!isWeb && keyInit.startsWith("data-"))
145
106
  continue;
146
- }
147
107
  const valInit = props[keyInit];
148
108
  if (keyInit === "style" || keyInit.startsWith("_style")) {
149
- push();
150
- cur = valInit;
151
- push();
109
+ if (!valInit)
110
+ continue;
111
+ for (const key in valInit) {
112
+ if (usedKeys.has(key))
113
+ continue;
114
+ style[key] = valInit;
115
+ }
116
+ continue;
117
+ }
118
+ if (keyInit === "className") {
119
+ mergeClassName(keyInit, valInit);
152
120
  continue;
153
121
  }
154
- if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
155
- push();
122
+ if (validStyleProps[keyInit] && valInit && valInit[0] === "_") {
123
+ usedKeys.add(keyInit);
156
124
  mergeClassName(keyInit, valInit);
157
125
  continue;
158
126
  }
@@ -162,19 +130,24 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
162
130
  let isMedia = keyInit[0] === "$";
163
131
  let isPseudo = validPseudoKeys[keyInit];
164
132
  if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
133
+ usedKeys.add(keyInit);
165
134
  viewProps[keyInit] = valInit;
166
135
  continue;
167
136
  }
168
- const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
169
- const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
137
+ const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state);
170
138
  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
171
139
  console.log(" \xBB getSplitStyles", keyInit, expanded);
172
140
  }
141
+ if (!expanded) {
142
+ continue;
143
+ }
173
144
  for (const [key, val] of expanded) {
174
- if (val === void 0) {
145
+ if (val === void 0)
146
+ continue;
147
+ if (usedKeys.has(key))
175
148
  continue;
176
- }
177
149
  if (key !== "target" && val && val[0] === "_") {
150
+ usedKeys.add(key);
178
151
  mergeClassName(key, val);
179
152
  continue;
180
153
  }
@@ -215,13 +188,12 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
215
188
  if (shouldDoClasses) {
216
189
  const mediaStyles = getStylesAtomic(mediaStyle);
217
190
  for (const style2 of mediaStyles) {
218
- const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
219
- addStyle(out2.identifier, out2.styleRule);
220
- mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
191
+ const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
192
+ addStyle(out.identifier, out.styleRule);
193
+ mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier);
221
194
  }
222
195
  } else {
223
196
  if (mediaState[mediaKey]) {
224
- push();
225
197
  if (process.env.NODE_ENV === "development" && props["debug"]) {
226
198
  console.log("apply media style", mediaKey, mediaState);
227
199
  }
@@ -231,23 +203,46 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
231
203
  continue;
232
204
  }
233
205
  if (!isWeb && key === "pointerEvents") {
206
+ usedKeys.add(key);
234
207
  viewProps[key] = val;
235
208
  continue;
236
209
  }
237
210
  if (validStyleProps[key]) {
238
- cur = cur || {};
239
- cur[key] = val;
211
+ usedKeys.add(key);
212
+ if (val && val[0] === "_") {
213
+ classNames[key] = val;
214
+ } else {
215
+ if (key in stylePropsTransform && (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both")) {
216
+ mergeTransform(style, key, val, true);
217
+ } else {
218
+ style[key] = val;
219
+ }
220
+ }
240
221
  continue;
241
222
  }
242
223
  if (!staticConfig.variants || !(key in staticConfig.variants)) {
243
224
  if (!skipProps[key]) {
244
- push();
245
225
  viewProps[key] = val;
226
+ usedKeys.add(key);
246
227
  }
247
228
  }
248
229
  }
249
230
  }
250
- push();
231
+ if (defaultClassNames) {
232
+ classNames = {
233
+ ...defaultClassNames,
234
+ ...classNames
235
+ };
236
+ }
237
+ if (isWeb && !state.noClassNames) {
238
+ const atomic = getStylesAtomic(style);
239
+ for (const atomicStyle of atomic) {
240
+ const key = atomicStyle.property;
241
+ addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
242
+ mergeClassName(key, atomicStyle.identifier);
243
+ }
244
+ style = {};
245
+ }
251
246
  if (transforms) {
252
247
  for (const namespace in transforms) {
253
248
  const [hash, val] = transforms[namespace];
@@ -262,7 +257,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
262
257
  }
263
258
  }
264
259
  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
265
- console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
260
+ if (typeof document !== "undefined") {
261
+ console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
262
+ }
266
263
  }
267
264
  return {
268
265
  viewProps,
@@ -294,8 +291,9 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
294
291
  const styleOut = {};
295
292
  for (const key in styleIn) {
296
293
  const val = styleIn[key];
297
- const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
298
- const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
294
+ const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps);
295
+ if (!expanded)
296
+ continue;
299
297
  for (const [skey, sval] of expanded) {
300
298
  if (skey in stylePropsTransform) {
301
299
  mergeTransform(styleOut, skey, sval);
@@ -304,7 +302,6 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
304
302
  }
305
303
  }
306
304
  }
307
- normalizeStyleObject(styleOut);
308
305
  return styleOut;
309
306
  }, "getSubStyle");
310
307
  function normalizeStyleObject(style) {
@@ -1,13 +1,25 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import {
4
- invertMapTransformKeys,
5
- mergeTransform,
6
- stylePropsTransform
7
- } from "@tamagui/helpers";
8
- import { getConfig } from "../conf";
9
- import { rnw } from "../constants/rnw";
3
+ import { stylePropsTransform } from "@tamagui/helpers";
4
+ import { reversedShorthands } from "../createTamagui";
10
5
  import { isVariable } from "../createVariable";
6
+ import { generateAtomicStyles } from "./generateAtomicStyles";
7
+ import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
8
+ const pseudos = {
9
+ hoverStyle: {
10
+ name: "hover",
11
+ priority: 1
12
+ },
13
+ pressStyle: {
14
+ name: "active",
15
+ priority: 2
16
+ },
17
+ focusStyle: {
18
+ name: "focus",
19
+ priority: 3
20
+ }
21
+ };
22
+ const pseudosOrdered = Object.values(pseudos);
11
23
  function getStylesAtomic(stylesIn, options = {}) {
12
24
  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn;
13
25
  let res = [];
@@ -31,10 +43,6 @@ function getStylesAtomic(stylesIn, options = {}) {
31
43
  return res;
32
44
  }
33
45
  __name(getStylesAtomic, "getStylesAtomic");
34
- const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
35
- return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style)));
36
- }, "generateAtomicStyles");
37
- let reversedShorthands = null;
38
46
  function getAtomicStyle(style, pseudo, options) {
39
47
  var _a;
40
48
  if (style == null || typeof style !== "object") {
@@ -62,27 +70,20 @@ function getAtomicStyle(style, pseudo, options) {
62
70
  } else {
63
71
  atomicStyles = generateAtomicStyles(style);
64
72
  }
65
- if (!reversedShorthands) {
66
- reversedShorthands = {};
67
- const conf = getConfig();
68
- if (conf.shorthands) {
69
- for (const key in conf.shorthands) {
70
- reversedShorthands[conf.shorthands[key]] = key;
71
- }
72
- }
73
- }
74
73
  return Object.keys(atomicStyles).map((key) => {
75
74
  const val = atomicStyles[key];
76
- const [_, a, b] = val.identifier.split("-");
77
- const hash = b || a;
75
+ const [_, hash] = val.identifier.split("-");
78
76
  const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
77
+ if (!val.property) {
78
+ throw new Error(`no prop`);
79
+ }
79
80
  const shortProp = reversedShorthands[val.property] || val.property;
80
81
  const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
81
82
  const className = `.${identifier}`;
82
83
  const rules = val.rules.map((rule) => {
83
84
  if (pseudo) {
84
85
  const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
85
- let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`);
86
+ let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`).replace(";", " !important;");
86
87
  if (pseudo.name === "hover") {
87
88
  res = `@media not all and (hover: none) { ${res} }`;
88
89
  }
@@ -92,7 +93,8 @@ function getAtomicStyle(style, pseudo, options) {
92
93
  });
93
94
  const result = {
94
95
  property: val.transformProperty || val.property,
95
- value: val.value,
96
+ pseudo: pseudo == null ? void 0 : pseudo.name,
97
+ value: val.value || "",
96
98
  identifier,
97
99
  className,
98
100
  rules
@@ -109,21 +111,6 @@ const borderDefaults = {
109
111
  borderLeftWidth: "borderLeftStyle",
110
112
  borderRightWidth: "borderRightStyle"
111
113
  };
112
- const pseudos = {
113
- hoverStyle: {
114
- name: "hover",
115
- priority: 1
116
- },
117
- pressStyle: {
118
- name: "active",
119
- priority: 2
120
- },
121
- focusStyle: {
122
- name: "focus",
123
- priority: 3
124
- }
125
- };
126
- const pseudosOrdered = Object.values(pseudos);
127
114
  export {
128
115
  getStylesAtomic,
129
116
  pseudos
@@ -0,0 +1,18 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+ const mergeTransform = /* @__PURE__ */ __name((obj, key, val, backwards = false) => {
4
+ obj.transform || (obj.transform = []);
5
+ obj.transform[backwards ? "unshift" : "push"]({ [mapTransformKeys[key] || key]: val });
6
+ }, "mergeTransform");
7
+ const mapTransformKeys = {
8
+ x: "translateX",
9
+ y: "translateY"
10
+ };
11
+ const invertMapTransformKeys = {
12
+ translateX: "x",
13
+ translateY: "y"
14
+ };
15
+ export {
16
+ invertMapTransformKeys,
17
+ mergeTransform
18
+ };
@@ -0,0 +1,165 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+ import createPrefixer from "inline-style-prefixer/lib/createPrefixer";
4
+ import backgroundClip from "inline-style-prefixer/lib/plugins/backgroundClip";
5
+ import crossFade from "inline-style-prefixer/lib/plugins/crossFade";
6
+ import cursor from "inline-style-prefixer/lib/plugins/cursor";
7
+ import filter from "inline-style-prefixer/lib/plugins/filter";
8
+ import flex from "inline-style-prefixer/lib/plugins/flex";
9
+ import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";
10
+ import flexboxOld from "inline-style-prefixer/lib/plugins/flexboxOld";
11
+ import gradient from "inline-style-prefixer/lib/plugins/gradient";
12
+ import grid from "inline-style-prefixer/lib/plugins/grid";
13
+ import imageSet from "inline-style-prefixer/lib/plugins/imageSet";
14
+ import logical from "inline-style-prefixer/lib/plugins/logical";
15
+ import position from "inline-style-prefixer/lib/plugins/position";
16
+ import sizing from "inline-style-prefixer/lib/plugins/sizing";
17
+ import transition from "inline-style-prefixer/lib/plugins/transition";
18
+ const prefixInlineStyles = /* @__PURE__ */ __name((style) => {
19
+ const prefixedStyles = prefixStyles(style);
20
+ Object.keys(prefixedStyles).forEach((prop) => {
21
+ const value = prefixedStyles[prop];
22
+ if (Array.isArray(value)) {
23
+ prefixedStyles[prop] = value[value.length - 1];
24
+ }
25
+ });
26
+ return prefixedStyles;
27
+ }, "prefixInlineStyles");
28
+ const w = ["Webkit"];
29
+ const m = ["Moz"];
30
+ const ms = ["ms"];
31
+ const wm = ["Webkit", "Moz"];
32
+ const wms = ["Webkit", "ms"];
33
+ const wmms = ["Webkit", "Moz", "ms"];
34
+ const staticData = {
35
+ plugins: [
36
+ backgroundClip,
37
+ crossFade,
38
+ cursor,
39
+ filter,
40
+ flex,
41
+ flexboxIE,
42
+ flexboxOld,
43
+ gradient,
44
+ grid,
45
+ imageSet,
46
+ logical,
47
+ position,
48
+ sizing,
49
+ transition
50
+ ],
51
+ prefixMap: {
52
+ animation: w,
53
+ animationDelay: w,
54
+ animationDirection: w,
55
+ animationFillMode: w,
56
+ animationDuration: w,
57
+ animationIterationCount: w,
58
+ animationName: w,
59
+ animationPlayState: w,
60
+ animationTimingFunction: w,
61
+ appearance: wm,
62
+ userSelect: wmms,
63
+ textEmphasisPosition: w,
64
+ textEmphasis: w,
65
+ textEmphasisStyle: w,
66
+ textEmphasisColor: w,
67
+ boxDecorationBreak: w,
68
+ clipPath: w,
69
+ maskImage: w,
70
+ maskMode: w,
71
+ maskRepeat: w,
72
+ maskPosition: w,
73
+ maskClip: w,
74
+ maskOrigin: w,
75
+ maskSize: w,
76
+ maskComposite: w,
77
+ mask: w,
78
+ maskBorderSource: w,
79
+ maskBorderMode: w,
80
+ maskBorderSlice: w,
81
+ maskBorderWidth: w,
82
+ maskBorderOutset: w,
83
+ maskBorderRepeat: w,
84
+ maskBorder: w,
85
+ maskType: w,
86
+ textDecorationStyle: w,
87
+ textDecorationSkip: w,
88
+ textDecorationLine: w,
89
+ textDecorationColor: w,
90
+ filter: w,
91
+ fontFeatureSettings: w,
92
+ breakAfter: wmms,
93
+ breakBefore: wmms,
94
+ breakInside: wmms,
95
+ columnCount: wm,
96
+ columnFill: wm,
97
+ columnGap: wm,
98
+ columnRule: wm,
99
+ columnRuleColor: wm,
100
+ columnRuleStyle: wm,
101
+ columnRuleWidth: wm,
102
+ columns: wm,
103
+ columnSpan: wm,
104
+ columnWidth: wm,
105
+ writingMode: wms,
106
+ flex: wms,
107
+ flexBasis: w,
108
+ flexDirection: wms,
109
+ flexGrow: w,
110
+ flexFlow: wms,
111
+ flexShrink: w,
112
+ flexWrap: wms,
113
+ alignContent: w,
114
+ alignItems: w,
115
+ alignSelf: w,
116
+ justifyContent: w,
117
+ order: w,
118
+ transform: w,
119
+ transformOrigin: w,
120
+ transformOriginX: w,
121
+ transformOriginY: w,
122
+ backfaceVisibility: w,
123
+ perspective: w,
124
+ perspectiveOrigin: w,
125
+ transformStyle: w,
126
+ transformOriginZ: w,
127
+ backdropFilter: w,
128
+ fontKerning: w,
129
+ scrollSnapType: wms,
130
+ scrollSnapPointsX: wms,
131
+ scrollSnapPointsY: wms,
132
+ scrollSnapDestination: wms,
133
+ scrollSnapCoordinate: wms,
134
+ shapeImageThreshold: w,
135
+ shapeImageMargin: w,
136
+ shapeImageOutside: w,
137
+ hyphens: wmms,
138
+ flowInto: wms,
139
+ flowFrom: wms,
140
+ regionFragment: wms,
141
+ textOrientation: w,
142
+ textAlignLast: m,
143
+ tabSize: m,
144
+ wrapFlow: ms,
145
+ wrapThrough: ms,
146
+ wrapMargin: ms,
147
+ touchAction: ms,
148
+ textSizeAdjust: ["ms", "Webkit"],
149
+ borderImage: w,
150
+ borderImageOutset: w,
151
+ borderImageRepeat: w,
152
+ borderImageSlice: w,
153
+ borderImageSource: w,
154
+ borderImageWidth: w,
155
+ transitionDelay: w,
156
+ transitionDuration: w,
157
+ transitionProperty: w,
158
+ transitionTimingFunction: w
159
+ }
160
+ };
161
+ const prefixStyles = createPrefixer(staticData);
162
+ export {
163
+ prefixInlineStyles,
164
+ prefixStyles
165
+ };
@@ -1,11 +1,11 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
  import { useState } from "react";
4
- import { isTouchDevice, useIsomorphicLayoutEffect } from "../constants/platform";
4
+ import { isTouchable, useIsomorphicLayoutEffect } from "../constants/platform";
5
5
  const useIsTouchDevice = /* @__PURE__ */ __name(() => {
6
6
  const [touchOnly, setTouchOnly] = useState(false);
7
7
  useIsomorphicLayoutEffect(() => {
8
- if (isTouchDevice) {
8
+ if (isTouchable) {
9
9
  setTouchOnly(true);
10
10
  }
11
11
  }, []);
@@ -11,7 +11,7 @@ import { useConstant } from "./useConstant";
11
11
  const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceUpdate) => {
12
12
  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(themeName, componentName, props, forceUpdate);
13
13
  if (process.env.NODE_ENV === "development") {
14
- if ((props == null ? void 0 : props["debug"]) === "verbose") {
14
+ if ((props == null ? void 0 : props.debug) === "verbose") {
15
15
  console.log(" \xBB useTheme", { themeName, componentName, name, className });
16
16
  }
17
17
  }
@@ -52,7 +52,7 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
52
52
  if (!name || key === "__proto__" || typeof key === "symbol") {
53
53
  if (key === GetThemeManager) {
54
54
  if (process.env.NODE_ENV === "development") {
55
- if (props["debug"]) {
55
+ if (props == null ? void 0 : props.debug) {
56
56
  console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
57
57
  }
58
58
  }
@@ -131,13 +131,14 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
131
131
  const debug = props && props["debug"];
132
132
  const parentManager = useContext(ThemeManagerContext) || emptyManager;
133
133
  const { themes } = useContext(ThemeContext);
134
- const next = parentManager.getNextTheme({ name, componentName, themes }, props);
134
+ const reset = (props == null ? void 0 : props.reset) || false;
135
+ const getThemeProps = { name, componentName, themes, reset };
136
+ const next = parentManager.getNextTheme(getThemeProps, debug);
135
137
  const forceUpdate = forceUpdateProp || useForceUpdate();
136
138
  const themeManager = useConstant(() => {
137
- if (!next) {
139
+ if (!next)
138
140
  return null;
139
- }
140
- return new ThemeManager(next.name, next.theme, parentManager);
141
+ return new ThemeManager(next.name, next.theme, parentManager, reset);
141
142
  });
142
143
  if (typeof document !== "undefined") {
143
144
  useLayoutEffect(() => {
@@ -147,7 +148,7 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
147
148
  themeManager.update(next);
148
149
  }
149
150
  return parentManager.onChangeTheme(() => {
150
- const next2 = parentManager.getNextTheme({ name, componentName, themes }, debug);
151
+ const next2 = parentManager.getNextTheme(getThemeProps, debug);
151
152
  if (!next2)
152
153
  return;
153
154
  if (themeManager.update(next2)) {
@@ -20,7 +20,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
20
20
  return () => {
21
21
  document.body.classList.remove(cn);
22
22
  };
23
- }, [props.disableRootThemeClass]);
23
+ }, [props.defaultTheme, props.disableRootThemeClass]);
24
24
  }
25
25
  const themeContext = useMemo(() => {
26
26
  return {
@@ -27,7 +27,7 @@ const ThemeReset = /* @__PURE__ */ __name((props) => {
27
27
  if (!themeManager || !props.children) {
28
28
  return props.children || null;
29
29
  }
30
- return <Theme className="tui-theme-reset" name={name}>{props.children}</Theme>;
30
+ return <Theme className="tui-theme-reset" reset name={name}>{props.children}</Theme>;
31
31
  }, "ThemeReset");
32
32
  export {
33
33
  ThemeReset
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/core",
3
- "version": "1.0.1-beta.28",
3
+ "version": "1.0.1-beta.29",
4
4
  "source": "src/index.ts",
5
5
  "main": "dist/cjs",
6
6
  "module": "dist/esm",
@@ -21,11 +21,14 @@
21
21
  ],
22
22
  "dependencies": {
23
23
  "@expo/match-media": "^0.3.0",
24
- "@tamagui/helpers": "^1.0.1-beta.28",
24
+ "@tamagui/helpers": "^1.0.1-beta.29",
25
25
  "@tamagui/ow": "^0.28.1",
26
- "@tamagui/use-debounce": "^1.0.1-beta.28",
27
- "@tamagui/use-force-update": "^1.0.1-beta.28",
26
+ "@tamagui/use-debounce": "^1.0.1-beta.29",
27
+ "@tamagui/use-force-update": "^1.0.1-beta.29",
28
28
  "expo-screen-orientation": "^4.2.0",
29
+ "hyphenate-style-name": "^1.0.4",
30
+ "inline-style-prefixer": "^6.0.0",
31
+ "normalize-css-color": "^1.0.2",
29
32
  "react": "*",
30
33
  "react-dom": "*"
31
34
  },
@@ -33,7 +36,7 @@
33
36
  "react-native-web": "*"
34
37
  },
35
38
  "devDependencies": {
36
- "@tamagui/build": "^1.0.1-beta.28",
39
+ "@tamagui/build": "^1.0.1-beta.29",
37
40
  "@types/react": "^17.0.35",
38
41
  "csstype": "^3.0.10",
39
42
  "esbuild": "^0.14.36",
package/reset.css CHANGED
@@ -14,7 +14,8 @@ button,
14
14
  ul,
15
15
  ol,
16
16
  li,
17
- pre {
17
+ pre,
18
+ h1, h2, h3, h4, h5, h6 {
18
19
  margin: 0;
19
20
  padding: 0;
20
21
  }
@@ -1,7 +1,7 @@
1
1
  import * as Helpers from '@tamagui/helpers';
2
2
  import { TamaguiInternalConfig } from './types';
3
3
  declare class TamaguiManager {
4
- rnw: Record<string, any>;
4
+ rnw: any;
5
5
  Helpers: typeof Helpers;
6
6
  get config(): TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
7
7
  [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
@@ -1 +1 @@
1
- {"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAK3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,GAAG,sBAAM;IACT,OAAO,iBAAU;IAEjB,IAAI,MAAM;;;;;;;;;;;;;;OAET;IAED,IAAI,aAAa,cAEhB;IAED,IAAI,YAAY,OAEf;IAED,IAAI,aAAa,OAEhB;IAED,IAAI,iBAAiB,qBAEpB;CACF;AAED,eAAO,MAAM,OAAO,gBAAuB,CAAA;AAI3C,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}
1
+ {"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAK3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,GAAG,MAAM;IACT,OAAO,iBAAU;IAEjB,IAAI,MAAM;;;;;;;;;;;;;;OAET;IAED,IAAI,aAAa,cAEhB;IAED,IAAI,YAAY,OAEf;IAED,IAAI,aAAa,OAEhB;IAED,IAAI,iBAAiB,qBAEpB;CACF;AAED,eAAO,MAAM,OAAO,gBAAuB,CAAA;AAI3C,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}