@chassis-ui/react 0.1.2 → 0.2.0

package/src/components/static-table/StaticTable.tsx

@@ -0,0 +1,78 @@
+import React, { forwardRef, ReactNode, TableHTMLAttributes } from 'react'
+
+import { TableStyleProps, tableClassName, tableWrapperClassName } from '../../utils/tableClassName'
+
+export interface StaticTableProps
+  extends TableStyleProps, Omit<TableHTMLAttributes<HTMLTableElement>, 'align' | 'color'> {
+  /**
+   * Content shown above the table, functioning as a heading for it.
+   */
+  caption?: ReactNode
+  /**
+   * The table's own markup — plain `<thead>`/`<tbody>`/`<tfoot>`/`<tr>`/`<th>`/`<td>` elements,
+   * rendered as-is.
+   */
+  children?: ReactNode
+  /**
+   * Convert rows into stacked label/value blocks below a container width, for tables with too
+   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a
+   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set
+   * separately. Unlike `Table`, which derives each cell's label from its column header, a static
+   * table has no collection to read labels from — give each `<td>` a `data-cell` attribute with
+   * the label to show before its value.
+   */
+  stacked?: TableStyleProps['stacked']
+}
+
+// A plain, server-renderable `<table>` with `Table`'s styling props and none of its behavior — no
+// sorting, selection, or keyboard grid navigation, and no hooks, so it needs no client JavaScript
+// at all. Imported from `@chassis-ui/react/static-table`, whose entry deliberately has no
+// `'use client'` directive (see `RSC.md`). `forwardRef` is fine here: React Server Components
+// render forwardRef components like any other function component (a ref just can't be passed
+// from the server side).
+export const StaticTable = forwardRef<HTMLTableElement, StaticTableProps>(
+  (
+    {
+      align,
+      bordered,
+      borderless,
+      caption,
+      children,
+      className,
+      color,
+      hover,
+      responsive,
+      sm,
+      stacked,
+      striped,
+      ...rest
+    },
+    ref
+  ) => {
+    const table = (
+      <table
+        {...rest}
+        className={tableClassName({
+          align,
+          bordered,
+          borderless,
+          className,
+          color,
+          hover,
+          sm,
+          stacked,
+          striped
+        })}
+        ref={ref}
+      >
+        {caption && <caption>{caption}</caption>}
+        {children}
+      </table>
+    )
+
+    const wrapperClassName = tableWrapperClassName({ responsive, stacked })
+    return wrapperClassName ? <div className={wrapperClassName}>{table}</div> : table
+  }
+)
+
+StaticTable.displayName = 'StaticTable'

package/src/components/static-table/index.ts

@@ -0,0 +1,8 @@
+// Deliberately no 'use client' directive — unlike every other component folder's barrel, this one
+// is the server-safe entry point, `@chassis-ui/react/static-table`, and must stay importable from
+// a React Server Component without creating a client boundary (see RSC.md). Nothing reachable from
+// here may use hooks, context, or browser APIs; `scripts/check-rsc-directive.ts` fails the build if
+// the built entry ever gains a directive. For the same reason it skips the
+// `suppressFocusRingGlobally` import the other barrels carry — there's no client module to run it.
+export { StaticTable } from './StaticTable'
+export type { StaticTableProps } from './StaticTable'

package/src/components/stepper/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Stepper } from './Stepper'
 export type { StepperProps, StepperItemDef } from './Stepper'
 export { StepperItem } from './StepperItem'

package/src/components/switch/Switch.tsx

@@ -39,6 +39,11 @@ export interface SwitchProps extends Omit<
   isSelected?: boolean
   /**
    * The element represents a caption for a component.
+   *
+   * Children are accepted as an alias for this prop — `label` wins when both are given.
+   * react-aria, which backs this component, calls the same thing `children`; this package renames
+   * it to `label`, and honouring both means the shape React developers reach for first still
+   * names the control instead of silently producing an unlabelled one.
    */
   label?: ReactNode
   /**
@@ -135,6 +140,7 @@ const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchVariantProps>(
   (
     {
       className,
+      children,
       color,
       defaultSelected,
       disabled,
@@ -151,6 +157,9 @@ const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchVariantProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const forkedRef = useForkedRef(ref, inputRef)
+    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
+    // shape React developers reach for first names the control instead of vanishing.
+    const resolvedLabel = label ?? children
 
     const toggleState = useToggleState({
       defaultSelected,
@@ -162,7 +171,7 @@ const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchVariantProps>(
     const { inputProps: switchProps } = useSwitch(
       {
         ...rest,
-        children: label,
+        children: resolvedLabel,
         isDisabled: disabled,
         isInvalid: invalid,
         value: rest.value as string | undefined
@@ -178,7 +187,7 @@ const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchVariantProps>(
       id,
       inputProps: switchProps,
       invalid,
-      label,
+      label: resolvedLabel,
       size,
       valid
     })
@@ -192,6 +201,7 @@ SwitchCheckbox.displayName = 'SwitchCheckbox'
 const SwitchRadio = forwardRef<HTMLInputElement, SwitchVariantProps>(
   (
     {
+      children,
       className,
       color,
       defaultSelected,
@@ -209,6 +219,9 @@ const SwitchRadio = forwardRef<HTMLInputElement, SwitchVariantProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const forkedRef = useForkedRef(ref, inputRef)
+    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
+    // shape React developers reach for first names the control instead of vanishing.
+    const resolvedLabel = label ?? children
 
     const radioProps = {
       ...rest,
@@ -230,7 +243,7 @@ const SwitchRadio = forwardRef<HTMLInputElement, SwitchVariantProps>(
       id,
       inputProps: radioProps,
       invalid,
-      label,
+      label: resolvedLabel,
       size,
       valid
     })

package/src/components/switch/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Switch } from './Switch'
 export type { SwitchProps } from './Switch'

package/src/components/table/Table.tsx

@@ -25,6 +25,7 @@ import {
 
 import { useForkedRef } from '../../hooks/useForkedRef'
 import { ContextColor } from '../../types'
+import { tableClassName, tableWrapperClassName } from '../../utils/tableClassName'
 import './Table.css'
 
 // `GridNode<T>` (from `@react-types/shared`) isn't re-exported by either package's public
@@ -179,24 +180,20 @@ const TableInner = <T extends object>(
     internalRef
   )
 
-  const _className = classNames(
-    'table',
+  const _className = tableClassName({
+    align,
+    bordered,
+    borderless,
+    className,
     color,
-    {
-      [`align-${align}`]: align,
-      bordered,
-      borderless,
-      hoverable: hover,
-      sm,
-      stacked: stacked === true,
-      striped
-    },
-    typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,
-    className
-  )
+    hover,
+    sm,
+    stacked,
+    striped
+  })
 
   const tableEl = (
-    <table {...gridProps} className={_className || undefined} ref={ref}>
+    <table {...gridProps} className={_className} ref={ref}>
       {caption && <caption>{caption}</caption>}
       <TableRowGroup className={children[0].props.className} type="thead">
         {state.collection.headerRows.map((headerRow) => (
@@ -228,13 +225,8 @@ const TableInner = <T extends object>(
     </table>
   )
 
-  if (!responsive && !stacked) return tableEl
-
-  const wrapperClassName = responsive
-    ? typeof responsive === 'boolean'
-      ? 'table-responsive'
-      : `max-${responsive}:table-responsive`
-    : 'table-responsive'
+  const wrapperClassName = tableWrapperClassName({ responsive, stacked })
+  if (!wrapperClassName) return tableEl
 
   return <div className={wrapperClassName}>{tableEl}</div>
 }

package/src/components/table/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Table } from './Table'
 export type { TableProps } from './Table'
 export { TableBody } from './TableBody'

package/src/components/tabs/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Tabs } from './Tabs'
 export type { TabsProps } from './Tabs'
 export { Tab } from './Tab'

package/src/components/text-input/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { TextInput } from './TextInput'
 export type { TextInputProps } from './TextInput'

package/src/components/textarea/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Textarea } from './Textarea'
 export type { TextareaProps } from './Textarea'

package/src/components/toast/Toast.tsx

@@ -51,7 +51,8 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    */
   footer?: ReactNode | ((close: () => void) => ReactNode)
   /**
-   * Leading icon for the header. A string is rendered as `<ToastIcon name={icon} />`; pass
+   * Leading icon for the header. A string is an icon name, rendered like
+   * `<ToastIcon name={icon} />` (or by `IconProvider`'s `component`); pass
    * any other node for a fully custom icon (typically a logo or avatar). Shorthand for
    * `ToastHeader`'s `icon` prop; hidden from assistive technology by default, since it
    * duplicates `title` visually.

package/src/components/toast/ToastHeader.tsx

@@ -8,7 +8,7 @@ import {
   PolymorphicComponentProps,
   PolymorphicRef
 } from '../../utils/polymorphic'
-import { ToastIcon } from './ToastIcon'
+import { ResolvedIcon } from '../../utils/iconSlot'
 
 type ToastHeaderOwnProps<C extends ElementType> = {
   /**
@@ -33,7 +33,8 @@ type ToastHeaderOwnProps<C extends ElementType> = {
    */
   component?: C
   /**
-   * Leading icon. A string is rendered as `<ToastIcon name={icon} />` and hidden from
+   * Leading icon. A string is an icon name, rendered like `<ToastIcon name={icon} />` (or by
+   * `IconProvider`'s `component`) and hidden from
    * assistive technology by default, since it duplicates the heading visually. Pass any other
    * node for a fully custom icon (typically a logo or avatar) — a custom node is left as-is,
    * since it may carry its own meaningful accessible name (e.g. an avatar's `alt` text).
@@ -82,7 +83,7 @@ function ToastHeaderRender<C extends ElementType = 'div'>(
       {icon != null &&
         (typeof icon === 'string' ? (
           <span aria-hidden="true" className="me-sm">
-            <ToastIcon name={icon} />
+            <ResolvedIcon value={icon} className="toast-icon" />
           </span>
         ) : (
           <span className="me-sm">{icon}</span>

package/src/components/toast/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Toast } from './Toast'
 export type { ToastProps } from './Toast'
 export { ToastBody } from './ToastBody'
@@ -16,3 +20,7 @@ export { Toaster } from './Toaster'
 export type { ToasterProps } from './Toaster'
 export { addToast, closeToast, toastQueue } from './toastQueue'
 export type { ToastContent } from './toastQueue'
+// Also exported from the package root; repeated here so this folder's subpath entry
+// (`@chassis-ui/react/<folder>`) covers the whole family without reaching back to the root.
+export { useToast } from '../../hooks/useToast'
+export type { UseToastResult } from '../../hooks/useToast'

package/src/components/tooltip/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Tooltip } from './Tooltip'
 export type { TooltipProps } from './Tooltip'

package/src/hooks/useIconConfig.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+
+import { IconConfig, IconContext } from '../utils/iconConfig'
+
+// The nearest `IconProvider`'s settings, merged with every provider above it; empty outside one.
+export const useIconConfig = (): IconConfig => useContext(IconContext)

package/src/index.ts

@@ -2,8 +2,9 @@
 
 // Side-effect only: installs the single document-level pointerdown listener that works around the
 // browser's `:focus-visible` first-click heuristic misfire — see the module's own comment. Needs to
-// run once wherever this package is used, not per-component, so it's imported here rather than
-// from any individual component.
+// run once wherever this package is used, not per-component, so it's imported by entry points
+// (here, and every component folder's `index.ts` barrel, each of which is also a subpath entry)
+// rather than from any individual component.
 import './utils/suppressFocusRingGlobally'
 
 import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './components/accordion'
@@ -91,7 +92,7 @@ import { Select } from './components/select'
 import { Switch } from './components/switch'
 import { TextInput } from './components/text-input'
 import { Textarea } from './components/textarea'
-import { Icon } from './components/icon'
+import { Icon, IconProvider } from './components/icon'
 import { Placeholder } from './components/placeholder'
 import { Link } from './components/link'
 import { List, ListItem } from './components/list'
@@ -104,6 +105,7 @@ import { Progress, ProgressBar } from './components/progress'
 import { Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerTitle } from './components/drawer'
 import { Skeleton, SkeletonLoader } from './components/skeleton'
 import { Spinner } from './components/spinner'
+import { StaticTable } from './components/static-table'
 import { Stepper, StepperItem } from './components/stepper'
 import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from './components/table'
 import { Tabs, Tab, TabList, TabPanel } from './components/tabs'
@@ -224,6 +226,7 @@ export {
   FormHelp,
   FormLabel,
   Icon,
+  IconProvider,
   Placeholder,
   InputGroup,
   InputGroupAddon,
@@ -265,6 +268,7 @@ export {
   Skeleton,
   SkeletonLoader,
   Spinner,
+  StaticTable,
   Stepper,
   StepperItem,
   Switch,
@@ -367,6 +371,15 @@ export type { CloseButtonProps } from './components/close-button'
 export type { CollapseProps } from './components/collapse'
 export type { ColorInputProps } from './components/color-input'
 export type { ComboboxGroupProps, ComboboxItemProps, ComboboxProps } from './components/combobox'
+export type {
+  DataGridBodyProps,
+  DataGridCellProps,
+  DataGridColumnProps,
+  DataGridHeaderProps,
+  DataGridProps,
+  DataGridRowProps,
+  DataGridSelectionCellProps
+} from './components/datagrid'
 export type {
   DatePickerMultipleProps,
   DatePickerProps,
@@ -393,7 +406,13 @@ export type {
   GridProps,
   RowProps
 } from './components/grid'
-export type { IconProps } from './components/icon'
+export type {
+  IconComponentProps,
+  IconKey,
+  IconProps,
+  IconProviderProps,
+  IconValue
+} from './components/icon'
 export type { InputAdornProps } from './components/input-adorn'
 export type { InputGroupAddonProps, InputGroupProps } from './components/input-group'
 export type { LinkProps } from './components/link'
@@ -449,6 +468,7 @@ export type { RangeInputProps } from './components/range-input'
 export type { SelectOptionDef, SelectProps } from './components/select'
 export type { SkeletonLoaderProps, SkeletonProps } from './components/skeleton'
 export type { SpinnerProps } from './components/spinner'
+export type { StaticTableProps } from './components/static-table'
 export type { StackProps } from './components/stack'
 export type { StepperItemDef, StepperItemProps, StepperProps } from './components/stepper'
 export type { SwitchProps } from './components/switch'

package/src/utils/iconConfig.ts

@@ -0,0 +1,88 @@
+import { ComponentType, createContext, ReactElement } from 'react'
+
+/**
+ * The icons this library's own components draw, by purpose rather than by icon name — so a
+ * consumer can map each one onto any icon set (see `IconProvider`'s `icons`).
+ */
+export type IconKey = 'check' | 'previous' | 'next' | 'menu' | 'play' | 'pause'
+
+/**
+ * An icon given to `IconProvider`'s `icons` or to a component's icon prop: a string is an icon
+ * name, rendered by `IconProvider`'s `component` (or the built-in `Icon`); an element is rendered
+ * as-is, with the component's own class names merged onto it.
+ */
+export type IconValue = string | ReactElement
+
+/**
+ * Props `IconProvider`'s `component` receives for every icon name it's asked to render.
+ */
+export interface IconComponentProps {
+  /**
+   * The icon name — an `IconValue` string, or `IconProvider`'s default for that icon.
+   */
+  name: string
+  /**
+   * The class names the rendering component needs on the icon (e.g. `menu-item-check`,
+   * `directional-icon`) for chassis-css to position and flip it.
+   */
+  className?: string
+  [prop: string]: unknown
+}
+
+export interface IconConfig {
+  /**
+   * Class names added to every `Icon`, alongside its own `icon` class.
+   */
+  className?: string
+  /**
+   * Replaces the built-in `Icon` for every icon this library's components render by name — the
+   * strings in `icons` and their defaults, and a string `icon` on `Toast`/`Notification`. A
+   * component reference can't be passed from a React Server Component, so set this in a
+   * `'use client'` module.
+   */
+  component?: ComponentType<IconComponentProps>
+  /**
+   * Render `Icon` as an icon-font glyph instead of an SVG sprite reference, unless an `Icon` sets
+   * `font` itself. Needs the icon font's stylesheet loaded.
+   */
+  font?: boolean
+  /**
+   * Class-name prefix of the icon font's glyphs: an icon named `check-solid` renders as
+   * `{fontPrefix}check-solid`.
+   *
+   * @default 'cx-'
+   */
+  fontPrefix?: string
+  /**
+   * The icon to render for each of the library's own icons, by purpose. Unset ones keep their
+   * defaults (`check-solid`, `chevron-left-outline`, `chevron-right-outline`, `bars-outline`,
+   * `play-solid`, `pause-solid`).
+   */
+  icons?: Partial<Record<IconKey, IconValue>>
+  /**
+   * URL of the SVG sprite `Icon` references, e.g. `/static/icons/chassis-icons.svg`. Leave empty
+   * (the default) when the sprite is embedded in the page, so icons render as `href="#name"`.
+   * Browsers don't load an external sprite from another origin.
+   *
+   * @default ''
+   */
+  sprite?: string
+}
+
+// The chassis-icons names this library used before its icons became configurable. Both
+// previous/next consumers (Pagination, Carousel) now share the outline chevrons — Pagination used
+// the solid ones.
+export const DEFAULT_ICONS: Record<IconKey, string> = {
+  check: 'check-solid',
+  previous: 'chevron-left-outline',
+  next: 'chevron-right-outline',
+  menu: 'bars-outline',
+  play: 'play-solid',
+  pause: 'pause-solid'
+}
+
+export const DEFAULT_FONT_PREFIX = 'cx-'
+
+// Lives in `utils/` rather than `components/icon/` because it's read outside that folder too —
+// by `IconSlot` (`./iconSlot.tsx`), which every icon-drawing component renders through.
+export const IconContext = createContext<IconConfig>({})

package/src/utils/iconSlot.tsx

@@ -0,0 +1,41 @@
+import React, { cloneElement, ReactElement } from 'react'
+import { mergeProps } from 'react-aria'
+
+import { Icon } from '../components/icon/Icon'
+import { useIconConfig } from '../hooks/useIconConfig'
+import { DEFAULT_ICONS, IconKey, IconValue } from './iconConfig'
+
+// Every icon this library's own components draw goes through here, never through `<Icon>`
+// directly, so a consumer can swap in their own icons (`IconProvider`'s `icons`/`component`, or a
+// component's own icon prop). The rendering component passes the class names chassis-css hooks
+// onto (`menu-item-check` positions the check, `navbar-toggler-icon` sizes and colors it,
+// `carousel-icon-play`/`-pause` are toggled by state, `directional-icon` flips in RTL); those are
+// merged onto whatever icon ends up rendered, so a custom icon lands in the same place a built-in
+// one would. `aria-hidden` defaults on: each of these icons sits beside its own visible or
+// visually-hidden label.
+//
+// A custom *element* deliberately doesn't get the `icon` class itself: chassis-css's `.icon` sets
+// `fill`, which would paint over an outline icon set's `fill="none"` (Lucide, Heroicons outline,
+// ...). It keeps its own size and color — `currentColor` icons still follow the control's text.
+type IconRenderProps = { className?: string } & Record<string, unknown>
+
+export function ResolvedIcon({ value, ...props }: IconRenderProps & { value: IconValue }) {
+  const { component: Component } = useIconConfig()
+  const iconProps = { 'aria-hidden': true, ...props }
+
+  if (typeof value !== 'string') {
+    const element = value as ReactElement<Record<string, unknown>>
+    return cloneElement(element, mergeProps(iconProps, element.props))
+  }
+  if (Component) return <Component name={value} {...iconProps} />
+  return <Icon name={value} {...iconProps} />
+}
+
+export function IconSlot({
+  icon,
+  override,
+  ...props
+}: IconRenderProps & { icon: IconKey; override?: IconValue }) {
+  const { icons } = useIconConfig()
+  return <ResolvedIcon value={override ?? icons?.[icon] ?? DEFAULT_ICONS[icon]} {...props} />
+}

package/src/utils/polymorphic.ts

@@ -1,12 +1,16 @@
 import {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
+  createElement,
   ElementType,
   ForwardRefRenderFunction,
   forwardRef,
   Ref
 } from 'react'
 
+import { devWarning } from './devWarning'
+import { getSlotChild, Slot, SlotProvider } from './slot'
+
 // Ref type inferred from a polymorphic component's currently-selected `component` element type.
 export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref']
 
@@ -26,6 +30,21 @@ export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['re
 export type PolymorphicRefWithFallback<C extends ElementType, Fallback extends HTMLElement> =
   PolymorphicRef<C> | Ref<Fallback>
 
+/**
+ * The `asChild` prop every polymorphic component accepts alongside `component` — see
+ * `createPolymorphicComponent` below for how it's implemented once for all of them.
+ */
+export interface AsChildProps {
+  /**
+   * Render the single child element in place of this component's own element, with this
+   * component's classes, props and ref merged onto it: `<Button asChild><Link href="/login">Log
+   * in</Link></Button>`. The alternative to `component` for React Server Components — an element
+   * can be passed from the server to this package's client components, a component reference
+   * (`component={Link}`) can't.
+   */
+  asChild?: boolean
+}
+
 /**
  * Props for a polymorphic component: `OwnProps` (which must declare `component?: C`) plus
  * whatever props `C` itself accepts, minus any name already claimed by `OwnProps` so the two
@@ -33,7 +52,8 @@ export type PolymorphicRefWithFallback<C extends ElementType, Fallback extends H
  * type-checking/autocomplete for that component's own props at the call site.
  */
 export type PolymorphicComponentProps<C extends ElementType, OwnProps extends object> = OwnProps &
-  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps>
+  AsChildProps &
+  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | keyof AsChildProps>
 
 /**
  * Wraps a polymorphic component's render function in `forwardRef` and stamps `displayName` — the
@@ -41,13 +61,40 @@ export type PolymorphicComponentProps<C extends ElementType, OwnProps extends ob
  * fully generic component type (e.g. `ButtonComponent`) that `forwardRef`'s own return type can't
  * express, since `forwardRef` only accepts a non-generic render function — the caller still casts
  * the render function to a concrete `Element`-typed instance before passing it in here.
+ *
+ * Also implements `asChild` for every polymorphic component at once (#23): the render function
+ * gets `component={Slot}` and the child element's own children, so it computes its classes,
+ * props and ref exactly as it would for any component reference (`component={Link}`) — `Slot`
+ * then clones the caller's child element with all of that merged on (see `./slot`). No render
+ * function needs to know `asChild` exists.
  */
 export function createPolymorphicComponent<T>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: ForwardRefRenderFunction<Element, any>,
   displayName: string
 ): T {
-  const Component = forwardRef(render) as unknown as T & { displayName?: string }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Component = forwardRef<Element, any>(({ asChild, ...props }, ref) => {
+    const child = asChild ? getSlotChild(props.children, displayName) : null
+    if (!child) return render(props, ref)
+
+    devWarning(
+      props.component !== undefined,
+      `${displayName}: both \`asChild\` and \`component\` were passed; \`asChild\` wins and ` +
+        `\`component\` is ignored.`
+    )
+
+    return createElement(
+      SlotProvider,
+      { value: child },
+      render(
+        { ...props, component: Slot, children: (child.props as PropsWithChildren).children },
+        ref
+      )
+    )
+  }) as unknown as T & { displayName?: string }
   Component.displayName = displayName
   return Component
 }
+
+type PropsWithChildren = { children?: unknown }