react-native-unistyles 3.0.0-alpha.4 → 3.0.0-alpha.40

package/lib/typescript/web/listener/index.d.ts

@@ -1,2 +0,0 @@
-export { UnistylesListener } from './listener';
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/web/listener/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/listener/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA"}

package/lib/typescript/web/listener/listener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../../web/listener/listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGnE,qBAAa,wBAAwB;IACjC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,SAAS,CAAoG;IAErH,UAAU,eAAgB,kBAAkB,UAE3C;IAED,aAAa,aAUZ;IAED,YAAY,iBAAkB,KAAK,CAAC,kBAAkB,CAAC,YAAY,YAAY,gBAM9E;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}

package/lib/typescript/web/mock.d.ts

@@ -1,14 +0,0 @@
-import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar';
-import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar';
-export declare const StatusBar: StatusBarSpec;
-export declare const NavigationBar: NavigationBarSpec;
-export declare const UnistylesShadowRegistry: {
-    name: string;
-    __type: string;
-    equals: () => boolean;
-    toString: () => string;
-    dispose: () => void;
-    add: () => void;
-    remove: () => void;
-};
-//# sourceMappingURL=mock.d.ts.map

package/lib/typescript/web/mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../web/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC5F,OAAO,KAAK,EAAE,kBAAkB,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEjF,eAAO,MAAM,SAAS,EAAE,aAUvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,iBAS3B,CAAA;AAED,eAAO,MAAM,uBAAuB;;;;;;;;CAQnC,CAAA"}

package/lib/typescript/web/mq.d.ts

@@ -1,4 +0,0 @@
-import type { MediaQuery } from 'typestyle/lib/types';
-export declare const parseMq: (mq: string) => MediaQuery;
-export declare const isUnistylesMq: (mq: string) => boolean;
-//# sourceMappingURL=mq.d.ts.map

package/lib/typescript/web/mq.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../web/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,UAUpC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,YAAgC,CAAA"}

package/lib/typescript/web/pseudo.d.ts

@@ -1,4 +0,0 @@
-export declare const pseudos: readonly ["_hover", "_css", "_before", "_after"];
-export declare const isPseudo: (selector: string) => boolean;
-export type Pseudo = typeof pseudos[number];
-//# sourceMappingURL=pseudo.d.ts.map

package/lib/typescript/web/pseudo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../web/pseudo.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,kDAKV,CAAA;AAEV,eAAO,MAAM,QAAQ,aAAc,MAAM,YAAyC,CAAA;AAElF,MAAM,MAAM,MAAM,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAA"}

package/lib/typescript/web/registry.d.ts

@@ -1,12 +0,0 @@
-import { TypeStyle } from 'typestyle';
-import type { UnistylesValues } from '../src/types';
-declare class UnistylesRegistryBuilder {
-    createStyles: (stylesheet: UnistylesValues, key: string | number) => {
-        className: string;
-        unistyles: TypeStyle;
-    };
-    updateStyles: (unistyles: TypeStyle, stylesheet: UnistylesValues, className: string) => void;
-}
-export declare const UnistylesRegistry: UnistylesRegistryBuilder;
-export {};
-//# sourceMappingURL=registry.d.ts.map

package/lib/typescript/web/registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../web/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,SAAS,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD,cAAM,wBAAwB;IAC1B,YAAY,eAAgB,eAAe,OAAO,MAAM,GAAG,MAAM;;;MAwBhE;IAED,YAAY,cAAe,SAAS,cAAc,eAAe,aAAa,MAAM,UAKnF;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}

package/lib/typescript/web/runtime.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC/F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAMrD,cAAM,uBAAuB;IACzB,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAE/B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,uEAEZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,UAAU,4EAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,KAAK,0CAYR;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,wDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,+DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAsBtC;IAED,QAAQ,cAAe,YAAY,UAQlC;IAED,iBAAiB,cAAe,OAAO,UAQtC;IAED,0BAA0B,QAAS,MAAM,UAAU,MAAM,UAMxD;IAED,gBAAgB,aAAW;IAE3B,WAAW,cAAe,YAAY,WAAW,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAQpF;IAED,eAAe,iGAA4B;CAC9C;AAED,eAAO,MAAM,gBAAgB,yBAAgC,CAAA"}

package/lib/typescript/web/state.d.ts

@@ -1,24 +0,0 @@
-import { type ReactElement } from 'react';
-import type { UnistylesTheme } from '../src/types';
-import type { UnistylesConfig } from '../src/specs/StyleSheet';
-import type { AppBreakpoint, AppThemeName } from '../src/specs/types';
-import type { UnistylesBreakpoints } from '../src/global';
-declare class UnistylesStateBuilder {
-    private readonly isSSR;
-    readonly tags: Array<ReactElement>;
-    themes: Map<string, UnistylesTheme>;
-    themeName?: AppThemeName;
-    breakpoint?: AppBreakpoint;
-    breakpoints?: UnistylesBreakpoints;
-    hasAdaptiveThemes: boolean;
-    init: (config: UnistylesConfig) => void;
-    private initThemes;
-    private initSettings;
-    private initBreakpoints;
-    createTag(): HTMLStyleElement | {
-        textContent: string;
-    };
-}
-export declare const UnistylesState: UnistylesStateBuilder;
-export {};
-//# sourceMappingURL=state.d.ts.map

package/lib/typescript/web/state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../web/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAA4B,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,eAAe,CAAA;AAM1E,cAAM,qBAAqB;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAa;IACnC,QAAQ,CAAC,IAAI,EAAS,KAAK,CAAC,YAAY,CAAC,CAAA;IAEzC,MAAM,8BAAoC;IAC1C,SAAS,CAAC,EAAE,YAAY,CAAA;IAExB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;IAEzB,IAAI,WAAY,eAAe,UAU9B;IAED,OAAO,CAAC,UAAU,CAIjB;IAED,OAAO,CAAC,YAAY,CAyBnB;IAED,OAAO,CAAC,eAAe,CAmCtB;IAED,SAAS;;;CAyCZ;AAED,eAAO,MAAM,cAAc,uBAA8B,CAAA"}

package/lib/typescript/web/useVariants.d.ts

@@ -1,3 +0,0 @@
-import type { ReactNativeStyleSheet, StyleSheet } from '../src/types';
-export declare const createUseVariants: (styles: ReactNativeStyleSheet<StyleSheet>) => void;
-//# sourceMappingURL=useVariants.d.ts.map

package/lib/typescript/web/useVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVariants.d.ts","sourceRoot":"","sources":["../../../web/useVariants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAarE,eAAO,MAAM,iBAAiB,WAAY,qBAAqB,CAAC,UAAU,CAAC,SAmF1E,CAAA"}

package/lib/typescript/web/utils.d.ts

@@ -1,18 +0,0 @@
-import { ColorScheme, type AppThemeName } from '../src/specs/types';
-import type { UnistylesValues } from '../src/types';
-export declare const reduceObject: <TObj extends Record<string, any>, TReducer>(obj: TObj, reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer) => { [K in keyof TObj]: TReducer; };
-export declare const toReactNativeClassName: (className: string, values: UnistylesValues) => {
-    [x: string]: string | boolean;
-    $$css: boolean;
-};
-export declare const keyInObject: <T extends Record<string, any>>(obj: T, key: PropertyKey) => key is keyof T;
-export declare const schemeToTheme: (scheme: ColorScheme) => AppThemeName;
-export declare const hexToRGBA: (hex: string, opacity: number) => string;
-export declare const isServer: () => boolean;
-/**
-* Deeply merges properties of passed object
-*/
-export declare const deepMergeObjects: <T extends Record<PropertyKey, any>>(...sources: Array<T>) => T;
-export declare const warn: (message: string) => void;
-export declare const equal: <T>(a: T, b: T) => boolean;
-//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/web/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../web/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,eAAO,MAAM,YAAY,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,OAC9D,IAAI,WACA,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,IAAI,KAAK,QAAQ,KACmD,GAAG,CAAe,IAAV,MAAM,IAAI,GAAG,QAAQ,GAAE,CAAA;AAErJ,eAAO,MAAM,sBAAsB,cAAe,MAAM,UAAU,eAAe;;;CAahF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,OAAO,WAAW,KAAG,GAAG,IAAI,MAAM,CAAe,CAAA;AAElH,eAAO,MAAM,aAAa,WAAY,WAAW,KAAG,YAQnD,CAAA;AAED,eAAO,MAAM,SAAS,QAAS,MAAM,WAAW,MAAM,WAM5B,CAAA;AAE1B,eAAO,MAAM,QAAQ,eAAsC,CAAA;AAE3D;;EAEE;AACF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,MAqBxF,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAA2D,CAAA;AAE/F,eAAO,MAAM,KAAK,GAAI,CAAC,KAAK,CAAC,KAAK,CAAC,YAqBlC,CAAA"}

package/nitrogen/generated/android/c++/JFunc_void_std__vector_UnistyleDependency_.hpp

@@ -1,60 +0,0 @@
-///
-/// JFunc_void_std__vector_UnistyleDependency_.hpp
-/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
-/// https://github.com/mrousavy/nitro
-/// Copyright © 2024 Marc Rousavy @ Margelo
-///
-
-#pragma once
-
-#include <fbjni/fbjni.h>
-#include <functional>
-
-#include <functional>
-#include <vector>
-#include "UnistyleDependency.hpp"
-#include "JUnistyleDependency.hpp"
-
-namespace margelo::nitro::unistyles {
-
-  using namespace facebook;
-
-  /**
-   * C++ representation of the callback Func_void_std__vector_UnistyleDependency_.
-   * This is a Kotlin `(dependencies: Array<UnistyleDependency>) -> Unit`, backed by a `std::function<...>`.
-   */
-  struct JFunc_void_std__vector_UnistyleDependency_ final: public jni::HybridClass<JFunc_void_std__vector_UnistyleDependency_> {
-  public:
-    static jni::local_ref<JFunc_void_std__vector_UnistyleDependency_::javaobject> fromCpp(const std::function<void(const std::vector<UnistyleDependency>& /* dependencies */)>& func) {
-      return JFunc_void_std__vector_UnistyleDependency_::newObjectCxxArgs(func);
-    }
-
-  public:
-    void call(const jni::alias_ref<jni::JArrayClass<JUnistyleDependency>>& dependencies) {
-      return _func([&]() {
-        size_t size = dependencies->size();
-        std::vector<UnistyleDependency> vector;
-        vector.reserve(size);
-        for (size_t i = 0; i < size; i++) {
-          auto element = dependencies->getElement(i);
-          vector.push_back(element->toCpp());
-        }
-        return vector;
-      }());
-    }
-
-  public:
-    static auto constexpr kJavaDescriptor = "Lcom/margelo/nitro/unistyles/Func_void_std__vector_UnistyleDependency_;";
-    static void registerNatives() {
-      registerHybrid({makeNativeMethod("call", JFunc_void_std__vector_UnistyleDependency_::call)});
-    }
-
-  private:
-    explicit JFunc_void_std__vector_UnistyleDependency_(const std::function<void(const std::vector<UnistyleDependency>& /* dependencies */)>& func): _func(func) { }
-
-  private:
-    friend HybridBase;
-    std::function<void(const std::vector<UnistyleDependency>& /* dependencies */)> _func;
-  };
-
-} // namespace margelo::nitro::unistyles

package/plugin/__tests__/dependencies.spec.js

@@ -1,360 +0,0 @@
-import { pluginTester } from 'babel-plugin-tester'
-import plugin from '../'
-
-pluginTester({
-    plugin,
-    pluginOptions: {
-        debug: false
-    },
-    babelOptions: {
-        plugins: ['@babel/plugin-syntax-jsx'],
-        generatorOpts: {
-            retainLines: true
-        }
-    },
-    tests: [
-        {
-            title: 'Should detect dependencies in variants',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        variants: {
-                            size: {
-                                small: {
-                                    backgroundColor: theme.colors.blue,
-                                    paddingTop: theme.gap(10),
-                                    marginBottom: rt.insets.bottom === 0
-                                        ? theme.gap(20)
-                                        : theme.gap(30)
-                                }
-                            }
-                        }
-                    }
-                }))
-            `,
-            output: `
-                import { UnistylesShadowRegistry } from 'react-native-unistyles'
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View
-                            style={styles.container}
-                            ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
-                            }}
-                        >
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        variants: {
-                            size: {
-                                small: {
-                                    backgroundColor: theme.colors.blue,
-                                    paddingTop: theme.gap(10),
-                                    marginBottom: rt.insets.bottom === 0 ? theme.gap(20) : theme.gap(30)
-                                }
-                            }
-                        },
-                        uni__dependencies: [0, 9, 4]
-                    }
-                }))
-            `
-        },
-        {
-            title: 'Should detect dependencies in breakpoints',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        backgroundColor: {
-                            sm: theme.colors.blue
-                        },
-                        padding: {
-                            xs: rt.insets.top
-                        }
-                    }
-                }))
-            `,
-            output: `
-                import { UnistylesShadowRegistry } from 'react-native-unistyles'
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View
-                            style={styles.container}
-                            ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
-                            }}
-                        >
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        backgroundColor: {
-                            sm: theme.colors.blue
-                        },
-                        padding: {
-                            xs: rt.insets.top
-                        },
-                        uni__dependencies: [0, 9]
-                    }
-                }))
-            `
-        },
-        {
-            title: 'Should detect dependencies in calculations',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        marginTop: theme.gap(2) + rt.insets.bottom,
-                        marginBottom: theme.gap(2) * rt.statusBar.height,
-                        paddingTop: theme.gap(2) - rt.navigationBar.height
-                    }
-                }))
-            `,
-            output: `
-                import { UnistylesShadowRegistry } from 'react-native-unistyles'
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View
-                            style={styles.container}
-                            ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
-                            }}
-                        >
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        marginTop: theme.gap(2) + rt.insets.bottom,
-                        marginBottom: theme.gap(2) * rt.statusBar.height,
-                        paddingTop: theme.gap(2) - rt.navigationBar.height,
-                        uni__dependencies: [0, 9, 12, 13]
-                    }
-                }))
-            `
-        },
-        {
-            title: 'Should detect dependencies in _web',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        flex: 1,
-                        display: 'flex'
-                    },
-                    static: {
-                        backgroundColor: 'pink'
-                    },
-                    staticText: {
-                        color: 'red'
-                    },
-                    theme: {
-                        backgroundColor: theme.colors.backgroundColor
-                    },
-                    themeText: {
-                        color: theme.colors.typography
-                    },
-                    themeButtonsContainer: {
-                        marginTop: 20,
-                        flexDirection: 'row',
-                        gap: 10
-                    },
-                    dynamic: state => ({
-                        backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak
-                    }),
-                    whiteText: {
-                        color: 'white',
-                        textAlign: 'center'
-                    },
-                    hover: {
-                        backgroundColor: theme.colors.blood,
-                        cursor: 'pointer',
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.colors.sky,
-                                paddingTop: rt.insets.top
-                            }
-                        }
-                    },
-                    breakpoint: {
-                        backgroundColor: {
-                            xs: theme.colors.blood,
-                            md: theme.colors.sky,
-                            xl: theme.colors.aloes
-                        },
-                        transform: [
-                            {
-                                translateX: {
-                                    xs: rt.fontScale * 10,
-                                    md: rt.pixelRatio * 10
-                                }
-                            }
-                        ],
-                        position: 'relative',
-                        _web: {
-                            _after: {
-                                fontWeight: 'bold',
-                                content: rt.breakpoint,
-                                color: 'white',
-                                position: 'absolute',
-                                top: '60%',
-                                left: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
-                            }
-                        }
-                    }
-                }))
-            `,
-            output: `
-                import { UnistylesShadowRegistry } from 'react-native-unistyles'
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View
-                            style={styles.container}
-                            ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
-                            }}
-                        >
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        flex: 1,
-                        display: 'flex'
-                    },
-                    static: {
-                        backgroundColor: 'pink'
-                    },
-                    staticText: {
-                        color: 'red'
-                    },
-                    theme: {
-                        backgroundColor: theme.colors.backgroundColor,
-                        uni__dependencies: [0]
-                    },
-                    themeText: {
-                        color: theme.colors.typography,
-                        uni__dependencies: [0]
-                    },
-                    themeButtonsContainer: {
-                        marginTop: 20,
-                        flexDirection: 'row',
-                        gap: 10
-                    },
-                    dynamic: state => ({
-                        backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak,
-                        uni__dependencies: [0]
-                    }),
-                    whiteText: {
-                        color: 'white',
-                        textAlign: 'center'
-                    },
-                    hover: {
-                        backgroundColor: theme.colors.blood,
-                        cursor: 'pointer',
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.colors.sky,
-                                paddingTop: rt.insets.top
-                            }
-                        },
-                        uni__dependencies: [0, 9]
-                    },
-                    breakpoint: {
-                        backgroundColor: {
-                            xs: theme.colors.blood,
-                            md: theme.colors.sky,
-                            xl: theme.colors.aloes
-                        },
-                        transform: [
-                            {
-                                translateX: {
-                                    xs: rt.fontScale * 10,
-                                    md: rt.pixelRatio * 10
-                                }
-                            }
-                        ],
-
-                        position: 'relative',
-                        _web: {
-                            _after: {
-                                fontWeight: 'bold',
-                                content: rt.breakpoint,
-                                color: 'white',
-                                position: 'absolute',
-                                top: '60%',
-                                left: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
-                            }
-                        },
-                        uni__dependencies: [0, 11, 10, 3, 5]
-                    }
-                }))
-            `
-        },
-    ]
-})