simlify hook demo

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

@@ -8,12 +8,6 @@ import styles from './index.module.css';
 type Weight = 'light' | 'regular' | 'bold';
 type Size = 'small' | 'medium' | 'large';
 
-// type TextState = {
-//   weight: Weight;
-//   size: Size;
-// };
-
-// TODO: fix the types of the generic
 type TextProps = {
   className?: string | ((state: Record<string, any>) => string);
   weight?: Weight;

docs/src/app/(public)/(content)/react/utils/use-renderer/demos/usage/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/usage/css-modules/index.tsx

@@ -16,40 +16,25 @@ type TextProps = {
   weight?: Weight;
   render?: RenderProp<TextState>;
   children: React.ReactNode;
-  style?: React.CSSProperties;
   size?: Size;
-  excludedProp?: boolean;
 };
 
 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]);
 
   const { renderElement } = useRenderer({
     render: render ?? <p />,
     state,
     className,
-    props: {
-      ...otherProps,
-      style: {
-        ...style,
-        fontWeight,
-      },
-    },
+    props: otherProps,
   });
 
   return renderElement();