@edgeandnode/eds-react 1.0.1 → 1.1.0

package/src/components/Modal.parts.tsx

@@ -17,6 +17,7 @@ import { Dialog } from '@base-ui/react/dialog'
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { ArrowLeftIcon, XIcon } from '@edgeandnode/eds-react/icons'
 
+import { LocalThemeContext } from '../EDSContext.ts'
 import { useControlled, useCSSPropsPolyfill, useEDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { Portal } from './base/Portal.tsx'
@@ -113,10 +114,13 @@ export const ModalRoot = <
   defaultOpen,
   onOpenChange,
   dismissible: passedDismissible,
-  role,
   steps: passedSteps = 1 as Steps,
   currentStep: controlledCurrentStep,
   onCurrentStepChange,
+  role,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   children,
   ...props
 }: ModalProps<Steps, Step>) => {
@@ -275,7 +279,13 @@ export const ModalRoot = <
             hidden={undefined}
           />
         </Portal>
-        <Dialog.Portal>
+        <Dialog.Portal
+          /**
+           * Modals cover the whole page, so they're rendered in `<body>`, even when opened from
+           * inside another portal (e.g. a `Menu`), where Base UI would put them otherwise.
+           */
+          container={typeof document !== 'undefined' ? document.body : undefined}
+        >
           <div
             ref={passedRef}
             /**
@@ -318,6 +328,10 @@ export const ModalRoot = <
                   ? 'dialog'
                   : 'alertdialog')
               }
+              aria-label={ariaLabel}
+              // Only when passed, so Base UI's title and description wiring still applies
+              {...(ariaLabelledBy !== undefined && { 'aria-labelledby': ariaLabelledBy })}
+              {...(ariaDescribedBy !== undefined && { 'aria-describedby': ariaDescribedBy })}
               className="
                 fixed inset-0 m-auto h-max
                 max-h-[min(max(100cqb,100vh-100cqb*9999),var(--strict-max-height))]
@@ -355,15 +369,18 @@ export const ModalRoot = <
                   has-nested/modal-slot:p-0
                 "
               >
-                {typeof children === 'function'
-                  ? children({
-                      open,
-                      setOpen,
-                      closeModal: () => setOpen(false),
-                      currentStep,
-                      setCurrentStep,
-                    })
-                  : children}
+                {/* Modals cover the whole page, so they use its theme rather than the local one */}
+                <LocalThemeContext.Provider value={undefined}>
+                  {typeof children === 'function'
+                    ? children({
+                        open,
+                        setOpen,
+                        closeModal: () => setOpen(false),
+                        currentStep,
+                        setCurrentStep,
+                      })
+                    : children}
+                </LocalThemeContext.Provider>
               </div>
             </Dialog.Popup>
           </div>

package/src/components/Pane.parts.tsx

@@ -11,7 +11,6 @@ import {
   useState,
   useSyncExternalStore,
   type ComponentProps,
-  type ElementType,
   type MouseEvent,
   type ReactNode,
   type RefObject,
@@ -25,7 +24,12 @@ import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { useCSSPropsPolyfill, useFirstRender, usePrevious, useStyle } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { Presence } from './base/Presence.tsx'
-import { Render, type RenderProp } from './base/Render.tsx'
+import {
+  Render,
+  type AsOrRenderProps,
+  type HTMLElementProps,
+  type RenderProp,
+} from './base/Render.tsx'
 import { PaneContainerMeta, PaneMeta } from './Pane.meta.ts'
 import { ToggleButton, type ToggleButtonProps } from './ToggleButton.tsx'
 
@@ -282,30 +286,31 @@ export function PaneContainer({
 }
 PaneContainer.displayName = 'Pane.Container'
 
-export interface PaneProps extends ComponentProps<'div'>, EDSComponentProps<typeof PaneMeta> {
-  /** @default 'div' */
-  as?: ElementType | undefined
-  /** Unique name for this pane. */
-  name: string
-  /**
-   * Whether the pane is pseudo-modal in overlay mode. When `true`, the overlay shows a backdrop,
-   * receives focus when opened, and can be closed by pressing Escape or interacting with elements
-   * covered by the backdrop.
-   *
-   * @default true
-   */
-  overlayModal?: boolean | undefined
-  /**
-   * Whether the content should stay mounted when the pane is closed.
-   *
-   * @default true
-   */
-  keepMounted?: boolean | undefined
+export declare namespace PaneProps {
+  interface CommonProps extends HTMLElementProps, EDSComponentProps<typeof PaneMeta> {
+    /** Unique name for this pane. */
+    name: string
+    /**
+     * Whether the pane is pseudo-modal in overlay mode. When `true`, the overlay shows a backdrop,
+     * receives focus when opened, and can be closed by pressing Escape or interacting with elements
+     * covered by the backdrop.
+     *
+     * @default true
+     */
+    overlayModal?: boolean | undefined
+    /**
+     * Whether the content should stay mounted when the pane is closed.
+     *
+     * @default true
+     */
+    keepMounted?: boolean | undefined
+  }
 }
 
+export type PaneProps = PaneProps.CommonProps & AsOrRenderProps
+
 export function PaneRoot({
   ref: passedRef,
-  as: Element = 'div',
   name,
   layout,
   side,
@@ -316,7 +321,7 @@ export function PaneRoot({
 }: PaneProps) {
   const { store, pane } = usePaneInternal(name)
 
-  const rootRef = useRef<HTMLDivElement>(null)
+  const rootRef = useRef<HTMLElement>(null)
   const rootPassedRef = useMergedRefs(rootRef, passedRef)
 
   // Observe `--tw-duration` to allow customizing the transition duration via CSS
@@ -379,7 +384,7 @@ export function PaneRoot({
   }
 
   return (
-    <Element
+    <Render
       ref={rootPassedRef}
       id={pane.id}
       data-eds-exposed-open={open}
@@ -587,7 +592,7 @@ export function PaneRoot({
           return <Fragment key={key} />
         })}
       </Presence>
-    </Element>
+    </Render>
   )
 }
 PaneRoot.displayName = 'Pane'
@@ -604,7 +609,7 @@ function useOverlayModalFocus({
   layout,
   overlayOpen,
 }: {
-  rootRef: RefObject<HTMLDivElement | null>
+  rootRef: RefObject<HTMLElement | null>
   store: PaneStore
   name: string
   enabled: boolean

package/src/components/Prose.meta.ts

@@ -8,5 +8,15 @@ export const ProseMeta = createComponent('Prose', {
       values: ['xsmall', 'small', 'medium'],
       defaultValue: 'medium',
     },
+    /**
+     * Use the serif font for headings, e.g. for editorial or marketing content.
+     *
+     * @default false
+     */
+    serif: {
+      type: 'values',
+      values: [false, true],
+      defaultValue: false,
+    },
   },
 })

package/src/components/Prose.tsx

@@ -20,12 +20,12 @@ export interface ProseProps
   children?: string | undefined
 }
 
-export function Prose({ ref: passedRef, size, children, ...props }: ProseProps) {
+export function Prose({ ref: passedRef, size, serif, children, ...props }: ProseProps) {
   useEDS()
 
   const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     ProseMeta,
-    { size },
+    { size, serif },
     { ref: passedRef },
   )
 
@@ -34,7 +34,7 @@ export function Prose({ ref: passedRef, size, children, ...props }: ProseProps)
       ref={cssPropsPolyfillPassedRef}
       {...mergeProps(
         { className: cn('eds-prose u:text-muted u:text-wrap-style-pretty') },
-        getCSSPropsAttributes(ProseMeta, { size }),
+        getCSSPropsAttributes(ProseMeta, { size, serif }),
         cssPropsPolyfillAttributes,
         props,
       )}
@@ -45,6 +45,7 @@ export function Prose({ ref: passedRef, size, children, ...props }: ProseProps)
           @prop-size-xsmall/prose:prose-xsmall
           @prop-size-small/prose:prose-small
           @prop-size-medium/prose:prose-medium
+          @prop-serif-true/prose:prose-serif
         "
       >
         <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>

package/src/components/SegmentedControl.parts.tsx

@@ -22,13 +22,8 @@ import {
   useCSSState,
   useEDS,
 } from '../hooks/index.ts'
-import {
-  cn,
-  getCSSPropsAttributes,
-  isReactNode,
-  splitProps,
-  type OptionValue,
-} from '../utils/index.ts'
+import { cn, getCSSPropsAttributes, splitProps, type OptionValue } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { SegmentedControlMeta, SegmentedControlOptionMeta } from './SegmentedControl.meta.ts'
 import { Tooltip, type TooltipProps } from './Tooltip.tsx'
@@ -193,7 +188,7 @@ export function SegmentedControlOption<T extends OptionValue>({
   }
 
   return (
-    <Tooltip {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}>
+    <Tooltip {...getTooltipProps(tooltip)}>
       {/**
        * This wrapper is necessary to ensure this component returns a single element (which some Tailwind
        * classes might assume) because `Radio.Root` renders a `<input type="radio">` as a sibling of the

package/src/components/Select.parts.tsx

@@ -5,12 +5,14 @@ import {
   createContext,
   isValidElement,
   useContext,
+  useState,
   type ComponentProps,
   type ElementType,
   type ReactElement,
   type ReactNode,
 } from 'react'
 import { mergeProps } from '@base-ui/react'
+import { Menu as BaseUIMenu } from '@base-ui/react/menu'
 import flattenChildren from 'react-keyed-flatten-children'
 
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
@@ -18,11 +20,12 @@ import { CaretDownInteractiveIcon } from '@edgeandnode/eds-react/icons'
 
 import { useControlled } from '../hooks/index.ts'
 import { cn, reactNodeToString, splitProps, type OptionValue } from '../utils/index.ts'
+import { resolveLazy } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { Field, type FieldProps } from './base/Field.tsx'
 import { Render, type RenderFnHandlers, type RenderFnProps } from './base/Render.tsx'
 import type { MenuMeta } from './Menu.meta.ts'
-import { Menu } from './Menu.tsx'
+import { Menu, type MenuProps } from './Menu.tsx'
 import type { SelectMeta, SelectOptionMeta } from './Select.meta.ts'
 
 type MenuCSSProps = EDSComponentProps<typeof MenuMeta>
@@ -281,21 +284,25 @@ export declare namespace SelectProps {
     /**
      * `true` for the default filter; a function for custom filtering. Auto-enables when
      * `searchValue` or `onSearchValueChange` is set. When truthy and `header` is unset,
-     * `Menu.Search` becomes the default header.
+     * `Menu.Search` becomes the default header. A custom `header` must include `Menu.Search`.
      */
     searchable?: boolean | SelectSearchableFn<T>
     searchValue?: string
-    onSearchValueChange?: (value: string) => void
+    /**
+     * Called when the search query changes, including when it's reset after the menu closes (then
+     * `eventDetails.reason` is `'popup-close'`).
+     */
+    onSearchValueChange?: MenuProps['onSearchValueChange']
   }
 
   interface DeclarativeProps {
     options?: never
     /**
      * `Select.Option` elements (fragments / arrays are fine — `flattenChildren` flattens them).
-     * Wrapping options here (e.g., `<Tooltip><Select.Option/></Tooltip>`) is unsupported:
-     * `child.type === SelectOption` only matches direct children, so a wrapped option wouldn't
-     * appear in `optionsList`. Use the data API for that — its `children` render fn is opaque to
-     * `Select`, so wrapping is free.
+     * Wrapping options here (e.g., `<Tooltip><Select.Option/></Tooltip>`) is unsupported: options
+     * are identified by their type, which only matches direct children, so a wrapped option
+     * wouldn't appear in `optionsList`. Use the data API for that — its `children` render fn is
+     * opaque to `Select`, so wrapping is free.
      */
     children?: ReactNode
   }
@@ -349,7 +356,7 @@ export function SelectRoot<T extends OptionValue = number>({
   alignOffset,
   matchTriggerWidth = 'at-least',
   matchTriggerHeight,
-  header: passedHeader,
+  header,
   footer,
   empty,
   trigger: passedTrigger,
@@ -373,11 +380,12 @@ export function SelectRoot<T extends OptionValue = number>({
     onValueChange as ((value: T | T[] | undefined) => void) | undefined,
   )
 
-  const [searchValue, setSearchValue] = useControlled(
-    controlledSearchValue,
-    '',
-    onSearchValueChange,
-  )
+  /**
+   * Not `useControlled`, which skips a change equal to the previous one even if the parent ignored
+   * it (e.g. the reset after the menu closes), so clearing the search would then do nothing.
+   */
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState('')
+  const searchValue = controlledSearchValue ?? uncontrolledSearchValue
 
   /**
    * `searchable` auto-enables when `searchValue` / `onSearchValueChange` is wired (matches how
@@ -423,16 +431,9 @@ export function SelectRoot<T extends OptionValue = number>({
       }
     : null
 
-  /** Default `header` to a wired `<Menu.Search>` when search is enabled and none was provided. */
-  const header =
-    passedHeader !== undefined ? (
-      passedHeader
-    ) : searchEnabled ? (
-      <Menu.Search value={searchValue} onValueChange={setSearchValue} />
-    ) : undefined
-
   const renderMenuContent = () => {
-    if (augmentedChildren.length === 0) {
+    // A searchable menu shows `empty` itself when no option matches
+    if (augmentedChildren.length === 0 && !searchEnabled) {
       if (empty === undefined) return <Menu.Empty />
       return typeof empty === 'string' ? <Menu.Empty>{empty}</Menu.Empty> : empty
     }
@@ -582,14 +583,7 @@ export function SelectRoot<T extends OptionValue = number>({
               {...radioGroupProps}
               open={open}
               defaultOpen={defaultOpen}
-              onOpenChange={(newOpen) => {
-                // Reset uncontrolled search on open (not close) — resetting on close would flash
-                // the unfiltered list mid close-animation. Controlled consumers own their lifecycle.
-                if (newOpen && searchEnabled && controlledSearchValue === undefined) {
-                  setSearchValue('')
-                }
-                onOpenChange?.(newOpen)
-              }}
+              onOpenChange={onOpenChange}
               side={side}
               gap={gap}
               align={align}
@@ -598,6 +592,13 @@ export function SelectRoot<T extends OptionValue = number>({
               matchTriggerHeight={matchTriggerHeight}
               header={header}
               footer={footer}
+              searchable={searchEnabled && 'manual'}
+              searchValue={searchValue}
+              onSearchValueChange={(newSearchValue, eventDetails) => {
+                setUncontrolledSearchValue(newSearchValue)
+                onSearchValueChange?.(newSearchValue, eventDetails)
+              }}
+              empty={empty}
               highlightCheckedOnOpen
               trigger={menuTrigger}
             >
@@ -653,6 +654,8 @@ function useSelectOptions<T extends OptionValue>({
     addonBefore: ReactNode
     addonAfter: ReactNode
   }> = []
+  const { contains } = BaseUIMenu.useFilter()
+  const trimmedSearchValue = searchValue.trim()
 
   /**
    * Per-iteration helper: records the option in `optionsList` (always the full set) and returns the
@@ -667,12 +670,18 @@ function useSelectOptions<T extends OptionValue>({
     renderNode: () => ReactNode,
   ): ReactNode[] => {
     optionsList.push({ value, label, addonBefore, addonAfter })
-    if (searchEnabled) {
+    if (searchEnabled && trimmedSearchValue !== '') {
       const stringLabel = reactNodeToString(label)
       const passes =
         typeof searchable === 'function'
-          ? searchable({ value, label: stringLabel, addonBefore, addonAfter, searchValue })
-          : stringLabel.toLowerCase().includes(searchValue.toLowerCase())
+          ? searchable({
+              value,
+              label: stringLabel,
+              addonBefore,
+              addonAfter,
+              searchValue: trimmedSearchValue,
+            })
+          : contains(stringLabel, trimmedSearchValue)
       if (!passes) return []
     }
     return [renderNode()]
@@ -727,7 +736,7 @@ function useSelectOptions<T extends OptionValue>({
     const flatChildren = flattenChildren(children as ReactNode)
     let autoValueCounter = 0
     augmentedChildren = flatChildren.flatMap((child) => {
-      if (isValidElement(child) && child.type === SelectOption) {
+      if (isValidElement(child) && resolveLazy(child.type) === SelectOption) {
         const childProps = child.props as SelectOptionProps<T>
         const hasExplicitValue = childProps.value !== undefined
         const effectiveValue = (hasExplicitValue ? childProps.value : autoValueCounter) as T

package/src/components/TabSet.parts.tsx

@@ -15,7 +15,8 @@ import flattenChildren from 'react-keyed-flatten-children'
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 
 import { useControlled, useCSSPropsPolyfill, useCSSState, useEDS } from '../hooks/index.ts'
-import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
+import { cn, getCSSPropsAttributes } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
 import {
@@ -270,10 +271,7 @@ export function TabSetTab({
             tabRenderProps,
           )}
           render={(buttonOrLinkRenderProps, { Element, elementProps }) => (
-            <Tooltip
-              {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}
-              triggerProps={buttonOrLinkRenderProps}
-            >
+            <Tooltip {...getTooltipProps(tooltip)} triggerProps={buttonOrLinkRenderProps}>
               <Element {...elementProps}>
                 {addonBefore ? <TabAddon>{renderAddon(addonBefore)}</TabAddon> : null}
                 {children ? (

package/src/components/Table.parts.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  Children,
   createContext,
   Fragment,
   isValidElement,
@@ -753,9 +754,8 @@ export function TableCell({
         ) : null}
       </span>
     )
-  const cellContentMayContainInteractiveElements = Array.isArray(children)
-    ? children.some(isValidElement)
-    : isValidElement(children)
+  // `Children.toArray` also resolves lazy nodes (elements passed from server components)
+  const cellContentMayContainInteractiveElements = Children.toArray(children).some(isValidElement)
 
   return (
     <td

package/src/components/ThemeSwitcher.tsx

@@ -5,7 +5,7 @@ import { MoonIcon, SunIcon } from '@edgeandnode/eds-react/icons'
 
 import type { ResolvedTheme } from '../EDSContext.ts'
 import { useEDS } from '../hooks/index.ts'
-import { isReactNode } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { Menu } from './Menu.tsx'
 import { SegmentedControl, type SegmentedControlProps } from './SegmentedControl.tsx'
 import type { ThemeSwitcherMeta } from './ThemeSwitcher.meta.ts'
@@ -18,19 +18,16 @@ export interface ThemeSwitcherProps
     Omit<SegmentedControlProps<'dark' | 'light'>, 'value' | 'defaultValue' | 'onValueChange'>,
     EDSComponentProps<typeof ThemeSwitcherMeta> {
   /**
-   * Defaults to a label that flips with `activeTheme` (e.g. `Switch to light theme` when dark is
-   * active). Accepts a function that receives `activeTheme` for dynamic content. Pass `null` to
-   * disable.
+   * Defaults to a label that flips with the page's theme (e.g. `Switch to light theme` when it's
+   * dark). Accepts a function that receives the page's theme, resolved to `'dark'` or `'light'`,
+   * for dynamic content. Pass `null` to disable.
    */
-  tooltip?:
-    | ThemeSwitcherTooltip
-    | ((activeTheme: ResolvedTheme) => ThemeSwitcherTooltip)
-    | undefined
+  tooltip?: ThemeSwitcherTooltip | ((theme: ResolvedTheme) => ThemeSwitcherTooltip) | undefined
 }
 
 /**
  * Toggles the EDS theme between light and dark. Right-click for a context menu with a "Use system
- * appearance" toggle. Always uncontrolled — reads `activeTheme` from `useEDS()` and drives
+ * appearance" toggle. Always uncontrolled — reads the theme from `useEDS()` and drives
  * `setTheme()`. `theme="system"` (or `defaultTheme="system"`) on `EDSProvider` also opts into the
  * user's OS preference.
  */
@@ -39,23 +36,24 @@ export function ThemeSwitcher({
   tooltip: passedTooltip,
   ...props
 }: ThemeSwitcherProps) {
-  const { theme, activeTheme, setTheme } = useEDS()
+  const { theme, setTheme, systemTheme } = useEDS()
+  const pageTheme = theme === 'system' ? systemTheme : theme
 
-  const tooltip = typeof passedTooltip === 'function' ? passedTooltip(activeTheme) : passedTooltip
+  const tooltip = typeof passedTooltip === 'function' ? passedTooltip(pageTheme) : passedTooltip
 
   return (
     <Menu
       triggerMode="right-click"
       trigger={
         <Tooltip
-          content={`Switch to ${activeTheme === 'dark' ? 'light' : 'dark'} theme`}
+          content={`Switch to ${pageTheme === 'dark' ? 'light' : 'dark'} theme`}
           closeOnClick={false}
-          {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}
+          {...getTooltipProps(tooltip)}
           triggerProps="forward"
         >
           <SegmentedControl<'dark' | 'light'>
             aria-label={ariaLabel}
-            value={activeTheme}
+            value={pageTheme}
             onValueChange={setTheme}
             {...props}
           >
@@ -72,7 +70,7 @@ export function ThemeSwitcher({
       <Menu.Item
         type="checkbox"
         checked={theme === 'system'}
-        onCheckedChange={(checked) => setTheme(checked ? 'system' : activeTheme)}
+        onCheckedChange={(checked) => setTheme(checked ? 'system' : pageTheme)}
       >
         Use system appearance
       </Menu.Item>

package/src/components/Tooltip.parts.tsx

@@ -75,7 +75,7 @@ export function TooltipRoot({
   triggerProps: passedTriggerProps,
   ...passedProps
 }: TooltipProps) {
-  const { dirProps } = useEDS()
+  const { dirProps, localThemeClass } = useEDS()
 
   const ancestorTooltip = useContext(TooltipContext)
 
@@ -190,7 +190,7 @@ export function TooltipRoot({
             hidden={undefined}
           />
         </Portal>
-        <Tooltip.Portal>
+        <Tooltip.Portal className={localThemeClass}>
           <Tooltip.Positioner
             key={getReactNodeKey(content)} // Refresh the tooltip's position when the content changes (see `WithDynamicContent` story)
             side={

package/src/components/base/Addon.tsx

@@ -1,5 +1,6 @@
 import { createElement, type ComponentType, type ReactNode } from 'react'
-import { isValidElementType } from 'react-is'
+
+import { isComponentType } from '../../utils/index.ts'
 
 type AddonComponent = ComponentType<{
   __addonCompatible?: undefined
@@ -10,9 +11,7 @@ type AddonComponent = ComponentType<{
 export type AddonValue = ReactNode | AddonComponent
 
 export function renderAddon(value: AddonValue): ReactNode {
-  return isValidElementType(value) && typeof value !== 'string'
-    ? createElement(value)
-    : (value as ReactNode)
+  return isComponentType(value) ? createElement(value) : value
 }
 
 /**

package/src/components/base/ButtonOrLink.parts.tsx

@@ -21,6 +21,7 @@ import { useButton } from 'react-aria'
 import type { Merge } from 'type-fest'
 
 import { cn } from '../../utils/index.ts'
+import { resolveLazy } from '../../utils/internal/index.ts'
 import { Render, type RenderFn, type RenderFnProps } from './Render.tsx'
 import { ButtonOrLinkContext, useAncestorButtonOrLink } from './useAncestorButtonOrLink.ts'
 
@@ -345,7 +346,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps): ReactE
         }
       }
     } else if (!disabled) {
-      linkComponent = passedLinkComponent
+      linkComponent = resolveLazy(passedLinkComponent)
     }
   }
 

package/src/components/base/MaybeButtonOrLink.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentProps, ElementType } from 'react'
+import type { ElementType } from 'react'
 
 import {
   ButtonOrLink,
@@ -8,7 +8,7 @@ import {
   type InternalButtonOrLinkProps,
   type OmitInternalButtonOrLinkProps,
 } from './ButtonOrLink.tsx'
-import type { RenderFn } from './Render.tsx'
+import type { HTMLElementProps, RenderFn } from './Render.tsx'
 
 type OtherElementRenderState = {
   category: 'other'
@@ -43,9 +43,9 @@ export declare namespace MaybeButtonOrLinkProps {
   }
   export type OtherElementProps =
     OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.CommonProps> &
-      ComponentProps<'span'> & {
+      HTMLElementProps & {
         onClick?: InternalButtonOrLinkProps.ButtonProps['onClick'] // Not technically correct, but prevents the event from being `any` when `as` is not specified
-        as?: ElementType | undefined
+        as?: keyof HTMLElementTagNameMap | undefined
         render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
         disabled?: undefined
         type?: undefined
@@ -67,14 +67,17 @@ type InternalMaybeButtonOrLinkProps = MaybeButtonOrLinkProps &
 
 /**
  * Renders a `ButtonOrLink` if one of `href` or `onClick` is passed along with no `as`. Otherwise,
- * renders the element type passed in `as` (defaulting to `span`).
+ * renders the tag name passed in `as` (defaulting to `span`), so an element that isn't a button can
+ * still have an `onClick` (e.g. a `label`). Like `ButtonOrLink`'s (and unlike `Render`'s), the
+ * `render` function wraps that element instead of replacing it: it receives it as `Element`, along
+ * with the `elementProps` to spread on it.
  */
 export function MaybeButtonOrLink(props: InternalMaybeButtonOrLinkProps) {
   if ((props.href !== undefined || props.onClick !== undefined) && props.as === undefined) {
     return <ButtonOrLink {...(props as InternalButtonOrLinkProps)} />
   } else {
     const {
-      as: Element = 'span',
+      as: tagName = 'span',
       render,
       disabled: _disabled,
       inline: _inline,
@@ -86,6 +89,8 @@ export function MaybeButtonOrLink(props: InternalMaybeButtonOrLinkProps) {
       ...otherElementProps
     } = props
 
+    // The union of every HTML tag name is too complex a type for JSX
+    const Element = tagName as ElementType
     const renderState: OtherElementRenderState = {
       category: 'other',
       role: props.role ?? 'none',