@react-native-styled-system/core 1.2.2 → 1.3.1

package/src/@types/SxProps.ts

@@ -114,18 +114,18 @@ export const _textStylePropList = [
   'typography',
   't',
 ] satisfies (Omit<TextSxPropsKey, keyof TextSxPropsKey> | 'style')[];
-type ThemedColorTokenProps = {
+interface ThemedColorTokenProps {
   backgroundColor: Token<'colors'>;
   bg: Token<'colors'>; // backgroundColor
   borderColor: Token<'colors'>;
-};
-type ThemedColorTokenTextProps = {
+}
+interface ThemedColorTokenTextProps {
   color: Token<'colors'>;
   textDecorationColor: Token<'colors'>;
   textShadowColor: Token<'colors'>;
-};
+}
 
-type ThemedSpaceTokenProps = {
+interface ThemedSpaceTokenProps {
   margin: Token<'space'>;
   m: Token<'space'>; // margin
   marginTop: Token<'space'>;
@@ -161,9 +161,9 @@ type ThemedSpaceTokenProps = {
   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
-};
+}
 
-type ThemedSizeTokenProps = {
+interface ThemedSizeTokenProps {
   width: Token<'sizes'>;
   w: Token<'sizes'>; // width
   minWidth: Token<'sizes'>;
@@ -176,9 +176,9 @@ type ThemedSizeTokenProps = {
   minH: Token<'sizes'>; // minHeight
   maxHeight: Token<'sizes'>;
   maxH: Token<'sizes'>; // maxHeight
-};
+}
 
-type ThemedRadiiTokenProps = {
+interface ThemedRadiiTokenProps {
   borderRadius: Token<'radii'>;
   radius: Token<'radii'>; // borderRadius
   borderTopLeftRadius: Token<'radii'>;
@@ -189,9 +189,9 @@ type ThemedRadiiTokenProps = {
   bottomLeftRadius: Token<'radii'>; // borderBottomLeftRadius
   borderBottomRightRadius: Token<'radii'>;
   bottomRightRadius: Token<'radii'>; // borderBottomRightRadius
-};
+}
 
-type ThemedViewStyleProps = {
+interface ThemedViewStyleProps {
   flex: ViewStyle['flex'];
   alignItems: ViewStyle['alignItems'];
   alignContent: ViewStyle['alignContent'];
@@ -218,9 +218,9 @@ type ThemedViewStyleProps = {
   zIndex: ViewStyle['zIndex'];
   absoluteFill?: boolean; // shortcut - position: absoulte, t,r,b,l: 0
   center?: boolean; // shortcut - justifyContent, alignItems: center
-};
+}
 
-type ThemedTextStyleProps = {
+interface ThemedTextStyleProps {
   fontFamily: TextStyle['fontFamily'];
   fontSize: TextStyle['fontSize'];
   fontStyle: TextStyle['fontStyle'];
@@ -239,7 +239,7 @@ type ThemedTextStyleProps = {
   includeFontPadding: TextStyle['includeFontPadding'];
   typography: Token<'typography'>;
   t: Token<'typography'>; // typography
-};
+}
 
 type BaseSxProps = Partial<
   ThemedViewStyleProps &
@@ -251,8 +251,12 @@ type BaseSxProps = Partial<
 
 type BaseTextSxProps = BaseSxProps & Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;
 
-export type SxProps = BaseSxProps & { sx?: BaseSxProps };
-export type TextSxProps = BaseTextSxProps & { sx?: BaseTextSxProps };
+export interface SxProps extends BaseSxProps {
+  sx?: BaseSxProps;
+}
+export interface TextSxProps extends BaseTextSxProps {
+  sx?: BaseTextSxProps;
+}
 
 export const SHORTCUT_NAME_MAP: Record<string, string> = {
   bg: 'backgroundColor',

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './hook/useSxStyle';
 export * from './hook/useSxTokens';
 export * from './provider/StyledSystemProvider';
 export * from './util/propsToThemedStyle';
+export * from './util/createSxComponent';

package/src/internal/util/mutateShortcutPropToOriginalKeys.ts

@@ -1,7 +1,9 @@
 import type { TextSxProps } from '../../@types/SxProps';
 import { SHORTCUT_NAME_MAP } from '../../@types/SxProps';
 
-export function mutateShortcutPropToOriginalKeys(sx?: TextSxProps | null) {
+export function mutateShortcutPropToOriginalKeys(
+  sx?: TextSxProps | null,
+): TextSxProps | undefined | null {
   if (!sx) {
     return sx;
   }

package/src/util/createSxComponent.tsx

@@ -0,0 +1,33 @@
+import type { ComponentType } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { SxProps, TextSxProps } from '../@types/SxProps';
+import { useSx } from '../hook/useSx';
+
+export function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & SxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props);
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}
+
+export function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & TextSxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props, { styleType: 'TextStyle' });
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}