@graphprotocol/gds-react 0.2.2 → 0.2.4

package/src/components/Chip.parts.tsx

@@ -17,7 +17,7 @@ import { ChipGroupMeta, ChipMeta } from './Chip.meta.ts'
 type ExtractFn<T> = T extends (...args: infer A) => infer R ? (...args: A) => R : never
 
 export declare namespace ChipProps {
-  interface BaseProps extends GDSComponentProps<typeof ChipMeta> {
+  interface OwnProps {
     /** Name used to submit the chip's value when inside a `<Chip.Group type="checkbox">` in a form. */
     name?: string | undefined
     /** Value used to identify this chip when inside a `<Chip.Group>`. */
@@ -26,13 +26,14 @@ export declare namespace ChipProps {
     addonAfter?: AddonValue | undefined
     count?: ReactNode | undefined
   }
+  interface CommonProps extends OwnProps, GDSComponentProps<typeof ChipMeta> {}
   interface ButtonProps
     extends
-      BaseProps,
+      CommonProps,
       Omit<ButtonOrLinkProps.ButtonProps, 'value'>,
       ButtonOrLinkProps.DisableableProps {}
   interface LinkProps
-    extends BaseProps, ButtonOrLinkProps.LinkProps, ButtonOrLinkProps.DisableableProps {}
+    extends CommonProps, ButtonOrLinkProps.LinkProps, ButtonOrLinkProps.DisableableProps {}
 }
 
 export type ChipProps = ChipProps.ButtonProps | ChipProps.LinkProps
@@ -222,9 +223,9 @@ function ChipAddon({
 }
 
 export declare namespace ChipGroupProps {
-  interface BaseProps
-    extends Omit<ComponentProps<'div'>, 'onChange'>, GDSComponentProps<typeof ChipGroupMeta> {}
-  interface CheckboxProps extends BaseProps {
+  interface HTMLProps extends Omit<ComponentProps<'div'>, 'onChange'> {}
+  interface CommonProps extends HTMLProps, GDSComponentProps<typeof ChipGroupMeta> {}
+  interface CheckboxProps extends CommonProps {
     type: 'checkbox'
     name?: undefined
     /** Array of checked/selected chip values. */
@@ -232,7 +233,7 @@ export declare namespace ChipGroupProps {
     defaultValue?: string[] | undefined
     onChange?: ((value: string[]) => void) | undefined
   }
-  interface RadioProps extends BaseProps {
+  interface RadioProps extends CommonProps {
     type: 'radio'
     /** Name used to submit the checked/selected chip value when inside a form. */
     name?: string | undefined

package/src/components/Cluster.tsx

@@ -8,10 +8,12 @@ import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButt
 import { ClusterMeta } from './Cluster.meta.ts'
 
 export declare namespace ClusterProps {
-  interface BaseProps extends GDSComponentProps<typeof ClusterMeta> {}
-  interface ButtonProps extends BaseProps, MaybeButtonOrLinkProps.ButtonProps {}
-  interface LinkProps extends BaseProps, MaybeButtonOrLinkProps.LinkProps {}
-  interface OtherElementProps extends BaseProps, MaybeButtonOrLinkProps.OtherElementProps {}
+  interface ButtonProps
+    extends GDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.ButtonProps {}
+  interface LinkProps
+    extends GDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.LinkProps {}
+  interface OtherElementProps
+    extends GDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.OtherElementProps {}
 }
 
 export type ClusterProps =

package/src/components/Icon.tsx

@@ -27,8 +27,10 @@ export interface IconProps
   alt: string | undefined
 }
 
+export type IconSrc = ReactElement | ComponentType
+
 export interface IconPropsWithSrc extends IconProps {
-  src: ReactElement | ComponentType
+  src: IconSrc
 }
 
 export function Icon({ src, alt, size, color, className, style, ...props }: IconPropsWithSrc) {

package/src/components/Link.tsx

@@ -2,6 +2,7 @@
 
 import type { ComponentProps, CSSProperties } from 'react'
 
+import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
@@ -11,23 +12,22 @@ import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
 import { LinkMeta } from './Link.meta.ts'
 
 export declare namespace LinkProps {
-  interface BaseProps {
-    /** @default 'primary' */
-    variant?: 'primary' | 'secondary' | undefined
+  interface OwnProps {
     addonBefore?: AddonValue | undefined
     /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is defined and `target` is `_blank` */
     addonAfter?: AddonValue | undefined
   }
+  interface CommonProps extends OwnProps, GDSComponentProps<typeof LinkMeta> {}
   interface ButtonProps
     extends
-      BaseProps,
+      CommonProps,
       Omit<ButtonOrLinkProps.ButtonProps, 'href'>,
       ButtonOrLinkProps.DisableableProps {
     // We want to make `href` required, while still allowing to render this component as a button if needed
     href: undefined
   }
   interface LinkProps
-    extends BaseProps, ButtonOrLinkProps.LinkProps, ButtonOrLinkProps.DisableableProps {}
+    extends CommonProps, ButtonOrLinkProps.LinkProps, ButtonOrLinkProps.DisableableProps {}
 }
 
 export type LinkProps = LinkProps.LinkProps | LinkProps.ButtonProps

package/src/components/Menu.parts.tsx

@@ -1,7 +1,14 @@
 'use client'
 
-import { createContext, useContext, useRef, type ComponentProps, type ReactNode } from 'react'
-import { Menu } from '@base-ui/react/menu'
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from 'react'
+import { Menu, type MenuRootActions } from '@base-ui/react/menu'
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import type { Merge } from 'type-fest'
 
@@ -36,16 +43,16 @@ const MenuTriggerContext = createContext<boolean>(false)
 type MenuItemType = 'plain' | 'checkbox' | 'radio'
 
 declare namespace GroupProps {
-  interface BaseProps {
+  interface CommonProps {
     label?: ReactNode | undefined
   }
-  interface NonRadioProps extends BaseProps {
+  interface NonRadioProps extends CommonProps {
     type?: Exclude<MenuItemType, 'radio'> | undefined
     value?: undefined
     defaultValue?: undefined
     onChange?: undefined
   }
-  interface RadioProps<T extends OptionValue> extends BaseProps {
+  interface RadioProps<T extends OptionValue> extends CommonProps {
     type: 'radio'
     value?: T | undefined
     defaultValue?: T | undefined
@@ -53,11 +60,9 @@ declare namespace GroupProps {
   }
 }
 
-declare namespace MenuProps {
-  interface BaseProps
-    extends
-      Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'>,
-      GDSComponentProps<typeof MenuMeta> {
+export declare namespace MenuProps {
+  interface HTMLProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> {}
+  interface OwnProps {
     /**
      * Element that opens the menu when clicked or hovered (depending on `triggerMode`), or a
      * function that returns such an element. If not provided, the menu is rendered inline rather
@@ -83,8 +88,9 @@ declare namespace MenuProps {
     header?: ReactNode | undefined
     footer?: ReactNode | undefined
   }
-  interface NonRadioProps extends BaseProps, GroupProps.NonRadioProps {}
-  interface RadioProps<T extends OptionValue> extends BaseProps, GroupProps.RadioProps<T> {}
+  interface CommonProps extends HTMLProps, OwnProps, GDSComponentProps<typeof MenuMeta> {}
+  interface NonRadioProps extends CommonProps, GroupProps.NonRadioProps {}
+  interface RadioProps<T extends OptionValue> extends CommonProps, GroupProps.RadioProps<T> {}
 }
 
 export type MenuProps<T extends OptionValue = OptionValue> =
@@ -120,6 +126,7 @@ export function MenuRoot<T extends OptionValue>({
 
   const { rootProps, nestedProps } = splitProps(props)
 
+  const actionsRef = useRef<MenuRootActions>(null)
   const portalRef = useRef<HTMLDivElement>(null)
 
   const [cssPropsPolyfillRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
@@ -192,7 +199,6 @@ export function MenuRoot<T extends OptionValue>({
 
   return (
     <div
-      ref={cssPropsPolyfillRef}
       data-is-submenu={isSubmenu || undefined}
       data-has-trigger={hasTrigger || undefined}
       className={cn(
@@ -215,8 +221,15 @@ export function MenuRoot<T extends OptionValue>({
       {...cssPropsPolyfillAttributes}
       {...rootProps}
     >
+      {/**
+       * Ensure changes to CSS props are detected even when the menu is hidden (not closed, but rendered
+       * in a `hidden` element). This is necessary because of a `style-observer` bug (or limitation?)
+       * related to `display: contents` (see https://github.com/LeaVerou/style-observer/issues/140).
+       */}
+      <span ref={cssPropsPolyfillRef} className="invisible absolute" />
       <MenuRoot
         key={`${hasTrigger}-${triggerMode}`}
+        actionsRef={actionsRef}
         open={open}
         onOpenChange={(newOpen) => {
           // A menu with no trigger can still be opened/closed by the consumer, but it should not send events
@@ -279,7 +292,7 @@ export function MenuRoot<T extends OptionValue>({
             sideOffset={twToPx(cssProps.gap)}
             align={cssProps.align}
             alignOffset={twToPx(cssProps.alignOffset)}
-            collisionPadding={8}
+            collisionPadding={4}
             collisionAvoidance={{
               side: 'flip',
               align: 'flip',
@@ -300,6 +313,7 @@ export function MenuRoot<T extends OptionValue>({
               u:rounded-12
               u:data-has-trigger:max-h-(--available-height-but-not-too-small)
               u:data-has-trigger:max-w-(--available-width)
+              i:data-anchor-hidden:hidden
               u:i:data-[match-trigger-height=at-least]:min-h-[min(var(--anchor-height),var(--available-height-but-not-too-small))]
               u:i:data-[match-trigger-height=at-most]:max-h-[min(var(--anchor-height),var(--available-height-but-not-too-small))]
               u:i:data-[match-trigger-height=true]:h-(--anchor-height)
@@ -309,8 +323,19 @@ export function MenuRoot<T extends OptionValue>({
               className,
             )}
             {...dirProps}
-            render={(renderProps) => (
-              <div {...renderProps} style={hasTrigger ? renderProps.style : undefined} />
+            render={(renderProps, state) => (
+              <>
+                <div {...renderProps} style={hasTrigger ? renderProps.style : undefined} />
+                {/**
+                 * The `data-anchor-hidden:hidden` class above hides the menu if it's open when the trigger gets
+                 * hidden, but this actually closes it to restore pointer interactions outside the menu (though the
+                 * class is still necessary to prevent a flash of incorrect menu position). We're doing it in an
+                 * effect to prevent a "Cannot update a component while rendering a different component" error.
+                 */}
+                {hasTrigger && state.open && state.anchorHidden && actionsRef.current ? (
+                  <LayoutEffect effect={actionsRef.current.close} />
+                ) : null}
+              </>
             )}
           >
             <Menu.Popup
@@ -478,6 +503,11 @@ export function MenuRoot<T extends OptionValue>({
 }
 MenuRoot.displayName = 'Menu'
 
+function LayoutEffect({ effect }: { effect: () => void }) {
+  useLayoutEffect(effect, [effect])
+  return null
+}
+
 const MenuGroupContext = createContext<
   | {
       type: MenuItemType
@@ -486,10 +516,10 @@ const MenuGroupContext = createContext<
   | null
 >(null)
 
-declare namespace MenuGroupProps {
-  interface BaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> {}
-  interface NonRadioProps extends BaseProps, GroupProps.NonRadioProps {}
-  interface RadioProps<T extends OptionValue> extends BaseProps, GroupProps.RadioProps<T> {}
+export declare namespace MenuGroupProps {
+  interface HTMLProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> {}
+  interface NonRadioProps extends HTMLProps, GroupProps.NonRadioProps {}
+  interface RadioProps<T extends OptionValue> extends HTMLProps, GroupProps.RadioProps<T> {}
 }
 
 export type MenuGroupProps<T extends OptionValue = OptionValue> =
@@ -545,15 +575,17 @@ export function MenuGroup<T extends OptionValue>({
 MenuGroup.displayName = 'Menu.Group'
 
 export declare namespace MenuItemProps {
-  interface BaseProps
-    extends
-      Omit<ComponentProps<'div'>, 'defaultChecked' | 'defaultValue' | 'onChange'>,
-      GDSComponentProps<typeof MenuItemMeta> {
+  interface HTMLProps extends Omit<
+    ComponentProps<'div'>,
+    'defaultChecked' | 'defaultValue' | 'onChange'
+  > {}
+  interface OwnProps {
     addonBefore?: AddonValue | undefined
     addonAfter?: AddonValue | undefined
     disabled?: boolean | undefined
   }
-  interface PlainProps extends BaseProps {
+  interface CommonProps extends HTMLProps, OwnProps, GDSComponentProps<typeof MenuItemMeta> {}
+  interface PlainProps extends CommonProps {
     type?: 'plain' | undefined
     variant?: 'default' | 'danger' | undefined
     loading?: boolean | undefined
@@ -564,7 +596,7 @@ export declare namespace MenuItemProps {
     onChange?: undefined
     value?: undefined
   }
-  interface CheckboxProps extends BaseProps {
+  interface CheckboxProps extends CommonProps {
     type?: 'checkbox' | undefined
     checked?: boolean | 'indeterminate' | undefined
     defaultChecked?: boolean | 'indeterminate' | undefined
@@ -575,7 +607,7 @@ export declare namespace MenuItemProps {
     target?: undefined
     value?: undefined
   }
-  interface RadioProps<T extends OptionValue = OptionValue> extends BaseProps {
+  interface RadioProps<T extends OptionValue = OptionValue> extends CommonProps {
     type?: 'radio' | undefined
     value?: T | undefined
     variant?: undefined

package/src/components/Modal.parts.tsx

@@ -213,11 +213,12 @@ export const ModalRoot = <
         <Portal>
           <div
             ref={cssPropsPolyfillRef}
-            className={cn('gds-modal i:invisible', cssPropsClassName, className)}
+            className={cn('gds-modal i:invisible i:block', cssPropsClassName, className)}
             {...cssPropsAttributes}
             {...cssPropsPolyfillAttributes}
             {...dirProps}
             {...props}
+            hidden={undefined}
           />
         </Portal>
         <Dialog.Portal>
@@ -233,7 +234,7 @@ export const ModalRoot = <
              * root, then it returns 100vw because 100cqi, even 9999 times, is 0.
              */
             className={cn(
-              `gds-modal @container-[size] pointer-events-none absolute top-0 left-0 u:text-16 u:text-muted i:invisible i:*:visible`,
+              'gds-modal @container-[size] pointer-events-none absolute top-0 left-0 u:text-16 u:text-muted i:invisible i:*:visible',
               cssPropsClassName,
               className,
             )}

package/src/components/Pane.parts.tsx

@@ -87,7 +87,7 @@ function createPaneStore(storeId: string) {
           : { ...initial, id, layout: PaneMeta.cssProps.layout.defaultValue, registrants },
       )
       // Defer notification to avoid updating components during render
-      window.queueMicrotask(notify)
+      if (typeof window !== 'undefined') window.queueMicrotask(notify)
     },
     unregister: (name: string, registrantId: string) => {
       const pane = panes.get(name)
@@ -316,10 +316,10 @@ export function PaneRoot({
   const duration = parseDuration(styleValues['--tw-duration']) ?? DEFAULT_DURATION
   const rootPassedRef = useMergedRefs(rootRef, passedRef, styleCallbackRef)
 
-  const [cssPropsPolyfillRootPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
+  const [cssPropsPolyfillRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
     PaneMeta,
     { layout, side },
-    { ref: rootPassedRef, returnPropValues: { layout, side } },
+    { returnPropValues: { layout, side } },
   )
 
   // Sync layout to store, resetting `overlayOpen` when switching from overlay to docked
@@ -430,7 +430,7 @@ export function PaneRoot({
 
   return (
     <Element
-      ref={cssPropsPolyfillRootPassedRef}
+      ref={rootPassedRef}
       id={pane.id}
       data-gds-exposed-open={open}
       className={cn(
@@ -445,6 +445,12 @@ export function PaneRoot({
       {...cssPropsPolyfillAttributes}
       {...props}
     >
+      {/**
+       * Ensure changes to CSS props are detected even when the pane is hidden (not closed, but rendered
+       * in a `hidden` element). This is necessary because of a `style-observer` bug (or limitation?)
+       * related to `display: contents` (see https://github.com/LeaVerou/style-observer/issues/140).
+       */}
+      <span ref={cssPropsPolyfillRef} className="invisible absolute" />
       {overlayModal ? (
         <div
           aria-hidden
@@ -520,7 +526,9 @@ export function PaneRoot({
                   }
                   data-hidden-style={hiddenStyle || undefined}
                   data-hidden-if-overlay={
-                    (beforeFirstTransition.current && !pane.overlayOpen) || undefined
+                    (!pane.overlayOpen &&
+                      (cssProps.layout === 'docked' || beforeFirstTransition.current)) ||
+                    undefined
                   }
                   data-layout={cssProps.layout}
                   data-side={cssProps.side}
@@ -632,12 +640,12 @@ type PaneToggleButtonState = {
   open: boolean
 }
 
-interface PaneToggleButtonBaseProps extends ComponentProps<'button'> {
+interface PaneToggleButtonCommonProps extends ComponentProps<'button'> {
   /** Name of the pane to toggle. */
   name: string
 }
 
-interface PaneToggleButtonWithRenderProps extends PaneToggleButtonBaseProps {
+interface PaneToggleButtonWithRenderProps extends PaneToggleButtonCommonProps {
   /** Element or render function for the toggle button. */
   render: RenderProp<PaneToggleButtonState>
   variant?: never
@@ -650,7 +658,7 @@ interface PaneToggleButtonWithRenderProps extends PaneToggleButtonBaseProps {
 
 interface PaneToggleButtonWithoutRenderProps
   extends
-    PaneToggleButtonBaseProps,
+    PaneToggleButtonCommonProps,
     Pick<
       ToggleButtonProps,
       'variant' | 'size' | 'hideLabel' | 'tooltip' | 'addonBefore' | 'addonAfter'

package/src/components/Tooltip.parts.tsx

@@ -123,8 +123,8 @@ export function TooltipRoot({
   const triggerPassedRef = useMergedRefs(
     /**
      * Conditionally setting the ref to force the tooltip to refresh its position when `enabled`
-     * changes, preventing it from moving to the viewport's top-left corner in some cases (e.g. when
-     * `CopyButton` returns to its default tooltip).
+     * changes, preventing it from moving to the top left corner of the viewport in some cases (e.g.
+     * when `CopyButton` returns to its default tooltip).
      */
     enabled ? triggerRef : undefined,
     (passedTriggerProps === 'forward' ? passedRef : passedTriggerProps?.ref) as
@@ -207,10 +207,22 @@ export function TooltipRoot({
               render={children}
               {...renderProps}
               disabled={triggerDisabled}
-              onClick={triggerProps?.onClick} // Prevent the tooltip re-opening after clicking e.g. a `Menu` trigger
+              onClick={triggerProps?.onClick} // Prevent re-opening the tooltip after clicking e.g. a `Menu` trigger
             />
           )}
         />
+        {/* Ensure changes to CSS props are detected even when the tooltip is not mounted */}
+        <Portal>
+          <span
+            ref={cssPropsPolyfillRef}
+            className={cn('gds-tooltip i:invisible i:block', className)}
+            {...cssPropsAttributes}
+            {...cssPropsPolyfillAttributes}
+            {...dirProps}
+            {...popupProps}
+            hidden={undefined}
+          />
+        </Portal>
         <Tooltip.Portal>
           <Tooltip.Positioner
             key={getReactNodeKey(content)} // Refresh the tooltip's position when the content changes (see `WithDynamicContent` story)
@@ -224,9 +236,10 @@ export function TooltipRoot({
             sideOffset={twToPx(cssProps.gap)}
             align={cssProps.align}
             alignOffset={twToPx(cssProps.alignOffset)}
-            collisionPadding={8}
-            disableAnchorTracking // Prevent the tooltip from moving to the viewport's top-left corner when the trigger is unmounted
+            collisionPadding={4}
+            disableAnchorTracking // Feels weird for a tooltip to follow e.g. a pane's X button when closing the pane
             {...dirProps}
+            className="i:data-anchor-hidden:hidden" // Prevent moving to the top left corner when the trigger is hidden or unmounted
           >
             <Tooltip.Popup
               ref={popupRef}
@@ -251,16 +264,6 @@ export function TooltipRoot({
             </Tooltip.Popup>
           </Tooltip.Positioner>
         </Tooltip.Portal>
-        {/* Ensure changes to CSS props are detected even when the tooltip is not mounted */}
-        <Portal>
-          <span
-            ref={cssPropsPolyfillRef}
-            className={cn('gds-tooltip i:invisible', className)}
-            {...cssPropsAttributes}
-            {...cssPropsPolyfillAttributes}
-            {...popupProps}
-          />
-        </Portal>
       </Tooltip.Root>
     </TooltipContext.Provider>
   )

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

@@ -60,7 +60,7 @@ export declare namespace InternalButtonOrLinkProps {
   interface DisableableProps {
     disabled?: boolean | 'focusable' | undefined
   }
-  interface BaseProps {
+  interface CommonProps {
     /**
      * Whether to render the element inline instead of block-level. For buttons, renders a `span`
      * that behaves like an accessible button. For links, this prop has no effect as anchor elements
@@ -77,7 +77,7 @@ export declare namespace InternalButtonOrLinkProps {
   }
   interface ButtonProps
     extends
-      BaseProps,
+      CommonProps,
       DisableableProps,
       Omit<ComponentProps<'button'>, 'defaultValue' | 'disabled'> {
     href?: undefined
@@ -91,7 +91,7 @@ export declare namespace InternalButtonOrLinkProps {
     defaultChecked?: boolean | undefined
   }
   interface LinkProps
-    extends BaseProps, DisableableProps, Omit<ComponentProps<'a'>, 'defaultValue'> {
+    extends CommonProps, DisableableProps, Omit<ComponentProps<'a'>, 'defaultValue'> {
     href: string
     type?: undefined
     checked?: undefined
@@ -135,15 +135,12 @@ type WithContextComponent<T extends ElementType> = (
   props: Merge<ComponentProps<T>, ButtonOrLinkRenderElementProps>,
 ) => ReactElement
 
-const memoizedWithContextComponents = new Map<ElementType, WithContextComponent<ElementType>>()
+const memoizedWithContextComponents = new Map<ElementType, unknown>()
 
 function withContext<T extends ElementType>(Element: T): WithContextComponent<T> {
   const cached = memoizedWithContextComponents.get(Element)
-  if (cached) return cached
-  const newWithContextComponent: WithContextComponent<ElementType> = ({
-    buttonOrLinkState,
-    ...props
-  }) => (
+  if (cached) return cached as WithContextComponent<T>
+  const newWithContextComponent: WithContextComponent<T> = ({ buttonOrLinkState, ...props }) => (
     <ButtonOrLinkContext.Provider value={buttonOrLinkState}>
       <Element {...(props as ComponentProps<T>)} />
     </ButtonOrLinkContext.Provider>
@@ -202,7 +199,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     render: passedRender,
     className: passedClassName,
     children,
-    ...nonBaseProps
+    ...specificProps
   } = props
   const manuallyDisabledEventProps = {
     onClick: undefined,
@@ -246,7 +243,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       href: _href,
       target: _target,
       ...remainingProps
-    } = nonBaseProps
+    } = specificProps
 
     if (defaultChecked !== undefined) {
       // oxlint-disable-next-line no-console
@@ -309,7 +306,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     checked: _checked,
     defaultChecked: _defaultChecked,
     ...remainingProps
-  } = nonBaseProps
+  } = specificProps
 
   let linkProps: ComponentProps<'a'> = {
     role: disabled || role !== 'link' ? role : undefined,

package/src/components/base/MaybeButtonOrLink.tsx

@@ -42,7 +42,7 @@ export declare namespace MaybeButtonOrLinkProps {
     render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
   }
   export type OtherElementProps =
-    OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.BaseProps> &
+    OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.CommonProps> &
       ComponentProps<'span'> & {
         onClick?: InternalButtonOrLinkProps.ButtonProps['onClick'] // Not technically correct, but prevents the event from being `any` when `as` is not specified
         as?: ElementType | undefined
@@ -63,7 +63,7 @@ export type MaybeButtonOrLinkProps =
 
 type InternalMaybeButtonOrLinkProps = MaybeButtonOrLinkProps &
   InternalButtonOrLinkProps.DisableableProps &
-  Omit<InternalButtonOrLinkProps.BaseProps, 'render'>
+  Omit<InternalButtonOrLinkProps.CommonProps, 'render'>
 
 /**
  * Renders a `ButtonOrLink` if one of `href` or `onClick` is passed along with no `as`. Otherwise,

package/src/components/index.ts

@@ -34,7 +34,7 @@ export {
 export { DescriptionListItemMeta, DescriptionListMeta } from './DescriptionList.meta.ts'
 export { Divider, type DividerProps } from './Divider.tsx'
 export { DividerMeta } from './Divider.meta.ts'
-export { Icon, type IconProps, type IconPropsWithSrc } from './Icon.tsx'
+export { Icon, type IconProps, type IconSrc, type IconPropsWithSrc } from './Icon.tsx'
 export { IconMeta } from './Icon.meta.ts'
 export { Input, type InputProps, type InputState } from './Input.tsx'
 export { InputMeta } from './Input.meta.ts'