@codeandmoney/soelma 0.0.0-dev.6 → 0.0.0-dev.8

package/appearance/index.d.ts

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

package/appearance/index.js

@@ -1,8 +1,8 @@
 import "./init";
 import { Appearance } from "react-native";
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 import { UI_MODE_DEPENDENCY_KEY } from "./consts";
-export function appearance({ dark, light, default: defaultScheme, }) {
+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") {

package/appearance/init.js

@@ -1,6 +1,6 @@
 import { Appearance } from "react-native";
-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";
 const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
 addDependency(UI_MODE_DEPENDENCY_KEY, (handler) => on(handler));

package/context.d.ts

@@ -1,3 +1,3 @@
-import { DefaultTheme } from "./DefaultTheme";
+import { DefaultTheme } from "./default-theme";
 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/dark-mode/index.d.ts

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

package/dark-mode/index.js

@@ -1,8 +1,8 @@
 import "./init";
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 import { UI_MODE_DEPENDENCY_KEY } from "./consts";
 import { state } from "./state";
-export function uiMode({ dark, light, }) {
+export function uiMode({ dark, light }) {
     onUse(UI_MODE_DEPENDENCY_KEY);
     if (state.mode === "dark") {
         return dark;

package/dark-mode/init.js

@@ -1,6 +1,6 @@
 import { eventEmitter } 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";
 const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);

package/dimensions/index.js

@@ -1,6 +1,6 @@
 import "./init";
 import { Dimensions } from "react-native";
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 import { WINDOW_DEPENDENCY_KEY, SCREEN_DEPENDENCY_KEY } from "./consts";
 const get = (dim) => Dimensions.get(dim);
 export function getWindowDimensions() {

package/dimensions/init.js

@@ -1,6 +1,6 @@
 import { Dimensions } 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;
 const state = { window: get("window"), screen: get("screen") };

package/i18n.d.ts

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

package/i18n.js

@@ -1,5 +1,5 @@
 import { I18nManager } from "react-native";
-export function i18n({ rtl, ltr, }) {
+export function i18n({ rtl, ltr }) {
     if (I18nManager.isRTL) {
         return rtl;
     }

package/index.d.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/index.js

@@ -1,5 +1,5 @@
-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 { useColorTransition } from "./use-color-transition";
+export { makeUseStyles } from "./make-use-styles";

package/{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: [],
@@ -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/{makeUseStyles/createUseStylesWithoutTheme.js → make-use-styles/create-use-styles-without-theme.js}

@@ -1,8 +1,8 @@
 import { StyleSheet } from "react-native";
-import { resetUsing } from "../dependencyUsage";
+import { resetUsing } from "../dependency-usage";
 import { getDependenciesKeys, subscribe, useForceUpdate } from "./utils";
 
-export function createUseStylesWithoutTheme(getStyles, configVariants) {
+export function createUseStylesWithoutTheme(getStyles, getVariants) {
   const scope = {
     style: null,
     variants: null,
@@ -32,7 +32,8 @@ export function createUseStylesWithoutTheme(getStyles, configVariants) {
   function useStyles(variants) {
     useForceUpdate(scope);
 
-    if (configVariants) {
+    if (getVariants) {
+      const configVariants = getVariants();
       const requestedVarians = {};
 
       for (const key in variants) {

package/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/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/{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);
     };
   }
 
@@ -32,8 +30,7 @@ export const useForceUpdate = (scope) => {
   );
 };
 
-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,9 +47,7 @@ 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;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.0-dev.6",
+  "version": "0.0.0-dev.8",
   "private": false,
   "main": "index.js",
   "types": "index.d.ts",

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

@@ -1,3 +1,3 @@
-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/safe-area/index.d.ts

@@ -1,5 +1,5 @@
 import "./init";
 import { EdgeInsets } from "./types";
-export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
-export { SafeAreaProvider } from "./SafeAreaProvider";
+export { StylexSaveAreaConsumer } from "./stylex-save-area-consumer";
+export { SafeAreaProvider } from "./safe-area-provider";
 export declare function getSafeArea(): EdgeInsets;

package/safe-area/index.js

@@ -1,9 +1,9 @@
 import "./init";
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
 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() {
     onUse(SAFE_AREA_DEPENDENCY_KEY);
     return state.insets;

package/safe-area/init.js

@@ -1,4 +1,4 @@
-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) => on(handler));

package/safe-area/{SafeAreaProvider.js → safe-area-provider.js}

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

package/safe-area/state.d.ts

@@ -1,3 +1,8 @@
 export declare const state: {
-    insets: import("react-native-safe-area-context").EdgeInsets;
+    insets: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
 };

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

@@ -1,5 +1,5 @@
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { emit } from "./eventEmitter";
+import { emit } from "./event-emitter";
 import { state } from "./state";
 import { useLayoutEffect } from "react";
 export function StylexSaveAreaConsumer() {

package/{useColorTransition.d.ts → use-color-transition.d.ts}

@@ -1,5 +1,5 @@
 import { Animated } from "react-native";
-import { DefaultTheme } from "./DefaultTheme";
+import { DefaultTheme } from "./default-theme";
 export declare function useColorTransition<Theme = DefaultTheme>(colorGetterFn: (theme: Theme) => string, options?: {
     duration: number;
 }): Animated.AnimatedInterpolation<string>;

package/{useColorTransition.js → use-color-transition.js}

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from "react";
 import { Animated } from "react-native";
-import { useTheme } from "./useTheme";
+import { useTheme } from "./use-theme";
 const { Value, timing } = Animated;
 const INITIAL_VALUE = 0;
 const defaultOptions = { duration: 250 };

package/{useTheme.d.ts → use-theme.d.ts}

@@ -1,2 +1,2 @@
-import type { DefaultTheme } from "./DefaultTheme";
+import type { DefaultTheme } from "./default-theme";
 export declare const useTheme: <Theme = DefaultTheme>() => Theme;

package/{withStyles.js → with-styles.js}

@@ -1,4 +1,4 @@
-import React, { forwardRef, } from "react";
+import React, { forwardRef } from "react";
 export function withStyles(useStyles) {
     function WithStyles(Component) {
         const renderComponent = (props, ref) => {

package/makeUseStyles/index.d.ts

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

package/makeUseStyles/index.js

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