@codeandmoney/soelma 0.0.0-dev.0 → 0.0.0-dev.1

package/DefaultTheme.d.ts

@@ -0,0 +1,2 @@
+export interface DefaultTheme {
+}

package/DefaultTheme.js

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

package/appearance/consts.d.ts

@@ -0,0 +1 @@
+export declare const UI_MODE_DEPENDENCY_KEY = "react-native-appearance";

package/appearance/index.d.ts

@@ -0,0 +1,8 @@
+import "./init";
+export type ColorSchemeName = "light" | "dark" | "default";
+export declare function appearance<T>({ dark, light, default: defaultScheme, }: {
+    [mode in ColorSchemeName]?: T;
+}): T | undefined;
+export declare const darkAppearance: <T>(dark: T) => T | undefined;
+export declare const lightAppearance: <T>(light: T) => T | undefined;
+export declare const noPreferenceAppearance: <T>(defaultScheme: T) => T | undefined;

package/appearance/index.js

@@ -0,0 +1,18 @@
+import "./init";
+import { Appearance } from "react-native";
+import { onUse } from "../dependencyUsage";
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+export function appearance({ dark, light, default: defaultScheme, }) {
+    onUse(UI_MODE_DEPENDENCY_KEY);
+    // Note: getColorScheme() will always return light when debugging with Chrome.
+    if (Appearance.getColorScheme() === "light") {
+        return light;
+    }
+    if (Appearance.getColorScheme() === "dark") {
+        return dark;
+    }
+    return defaultScheme;
+}
+export const darkAppearance = (dark) => appearance({ dark });
+export const lightAppearance = (light) => appearance({ light });
+export const noPreferenceAppearance = (defaultScheme) => appearance({ default: defaultScheme });

package/appearance/init.d.ts

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

package/{src/appearance/init.ts → appearance/init.js}

@@ -1,12 +1,7 @@
 import { Appearance } from "react-native";
-
 import { addDependency } from "../dependencyRegistry";
 import { createEventEmitter } from "../createEventEmitter";
-
 import { UI_MODE_DEPENDENCY_KEY } from "./consts";
-
 const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
-
-addDependency(UI_MODE_DEPENDENCY_KEY, (handler: () => void) => on(handler));
-
+addDependency(UI_MODE_DEPENDENCY_KEY, (handler) => on(handler));
 Appearance.addChangeListener(emit);

package/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DefaultTheme } from "./DefaultTheme";
+export declare const themeContext: import("react").Context<DefaultTheme | null>;
+export declare const ThemeProvider: import("react").Provider<DefaultTheme | null>, ThemeConsumer: import("react").Consumer<DefaultTheme | null>;

package/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+export const themeContext = createContext(null);
+export const { Provider: ThemeProvider, Consumer: ThemeConsumer } = themeContext;

package/createEventEmitter.d.ts

@@ -0,0 +1,8 @@
+type Handler = () => void;
+type UnSubscribe = () => void;
+interface Result {
+    on: (callback: Handler) => UnSubscribe;
+    emit: () => void;
+}
+export declare function createEventEmitter(event: string): Result;
+export {};

package/createEventEmitter.js

@@ -0,0 +1,11 @@
+const events = {};
+export function createEventEmitter(event) {
+    const emit = () => (events[event] || []).forEach((fn) => fn());
+    const on = (cb) => {
+        (events[event] = events[event] || []).push(cb);
+        return () => {
+            events[event] = events[event].filter((fn) => fn !== cb);
+        };
+    };
+    return { on, emit };
+}

package/dark-mode/consts.d.ts

@@ -0,0 +1 @@
+export declare const UI_MODE_DEPENDENCY_KEY = "react-native-dark-mode";

package/dark-mode/index.d.ts

@@ -0,0 +1,7 @@
+import "./init";
+export type UiType = "dark" | "light";
+export declare function uiMode<T>({ dark, light, }: {
+    [mode in UiType]?: T;
+}): T | undefined;
+export declare const darkUiMode: <T>(dark: T) => T | undefined;
+export declare const lightUiMode: <T>(light: T) => T | undefined;

package/dark-mode/index.js

@@ -0,0 +1,16 @@
+import "./init";
+import { onUse } from "../dependencyUsage";
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+import { state } from "./state";
+export function uiMode({ dark, light, }) {
+    onUse(UI_MODE_DEPENDENCY_KEY);
+    if (state.mode === "dark") {
+        return dark;
+    }
+    if (state.mode === "light") {
+        return light;
+    }
+    return undefined;
+}
+export const darkUiMode = (dark) => uiMode({ dark });
+export const lightUiMode = (light) => uiMode({ light });

package/dark-mode/init.d.ts

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

package/dark-mode/init.js

@@ -0,0 +1,13 @@
+import { eventEmitter } from "react-native-dark-mode";
+import { addDependency } from "../dependencyRegistry";
+import { createEventEmitter } from "../createEventEmitter";
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+import { state } from "./state";
+const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
+addDependency(UI_MODE_DEPENDENCY_KEY, (handler) => on(handler));
+eventEmitter.on("currentModeChanged", (newMode) => {
+    if (state.mode !== newMode) {
+        state.mode = newMode;
+        emit();
+    }
+});

package/dark-mode/state.d.ts

@@ -0,0 +1,3 @@
+export declare const state: {
+    mode: import("react-native-dark-mode").Mode;
+};

package/{src/dark-mode/state.ts → dark-mode/state.js}

@@ -1,5 +1,4 @@
 import { initialMode } from "react-native-dark-mode";
-
 export const state = {
-  mode: initialMode,
+    mode: initialMode,
 };

package/dependencyRegistry.d.ts

@@ -0,0 +1,5 @@
+type UnSubscribeFn = () => void;
+type SubscribeFn = (handler: () => void) => UnSubscribeFn;
+export declare function addDependency(name: string, onChange: SubscribeFn): void;
+export declare function getDependency(name: string): SubscribeFn | undefined;
+export {};

package/dependencyRegistry.js

@@ -0,0 +1,12 @@
+const registry = {};
+export function addDependency(name, onChange) {
+    if (!registry[name]) {
+        Object.defineProperty(registry, name, {
+            value: onChange,
+            writable: false,
+        });
+    }
+}
+export function getDependency(name) {
+    return registry[name];
+}

package/dependencyUsage.d.ts

@@ -0,0 +1,7 @@
+interface UsingSpec {
+    [dependencyName: string]: boolean;
+}
+export declare function resetUsing(): void;
+export declare function getUsing(): UsingSpec;
+export declare function onUse(name: string): void;
+export {};

package/dependencyUsage.js

@@ -0,0 +1,10 @@
+const ref = { current: {} };
+export function resetUsing() {
+    ref.current = {};
+}
+export function getUsing() {
+    return { ...ref.current };
+}
+export function onUse(name) {
+    ref.current[name] = true;
+}

package/dimensions/consts.d.ts

@@ -0,0 +1,2 @@
+export declare const WINDOW_DEPENDENCY_KEY = "Dimensions.window";
+export declare const SCREEN_DEPENDENCY_KEY = "Dimensions.screen";

package/dimensions/index.d.ts

@@ -0,0 +1,4 @@
+import "./init";
+import { ScaledSize } from "react-native";
+export declare function getWindowDimensions(): ScaledSize;
+export declare function getScreenDimensions(): ScaledSize;

package/dimensions/index.js

@@ -0,0 +1,13 @@
+import "./init";
+import { Dimensions } from "react-native";
+import { onUse } from "../dependencyUsage";
+import { WINDOW_DEPENDENCY_KEY, SCREEN_DEPENDENCY_KEY } from "./consts";
+const get = (dim) => Dimensions.get(dim);
+export function getWindowDimensions() {
+    onUse(WINDOW_DEPENDENCY_KEY);
+    return get("window");
+}
+export function getScreenDimensions() {
+    onUse(SCREEN_DEPENDENCY_KEY);
+    return get("screen");
+}

package/dimensions/init.d.ts

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

package/dimensions/init.js

@@ -0,0 +1,21 @@
+import { Dimensions } from "react-native";
+import { createEventEmitter } from "../createEventEmitter";
+import { addDependency } from "../dependencyRegistry";
+import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
+const { get, addEventListener } = Dimensions;
+const state = { window: get("window"), screen: get("screen") };
+const windowEventEmitter = createEventEmitter(WINDOW_DEPENDENCY_KEY);
+const screenEventEmitter = createEventEmitter(SCREEN_DEPENDENCY_KEY);
+const isNotEqual = (a, b) => a.width !== b.width || a.height !== b.height;
+addDependency(WINDOW_DEPENDENCY_KEY, (handler) => windowEventEmitter.on(handler));
+addDependency(SCREEN_DEPENDENCY_KEY, (handler) => screenEventEmitter.on(handler));
+addEventListener("change", ({ window, screen }) => {
+    if (isNotEqual(screen, state.screen)) {
+        state.screen = screen;
+        screenEventEmitter.emit();
+    }
+    if (isNotEqual(window, state.window)) {
+        state.window = window;
+        windowEventEmitter.emit();
+    }
+});

package/dimensions/utils.d.ts

@@ -0,0 +1 @@
+export declare const optimizeDependencies: (keys: Record<string, boolean>) => Record<string, boolean>;

package/dimensions/utils.js

@@ -0,0 +1,7 @@
+import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
+export const optimizeDependencies = (keys) => {
+    if (keys[WINDOW_DEPENDENCY_KEY] && keys[SCREEN_DEPENDENCY_KEY]) {
+        delete keys[SCREEN_DEPENDENCY_KEY];
+    }
+    return keys;
+};

package/i18n.d.ts

@@ -0,0 +1,7 @@
+type LayoutDirectionType = "rtl" | "ltr";
+export declare function i18n<T>({ rtl, ltr, }: {
+    [direction in LayoutDirectionType]?: T;
+}): T | undefined;
+export declare const rtl: <T>(styles: T) => T | undefined;
+export declare const ltr: <T>(styles: T) => T | undefined;
+export {};

package/i18n.js

@@ -0,0 +1,9 @@
+import { I18nManager } from "react-native";
+export function i18n({ rtl, ltr, }) {
+    if (I18nManager.isRTL) {
+        return rtl;
+    }
+    return ltr;
+}
+export const rtl = (styles) => i18n({ rtl: styles });
+export const ltr = (styles) => i18n({ ltr: styles });

package/index.js

@@ -0,0 +1,5 @@
+export { useTheme } from "./useTheme";
+export { withStyles } from "./withStyles";
+export { ThemeProvider, ThemeConsumer } from "./context";
+export { useColorTransition } from "./useColorTransition";
+export { makeUseStyles } from "./makeUseStyles";

package/{src/makeUseStyles → makeUseStyles}/index.d.ts

@@ -3,5 +3,5 @@ import { DefaultTheme } from "../DefaultTheme";
 
 export function makeUseStyles<
   Theme extends DefaultTheme,
-  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>
+  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
 >(getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>): () => T;

package/{src/makeUseStyles → makeUseStyles}/utils.js

@@ -18,7 +18,7 @@ export const useForceUpdate = (scope) => {
 
     unsubscribeRef.current = () => {
       scope.forceUpdate = scope.forceUpdate.filter(
-        (fn) => fn !== forceRerender
+        (fn) => fn !== forceRerender,
       );
     };
   }
@@ -28,7 +28,7 @@ export const useForceUpdate = (scope) => {
       unsubscribeRef.current();
       unsubscribeRef.current = noop;
     },
-    []
+    [],
   );
 };
 
@@ -51,13 +51,13 @@ export const subscribe = (dependenciesKeys, handler) => {
 
             if (!onChange) {
               console.warn(
-                `[react-native-stylex] Could not find onChange handler for ${dependencyName}!`
+                `[react-native-stylex] Could not find onChange handler for ${dependencyName}!`,
               );
             }
 
             return !!onChange;
           }
-        : Boolean
+        : Boolean,
     )
     .map((onChange) => onChange(handler));
 

package/media-query/base.d.ts

@@ -0,0 +1,12 @@
+import { ScaledSize } from "react-native";
+export declare const createDimensionQueryHelper: <Value>(queryFunction: (options: {
+    value: Value;
+    dimensions: ScaledSize;
+}) => boolean) => <T>(value: Value, styles: T) => T | null;
+export declare const maxHeight: <T>(value: number, styles: T) => T | null;
+export declare const maxWidth: <T>(value: number, styles: T) => T | null;
+export declare const minHeight: <T>(value: number, styles: T) => T | null;
+export declare const minWidth: <T>(value: number, styles: T) => T | null;
+export declare const minAspectRatio: <T>(value: number, styles: T) => T | null;
+export declare const maxAspectRatio: <T>(value: number, styles: T) => T | null;
+export declare const aspectRatio: <T>(value: number, styles: T) => T | null;

package/media-query/base.js

@@ -0,0 +1,18 @@
+import { getWindowDimensions } from "../dimensions";
+export const createDimensionQueryHelper = (queryFunction) => (value, styles) => {
+    const isMatched = queryFunction({
+        value,
+        dimensions: getWindowDimensions(),
+    });
+    if (isMatched) {
+        return styles;
+    }
+    return null;
+};
+export const maxHeight = createDimensionQueryHelper(({ value, dimensions }) => value >= dimensions.height);
+export const maxWidth = createDimensionQueryHelper(({ value, dimensions }) => value >= dimensions.width);
+export const minHeight = createDimensionQueryHelper(({ value, dimensions }) => value <= dimensions.height);
+export const minWidth = createDimensionQueryHelper(({ value, dimensions }) => value <= dimensions.width);
+export const minAspectRatio = createDimensionQueryHelper(({ value, dimensions: { width, height } }) => value <= width / height);
+export const maxAspectRatio = createDimensionQueryHelper(({ value, dimensions: { width, height } }) => value >= width / height);
+export const aspectRatio = createDimensionQueryHelper(({ value, dimensions: { width, height } }) => value === width / height);

package/media-query/breakpoints.d.ts

@@ -0,0 +1,18 @@
+interface BreakpointsMatcher<TBreakpoints> {
+    <T>(values: {
+        [mode in keyof TBreakpoints]?: T;
+    }): T | undefined;
+    <T>(values: {
+        [mode in keyof TBreakpoints]?: T;
+    } & {
+        default: T;
+    }): T;
+}
+export declare function createBreakpointsMatcher<TBreakpoints extends Record<string, number>>(breakpoints: TBreakpoints, matchFunction?: <T>(value: number, styles: T) => T | null): BreakpointsMatcher<TBreakpoints>;
+export declare function createBreakpoints<TBreakpoints extends Record<string, number>>(breakpoints: TBreakpoints): {
+    up: <T>(key: keyof TBreakpoints, value: T) => T | null;
+    down: <T_1>(key: keyof TBreakpoints, value: T_1) => T_1 | null;
+    only: <T_2>(key: keyof TBreakpoints, value: T_2) => T_2 | null;
+    between: <T_3>(start: keyof TBreakpoints, end: keyof TBreakpoints, value: T_3) => T_3 | null;
+};
+export {};

package/media-query/breakpoints.js

@@ -0,0 +1,60 @@
+import { minAspectRatio, minWidth, minHeight, maxWidth } from "./base";
+const orderByMin = [minWidth, minAspectRatio, minHeight];
+const toOrderedBreakpointNames = (values, breakpoints, matchFunction) => {
+    const result = Object.keys(values)
+        .filter((e) => e !== "default")
+        .sort((a, b) => breakpoints[a] - breakpoints[b]);
+    if (orderByMin.includes(matchFunction)) {
+        return result.slice().reverse();
+    }
+    return result;
+};
+/*
+ * To debug use analog on CSS: https://codepen.io/retyui/pen/dyOzKzV
+ */
+export function createBreakpointsMatcher(breakpoints, matchFunction = minWidth) {
+    return function breakpointsMatcher(values) {
+        /* istanbul ignore next */
+        // @ts-expect-error: was removed
+        if (process.env.NODE_ENV !== "production") {
+            const invalidKeys = Object.keys(values).filter((key) => {
+                return key !== "default" && breakpoints[key] === undefined;
+            });
+            if (invalidKeys.length > 0) {
+                console.warn(`[react-native-stylex]: Invalid values was passed to 'breakpointsMatcher' function
+
+allowed keys: ${Object.keys(breakpoints).join(", ")}
+unexpected keys: ${invalidKeys.join(", ")}
+`);
+            }
+        }
+        const orderedBreakpointNames = toOrderedBreakpointNames(values, breakpoints, matchFunction);
+        const key = orderedBreakpointNames.find((breakpointName) => matchFunction(breakpoints[breakpointName], values[breakpointName])) || "default";
+        return values[key] || null;
+    };
+}
+function getNextByKey(breakpoints, key) {
+    const breakpointsKeys = Object.keys(breakpoints).sort((a, b) => breakpoints[a] - breakpoints[b]);
+    const index = breakpointsKeys.indexOf(key);
+    const nextKey = breakpointsKeys[index + 1];
+    return nextKey;
+}
+export function createBreakpoints(breakpoints) {
+    function up(key, value) {
+        return minWidth(breakpoints[key], value);
+    }
+    function down(key, value) {
+        return maxWidth(breakpoints[key], value);
+    }
+    function only(key, value) {
+        const nextKey = getNextByKey(breakpoints, key);
+        if (nextKey !== undefined) {
+            return minWidth(breakpoints[key], maxWidth(breakpoints[nextKey] - 0.05, value));
+        }
+        return minWidth(breakpoints[key], value);
+    }
+    function between(start, end, value) {
+        return minWidth(breakpoints[start], maxWidth(breakpoints[end] - 0.05, value));
+    }
+    return { up, down, only, between };
+}

package/media-query/index.d.ts

@@ -0,0 +1,2 @@
+export { minWidth, minAspectRatio, maxWidth, aspectRatio, createDimensionQueryHelper, maxAspectRatio, maxHeight, minHeight, } from "./base";
+export { createBreakpointsMatcher, createBreakpoints } from "./breakpoints";

package/media-query/index.js

@@ -0,0 +1,2 @@
+export { minWidth, minAspectRatio, maxWidth, aspectRatio, createDimensionQueryHelper, maxAspectRatio, maxHeight, minHeight, } from "./base";
+export { createBreakpointsMatcher, createBreakpoints } from "./breakpoints";

package/orientation.d.ts

@@ -0,0 +1,7 @@
+type OrientationType = "portrait" | "landscape";
+export declare function orientation<T>(spec: {
+    [orientation in OrientationType]?: T;
+}): T | undefined;
+export declare const portraitOrientation: <T>(portraitStyles: T) => T | undefined;
+export declare const landscapeOrientation: <T>(landscapeStyles: T) => T | undefined;
+export {};

package/orientation.js

@@ -0,0 +1,7 @@
+import { getScreenDimensions } from "./dimensions";
+export function orientation(spec) {
+    const { height, width } = getScreenDimensions();
+    return width <= height ? spec.portrait : spec.landscape;
+}
+export const portraitOrientation = (portraitStyles) => orientation({ portrait: portraitStyles });
+export const landscapeOrientation = (landscapeStyles) => orientation({ landscape: landscapeStyles });

package/package.json

@@ -1,26 +1,15 @@
 {
   "name": "@codeandmoney/soelma",
-  "publishConfig": {"access": "public"},
-  "version": "0.0.0-dev.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0-dev.1",
   "private": false,
   "main": "index.js",
   "types": "index.d.ts",
   "author": "David <4661784+retyui@users.noreply.github.com>",
   "description": "Fork of git@github.com:retyui/react-native-stylex.git",
   "license": "MIT",
-  "scripts": {
-    "prebuild": "rm -rf lib",
-    "build": "tsc",
-    "postbuild": "mkdir lib/makeUseStyles && cp src/makeUseStyles/* lib/makeUseStyles && rm -rf lib/**/*test.* && prettier --write lib/**/*.{js,ts}",
-    "clean-publish": "yarn test && yarn build && node ./node_modules/clean-publish/clear-package-json.js package.json > lib/package.json && cp CHANGELOG.md LICENSE README.md lib",
-    "publish-next": "yarn clean-publish && cd lib && npm publish --tag next",
-    "presize": "yarn build",
-    "postinstall": "rm -rf node_modules/@types/node node_modules/@types/yauzl node_modules/@types/graceful-fs",
-    "lint": "eslint './src/*.{js,ts,tsx}' --quiet",
-    "test": "jest --coverage",
-    "size": "size-limit",
-    "ci": "yarn lint && yarn test && yarn size"
-  },
   "peerDependencies": {
     "react": ">=16.4.0",
     "react-native": ">=0.59.0"
@@ -33,27 +22,7 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@size-limit/preset-app": "^11.0.1",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.45",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "clean-publish": "^4.2.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "jest": "^29.7.0",
-    "prettier": "^3.1.1",
-    "react": "^18.2.0",
-    "react-native": "^0.73.0",
-    "react-native-dark-mode": "^0.2.2",
-    "react-native-safe-area-context": "^4.8.1",
-    "react-native-test-app": "^2.5.34",
-    "react-test-renderer": "^18.2.0",
-    "size-limit": "^11.0.1",
-    "typescript": "^5.3.3"
+  "scripts": {
+    "postinstall": "rm -rf node_modules/@types/node node_modules/@types/yauzl node_modules/@types/graceful-fs"
   }
 }

package/safe-area/SafeAreaProvider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SafeAreaViewProps } from "./types";
+export declare function SafeAreaProvider(props: SafeAreaViewProps): JSX.Element | null;

package/safe-area/SafeAreaProvider.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { SafeAreaProvider as CoreSafeAreaProvider, initialWindowMetrics, initialWindowSafeAreaInsets, } from "react-native-safe-area-context";
+import { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
+export function SafeAreaProvider(props) {
+    return (<CoreSafeAreaProvider initialSafeAreaInsets={props.initialSafeAreaInsets || initialWindowSafeAreaInsets} initialMetrics={props.initialMetrics || initialWindowMetrics} {...props}>
+      {props.children}
+      <StylexSaveAreaConsumer />
+    </CoreSafeAreaProvider>);
+}

package/safe-area/StylexSaveAreaConsumer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function StylexSaveAreaConsumer(): JSX.Element | null;

package/safe-area/StylexSaveAreaConsumer.js

@@ -0,0 +1,15 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { emit } from "./eventEmitter";
+import { state } from "./state";
+import { useLayoutEffect } from "react";
+export function StylexSaveAreaConsumer() {
+    const insets = useSafeAreaInsets();
+    useLayoutEffect(() => {
+        const isChanged = Object.entries(insets).some(([key, value]) => state.insets[key] !== value);
+        if (isChanged) {
+            state.insets = insets;
+            emit();
+        }
+    }, [insets]);
+    return null;
+}

package/safe-area/consts.d.ts

@@ -0,0 +1 @@
+export declare const SAFE_AREA_DEPENDENCY_KEY = "react-native-safe-area-context";

package/safe-area/eventEmitter.d.ts

@@ -0,0 +1 @@
+export declare const emit: () => void, on: (callback: () => void) => () => void;

package/{src/safe-area/eventEmitter.ts → safe-area/eventEmitter.js}

@@ -1,4 +1,3 @@
 import { createEventEmitter } from "../createEventEmitter";
 import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
-
 export const { emit, on } = createEventEmitter(SAFE_AREA_DEPENDENCY_KEY);

package/safe-area/index.d.ts

@@ -0,0 +1,5 @@
+import "./init";
+import { EdgeInsets } from "./types";
+export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
+export { SafeAreaProvider } from "./SafeAreaProvider";
+export declare function getSafeArea(): EdgeInsets;

package/{src/safe-area/index.tsx → safe-area/index.js}

@@ -1,16 +1,10 @@
 import "./init";
-
 import { onUse } from "../dependencyUsage";
-
 import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
-import { EdgeInsets } from "./types";
 import { state } from "./state";
-
 export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
 export { SafeAreaProvider } from "./SafeAreaProvider";
-
-export function getSafeArea(): EdgeInsets {
-  onUse(SAFE_AREA_DEPENDENCY_KEY);
-
-  return state.insets;
+export function getSafeArea() {
+    onUse(SAFE_AREA_DEPENDENCY_KEY);
+    return state.insets;
 }

package/safe-area/init.d.ts

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

package/{src/safe-area/init.tsx → safe-area/init.js}

@@ -1,6 +1,4 @@
 import { addDependency } from "../dependencyRegistry";
-
 import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
 import { on } from "./eventEmitter";
-
-addDependency(SAFE_AREA_DEPENDENCY_KEY, (handler: () => void) => on(handler));
+addDependency(SAFE_AREA_DEPENDENCY_KEY, (handler) => on(handler));

package/safe-area/state.d.ts

@@ -0,0 +1,8 @@
+export declare const state: {
+    insets: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+};