@tamagui/core 1.0.0-beta.189 → 1.0.0-beta.205

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 (142) hide show
  1. package/dist/cjs/Tamagui.js +5 -0
  2. package/dist/cjs/Tamagui.js.map +2 -2
  3. package/dist/cjs/constants/pseudos.js +37 -0
  4. package/dist/cjs/constants/pseudos.js.map +7 -0
  5. package/dist/cjs/createComponent.js +66 -88
  6. package/dist/cjs/createComponent.js.map +2 -2
  7. package/dist/cjs/createShallowUpdate.js +1 -0
  8. package/dist/cjs/createShallowUpdate.js.map +7 -0
  9. package/dist/cjs/defaultComponentState.js +0 -30
  10. package/dist/cjs/defaultComponentState.js.map +3 -3
  11. package/dist/cjs/devtools.js +32 -0
  12. package/dist/cjs/devtools.js.map +7 -0
  13. package/dist/cjs/helpers/RNComponents.js +34 -0
  14. package/dist/cjs/helpers/RNComponents.js.map +7 -0
  15. package/dist/cjs/helpers/createMediaStyle.js +2 -0
  16. package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
  17. package/dist/cjs/helpers/createPropMapper.js +25 -26
  18. package/dist/cjs/helpers/createPropMapper.js.map +2 -2
  19. package/dist/cjs/helpers/createShallowUpdate.js +51 -0
  20. package/dist/cjs/helpers/createShallowUpdate.js.map +7 -0
  21. package/dist/cjs/helpers/createTamaguiProvider.js +1 -5
  22. package/dist/cjs/helpers/createTamaguiProvider.js.map +2 -2
  23. package/dist/cjs/helpers/getSplitStyles.js +25 -14
  24. package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
  25. package/dist/cjs/helpers/getStylesAtomic.js +1 -0
  26. package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
  27. package/dist/cjs/helpers/insertStyleRule.js +11 -6
  28. package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
  29. package/dist/cjs/hooks/useFeatures.js +93 -7
  30. package/dist/cjs/hooks/useFeatures.js.map +2 -2
  31. package/dist/cjs/hooks/useTheme.js +13 -14
  32. package/dist/cjs/hooks/useTheme.js.map +2 -2
  33. package/dist/cjs/styled.js +2 -12
  34. package/dist/cjs/styled.js.map +2 -2
  35. package/dist/cjs/tamagui-base.css +8 -0
  36. package/dist/cjs/tamagui-base.css.map +7 -0
  37. package/dist/cjs/types-rnw.js.map +1 -1
  38. package/dist/cjs/types.js.map +1 -1
  39. package/dist/cjs/views/Stack.js +1 -0
  40. package/dist/cjs/views/Stack.js.map +2 -2
  41. package/dist/cjs/views/Text.js +1 -0
  42. package/dist/cjs/views/Text.js.map +2 -2
  43. package/dist/cjs/views/Theme.js +4 -1
  44. package/dist/cjs/views/Theme.js.map +2 -2
  45. package/dist/esm/Tamagui.js +2 -0
  46. package/dist/esm/Tamagui.js.map +2 -2
  47. package/dist/esm/constants/pseudos.js +18 -0
  48. package/dist/esm/constants/pseudos.js.map +7 -0
  49. package/dist/esm/createComponent.js +66 -91
  50. package/dist/esm/createComponent.js.map +2 -2
  51. package/dist/esm/createShallowUpdate.js +1 -0
  52. package/dist/esm/createShallowUpdate.js.map +7 -0
  53. package/dist/esm/defaultComponentState.js +0 -11
  54. package/dist/esm/defaultComponentState.js.map +3 -3
  55. package/dist/esm/devtools.js +14 -0
  56. package/dist/esm/devtools.js.map +7 -0
  57. package/dist/esm/helpers/RNComponents.js +12 -0
  58. package/dist/esm/helpers/RNComponents.js.map +7 -0
  59. package/dist/esm/helpers/createMediaStyle.js +2 -0
  60. package/dist/esm/helpers/createMediaStyle.js.map +2 -2
  61. package/dist/esm/helpers/createPropMapper.js +25 -26
  62. package/dist/esm/helpers/createPropMapper.js.map +2 -2
  63. package/dist/esm/helpers/createShallowUpdate.js +19 -0
  64. package/dist/esm/helpers/createShallowUpdate.js.map +7 -0
  65. package/dist/esm/helpers/createTamaguiProvider.js +1 -4
  66. package/dist/esm/helpers/createTamaguiProvider.js.map +2 -2
  67. package/dist/esm/helpers/getSplitStyles.js +25 -14
  68. package/dist/esm/helpers/getSplitStyles.js.map +2 -2
  69. package/dist/esm/helpers/getStylesAtomic.js +1 -0
  70. package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
  71. package/dist/esm/helpers/insertStyleRule.js +11 -6
  72. package/dist/esm/helpers/insertStyleRule.js.map +2 -2
  73. package/dist/esm/hooks/useFeatures.js +93 -12
  74. package/dist/esm/hooks/useFeatures.js.map +2 -2
  75. package/dist/esm/hooks/useTheme.js +13 -14
  76. package/dist/esm/hooks/useTheme.js.map +2 -2
  77. package/dist/esm/styled.js +1 -8
  78. package/dist/esm/styled.js.map +2 -2
  79. package/dist/esm/tamagui-base.css +8 -0
  80. package/dist/esm/tamagui-base.css.map +7 -0
  81. package/dist/esm/views/Stack.js +1 -0
  82. package/dist/esm/views/Stack.js.map +2 -2
  83. package/dist/esm/views/Text.js +1 -0
  84. package/dist/esm/views/Text.js.map +2 -2
  85. package/dist/esm/views/Theme.js +4 -1
  86. package/dist/esm/views/Theme.js.map +2 -2
  87. package/dist/jsx/Tamagui.js +2 -0
  88. package/dist/jsx/constants/pseudos.js +17 -0
  89. package/dist/jsx/createComponent.js +62 -88
  90. package/dist/jsx/createShallowUpdate.js +0 -0
  91. package/dist/jsx/defaultComponentState.js +0 -11
  92. package/dist/jsx/devtools.js +13 -0
  93. package/dist/jsx/helpers/RNComponents.js +11 -0
  94. package/dist/jsx/helpers/createMediaStyle.js +2 -0
  95. package/dist/jsx/helpers/createPropMapper.js +25 -26
  96. package/dist/jsx/helpers/createShallowUpdate.js +18 -0
  97. package/dist/jsx/helpers/createTamaguiProvider.js +1 -2
  98. package/dist/jsx/helpers/getSplitStyles.js +25 -14
  99. package/dist/jsx/helpers/getStylesAtomic.js +1 -0
  100. package/dist/jsx/helpers/insertStyleRule.js +11 -6
  101. package/dist/jsx/hooks/useFeatures.js +93 -12
  102. package/dist/jsx/hooks/useTheme.js +13 -14
  103. package/dist/jsx/styled.js +1 -8
  104. package/dist/jsx/tamagui-base.css +7 -0
  105. package/dist/jsx/views/Stack.js +1 -0
  106. package/dist/jsx/views/Text.js +1 -0
  107. package/dist/jsx/views/Theme.js +4 -1
  108. package/package.json +6 -6
  109. package/types/Tamagui.d.ts +2 -0
  110. package/types/Tamagui.d.ts.map +1 -1
  111. package/types/createComponent.d.ts +5 -6
  112. package/types/createComponent.d.ts.map +1 -1
  113. package/types/createFont.d.ts +1 -1
  114. package/types/createFont.d.ts.map +1 -1
  115. package/types/defaultComponentState.d.ts +0 -12
  116. package/types/defaultComponentState.d.ts.map +1 -1
  117. package/types/helpers/RNComponents.d.ts +2 -0
  118. package/types/helpers/RNComponents.d.ts.map +1 -0
  119. package/types/helpers/createMediaStyle.d.ts.map +1 -1
  120. package/types/helpers/createPropMapper.d.ts +2 -2
  121. package/types/helpers/createPropMapper.d.ts.map +1 -1
  122. package/types/helpers/createShallowUpdate.d.ts +4 -0
  123. package/types/helpers/createShallowUpdate.d.ts.map +1 -0
  124. package/types/helpers/createTamaguiProvider.d.ts +1 -1
  125. package/types/helpers/createTamaguiProvider.d.ts.map +1 -1
  126. package/types/helpers/getSplitStyles.d.ts +3 -14
  127. package/types/helpers/getSplitStyles.d.ts.map +1 -1
  128. package/types/helpers/getStylesAtomic.d.ts.map +1 -1
  129. package/types/helpers/insertStyleRule.d.ts.map +1 -1
  130. package/types/hooks/useFeatures.d.ts +7 -5
  131. package/types/hooks/useFeatures.d.ts.map +1 -1
  132. package/types/styled.d.ts +3 -7
  133. package/types/styled.d.ts.map +1 -1
  134. package/types/types-rnw.d.ts +0 -5
  135. package/types/types-rnw.d.ts.map +1 -1
  136. package/types/types.d.ts +82 -69
  137. package/types/types.d.ts.map +1 -1
  138. package/types/views/Stack.d.ts +2 -2
  139. package/types/views/Stack.d.ts.map +1 -1
  140. package/types/views/Text.d.ts +2 -2
  141. package/types/views/Text.d.ts.map +1 -1
  142. package/types/views/Theme.d.ts.map +1 -1
@@ -4,8 +4,8 @@ import { getConfig } from "../conf";
4
4
  import { isWeb } from "../constants/platform";
5
5
  import { isVariable } from "../createVariable";
6
6
  import { isObj } from "./isObj";
7
- const createPropMapper = /* @__PURE__ */ __name((c) => {
8
- const variants = c.variants || {};
7
+ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
8
+ const variants = staticConfig.variants || {};
9
9
  function getVariantFunction(variant, key, value) {
10
10
  for (const cat in tokenCategories) {
11
11
  if (key in tokenCategories[cat]) {
@@ -27,8 +27,8 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
27
27
  return fn || variant["..."] || variant["...size"];
28
28
  }
29
29
  __name(getVariantFunction, "getVariantFunction");
30
- const defaultProps = c.defaultProps || {};
31
- return (key, value, theme, props, staticConfig, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
30
+ const defaultProps = staticConfig.defaultProps || {};
31
+ return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
32
32
  const conf = getConfig();
33
33
  if (!conf) {
34
34
  console.trace("no conf! err");
@@ -38,29 +38,28 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
38
38
  const variant = variants && variants[key];
39
39
  if (variant && value !== void 0) {
40
40
  let variantValue = getVariantFunction(variant, key, value);
41
- if (!variantValue) {
42
- return value;
43
- }
44
- if (typeof variantValue === "function") {
45
- variantValue = variantValue(value, {
46
- tokens: conf.tokensParsed,
47
- theme,
48
- props: avoidDefaultProps ? props : new Proxy(props, {
49
- get(target, key2) {
50
- if (Reflect.has(target, key2)) {
51
- return Reflect.get(target, key2);
52
- }
53
- if (staticConfig.defaultProps) {
54
- return Reflect.get(staticConfig.defaultProps, key2);
41
+ if (variantValue) {
42
+ if (typeof variantValue === "function") {
43
+ variantValue = variantValue(value, {
44
+ tokens: conf.tokensParsed,
45
+ theme,
46
+ props: avoidDefaultProps ? props : new Proxy(props, {
47
+ get(target, key2) {
48
+ if (Reflect.has(target, key2)) {
49
+ return Reflect.get(target, key2);
50
+ }
51
+ if (staticConfig.defaultProps) {
52
+ return Reflect.get(staticConfig.defaultProps, key2);
53
+ }
55
54
  }
56
- }
57
- })
58
- });
59
- }
60
- if (isObj(variantValue)) {
61
- variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
55
+ })
56
+ });
57
+ }
58
+ if (isObj(variantValue)) {
59
+ variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
60
+ }
61
+ return variantValue;
62
62
  }
63
- return variantValue;
64
63
  }
65
64
  let shouldReturn = false;
66
65
  if (conf.shorthands[key]) {
@@ -161,7 +160,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
161
160
  }
162
161
  if (process.env.NODE_ENV === "development") {
163
162
  if (value && value[0] === "$") {
164
- console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
163
+ console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
165
164
  return null;
166
165
  }
167
166
  }
@@ -0,0 +1,18 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+ function createShallowUpdate(setter) {
4
+ return (next) => {
5
+ setter((prev) => {
6
+ for (const key in next) {
7
+ if (prev[key] !== next[key]) {
8
+ return { ...prev, ...next };
9
+ }
10
+ }
11
+ return prev;
12
+ });
13
+ };
14
+ }
15
+ __name(createShallowUpdate, "createShallowUpdate");
16
+ export {
17
+ createShallowUpdate
18
+ };
@@ -10,7 +10,6 @@ function createTamaguiProvider({
10
10
  }) {
11
11
  return /* @__PURE__ */ __name(function TamaguiProvider({
12
12
  injectCSS,
13
- fallback,
14
13
  children,
15
14
  ...themePropsProvider
16
15
  }) {
@@ -26,7 +25,7 @@ function createTamaguiProvider({
26
25
  };
27
26
  }, []);
28
27
  }
29
- return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}><React.Suspense fallback={fallback || null}>{children}</React.Suspense></ThemeProvider></TextAncestorProvider></ButtonInsideButtonContext.Provider>;
28
+ return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}>{children}</ThemeProvider></TextAncestorProvider></ButtonInsideButtonContext.Provider>;
30
29
  }, "TamaguiProvider");
31
30
  }
32
31
  __name(createTamaguiProvider, "createTamaguiProvider");
@@ -34,7 +34,6 @@ function normalizeStyleObject(style) {
34
34
  }
35
35
  __name(normalizeStyleObject, "normalizeStyleObject");
36
36
  const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
37
- var _a, _b, _c;
38
37
  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
39
38
  const viewProps = {};
40
39
  const style = {};
@@ -51,12 +50,16 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
51
50
  if (val.startsWith("_transform-")) {
52
51
  const isMediaOrPseudo = key !== "transform";
53
52
  const isMedia = isMediaOrPseudo && key[11] === "_";
54
- const isPsuedo = isMediaOrPseudo && !isMedia;
53
+ const isPsuedo = isMediaOrPseudo && key[11] === "0";
55
54
  const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
56
55
  if (!insertedTransforms[val]) {
57
56
  updateInserted();
58
57
  }
59
58
  const transform = insertedTransforms[val];
59
+ if (!transform || transform === "undefined") {
60
+ console.trace("NO TRANSFORM", { key, val }, state);
61
+ return;
62
+ }
60
63
  transforms[namespace] = transforms[namespace] || ["", ""];
61
64
  transforms[namespace][0] += val.replace("_transform", "");
62
65
  transforms[namespace][1] += transform;
@@ -79,7 +82,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
79
82
  style[atomicStyle.property] = atomicStyle.value;
80
83
  }
81
84
  }
82
- } else {
85
+ }
86
+ if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
83
87
  for (const key in cur) {
84
88
  if (key in stylePropsTransform) {
85
89
  mergeTransform(style, key, cur[key]);
@@ -88,6 +92,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
88
92
  }
89
93
  }
90
94
  }
95
+ if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
96
+ console.log("getSplitStyles.push", { state, cur });
97
+ }
91
98
  cur = null;
92
99
  }
93
100
  __name(push, "push");
@@ -109,13 +116,16 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
109
116
  }
110
117
  let isMedia = keyInit[0] === "$";
111
118
  let isPseudo = validPseudoKeys[keyInit];
112
- const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
119
+ const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
113
120
  const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
121
+ if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
122
+ console.log("split style", keyInit, expanded);
123
+ }
114
124
  for (const [key, val] of expanded) {
115
125
  if (val === void 0) {
116
126
  continue;
117
127
  }
118
- if (val && val[0] === "_") {
128
+ if (key !== "target" && val && val[0] === "_") {
119
129
  mergeClassName(key, val);
120
130
  continue;
121
131
  }
@@ -131,12 +141,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
131
141
  continue;
132
142
  }
133
143
  pseudos[key] = pseudos[key] || {};
134
- pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
144
+ pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
135
145
  if (isWeb && !state.noClassNames) {
136
146
  const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
137
- if ((_b = (_a = pseudoStyles[0]) == null ? void 0 : _a.identifier) == null ? void 0 : _b.includes("undefined")) {
138
- console.warn("undefined bug?", (_c = pseudoStyles[0]) == null ? void 0 : _c.identifier);
139
- }
140
147
  for (const style2 of pseudoStyles) {
141
148
  mergeClassName(`${style2.property}-${key}`, style2.identifier);
142
149
  insertStyleRule(style2.identifier, style2.rules[0]);
@@ -147,10 +154,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
147
154
  if (isMedia) {
148
155
  const mediaKey = key.slice(1);
149
156
  if (!mediaQueryConfig[mediaKey]) {
150
- viewProps[key] = valInit;
157
+ viewProps[key] = val;
151
158
  continue;
152
159
  }
153
- const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
160
+ const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
154
161
  if (isWeb) {
155
162
  const mediaStyles = getStylesAtomic(mediaStyle);
156
163
  for (const style2 of mediaStyles) {
@@ -202,6 +209,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
202
209
  classNames[namespace] = identifier;
203
210
  }
204
211
  }
212
+ if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
213
+ console.log("out", { style, pseudos, medias, classNames, viewProps });
214
+ }
205
215
  return {
206
216
  viewProps,
207
217
  style,
@@ -210,11 +220,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
210
220
  classNames
211
221
  };
212
222
  }, "getSplitStyles");
213
- const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
223
+ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
214
224
  const styleOut = {};
215
225
  for (const key in styleIn) {
216
226
  const val = styleIn[key];
217
- const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
227
+ const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
218
228
  const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
219
229
  for (const [skey, sval] of expanded) {
220
230
  if (skey in stylePropsTransform) {
@@ -228,5 +238,6 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
228
238
  return styleOut;
229
239
  }, "getSubStyle");
230
240
  export {
231
- getSplitStyles
241
+ getSplitStyles,
242
+ getSubStyle
232
243
  };
@@ -56,6 +56,7 @@ function getAtomicStyle(style, pseudo, options) {
56
56
  ...out[key],
57
57
  transformProperty
58
58
  };
59
+ console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
59
60
  }
60
61
  } else {
61
62
  atomicStyles = generateAtomicStyles(style);
@@ -19,8 +19,9 @@ function addTransform(identifier, rule) {
19
19
  }
20
20
  __name(addTransform, "addTransform");
21
21
  let hasInsertedSinceUpdate = true;
22
+ const isClient = typeof document !== "undefined";
22
23
  function updateInserted() {
23
- if (typeof document === "undefined") {
24
+ if (!isClient) {
24
25
  return;
25
26
  }
26
27
  if (!hasInsertedSinceUpdate) {
@@ -33,17 +34,18 @@ function updateInserted() {
33
34
  for (let i = 0; i < sheets.length; i++) {
34
35
  const rules = sheets[i].cssRules;
35
36
  const firstRule = rules[0];
36
- if (!firstRule)
37
+ if (!(firstRule instanceof CSSStyleRule))
37
38
  continue;
38
- const firstSelector = firstRule["selectorText"];
39
+ const firstSelector = firstRule.selectorText;
39
40
  if (!firstSelector)
40
41
  continue;
41
42
  if (firstSelector === ":root" || firstSelector.startsWith("._")) {
42
- for (const rule of rules) {
43
- if (!rule.selectorText)
43
+ for (let i2 = 0; i2 < rules.length; i2++) {
44
+ const rule = rules.item(i2);
45
+ if (!(rule instanceof CSSStyleRule))
44
46
  continue;
45
47
  const identifier = rule.selectorText.slice(1);
46
- allSelectors[identifier] = true;
48
+ allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
47
49
  if (identifier.startsWith("_transform")) {
48
50
  addTransform(identifier, rule.cssText);
49
51
  }
@@ -60,6 +62,9 @@ function insertStyleRule(identifier, rule) {
60
62
  return;
61
63
  }
62
64
  hasInsertedSinceUpdate = true;
65
+ if (identifier === "_transform-1abwpjw") {
66
+ console.trace("inserting", identifier, rule);
67
+ }
63
68
  insertedSelectors[identifier] = rule;
64
69
  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
65
70
  if (identifier.startsWith("_transform")) {
@@ -1,6 +1,7 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
  import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
4
+ import { getSubStyle } from "../helpers/getSplitStyles";
4
5
  import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
5
6
  const createDefinition = /* @__PURE__ */ __name(({
6
7
  Component,
@@ -35,33 +36,113 @@ __name(loadFeatures, "loadFeatures");
35
36
  function loadAnimationFeature() {
36
37
  return createDefinition({
37
38
  Component: ({ _utils, ...props }) => {
38
- const { state, useAnimations, pseudos, style, setStateShallow } = _utils;
39
+ const {
40
+ state,
41
+ useAnimations,
42
+ pseudos,
43
+ style: inStyle,
44
+ setStateShallow,
45
+ staticConfig,
46
+ theme,
47
+ onDidAnimate
48
+ } = _utils;
39
49
  if (!useAnimations) {
40
50
  console.error("no useAnimations hook provided");
41
51
  return null;
42
52
  }
43
- const animatedStyleIn = {
44
- ...style,
45
- ...state.hover && pseudos.hoverStyle,
46
- ...state.focus && pseudos.focusStyle,
47
- ...state.press && pseudos.pressStyle
48
- };
49
- const res = useAnimations(props, {
50
- isMounted: state.mounted,
51
- style: animatedStyleIn,
52
- exitStyle: pseudos == null ? void 0 : pseudos.exitStyle
53
+ const propsWithAnimation = props;
54
+ const res = useAnimations(propsWithAnimation, {
55
+ state,
56
+ pseudos,
57
+ onDidAnimate,
58
+ staticConfig,
59
+ getStyle({ isEntering, exitVariant, enterVariant } = {}) {
60
+ var _a, _b, _c, _d;
61
+ const style = inStyle || {};
62
+ const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
63
+ const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
64
+ ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
65
+ enterStyle && merge(style, enterStyle);
66
+ state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
67
+ state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
68
+ state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
69
+ exitStyle && merge(style, exitStyle);
70
+ return style;
71
+ }
53
72
  });
54
73
  useIsomorphicLayoutEffect(() => {
55
74
  setStateShallow({
56
75
  animation: res
57
76
  });
58
- }, [JSON.stringify(style)]);
77
+ }, [res]);
59
78
  return null;
60
79
  },
61
80
  propNames: ["animation"]
62
81
  });
63
82
  }
64
83
  __name(loadAnimationFeature, "loadAnimationFeature");
84
+ const defaults = {
85
+ left: 0,
86
+ right: 0,
87
+ top: 0,
88
+ bottom: 0,
89
+ opacity: 1,
90
+ translateX: 0,
91
+ translateY: 0,
92
+ skew: 0,
93
+ skewX: 0,
94
+ skewY: 0,
95
+ scale: 1,
96
+ rotate: "0deg",
97
+ rotateY: "0deg",
98
+ rotateX: "0deg"
99
+ };
100
+ function ensureBaseHasDefaults(base, ...pseudos) {
101
+ for (const pseudo of pseudos) {
102
+ if (!pseudo)
103
+ continue;
104
+ for (const key in pseudo) {
105
+ const val = pseudo[key];
106
+ if (key === "transform") {
107
+ for (const t of val) {
108
+ const tkey = Object.keys(t)[0];
109
+ const defaultVal = defaults[tkey];
110
+ const tDefaultVal = { [tkey]: defaultVal };
111
+ if (!base.transform) {
112
+ base.transform = [tDefaultVal];
113
+ } else {
114
+ if (!base.transform.find((x) => x[tkey])) {
115
+ base.transform.push(tDefaultVal);
116
+ }
117
+ }
118
+ }
119
+ } else {
120
+ if (!(key in base)) {
121
+ base[key] = defaults[key];
122
+ }
123
+ }
124
+ }
125
+ }
126
+ }
127
+ __name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
128
+ function merge(base, next) {
129
+ if (!next.transform || !base.transform) {
130
+ Object.assign(base, next);
131
+ return;
132
+ }
133
+ const { transform, ...rest } = next;
134
+ Object.assign(base, rest);
135
+ for (const t of transform) {
136
+ const key = Object.keys(t)[0];
137
+ const existing = base.transform.find((x) => key in x);
138
+ if (existing) {
139
+ existing[key] = t[key];
140
+ } else {
141
+ base.transform.push(t);
142
+ }
143
+ }
144
+ }
145
+ __name(merge, "merge");
65
146
  function loadMediaQueryFeature() {
66
147
  const mediaPropNames = Object.keys(mediaState);
67
148
  return createDefinition({
@@ -49,14 +49,14 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
49
49
  return Reflect.has(theme, key);
50
50
  },
51
51
  get(_, key) {
52
- if (!name || key === "__proto__") {
53
- return Reflect.get(_, key);
54
- }
55
- if (key === GetThemeManager) {
56
- if (!didChangeTheme) {
57
- return null;
52
+ if (!name || key === "__proto__" || typeof key === "symbol") {
53
+ if (key === GetThemeManager) {
54
+ if (!didChangeTheme) {
55
+ return null;
56
+ }
57
+ return themeManager;
58
58
  }
59
- return themeManager;
59
+ return Reflect.get(_, key);
60
60
  }
61
61
  if (process.env.NODE_ENV === "development") {
62
62
  if (key === "__state") {
@@ -73,11 +73,6 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
73
73
  console.error("No themeManager");
74
74
  return;
75
75
  }
76
- if (process.env.NODE_ENV === "development") {
77
- if ((props == null ? void 0 : props["debug"]) === "verbose") {
78
- console.log(" \xBB accessing theme val", key, { ...state.current });
79
- }
80
- }
81
76
  if (typeof key === "string") {
82
77
  if (key[0] === "$") {
83
78
  key = key.slice(1);
@@ -86,12 +81,16 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
86
81
  if (val) {
87
82
  if (state.current.isRendering) {
88
83
  state.current.keys.add(key);
84
+ if (process.env.NODE_ENV === "development") {
85
+ if ((props == null ? void 0 : props["debug"]) === "verbose") {
86
+ console.log(" \xBB tracking theme key", key);
87
+ }
88
+ }
89
89
  }
90
90
  return val;
91
91
  }
92
92
  if (process.env.NODE_ENV === "development") {
93
- console.warn(`No theme value "${String(key)}" in ${name}`);
94
- return null;
93
+ console.log(`No theme value "${String(key)}" in ${name}`);
95
94
  }
96
95
  }
97
96
  return Reflect.get(_, key);
@@ -1,16 +1,9 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import * as ReactNative from "react-native";
4
3
  import { Image, Text, TextInput } from "react-native";
5
4
  import { createComponent } from "./createComponent";
6
5
  import { extendStaticConfig } from "./helpers/extendStaticConfig";
7
- const RNComponents = /* @__PURE__ */ new WeakMap();
8
- for (const key of ["Image", "TextInput", "Text", "View"]) {
9
- const val = ReactNative[key];
10
- if (val && typeof val === "object") {
11
- RNComponents.set(val, true);
12
- }
13
- }
6
+ import { RNComponents } from "./helpers/RNComponents";
14
7
  function styled(Component, options, staticExtractionOptions) {
15
8
  const staticConfigProps = (() => {
16
9
  if (options) {
@@ -0,0 +1,7 @@
1
+ .tamagui-absolute-fill {
2
+ position: absolute;
3
+ top: 0;
4
+ left: 0;
5
+ right: 0;
6
+ bottom: 0;
7
+ }
@@ -1,6 +1,7 @@
1
1
  import { stackDefaultStyles } from "../constants/constants";
2
2
  import { createComponent } from "../createComponent";
3
3
  const Stack = createComponent({
4
+ componentName: "Stack",
4
5
  defaultProps: {
5
6
  ...stackDefaultStyles,
6
7
  flexDirection: "column"
@@ -8,6 +8,7 @@ const ellipseStyle = {
8
8
  whiteSpace: "nowrap"
9
9
  };
10
10
  const Text = createComponent({
11
+ componentName: "Text",
11
12
  isText: true,
12
13
  defaultProps: {
13
14
  display: isWeb ? "inline" : "flex",
@@ -16,7 +16,10 @@ const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
16
16
  }
17
17
  const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
18
18
  if (isWeb) {
19
- return <div className={props.disableThemeClass ? "" : props.className ? `${className || ""} ${props.className || ""}` : className || ""} style={{
19
+ return <div className={[
20
+ `tui_Theme`,
21
+ ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
22
+ ].join(" ")} style={{
20
23
  display: "contents",
21
24
  color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()
22
25
  }}>{contents}</div>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/core",
3
- "version": "1.0.0-beta.189+64107267",
3
+ "version": "1.0.0-beta.205+6a67c74d",
4
4
  "source": "src/index.ts",
5
5
  "main": "dist/cjs",
6
6
  "module": "dist/esm",
@@ -19,10 +19,10 @@
19
19
  "dist"
20
20
  ],
21
21
  "dependencies": {
22
- "@tamagui/helpers": "^1.0.0-beta.189+64107267",
22
+ "@tamagui/helpers": "^1.0.0-beta.205+6a67c74d",
23
23
  "@tamagui/ow": "^0.28.1",
24
- "@tamagui/use-debounce": "^1.0.0-beta.189+64107267",
25
- "@tamagui/use-force-update": "^1.0.0-beta.189+64107267",
24
+ "@tamagui/use-debounce": "^1.0.0-beta.205+6a67c74d",
25
+ "@tamagui/use-force-update": "^1.0.0-beta.205+6a67c74d",
26
26
  "react": "*",
27
27
  "react-dom": "*"
28
28
  },
@@ -30,7 +30,7 @@
30
30
  "react-native-web": "*"
31
31
  },
32
32
  "devDependencies": {
33
- "@tamagui/build": "^1.0.0-beta.189+64107267",
33
+ "@tamagui/build": "^1.0.0-beta.205+6a67c74d",
34
34
  "@types/react": "^17.0.35",
35
35
  "csstype": "^3.0.10",
36
36
  "esbuild": "^0.14.36",
@@ -40,5 +40,5 @@
40
40
  "publishConfig": {
41
41
  "access": "public"
42
42
  },
43
- "gitHead": "6410726774260b4de48c270c81a17b168995a3b7"
43
+ "gitHead": "6a67c74d67416b6c81169e1cc25e239ab935f651"
44
44
  }
@@ -1,7 +1,9 @@
1
+ import * as Helpers from '@tamagui/helpers';
1
2
  import { TamaguiInternalConfig } from './types';
2
3
  declare class TamaguiManager {
3
4
  config: TamaguiInternalConfig | null;
4
5
  rnw: Record<string, any>;
6
+ Helpers: typeof Helpers;
5
7
  get allSelectors(): {};
6
8
  get allTransforms(): {};
7
9
  get identifierToValue(): Map<string, any>;
@@ -1 +1 @@
1
- {"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAO;IAC3C,GAAG,sBAAM;IAET,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;AAI3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAO;IAC3C,GAAG,sBAAM;IACT,OAAO,iBAAU;IAEjB,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,14 +1,14 @@
1
1
  /// <reference types="react" />
2
2
  import { View, ViewStyle } from 'react-native';
3
- import { SpaceTokens, StackProps, StaticComponent, StaticConfig, StaticConfigParsed } from './types';
3
+ import { SpaceTokens, StackProps, StaticConfig, StaticConfigParsed, TamaguiComponent, TamaguiComponentState } from './types';
4
+ export declare const defaultComponentState: TamaguiComponentState;
4
5
  export declare const mouseUps: Set<Function>;
5
- declare type DefaultProps = {};
6
- export declare function createComponent<ComponentPropTypes extends Object = DefaultProps, Ref = View>(configIn: Partial<StaticConfig> | StaticConfigParsed): StaticComponent<ComponentPropTypes, {}, Ref, StaticConfigParsed>;
7
- export declare const Spacer: StaticComponent<Omit<StackProps, "flex" | "direction"> & {
6
+ export declare function createComponent<ComponentPropTypes extends Object = {}, Ref = View, BaseProps = never>(configIn: Partial<StaticConfig> | StaticConfigParsed): TamaguiComponent<ComponentPropTypes, Ref, BaseProps, {}>;
7
+ export declare const Spacer: TamaguiComponent<Omit<StackProps, "flex" | "direction"> & {
8
8
  size?: SpaceTokens | undefined;
9
9
  flex?: number | boolean | undefined;
10
10
  direction?: "horizontal" | "vertical" | undefined;
11
- }, {}, View, StaticConfigParsed>;
11
+ }, View, never, {}>;
12
12
  export declare function spacedChildren({ isZStack, children, space, flexDirection, spaceFlex, }: {
13
13
  isZStack?: boolean;
14
14
  children: any;
@@ -17,5 +17,4 @@ export declare function spacedChildren({ isZStack, children, space, flexDirectio
17
17
  flexDirection?: ViewStyle['flexDirection'];
18
18
  }): any[];
19
19
  export declare const AbsoluteFill: (props: any) => JSX.Element;
20
- export {};
21
20
  //# sourceMappingURL=createComponent.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAoB,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAmBhE,OAAO,EACL,WAAW,EACX,UAAU,EACV,eAAe,EACf,YAAY,EACZ,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAGhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAS3C,aAAK,YAAY,GAAG,EAAE,CAAA;AAetB,wBAAgB,eAAe,CAAC,kBAAkB,SAAS,MAAM,GAAG,YAAY,EAAE,GAAG,GAAG,IAAI,EAC1F,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,oEA2lBrD;AAKD,eAAO,MAAM,MAAM;;;;gCA2CjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,SA2CA;AA4CD,eAAO,MAAM,YAAY,UAAW,GAAG,gBAepC,CAAA"}
1
+ {"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAehE,OAAO,EAEL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EAGtB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,qBAAqB,EAAE,qBAQnC,CAAA;AAED,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAQ3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,IAAI,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,4DA4mBrD;AAKD,eAAO,MAAM,MAAM;;;;mBA4CjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,SA2CA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,gBAiBpC,CAAA"}
@@ -1,3 +1,3 @@
1
1
  import { GenericFont } from './types';
2
- export declare const createFont: <A extends GenericFont>(font: A) => A;
2
+ export declare const createFont: <A extends GenericFont<string | number>>(font: A) => A;
3
3
  //# sourceMappingURL=createFont.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"createFont.d.ts","sourceRoot":"","sources":["../src/createFont.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,uCA2BtB,CAAA"}
1
+ {"version":3,"file":"createFont.d.ts","sourceRoot":"","sources":["../src/createFont.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,wDA2BtB,CAAA"}
@@ -1,13 +1 @@
1
- export declare type ComponentState = typeof defaultComponentState;
2
- export declare const defaultComponentState: {
3
- hover: boolean;
4
- press: boolean;
5
- pressIn: boolean;
6
- focus: boolean;
7
- mounted: boolean;
8
- animation: {
9
- style?: any;
10
- avoidClasses?: boolean | undefined;
11
- } | null;
12
- };
13
1
  //# sourceMappingURL=defaultComponentState.d.ts.map