[pigment][react] Add Box component

This is nothing but just a wrapper component with special handling for
transform sx prop.

packages/pigment-react/package.json

@@ -132,6 +132,12 @@
     },
     "./exports/createUseThemeProps": {
       "default": "./exports/createUseThemeProps.js"
+    },
+    "./Box": {
+      "types": "./build/Box.d.ts",
+      "import": "./build/Box.mjs",
+      "require": "./build/Box.js",
+      "default": "./build/Box.js"
     }
   },
   "nx": {

packages/pigment-react/src/Box.d.ts

@@ -0,0 +1,6 @@
+import type { PolymorphicComponent } from './base';
+import type { SxProp } from './sx';
+
+declare const Box: PolymorphicComponent<SxProp, {}>;
+
+export { Box };

packages/pigment-react/src/Box.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+// eslint-disable-next-line react/prop-types
+export const Box = React.forwardRef(({ as = 'div', sx, className, style, ...rest }, ref) => {
+  const Component = as;
+  // eslint-disable-next-line react/prop-types
+  const sxClass = typeof sx === 'string' ? sx : sx?.className;
+  const classes = [className, sxClass].filter(Boolean).join(' ');
+  // eslint-disable-next-line react/prop-types
+  const sxVars = sx && typeof sx !== 'string' ? sx?.vars : {};
+  const varStyles = {};
+
+  if (sxVars) {
+    Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => {
+      if (typeof value === 'string' || isUnitLess) {
+        varStyles[`--${cssVariable}`] = value;
+      } else {
+        varStyles[`--${cssVariable}`] = `${value}px`;
+      }
+    });
+  }
+  const styles = {
+    ...style,
+    ...varStyles,
+  };
+  return <Component ref={ref} className={classes} style={styles} {...rest} />;
+});

packages/pigment-react/src/base.d.ts

@@ -35,3 +35,31 @@ export type CSSObjectNoCallback =
   | CSSPropertiesMultiValue
   | CSSPseudosNoCallback
   | CSSOthersObjectNoCallback;
+
+export type BaseDefaultProps = object;
+
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+type FastOmit<T extends object, U extends string | number | symbol> = {
+  [K in keyof T as K extends U ? never : K]: T[K];
+};
+
+export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
+
+export type PolymorphicComponentProps<
+  SxProp,
+  BaseProps extends object,
+  AsTarget extends React.ElementType | undefined,
+  AsTargetProps extends object = AsTarget extends React.ElementType
+    ? React.ComponentPropsWithRef<AsTarget>
+    : BaseDefaultProps,
+> = NoInfer<Omit<Substitute<BaseProps, AsTargetProps>, 'as'>> & {
+  as?: AsTarget;
+  sx?: SxProp;
+};
+
+export interface PolymorphicComponent<SxProp, BaseProps extends BaseDefaultProps>
+  extends React.ForwardRefExoticComponent<BaseProps> {
+  <AsTarget extends React.ElementType | undefined = undefined>(
+    props: PolymorphicComponentProps<SxProp, BaseProps, AsTarget>,
+  ): JSX.Element;
+}

packages/pigment-react/src/processors/sx.ts

@@ -94,7 +94,7 @@ export class SxProcessor extends BaseProcessor {
 
   doRuntimeReplacement() {
     const t = this.astService;
-    // do not replace if sx prop is not on zero-runtime styled component
+    // do not replace if sx prop is not a Pigment styled component
     if (!this.elementClassName) {
       return;
     }

packages/pigment-react/src/styled.d.ts

@@ -1,19 +1,11 @@
 import type * as React from 'react';
-import type { CSSObject } from './base';
+import type { BaseDefaultProps, CSSObject, PolymorphicComponent, Substitute } from './base';
 import type { ThemeArgs } from './theme';
 import type { SxProp } from './sx';
 import { Primitve } from './keyframes';
 
 type Falsy = false | 0 | '' | null | undefined;
 
-type BaseDefaultProps = object;
-
-export type NoInfer<T> = [T][T extends any ? 0 : never];
-type FastOmit<T extends object, U extends string | number | symbol> = {
-  [K in keyof T as K extends U ? never : K]: T[K];
-};
-export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
-
 export interface StyledVariants<Props extends BaseDefaultProps> {
   props: Partial<Props> | ((props: Props) => boolean);
   style: CSSObject<Props>;
@@ -31,26 +23,8 @@ export type StyledArgument<Props extends BaseDefaultProps> =
   | StyledCssArgument<Props>
   | StyledCallback<Props>;
 
-export type PolymorphicComponentProps<
-  BaseProps extends object,
-  AsTarget extends React.ElementType | undefined,
-  AsTargetProps extends object = AsTarget extends React.ElementType
-    ? React.ComponentPropsWithRef<AsTarget>
-    : BaseDefaultProps,
-> = NoInfer<Omit<Substitute<BaseProps, AsTargetProps>, 'as'>> & {
-  as?: AsTarget;
-  sx?: SxProp;
-};
-
-export interface PolymorphicComponent<BaseProps extends BaseDefaultProps>
-  extends React.ForwardRefExoticComponent<BaseProps> {
-  <AsTarget extends React.ElementType | undefined = undefined>(
-    props: PolymorphicComponentProps<BaseProps, AsTarget>,
-  ): JSX.Element;
-}
-
 export interface StyledComponent<Props extends BaseDefaultProps = BaseDefaultProps>
-  extends PolymorphicComponent<Props> {
+  extends PolymorphicComponent<SxProp, Props> {
   defaultProps?: Partial<Props> | undefined;
   toString: () => string;
 }

packages/pigment-react/tests/Box.spec.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Box } from '@pigment-css/react/Box';
+
+export function App() {
+  return (
+    <Box as="div" sx={{ display: 'flex' }}>
+      <Box as="p" sx={() => ({ color: 'primary' })}>
+        Hello{' '}
+        <Box as="a" href="https://mui.com" download>
+          Link
+        </Box>
+      </Box>
+    </Box>
+  );
+}

packages/pigment-react/tsup.config.ts

@@ -13,7 +13,7 @@ const baseConfig: Options = {
 export default defineConfig([
   {
     ...baseConfig,
-    entry: ['./src/index.ts', './src/theme.ts'],
+    entry: ['./src/index.ts', './src/theme.ts', './src/Box.jsx'],
   },
   {
     ...baseConfig,