@react-native-styled-system/core 1.4.4 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/lib/commonjs/@types/Responsive.js +8 -0
  2. package/lib/commonjs/@types/Responsive.js.map +1 -0
  3. package/lib/commonjs/@types/SxProps.js +9 -0
  4. package/lib/commonjs/@types/SxProps.js.map +1 -1
  5. package/lib/commonjs/@types/ThemedDict.js +396 -2
  6. package/lib/commonjs/@types/ThemedDict.js.map +1 -1
  7. package/lib/commonjs/__testUtils__/testTheme.js +51 -0
  8. package/lib/commonjs/__testUtils__/testTheme.js.map +1 -0
  9. package/lib/commonjs/hook/useSx.js +13 -4
  10. package/lib/commonjs/hook/useSx.js.map +1 -1
  11. package/lib/commonjs/hook/useSxStyle.js +10 -3
  12. package/lib/commonjs/hook/useSxStyle.js.map +1 -1
  13. package/lib/commonjs/index.js +22 -0
  14. package/lib/commonjs/index.js.map +1 -1
  15. package/lib/commonjs/internal/util/resolveResponsiveValue.js +52 -0
  16. package/lib/commonjs/internal/util/resolveResponsiveValue.js.map +1 -0
  17. package/lib/commonjs/provider/StyledSystemProvider.js +17 -11
  18. package/lib/commonjs/provider/StyledSystemProvider.js.map +1 -1
  19. package/lib/commonjs/util/createSxComponent.js +5 -7
  20. package/lib/commonjs/util/createSxComponent.js.map +1 -1
  21. package/lib/commonjs/util/createTheme.js +43 -0
  22. package/lib/commonjs/util/createTheme.js.map +1 -0
  23. package/lib/commonjs/util/propsToThemedStyle.js +11 -3
  24. package/lib/commonjs/util/propsToThemedStyle.js.map +1 -1
  25. package/lib/module/@types/AnyStyle.js +0 -2
  26. package/lib/module/@types/Responsive.js +2 -0
  27. package/lib/module/@types/Responsive.js.map +1 -0
  28. package/lib/module/@types/SxProps.js +9 -2
  29. package/lib/module/@types/SxProps.js.map +1 -1
  30. package/lib/module/@types/ThemedDict.js +394 -3
  31. package/lib/module/@types/ThemedDict.js.map +1 -1
  32. package/lib/module/@types/ThemedTypings.js +0 -2
  33. package/lib/module/@types/Token.js +0 -2
  34. package/lib/module/__testUtils__/testTheme.js +45 -0
  35. package/lib/module/__testUtils__/testTheme.js.map +1 -0
  36. package/lib/module/hook/useSx.js +13 -6
  37. package/lib/module/hook/useSx.js.map +1 -1
  38. package/lib/module/hook/useSxStyle.js +10 -5
  39. package/lib/module/hook/useSxStyle.js.map +1 -1
  40. package/lib/module/hook/useSxTokens.js +0 -2
  41. package/lib/module/hook/useSxTokens.js.map +1 -1
  42. package/lib/module/index.js +2 -2
  43. package/lib/module/index.js.map +1 -1
  44. package/lib/module/internal/TokenParser/ColorsParser.js +0 -2
  45. package/lib/module/internal/TokenParser/ColorsParser.js.map +1 -1
  46. package/lib/module/internal/TokenParser/RadiiParser.js +0 -2
  47. package/lib/module/internal/TokenParser/RadiiParser.js.map +1 -1
  48. package/lib/module/internal/TokenParser/SizesParser.js +0 -2
  49. package/lib/module/internal/TokenParser/SizesParser.js.map +1 -1
  50. package/lib/module/internal/TokenParser/SpaceParser.js +0 -2
  51. package/lib/module/internal/TokenParser/SpaceParser.js.map +1 -1
  52. package/lib/module/internal/TokenParser/TokenParser.js +0 -2
  53. package/lib/module/internal/TokenParser/TokenParser.js.map +1 -1
  54. package/lib/module/internal/TokenParser/TypographyParser.js +0 -2
  55. package/lib/module/internal/TokenParser/TypographyParser.js.map +1 -1
  56. package/lib/module/internal/useStableCallback.js +0 -2
  57. package/lib/module/internal/useStableCallback.js.map +1 -1
  58. package/lib/module/internal/util/StyleHash.js +0 -2
  59. package/lib/module/internal/util/StyleHash.js.map +1 -1
  60. package/lib/module/internal/util/fillStyleIfNotNullish.js +0 -2
  61. package/lib/module/internal/util/fillStyleIfNotNullish.js.map +1 -1
  62. package/lib/module/internal/util/mutateShortcutPropToOriginalKeys.js +0 -2
  63. package/lib/module/internal/util/mutateShortcutPropToOriginalKeys.js.map +1 -1
  64. package/lib/module/internal/util/parsePxSuffixNumber.js +0 -2
  65. package/lib/module/internal/util/parsePxSuffixNumber.js.map +1 -1
  66. package/lib/module/internal/util/printWarning.js +0 -2
  67. package/lib/module/internal/util/printWarning.js.map +1 -1
  68. package/lib/module/internal/util/resolveResponsiveValue.js +44 -0
  69. package/lib/module/internal/util/resolveResponsiveValue.js.map +1 -0
  70. package/lib/module/provider/StyledSystemProvider.js +17 -12
  71. package/lib/module/provider/StyledSystemProvider.js.map +1 -1
  72. package/lib/module/util/createSxComponent.js +5 -9
  73. package/lib/module/util/createSxComponent.js.map +1 -1
  74. package/lib/module/util/createTheme.js +37 -0
  75. package/lib/module/util/createTheme.js.map +1 -0
  76. package/lib/module/util/propsToThemedStyle.js +11 -5
  77. package/lib/module/util/propsToThemedStyle.js.map +1 -1
  78. package/lib/typescript/src/@types/Responsive.d.ts +4 -0
  79. package/lib/typescript/src/@types/Responsive.d.ts.map +1 -0
  80. package/lib/typescript/src/@types/SxProps.d.ts +15 -3
  81. package/lib/typescript/src/@types/SxProps.d.ts.map +1 -1
  82. package/lib/typescript/src/@types/ThemedDict.d.ts +26 -0
  83. package/lib/typescript/src/@types/ThemedDict.d.ts.map +1 -1
  84. package/lib/typescript/src/__testUtils__/testTheme.d.ts +12 -0
  85. package/lib/typescript/src/__testUtils__/testTheme.d.ts.map +1 -0
  86. package/lib/typescript/src/hook/useSx.d.ts +2 -1
  87. package/lib/typescript/src/hook/useSx.d.ts.map +1 -1
  88. package/lib/typescript/src/hook/useSxStyle.d.ts +2 -1
  89. package/lib/typescript/src/hook/useSxStyle.d.ts.map +1 -1
  90. package/lib/typescript/src/index.d.ts +2 -0
  91. package/lib/typescript/src/index.d.ts.map +1 -1
  92. package/lib/typescript/src/internal/util/resolveResponsiveValue.d.ts +12 -0
  93. package/lib/typescript/src/internal/util/resolveResponsiveValue.d.ts.map +1 -0
  94. package/lib/typescript/src/provider/StyledSystemProvider.d.ts +3 -1
  95. package/lib/typescript/src/provider/StyledSystemProvider.d.ts.map +1 -1
  96. package/lib/typescript/src/util/createSxComponent.d.ts +4 -4
  97. package/lib/typescript/src/util/createSxComponent.d.ts.map +1 -1
  98. package/lib/typescript/src/util/createTheme.d.ts +4 -0
  99. package/lib/typescript/src/util/createTheme.d.ts.map +1 -0
  100. package/lib/typescript/src/util/propsToThemedStyle.d.ts +3 -1
  101. package/lib/typescript/src/util/propsToThemedStyle.d.ts.map +1 -1
  102. package/package.json +9 -8
  103. package/src/@types/Responsive.ts +7 -0
  104. package/src/@types/SxProps.ts +36 -7
  105. package/src/@types/ThemedDict.ts +412 -0
  106. package/src/__testUtils__/testTheme.ts +43 -0
  107. package/src/hook/useSx.test.ts +117 -38
  108. package/src/hook/useSx.ts +11 -2
  109. package/src/hook/useSxStyle.test.ts +102 -33
  110. package/src/hook/useSxStyle.ts +12 -1
  111. package/src/hook/useSxTokens.test.ts +65 -32
  112. package/src/index.ts +2 -0
  113. package/src/internal/util/resolveResponsiveValue.test.ts +171 -0
  114. package/src/internal/util/resolveResponsiveValue.ts +58 -0
  115. package/src/provider/StyledSystemProvider.tsx +14 -4
  116. package/src/util/createSxComponent.tsx +8 -4
  117. package/src/util/createTheme.test.ts +126 -0
  118. package/src/util/createTheme.ts +29 -0
  119. package/src/util/propsToThemedStyle.ts +10 -3
  120. package/lib/commonjs/internal/util/fillNullishThemeKey.js +0 -18
  121. package/lib/commonjs/internal/util/fillNullishThemeKey.js.map +0 -1
  122. package/lib/commonjs/package.json +0 -1
  123. package/lib/module/internal/util/fillNullishThemeKey.js +0 -13
  124. package/lib/module/internal/util/fillNullishThemeKey.js.map +0 -1
  125. package/lib/typescript/src/internal/util/fillNullishThemeKey.d.ts +0 -3
  126. package/lib/typescript/src/internal/util/fillNullishThemeKey.d.ts.map +0 -1
  127. package/src/internal/util/fillNullishThemeKey.ts +0 -12
@@ -0,0 +1,12 @@
1
+ import type { ThemedDict } from '../@types/ThemedDict';
2
+ export declare const emptyTheme: {
3
+ space: {};
4
+ colors: {};
5
+ sizes: {};
6
+ radii: {};
7
+ typography: {};
8
+ breakpoints: never[];
9
+ };
10
+ export declare const baseTheme: ThemedDict;
11
+ export declare const responsiveTheme: ThemedDict;
12
+ //# sourceMappingURL=testTheme.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"testTheme.d.ts","sourceRoot":"","sources":["../../../../src/__testUtils__/testTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,eAAO,MAAM,UAAU;;;;;;;CAAkB,CAAC;AAE1C,eAAO,MAAM,SAAS,EAAE,UAgCvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,UAG7B,CAAC"}
@@ -14,8 +14,9 @@ export type UseSxOptions = {
14
14
  transform?: StyleTransform;
15
15
  fallback?: StyleFallback;
16
16
  cache?: boolean;
17
+ screenWidth?: number;
17
18
  };
18
- export declare const useSx: <P extends Props = Props>(props?: P | null, { theme: optionTheme, styleType, transform, fallback, cache, }?: UseSxOptions) => {
19
+ export declare const useSx: <P extends Props = Props>(props?: P | null, { theme: optionTheme, styleType, transform, fallback, cache, screenWidth: optionScreenWidth, }?: UseSxOptions) => {
19
20
  getStyle: () => StyleProp<AnyStyle> | undefined;
20
21
  filteredProps: Omit<P, keyof import("../@types/SxProps").SxProps | "style">;
21
22
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useSx.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSx.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,QAAQ,KAAK,WAAW,CAAC;AAC9D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,KAAK,GAAG,KAAK,EAC3C,QAAQ,CAAC,GAAG,IAAI,EAChB,iEAMG,YAAkC;oBAIE,SAAS,CAAC,QAAQ,CAAC,GAAG,SAAS;;CAoEvE,CAAC"}
1
+ {"version":3,"file":"useSx.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSx.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,QAAQ,KAAK,WAAW,CAAC;AAC9D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,KAAK,GAAG,KAAK,EAC3C,QAAQ,CAAC,GAAG,IAAI,EAChB,iGAOG,YAAkC;oBAIE,SAAS,CAAC,QAAQ,CAAC,GAAG,SAAS;;CA2EvE,CAAC"}
@@ -4,6 +4,7 @@ import type { ThemedDict } from '../@types/ThemedDict';
4
4
  export type UseSxStyleOptions = {
5
5
  theme?: ThemedDict;
6
6
  cache?: boolean;
7
+ screenWidth?: number;
7
8
  };
8
- export declare const useSxStyle: ({ theme: optionTheme, cache }?: UseSxStyleOptions) => (sx: TextSxProps) => StyleProp<TextStyle>;
9
+ export declare const useSxStyle: ({ theme: optionTheme, cache, screenWidth: optionScreenWidth, }?: UseSxStyleOptions) => (sx: TextSxProps) => StyleProp<TextStyle>;
9
10
  //# sourceMappingURL=useSxStyle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSxStyle.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSxStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,gCAA+B,iBAAkC,MAGlF,IAAI,WAAW,KAAG,SAAS,CAAC,SAAS,CAuB9C,CAAC"}
1
+ {"version":3,"file":"useSxStyle.d.ts","sourceRoot":"","sources":["../../../../src/hook/useSxStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,iEAIxB,iBAAkC,MAG3B,IAAI,WAAW,KAAG,SAAS,CAAC,SAAS,CA6B9C,CAAC"}
@@ -1,3 +1,4 @@
1
+ export * from './@types/Responsive';
1
2
  export * from './@types/SxProps';
2
3
  export * from './@types/ThemedDict';
3
4
  export * from './@types/ThemedTypings';
@@ -7,4 +8,5 @@ export * from './hook/useSxTokens';
7
8
  export * from './provider/StyledSystemProvider';
8
9
  export * from './util/propsToThemedStyle';
9
10
  export * from './util/createSxComponent';
11
+ export * from './util/createTheme';
10
12
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC"}
@@ -0,0 +1,12 @@
1
+ import type { ResolvedTextSxProps, TextSxProps } from '../../@types/SxProps';
2
+ export declare const resolveResponsiveValue: <T>({ value, breakpoints, screenWidth, }: {
3
+ value: T | T[] | undefined | null;
4
+ breakpoints: number[];
5
+ screenWidth: number;
6
+ }) => T | undefined | null;
7
+ export declare const resolveResponsiveSx: ({ sx, breakpoints, screenWidth, }: {
8
+ sx: TextSxProps | undefined;
9
+ breakpoints: number[];
10
+ screenWidth: number;
11
+ }) => ResolvedTextSxProps;
12
+ //# sourceMappingURL=resolveResponsiveValue.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -3,11 +3,13 @@ import React from 'react';
3
3
  import type { ThemedDict } from '../@types/ThemedDict';
4
4
  export type StyledSystemContextValue = {
5
5
  theme: ThemedDict;
6
+ screenWidth: number;
6
7
  };
7
8
  export declare const StyledSystemContext: React.Context<StyledSystemContextValue>;
8
9
  type Props = PropsWithChildren<{
9
10
  theme: Partial<ThemedDict>;
11
+ screenWidth?: number;
10
12
  }>;
11
- export declare const StyledSystemProvider: ({ children, theme }: Props) => React.JSX.Element;
13
+ export declare const StyledSystemProvider: ({ children, theme, screenWidth }: Props) => React.JSX.Element;
12
14
  export {};
13
15
  //# sourceMappingURL=StyledSystemProvider.d.ts.map
@@ -1 +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,GAAI,qBAAqB,KAAK,sBAM9D,CAAC"}
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;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"}
@@ -3,11 +3,11 @@ import React from 'react';
3
3
  import type { SxProps, TextSxProps } from '../@types/SxProps';
4
4
  import type { UseSxOptions } from '../hook/useSx';
5
5
  export declare function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>): ({ defaultProps, sxOptions, }?: {
6
- defaultProps?: Props & SxProps;
6
+ defaultProps?: Omit<Props, keyof SxProps> & SxProps;
7
7
  sxOptions?: UseSxOptions;
8
- }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & SxProps> & React.RefAttributes<Ref>>;
8
+ }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, keyof SxProps> & SxProps> & React.RefAttributes<Ref>>;
9
9
  export declare function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>): ({ defaultProps, sxOptions, }?: {
10
- defaultProps?: Props & TextSxProps;
10
+ defaultProps?: Omit<Props, keyof TextSxProps> & TextSxProps;
11
11
  sxOptions?: UseSxOptions;
12
- }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & TextSxProps> & React.RefAttributes<Ref>>;
12
+ }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, keyof TextSxProps> & TextSxProps> & React.RefAttributes<Ref>>;
13
13
  //# sourceMappingURL=createSxComponent.d.ts.map
@@ -1 +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,IAC7E,+BAGL;IAAE,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,YAAY,CAAA;CAAO,wGAWrE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,IACjF,+BAGL;IAAE,YAAY,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,YAAY,CAAA;CAAO,4GAczE"}
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,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"}
@@ -0,0 +1,4 @@
1
+ import type { ThemedDict } from '../@types/ThemedDict';
2
+ export declare function createTheme(config?: Partial<ThemedDict>): ThemedDict;
3
+ export declare function createTheme(base: ThemedDict, overrides: Partial<ThemedDict>): ThemedDict;
4
+ //# sourceMappingURL=createTheme.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -2,9 +2,11 @@ import type { AnyStyle } from '../@types/AnyStyle';
2
2
  import type { TextSxProps } from '../@types/SxProps';
3
3
  import type { ThemedDict } from '../@types/ThemedDict';
4
4
  export type ThemedStyleType = 'ViewStyle' | 'TextStyle';
5
- export declare const propsToThemedStyle: ({ theme, sx, styleType, }: {
5
+ export declare const propsToThemedStyle: ({ theme, sx: rawSx, styleType, breakpoints, screenWidth, }: {
6
6
  theme?: ThemedDict;
7
7
  sx?: TextSxProps;
8
8
  styleType?: ThemedStyleType;
9
+ breakpoints?: number[];
10
+ screenWidth?: number;
9
11
  }) => AnyStyle | undefined;
10
12
  //# sourceMappingURL=propsToThemedStyle.d.ts.map
@@ -1 +1 @@
1
- {"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,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,GAAI,2BAIhC;IACD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,KAAG,QAAQ,GAAG,SAsJd,CAAC"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-native-styled-system/core",
3
- "version": "1.4.4",
3
+ "version": "2.1.2",
4
4
  "description": "React Native Styled System",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "types": "lib/typescript/src/index.d.ts",
@@ -17,15 +17,16 @@
17
17
  "author": "zmin9 <lucy@teamturing.com>",
18
18
  "license": "MIT",
19
19
  "devDependencies": {
20
+ "@testing-library/react-native": "^13.3.3",
20
21
  "@types/invariant": "^2.2.37",
21
- "@types/react": "^19.2.2",
22
+ "@types/react": "^19",
22
23
  "@types/react-test-renderer": "^19",
23
- "prettier": "^3.6.2",
24
+ "prettier": "^3.2.5",
24
25
  "react": "*",
25
- "react-native": "0.81.4",
26
- "react-native-builder-bob": "^0.40.13",
27
- "react-test-renderer": "^19.2.0",
28
- "typescript": "^5.9.3"
26
+ "react-native": "0.81.5",
27
+ "react-native-builder-bob": "^0.23.2",
28
+ "react-test-renderer": "^19",
29
+ "typescript": "^5.2.2"
29
30
  },
30
31
  "peerDependencies": {
31
32
  "react": "*",
@@ -64,5 +65,5 @@
64
65
  ],
65
66
  "exclude": "**/*.test.*"
66
67
  },
67
- "gitHead": "b6b2875529f9a0169499d223b8f0182f7113e6f2"
68
+ "gitHead": "6bdbac567a7e134d9fa3dd5bec05c8c7a8a67a02"
68
69
  }
@@ -0,0 +1,7 @@
1
+ export type Responsive<T> = T | (T | undefined)[];
2
+
3
+ export type ResponsiveExcludedKey = 'transform';
4
+
5
+ export const RESPONSIVE_EXCLUDED_KEYS: ReadonlySet<string> = new Set<ResponsiveExcludedKey>([
6
+ 'transform',
7
+ ]);
@@ -1,5 +1,6 @@
1
1
  import type { TextStyle, ViewStyle } from 'react-native';
2
2
 
3
+ import type { Responsive, ResponsiveExcludedKey } from './Responsive';
3
4
  import type { Token } from './Token';
4
5
 
5
6
  export type SxPropsKeys = keyof SxProps;
@@ -114,6 +115,11 @@ export const _textStylePropList = [
114
115
  'typography',
115
116
  't',
116
117
  ] satisfies (Omit<TextSxPropsKey, keyof TextSxPropsKey> | 'style')[];
118
+
119
+ // =================
120
+ // Resolved types (internal, no Responsive wrapping)
121
+ // =================
122
+
117
123
  interface ThemedColorTokenProps {
118
124
  backgroundColor: Token<'colors'>;
119
125
  bg: Token<'colors'>; // backgroundColor
@@ -158,9 +164,9 @@ interface ThemedSpaceTokenProps {
158
164
  right: Token<'space'>;
159
165
  bottom: Token<'space'>;
160
166
  left: Token<'space'>;
161
- gap: Token<'space'>; // only works if parsed result is number
162
- gapX: Token<'space'>; // only works if parsed result is number
163
- gapY: Token<'space'>; // only works if parsed result is number
167
+ gap: Token<'space'>;
168
+ gapX: Token<'space'>;
169
+ gapY: Token<'space'>;
164
170
  }
165
171
 
166
172
  interface ThemedSizeTokenProps {
@@ -216,8 +222,8 @@ interface ThemedViewStyleProps {
216
222
  display: ViewStyle['display'];
217
223
  elevation: ViewStyle['elevation'];
218
224
  zIndex: ViewStyle['zIndex'];
219
- absoluteFill?: boolean; // shortcut - position: absoulte, t,r,b,l: 0
220
- center?: boolean; // shortcut - justifyContent, alignItems: center
225
+ absoluteFill?: boolean;
226
+ center?: boolean;
221
227
  }
222
228
 
223
229
  interface ThemedTextStyleProps {
@@ -241,7 +247,7 @@ interface ThemedTextStyleProps {
241
247
  t: Token<'typography'>; // typography
242
248
  }
243
249
 
244
- type BaseSxProps = Partial<
250
+ type ResolvedBaseSxProps = Partial<
245
251
  ThemedViewStyleProps &
246
252
  ThemedSpaceTokenProps &
247
253
  ThemedSizeTokenProps &
@@ -249,7 +255,30 @@ type BaseSxProps = Partial<
249
255
  ThemedRadiiTokenProps
250
256
  >;
251
257
 
252
- type BaseTextSxProps = BaseSxProps & Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;
258
+ type ResolvedBaseTextSxProps = ResolvedBaseSxProps &
259
+ Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;
260
+
261
+ export interface ResolvedSxProps extends ResolvedBaseSxProps {
262
+ sx?: ResolvedBaseSxProps;
263
+ }
264
+ export interface ResolvedTextSxProps extends ResolvedBaseTextSxProps {
265
+ sx?: ResolvedBaseTextSxProps;
266
+ }
267
+
268
+ // =================
269
+ // Public types (with Responsive wrapping)
270
+ // =================
271
+
272
+ type WithResponsive<T> = {
273
+ [K in keyof T]: K extends ResponsiveExcludedKey
274
+ ? T[K]
275
+ : undefined extends T[K]
276
+ ? Responsive<Exclude<T[K], undefined>> | undefined
277
+ : Responsive<T[K]>;
278
+ };
279
+
280
+ type BaseSxProps = WithResponsive<ResolvedBaseSxProps>;
281
+ type BaseTextSxProps = WithResponsive<ResolvedBaseTextSxProps>;
253
282
 
254
283
  export interface SxProps extends BaseSxProps {
255
284
  sx?: BaseSxProps;