[pigment][react] Add Box component

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

packages/pigment-css-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-css-react/src/Box.d.ts

@@ -0,0 +1,27 @@
+import type { BaseDefaultProps, Substitute, NoInfer } from './base';
+import type { SxProp } from './sx';
+
+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' | 'component'>> & {
+  as?: AsTarget;
+  component?: AsTarget;
+  sx?: SxProp;
+  children?: React.ReactNode;
+};
+
+export interface PolymorphicComponent<SxProp, BaseProps extends BaseDefaultProps>
+  extends React.ForwardRefExoticComponent<BaseProps> {
+  <AsTarget extends React.ElementType | undefined = undefined>(
+    props: PolymorphicComponentProps<SxProp, BaseProps, AsTarget>,
+  ): JSX.Element;
+}
+
+declare const Box: PolymorphicComponent<SxProp, {}>;
+
+export { Box };

packages/pigment-css-react/src/Box.jsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+// eslint-disable-next-line react/prop-types
+export const Box = React.forwardRef(
+  (
+    {
+      as = 'div',
+      // Added to support compatibility with @mui/system
+      component,
+      /**
+       * The type of the transformed sx prop is either a
+       * "string" if the css passed was fully static or an
+       * object with the following shape:
+       * {
+       *  className: string,
+       *  vars: Record<string, [string | number, boolean]>
+       * }
+       */
+      sx,
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Component = 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-css-react/src/base.d.ts

@@ -35,3 +35,32 @@ 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;
+  children?: React.ReactNode;
+};
+
+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-css-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-css-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-css-react/tests/Box.spec.tsx

@@ -0,0 +1,22 @@
+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 component="dialog" open>
+          Dialog
+        </Box>
+        {/* @ts-expect-error */}
+        <Box component="dialog" as="button" open>
+          Dialog 2
+        </Box>
+      </Box>
+    </Box>
+  );
+}

packages/pigment-css-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,