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

package/src/util/createSxComponent.tsx

@@ -6,11 +6,13 @@ import type { UseSxOptions } from '../hook/useSx';
 import { useSx } from '../hook/useSx';
 
 export function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  type MergedProps = Omit<Props, keyof SxProps> & SxProps;
+
   return ({
     defaultProps,
     sxOptions,
-  }: { defaultProps?: Props & SxProps; sxOptions?: UseSxOptions } = {}) => {
-    const Transformed = forwardRef<Ref, Props & SxProps>(function (props, ref) {
+  }: { defaultProps?: MergedProps; sxOptions?: UseSxOptions } = {}) => {
+    const Transformed = forwardRef<Ref, MergedProps>(function (props, ref) {
       const { filteredProps, getStyle } = useSx({ ...defaultProps, ...props }, sxOptions);
 
       return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
@@ -23,11 +25,13 @@ export function createSxComponent<Props extends object, Ref>(Base: ComponentType
 }
 
 export function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  type MergedProps = Omit<Props, keyof TextSxProps> & TextSxProps;
+
   return ({
     defaultProps,
     sxOptions,
-  }: { defaultProps?: Props & TextSxProps; sxOptions?: UseSxOptions } = {}) => {
-    const Transformed = forwardRef<Ref, Props & TextSxProps>(function (props, ref) {
+  }: { defaultProps?: MergedProps; sxOptions?: UseSxOptions } = {}) => {
+    const Transformed = forwardRef<Ref, MergedProps>(function (props, ref) {
       const { filteredProps, getStyle } = useSx(
         { ...defaultProps, ...props },
         { styleType: 'TextStyle', ...sxOptions },

package/src/util/createTheme.test.ts

@@ -0,0 +1,126 @@
+import type { ThemedDict } from '../@types/ThemedDict';
+import { defaultTheme } from '../@types/ThemedDict';
+
+import { createTheme } from './createTheme';
+
+describe('createTheme', () => {
+  describe('create mode (single argument)', () => {
+    it('returns all empty defaults when called without arguments', () => {
+      const theme = createTheme();
+      expect(theme).toEqual({
+        colors: {},
+        space: {},
+        sizes: {},
+        radii: {},
+        typography: {},
+        breakpoints: [],
+      });
+    });
+
+    it('returns all empty defaults when called with empty object', () => {
+      const theme = createTheme({});
+      expect(theme).toEqual({
+        colors: {},
+        space: {},
+        sizes: {},
+        radii: {},
+        typography: {},
+        breakpoints: [],
+      });
+    });
+
+    it('keeps provided groups and fills missing ones with empty defaults', () => {
+      const theme = createTheme({
+        colors: { primary: '#000' },
+        space: { '1': 4 },
+      });
+      expect(theme.colors).toEqual({ primary: '#000' });
+      expect(theme.space).toEqual({ '1': 4 });
+      expect(theme.sizes).toEqual({});
+      expect(theme.radii).toEqual({});
+      expect(theme.typography).toEqual({});
+      expect(theme.breakpoints).toEqual([]);
+    });
+
+    it('keeps provided breakpoints', () => {
+      const theme = createTheme({ breakpoints: [480, 768] });
+      expect(theme.breakpoints).toEqual([480, 768]);
+    });
+  });
+
+  describe('extend mode (two arguments)', () => {
+    const base: ThemedDict = {
+      colors: { red: '#FF0000', blue: '#0000FF' },
+      space: { '1': 4, '2': 8 },
+      sizes: { sm: 16 },
+      radii: { md: 8 },
+      typography: { body: { fontSize: 16, lineHeight: 24 } },
+      breakpoints: [480, 768],
+    };
+
+    it('returns base as-is when overrides is empty', () => {
+      const theme = createTheme(base, {});
+      expect(theme).toEqual(base);
+    });
+
+    it('merges colors (keeps existing + adds new)', () => {
+      const theme = createTheme(base, { colors: { brand: '#FF6600' } });
+      expect(theme.colors).toEqual({ red: '#FF0000', blue: '#0000FF', brand: '#FF6600' });
+    });
+
+    it('overrides existing token values', () => {
+      const theme = createTheme(base, { colors: { red: '#CC0000' } });
+      expect(theme.colors.red).toBe('#CC0000');
+      expect(theme.colors.blue).toBe('#0000FF');
+    });
+
+    it('merges each token group independently', () => {
+      const theme = createTheme(base, {
+        space: { '3': 12 },
+        sizes: { lg: 32 },
+        radii: { lg: 16 },
+        typography: { h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 } },
+      });
+      expect(theme.space).toEqual({ '1': 4, '2': 8, '3': 12 });
+      expect(theme.sizes).toEqual({ sm: 16, lg: 32 });
+      expect(theme.radii).toEqual({ md: 8, lg: 16 });
+      expect(theme.typography).toEqual({
+        body: { fontSize: 16, lineHeight: 24 },
+        h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 },
+      });
+    });
+
+    it('replaces breakpoints when provided in overrides', () => {
+      const theme = createTheme(base, { breakpoints: [500, 1024, 1440] });
+      expect(theme.breakpoints).toEqual([500, 1024, 1440]);
+    });
+
+    it('falls back to base breakpoints when overrides omits breakpoints', () => {
+      const theme = createTheme(base, { colors: { brand: '#000' } });
+      expect(theme.breakpoints).toEqual([480, 768]);
+    });
+
+    it('does not mutate base or overrides', () => {
+      const baseCopy = JSON.parse(JSON.stringify(base));
+      const overrides = { colors: { brand: '#FF6600' } };
+      const overridesCopy = JSON.parse(JSON.stringify(overrides));
+
+      createTheme(base, overrides);
+
+      expect(base).toEqual(baseCopy);
+      expect(overrides).toEqual(overridesCopy);
+    });
+
+    it('works with defaultTheme as base', () => {
+      const theme = createTheme(defaultTheme, {
+        colors: { brand: '#FF6600' },
+        space: { huge: 200 },
+      });
+      expect(theme.colors.brand).toBe('#FF6600');
+      expect(theme.colors.white).toBe('#FFFFFF');
+      expect(theme.space.huge).toBe(200);
+      expect(theme.space['1']).toBe(4);
+      expect(theme.breakpoints).toEqual(defaultTheme.breakpoints);
+    });
+  });
+});

package/src/util/createTheme.ts

@@ -0,0 +1,29 @@
+import type { ThemedDict } from '../@types/ThemedDict';
+
+export function createTheme(config?: Partial<ThemedDict>): ThemedDict;
+export function createTheme(base: ThemedDict, overrides: Partial<ThemedDict>): ThemedDict;
+export function createTheme(
+  baseOrConfig: Partial<ThemedDict> = {},
+  overrides?: Partial<ThemedDict>,
+): ThemedDict {
+  if (overrides !== undefined) {
+    return {
+      colors: { ...baseOrConfig.colors, ...overrides.colors },
+      space: { ...baseOrConfig.space, ...overrides.space },
+      sizes: { ...baseOrConfig.sizes, ...overrides.sizes },
+      radii: { ...baseOrConfig.radii, ...overrides.radii },
+      typography: { ...baseOrConfig.typography, ...overrides.typography },
+      breakpoints: overrides.breakpoints ?? baseOrConfig.breakpoints ?? [],
+    };
+  }
+
+  return {
+    colors: {},
+    space: {},
+    sizes: {},
+    radii: {},
+    typography: {},
+    breakpoints: [],
+    ...baseOrConfig,
+  };
+}

package/src/util/propsToThemedStyle.ts

@@ -1,7 +1,5 @@
-/* eslint-disable padding-line-between-statements */
-import type { TextStyle } from 'react-native';
-
-import type { TextSxProps } from '../@types/SxProps';
+import type { AnyStyle } from '../@types/AnyStyle';
+import type { ResolvedTextSxProps, TextSxProps } from '../@types/SxProps';
 import type { ThemedDict } from '../@types/ThemedDict';
 import { createTokenParsers } from '../internal/TokenParser/TokenParser';
 import {
@@ -9,28 +7,36 @@ import {
   fillViewStyleIfNotNullish,
 } from '../internal/util/fillStyleIfNotNullish';
 import { printWarning } from '../internal/util/printWarning';
+import { resolveResponsiveSx } from '../internal/util/resolveResponsiveValue';
 
 export type ThemedStyleType = 'ViewStyle' | 'TextStyle';
 export const propsToThemedStyle = ({
   theme,
-  sx,
+  sx: rawSx,
   styleType = 'ViewStyle',
+  breakpoints = [],
+  screenWidth = 0,
 }: {
   theme?: ThemedDict;
   sx?: TextSxProps;
   styleType?: ThemedStyleType;
-}): TextStyle | undefined => {
-  const ret: TextStyle = {};
+  breakpoints?: number[];
+  screenWidth?: number;
+}): AnyStyle | undefined => {
+  const ret: AnyStyle = {};
 
   if (!theme) {
     printWarning('theme not found');
+
     return;
   }
 
-  if (!sx) {
+  if (!rawSx) {
     return;
   }
 
+  const sx: ResolvedTextSxProps = resolveResponsiveSx({ sx: rawSx, breakpoints, screenWidth });
+
   const { colors, radii, sizes, space, spaceAsNumberOnly, typography } = createTokenParsers(theme);
 
   // region colors
@@ -82,16 +88,19 @@ export const propsToThemedStyle = ({
     'borderTopLeftRadius',
     radii(sx.borderTopLeftRadius ?? sx.topLeftRadius),
   );
+
   fillViewStyleIfNotNullish(
     ret,
     'borderTopRightRadius',
     radii(sx.borderTopRightRadius ?? sx.topRightRadius),
   );
+
   fillViewStyleIfNotNullish(
     ret,
     'borderBottomLeftRadius',
     radii(sx.borderBottomLeftRadius ?? sx.bottomLeftRadius),
   );
+
   fillViewStyleIfNotNullish(
     ret,
     'borderBottomRightRadius',

package/lib/commonjs/internal/util/fillNullishThemeKey.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fillNullishThemeKey = void 0;
-const fillNullishThemeKey = theme => {
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    ...theme
-  };
-};
-exports.fillNullishThemeKey = fillNullishThemeKey;
-//# sourceMappingURL=fillNullishThemeKey.js.map

package/lib/commonjs/internal/util/fillNullishThemeKey.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fillNullishThemeKey","theme","colors","space","sizes","radii","typography","exports"],"sourceRoot":"../../../../src","sources":["internal/util/fillNullishThemeKey.ts"],"mappings":";;;;;;AAEO,MAAMA,mBAAmB,GAAIC,KAA0B,IAAiB;EAC7E,OAAO;IACLC,MAAM,EAAE,CAAC,CAAC;IACVC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,UAAU,EAAE,CAAC,CAAC;IACd,GAAGL;EACL,CAAC;AACH,CAAC;AAACM,OAAA,CAAAP,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/lib/module/internal/util/fillNullishThemeKey.js

@@ -1,11 +0,0 @@
-export const fillNullishThemeKey = theme => {
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    ...theme
-  };
-};
-//# sourceMappingURL=fillNullishThemeKey.js.map

package/lib/module/internal/util/fillNullishThemeKey.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fillNullishThemeKey","theme","colors","space","sizes","radii","typography"],"sourceRoot":"../../../../src","sources":["internal/util/fillNullishThemeKey.ts"],"mappings":"AAEA,OAAO,MAAMA,mBAAmB,GAAIC,KAA0B,IAAiB;EAC7E,OAAO;IACLC,MAAM,EAAE,CAAC,CAAC;IACVC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,UAAU,EAAE,CAAC,CAAC;IACd,GAAGL;EACL,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -1,3 +0,0 @@
-import type { ThemedDict } from '../../@types/ThemedDict';
-export declare const fillNullishThemeKey: (theme: Partial<ThemedDict>) => ThemedDict;
-//# sourceMappingURL=fillNullishThemeKey.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"fillNullishThemeKey.d.ts","sourceRoot":"","sources":["../../../../../src/internal/util/fillNullishThemeKey.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,UAAW,QAAQ,UAAU,CAAC,KAAG,UAShE,CAAC"}

package/src/internal/util/fillNullishThemeKey.ts

@@ -1,12 +0,0 @@
-import type { ThemedDict } from '../../@types/ThemedDict';
-
-export const fillNullishThemeKey = (theme: Partial<ThemedDict>): ThemedDict => {
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    ...theme,
-  };
-};