simplify demo

docs/src/app/(public)/(content)/react/utils/use-renderer/demos/component/css-modules/index.module.css

@@ -1,11 +1,18 @@
 .Text {
   font-size: 0.875rem;
   line-height: 1rem;
+  font-weight: 400;
   color: var(--color-gray-900);
   &[data-size='small'] {
     font-size: 0.75rem;
   }
   &[data-size='large'] {
     font-size: 1.25rem;
   }
+  &[data-weight='light'] {
+    font-weight: 300;
+  }
+  &[data-weight='bold'] {
+    font-weight: 700;
+  }
 }

docs/src/app/(public)/(content)/react/utils/use-renderer/demos/component/css-modules/index.tsx

@@ -26,34 +26,19 @@ type TextProps = {
 
 function Text(props: TextProps) {
   const {
-    className,
     render,
-    style = {},
     weight = 'regular',
     size = 'medium',
     ...otherProps
   } = props;
 
-  const fontWeight = {
-    light: 300,
-    regular: 400,
-    bold: 700,
-  }[weight];
-
   const state = React.useMemo(() => ({ weight, size }), [weight, size]);
 
   return (
     <Slot
       render={render ?? <p />}
       state={state}
-      className={className}
-      props={{
-        ...otherProps,
-        style: {
-          ...style,
-          fontWeight,
-        },
-      }}
+      {...otherProps}
     />
   );
 }

packages/react/src/slot/Slot.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../utils/useComponentRenderer';
 import { useForkRef } from '../utils';
+import type { BaseUIComponentProps } from '../utils/types';
 import type { ComponentRenderFn } from '../utils/types';
 import { defaultRenderFunctions } from '../utils/defaultRenderFunctions';
 import { CustomStyleHookMapping as StateDataAttributes } from '../utils/getStyleHookProps';
@@ -14,7 +15,7 @@ const Slot = React.forwardRef(function SlotComponent<
   inProps: Slot.Props<State, RenderedElementType>,
   forwardedRef: React.ForwardedRef<RenderedElementType>,
 ) {
-  const { className, render = <div />, state = {} as State, props, stateDataAttributes } = inProps;
+  const { className, render = <div />, state = {} as State, stateDataAttributes, ...props } = inProps;
   const { ref, ...extraProps } = props ?? {};
   const finalRef = useForkRef(ref, forwardedRef);
 
@@ -51,14 +52,11 @@ namespace Slot {
      * The state of the component. It will be used as a parameter for the render and className callbacks.
      */
     state?: State;
-    /**
-     * Props to be spread on the rendered element.
-     */
-    props?: Record<string, unknown> & { ref?: React.Ref<RenderedElementType> };
     /**
      * A mapping of state to data attributes.
      */
     stateDataAttributes?: StateDataAttributes<State>;
+    ref?: React.Ref<RenderedElementType> 
   }
 }