@graphprotocol/gds-react 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphprotocol/gds-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React components for The Graph Design System",
   "author": "Edge & Node and contributors",
   "license": "MIT",
@@ -43,42 +43,43 @@
     "tailwindcss": "^4.1.14"
   },
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-rc.0",
-    "@base-ui-components/utils": "0.2.2",
-    "@react-aria/utils": "^3.31.0",
+    "@base-ui/react": "^1.0.0",
+    "@base-ui/utils": "^0.2.3",
+    "@react-aria/utils": "^3.32.0",
     "@react-hookz/web": "^25.2.0",
     "@ver0/deep-equal": "^1.0.1",
     "escape-string-regexp": "^5.0.0",
     "motion": "^12.23.26",
-    "react-aria": "^3.44.0",
+    "react-aria": "^3.45.0",
     "react-keyed-flatten-children": "^5.1.1",
-    "shiki": "^3.19.0",
+    "shiki": "^3.20.0",
     "style-observer": "^0.1.2",
     "ts-extras": "^0.16.0",
     "type-fest": "^5.3.1",
-    "@graphprotocol/gds-css": "0.1.0",
-    "@graphprotocol/gds-icons": "0.1.0",
+    "@graphprotocol/gds-css": "0.1.1",
+    "@graphprotocol/gds-icons": "0.1.1",
     "@graphprotocol/gds-utils": "0.1.0"
   },
   "devDependencies": {
-    "@storybook/addon-themes": "^10.1.6",
-    "@storybook/addon-vitest": "^10.1.6",
-    "@storybook/react": "^10.1.6",
-    "@storybook/react-vite": "^10.1.6",
+    "@storybook/addon-themes": "^10.1.9",
+    "@storybook/addon-vitest": "^10.1.9",
+    "@storybook/react": "^10.1.9",
+    "@storybook/react-vite": "^10.1.9",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@types/node": "^24.10.2",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^24.10.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-is": "^19.2.0",
+    "@web3icons/react": "^4.1.7",
     "lightningcss": "^1.30.2",
     "postcss": "^8.5.6",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "react-is": "^19.2.1",
-    "storybook": "^10.1.6",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-is": "^19.2.3",
+    "storybook": "^10.1.9",
     "storybook-addon-rtl": "^3.0.1"
   },
   "scripts": {

package/src/GDSProvider.tsx

@@ -4,13 +4,15 @@ import {
   createContext,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
   type ComponentProps,
 } from 'react'
-import { DirectionProvider } from '@base-ui-components/react/direction-provider'
-import { Tooltip } from '@base-ui-components/react/tooltip'
+import { DirectionProvider } from '@base-ui/react/direction-provider'
+import { Tooltip } from '@base-ui/react/tooltip'
 
+import { ButtonOrLink, type ButtonOrLinkConfigProps } from './components/base/ButtonOrLink.tsx'
 import { cn } from './utils/index.ts'
 
 type Theme = 'dark' | 'light' | 'system'
@@ -48,6 +50,7 @@ export interface GDSProviderProps extends Omit<ComponentProps<'div'>, 'dir'> {
   direction?: ComponentProps<typeof DirectionProvider>['direction'] | undefined
   /** Defaults to `en` if `direction` is `ltr`, or `ar` if `direction` is `rtl`. */
   language?: string | undefined
+  buttonOrLinkConfig?: Omit<ButtonOrLinkConfigProps, 'children'> | undefined
 }
 
 export interface GDSContextValue {
@@ -67,7 +70,8 @@ export const GDSContext = createContext<GDSContextValue | null>(null)
  *
  * Currently implements:
  *
- * - An easy way to configure the root theme (dark/light/system) and text direction.
+ * - An easy way to configure the root theme (dark/light/system), text direction, and `ButtonOrLink`
+ *   config.
  * - Space key handler for improved `active` state behavior.
  * - Shared delay for multiple tooltips (once a tooltip is visible, adjacent tooltips show instantly).
  *
@@ -87,6 +91,7 @@ export function GDSProvider({
   theme = DEFAULT_THEME,
   direction = 'ltr',
   language = direction === 'rtl' ? 'ar' : 'en',
+  buttonOrLinkConfig,
   children,
   className,
   ...props
@@ -203,20 +208,32 @@ export function GDSProvider({
     }
   }, [])
 
+  const gdsContextValue = useMemo(
+    () => ({
+      theme,
+      activeTheme,
+      direction,
+      language,
+    }),
+    [theme, activeTheme, direction, language],
+  )
+
   return (
-    <GDSContext.Provider value={{ theme, activeTheme, direction, language }}>
+    <GDSContext.Provider value={gdsContextValue}>
       <DirectionProvider direction={direction}>
         <Tooltip.Provider timeout={300}>
-          {/* Prevent a flash of incorrect theme in server-side rendered apps (e.g. Next.js) */}
-          <PreHydrationStyle>{THEME_SSR_CSS[theme]}</PreHydrationStyle>
-          <div
-            dir={direction}
-            lang={language}
-            className={cn('gds-provider isolate', themeClass, className)}
-            {...props}
-          >
-            {children}
-          </div>
+          <ButtonOrLink.Config {...buttonOrLinkConfig}>
+            {/* Prevent a flash of incorrect theme in server-side rendered apps (e.g. Next.js) */}
+            <PreHydrationStyle>{THEME_SSR_CSS[theme]}</PreHydrationStyle>
+            <div
+              dir={direction}
+              lang={language}
+              className={cn('gds-provider isolate', themeClass, className)}
+              {...props}
+            >
+              {children}
+            </div>
+          </ButtonOrLink.Config>
         </Tooltip.Provider>
       </DirectionProvider>
     </GDSContext.Provider>

package/src/components/Address.tsx

@@ -48,6 +48,8 @@ export function Address({
 }: AddressProps) {
   useGDS()
 
+  const { rootProps, nestedProps } = splitProps(props)
+
   const [stateRef, state] = useCSSState({
     pointer: undefined,
     focus: undefined,
@@ -59,7 +61,6 @@ export function Address({
     { variant, size, copy },
     { ref: stateRef },
   )
-  const { rootProps, nestedProps } = splitProps(props)
 
   const address = passedAddress || ZERO_ADDRESS
 
@@ -67,7 +68,7 @@ export function Address({
     <span
       ref={cssPropsPolyfillStateRef}
       className={cn(
-        `gds-address isolate root-grid *:col-span-full *:row-span-full u:h-max u:w-max u:max-w-full
+        `gds-address isolate root-grid *:col-span-full *:row-span-full u:size-max u:max-w-full
         u:state-[show-copy=false]
         u:hover:state-[show-copy]
         u:hover:state-hover
@@ -141,10 +142,14 @@ export function Address({
         {avatar !== null ? (
           <Avatar
             shape="circle"
-            src={[
-              ...(avatar ? (Array.isArray(avatar) ? avatar : [avatar]) : []),
-              createIdenticon(address),
-            ]}
+            src={
+              avatar && typeof avatar !== 'string' && !Array.isArray(avatar)
+                ? avatar
+                : [
+                    ...(avatar ? (Array.isArray(avatar) ? avatar : [avatar]) : []),
+                    createIdenticon(address),
+                  ]
+            }
             alt=""
             className={`
               @prop-variant-enclosed/address:-ms-px

package/src/components/Avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, type ReactElement } from 'react'
 import { useDeepCompareEffect } from '@react-hookz/web'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
@@ -20,9 +20,10 @@ export declare namespace AvatarProps {
   interface BaseProps extends GDSComponentProps<typeof AvatarMeta> {
     /**
      * Image source URL or array of URLs to try as fallbacks. If an array is provided, each URL will
-     * be tried in order until one loads successfully.
+     * be tried in order until one loads successfully. Alternatively, this can be a React element
+     * (e.g. an icon) for custom avatar content.
      */
-    src: string | string[] | undefined
+    src: string | string[] | ReactElement | undefined
     /**
      * Text used as the avatar's accessible name (e.g. the username or address of the represented
      * user). Necessary if the avatar is clickable, recommended otherwise (unless the same
@@ -101,8 +102,9 @@ export function Avatar({
               <span className="nested/avatar-paint pointer-events-none shrink-0">
                 <span
                   className={`
-                    block overflow-clip bg-elevated
+                    block overflow-clip bg-default
                     group-clickable-focus-visible/avatar:outline
+                    **:icon:default-size-[60%]
                     @prop-size-xsmall/avatar:size-4
                     @prop-size-small/avatar:size-5
                     @prop-size-medium/avatar:size-6
@@ -112,18 +114,24 @@ export function Avatar({
                     @prop-shape-rounded/avatar:rounded-4
                     @prop-shape-rounded/avatar:@prop-size-xsmall/avatar:rounded-2
                     @prop-shape-rounded/avatar:@prop-size-xlarge/avatar:rounded-8
+                    uu:*:absolute
+                    uu:*:inset-0
+                    uu:*:m-auto
+                    uu:*:size-full
+                    uu:*:object-cover
                   `}
                 >
                   {src ? (
-                    <img
-                      src={src}
-                      alt=""
-                      onError={() => setCurrentSourceIndex(currentSourceIndex + 1)}
-                      className={`
-                        absolute top-0 left-0 size-full object-cover
-                        [[src^='data:image/bmp']]:[image-rendering:pixelated]
-                      `}
-                    />
+                    typeof src === 'string' ? (
+                      <img
+                        src={src}
+                        alt=""
+                        onError={() => setCurrentSourceIndex(currentSourceIndex + 1)}
+                        className="[[src^='data:image/bmp']]:[image-rendering:pixelated]"
+                      />
+                    ) : (
+                      src
+                    )
                   ) : null}
                   {alt ? <span className="sr-only">{alt}</span> : null}
                 </span>

package/src/components/Breadcrumbs.parts.tsx

@@ -11,9 +11,9 @@ import {
 import { isEqual } from '@ver0/deep-equal'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { ArrowLeftInteractiveIcon, DotsThreeIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { ArrowLeftInteractiveIcon, DotsThreeIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButtonOrLink.tsx'
@@ -258,6 +258,7 @@ export function BreadcrumbsItem({
   children,
   ...props
 }: BreadcrumbsItemProps) {
+  const { rootProps, nestedProps } = splitProps(props)
   const current = passedCurrent ?? props.href === undefined
 
   const [stateRef, state] = useCSSState({
@@ -266,8 +267,6 @@ export function BreadcrumbsItem({
     current,
   })
 
-  const { rootProps, nestedProps } = splitProps(props)
-
   return (
     <div
       ref={stateRef}

package/src/components/Button.tsx

@@ -3,9 +3,9 @@
 import type { ComponentProps } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { LoadingIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { LoadingIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
@@ -132,10 +132,10 @@ export function Button({
       >
         <span
           className={`
-            nested/button-paint pointer-events-none flex h-(--height) grow items-center justify-center
+            nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
             rounded-(--gds-button-radius) border-(length:--border-width) border-(--gds-button-border)
             bg-(--gds-button-bg) text-(--gds-button-fg) transition [--border-width:1px]
-            @state-[addon-only=auto]/button:min-w-(--height)
+            @state-[addon-only=auto]/button:w-(--height)
             @prop-variant-naked/button:transition-[color]
             @prop-variant-naked/button:[--border-width:0px]
             @prop-size-xsmall/button:px-1.25

package/src/components/Card.tsx

@@ -3,9 +3,9 @@
 import { useId, type ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { ArrowUpRightInteractiveIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
 import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButtonOrLink.tsx'
 import { CardMeta } from './Card.meta.ts'
@@ -66,6 +66,7 @@ export function Card({
     autoIcon = true,
     ...remainingProps
   } = props as CardProps.ButtonProps | CardProps.LinkProps
+  const { rootProps, nestedProps } = splitProps(remainingProps)
 
   const [statePassedRef, state] = useCSSState(
     {
@@ -80,7 +81,6 @@ export function Card({
     { variant },
     { ref: statePassedRef },
   )
-  const { rootProps, nestedProps } = splitProps(remainingProps)
 
   const Element = as ?? 'div'
   const uniqueId = useId()

package/src/components/Checkbox.parts.tsx

@@ -3,9 +3,9 @@
 import type { ComponentProps, ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { CheckIcon, MinusIcon } from '@graphprotocol/gds-react/icons'
 
 import { useControlled, useGDS } from '../hooks/index.ts'
-import { CheckIcon, MinusIcon } from '../icons/index.generated.ts'
 import { cn, splitProps } from '../utils/index.ts'
 import { Checkable, type CheckableLabelProps } from './base/Checkable.tsx'
 import type { CheckboxMeta } from './Checkbox.meta.ts'

package/src/components/CodeBlock.parts.tsx

@@ -19,8 +19,6 @@ import {
 } from 'shiki'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
-
-import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import {
   EyeClosedIcon,
   EyeIcon,
@@ -37,7 +35,9 @@ import {
   FileTsxIcon,
   FileVueIcon,
   TerminalIcon,
-} from '../icons/index.generated.ts'
+} from '@graphprotocol/gds-react/icons'
+
+import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes, type Stringifiable } from '../utils/index.ts'
 import { Button } from './Button.tsx'
 import { CodeBlockMeta } from './CodeBlock.meta.ts'

package/src/components/CopyButton.tsx

@@ -3,9 +3,9 @@
 import { useRef, useState } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { CopyInteractiveIcon } from '@graphprotocol/gds-react/icons'
 
 import { useGDS } from '../hooks/index.ts'
-import { CopyInteractiveIcon } from '../icons/index.generated.ts'
 import { cn, isReactNode } from '../utils/index.ts'
 import { Button, type ButtonProps } from './Button.tsx'
 import type { CopyButtonMeta } from './CopyButton.meta.ts'

package/src/components/Keyboard.tsx

@@ -72,7 +72,7 @@ export function Keyboard({
           @prop-size-large/keyboard:text-14
           @prop-size-large/keyboard:[--height:--spacing(6)]
           ${/* Prevent incorrect alignment when empty */ ''}
-          empty:after:content-(--content-nbsp)
+          empty:after:content-nbsp
         `}
       >
         {childrenArray.map((child, index) => (

package/src/components/Label.tsx

@@ -30,11 +30,12 @@ export function Label({
 }: LabelProps) {
   useGDS()
 
+  const { rootProps, nestedProps } = splitProps(props)
+
   const [cssPropsPolyfillRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(LabelMeta, {
     variant,
     size,
   })
-  const { rootProps, nestedProps } = splitProps(props)
   const NestedElement = (props.htmlFor ? 'label' : 'span') as 'span'
 
   const {

package/src/components/Link.tsx

@@ -2,8 +2,9 @@
 
 import type { ComponentProps, CSSProperties } from 'react'
 
+import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons'
+
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { ArrowUpRightInteractiveIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, trimReactNode } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'

package/src/components/Menu.parts.tsx

@@ -10,13 +10,11 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { Menu } from '@base-ui-components/react/menu'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { Menu } from '@base-ui/react/menu'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import type { Merge } from 'type-fest'
 
 import { twToPx, type GDSComponentProps } from '@graphprotocol/gds-css'
-
-import { useAutoValue, useControlled, useCSSState, useGDS } from '../hooks/index.ts'
 import {
   ArrowRightInteractiveIcon,
   ArrowUpRightInteractiveIcon,
@@ -25,7 +23,9 @@ import {
   LoadingIcon,
   MagnifyingGlassIcon,
   XIcon,
-} from '../icons/index.generated.ts'
+} from '@graphprotocol/gds-react/icons'
+
+import { useAutoValue, useControlled, useCSSState, useGDS } from '../hooks/index.ts'
 import { cn, type OptionValue } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
@@ -209,8 +209,8 @@ export function MenuRoot<T extends OptionValue>({
       }}
       modal={!isNested ? position !== false : (undefined as never)}
       /**
-       * This seems to be the only way to disable a `Menu.SubmenuTrigger`. See
-       * https://github.com/mui/base-ui/issues/1976#issuecomment-2914529452.
+       * This seems to be the only way to disable a `Menu.SubmenuTrigger` (see
+       * https://github.com/mui/base-ui/issues/1976#issuecomment-2914529452).
        */
       disabled={triggerIsElement ? Boolean(trigger.props.disabled) : (undefined as never)}
       closeParentOnEsc
@@ -219,10 +219,7 @@ export function MenuRoot<T extends OptionValue>({
         <Trigger
           nativeButton={isNested ? false : triggerIsElement}
           openOnHover={position && position.openOnHover !== false}
-          delay={
-            (position && typeof position.openOnHover === 'number' ? position.openOnHover : 100) ||
-            1 /* 0 is buggy: https://github.com/mui/base-ui/issues/3446 */
-          }
+          delay={position && typeof position.openOnHover === 'number' ? position.openOnHover : 100}
           data-open-on-hover={Boolean(position && position.openOnHover) || undefined}
           className={`
             u:i:open:data-open-on-hover:state-hover
@@ -433,27 +430,26 @@ const MaybePortal = ({
   ...props
 }: ComponentProps<'div'> & { position: MenuPosition | false }) => {
   const containerRef = useRef<HTMLDivElement>(null)
-  const parentPosition = useContext(MenuItemsContext)?.position
   const { dirProps } = useGDS()
 
   return (
     <>
       {/**
        * Ideally, we simply wouldn't render a `Menu.Portal` or `Menu.Positioner` when `position` is
-       * `false`, but they are required by Base UI (https://github.com/mui/base-ui/pull/1222). So we hack
-       * our way around them.
+       * `false`, but they are required by Base UI, so we hack our way around them.
        */}
       {!position ? <div ref={containerRef} className="contents *:contents" /> : null}
-      {/**
-       * If there is a parent menu that is not positioned, we need to specify `document.body` as the
-       * container of this menu's portal to prevent it from being rendered in the same portal container as
-       * the parent menu and appearing behind other elements as a result (since nested menus are always
-       * positioned). The reason we don't use `document.body` for all positioned menus regardless of
-       * whether it's nested or not is that it prevents the focus from returning to the trigger when the
-       * menu closes (https://github.com/mui/base-ui/issues/1809).
-       */}
       <Menu.Portal
-        container={!position ? containerRef : parentPosition === false ? document?.body : undefined}
+        container={
+          !position
+            ? containerRef
+            : /**
+               * Specifying `document.body` because while it is the default for top-level menus, a nested menu
+               * defaults to using the same portal as its parent, which is not desirable when the parent is not
+               * positioned (it can cause the nested menu to appear behind other elements).
+               */
+              document?.body
+        }
       >
         <Menu.Positioner
           align={position ? position.align : 'start'}
@@ -518,7 +514,7 @@ export function MenuGroup<T extends OptionValue>({
             <Menu.RadioGroup
               value={value}
               defaultValue={defaultValue}
-              {...(onChange !== undefined ? { onValueChange: onChange } : {})}
+              {...(onChange !== undefined && { onValueChange: onChange })}
             />
           ) : (
             <div />

package/src/components/Modal.parts.tsx

@@ -10,7 +10,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { Dialog } from '@base-ui-components/react/dialog'
+import { Dialog } from '@base-ui/react/dialog'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { ArrowLeftIcon, XIcon } from '@graphprotocol/gds-react/icons'

package/src/components/OTCInput.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import { useControlled, useGDS } from '../hooks/index.ts'
 import { cn } from '../utils/index.ts'

package/src/components/Search.meta.ts

@@ -0,0 +1,24 @@
+import { createComponent } from '@graphprotocol/gds-css'
+
+export const SearchMeta = createComponent('Search', {
+  cssProps: {
+    /** @default 'medium' */
+    size: {
+      type: 'values',
+      values: ['small', 'medium'],
+      defaultValue: 'medium',
+    },
+    /** @default 'full' */
+    layout: {
+      type: 'values',
+      values: ['compact', 'full'],
+      defaultValue: 'full',
+    },
+  },
+  vars: {
+    'input-width': {
+      '@variant @prop-size-small/search': '--spacing(32)',
+      '@variant @prop-size-medium/search': '--spacing(40)',
+    },
+  },
+})