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

package/context.d.ts

@@ -1,4 +1,3 @@
-/// <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/makeUseStyles/createUseStylesWithoutTheme.js

@@ -2,9 +2,10 @@ import { StyleSheet } from "react-native";
 import { resetUsing } from "../dependencyUsage";
 import { getDependenciesKeys, subscribe, useForceUpdate } from "./utils";
 
-export function createUseStylesWithoutTheme(getStyles) {
+export function createUseStylesWithoutTheme(getStyles, configVariants) {
   const scope = {
     style: null,
+    variants: null,
     forceUpdate: [],
     unsubscribe: () => {},
   };
@@ -28,10 +29,16 @@ export function createUseStylesWithoutTheme(getStyles) {
 
   initStyle();
 
-  function useStyles() {
+  function useStyles(variants) {
     useForceUpdate(scope);
 
-    return scope.style;
+    const requestedVarians = {};
+    for (const key in variants) {
+      const value = configVariants[key][variants[key]];
+      Object.assign(requestedVarians, value);
+    }
+
+    return { ...scope.style, ...StyleSheet.create(requestedVarians) };
   }
 
   return useStyles;

package/makeUseStyles/index.d.ts

@@ -1,7 +1,33 @@
 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<T> | StyleSheet.NamedStyles<any>
+//   >,
+// >(
+//   getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>,
+//   variants: V,
+// ): () => T;
+
 export function makeUseStyles<
   Theme extends DefaultTheme,
   T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
->(getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>): () => T;
+  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;
+}

package/makeUseStyles/index.js

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

package/makeUseStyles/types.js

@@ -0,0 +1,39 @@
+"use strict";
+// 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/makeUseStyles/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/media-query/base.d.ts

@@ -2,7 +2,7 @@ import { ScaledSize } from "react-native";
 export declare const createDimensionQueryHelper: <Value>(queryFunction: (options: {
     value: Value;
     dimensions: ScaledSize;
-}) => boolean) => <T>(value: Value, styles: T) => T | null;
+}) => boolean) => <T>(value: Value, styles: T) => null | T;
 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;

package/media-query/breakpoints.d.ts

@@ -11,8 +11,8 @@ interface BreakpointsMatcher<TBreakpoints> {
 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;
+    down: <T>(key: keyof TBreakpoints, value: T) => T | null;
+    only: <T>(key: keyof TBreakpoints, value: T) => T | null;
+    between: <T>(start: keyof TBreakpoints, end: keyof TBreakpoints, value: T) => T | null;
 };
 export {};

package/media-query/breakpoints.js

@@ -15,7 +15,7 @@ const toOrderedBreakpointNames = (values, breakpoints, matchFunction) => {
 export function createBreakpointsMatcher(breakpoints, matchFunction = minWidth) {
     return function breakpointsMatcher(values) {
         /* 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;

package/package.json

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

package/safe-area/SafeAreaProvider.d.ts

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

package/safe-area/StylexSaveAreaConsumer.d.ts

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

package/safe-area/state.d.ts

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

package/withStyles.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { ComponentType } from "react";
 interface InjectedStyledProps<Styles> {
     styles: Styles;
 }
 export type InferInjectedStyledProps<Fn extends (...args: any) => any> = InjectedStyledProps<ReturnType<Fn>>;
-export declare function withStyles<Styles>(useStyles: () => Styles): <TComponent extends React.ComponentType<any>>(Component: TComponent) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<React.ComponentProps<TComponent>, "styles">> & React.RefAttributes<React.ElementRef<TComponent>>>;
+export declare function withStyles<Styles>(useStyles: () => Styles): <TComponent extends ComponentType<any>>(Component: TComponent) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.ComponentProps<TComponent>> & React.RefAttributes<React.ComponentRef<TComponent>>>;
 export {};

package/withStyles.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { forwardRef, } from "react";
 export function withStyles(useStyles) {
     function WithStyles(Component) {
@@ -7,6 +6,7 @@ export function withStyles(useStyles) {
             // @ts-expect-error: 'ref' as never
             return <Component {...props} ref={ref} styles={styles}/>;
         };
+        // @ts-expect-error
         return forwardRef(renderComponent);
     }
     return WithStyles;