@tamagui/web 2.0.0-1768530912818 → 2.0.0-1768586279389

package/src/helpers/propMapper.ts

@@ -20,16 +20,70 @@ import { pseudoDescriptors } from './pseudoDescriptors'
 import { isRemValue, resolveRem } from './resolveRem'
 import { skipProps } from './skipProps'
 
-// CSS shorthand props that can contain embedded $variables in string values
-const shorthandStringProps: Record<string, 1> = {
-  boxShadow: 1,
-  border: 1,
-  borderTop: 1,
-  borderRight: 1,
-  borderBottom: 1,
-  borderLeft: 1,
-  background: 1,
-}
+// Web-only: convert boxShadow object/array to CSS string
+const normLen = (v: any) => (typeof v === 'number' ? v + 'px' : String(v))
+
+const boxShadowObjToStr = (
+  value: any,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): string =>
+  (Array.isArray(value) ? value : [value])
+    .map((s) => {
+      const tok = (v: any, cat: string) =>
+        typeof v === 'string' && v[0] === '$'
+          ? (getTokenForKey(cat, v, styleProps, styleState) ?? v)
+          : v
+      const x = normLen(tok(s.offsetX, 'size'))
+      const y = normLen(tok(s.offsetY, 'size'))
+      const blur = s.blurRadius != null ? ' ' + normLen(tok(s.blurRadius, 'size')) : ''
+      const spread =
+        s.spreadDistance != null
+          ? (blur ? '' : ' 0') + ' ' + normLen(tok(s.spreadDistance, 'size'))
+          : ''
+      const color = s.color != null ? ' ' + tok(s.color, 'color') : ''
+      return (s.inset ? 'inset ' : '') + x + ' ' + y + blur + spread + color
+    })
+    .join(', ')
+
+// Web-only: convert filter object/array to CSS string
+const simpleFilters = [
+  'brightness',
+  'opacity',
+  'contrast',
+  'grayscale',
+  'invert',
+  'saturate',
+  'sepia',
+]
+
+const filterObjToStr = (
+  value: any,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): string =>
+  (Array.isArray(value) ? value : [value])
+    .map((f) => {
+      const tok = (v: any, cat: string) =>
+        typeof v === 'string' && v[0] === '$'
+          ? (getTokenForKey(cat, v, styleProps, styleState) ?? v)
+          : v
+      for (const fn of simpleFilters) if (fn in f) return `${fn}(${f[fn]})`
+      if ('blur' in f) return `blur(${normLen(tok(f.blur, 'size'))})`
+      if ('hueRotate' in f) return `hue-rotate(${f.hueRotate})`
+      if ('dropShadow' in f) {
+        const ds = f.dropShadow
+        const x = normLen(tok(ds.offsetX, 'size'))
+        const y = normLen(tok(ds.offsetY, 'size'))
+        const blur =
+          ds.blurRadius != null ? ` ${normLen(tok(ds.blurRadius, 'size'))}` : ''
+        const color = ds.color != null ? ` ${tok(ds.color, 'color')}` : ''
+        return `drop-shadow(${x} ${y}${blur}${color})`
+      }
+      return ''
+    })
+    .filter(Boolean)
+    .join(' ')
 
 export const propMapper: PropMapper = (key, value, styleState, disabled, map) => {
   if (disabled) {
@@ -78,17 +132,28 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
   const originalValue = value
 
   if (value != null) {
-    if (value[0] === '$') {
+    // boxShadow object/array -> string
+    if (key === 'boxShadow' && typeof value === 'object') {
+      value = boxShadowObjToStr(value, styleProps, styleState)
+    } else if (key === 'filter' && typeof value === 'object') {
+      // filter object/array -> string
+      value = filterObjToStr(value, styleProps, styleState)
+    } else if (typeof value === 'string' && value[0] === '$') {
       value = getTokenForKey(key, value, styleProps, styleState)
-    } else if (
-      // Handle CSS shorthand strings with embedded $variables (e.g., boxShadow="0 0 10px $red")
-      key in shorthandStringProps &&
-      typeof value === 'string' &&
-      value.includes('$')
-    ) {
-      value = value.replace(/\$[\w.-]+/g, (token) => {
-        const resolved = getTokenForKey('color', token, styleProps, styleState)
-        return resolved != null ? String(resolved) : token
+    } else if (key === 'boxShadow' && typeof value === 'string' && value.includes('$')) {
+      // boxShadow with embedded $tokens - resolve each token
+      value = value.replace(/(\$[\w.-]+)/g, (t) => {
+        // $5, $-2 etc -> size token, otherwise -> color
+        const cat = /^\$-?\d/.test(t) ? 'size' : 'color'
+        const r = getTokenForKey(cat, t, styleProps, styleState)
+        return r != null ? String(r) : t
+      })
+    } else if (key === 'filter' && typeof value === 'string' && value.includes('$')) {
+      // filter with embedded $tokens - resolve each token
+      value = value.replace(/(\$[\w.-]+)/g, (t) => {
+        const cat = /^\$-?\d/.test(t) ? 'size' : 'color'
+        const r = getTokenForKey(cat, t, styleProps, styleState)
+        return r != null ? String(r) : t
       })
     } else if (isVariable(value)) {
       value = resolveVariableValue(key, value, styleProps.resolveValues)

package/src/types.tsx

@@ -1756,29 +1756,92 @@ export interface TransformStyleProps {
   rotateZ?: `${number}deg` | UnionableString
 }
 
+// Box Shadow types (New Architecture)
+export interface BoxShadowObject {
+  offsetX: SpaceTokens | number | (string & {})
+  offsetY: SpaceTokens | number | (string & {})
+  blurRadius?: SpaceTokens | number | (string & {})
+  spreadDistance?: SpaceTokens | number | (string & {})
+  color?: ColorStyleProp | (string & {})
+  inset?: boolean
+}
+
+export type BoxShadowValue = BoxShadowObject | BoxShadowObject[] | (string & {})
+
+// Filter types (New Architecture)
+export interface FilterBrightness {
+  brightness: number | `${number}%`
+}
+export interface FilterOpacity {
+  opacity: number | `${number}%`
+}
+export interface FilterBlur {
+  blur: SpaceTokens | number | string
+}
+export interface FilterContrast {
+  contrast: number | `${number}%`
+}
+export interface FilterGrayscale {
+  grayscale: number | `${number}%`
+}
+export interface FilterHueRotate {
+  hueRotate: `${number}deg` | `${number}rad`
+}
+export interface FilterInvert {
+  invert: number | `${number}%`
+}
+export interface FilterSaturate {
+  saturate: number | `${number}%`
+}
+export interface FilterSepia {
+  sepia: number | `${number}%`
+}
+export interface FilterDropShadow {
+  dropShadow: {
+    offsetX: SpaceTokens | number | (string & {})
+    offsetY: SpaceTokens | number | (string & {})
+    blurRadius?: SpaceTokens | number | (string & {})
+    color?: ColorStyleProp | (string & {})
+  }
+}
+
+export type FilterFunction =
+  | FilterBrightness
+  | FilterOpacity
+  | FilterBlur
+  | FilterContrast
+  | FilterGrayscale
+  | FilterHueRotate
+  | FilterInvert
+  | FilterSaturate
+  | FilterSepia
+  | FilterDropShadow
+
+export type FilterValue = FilterFunction | FilterFunction[] | (string & {})
+
 interface ExtraStyleProps {
   /**
    * Web-only style property. Will be omitted on native.
    */
   contain?: Properties['contain']
   /**
-   * Web-only style property. Will be omitted on native.
+   * Cursor style. Supported on web, and iOS 17+ (trackpad/stylus/gaze).
    */
   cursor?: Properties['cursor']
   /**
-   * Web-only style property. Will be omitted on native.
+   * Outline color. Supported on web and native.
    */
-  outlineColor?: Properties['outlineColor']
+  outlineColor?: ColorStyleProp
   /**
-   * Web-only style property. Will be omitted on native.
+   * Outline offset. Supported on web and native.
    */
   outlineOffset?: SpaceValue
   /**
-   * Web-only style property. Will be omitted on native.
+   * Outline style. Supported on web and native.
    */
-  outlineStyle?: Properties['outlineStyle']
+  outlineStyle?: 'solid' | 'dotted' | 'dashed' | (string & {})
   /**
-   * Web-only style property. Will be omitted on native.
+   * Outline width. Supported on web and native.
    */
   outlineWidth?: SpaceValue
   /**
@@ -1813,10 +1876,12 @@ interface ExtraStyleProps {
    * Web-only style property. Will be omitted on native.
    */
   backgroundSize?: Properties['backgroundSize']
+  // boxSizing - provided by RN's ViewStyle
   /**
-   * Web-only style property. Will be omitted on native.
+   * CSS box-shadow. Supports tokens: "$2 $4 $8 $shadowColor"
+   * Also accepts object/array format. Supported on web and native.
    */
-  boxSizing?: Properties['boxSizing']
+  boxShadow?: BoxShadowValue
   /**
    * Web-only style property. Will be omitted on native.
    */
@@ -1842,13 +1907,12 @@ interface ExtraStyleProps {
     | `${TwoValueTransformOrigin} ${Px}`
 
   /**
-   * Web-only style property. Will be omitted on native.
-   */
-  filter?: Properties['filter']
-  /**
-   * Web-only style property. Will be omitted on native.
+   * Graphical filter effects. Supported on web and native.
+   * Cross-platform: brightness, opacity. Android 12+: blur, contrast, dropShadow, etc.
    */
-  mixBlendMode?: Properties['mixBlendMode']
+  filter?: FilterValue
+  // mixBlendMode - provided by RN's ViewStyle
+  // isolation - provided by RN's ViewStyle
   /**
    * Web-only style property. Will be omitted on native.
    */

package/types/helpers/expandStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyle.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAQ/C,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,eAAe,CAmDpE"}
+{"version":3,"file":"expandStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyle.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAQ/C,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,eAAe,CA2CpE"}

package/types/helpers/expandStyle.native.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+import type { PropMappedValue } from '../types';
+export declare function expandStyle(key: string, value: any): PropMappedValue;
+//# sourceMappingURL=expandStyle.native.d.ts.map

package/types/helpers/expandStyle.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandStyle.native.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyle.native.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AA8C/C,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,eAAe,CAwCpE"}

package/types/helpers/propMapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EAEV,eAAe,EAEf,qBAAqB,EAGtB,MAAM,UAAU,CAAA;AAoBjB,eAAO,MAAM,UAAU,EAAE,UAmFxB,CAAA;AAoGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAqKD,eAAO,MAAM,cAAc,GACzB,KAAK,MAAM,EACX,OAAO,MAAM,EACb,YAAY,eAAe,EAC3B,YAAY,OAAO,CAAC,aAAa,CAAC,QAsInC,CAAA"}
+{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EAEV,eAAe,EAEf,qBAAqB,EAGtB,MAAM,UAAU,CAAA;AA0EjB,eAAO,MAAM,UAAU,EAAE,UA8FxB,CAAA;AAoGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAqKD,eAAO,MAAM,cAAc,GACzB,KAAK,MAAM,EACX,OAAO,MAAM,EACb,YAAY,eAAe,EAC3B,YAAY,OAAO,CAAC,aAAa,CAAC,QAsInC,CAAA"}

package/types/helpers/propMapper.native.d.ts

@@ -0,0 +1,5 @@
+import type { GetStyleState, PropMapper, SplitStyleProps, TamaguiInternalConfig } from '../types';
+export declare const propMapper: PropMapper;
+export declare function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInternalConfig): string | undefined;
+export declare const getTokenForKey: (key: string, value: string, styleProps: SplitStyleProps, styleState: Partial<GetStyleState>) => any;
+//# sourceMappingURL=propMapper.native.d.ts.map

package/types/helpers/propMapper.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"propMapper.native.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.native.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EAEV,eAAe,EAEf,qBAAqB,EAGtB,MAAM,UAAU,CAAA;AA6DjB,eAAO,MAAM,UAAU,EAAE,UA8FxB,CAAA;AAoGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAqKD,eAAO,MAAM,cAAc,GACzB,KAAK,MAAM,EACX,OAAO,MAAM,EACb,YAAY,eAAe,EAC3B,YAAY,OAAO,CAAC,aAAa,CAAC,QAsInC,CAAA"}

package/types/helpers/webPropsToSkip.native.d.ts

@@ -68,7 +68,6 @@ export declare const webPropsToSkip: {
     borderLeftStyle: boolean;
     borderRightStyle: boolean;
     borderTopStyle: boolean;
-    boxSizing: boolean;
     caretColor: boolean;
     clipPath: boolean;
     contain: boolean;
@@ -92,13 +91,8 @@ export declare const webPropsToSkip: {
     maskRepeat: boolean;
     maskSize: boolean;
     maskType: boolean;
-    mixBlendMode: boolean;
     objectFit: boolean;
     objectPosition: boolean;
-    outlineOffset: boolean;
-    outlineStyle: boolean;
-    outlineWidth: boolean;
-    outlineColor: boolean;
     overflowBlock: boolean;
     overflowInline: boolean;
     overflowX: boolean;

package/types/helpers/webPropsToSkip.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webPropsToSkip.native.d.ts","sourceRoot":"","sources":["../../src/helpers/webPropsToSkip.native.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4C1B,CAAA"}
+{"version":3,"file":"webPropsToSkip.native.d.ts","sourceRoot":"","sources":["../../src/helpers/webPropsToSkip.native.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4C1B,CAAA"}

package/types/types.d.ts

@@ -955,29 +955,75 @@ export interface TransformStyleProps {
     rotateX?: `${number}deg` | UnionableString;
     rotateZ?: `${number}deg` | UnionableString;
 }
+export interface BoxShadowObject {
+    offsetX: SpaceTokens | number | (string & {});
+    offsetY: SpaceTokens | number | (string & {});
+    blurRadius?: SpaceTokens | number | (string & {});
+    spreadDistance?: SpaceTokens | number | (string & {});
+    color?: ColorStyleProp | (string & {});
+    inset?: boolean;
+}
+export type BoxShadowValue = BoxShadowObject | BoxShadowObject[] | (string & {});
+export interface FilterBrightness {
+    brightness: number | `${number}%`;
+}
+export interface FilterOpacity {
+    opacity: number | `${number}%`;
+}
+export interface FilterBlur {
+    blur: SpaceTokens | number | string;
+}
+export interface FilterContrast {
+    contrast: number | `${number}%`;
+}
+export interface FilterGrayscale {
+    grayscale: number | `${number}%`;
+}
+export interface FilterHueRotate {
+    hueRotate: `${number}deg` | `${number}rad`;
+}
+export interface FilterInvert {
+    invert: number | `${number}%`;
+}
+export interface FilterSaturate {
+    saturate: number | `${number}%`;
+}
+export interface FilterSepia {
+    sepia: number | `${number}%`;
+}
+export interface FilterDropShadow {
+    dropShadow: {
+        offsetX: SpaceTokens | number | (string & {});
+        offsetY: SpaceTokens | number | (string & {});
+        blurRadius?: SpaceTokens | number | (string & {});
+        color?: ColorStyleProp | (string & {});
+    };
+}
+export type FilterFunction = FilterBrightness | FilterOpacity | FilterBlur | FilterContrast | FilterGrayscale | FilterHueRotate | FilterInvert | FilterSaturate | FilterSepia | FilterDropShadow;
+export type FilterValue = FilterFunction | FilterFunction[] | (string & {});
 interface ExtraStyleProps {
     /**
      * Web-only style property. Will be omitted on native.
      */
     contain?: Properties['contain'];
     /**
-     * Web-only style property. Will be omitted on native.
+     * Cursor style. Supported on web, and iOS 17+ (trackpad/stylus/gaze).
      */
     cursor?: Properties['cursor'];
     /**
-     * Web-only style property. Will be omitted on native.
+     * Outline color. Supported on web and native.
      */
-    outlineColor?: Properties['outlineColor'];
+    outlineColor?: ColorStyleProp;
     /**
-     * Web-only style property. Will be omitted on native.
+     * Outline offset. Supported on web and native.
      */
     outlineOffset?: SpaceValue;
     /**
-     * Web-only style property. Will be omitted on native.
+     * Outline style. Supported on web and native.
      */
-    outlineStyle?: Properties['outlineStyle'];
+    outlineStyle?: 'solid' | 'dotted' | 'dashed' | (string & {});
     /**
-     * Web-only style property. Will be omitted on native.
+     * Outline width. Supported on web and native.
      */
     outlineWidth?: SpaceValue;
     /**
@@ -1013,9 +1059,10 @@ interface ExtraStyleProps {
      */
     backgroundSize?: Properties['backgroundSize'];
     /**
-     * Web-only style property. Will be omitted on native.
+     * CSS box-shadow. Supports tokens: "$2 $4 $8 $shadowColor"
+     * Also accepts object/array format. Supported on web and native.
      */
-    boxSizing?: Properties['boxSizing'];
+    boxShadow?: BoxShadowValue;
     /**
      * Web-only style property. Will be omitted on native.
      */
@@ -1030,13 +1077,10 @@ interface ExtraStyleProps {
      */
     transformOrigin?: PxOrPct | 'left' | 'center' | 'right' | 'top' | 'bottom' | TwoValueTransformOrigin | `${TwoValueTransformOrigin} ${Px}`;
     /**
-     * Web-only style property. Will be omitted on native.
-     */
-    filter?: Properties['filter'];
-    /**
-     * Web-only style property. Will be omitted on native.
+     * Graphical filter effects. Supported on web and native.
+     * Cross-platform: brightness, opacity. Android 12+: blur, contrast, dropShadow, etc.
      */
-    mixBlendMode?: Properties['mixBlendMode'];
+    filter?: FilterValue;
     /**
      * Web-only style property. Will be omitted on native.
      */