@tamagui/helpers 2.7.7 → 3.0.0-beta.643.1

package/src/validStyleProps.ts

@@ -5,6 +5,9 @@ import {
   webOnlyStylePropsText,
   webOnlyStylePropsView,
 } from './webOnlyStyleProps'
+import { tokenCategories } from './tokenCategories'
+
+export { tokenCategories } from './tokenCategories'
 
 // generally organizing this so we don't duplicate things so its a bit weird
 
@@ -40,64 +43,16 @@ const textColors = {
   textShadowColor: true,
 }
 
-// used for propMapping to find the right token category
-// just specificy the least costly, all else go to `space` (most keys - we can exclude)
-export const tokenCategories = {
-  radius: {
-    borderRadius: true,
-    borderTopLeftRadius: true,
-    borderTopRightRadius: true,
-    borderBottomLeftRadius: true,
-    borderBottomRightRadius: true,
-
-    // logical
-    borderStartStartRadius: true,
-    borderStartEndRadius: true,
-    borderEndStartRadius: true,
-    borderEndEndRadius: true,
-  },
-  size: {
-    width: true,
-    height: true,
-    minWidth: true,
-    minHeight: true,
-    maxWidth: true,
-    maxHeight: true,
-    blockSize: true,
-    minBlockSize: true,
-    maxBlockSize: true,
-    inlineSize: true,
-    minInlineSize: true,
-    maxInlineSize: true,
-  },
-  zIndex: {
-    zIndex: true,
-  },
-  color: {
-    backgroundColor: true,
-    borderColor: true,
-    borderBlockStartColor: true,
-    borderBlockEndColor: true,
-    borderBlockColor: true,
-    borderBottomColor: true,
-    borderInlineColor: true,
-    borderInlineStartColor: true,
-    borderInlineEndColor: true,
-    borderTopColor: true,
-    borderLeftColor: true,
-    borderRightColor: true,
-    borderEndColor: true,
-    borderStartColor: true,
-    shadowColor: true,
-    ...textColors,
-    // outlineColor is supported on RN 0.77+ (New Architecture)
-    outlineColor: true,
-    // caretColor is web-only
-    ...(process.env.TAMAGUI_TARGET === 'web' && {
-      caretColor: true,
-    }),
-  },
-}
+// tokenCategories.color is a VALUE-binding table (which props resolve color
+// tokens); three of its members are text-only PROPS, so the View host's
+// validity table must not inherit them — `color` on a View resolves on
+// neither platform (RN has no View color; a web div would only inherit it)
+const {
+  color: _textOnlyColor,
+  textDecorationColor: _textOnlyDecoration,
+  textShadowColor: _textOnlyShadow,
+  ...viewColorCategoryProps
+} = tokenCategories.color
 
 // discrete (non-animatable) view style properties - keyword-based, no interpolation
 // defined above stylePropsView so it can be spread in without duplication
@@ -125,7 +80,14 @@ const nonAnimatableViewProps = {
   mixBlendMode: true,
   outlineStyle: true,
   overflow: true,
+  // a style on both platforms: CSS pointer-events on web, style.pointerEvents
+  // on RN (>= 0.71) — the deprecated View prop spelling is
+  // not used, so flat clause values evaluate through the program engine
+  pointerEvents: true,
   position: true,
+  // visibility: native maps "hidden" -> opacity:0 + pointerEvents:none via expandStyle;
+  // on web passes through as CSS visibility (visible | hidden | collapse).
+  visibility: true,
 }
 
 // discrete (non-animatable) font properties
@@ -142,6 +104,9 @@ const nonAnimatableTextOnlyProps = {
   textDecorationLine: true,
   textDecorationStyle: true,
   userSelect: true,
+  // react native carries text direction as a style, and it inherits: the DOM
+  // `dir` attribute lowers to it (expandStyle maps it to `direction` on web)
+  writingDirection: true,
 }
 
 // discrete (non-animatable) unitless properties
@@ -221,8 +186,6 @@ export const stylePropsTransform = {
 
 export const stylePropsView = {
   ...nonAnimatableViewProps,
-  borderBottomEndRadius: true,
-  borderBottomStartRadius: true,
   borderBottomWidth: true,
   borderLeftWidth: true,
   borderRightWidth: true,
@@ -232,8 +195,6 @@ export const stylePropsView = {
   borderInlineWidth: true,
   borderInlineEndWidth: true,
   borderInlineStartWidth: true,
-  borderTopEndRadius: true,
-  borderTopStartRadius: true,
   borderTopWidth: true,
   borderWidth: true,
   transform: true,
@@ -266,6 +227,7 @@ export const stylePropsView = {
   paddingBottom: true,
   paddingInline: true,
   paddingBlock: true,
+  paddingBlockEnd: true,
   paddingBlockStart: true,
   paddingInlineEnd: true,
   paddingInlineStart: true,
@@ -287,8 +249,7 @@ export const stylePropsView = {
   insetInlineEnd: true,
   insetInlineStart: true,
   shadowOffset: true,
-  shadowRadius: true,
-  ...tokenCategories.color,
+  ...viewColorCategoryProps,
   ...tokenCategories.radius,
   ...tokenCategories.size,
   ...stylePropsTransform,
@@ -297,7 +258,15 @@ export const stylePropsView = {
 
   boxShadow: true,
   border: true,
+  // logical shorthands: the border family splits them into CSS logical
+  // longhands on web; native evaluation diagnoses and drops them (RN has no
+  // logical border properties)
+  borderBlock: true,
+  borderInline: true,
   filter: true,
+  // the v6 bg shorthand maps here; native lowers single color values to
+  // backgroundColor and drops url()/gradient/multi-part values it can't express
+  background: true,
   // RN 0.76+ supports linear-gradient via backgroundImage
   backgroundImage: true,
   // the actual RN 0.76+ prop name (backgroundImage expands to this on native)
@@ -327,6 +296,10 @@ export const stylePropsTextOnly = {
   textShadow: true,
   textShadowOffset: true,
   textShadowRadius: true,
+  // resetting composites: the family splits turn these into per-longhand
+  // programs, which RN supports individually
+  textDecoration: true,
+  font: true,
   verticalAlign: true,
 
   // web-only text props - tree-shaken on native
@@ -340,19 +313,4 @@ export const stylePropsText = {
 
 export const stylePropsAll = stylePropsText
 
-export const validPseudoKeys = {
-  enterStyle: true,
-  exitStyle: true,
-  hoverStyle: true,
-  pressStyle: true,
-  focusStyle: true,
-  disabledStyle: true,
-  focusWithinStyle: true,
-
-  // allow some web only ones
-  ...(process.env.TAMAGUI_TARGET === 'web' && {
-    focusVisibleStyle: true,
-  }),
-}
-
 export const validStyles = stylePropsView

package/src/webOnlyStyleProps.ts

@@ -16,6 +16,7 @@ export const nonAnimatableWebViewProps = {
   borderTopStyle: true,
   contain: true,
   containerType: true,
+  containerName: true,
   content: true,
   float: true,
   maskBorderMode: true,
@@ -31,8 +32,6 @@ export const nonAnimatableWebViewProps = {
   overflowInline: true,
   overflowX: true,
   overflowY: true,
-  // NOTE: pointerEvents is NOT web-only - it's a core React Native View prop (not a style)
-  pointerEvents: true,
   scrollbarWidth: true,
   textWrap: true,
   touchAction: true,
@@ -53,7 +52,6 @@ export const webOnlyStylePropsView = {
   transition: true,
   backdropFilter: true,
   WebkitBackdropFilter: true,
-  background: true,
   borderTop: true,
   borderRight: true,
   borderBottom: true,
@@ -75,6 +73,11 @@ export const webOnlyStylePropsView = {
   objectPosition: true,
   textEmphasis: true,
   userSelect: true,
+  // real style keys, not DOM attributes: without these an authored value falls
+  // through to viewProps and reaches the element as an unknown attribute
+  overflowWrap: true,
+  wordWrap: true,
+  resize: true,
 }
 
 export const webOnlyStylePropsText = {

package/types/composeEventHandlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composeEventHandlers.d.ts","sourceRoot":"","sources":["../src/composeEventHandlers.ts"],"names":[],"mappings":"AAAA,KAAK,MAAM,GAAG,MAAM,CAAA;AAEpB,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;AAE/D,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EACnD,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,EAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,EAC7B,EAAE,qBAA4B,EAAE;;CAAK,+BAoBtC"}
+{"version":3,"file":"composeEventHandlers.d.ts","sourceRoot":"","sources":["../src/composeEventHandlers.ts"],"names":[],"mappings":"AAAA,KAAK,MAAM,GAAG,MAAM,CAAA;AAEpB,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;AAE/D,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EACnD,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,EAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,EAC7B,EAAE,qBAA4B,EAAE;;CAAK,+BAgBtC"}

package/types/index.d.ts

@@ -1,8 +1,11 @@
 export * from '@tamagui/simple-hash';
 export * from './clamp';
+export * from './reservedThemeProps';
+export * from './themeClassNames';
 export * from './composeEventHandlers';
 export * from './types';
 export * from './shouldRenderNativePlatform';
+export * from './tokenCategories';
 export * from './validStyleProps';
 export * from './withStaticProperties';
 export * from './webOnlyStyleProps';

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA;AACvB,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA;AACvB,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA"}

package/types/reservedThemeProps.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The props `<Theme>` owns. Every other prop on it is read as a theme key, so
+ * these names can't be used as theme keys or config variables. development
+ * builds report a collision instead of silently dropping the value.
+ *
+ * It lives here, in a side-effect-free package, because the compiler classifies
+ * static `<Theme>` props with the same table the runtime uses. One table, so a
+ * new reserved prop can never mean one thing at build time and another at
+ * runtime.
+ */
+export declare const reservedThemeProps: Record<string, true>;
+//# sourceMappingURL=reservedThemeProps.d.ts.map

package/types/reservedThemeProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reservedThemeProps.d.ts","sourceRoot":"","sources":["../src/reservedThemeProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAkBnD,CAAA"}

package/types/themeClassNames.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The theme classes a `<Theme>` span carries for a resolved theme name.
+ *
+ * Every level of a compound name gets its own class so CSS variables inherit
+ * through the whole chain ("red_surface1" is `t_red t_red_surface1`). The zero
+ * compiler emits these directly, so this has to be the only implementation:
+ * a compiled span that spells its classes differently would resolve different
+ * variables than the runtime does for the same authored tree.
+ */
+export declare function getThemeClassNames(name: string, isRoot?: boolean): string;
+//# sourceMappingURL=themeClassNames.d.ts.map

package/types/themeClassNames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeClassNames.d.ts","sourceRoot":"","sources":["../src/themeClassNames.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,MAAM,CAgBvE"}

package/types/tokenCategories.d.ts

@@ -0,0 +1,58 @@
+export declare const tokenCategories: {
+    radius: {
+        borderRadius: boolean;
+        borderTopLeftRadius: boolean;
+        borderTopRightRadius: boolean;
+        borderBottomLeftRadius: boolean;
+        borderBottomRightRadius: boolean;
+        borderTopStartRadius: boolean;
+        borderTopEndRadius: boolean;
+        borderBottomStartRadius: boolean;
+        borderBottomEndRadius: boolean;
+        borderStartStartRadius: boolean;
+        borderStartEndRadius: boolean;
+        borderEndStartRadius: boolean;
+        borderEndEndRadius: boolean;
+    };
+    size: {
+        width: boolean;
+        height: boolean;
+        minWidth: boolean;
+        minHeight: boolean;
+        maxWidth: boolean;
+        maxHeight: boolean;
+        blockSize: boolean;
+        minBlockSize: boolean;
+        maxBlockSize: boolean;
+        inlineSize: boolean;
+        minInlineSize: boolean;
+        maxInlineSize: boolean;
+        shadowRadius: boolean;
+    };
+    zIndex: {
+        zIndex: boolean;
+    };
+    color: {
+        backgroundColor: boolean;
+        borderColor: boolean;
+        borderBlockStartColor: boolean;
+        borderBlockEndColor: boolean;
+        borderBlockColor: boolean;
+        borderBottomColor: boolean;
+        borderInlineColor: boolean;
+        borderInlineStartColor: boolean;
+        borderInlineEndColor: boolean;
+        borderTopColor: boolean;
+        borderLeftColor: boolean;
+        borderRightColor: boolean;
+        borderEndColor: boolean;
+        borderStartColor: boolean;
+        shadowColor: boolean;
+        color: boolean;
+        textDecorationColor: boolean;
+        textShadowColor: boolean;
+        outlineColor: boolean;
+        caretColor?: boolean | undefined;
+    };
+};
+//# sourceMappingURL=tokenCategories.d.ts.map

package/types/tokenCategories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenCategories.d.ts","sourceRoot":"","sources":["../src/tokenCategories.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;QAExB,YAAY;QACZ,mBAAmB;QACnB,oBAAoB;QACpB,sBAAsB;QACtB,uBAAuB;QACvB,oBAAoB;QACpB,kBAAkB;QAClB,uBAAuB;QACvB,qBAAqB;QAGrB,sBAAsB;QACtB,oBAAoB;QACpB,oBAAoB;QACpB,kBAAkB;;;QAGlB,KAAK;QACL,MAAM;QACN,QAAQ;QACR,SAAS;QACT,QAAQ;QACR,SAAS;QACT,SAAS;QACT,YAAY;QACZ,YAAY;QACZ,UAAU;QACV,aAAa;QACb,aAAa;QACb,YAAY;;;QAGZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CA4BT,CAAA"}