react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.30

package/src/specs/NavigtionBar/index.ts

@@ -3,6 +3,11 @@ import type { UnistylesNavigationBar as UnistylesNavigationBarSpec } from './Uni
 import type { Color } from '../types'
 
 interface PrivateUnistylesNavigationBar extends Omit<UnistylesNavigationBarSpec, 'setBackgroundColor'> {
+    /**
+     * Apps targeting Android SDK 35
+     * This API is deprecated but continues to affect 3-button navigation
+     * @deprecated
+     */
     setBackgroundColor(color?: string): void,
     _setBackgroundColor(color?: Color): void
 }
@@ -12,7 +17,7 @@ export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBa
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/ShadowRegistry/ShadowRegistry.nitro.js

@@ -0,0 +1 @@
+export {};

package/src/specs/ShadowRegistry/index.js

@@ -0,0 +1,26 @@
+import { NitroModules } from 'react-native-nitro-modules';
+const HybridShadowRegistry = NitroModules.createHybridObject('UnistylesShadowRegistry');
+const findShadowNodeForHandle = (handle) => {
+    const node = handle?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node;
+    if (!node) {
+        // todo extend log with file name / component name
+        throw new Error('Could not find shadow node for one of your components');
+    }
+    return node;
+};
+HybridShadowRegistry.add = (handle, style, variants, args) => {
+    // virtualized nodes can be null
+    if (!handle || !style) {
+        return;
+    }
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? []);
+};
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
+        return;
+    }
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle));
+};
+export const UnistylesShadowRegistry = HybridShadowRegistry;

package/src/specs/ShadowRegistry/index.ts

@@ -4,11 +4,11 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     remove(handle?: ViewHandle, style?: Unistyle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
+    unlink(node: ShadowNode): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -26,20 +26,21 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, style, variants, args) => {
+    // virtualized nodes can be null
+    if (!handle || !style) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
 }
 
-HybridShadowRegistry.remove = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
 }
 
 type PrivateMethods =

package/src/specs/ShadowRegistry/types.js

@@ -0,0 +1 @@
+export {};

package/src/specs/StatusBar/UnistylesStatusBar.nitro.js

@@ -0,0 +1 @@
+export {};

package/src/specs/StatusBar/index.js

@@ -0,0 +1,25 @@
+import { processColor, StatusBar as NativeStatusBar } from 'react-native';
+import { StatusBarStyle } from '../types';
+export const attachStatusBarJSMethods = (hybridObject) => {
+    hybridObject.setStyle = (style, animated) => {
+        switch (style) {
+            case StatusBarStyle.Light:
+                return NativeStatusBar.setBarStyle('light-content', animated);
+            case StatusBarStyle.Dark:
+                return NativeStatusBar.setBarStyle('dark-content', animated);
+            case StatusBarStyle.Default:
+                return NativeStatusBar.setBarStyle('default', animated);
+        }
+    };
+    const privateHybrid = hybridObject;
+    privateHybrid._setHidden = hybridObject.setHidden;
+    hybridObject.setHidden = (isHidden, animation) => {
+        NativeStatusBar.setHidden(isHidden, animation);
+        privateHybrid._setHidden(isHidden);
+    };
+    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor;
+    hybridObject.setBackgroundColor = (color) => {
+        const parsedColor = processColor(color) ?? 0;
+        privateHybrid._setBackgroundColor(parsedColor);
+    };
+};

package/src/specs/StatusBar/index.ts

@@ -8,6 +8,11 @@ interface PrivateUnistylesStatusBar extends Omit<UnistylesStatusBarSpec, 'setBac
     setStyle(style: StatusBarStyle, animated?: boolean): void,
     setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
     _setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
+    /**
+     * Apps targeting Android SDK 35
+     * This API is deprecated as status bar background color is always transparent
+     * @deprecated
+     */
     setBackgroundColor(color?: string): void,
     _setBackgroundColor(color?: Color): void
 }
@@ -34,7 +39,7 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.js

@@ -0,0 +1 @@
+import { UnistyleDependency } from '../NativePlatform';

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.ts

@@ -1,6 +1,9 @@
 import type { HybridObject } from 'react-native-nitro-modules'
+import { UnistyleDependency } from '../NativePlatform'
 
 export interface UnistylesStyleSheet extends HybridObject<{ ios: 'c++', android: 'c++' }> {
     readonly hairlineWidth: number
-    readonly __unid: number
+    readonly unid: number
+
+    addChangeListener(onChanged: (dependencies: Array<UnistyleDependency>) => void): () => void
 }

package/src/specs/StyleSheet/index.js

@@ -0,0 +1,13 @@
+import { NitroModules } from 'react-native-nitro-modules';
+import { processColor, StyleSheet as NativeStyleSheet } from 'react-native';
+const HybridUnistylesStyleSheet = NitroModules
+    .createHybridObject('UnistylesStyleSheet');
+HybridUnistylesStyleSheet.absoluteFillObject = NativeStyleSheet.absoluteFillObject;
+HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill;
+HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten;
+HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose;
+HybridUnistylesStyleSheet.jsMethods = {
+    processColor
+};
+HybridUnistylesStyleSheet.init();
+export const StyleSheet = HybridUnistylesStyleSheet;

package/src/specs/StyleSheet/index.ts

@@ -23,6 +23,7 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
     flatten: typeof NativeStyleSheetType.flatten,
 
     // overridden methods
+    init(): void,
     create: CreateUnistylesStyleSheet,
     configure(config: UnistylesConfig): void,
     jsMethods: {
@@ -41,4 +42,8 @@ HybridUnistylesStyleSheet.jsMethods = {
     processColor
 }
 
-export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, 'jsMethods'>
+HybridUnistylesStyleSheet.init()
+
+type PrivateMethods = 'jsMethods' | 'addChangeListener' | 'init'
+
+export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, PrivateMethods>

package/src/specs/TurboUnistyles/NativeTurboUnistyles.js

@@ -0,0 +1,2 @@
+import { TurboModuleRegistry } from 'react-native';
+TurboModuleRegistry.get('Unistyles');

package/src/specs/TurboUnistyles/index.js

@@ -0,0 +1 @@
+import './NativeTurboUnistyles';

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.js

@@ -0,0 +1 @@
+export {};

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -10,7 +10,6 @@ type Orientation = 'portrait' | 'landscape'
 export interface UnistylesCxxMiniRuntime extends UnistylesNativeMiniRuntime {
     readonly themeName?: string,
     readonly breakpoint?: string,
-    readonly orientation: Orientation,
     readonly hasAdaptiveThemes: boolean,
 }
 

package/src/specs/UnistylesRuntime/index.js

@@ -0,0 +1,20 @@
+import { processColor } from 'react-native';
+import { NitroModules } from 'react-native-nitro-modules';
+import { attachStatusBarJSMethods } from '../StatusBar';
+import { attachNavigationBarJSMethods } from '../NavigtionBar';
+import { isIOS } from '../../common';
+const HybridUnistylesRuntime = NitroModules
+    .createHybridObject('UnistylesRuntime');
+HybridUnistylesRuntime.statusBar = HybridUnistylesRuntime.createHybridStatusBar();
+HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNavigationBar();
+HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor;
+HybridUnistylesRuntime.setRootViewBackgroundColor = (color) => {
+    const parsedColor = processColor(color) ?? 0;
+    HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor);
+};
+if (isIOS) {
+    HybridUnistylesRuntime.setImmersiveMode = (isEnabled) => HybridUnistylesRuntime.statusBar.setHidden(isEnabled, 'fade');
+}
+attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar);
+attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar);
+export const Runtime = HybridUnistylesRuntime;

package/src/specs/UnistylesRuntime/index.ts

@@ -4,8 +4,9 @@ import type { UnistylesRuntime as UnistylesRuntimeSpec, UnistylesMiniRuntime } f
 import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
 import { attachStatusBarJSMethods, type UnistylesStatusBar } from '../StatusBar'
 import { attachNavigationBarJSMethods, type UnistylesNavigationBar } from '../NavigtionBar'
-import type { AndroidContentSizeCategory, IOSContentSizeCategory } from '../../types'
+import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
 import { isIOS } from '../../common'
+import type { UnistylesThemes } from '../../global'
 
 export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'setRootViewBackgroundColor'> {
     readonly colorScheme: ColorScheme,
@@ -18,6 +19,7 @@ export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'set
     statusBar: UnistylesStatusBar,
     navigationBar: UnistylesNavigationBar,
 
+    getTheme(themeName?: keyof UnistylesThemes): UnistylesTheme,
     setTheme(themeName: AppThemeName): void
     updateTheme(themeName: AppThemeName, updater: (currentTheme: AppTheme) => AppTheme): void,
     setRootViewBackgroundColor(color?: string): void,
@@ -45,7 +47,7 @@ HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNaviga
 HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
 
 HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
-    const parsedColor = processColor(color)
+    const parsedColor = processColor(color) ?? 0
 
     HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor as number)
 }

package/src/specs/index.js

@@ -0,0 +1,8 @@
+import './TurboUnistyles';
+import { Runtime } from './UnistylesRuntime';
+import { StyleSheet } from './StyleSheet';
+import { UnistylesShadowRegistry } from './ShadowRegistry';
+import { StatusBarStyle, ColorScheme, Orientation } from './types';
+import { UnistyleDependency } from './NativePlatform';
+export { StatusBarStyle, ColorScheme, Orientation, UnistyleDependency };
+export { UnistylesShadowRegistry, Runtime as UnistylesRuntime, StyleSheet, };

package/src/specs/index.ts

@@ -2,14 +2,17 @@ import './TurboUnistyles'
 
 import { Runtime } from './UnistylesRuntime'
 import { StyleSheet } from './StyleSheet'
+import type { UnistylesStyleSheet } from './StyleSheet'
 import { UnistylesShadowRegistry } from './ShadowRegistry'
 import type { UnistylesMiniRuntime } from './UnistylesRuntime'
 import { StatusBarStyle, ColorScheme, Orientation } from './types'
+import { UnistyleDependency } from './NativePlatform'
 
 export {
     StatusBarStyle,
     ColorScheme,
-    Orientation
+    Orientation,
+    UnistyleDependency
 }
 
 export {
@@ -19,5 +22,6 @@ export {
 }
 
 export type {
-    UnistylesMiniRuntime
+    UnistylesMiniRuntime,
+    UnistylesStyleSheet
 }

package/src/specs/index.web.js

@@ -0,0 +1,2 @@
+export const getSSRUnistyles = () => [];
+export * from '../web';

package/src/specs/index.web.ts

@@ -2,4 +2,4 @@ import type { ReactElement } from 'react'
 
 export const getSSRUnistyles = () => [] as Array<ReactElement>
 
-export * from '../../web'
+export * from '../web'

package/src/specs/types.js

@@ -0,0 +1,17 @@
+export var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Light"] = "light";
+    ColorScheme["Dark"] = "dark";
+    ColorScheme["Unspecified"] = "unspecified";
+})(ColorScheme || (ColorScheme = {}));
+export var Orientation;
+(function (Orientation) {
+    Orientation["Portrait"] = "portrait";
+    Orientation["Landscape"] = "landscape";
+})(Orientation || (Orientation = {}));
+export var StatusBarStyle;
+(function (StatusBarStyle) {
+    StatusBarStyle["Default"] = "default";
+    StatusBarStyle["Light"] = "light";
+    StatusBarStyle["Dark"] = "dark";
+})(StatusBarStyle || (StatusBarStyle = {}));

package/src/types/accessibility.js

@@ -0,0 +1,30 @@
+export var IOSContentSizeCategory;
+(function (IOSContentSizeCategory) {
+    IOSContentSizeCategory["AccessibilityExtraExtraExtraLarge"] = "accessibilityExtraExtraExtraLarge";
+    IOSContentSizeCategory["AccessibilityExtraExtraLarge"] = "accessibilityExtraExtraLarge";
+    IOSContentSizeCategory["AccessibilityExtraLarge"] = "accessibilityExtraLarge";
+    IOSContentSizeCategory["AccessibilityLarge"] = "accessibilityLarge";
+    IOSContentSizeCategory["AccessibilityMedium"] = "accessibilityMedium";
+    IOSContentSizeCategory["ExtraExtraExtraLarge"] = "xxxLarge";
+    IOSContentSizeCategory["ExtraExtraLarge"] = "xxLarge";
+    IOSContentSizeCategory["ExtraLarge"] = "xLarge";
+    IOSContentSizeCategory["Large"] = "Large";
+    IOSContentSizeCategory["Medium"] = "Medium";
+    IOSContentSizeCategory["Small"] = "Small";
+    IOSContentSizeCategory["ExtraSmall"] = "xSmall";
+    IOSContentSizeCategory["Unspecified"] = "unspecified";
+})(IOSContentSizeCategory || (IOSContentSizeCategory = {}));
+export var AndroidContentSizeCategory;
+(function (AndroidContentSizeCategory) {
+    AndroidContentSizeCategory["Small"] = "Small";
+    AndroidContentSizeCategory["Default"] = "Default";
+    AndroidContentSizeCategory["Large"] = "Large";
+    AndroidContentSizeCategory["ExtraLarge"] = "ExtraLarge";
+    AndroidContentSizeCategory["Huge"] = "Huge";
+    AndroidContentSizeCategory["ExtraHuge"] = "ExtraHuge";
+    AndroidContentSizeCategory["ExtraExtraHuge"] = "ExtraExtraHuge";
+})(AndroidContentSizeCategory || (AndroidContentSizeCategory = {}));
+export var WebContentSizeCategory;
+(function (WebContentSizeCategory) {
+    WebContentSizeCategory["Unspecified"] = "web-unspecified";
+})(WebContentSizeCategory || (WebContentSizeCategory = {}));

package/src/types/breakpoints.js

@@ -0,0 +1 @@
+export {};

package/src/types/breakpoints.ts

@@ -17,45 +17,57 @@ type ExtractBreakpoints<T> = T extends object
             }
     : T
 
-type ParseNestedObject<T> = T extends (...args: infer A) => infer R
-    ? (...args: A) => ParseNestedObject<R>
+type ParseNestedObject<T, ShouldFlatten> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R, false>
     : T extends object
         ? T extends { variants: infer R, compoundVariants: infer C }
-            ? ParseVariants<FlattenVariants<R>> & FlattenCompoundVariants<C> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>>
+            // // if intersection of Base, Variants and Compound Variants is never, then flatten variants and compound variants to generic "string"
+            ? (ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>) extends never
+                ? ParseVariants<FlattenVariants<R, true>> & FlattenCompoundVariants<C, true> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
+                : ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
             : T extends { variants: infer R }
-                ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+                // if intersection of Base and Variants is never, then flatten variants to generic "string"
+                ? (ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>) extends never
+                    ? ParseVariants<FlattenVariants<R, true>> & ParseNestedObject<Omit<T, 'variants'>, false>
+                    : ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>
                 : T extends { compoundVariants: object }
-                    ? ParseNestedObject<Omit<T, 'compoundVariants'>>
+                    ? ParseNestedObject<Omit<T, 'compoundVariants'>, false>
                     : {
                         [K in keyof T as K extends '_web' ? never : K]: T[K] extends object
                             ? T[K] extends OpaqueColorValue
                                 ? ColorValue
                                 : ExtractBreakpoints<T[K]>
-                            : T[K]
+                            : T[K] extends string
+                                ? ShouldFlatten extends true
+                                    ? string
+                                    : T[K]
+                                : T[K]
                     }
         : T
 
-type FlattenVariants<T> = T extends object
+type FlattenVariants<T, ShouldFlatten> = T extends object
     ? {
         [K in keyof T]: T[K] extends object
             ? {
                 [key in keyof T[K]]: T[K][key] extends object
-                    ? ParseNestedObject<T[K][key]>
+                    ? ParseNestedObject<T[K][key], ShouldFlatten>
                     : never
             }
             : never
     }
     : never
 
-type FlattenCompoundVariants<T> = T extends Array<infer _>
-    ? FlattenCompoundVariants<T[number]>
+type FlattenCompoundVariants<T, ShouldFlatten> = T extends Array<infer _>
+    ? FlattenCompoundVariants<T[number], ShouldFlatten>
     : T extends { styles: infer S }
-        ? ParseNestedObject<S>
+        ? ParseNestedObject<S, ShouldFlatten>
         : never
 
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
-        ? UnionToIntersection<ParseVariants<T[keyof T]>>
+        ? UnionToIntersection<ParseVariants<T[keyof T]>> extends never
+            ? ParseVariants<T[keyof T]>
+            : UnionToIntersection<ParseVariants<T[keyof T]>>
         : T
     : T
 
@@ -63,7 +75,7 @@ type UnionToIntersection<U> =
     (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
 
 type ParseStyleKeys<T> = T extends object
-    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    ? { [K in keyof T]: ParseNestedObject<T[K], false> }
     : never
 
 export type ReactNativeStyleSheet<T> = ParseStyleKeys<SafeReturnType<T>>

package/src/types/common.js

@@ -0,0 +1 @@
+export {};

package/src/types/core.js

@@ -0,0 +1 @@
+export {};

package/src/types/index.js

@@ -0,0 +1 @@
+export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility';

package/src/types/index.ts

@@ -17,5 +17,5 @@ export type {
     UnistyleImage
 } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
-export type { ExtractVariantNames } from './variants'
+export type { ExtractVariantNames, UnistylesVariants } from './variants'
 export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility'

package/src/types/stylesheet.js

@@ -0,0 +1,2 @@
+const create = (stylesheet) => stylesheet;
+export {};

package/src/types/stylesheet.ts

@@ -1,14 +1,14 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { BoxShadowValue, ImageStyle, TextStyle, ViewStyle, FilterFunction } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../specs'
 import type { ReactNativeStyleSheet } from './breakpoints'
 import type { ExtractVariantNames } from './variants'
 import type { CSSProperties } from 'react'
-import type { Pseudo } from '../../web/pseudo'
+import type { Pseudo } from '../web/convert/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
-type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'
 
 export type UnistyleView = Omit<ViewStyle, NestedKeys>
 export type UnistyleText = Omit<TextStyle, NestedKeys>
@@ -17,7 +17,9 @@ export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 type UnistyleNestedStyles = {
     shadowOffset?: ToDeepUnistyles<ShadowOffset>,
     textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
+    transform?: Array<ToDeepUnistyles<TransformStyles>>,
+    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string,
+    filter?: Array<ToDeepUnistyles<FilterFunction>> | string
 }
 
 type VariantsObject = {
@@ -27,7 +29,7 @@ type VariantsObject = {
 }
 
 type CustomClassName = {
-    _css?: string | Array<string>
+    _classNames?: string | Array<string>
 }
 
 type CompoundVariant = {

package/src/types/variants.js

@@ -0,0 +1 @@
+export {};

package/src/types/variants.ts

@@ -20,4 +20,10 @@ type ExtractSubVariantKeys<T> = T extends object
 
 type ExtractVariant<T> = T extends { variants: infer V }
     ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
-    : T
+    : never
+
+export type UnistylesVariants<ST> = ST extends { useVariants: infer V }
+    ? V extends (variants: infer T) => void
+        ? T
+        : never
+    : never

package/src/web/convert/boxShadow.js

@@ -0,0 +1,59 @@
+import { deepMergeObjects, warn } from '../utils';
+import { validateShadow } from './shadow';
+import { BOX_SHADOW_STYLES } from './types';
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
+const createBoxShadowValue = (style) => {
+    // at this point every prop is present
+    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+    const offsetX = normalizeNumericValue(shadowOffset.width);
+    const offsetY = normalizeNumericValue(shadowOffset.height);
+    const radius = normalizeNumericValue(shadowRadius);
+    const color = normalizeColor(shadowColor, shadowOpacity);
+    return `${offsetX} ${offsetY} ${radius} ${color}`;
+};
+export const getBoxShadowStyle = (styles) => {
+    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles));
+    if (missingStyles.length) {
+        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`);
+        return {};
+    }
+    const breakpointsSet = new Set();
+    try {
+        validateShadow(BOX_SHADOW_STYLES, styles, breakpointsSet);
+    }
+    catch (error) {
+        if (typeof error === 'string') {
+            warn(error);
+        }
+        return {};
+    }
+    const breakpoints = Array.from(breakpointsSet);
+    // If no breakpoints were used return styles without media queries
+    if (breakpoints.length === 0) {
+        return {
+            boxShadow: createBoxShadowValue(styles)
+        };
+    }
+    // Create boxShadow for each breakpoint
+    const breakpointStyles = breakpoints.map(breakpoint => {
+        const color = extractShadowValue('shadowColor', breakpoint, styles);
+        const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles);
+        const radius = extractShadowValue('shadowRadius', breakpoint, styles);
+        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles);
+        return {
+            [breakpoint]: {
+                boxShadow: createBoxShadowValue({
+                    shadowColor: color,
+                    shadowOffset: {
+                        width,
+                        height
+                    },
+                    shadowRadius: radius,
+                    shadowOpacity: opacity
+                })
+            }
+        };
+    });
+    // Merge all breakpoints styles into one
+    return deepMergeObjects(...breakpointStyles);
+};

package/{web → src/web}/convert/boxShadow.ts

@@ -1,8 +1,5 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 import { deepMergeObjects, warn } from '../utils'
 import { validateShadow } from './shadow'
-import { convertBreakpoint } from './breakpoint'
 import { BOX_SHADOW_STYLES, type BoxShadow } from './types'
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
 
@@ -17,7 +14,7 @@ const createBoxShadowValue = (style: BoxShadow) => {
     return `${offsetX} ${offsetY} ${radius} ${color}`
 }
 
-export const getBoxShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
+export const getBoxShadowStyle = (styles: Record<string, any>) => {
     const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles))
 
     if (missingStyles.length) {
@@ -54,17 +51,19 @@ export const getBoxShadowStyle = (styles: Record<string, any>): NestedCSSPropert
         const radius = extractShadowValue('shadowRadius', breakpoint, styles)
         const opacity = extractShadowValue('shadowOpacity', breakpoint, styles)
 
-        return media(convertBreakpoint(breakpoint), {
-            boxShadow: createBoxShadowValue({
-                shadowColor: color,
-                shadowOffset: {
-                    width,
-                    height
-                },
-                shadowRadius: radius,
-                shadowOpacity: opacity
-            })
-        })
+        return {
+            [breakpoint]: {
+                boxShadow: createBoxShadowValue({
+                    shadowColor: color,
+                    shadowOffset: {
+                        width,
+                        height
+                    },
+                    shadowRadius: radius,
+                    shadowOpacity: opacity
+                })
+            }
+        }
     })
 
     // Merge all breakpoints styles into one