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

package/src/dark-mode/index.ts

@@ -1,16 +1,13 @@
 import "./init";
 
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 
 import { UI_MODE_DEPENDENCY_KEY } from "./consts";
 import { state } from "./state";
 
 export type UiType = "dark" | "light";
 
-export function uiMode<T>({
-  dark,
-  light,
-}: { [mode in UiType]?: T }): T | undefined {
+export function uiMode<T>({ dark, light }: { [mode in UiType]?: T }): T | undefined {
   onUse(UI_MODE_DEPENDENCY_KEY);
 
   if (state.mode === "dark") {

package/src/dark-mode/init.ts

@@ -1,7 +1,7 @@
 import { eventEmitter, Mode } from "react-native-dark-mode";
 
-import { addDependency } from "../dependencyRegistry";
-import { createEventEmitter } from "../createEventEmitter";
+import { addDependency } from "../dependency-registry";
+import { createEventEmitter } from "../create-event-emitter";
 
 import { UI_MODE_DEPENDENCY_KEY } from "./consts";
 import { state } from "./state";

package/src/{dependencyUsage.ts → dependency-usage.ts}

@@ -19,13 +19,3 @@ export function getUsing(): UsingSpec {
 export function onUse(name: string): void {
   ref.current[name] = true;
 }
-
-interface Button {
-  variant: "primary" | "danger"
-  onAction: () => void
-}
-
-// onAction -> onClick
-// onAction -> onPress
-
-

package/src/dimensions/index.ts

@@ -2,7 +2,7 @@ import "./init";
 
 import { Dimensions, ScaledSize } from "react-native";
 
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 import { WINDOW_DEPENDENCY_KEY, SCREEN_DEPENDENCY_KEY } from "./consts";
 
 const get = (dim: "window" | "screen") => Dimensions.get(dim);

package/src/dimensions/init.ts

@@ -1,7 +1,7 @@
 import { Dimensions, ScaledSize } from "react-native";
 
-import { createEventEmitter } from "../createEventEmitter";
-import { addDependency } from "../dependencyRegistry";
+import { createEventEmitter } from "../create-event-emitter";
+import { addDependency } from "../dependency-registry";
 import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
 
 const { get, addEventListener } = Dimensions;
@@ -11,16 +11,11 @@ const state = { window: get("window"), screen: get("screen") };
 const windowEventEmitter = createEventEmitter(WINDOW_DEPENDENCY_KEY);
 const screenEventEmitter = createEventEmitter(SCREEN_DEPENDENCY_KEY);
 
-const isNotEqual = (a: ScaledSize, b: ScaledSize) =>
-  a.width !== b.width || a.height !== b.height;
+const isNotEqual = (a: ScaledSize, b: ScaledSize) => a.width !== b.width || a.height !== b.height;
 
-addDependency(WINDOW_DEPENDENCY_KEY, (handler: () => void) =>
-  windowEventEmitter.on(handler)
-);
+addDependency(WINDOW_DEPENDENCY_KEY, (handler: () => void) => windowEventEmitter.on(handler));
 
-addDependency(SCREEN_DEPENDENCY_KEY, (handler: () => void) =>
-  screenEventEmitter.on(handler)
-);
+addDependency(SCREEN_DEPENDENCY_KEY, (handler: () => void) => screenEventEmitter.on(handler));
 
 addEventListener("change", ({ window, screen }) => {
   if (isNotEqual(screen, state.screen)) {

package/src/dimensions/utils.ts

@@ -1,8 +1,6 @@
 import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
 
-export const optimizeDependencies = (
-  keys: Record<string, boolean>
-): Record<string, boolean> => {
+export const optimizeDependencies = (keys: Record<string, boolean>): Record<string, boolean> => {
   if (keys[WINDOW_DEPENDENCY_KEY] && keys[SCREEN_DEPENDENCY_KEY]) {
     delete keys[SCREEN_DEPENDENCY_KEY];
   }

package/src/i18n.ts

@@ -2,10 +2,7 @@ import { I18nManager } from "react-native";
 
 type LayoutDirectionType = "rtl" | "ltr";
 
-export function i18n<T>({
-  rtl,
-  ltr,
-}: { [direction in LayoutDirectionType]?: T }): T | undefined {
+export function i18n<T>({ rtl, ltr }: { [direction in LayoutDirectionType]?: T }): T | undefined {
   if (I18nManager.isRTL) {
     return rtl;
   }

package/src/index.ts

@@ -1,7 +1,7 @@
-export { useTheme } from "./useTheme";
-export { withStyles } from "./withStyles";
+export { useTheme } from "./use-theme";
+export { withStyles } from "./with-styles";
 export { ThemeProvider, ThemeConsumer } from "./context";
-export { useColorTransition } from "./useColorTransition";
-export { makeUseStyles } from "./makeUseStyles";
-export type { DefaultTheme } from "./DefaultTheme";
-export type { InferInjectedStyledProps } from "./withStyles";
+export { useColorTransition } from "./use-color-transition";
+export { makeUseStyles } from "./make-use-styles";
+export type { DefaultTheme } from "./default-theme";
+export type { InferInjectedStyledProps } from "./with-styles";

package/src/{makeUseStyles/createUseStylesTheme.js → make-use-styles/create-use-styles-theme.js}

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
-import { useTheme } from "../useTheme";
-import { resetUsing } from "../dependencyUsage";
+import { useTheme } from "../use-theme";
+import { resetUsing } from "../dependency-usage";
 import { getDependenciesKeys, useForceUpdate, subscribe } from "./utils";
 
-export function createUseStylesTheme(getStyles) {
+export function createUseStylesTheme(getStyles, getVariants) {
   const scope = {
     styles: new WeakMap(),
     forceUpdate: [],
@@ -20,7 +20,7 @@ export function createUseStylesTheme(getStyles) {
     scope.unsubscribe();
     resetUsing();
 
-    const style = StyleSheet.create(getStyles(theme));
+    const style = StyleSheet.create(getStyles?.(theme) ?? {});
     const keys = getDependenciesKeys();
 
     scope.unsubscribe = subscribe(keys, onUpdate);
@@ -28,7 +28,7 @@ export function createUseStylesTheme(getStyles) {
     return style;
   }
 
-  return function useStyles() {
+  function useStyles(variants) {
     const theme = useTheme();
 
     useForceUpdate(scope);
@@ -37,6 +37,23 @@ export function createUseStylesTheme(getStyles) {
       scope.styles.set(theme, initStyle(theme));
     }
 
+    if (getVariants) {
+      const configVariants = getVariants(theme);
+      const requestedVarians = {};
+
+      for (const key in variants) {
+        const value = configVariants[key][variants[key]];
+        Object.assign(requestedVarians, value);
+      }
+
+      return {
+        ...scope.styles.get(theme),
+        ...StyleSheet.create({ variants: requestedVarians }),
+      };
+    }
+
     return scope.styles.get(theme);
-  };
+  }
+
+  return useStyles;
 }

package/src/{makeUseStyles/createUseStylesTheme.test.js → make-use-styles/create-use-styles-theme.test.js}

@@ -38,7 +38,7 @@ it("should create styles once", () => {
     {
       wrapper: ThemeProvider,
       initialProps: { value: theme },
-    }
+    },
   );
 
   expect(mockGetStyles).toHaveBeenCalledTimes(1);

package/src/{makeUseStyles/createUseStylesWithoutTheme.js → make-use-styles/create-use-styles-without-theme.js}

@@ -1,10 +1,11 @@
 import { StyleSheet } from "react-native";
-import { resetUsing } from "../dependencyUsage";
+import { resetUsing } from "../dependency-usage";
 import { getDependenciesKeys, subscribe, useForceUpdate } from "./utils";
 
-export function createUseStylesWithoutTheme(getStyles) {
+export function createUseStylesWithoutTheme(getStyles, getVariants) {
   const scope = {
     style: null,
+    variants: null,
     forceUpdate: [],
     unsubscribe: () => {},
   };
@@ -19,7 +20,7 @@ export function createUseStylesWithoutTheme(getStyles) {
     scope.unsubscribe();
     resetUsing();
 
-    scope.style = StyleSheet.create(getStyles());
+    scope.style = StyleSheet.create(getStyles?.() ?? {});
 
     const keys = getDependenciesKeys();
 
@@ -28,9 +29,24 @@ export function createUseStylesWithoutTheme(getStyles) {
 
   initStyle();
 
-  function useStyles() {
+  function useStyles(variants) {
     useForceUpdate(scope);
 
+    if (getVariants) {
+      const configVariants = getVariants();
+      const requestedVarians = {};
+
+      for (const key in variants) {
+        const value = configVariants[key][variants[key]];
+        Object.assign(requestedVarians, value);
+      }
+
+      return {
+        ...scope.style,
+        ...StyleSheet.create({ variants: requestedVarians }),
+      };
+    }
+
     return scope.style;
   }
 

package/src/make-use-styles/index.d.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { DefaultTheme } from "../default-theme";
+
+export function makeUseStyles<
+  Theme extends DefaultTheme,
+  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
+  VariantsConfig extends Record<string, StyleSheet.NamedStyles<any>> | undefined = undefined,
+>(config: {
+  styles?: (theme: Theme) => T | StyleSheet.NamedStyles<T>;
+  variants?: ((theme: Theme) => VariantsConfig) | undefined;
+}): <Variants extends { [Key in keyof VariantsConfig]: keyof VariantsConfig[Key] }>(
+  variants?: Partial<Variants>,
+) => T &
+  (VariantsConfig extends undefined
+    ? {}
+    : {
+        variants: {
+          [VKey in keyof Variants]: VKey extends keyof VariantsConfig ? VariantsConfig[VKey][Variants[VKey]] : never;
+        }[keyof Variants];
+      });

package/src/make-use-styles/index.js

@@ -0,0 +1,12 @@
+import { createUseStylesWithoutTheme } from "./create-use-styles-without-theme";
+import { createUseStylesTheme } from "./create-use-styles-theme";
+
+export function makeUseStyles({ styles, variants }) {
+  const hasThemeDependency = styles?.length === 1;
+
+  if (!hasThemeDependency) {
+    return createUseStylesWithoutTheme(styles, variants);
+  }
+
+  return createUseStylesTheme(styles);
+}

package/src/make-use-styles/types.ts

@@ -0,0 +1,43 @@
+// import { StyleSheet } from "react-native";
+// import { DefaultTheme } from "../DefaultTheme";
+
+// // // Source - https://stackoverflow.com/a/50375286
+// // // Posted by jcalz, modified by community. See post 'Timeline' for change history
+// // // Retrieved 2026-01-07, License - CC BY-SA 4.0
+
+// // type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (
+// //   x: infer I,
+// // ) => void
+// //   ? I
+// //   : never;
+
+// export function makeUseStyles<
+//   Theme extends DefaultTheme,
+//   T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
+//   V extends Record<string, StyleSheet.NamedStyles<any>>,
+// >(
+//   getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>,
+//   variants: V,
+// ): <Variants extends { [Key in keyof V]: keyof V[Key] }>(
+//   variants?: Partial<Variants>,
+// ) => T & {
+//   variants: {
+//     [VKey in keyof Variants]: VKey extends keyof V
+//       ? V[VKey][Variants[VKey]]
+//       : never;
+//   }[keyof Variants];
+// } {
+//   return ((variants: any) => {}) as any;
+// }
+
+// const useStyles = makeUseStyles(() => ({ some: { alignContent: "center" } }), {
+//   other: {
+//     one: { alignContent: "flex-end", fontStyle: "italic", fontFamily: "Inter" },
+//     two: { alignContent: "flex-end" },
+//   },
+//   more: {
+//     lol: { color: "red", width: 123 },
+//   },
+// });
+
+// const res = useStyles({ more: "lol"});

package/src/{makeUseStyles → make-use-styles}/utils.js

@@ -1,6 +1,6 @@
 import { optimizeDependencies } from "../dimensions/utils";
-import { getUsing } from "../dependencyUsage";
-import { getDependency } from "../dependencyRegistry";
+import { getUsing } from "../dependency-usage";
+import { getDependency } from "../dependency-registry";
 
 import { useEffect, useRef, useState } from "react";
 
@@ -17,9 +17,7 @@ export const useForceUpdate = (scope) => {
     scope.forceUpdate = scope.forceUpdate.concat(forceRerender);
 
     unsubscribeRef.current = () => {
-      scope.forceUpdate = scope.forceUpdate.filter(
-        (fn) => fn !== forceRerender
-      );
+      scope.forceUpdate = scope.forceUpdate.filter((fn) => fn !== forceRerender);
     };
   }
 
@@ -28,12 +26,11 @@ export const useForceUpdate = (scope) => {
       unsubscribeRef.current();
       unsubscribeRef.current = noop;
     },
-    []
+    [],
   );
 };
 
-export const getDependenciesKeys = () =>
-  Object.keys(optimizeDependencies(getUsing())).sort();
+export const getDependenciesKeys = () => Object.keys(optimizeDependencies(getUsing())).sort();
 
 export const subscribe = (dependenciesKeys, handler) => {
   if (dependenciesKeys.length === 0) {
@@ -50,14 +47,12 @@ export const subscribe = (dependenciesKeys, handler) => {
             const dependencyName = dependenciesKeys[index];
 
             if (!onChange) {
-              console.warn(
-                `[react-native-stylex] Could not find onChange handler for ${dependencyName}!`
-              );
+              console.warn(`[react-native-stylex] Could not find onChange handler for ${dependencyName}!`);
             }
 
             return !!onChange;
           }
-        : Boolean
+        : Boolean,
     )
     .map((onChange) => onChange(handler));
 

package/src/media-query/base.ts

@@ -2,42 +2,31 @@ import { ScaledSize } from "react-native";
 
 import { getWindowDimensions } from "../dimensions";
 
-export const createDimensionQueryHelper = <Value>(
-  queryFunction: (options: { value: Value; dimensions: ScaledSize }) => boolean
-) => <T>(value: Value, styles: T): null | T => {
-  const isMatched = queryFunction({ value, dimensions: getWindowDimensions() });
+export const createDimensionQueryHelper =
+  <Value>(queryFunction: (options: { value: Value; dimensions: ScaledSize }) => boolean) =>
+  <T>(value: Value, styles: T): null | T => {
+    const isMatched = queryFunction({
+      value,
+      dimensions: getWindowDimensions(),
+    });
 
-  if (isMatched) {
-    return styles;
-  }
+    if (isMatched) {
+      return styles;
+    }
 
-  return null;
-};
+    return null;
+  };
 
-export const maxHeight = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value >= dimensions.height
-);
+export const maxHeight = createDimensionQueryHelper<number>(({ value, dimensions }) => value >= dimensions.height);
 
-export const maxWidth = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value >= dimensions.width
-);
+export const maxWidth = createDimensionQueryHelper<number>(({ value, dimensions }) => value >= dimensions.width);
 
-export const minHeight = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value <= dimensions.height
-);
+export const minHeight = createDimensionQueryHelper<number>(({ value, dimensions }) => value <= dimensions.height);
 
-export const minWidth = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value <= dimensions.width
-);
+export const minWidth = createDimensionQueryHelper<number>(({ value, dimensions }) => value <= dimensions.width);
 
-export const minAspectRatio = createDimensionQueryHelper<number>(
-  ({ value, dimensions: { width, height } }) => value <= width / height
-);
+export const minAspectRatio = createDimensionQueryHelper<number>(({ value, dimensions: { width, height } }) => value <= width / height);
 
-export const maxAspectRatio = createDimensionQueryHelper<number>(
-  ({ value, dimensions: { width, height } }) => value >= width / height
-);
+export const maxAspectRatio = createDimensionQueryHelper<number>(({ value, dimensions: { width, height } }) => value >= width / height);
 
-export const aspectRatio = createDimensionQueryHelper<number>(
-  ({ value, dimensions: { width, height } }) => value === width / height
-);
+export const aspectRatio = createDimensionQueryHelper<number>(({ value, dimensions: { width, height } }) => value === width / height);

package/src/media-query/breakpoints.ts

@@ -10,7 +10,7 @@ const orderByMin = [minWidth, minAspectRatio, minHeight];
 const toOrderedBreakpointNames = <TBreakpoints extends Record<string, number>>(
   values: any,
   breakpoints: any,
-  matchFunction: any
+  matchFunction: any,
 ): Array<keyof TBreakpoints> => {
   const result = Object.keys(values)
     .filter((e) => e !== "default")
@@ -26,15 +26,13 @@ const toOrderedBreakpointNames = <TBreakpoints extends Record<string, number>>(
 /*
  * To debug use analog on CSS: https://codepen.io/retyui/pen/dyOzKzV
  */
-export function createBreakpointsMatcher<
-  TBreakpoints extends Record<string, number>
->(
+export function createBreakpointsMatcher<TBreakpoints extends Record<string, number>>(
   breakpoints: TBreakpoints,
-  matchFunction = minWidth
+  matchFunction = minWidth,
 ): BreakpointsMatcher<TBreakpoints> {
   return function breakpointsMatcher(values: any) {
     /* istanbul ignore next */
-    // @ts-expect-error: was removed
+    // @ts-expect-error
     if (process.env.NODE_ENV !== "production") {
       const invalidKeys = Object.keys(values).filter((key) => {
         return key !== "default" && breakpoints[key] === undefined;
@@ -46,47 +44,30 @@ export function createBreakpointsMatcher<
 
 allowed keys: ${Object.keys(breakpoints).join(", ")}
 unexpected keys: ${invalidKeys.join(", ")}
-`
+`,
         );
       }
     }
 
-    const orderedBreakpointNames = toOrderedBreakpointNames<TBreakpoints>(
-      values,
-      breakpoints,
-      matchFunction
-    );
+    const orderedBreakpointNames = toOrderedBreakpointNames<TBreakpoints>(values, breakpoints, matchFunction);
 
-    const key =
-      orderedBreakpointNames.find((breakpointName) =>
-        matchFunction(
-          breakpoints[breakpointName] as number,
-          values[breakpointName]
-        )
-      ) || "default";
+    const key = orderedBreakpointNames.find((breakpointName) => matchFunction(breakpoints[breakpointName] as number, values[breakpointName])) || "default";
 
     return values[key] || null;
   };
 }
 
-function getNextByKey<TBreakpoints extends Record<string, number>>(
-  breakpoints: TBreakpoints,
-  key: keyof TBreakpoints
-) {
+function getNextByKey<TBreakpoints extends Record<string, number>>(breakpoints: TBreakpoints, key: keyof TBreakpoints) {
   type Keys = keyof TBreakpoints;
 
-  const breakpointsKeys: Array<Keys> = Object.keys(breakpoints).sort(
-    (a: Keys, b: Keys) => breakpoints[a]!  - breakpoints[b]!
-  );
+  const breakpointsKeys: Array<Keys> = Object.keys(breakpoints).sort((a: Keys, b: Keys) => breakpoints[a]! - breakpoints[b]!);
   const index = breakpointsKeys.indexOf(key);
   const nextKey: Keys | undefined = breakpointsKeys[index + 1];
 
   return nextKey;
 }
 
-export function createBreakpoints<TBreakpoints extends Record<string, number>>(
-  breakpoints: TBreakpoints
-) {
+export function createBreakpoints<TBreakpoints extends Record<string, number>>(breakpoints: TBreakpoints) {
   type Keys = keyof TBreakpoints;
 
   function up<T>(key: Keys, value: T): T | null {
@@ -101,20 +82,14 @@ export function createBreakpoints<TBreakpoints extends Record<string, number>>(
     const nextKey = getNextByKey<TBreakpoints>(breakpoints, key);
 
     if (nextKey !== undefined) {
-      return minWidth(
-        breakpoints[key] as number,
-        maxWidth(breakpoints[nextKey]! - 0.05, value)
-      );
+      return minWidth(breakpoints[key] as number, maxWidth(breakpoints[nextKey]! - 0.05, value));
     }
 
     return minWidth(breakpoints[key] as number, value);
   }
 
   function between<T>(start: Keys, end: Keys, value: T): T | null {
-    return minWidth(
-      breakpoints[start] as number,
-      maxWidth(breakpoints[end]! - 0.05, value)
-    );
+    return minWidth(breakpoints[start] as number, maxWidth(breakpoints[end]! - 0.05, value));
   }
 
   return { up, down, only, between };

package/src/orientation.ts

@@ -2,16 +2,12 @@ import { getScreenDimensions } from "./dimensions";
 
 type OrientationType = "portrait" | "landscape";
 
-export function orientation<T>(
-  spec: { [orientation in OrientationType]?: T }
-): T | undefined {
+export function orientation<T>(spec: { [orientation in OrientationType]?: T }): T | undefined {
   const { height, width } = getScreenDimensions();
 
   return width <= height ? spec.portrait : spec.landscape;
 }
 
-export const portraitOrientation = <T>(portraitStyles: T): T | undefined =>
-  orientation<T>({ portrait: portraitStyles });
+export const portraitOrientation = <T>(portraitStyles: T): T | undefined => orientation<T>({ portrait: portraitStyles });
 
-export const landscapeOrientation = <T>(landscapeStyles: T): T | undefined =>
-  orientation<T>({ landscape: landscapeStyles });
+export const landscapeOrientation = <T>(landscapeStyles: T): T | undefined => orientation<T>({ landscape: landscapeStyles });

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

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

package/src/safe-area/index.tsx

@@ -1,13 +1,13 @@
 import "./init";
 
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 
 import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
 import { EdgeInsets } from "./types";
 import { state } from "./state";
 
-export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
-export { SafeAreaProvider } from "./SafeAreaProvider";
+export { StylexSaveAreaConsumer } from "./stylex-save-area-consumer";
+export { SafeAreaProvider } from "./safe-area-provider";
 
 export function getSafeArea(): EdgeInsets {
   onUse(SAFE_AREA_DEPENDENCY_KEY);

package/src/safe-area/init.tsx

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

package/src/safe-area/safe-area-provider.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { SafeAreaProvider as CoreSafeAreaProvider, initialWindowMetrics, initialWindowSafeAreaInsets } from "react-native-safe-area-context";
+
+import { StylexSaveAreaConsumer } from "./stylex-save-area-consumer";
+import { SafeAreaViewProps } from "./types";
+
+export function SafeAreaProvider(props: SafeAreaViewProps): React.JSX.Element | null {
+  return (
+    <CoreSafeAreaProvider
+      initialSafeAreaInsets={props.initialSafeAreaInsets || initialWindowSafeAreaInsets}
+      initialMetrics={props.initialMetrics || initialWindowMetrics}
+      {...props}
+    >
+      {props.children}
+      <StylexSaveAreaConsumer />
+    </CoreSafeAreaProvider>
+  );
+}

package/src/safe-area/{StylexSaveAreaConsumer.ts → stylex-save-area-consumer.ts}

@@ -1,17 +1,16 @@
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { EdgeInsets } from "./types";
 
-import { emit } from "./eventEmitter";
+import { emit } from "./event-emitter";
 import { state } from "./state";
 import { useLayoutEffect } from "react";
+import type React from "react";
 
-export function StylexSaveAreaConsumer(): JSX.Element | null {
+export function StylexSaveAreaConsumer(): React.JSX.Element | null {
   const insets: EdgeInsets = useSafeAreaInsets();
 
   useLayoutEffect(() => {
-    const isChanged = Object.entries(insets).some(
-      ([key, value]) => state.insets[key as keyof EdgeInsets] !== value
-    );
+    const isChanged = Object.entries(insets).some(([key, value]) => state.insets[key as keyof EdgeInsets] !== value);
 
     if (isChanged) {
       state.insets = insets;

package/src/safe-area/types.ts

@@ -1,4 +1,4 @@
-import {SafeAreaProviderProps} from "react-native-safe-area-context";
+import { SafeAreaProviderProps } from "react-native-safe-area-context";
 
 export interface EdgeInsets {
   top: number;
@@ -7,4 +7,4 @@ export interface EdgeInsets {
   left: number;
 }
 
-export interface SafeAreaViewProps extends SafeAreaProviderProps { }
+export interface SafeAreaViewProps extends SafeAreaProviderProps {}

package/src/{__tests__ → tests}/createEventEmitter.test.ts

@@ -1,4 +1,4 @@
-import { createEventEmitter } from "../createEventEmitter";
+import { createEventEmitter } from "../create-event-emitter";
 
 it("should call handler when invoke emit", () => {
   const a = createEventEmitter("event");