fix: migrate the rest of the components to polymorphic

src/lib/chip/chip.tsx

@@ -23,7 +23,7 @@ export const Chip = forwardRef(function Chip<T>(
   const selectable = typeof props['aria-selected'] !== 'undefined';
   return (
     <Flex
-      {...props}
+      {...(props as any)}
       main={main}
       cross={cross}
       gap={gap}

src/lib/form-field/form-field.module.css

@@ -19,11 +19,6 @@
         padding-inline-start: theme('spacing.3');
       }
     }
-    &:has(.size--xl) {
-      & :where(.label, .hint) {
-        padding-inline-start: theme('spacing.3');
-      }
-    }
   }
   .label {
     text-overflow: ellipsis;
@@ -130,12 +125,6 @@
     line-height: theme('spacing.12');
     @apply text-lg;
   }
-  .size--xl {
-    padding-block: theme('spacing.1');
-    padding-inline: theme('spacing.3');
-    font-weight: 800;
-    @apply text-2xl;
-  }
 
   /* Validity */
   .validity--valid {

src/lib/form-field/form-field.tsx

@@ -85,7 +85,6 @@ export const fieldBoxCss = css(styles.field, {
       sm: styles['size--sm'],
       md: styles['size--md'],
       lg: styles['size--lg'],
-      xl: styles['size--xl'],
     },
     validity: {
       valid: styles['validity--valid'],

src/lib/heading/heading.tsx

@@ -1,23 +1,20 @@
-import { ElementType, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { clsx } from 'clsx';
 
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 
 import styles from './heading.module.css';
 
-type HeadingProps<C extends ElementType = 'h1'> = PolyProps<C, HeadingVariants & { disabled?: boolean }>;
-type HeadingComponent = <C extends ElementType = 'h1'>(props: HeadingProps<C>) => React.ReactElement | null;
+interface HeadingProps extends HeadingVariants {
+  disabled?: boolean;
+}
 
-export const Heading: HeadingComponent = forwardRef(
-  <C extends ElementType = 'h1'>(
-    { as, variant = 'default', level = '1', dense = true, className, ...props }: HeadingProps<C>,
-    ref: PolyRef<C>
-  ) => {
-    const Component = as || 'h1';
+export const Heading = forwardRef(
+  ({ as: Component = 'h1', variant = 'default', level = '1', dense = true, className, ...props }, ref) => {
     return <Component className={clsx(headingCss({ variant, level, dense }), className)} {...props} ref={ref} />;
   }
-);
+) as ForwardRefComponent<'h1', HeadingProps>;
 
 type HeadingVariants = VariantProps<typeof headingCss>;
 const headingCss = css(styles.heading, {

src/lib/menu-list/menu-list.tsx

@@ -1,13 +1,13 @@
 import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 
 import { clsx } from 'clsx';
-import { ComponentProps, ElementType, forwardRef, ReactElement } from 'react';
+import { ComponentProps, forwardRef } from 'react';
 
 import { Flex } from '../flex';
 import { useAllHandlers, useKeyboardHandles } from '../utils/hooks';
 import { listItemCss, ListItemVariants } from '../shared/list-item';
 
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 import styles from './menu-list.module.css';
 
 interface MenuListProps extends ComponentProps<typeof Flex> {}
@@ -20,38 +20,31 @@ export const MenuList = ({ flow = 'column', className, ...props }: MenuListProps
   );
 };
 
-type MenuListItemProps<C extends ElementType> = PolyProps<
-  C,
-  ListItemVariants & { disabled?: boolean; active?: boolean }
->;
-type MenuListItemComponent = <C extends ElementType = 'span'>(props: MenuListItemProps<C>) => ReactElement | null;
-
-export const Item: MenuListItemComponent = forwardRef(
-  <C extends ElementType = 'a'>(
-    { as, className, disabled, onKeyDown, active, ...props }: MenuListItemProps<C>,
-    ref: PolyRef<C>
-  ) => {
-    const Component = as || 'a';
-    const onKeyDownHandler = useKeyboardHandles({
-      'Enter': (e) => e.currentTarget.click?.(),
-      ' ': (e) => e.currentTarget.click?.(),
-    });
-    const handleKeyDown = useAllHandlers(onKeyDown, onKeyDownHandler);
-
-    return (
-      <RovingFocusGroup.Item asChild focusable={!disabled} active={active}>
-        <Component
-          {...props}
-          className={clsx(listItemCss(props), styles['menu-item'], className)}
-          aria-disabled={disabled}
-          aria-current={active}
-          role="treeitem"
-          onKeyDown={handleKeyDown}
-          ref={ref}
-        />
-      </RovingFocusGroup.Item>
-    );
-  }
-);
+interface MenuListItemProps extends ListItemVariants {
+  disabled?: boolean;
+  active?: boolean;
+}
+
+export const Item = forwardRef(({ as: Component = 'a', className, disabled, onKeyDown, active, ...props }, ref) => {
+  const onKeyDownHandler = useKeyboardHandles({
+    'Enter': (e) => e.currentTarget.click?.(),
+    ' ': (e) => e.currentTarget.click?.(),
+  });
+  const handleKeyDown = useAllHandlers(onKeyDown, onKeyDownHandler);
+
+  return (
+    <RovingFocusGroup.Item asChild focusable={!disabled} active={active}>
+      <Component
+        {...props}
+        className={clsx(listItemCss(props), styles['menu-item'], className)}
+        aria-disabled={disabled}
+        aria-current={active}
+        role="treeitem"
+        onKeyDown={handleKeyDown}
+        ref={ref}
+      />
+    </RovingFocusGroup.Item>
+  );
+}) as ForwardRefComponent<'a', MenuListItemProps>;
 
 MenuList.Item = Item;

src/lib/menu/menu.tsx

@@ -1,6 +1,5 @@
 import {
   ComponentProps,
-  ElementType,
   forwardRef,
   ForwardRefExoticComponent,
   ReactElement,
@@ -19,8 +18,6 @@ import { ListItem, ListItemVariants } from '../shared/list-item';
 import { useIsomorphicLayoutEffect } from '../utils/hooks';
 import { Presence } from '../shared/presence';
 
-import type { LabelComponent, LabelProps } from '../form-field/label';
-import type { PolyRef } from '../utils/polymorphic';
 import styles from './menu.module.css';
 
 interface MenuProps {
@@ -112,15 +109,13 @@ export const Separator = (props: ComponentProps<'div'>) => {
   return <div {...props} className={clsx(styles.separator, props.className)} />;
 };
 
-const MenuLabel: LabelComponent = forwardRef(
-  <C extends ElementType = 'label'>(props: LabelProps<C>, ref: PolyRef<C>) => {
-    return (
-      <RdxMenu.Label asChild>
-        <Label {...props} ref={ref} />
-      </RdxMenu.Label>
-    );
-  }
-);
+const MenuLabel = forwardRef((props, ref) => {
+  return (
+    <RdxMenu.Label asChild>
+      <Label {...props} ref={ref} />
+    </RdxMenu.Label>
+  );
+}) as typeof Label;
 
 MenuRoot.List = List;
 MenuRoot.Item = MenuItem;

src/lib/shared/list-item.tsx

@@ -1,20 +1,16 @@
-import { ElementType, forwardRef, ReactElement } from 'react';
+import { forwardRef } from 'react';
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { clsx } from 'clsx';
 import { flexCss, FlexVariants } from '../flex/flex';
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 
 import styles from './list-item.module.css';
 
-type ListItemProps<C extends ElementType> = PolyProps<C, ListItemVariants>;
-type ListItemComponent = <C extends ElementType = 'span'>(props: ListItemProps<C>) => ReactElement | null;
+interface ListItemProps extends ListItemVariants {}
 
-export const ListItem: ListItemComponent = forwardRef(
-  <C extends ElementType = 'div'>({ as, className, ...props }: ListItemProps<C>, ref: PolyRef<C>) => {
-    const Component = as || 'div';
-    return <Component className={clsx(listItemCss(props), className)} {...props} ref={ref} />;
-  }
-);
+export const ListItem = forwardRef(({ as: Component = 'div', className, ...props }, ref) => {
+  return <Component className={clsx(listItemCss(props), className)} {...props} ref={ref} />;
+}) as ForwardRefComponent<'div', ListItemProps>;
 
 const listItemCssInner = css(styles['list-item'], flexCss, {
   variants: {

src/lib/text/text.tsx

@@ -1,29 +1,26 @@
-import { ElementType, forwardRef, ReactElement } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { clsx } from 'clsx';
 
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 import styles from './text.module.css';
 
-type TextProps<C extends ElementType> = PolyProps<C, VariantProps<typeof textCss> & { lineClamp?: number }>;
-type TextComponent = <C extends ElementType = 'span'>(props: TextProps<C>) => ReactElement | null;
+interface TextProps extends VariantProps<typeof textCss> {
+  lineClamp?: number;
+}
 
-export const Text: TextComponent = forwardRef(
-  <C extends ElementType = 'span'>(
-    { as, textStyle, tone, align, lineClamp, className, style, ...props }: TextProps<C>,
-    ref: PolyRef<C>
-  ) => {
-    const Component = as || 'span';
+export const Text = forwardRef(
+  ({ as: Component = 'span', textStyle, tone, align, lineClamp, className, style, ...props }, ref) => {
     return (
       <Component
         className={clsx(textCss({ textStyle, tone, align }), lineClamp && styles['line-clamp'], className)}
-        style={lineClamp ? { ...style, '--fx-text-lineClamp': lineClamp } : style}
+        style={lineClamp ? ({ ...style, '--fx-text-lineClamp': lineClamp } as CSSProperties) : style}
         {...props}
         ref={ref}
       />
     );
   }
-);
+) as ForwardRefComponent<'span', TextProps>;
 
 export const textCss = css(styles.text, {
   variants: {

src/lib/utils/polymorphic.ts

@@ -7,21 +7,6 @@
 
 import type * as React from 'react';
 
-type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
-
-type AsProp<C extends React.ElementType> = {
-  as?: C;
-};
-
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-
-type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> &
-  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-
-type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
-  ref?: PolymorphicRef<C>;
-};
-
 type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
 
 type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<
@@ -71,4 +56,4 @@ interface ForwardRefComponent<
   ): React.ReactElement | null;
 }
 
-export type { PolymorphicComponentPropWithRef as PolyProps, PolymorphicRef as PolyRef, ForwardRefComponent };
+export type { ForwardRefComponent };

src/pages/components/TextField.mdx

@@ -75,17 +75,6 @@ title: TextField
     <TextField size="lg" variant="underlined" hint="Pretty variant" label="Underlined" placeholder="Large size" />
     <TextField size="lg" variant="flat" placeholder="Large size" />
   </Column>
-  <Column gap="md">
-    <TextField size="xl" label="Boxed" hint="Default variant" placeholder="Editable heading size" />
-    <TextField
-      size="xl"
-      variant="underlined"
-      hint="Pretty variant"
-      label="Underlined"
-      placeholder="Editable heading size"
-    />
-    <TextField size="xl" variant="flat" placeholder="Editable heading size" />
-  </Column>
 </Row>
 ```