@react-native-styled-system/core 1.4.2 → 2.1.1

package/lib/typescript/src/internal/TokenParser/TypographyParser.d.ts

@@ -1,4 +1,4 @@
 import type { ThemedDict } from '../../@types/ThemedDict';
 import type { Token, TypographyValue } from '../../@types/Token';
-export declare const createTypographyParser: (theme: ThemedDict) => (token?: Token<'typography'>) => TypographyValue | undefined;
+export declare const createTypographyParser: (theme: ThemedDict) => (token?: Token<"typography">) => TypographyValue | undefined;
 //# sourceMappingURL=TypographyParser.d.ts.map

package/lib/typescript/src/internal/TokenParser/TypographyParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyParser.d.ts","sourceRoot":"","sources":["../../../../../src/internal/TokenParser/TypographyParser.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEjE,eAAO,MAAM,sBAAsB,UAAW,UAAU,cACtC,MAAM,YAAY,CAAC,gCACpC,CAAC"}
+{"version":3,"file":"TypographyParser.d.ts","sourceRoot":"","sources":["../../../../../src/internal/TokenParser/TypographyParser.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEjE,eAAO,MAAM,sBAAsB,GAAI,OAAO,UAAU,MAC9C,QAAQ,KAAK,CAAC,YAAY,CAAC,gCACpC,CAAC"}

package/lib/typescript/src/internal/util/printWarning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"printWarning.d.ts","sourceRoot":"","sources":["../../../../../src/internal/util/printWarning.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAAS,MAAM,SAIvC,CAAC"}
+{"version":3,"file":"printWarning.d.ts","sourceRoot":"","sources":["../../../../../src/internal/util/printWarning.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,SAIvC,CAAC"}

package/lib/typescript/src/internal/util/resolveResponsiveValue.d.ts

@@ -0,0 +1,12 @@
+import type { ResolvedTextSxProps, TextSxProps } from '../../@types/SxProps';
+export declare const resolveResponsiveValue: <T>({ value, breakpoints, screenWidth, }: {
+    value: T | T[] | undefined | null;
+    breakpoints: number[];
+    screenWidth: number;
+}) => T | undefined | null;
+export declare const resolveResponsiveSx: ({ sx, breakpoints, screenWidth, }: {
+    sx: TextSxProps | undefined;
+    breakpoints: number[];
+    screenWidth: number;
+}) => ResolvedTextSxProps;
+//# sourceMappingURL=resolveResponsiveValue.d.ts.map

package/lib/typescript/src/internal/util/resolveResponsiveValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveResponsiveValue.d.ts","sourceRoot":"","sources":["../../../../../src/internal/util/resolveResponsiveValue.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE7E,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAE,sCAIvC;IACD,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,CAAC,GAAG,SAAS,GAAG,IAkBnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,mCAIjC;IACD,EAAE,EAAE,WAAW,GAAG,SAAS,CAAC;IAC5B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,mBAkBH,CAAC"}

package/lib/typescript/src/provider/StyledSystemProvider.d.ts

@@ -3,11 +3,13 @@ import React from 'react';
 import type { ThemedDict } from '../@types/ThemedDict';
 export type StyledSystemContextValue = {
     theme: ThemedDict;
+    screenWidth: number;
 };
 export declare const StyledSystemContext: React.Context<StyledSystemContextValue>;
 type Props = PropsWithChildren<{
     theme: Partial<ThemedDict>;
+    screenWidth?: number;
 }>;
-export declare const StyledSystemProvider: ({ children, theme }: Props) => React.JSX.Element;
+export declare const StyledSystemProvider: ({ children, theme, screenWidth }: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=StyledSystemProvider.d.ts.map

package/lib/typescript/src/provider/StyledSystemProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledSystemProvider.d.ts","sourceRoot":"","sources":["../../../../src/provider/StyledSystemProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,yCAE9B,CAAC;AACH,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAAE,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAAE,CAAC,CAAC;AAE/D,eAAO,MAAM,oBAAoB,wBAAyB,KAAK,sBAM9D,CAAC"}
+{"version":3,"file":"StyledSystemProvider.d.ts","sourceRoot":"","sources":["../../../../src/provider/StyledSystemProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,yCAG9B,CAAC;AACH,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAAE,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAerF,eAAO,MAAM,oBAAoB,qCAboC,KAAK,sBAab,CAAC"}

package/lib/typescript/src/util/createSxComponent.d.ts

@@ -3,11 +3,11 @@ import React from 'react';
 import type { SxProps, TextSxProps } from '../@types/SxProps';
 import type { UseSxOptions } from '../hook/useSx';
 export declare function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>): ({ defaultProps, sxOptions, }?: {
-    defaultProps?: (Props & SxProps) | undefined;
-    sxOptions?: UseSxOptions | undefined;
-}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & SxProps> & React.RefAttributes<Ref>>;
+    defaultProps?: Omit<Props, keyof SxProps> & SxProps;
+    sxOptions?: UseSxOptions;
+}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, keyof SxProps> & SxProps> & React.RefAttributes<Ref>>;
 export declare function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>): ({ defaultProps, sxOptions, }?: {
-    defaultProps?: (Props & TextSxProps) | undefined;
-    sxOptions?: UseSxOptions | undefined;
-}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & TextSxProps> & React.RefAttributes<Ref>>;
+    defaultProps?: Omit<Props, keyof TextSxProps> & TextSxProps;
+    sxOptions?: UseSxOptions;
+}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, keyof TextSxProps> & TextSxProps> & React.RefAttributes<Ref>>;
 //# sourceMappingURL=createSxComponent.d.ts.map

package/lib/typescript/src/util/createSxComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSxComponent.d.ts","sourceRoot":"","sources":["../../../../src/util/createSxComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC;;;yGAetF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC;;;6GAkB1F"}
+{"version":3,"file":"createSxComponent.d.ts","sourceRoot":"","sources":["../../../../src/util/createSxComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,IAG7E,+BAGL;IAAE,YAAY,CAAC,uCAAc;IAAC,SAAS,CAAC,EAAE,YAAY,CAAA;CAAO,6HAWjE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,IAGjF,+BAGL;IAAE,YAAY,CAAC,+CAAc;IAAC,SAAS,CAAC,EAAE,YAAY,CAAA;CAAO,qIAcjE"}

package/lib/typescript/src/util/createTheme.d.ts

@@ -0,0 +1,4 @@
+import type { ThemedDict } from '../@types/ThemedDict';
+export declare function createTheme(config?: Partial<ThemedDict>): ThemedDict;
+export declare function createTheme(base: ThemedDict, overrides: Partial<ThemedDict>): ThemedDict;
+//# sourceMappingURL=createTheme.d.ts.map

package/lib/typescript/src/util/createTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../../../src/util/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,wBAAgB,WAAW,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;AACtE,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC"}

package/lib/typescript/src/util/propsToThemedStyle.d.ts

@@ -1,10 +1,12 @@
-import type { TextStyle } from 'react-native';
+import type { AnyStyle } from '../@types/AnyStyle';
 import type { TextSxProps } from '../@types/SxProps';
 import type { ThemedDict } from '../@types/ThemedDict';
 export type ThemedStyleType = 'ViewStyle' | 'TextStyle';
-export declare const propsToThemedStyle: ({ theme, sx, styleType, }: {
-    theme?: ThemedDict | undefined;
-    sx?: TextSxProps | undefined;
-    styleType?: ThemedStyleType | undefined;
-}) => TextStyle | undefined;
+export declare const propsToThemedStyle: ({ theme, sx: rawSx, styleType, breakpoints, screenWidth, }: {
+    theme?: ThemedDict;
+    sx?: TextSxProps;
+    styleType?: ThemedStyleType;
+    breakpoints?: number[];
+    screenWidth?: number;
+}) => AnyStyle | undefined;
 //# sourceMappingURL=propsToThemedStyle.d.ts.map

package/lib/typescript/src/util/propsToThemedStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propsToThemedStyle.d.ts","sourceRoot":"","sources":["../../../../src/util/propsToThemedStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAQvD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,WAAW,CAAC;AACxD,eAAO,MAAM,kBAAkB;;;;MAQ3B,SAAS,GAAG,SAkJf,CAAC"}
+{"version":3,"file":"propsToThemedStyle.d.ts","sourceRoot":"","sources":["../../../../src/util/propsToThemedStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAuB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AASvD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,WAAW,CAAC;AACxD,eAAO,MAAM,kBAAkB,GAAI,4DAMhC;IACD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,KAAG,QAAQ,GAAG,SAwJd,CAAC"}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@react-native-styled-system/core",
-  "version": "1.4.2",
+  "version": "2.1.1",
   "description": "React Native Styled System",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "homepage": "https://github.com/mym0404/react-native-styled-system",
   "scripts": {
     "gen": "node bin/theme-gen.js bin/theme.ts bin/ret.d.ts",
-    "prepack": "bob build"
+    "prepack": "bob build",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -16,15 +17,15 @@
   "author": "zmin9 <lucy@teamturing.com>",
   "license": "MIT",
   "devDependencies": {
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/invariant": "^2.2.37",
-    "@types/react": "^18.2.65",
-    "@types/react-test-renderer": "^18",
+    "@types/react": "^19",
+    "@types/react-test-renderer": "^19",
     "prettier": "^3.2.5",
     "react": "*",
-    "react-native": "^0.73.6",
+    "react-native": "0.81.5",
     "react-native-builder-bob": "^0.23.2",
-    "react-test-renderer": "^18.2.0",
+    "react-test-renderer": "^19",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
@@ -62,10 +63,7 @@
         }
       ]
     ],
-    "exclude": [
-      "**/{__tests__,__fixtures__,__mocks__}/**",
-      "**/*.test.*"
-    ]
+    "exclude": "**/*.test.*"
   },
-  "gitHead": "d4b73dc3ddbde4ce02420824dcaafb6fbbd67cf1"
+  "gitHead": "e92be0abf1e3f97f3705fc8da07c10ffd467ab1f"
 }

package/src/@types/AnyStyle.ts

@@ -0,0 +1,3 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export type AnyStyle = Omit<ViewStyle & TextStyle, 'userSelect'>;

package/src/@types/Responsive.ts

@@ -0,0 +1,7 @@
+export type Responsive<T> = T | (T | undefined)[];
+
+export type ResponsiveExcludedKey = 'transform';
+
+export const RESPONSIVE_EXCLUDED_KEYS: ReadonlySet<string> = new Set<ResponsiveExcludedKey>([
+  'transform',
+]);

package/src/@types/SxProps.ts

@@ -1,5 +1,6 @@
 import type { TextStyle, ViewStyle } from 'react-native';
 
+import type { Responsive, ResponsiveExcludedKey } from './Responsive';
 import type { Token } from './Token';
 
 export type SxPropsKeys = keyof SxProps;
@@ -114,6 +115,11 @@ export const _textStylePropList = [
   'typography',
   't',
 ] satisfies (Omit<TextSxPropsKey, keyof TextSxPropsKey> | 'style')[];
+
+// =================
+// Resolved types (internal, no Responsive wrapping)
+// =================
+
 interface ThemedColorTokenProps {
   backgroundColor: Token<'colors'>;
   bg: Token<'colors'>; // backgroundColor
@@ -158,9 +164,9 @@ interface ThemedSpaceTokenProps {
   right: Token<'space'>;
   bottom: Token<'space'>;
   left: Token<'space'>;
-  gap: Token<'space'>; // only works if parsed result is number
-  gapX: Token<'space'>; // only works if parsed result is number
-  gapY: Token<'space'>; // only works if parsed result is number
+  gap: Token<'space'>;
+  gapX: Token<'space'>;
+  gapY: Token<'space'>;
 }
 
 interface ThemedSizeTokenProps {
@@ -216,8 +222,8 @@ interface ThemedViewStyleProps {
   display: ViewStyle['display'];
   elevation: ViewStyle['elevation'];
   zIndex: ViewStyle['zIndex'];
-  absoluteFill?: boolean; // shortcut - position: absoulte, t,r,b,l: 0
-  center?: boolean; // shortcut - justifyContent, alignItems: center
+  absoluteFill?: boolean;
+  center?: boolean;
 }
 
 interface ThemedTextStyleProps {
@@ -241,7 +247,7 @@ interface ThemedTextStyleProps {
   t: Token<'typography'>; // typography
 }
 
-type BaseSxProps = Partial<
+type ResolvedBaseSxProps = Partial<
   ThemedViewStyleProps &
     ThemedSpaceTokenProps &
     ThemedSizeTokenProps &
@@ -249,7 +255,30 @@ type BaseSxProps = Partial<
     ThemedRadiiTokenProps
 >;
 
-type BaseTextSxProps = BaseSxProps & Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;
+type ResolvedBaseTextSxProps = ResolvedBaseSxProps &
+  Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;
+
+export interface ResolvedSxProps extends ResolvedBaseSxProps {
+  sx?: ResolvedBaseSxProps;
+}
+export interface ResolvedTextSxProps extends ResolvedBaseTextSxProps {
+  sx?: ResolvedBaseTextSxProps;
+}
+
+// =================
+// Public types (with Responsive wrapping)
+// =================
+
+type WithResponsive<T> = {
+  [K in keyof T]: K extends ResponsiveExcludedKey
+    ? T[K]
+    : undefined extends T[K]
+      ? Responsive<Exclude<T[K], undefined>> | undefined
+      : Responsive<T[K]>;
+};
+
+type BaseSxProps = WithResponsive<ResolvedBaseSxProps>;
+type BaseTextSxProps = WithResponsive<ResolvedBaseTextSxProps>;
 
 export interface SxProps extends BaseSxProps {
   sx?: BaseSxProps;