@tamagui/core 1.0.0-beta.230 → 1.0.0-beta.3

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 (263) hide show
  1. package/dist/cjs/Tamagui.js +18 -1
  2. package/dist/cjs/Tamagui.js.map +2 -2
  3. package/dist/cjs/ThemeContext.js +4 -0
  4. package/dist/cjs/ThemeManager.js +30 -14
  5. package/dist/cjs/ThemeManager.js.map +2 -2
  6. package/dist/cjs/conf.js +10 -1
  7. package/dist/cjs/conf.js.map +2 -2
  8. package/dist/cjs/constants/constants.js +6 -0
  9. package/dist/cjs/constants/platform.js +15 -0
  10. package/dist/cjs/constants/platform.js.map +2 -2
  11. package/dist/cjs/constants/rnw.js +4 -0
  12. package/dist/cjs/contexts/ButtonInsideButtonContext.js +4 -0
  13. package/dist/cjs/createComponent.js +112 -63
  14. package/dist/cjs/createComponent.js.map +2 -2
  15. package/dist/cjs/createFont.js +4 -0
  16. package/dist/cjs/createShorthands.js +4 -0
  17. package/dist/cjs/createTamagui.js +56 -27
  18. package/dist/cjs/createTamagui.js.map +2 -2
  19. package/dist/cjs/createTheme.js +4 -0
  20. package/dist/cjs/createTokens.js +7 -6
  21. package/dist/cjs/createTokens.js.map +2 -2
  22. package/dist/cjs/createVariable.js +18 -2
  23. package/dist/cjs/createVariable.js.map +2 -2
  24. package/dist/cjs/helpers/RNComponents.js +4 -0
  25. package/dist/cjs/helpers/RNComponents.js.map +0 -0
  26. package/dist/cjs/helpers/addStylesUsingClassname.js +19 -16
  27. package/dist/cjs/helpers/addStylesUsingClassname.js.map +2 -2
  28. package/dist/cjs/helpers/areEqualSets.js +4 -0
  29. package/dist/cjs/helpers/createMediaStyle.js +5 -2
  30. package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
  31. package/dist/cjs/helpers/createPropMapper.js +44 -41
  32. package/dist/cjs/helpers/createPropMapper.js.map +2 -2
  33. package/dist/cjs/helpers/createShallowUpdate.js +4 -0
  34. package/dist/cjs/helpers/createShallowUpdate.js.map +0 -0
  35. package/dist/cjs/helpers/createTamaguiProvider.js +4 -0
  36. package/dist/cjs/helpers/extendStaticConfig.js +9 -6
  37. package/dist/cjs/helpers/extendStaticConfig.js.map +2 -2
  38. package/dist/cjs/helpers/fixNativeShadow.js +4 -0
  39. package/dist/cjs/helpers/fixNativeShadow.native.js +6 -2
  40. package/dist/cjs/helpers/fixNativeShadow.native.js.map +2 -2
  41. package/dist/cjs/helpers/getExpandedShorthands.js +4 -0
  42. package/dist/cjs/{constants/pseudos.js → helpers/getSize.js} +17 -19
  43. package/dist/cjs/helpers/getSize.js.map +7 -0
  44. package/dist/cjs/helpers/getSplitStyles.js +166 -60
  45. package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
  46. package/dist/cjs/helpers/getStylesAtomic.js +20 -3
  47. package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
  48. package/dist/cjs/helpers/getStylesAtomic.native.js +4 -0
  49. package/dist/cjs/helpers/insertStyleRule.js +41 -26
  50. package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
  51. package/dist/cjs/helpers/isObj.js +4 -0
  52. package/dist/cjs/helpers/isTamaguiElement.js +4 -0
  53. package/dist/cjs/helpers/matchMedia.js +4 -0
  54. package/dist/cjs/helpers/matchMedia.native.js +4 -0
  55. package/dist/cjs/helpers/proxyThemeVariables.js +40 -0
  56. package/dist/cjs/helpers/proxyThemeVariables.js.map +7 -0
  57. package/dist/cjs/helpers/themeable.js +7 -2
  58. package/dist/cjs/helpers/themeable.js.map +2 -2
  59. package/dist/cjs/helpers/validate.js +53 -11
  60. package/dist/cjs/helpers/validate.js.map +2 -2
  61. package/dist/cjs/helpers/withStaticProperties.js +4 -0
  62. package/dist/cjs/helpers/wrapThemeManagerContext.js +4 -0
  63. package/dist/cjs/hooks/useConstant.js +4 -0
  64. package/dist/cjs/hooks/useFeatures.js +8 -5
  65. package/dist/cjs/hooks/useFeatures.js.map +2 -2
  66. package/dist/cjs/hooks/useIsMounted.js +4 -0
  67. package/dist/cjs/hooks/useIsTouchDevice.js +8 -4
  68. package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
  69. package/dist/cjs/hooks/useMedia.js +30 -12
  70. package/dist/cjs/hooks/useMedia.js.map +2 -2
  71. package/dist/cjs/hooks/usePressable.js +4 -0
  72. package/dist/cjs/hooks/useTheme.js +30 -17
  73. package/dist/cjs/hooks/useTheme.js.map +2 -2
  74. package/dist/cjs/hooks/useUnmountEffect.js +4 -0
  75. package/dist/cjs/index.js +15 -0
  76. package/dist/cjs/index.js.map +2 -2
  77. package/dist/cjs/static.js +3 -0
  78. package/dist/cjs/static.js.map +2 -2
  79. package/dist/cjs/styled.js +7 -4
  80. package/dist/cjs/styled.js.map +2 -2
  81. package/dist/cjs/types.js.map +1 -1
  82. package/dist/cjs/views/Stack.js +4 -0
  83. package/dist/cjs/views/Text.js +4 -0
  84. package/dist/cjs/views/TextAncestorContext.js +6 -0
  85. package/dist/cjs/views/Theme.js +7 -3
  86. package/dist/cjs/views/Theme.js.map +2 -2
  87. package/dist/cjs/views/ThemeInverse.js +5 -0
  88. package/dist/cjs/views/ThemeProvider.js +6 -1
  89. package/dist/cjs/views/ThemeProvider.js.map +2 -2
  90. package/dist/cjs/views/ThemeReset.js +4 -0
  91. package/dist/esm/Tamagui.js +10 -2
  92. package/dist/esm/Tamagui.js.map +2 -2
  93. package/dist/esm/ThemeManager.js +21 -11
  94. package/dist/esm/ThemeManager.js.map +2 -2
  95. package/dist/esm/conf.js +0 -1
  96. package/dist/esm/conf.js.map +2 -2
  97. package/dist/esm/constants/platform.js +2 -0
  98. package/dist/esm/constants/platform.js.map +2 -2
  99. package/dist/esm/createComponent.js +104 -65
  100. package/dist/esm/createComponent.js.map +2 -2
  101. package/dist/esm/createTamagui.js +53 -28
  102. package/dist/esm/createTamagui.js.map +2 -2
  103. package/dist/esm/createTokens.js +2 -6
  104. package/dist/esm/createTokens.js.map +2 -2
  105. package/dist/esm/createVariable.js +8 -2
  106. package/dist/esm/createVariable.js.map +2 -2
  107. package/dist/esm/helpers/RNComponents.js +0 -0
  108. package/dist/esm/helpers/RNComponents.js.map +0 -0
  109. package/dist/esm/helpers/addStylesUsingClassname.js +16 -18
  110. package/dist/esm/helpers/addStylesUsingClassname.js.map +2 -2
  111. package/dist/esm/helpers/createMediaStyle.js +0 -2
  112. package/dist/esm/helpers/createMediaStyle.js.map +2 -2
  113. package/dist/esm/helpers/createPropMapper.js +40 -41
  114. package/dist/esm/helpers/createPropMapper.js.map +2 -2
  115. package/dist/esm/helpers/createShallowUpdate.js +0 -0
  116. package/dist/esm/helpers/createShallowUpdate.js.map +0 -0
  117. package/dist/esm/helpers/extendStaticConfig.js +9 -6
  118. package/dist/esm/helpers/extendStaticConfig.js.map +2 -2
  119. package/dist/esm/helpers/fixNativeShadow.native.js +2 -2
  120. package/dist/esm/helpers/fixNativeShadow.native.js.map +2 -2
  121. package/dist/esm/helpers/getSize.js +13 -0
  122. package/dist/esm/helpers/getSize.js.map +7 -0
  123. package/dist/esm/helpers/getSplitStyles.js +166 -63
  124. package/dist/esm/helpers/getSplitStyles.js.map +2 -2
  125. package/dist/esm/helpers/getStylesAtomic.js +15 -3
  126. package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
  127. package/dist/esm/helpers/insertStyleRule.js +31 -26
  128. package/dist/esm/helpers/insertStyleRule.js.map +2 -2
  129. package/dist/esm/helpers/proxyThemeVariables.js +18 -0
  130. package/dist/esm/helpers/proxyThemeVariables.js.map +7 -0
  131. package/dist/esm/helpers/themeable.js +3 -2
  132. package/dist/esm/helpers/themeable.js.map +2 -2
  133. package/dist/esm/helpers/validate.js +24 -11
  134. package/dist/esm/helpers/validate.js.map +2 -2
  135. package/dist/esm/hooks/useFeatures.js +3 -5
  136. package/dist/esm/hooks/useFeatures.js.map +2 -2
  137. package/dist/esm/hooks/useIsTouchDevice.js +6 -6
  138. package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
  139. package/dist/esm/hooks/useMedia.js +19 -12
  140. package/dist/esm/hooks/useMedia.js.map +2 -2
  141. package/dist/esm/hooks/useTheme.js +22 -17
  142. package/dist/esm/hooks/useTheme.js.map +2 -2
  143. package/dist/esm/index.js +4 -0
  144. package/dist/esm/index.js.map +2 -2
  145. package/dist/esm/static.js +3 -0
  146. package/dist/esm/static.js.map +2 -2
  147. package/dist/esm/styled.js +3 -4
  148. package/dist/esm/styled.js.map +2 -2
  149. package/dist/esm/views/Theme.js +3 -3
  150. package/dist/esm/views/Theme.js.map +2 -2
  151. package/dist/esm/views/ThemeProvider.js +2 -1
  152. package/dist/esm/views/ThemeProvider.js.map +2 -2
  153. package/dist/jsx/Tamagui.js +10 -2
  154. package/dist/jsx/ThemeManager.js +21 -11
  155. package/dist/jsx/conf.js +0 -1
  156. package/dist/jsx/constants/platform.js +2 -0
  157. package/dist/jsx/createComponent.js +100 -61
  158. package/dist/jsx/createTamagui.js +53 -28
  159. package/dist/jsx/createTokens.js +2 -6
  160. package/dist/jsx/createVariable.js +8 -2
  161. package/dist/jsx/helpers/RNComponents.js +0 -0
  162. package/dist/jsx/helpers/addStylesUsingClassname.js +16 -18
  163. package/dist/jsx/helpers/createMediaStyle.js +0 -2
  164. package/dist/jsx/helpers/createPropMapper.js +40 -41
  165. package/dist/jsx/helpers/createShallowUpdate.js +0 -0
  166. package/dist/jsx/helpers/extendStaticConfig.js +9 -6
  167. package/dist/jsx/helpers/fixNativeShadow.native.js +2 -2
  168. package/dist/jsx/helpers/getSize.js +12 -0
  169. package/dist/jsx/helpers/getSplitStyles.js +166 -63
  170. package/dist/jsx/helpers/getStylesAtomic.js +15 -3
  171. package/dist/jsx/helpers/insertStyleRule.js +31 -26
  172. package/dist/jsx/helpers/proxyThemeVariables.js +17 -0
  173. package/dist/jsx/helpers/themeable.js +3 -3
  174. package/dist/jsx/helpers/validate.js +24 -11
  175. package/dist/jsx/hooks/useFeatures.js +3 -5
  176. package/dist/jsx/hooks/useIsTouchDevice.js +6 -6
  177. package/dist/jsx/hooks/useMedia.js +19 -12
  178. package/dist/jsx/hooks/useTheme.js +22 -17
  179. package/dist/jsx/index.js +4 -0
  180. package/dist/jsx/static.js +3 -0
  181. package/dist/jsx/styled.js +3 -4
  182. package/dist/jsx/views/Theme.js +4 -4
  183. package/dist/jsx/views/ThemeProvider.js +2 -2
  184. package/package.json +6 -6
  185. package/types/Tamagui.d.ts +18 -1
  186. package/types/Tamagui.d.ts.map +1 -1
  187. package/types/ThemeManager.d.ts +3 -3
  188. package/types/ThemeManager.d.ts.map +1 -1
  189. package/types/conf.d.ts +2 -0
  190. package/types/conf.d.ts.map +1 -1
  191. package/types/constants/platform.d.ts +1 -0
  192. package/types/constants/platform.d.ts.map +1 -1
  193. package/types/createComponent.d.ts +3 -4
  194. package/types/createComponent.d.ts.map +1 -1
  195. package/types/createFont.d.ts +1 -1
  196. package/types/createFont.d.ts.map +1 -1
  197. package/types/createTamagui.d.ts +3 -1
  198. package/types/createTamagui.d.ts.map +1 -1
  199. package/types/createTokens.d.ts +0 -26
  200. package/types/createTokens.d.ts.map +1 -1
  201. package/types/createVariable.d.ts +1 -0
  202. package/types/createVariable.d.ts.map +1 -1
  203. package/types/helpers/addStylesUsingClassname.d.ts.map +1 -1
  204. package/types/helpers/createMediaStyle.d.ts.map +1 -1
  205. package/types/helpers/createPropMapper.d.ts +1 -1
  206. package/types/helpers/createPropMapper.d.ts.map +1 -1
  207. package/types/helpers/extendStaticConfig.d.ts +2 -2
  208. package/types/helpers/extendStaticConfig.d.ts.map +1 -1
  209. package/types/helpers/getSize.d.ts +3 -0
  210. package/types/helpers/getSize.d.ts.map +1 -0
  211. package/types/helpers/getSplitStyles.d.ts +14 -6
  212. package/types/helpers/getSplitStyles.d.ts.map +1 -1
  213. package/types/helpers/getStylesAtomic.d.ts.map +1 -1
  214. package/types/helpers/insertStyleRule.d.ts +2 -1
  215. package/types/helpers/insertStyleRule.d.ts.map +1 -1
  216. package/types/helpers/proxyThemeVariables.d.ts +2 -0
  217. package/types/helpers/proxyThemeVariables.d.ts.map +1 -0
  218. package/types/helpers/themeable.d.ts +3 -1
  219. package/types/helpers/themeable.d.ts.map +1 -1
  220. package/types/helpers/validate.d.ts.map +1 -1
  221. package/types/hooks/useMedia.d.ts +2 -6
  222. package/types/hooks/useMedia.d.ts.map +1 -1
  223. package/types/hooks/useTheme.d.ts +1 -1
  224. package/types/hooks/useTheme.d.ts.map +1 -1
  225. package/types/index.d.ts +2 -0
  226. package/types/index.d.ts.map +1 -1
  227. package/types/static.d.ts +3 -0
  228. package/types/static.d.ts.map +1 -1
  229. package/types/styled.d.ts +12 -3
  230. package/types/styled.d.ts.map +1 -1
  231. package/types/types.d.ts +76 -48
  232. package/types/types.d.ts.map +1 -1
  233. package/types/views/Theme.d.ts +1 -0
  234. package/types/views/Theme.d.ts.map +1 -1
  235. package/types/views/ThemeProvider.d.ts +1 -0
  236. package/types/views/ThemeProvider.d.ts.map +1 -1
  237. package/LICENSE +0 -21
  238. package/dist/cjs/constants/pseudos.js.map +0 -7
  239. package/dist/cjs/createShallowUpdate.js +0 -1
  240. package/dist/cjs/createShallowUpdate.js.map +0 -7
  241. package/dist/cjs/devtools.js +0 -32
  242. package/dist/cjs/devtools.js.map +0 -7
  243. package/dist/cjs/spacedChildren.js +0 -86
  244. package/dist/cjs/spacedChildren.js.map +0 -7
  245. package/dist/cjs/tamagui-base.css +0 -8
  246. package/dist/cjs/tamagui-base.css.map +0 -7
  247. package/dist/esm/constants/pseudos.js +0 -18
  248. package/dist/esm/constants/pseudos.js.map +0 -7
  249. package/dist/esm/createShallowUpdate.js +0 -1
  250. package/dist/esm/createShallowUpdate.js.map +0 -7
  251. package/dist/esm/devtools.js +0 -14
  252. package/dist/esm/devtools.js.map +0 -7
  253. package/dist/esm/spacedChildren.js +0 -52
  254. package/dist/esm/spacedChildren.js.map +0 -7
  255. package/dist/esm/tamagui-base.css +0 -8
  256. package/dist/esm/tamagui-base.css.map +0 -7
  257. package/dist/jsx/constants/pseudos.js +0 -17
  258. package/dist/jsx/createShallowUpdate.js +0 -0
  259. package/dist/jsx/devtools.js +0 -13
  260. package/dist/jsx/spacedChildren.js +0 -44
  261. package/dist/jsx/tamagui-base.css +0 -7
  262. package/types/spacedChildren.d.ts +0 -9
  263. package/types/spacedChildren.d.ts.map +0 -1
@@ -16,15 +16,17 @@ import React, {
16
16
  import { StyleSheet, Text, View } from "react-native";
17
17
  import { onConfiguredOnce } from "./conf";
18
18
  import { stackDefaultStyles } from "./constants/constants";
19
- import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
19
+ import { isAndroid, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
20
20
  import { rnw } from "./constants/rnw";
21
21
  import { isVariable } from "./createVariable";
22
22
  import { createShallowUpdate } from "./helpers/createShallowUpdate";
23
23
  import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
24
- import { getSplitStyles } from "./helpers/getSplitStyles";
24
+ import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
25
25
  import { getAllSelectors } from "./helpers/insertStyleRule";
26
+ import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
26
27
  import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
27
28
  import { useFeatures } from "./hooks/useFeatures";
29
+ import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
28
30
  import { usePressable } from "./hooks/usePressable";
29
31
  import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
30
32
  import { TextAncestorContext } from "./views/TextAncestorContext";
@@ -43,53 +45,70 @@ if (typeof document !== "undefined") {
43
45
  mouseUps.forEach((x) => x());
44
46
  mouseUps.clear();
45
47
  });
48
+ document.addEventListener("touchend", () => {
49
+ mouseUps.forEach((x) => x());
50
+ mouseUps.clear();
51
+ });
52
+ document.addEventListener("touchcancel", () => {
53
+ mouseUps.forEach((x) => x());
54
+ mouseUps.clear();
55
+ });
46
56
  }
47
- function createComponent(configIn) {
48
- let staticConfig;
49
- if ("parsed" in configIn) {
50
- staticConfig = configIn;
51
- } else {
52
- staticConfig = parseStaticConfig(configIn);
57
+ function mergeShorthands({ defaultProps }, { shorthands }) {
58
+ for (const key in defaultProps) {
59
+ defaultProps[shorthands[key] || key] = defaultProps[key];
53
60
  }
54
- const { Component, validStyles, isText, isZStack, componentName } = staticConfig;
55
- const componentClassName = `is_${componentName}`;
56
- const validStyleProps = validStyles || stylePropsView;
61
+ }
62
+ __name(mergeShorthands, "mergeShorthands");
63
+ let initialTheme;
64
+ function createComponent(configIn, ParentComponent) {
65
+ const staticConfig = (() => {
66
+ const config = extendStaticConfig(configIn, ParentComponent);
67
+ if ("parsed" in config) {
68
+ return config;
69
+ } else {
70
+ return parseStaticConfig(config);
71
+ }
72
+ })();
73
+ const componentClassName = `is_${staticConfig.componentName}`;
57
74
  let tamaguiConfig;
58
75
  let AnimatedText;
59
76
  let AnimatedView;
60
77
  let avoidClasses = true;
61
- let defaultPseudos = {};
62
78
  let defaultNativeStyle;
63
- let defaultNativeStyleSheet = null;
64
- let defaultsClassName = null;
65
- let initialTheme;
66
- let defaultSplitStyleResult = null;
79
+ let defaultNativeStyleSheet;
80
+ let tamaguiDefaultProps;
81
+ let initialSplitStyles;
67
82
  function addPseudoToStyles(styles, name, pseudos) {
68
83
  const pseudoStyle = pseudos[name];
84
+ const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
69
85
  if (pseudoStyle) {
70
- styles.push(isWeb ? { [name]: pseudoStyle } : pseudoStyle);
86
+ styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
71
87
  }
72
- const defaultPseudoStyle = defaultPseudos[name];
88
+ const defaultPseudoStyle = initialSplitStyles.pseudos[name];
73
89
  if (defaultPseudoStyle) {
74
- styles.push(isWeb ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
90
+ styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
75
91
  }
76
92
  }
77
93
  __name(addPseudoToStyles, "addPseudoToStyles");
78
94
  const component = forwardRef((props, forwardedRef) => {
79
95
  var _a, _b, _c, _d;
96
+ props = tamaguiDefaultProps ? { ...tamaguiDefaultProps, ...props } : props;
97
+ const { Component, componentName, isText, isZStack } = staticConfig;
80
98
  if (process.env.NODE_ENV === "development") {
81
99
  if (props["debug"]) {
82
- console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", " debug prop on:", { props: Object.entries(props) });
100
+ console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
101
+ console.log("props in:", props, Object.keys(props));
83
102
  if (props["debug"] === "break")
84
103
  debugger;
85
104
  }
86
105
  }
87
106
  const forceUpdate = useForceUpdate();
88
- const theme = useTheme(props.theme, componentName, props, forceUpdate);
107
+ const theme = useTheme(props.theme, staticConfig.componentName, props, forceUpdate);
89
108
  const [state, set_] = useState(defaultComponentState);
90
109
  const setStateShallow = createShallowUpdate(set_);
91
110
  const shouldAvoidClasses = !!(props.animation && avoidClasses);
92
- const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : defaultsClassName);
111
+ const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
93
112
  const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
94
113
  const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
95
114
  const isAnimated = !!(useAnimations && props.animation);
@@ -142,6 +161,7 @@ function createComponent(configIn) {
142
161
  accessibilityRole,
143
162
  collapsable,
144
163
  focusable,
164
+ onClick,
145
165
  theme: _themeProp,
146
166
  defaultVariants,
147
167
  onLayout,
@@ -164,15 +184,17 @@ function createComponent(configIn) {
164
184
  };
165
185
  }
166
186
  useIsomorphicLayoutEffect(() => {
167
- setStateShallow({
168
- mounted: true
169
- });
187
+ if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
188
+ setStateShallow({
189
+ mounted: true
190
+ });
191
+ }
170
192
  internal.current.isMounted = true;
171
193
  return () => {
172
194
  mouseUps.delete(unPress);
173
195
  internal.current.isMounted = false;
174
196
  };
175
- }, [hasEnterStyle]);
197
+ }, [hasEnterStyle, props.animation]);
176
198
  if (nativeID) {
177
199
  viewProps.id = nativeID;
178
200
  }
@@ -230,6 +252,7 @@ function createComponent(configIn) {
230
252
  medias
231
253
  ];
232
254
  if (!animationStyles) {
255
+ !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
233
256
  state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
234
257
  state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
235
258
  state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
@@ -248,7 +271,7 @@ function createComponent(configIn) {
248
271
  const className = classList.join(" ");
249
272
  if (process.env.NODE_ENV === "development") {
250
273
  if (props["debug"]) {
251
- console.log(" \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
274
+ console.log(" \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
252
275
  }
253
276
  }
254
277
  viewProps.className = className;
@@ -289,8 +312,10 @@ function createComponent(configIn) {
289
312
  viewProps.ref = forwardedRef;
290
313
  }
291
314
  }
292
- const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn);
293
- const isHoverable = isWeb && !isTouchDevice;
315
+ const initialPseudos = initialSplitStyles.pseudos;
316
+ const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
317
+ const isTouch = useIsTouchDevice();
318
+ const isHoverable = isWeb && !isTouch;
294
319
  const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
295
320
  const pressEventKey = isStringElement ? "onClick" : "onPress";
296
321
  const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
@@ -348,8 +373,12 @@ function createComponent(configIn) {
348
373
  });
349
374
  onPressIn == null ? void 0 : onPressIn(e);
350
375
  onMouseDown == null ? void 0 : onMouseDown(e);
376
+ if (isWeb) {
377
+ mouseUps.add(unPress);
378
+ }
351
379
  } : null,
352
380
  [pressEventKey]: attachPress ? (e) => {
381
+ onClick == null ? void 0 : onClick(e);
353
382
  onPress == null ? void 0 : onPress(e);
354
383
  unPress();
355
384
  onPressOut == null ? void 0 : onPressOut(e);
@@ -404,7 +433,7 @@ function createComponent(configIn) {
404
433
  if (process.env.NODE_ENV === "development") {
405
434
  if (props["debug"]) {
406
435
  viewProps["debug"] = true;
407
- console.log(" \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, defaultsClassName, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, defaultSplitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
436
+ console.log(" \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
408
437
  }
409
438
  }
410
439
  if (features.length) {
@@ -415,30 +444,28 @@ function createComponent(configIn) {
415
444
  }
416
445
  return content;
417
446
  });
447
+ component.displayName = staticConfig.componentName;
418
448
  onConfiguredOnce((conf) => {
419
449
  var _a, _b, _c, _d;
420
450
  if (process.env.IS_STATIC === "is_static") {
421
451
  return;
422
452
  }
423
- const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
424
453
  tamaguiConfig = conf;
425
- avoidClasses = !!((_b = tamaguiConfig.animations) == null ? void 0 : _b.avoidClasses);
426
- AnimatedText = (_c = tamaguiConfig.animations) == null ? void 0 : _c.Text;
427
- AnimatedView = (_d = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _d.View;
428
- initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
429
- defaultSplitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
454
+ mergeShorthands(staticConfig, tamaguiConfig);
455
+ avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
456
+ AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
457
+ AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
458
+ initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
459
+ initialSplitStyles = insertSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
430
460
  mounted: true,
431
461
  hover: false,
432
462
  press: false,
433
463
  pressIn: false,
434
464
  focus: false,
435
- resolveVariablesAs: "both"
465
+ resolveVariablesAs: "both",
466
+ keepVariantsAsProps: true
436
467
  });
437
- const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
438
- if (isWeb) {
439
- defaultsClassName = classNames;
440
- }
441
- defaultPseudos = pseudos;
468
+ const { style, viewProps } = initialSplitStyles;
442
469
  defaultNativeStyle = {};
443
470
  for (const key in style) {
444
471
  const v = style[key];
@@ -447,34 +474,44 @@ function createComponent(configIn) {
447
474
  defaultNativeStyleSheet = StyleSheet.create({
448
475
  base: defaultNativeStyle
449
476
  });
450
- component.displayName = staticConfig.componentName;
451
- component.defaultProps = {
477
+ const defaults = {
452
478
  ...viewProps,
453
479
  ...component.defaultProps
454
480
  };
455
- if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
456
- console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...defaultSplitStyleResult });
481
+ if (Object.keys(defaults).length) {
482
+ tamaguiDefaultProps = defaults;
483
+ }
484
+ if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
485
+ if (process.env.IS_STATIC !== "is_static") {
486
+ console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
487
+ staticConfig,
488
+ initialSplitStyles
489
+ });
490
+ }
457
491
  }
458
492
  });
459
493
  let res = component;
460
494
  if (configIn.memo) {
461
495
  res = memo(res);
462
496
  }
463
- res["whyDidYouRender"] = true;
464
497
  res["staticConfig"] = {
465
- validStyles: validStyleProps,
498
+ validStyles: staticConfig.validStyles || stylePropsView,
466
499
  ...staticConfig
467
500
  };
468
- res["extractable"] = (Component2, conf) => {
469
- Component2["staticConfig"] = extendStaticConfig(res, {
501
+ if (process.env.NODE_ENV === "development") {
502
+ res["whyDidYouRender"] = true;
503
+ }
504
+ res["extractable"] = (Component, conf) => {
505
+ Component["staticConfig"] = extendStaticConfig({
506
+ Component,
470
507
  ...conf,
471
508
  neverFlatten: true,
472
509
  defaultProps: {
473
- ...Component2.defaultProps,
510
+ ...Component.defaultProps,
474
511
  ...conf == null ? void 0 : conf.defaultProps
475
512
  }
476
- });
477
- return Component2;
513
+ }, res);
514
+ return Component;
478
515
  };
479
516
  return res;
480
517
  }
@@ -554,18 +591,20 @@ function spacedChildren({
554
591
  return next;
555
592
  }
556
593
  __name(spacedChildren, "spacedChildren");
557
- const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? <div style={{
558
- position: "absolute",
559
- top: 0,
560
- left: 0,
561
- right: 0,
562
- bottom: 0
563
- }}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>, "AbsoluteFill");
594
+ function AbsoluteFill(props) {
595
+ return isWeb ? <div style={{
596
+ position: "absolute",
597
+ top: 0,
598
+ left: 0,
599
+ right: 0,
600
+ bottom: 0
601
+ }}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>;
602
+ }
603
+ __name(AbsoluteFill, "AbsoluteFill");
564
604
  export {
565
605
  AbsoluteFill,
566
606
  Spacer,
567
607
  createComponent,
568
- defaultComponentState,
569
608
  mouseUps,
570
609
  spacedChildren
571
610
  };
@@ -12,6 +12,14 @@ function createTamagui(config) {
12
12
  if (createdConfigs.has(config)) {
13
13
  return config;
14
14
  }
15
+ if (process.env.NODE_ENV === "development") {
16
+ if (!config.tokens) {
17
+ throw new Error(`No tokens provided to Tamagui config`);
18
+ }
19
+ if (!config.themes) {
20
+ throw new Error(`No themes provided to Tamagui config`);
21
+ }
22
+ }
15
23
  if (getHasConfigured()) {
16
24
  console.warn("Called createTamagui twice! Should never do so");
17
25
  }
@@ -20,7 +28,7 @@ function createTamagui(config) {
20
28
  defaultActive: config.mediaQueryDefaultActive
21
29
  });
22
30
  const themeConfig = (() => {
23
- var _a, _b;
31
+ var _a, _b, _c;
24
32
  let cssRules = [];
25
33
  const varsByValue = /* @__PURE__ */ new Map();
26
34
  if (isWeb) {
@@ -67,13 +75,16 @@ function createTamagui(config) {
67
75
  }
68
76
  if (isWeb) {
69
77
  const isDarkOrLightBase = themeName === "dark" || themeName === "light";
70
- const isDark = themeName.includes("dark_");
78
+ const isDark = themeName.startsWith("dark");
71
79
  const selector = `${CNP}${themeName}`;
72
- const addDarkLightSels = hasDarkLight && !isDarkOrLightBase;
73
80
  const selectors = [selector];
74
- if (addDarkLightSels) {
81
+ if (hasDarkLight) {
75
82
  const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
76
- const [stronger, weaker] = isDark ? ["dark", "light"] : ["light", "dark"];
83
+ const order = isDark ? ["dark", "light"] : ["light", "dark"];
84
+ if (isDarkOrLightBase) {
85
+ order.reverse();
86
+ }
87
+ const [stronger, weaker] = order;
77
88
  const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
78
89
  new Array(max * 2).fill(void 0).forEach((_, pi) => {
79
90
  if (pi % 2 === 1)
@@ -84,25 +95,56 @@ function createTamagui(config) {
84
95
  selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
85
96
  });
86
97
  }
87
- const cssRule = `${selectors.join(", ")} {
88
- ${vars}
89
- }`;
90
- cssRules.push(cssRule);
98
+ const rootSep = config.themeClassNameOnRoot ? "" : " ";
99
+ cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
100
+ if ((_c = config.shouldAddPrefersColorThemes) != null ? _c : true) {
101
+ if (isDarkOrLightBase) {
102
+ cssRules.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
103
+ body { background:${theme.background}; color: ${theme.color} }
104
+ :root {${vars} }
105
+ }`);
106
+ }
107
+ }
91
108
  }
92
109
  }
93
110
  varsByValue.clear();
94
111
  Object.freeze(cssRules);
112
+ const css = cssRules.join("\n");
95
113
  return {
96
114
  cssRules,
97
- css: cssRules.join("\n")
115
+ css
98
116
  };
99
117
  })();
100
118
  const tokensParsed = parseTokens(config.tokens);
119
+ const fontsParsed = (() => {
120
+ if (!config.fonts) {
121
+ throw new Error(`No fonts defined!`);
122
+ }
123
+ const res = {};
124
+ for (const familyName in config.fonts) {
125
+ const family = config.fonts[familyName];
126
+ const parsed = {};
127
+ for (const attrKey in family) {
128
+ const attr = family[attrKey];
129
+ if (attrKey === "family") {
130
+ parsed[attrKey] = attr;
131
+ continue;
132
+ }
133
+ parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
134
+ acc[`$${cur}`] = attr[cur];
135
+ return acc;
136
+ }, {});
137
+ }
138
+ res[`$${familyName}`] = parsed;
139
+ }
140
+ return res;
141
+ })();
101
142
  const getCSS = /* @__PURE__ */ __name(() => {
102
143
  return `${themeConfig.css}
103
144
  ${getInsertedRules().join("\n")}`;
104
145
  }, "getCSS");
105
146
  const next = {
147
+ fonts: {},
106
148
  animations: {},
107
149
  shorthands: {},
108
150
  media: {},
@@ -112,6 +154,7 @@ ${getInsertedRules().join("\n")}`;
112
154
  defaultTheme: "light",
113
155
  ...config
114
156
  }),
157
+ fontsParsed,
115
158
  themeConfig,
116
159
  tokensParsed,
117
160
  parsed: true,
@@ -130,24 +173,6 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
130
173
  const res = {};
131
174
  for (const key in tokens) {
132
175
  res[key] = {};
133
- if (key === "font") {
134
- for (const family in tokens.font) {
135
- const obj = {};
136
- res.font[`$${family}`] = obj;
137
- for (const attrKey in tokens.font[family]) {
138
- const attr = tokens.font[family][attrKey];
139
- if (attrKey === "family") {
140
- obj[attrKey] = attr;
141
- continue;
142
- }
143
- obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
144
- acc[`$${cur}`] = attr[cur];
145
- return acc;
146
- }, {});
147
- }
148
- }
149
- continue;
150
- }
151
176
  for (const skey in tokens[key]) {
152
177
  res[key][`$${skey}`] = tokens[key][skey];
153
178
  }
@@ -6,17 +6,13 @@ function createTokens(tokens) {
6
6
  if (process.env.NODE_ENV === "development") {
7
7
  validateTokens(tokens);
8
8
  }
9
- return setupTokens(tokens);
10
- }
11
- __name(createTokens, "createTokens");
12
- function setupTokens(tokens) {
13
9
  return mapTokensToVariables(tokens);
14
10
  }
15
- __name(setupTokens, "setupTokens");
11
+ __name(createTokens, "createTokens");
16
12
  const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
17
13
  const res = {};
18
14
  for (const key in tokens) {
19
- const val = tokens[key];
15
+ let val = tokens[key];
20
16
  const name = parentPath ? `${parentPath}-${key}` : key;
21
17
  if (val && typeof val === "object") {
22
18
  res[key] = mapTokensToVariables(tokens[key], name);
@@ -22,12 +22,17 @@ function isVariable(v) {
22
22
  }
23
23
  __name(isVariable, "isVariable");
24
24
  function getVariableValue(v) {
25
- if (isVariable(v)) {
25
+ if (isVariable(v))
26
26
  return v.val;
27
- }
28
27
  return v;
29
28
  }
30
29
  __name(getVariableValue, "getVariableValue");
30
+ function getVariableName(v) {
31
+ if (isVariable(v))
32
+ return v.name;
33
+ return v;
34
+ }
35
+ __name(getVariableName, "getVariableName");
31
36
  const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
32
37
  const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
33
38
  return includeVar ? `var(--${name})` : name;
@@ -37,6 +42,7 @@ export {
37
42
  Variable,
38
43
  createCSSVariable,
39
44
  createVariable,
45
+ getVariableName,
40
46
  getVariableValue,
41
47
  isVariable
42
48
  };
File without changes
@@ -1,26 +1,24 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import { useInsertionEffect } from "react";
3
+ import { useInsertionEffect, useLayoutEffect } from "react";
4
4
  import { getStylesAtomic } from "./getStylesAtomic";
5
- import { insertStyleRule } from "./insertStyleRule";
5
+ import { insertStyleRule, updateInsertedCache } from "./insertStyleRule";
6
6
  let added = /* @__PURE__ */ new Set();
7
+ const effect = useInsertionEffect || useLayoutEffect;
7
8
  function useStylesAsClassname(styles, disable = false, debug = false) {
8
- if (!useInsertionEffect) {
9
- return addStylesUsingClassname(disable ? styles : [], debug);
10
- } else {
11
- const insertions = [];
12
- const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
13
- for (const rule of rules) {
14
- insertions.push({ identifier, rule });
15
- }
16
- });
17
- useInsertionEffect(() => {
18
- for (const { identifier, rule } of insertions) {
19
- insertStyleRule(identifier, rule);
20
- }
21
- });
22
- return className;
23
- }
9
+ const insertions = [];
10
+ const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
11
+ for (const rule of rules) {
12
+ insertions.push({ identifier, rule });
13
+ updateInsertedCache(identifier, rule);
14
+ }
15
+ });
16
+ effect(() => {
17
+ for (const { identifier, rule } of insertions) {
18
+ insertStyleRule(identifier, rule);
19
+ }
20
+ }, [className]);
21
+ return className;
24
22
  }
25
23
  __name(useStylesAsClassname, "useStylesAsClassname");
26
24
  function addStylesUsingClassname(styles, debug = false, onAdd) {
@@ -13,8 +13,6 @@ const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey
13
13
  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
14
14
  const mediaQuery = `${screenStr} and ${mediaSelector}`;
15
15
  const styleInner = rules[0].replace(identifier, nextIdentifier);
16
- if (styleInner.includes("2:r;"))
17
- debugger;
18
16
  let styleRule = "";
19
17
  if (styleInner.includes("@media")) {
20
18
  styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);