Implement runtime component

Author: brijeshb42

packages/pigment-css-react/.gitignore

@@ -1,3 +1,4 @@
 /processors/
 /utils/
 LICENSE
+/private-runtime/

packages/pigment-css-react/package.json

@@ -147,6 +147,15 @@
       },
       "require": "./build/RtlProvider.js",
       "default": "./build/RtlProvider.js"
+    },
+    "./private-runtime": {
+      "types": "./private-runtime/index.d.ts",
+      "import": {
+        "types": "./private-runtime/index.d.mts",
+        "default": "./private-runtime/index.mjs"
+      },
+      "require": "./private-runtime/index.js",
+      "default": "./private-runtime/index.js"
     }
   },
   "nx": {

packages/pigment-css-react/src/private-runtime/ForwardSx.js

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

packages/pigment-css-react/src/private-runtime/index.ts

@@ -0,0 +1 @@
+export * from './ForwardSx';

packages/pigment-css-react/tsup.config.ts

@@ -31,4 +31,9 @@ export default defineConfig([
     ],
     outDir: 'utils',
   },
+  {
+    ...baseConfig,
+    entry: ['./src/private-runtime/index.ts'],
+    outDir: 'private-runtime',
+  },
 ]);