@graphprotocol/gds-react 0.1.0 → 0.1.2

package/src/components/Search.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { useEffect, useRef, type ComponentProps } from 'react'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
+
+import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { MagnifyingGlassIcon, XIcon } from '@graphprotocol/gds-react/icons'
+
+import { useControlled, useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
+import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
+import { Button } from './Button.tsx'
+import { Keyboard } from './Keyboard.js'
+import { SearchMeta } from './Search.meta.ts'
+
+export interface SearchProps
+  extends
+    Omit<ComponentProps<'input'>, 'disabled' | 'onChange' | 'size' | 'type'>,
+    GDSComponentProps<typeof SearchMeta> {
+  value?: string | undefined
+  defaultValue?: string | undefined
+  onChange?: ((value: string) => void) | undefined
+  /**
+   * Key that focuses the search input when pressed. Set to `false` to disable.
+   *
+   * @default '/'
+   */
+  focusKey?: string | false | undefined
+}
+
+export function Search({
+  ref: passedRef,
+  size,
+  layout,
+  placeholder = 'Search...',
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  focusKey = '/',
+  className,
+  style,
+  ...props
+}: SearchProps) {
+  useGDS()
+
+  const { rootProps, nestedProps } = splitProps(props)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputPassedRef = useMergedRefs(inputRef, passedRef)
+  const previousActiveElementRef = useRef<HTMLElement | null>(null)
+  const [value, setValue] = useControlled(controlledValue, defaultValue ?? '', onChange)
+
+  const [stateRef, state] = useCSSState({
+    pointer: undefined,
+    focus: undefined,
+    blank: value === '',
+    open: value !== '',
+  })
+  const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
+    SearchMeta,
+    { size, layout },
+    { ref: stateRef, returnPropValues: { size, layout } },
+  )
+
+  useEffect(() => {
+    if (!focusKey) return
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== focusKey) return
+
+      const input = inputRef.current
+      if (!input) return
+
+      // Don't focus if already focused on an interactive element
+      const activeElement = document.activeElement
+      if (
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement ||
+        (activeElement instanceof HTMLElement && activeElement.isContentEditable)
+      ) {
+        return
+      }
+
+      // Don't focus if the input has an inert/hidden ancestor
+      if (input.closest('[inert], [data-base-ui-inert], [aria-hidden="true"]')) {
+        return
+      }
+
+      event.preventDefault()
+      // Store the currently focused element before focusing the input
+      previousActiveElementRef.current = activeElement instanceof HTMLElement ? activeElement : null
+      input.focus()
+      input.select()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [focusKey])
+
+  return (
+    <div
+      ref={cssPropsPolyfillStateRef}
+      data-size={cssProps.size}
+      data-layout={cssProps.layout}
+      className={cn(
+        `gds-search root-flex flex-col u:max-w-full
+        u:hover:state-hover
+        u:active:state-active
+        u:data-[layout=compact]:data-[size=medium]:min-w-10
+        u:data-[layout=compact]:data-[size=small]:min-w-8
+        u:has-nested-not-blank/search-ref:expose-open
+        u:has-nested-blank/search-ref:expose-blank
+        u:has-nested-focus-visible/search-ref:expose-focus
+        u:has-nested-focus-visible/search-ref:expose-open
+        u:has-nested-active/search-clear-button:state-focus`,
+        className,
+      )}
+      {...state.exposedAttributes}
+      {...state.polyfillAttributes}
+      {...getCSSPropsAttributes(SearchMeta, { size, layout }, style)}
+      {...cssPropsPolyfillAttributes}
+      {...rootProps}
+    >
+      <div
+        className={`
+          flex h-(--height) grow overflow-clip text-form-text duration-300
+          @prop-size-small/search:[--height:--spacing(8)]
+          @prop-size-small/search:[--padding:--spacing(2)]
+          @prop-size-medium/search:[--height:--spacing(10)]
+          @prop-size-medium/search:[--padding:--spacing(2.5)]
+          @prop-layout-compact/search:transition-[width]
+          @prop-layout-compact/search:@state-not-open/search:w-(--height)
+          @prop-layout-compact/search:@prop-size-small/search:animate-[width-1_1ms]
+          @prop-layout-compact/search:@prop-size-medium/search:animate-[width-2_1ms]
+        `}
+      >
+        <div
+          className={`
+            h-full w-(--gds-search-input-width) grow border border-form-idle transition
+            @state-hover/search:border-form-hover
+            @state-focus/search:border-focus
+            @state-active/search:transition-none
+            @prop-size-small/search:rounded-6
+            @prop-size-medium/search:rounded-8
+          `}
+        />
+        <input
+          ref={inputPassedRef}
+          type="search"
+          placeholder={placeholder}
+          aria-label={placeholder || 'Search'}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={(event) => {
+            nestedProps.onKeyDown?.(event)
+            if (event.defaultPrevented) return
+            if (event.key === 'Escape' && value === '') {
+              event.preventDefault()
+              inputRef.current?.blur()
+              // Restore focus to the previous element if it still exists in the DOM
+              if (
+                previousActiveElementRef.current &&
+                document.contains(previousActiveElementRef.current)
+              ) {
+                previousActiveElementRef.current.focus()
+                previousActiveElementRef.current = null
+              }
+            }
+          }}
+          className={`
+            nested/search-ref absolute end-0 top-0 size-full ps-(--padding) pe-(--height) outline-0
+            @state-not-focus/search:@state-blank/search:ps-[calc(var(--height)+var(--padding))]
+            @state-focus/search:placeholder:text-transparent
+            @prop-size-small/search:text-12
+            @prop-size-medium/search:text-14
+            @prop-layout-compact/search:@state-not-open/search:w-screen
+            @prop-layout-compact/search:@state-not-open/search:opacity-0
+          `}
+          {...nestedProps}
+        />
+        <div
+          className={`
+            pointer-events-none absolute inset-y-0 start-0 flex w-(--height) items-center justify-center
+            border-e border-form-idle transition
+            @state-hover/search:border-form-hover
+            @state-focus/search:hidden
+            @prop-layout-compact/search:@state-not-open/search:border-0
+            @prop-layout-compact/search:@state-open/search:@state-not-blank/search:hidden
+            @prop-layout-full/search:@state-not-blank/search:hidden
+          `}
+        >
+          <MagnifyingGlassIcon
+            alt=""
+            className={`
+              @prop-size-small/search:prop-size-3.5
+              @prop-size-medium/search:prop-size-4
+            `}
+          />
+        </div>
+        <div
+          className={`
+            pointer-events-none absolute inset-y-0 end-0 grid w-(--height) place-items-center
+            *:col-span-full *:row-span-full
+          `}
+        >
+          <Button
+            variant="tertiary"
+            size="xsmall"
+            tooltip={null}
+            tabIndex={-1}
+            onClick={() => {
+              setValue('')
+              inputRef.current?.focus()
+            }}
+            className={`
+              nested/search-clear-button pointer-events-auto size-6 var-[radius=var(--radius-4)]
+              @state-blank/search:hidden
+              @prop-layout-compact/search:@state-not-open/search:hidden
+            `}
+          >
+            <XIcon alt="Clear" />
+          </Button>
+          {focusKey ? (
+            <Keyboard
+              size="large"
+              className={`
+                @state-not-blank/search:hidden
+                @state-focus/search:hidden
+                @prop-layout-compact/search:@state-not-open/search:hidden
+              `}
+            >
+              {focusKey}
+            </Keyboard>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/SegmentedControl.parts.tsx

@@ -8,9 +8,9 @@ import {
   type KeyboardEvent,
   type MouseEvent,
 } from 'react'
-import { Radio } from '@base-ui-components/react/radio'
-import { RadioGroup } from '@base-ui-components/react/radio-group'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 
@@ -53,6 +53,8 @@ export function SegmentedControlRoot<T extends OptionValue>({
   children,
   ...props
 }: SegmentedControlProps<T>) {
+  useGDS()
+
   if (props['aria-label'] === undefined && props['aria-labelledby'] === undefined) {
     // oxlint-disable-next-line no-console
     console.warn(
@@ -140,22 +142,20 @@ export function SegmentedControlOption<T extends OptionValue>({
   children,
   ...props
 }: SegmentedControlOptionProps<T>) {
-  useGDS()
+  const { rootProps, nestedProps } = splitProps(props)
 
   const buttonRef = useRef<HTMLSpanElement>(null)
   const buttonPassedRef = useMergedRefs(buttonRef, passedRef)
 
+  const autoValue = useAutoValue(children)
+  const value = passedValue !== undefined ? passedValue : autoValue
+
   const [stateRef, state] = useCSSState({
     pointer: undefined,
     checked: undefined,
     'is-toggle': undefined,
   })
 
-  const autoValue = useAutoValue(children)
-  const value = passedValue !== undefined ? passedValue : autoValue
-
-  const { rootProps, nestedProps } = splitProps(props)
-
   const { onCollect, collectedContent } = useCollectedTooltip()
   let tooltipProps: Omit<TooltipProps, 'children'> = { content: collectedContent }
   if (tooltip !== undefined) {
@@ -187,33 +187,32 @@ export function SegmentedControlOption<T extends OptionValue>({
   }
 
   return (
-    /**
-     * 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 button (which is a `<span>`, see https://github.com/mui/base-ui/pull/3205).
-     * Ideally, we would make `Radio.Root` the root and it would render an internal component (e.g.
-     * `SegmentedControlOptionButton`) that would itself render a wrapper `<div>` around the button
-     * and the input (as well as calling `useCSSState` with a proper initial `checked` value, from
-     * the `render` state), but that is not possible currently (see
-     * https://github.com/mui/base-ui/issues/3143).
-     */
-    <div
-      ref={stateRef}
-      className={cn(
-        `gds-segmented-control-option root-block
-        state-[is-toggle=false]
-        group-[:has([data-checked]):has(>:nth-child(2)):not(:has(>:nth-child(3)))]/segmented-control-options:state-[is-toggle]
-        u:group-has-nested-hover/segmented-control--segmented-control-toggle:state-hover
-        u:group-has-nested-active/segmented-control--segmented-control-toggle:state-active
-        u:has-nested-hover/segmented-control-option-ref:state-hover
-        u:has-nested-active/segmented-control-option-ref:state-active
-        u:has-nested-[[data-checked]]/segmented-control-option-ref:state-checked`,
-        className,
-      )}
-      {...state.polyfillAttributes}
-      {...rootProps}
-    >
-      <Tooltip {...tooltipProps}>
+    <Tooltip {...tooltipProps}>
+      {/**
+       * 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
+       * button (actually a `<span>`). Ideally, we would make `Radio.Root` the root and it would render an
+       * internal component (e.g. `SegmentedControlOptionButton`) that would itself render a wrapper
+       * `<div>` around the button and the input (as well as calling `useCSSState` with a proper initial
+       * `checked` value, from the `render` state), but that is not possible currently (see
+       * https://github.com/mui/base-ui/issues/3143).
+       */}
+      <div
+        ref={stateRef}
+        className={cn(
+          `gds-segmented-control-option root-block
+          state-[is-toggle=false]
+          group-[:has([data-checked]):has(>:nth-child(2)):not(:has(>:nth-child(3)))]/segmented-control-options:state-[is-toggle]
+          u:group-has-nested-hover/segmented-control--segmented-control-toggle:state-hover
+          u:group-has-nested-active/segmented-control--segmented-control-toggle:state-active
+          u:has-nested-hover/segmented-control-option-ref:state-hover
+          u:has-nested-active/segmented-control-option-ref:state-active
+          u:has-nested-[[data-checked]]/segmented-control-option-ref:state-checked`,
+          className,
+        )}
+        {...state.polyfillAttributes}
+        {...rootProps}
+      >
         <Radio.Root
           ref={buttonPassedRef}
           value={value}
@@ -224,8 +223,7 @@ export function SegmentedControlOption<T extends OptionValue>({
             }
           }}
           className={`
-            nested/segmented-control-option-ref block w-full cursor-pointer outline-0
-            @state-checked/segmented-control-option:cursor-default
+            nested/segmented-control-option-ref block w-full outline-0
             @state-checked/segmented-control-option:[anchor-name:--gds-segmented-control-checked]
           `}
           {...nestedProps}
@@ -271,8 +269,8 @@ export function SegmentedControlOption<T extends OptionValue>({
             `}
           />
         </Radio.Root>
-      </Tooltip>
-    </div>
+      </div>
+    </Tooltip>
   )
 }
 SegmentedControlOption.displayName = 'SegmentedControl.Option'

package/src/components/TabSet.parts.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext, useContext, type ComponentProps } from 'react'
-import { Tabs } from '@base-ui-components/react/tabs'
+import { Tabs } from '@base-ui/react/tabs'
 import flattenChildren from 'react-keyed-flatten-children'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
@@ -118,8 +118,8 @@ export function TabSetTabs({
           className={`
             absolute inset-x-[anchor(inside)] bottom-0 h-px bg-(--border-color-brand-default) transition-[inset] duration-300
             [position-anchor:--gds-tab-set-underline]
-            not-group-hover/tab-set-tabs:duration-0
             not-supports-[position-anchor:--foo]:hidden
+            group-not-hover/tab-set-tabs:duration-0
             group-has-focus-visible/tab-set-tabs:hidden
           `}
         />
@@ -265,7 +265,7 @@ export function TabSetPanels({
         u:group-data-[activation-direction=right]/tab-set:var-[exit-translate-x=-32px]
         u:has-nested-focus-visible/tab-set-panel:animate
         u:has-nested-focus-visible/tab-set-panel:outline
-        u:has-nested-focus-visible/tab-set-panel:animate-outline-from-(--border-color-focus)`,
+        u:has-nested-focus-visible/tab-set-panel:animate-outline-from-focus`,
         transition && typeof transition === 'object' ? transition.className : undefined,
         className,
       )}

package/src/components/ToggleButton.tsx

@@ -17,8 +17,6 @@ export interface ToggleButtonProps
   extends
     Omit<ButtonProps.ToggleButtonProps, 'onChange' | 'variant'>,
     GDSComponentProps<typeof ToggleButtonMeta> {
-  checked?: boolean | undefined
-  defaultChecked?: boolean | undefined
   onChange?: ((checked: boolean) => void) | undefined
 }
 

package/src/components/Tooltip.parts.tsx

@@ -2,15 +2,17 @@
 
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type ComponentProps,
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { Tooltip } from '@base-ui-components/react/tooltip'
+import { Tooltip } from '@base-ui/react/tooltip'
 
 import { twToPx, type GDSComponentProps } from '@graphprotocol/gds-css'
 
@@ -83,9 +85,9 @@ export function TooltipRoot({
   const enabled = !cssProps.disabled && !hasEnabledTooltipAncestor && Boolean(content)
   const [open, ownSetOpen] = useControlled(controlledOpen, false, onOpenChange)
   const nestedSetOpen = useRef<(newOpen: boolean) => void>(null)
-  const registerNestedSetOpen = (newNestedSetOpen: (newOpen: boolean) => void) => {
+  const registerNestedSetOpen = useCallback((newNestedSetOpen: (newOpen: boolean) => void) => {
     nestedSetOpen.current = newNestedSetOpen
-  }
+  }, [])
   const setOpen = (newOpen: boolean) => {
     ownSetOpen(newOpen)
     /**
@@ -112,8 +114,16 @@ export function TooltipRoot({
     clearOpenTimeout()
   }
 
+  const tooltipContextValue = useMemo(
+    () => ({
+      enabled,
+      registerNestedSetOpen,
+    }),
+    [enabled, registerNestedSetOpen],
+  )
+
   return (
-    <TooltipContext.Provider value={{ enabled, registerNestedSetOpen }}>
+    <TooltipContext.Provider value={tooltipContextValue}>
       <TooltipCollector onCollect={onCollect}>
         <Tooltip.Root
           disabled={!enabled}

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

@@ -4,6 +4,7 @@ import {
   createContext,
   isValidElement,
   useContext,
+  useMemo,
   useRef,
   useState,
   type ComponentProps,
@@ -13,7 +14,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import { mergeProps } from '@react-aria/utils'
 import { useButton } from 'react-aria'
 
@@ -67,19 +68,26 @@ export declare namespace InternalButtonOrLinkProps {
     linkComponent?: LinkComponent | undefined
   }
   interface ButtonProps
-    extends BaseProps, DisableableProps, Omit<ComponentProps<'button'>, 'disabled'> {
+    extends
+      BaseProps,
+      DisableableProps,
+      Omit<ComponentProps<'button'>, 'defaultValue' | 'disabled'> {
     href?: undefined
     target?: undefined
     checked?: undefined
+    defaultChecked?: undefined
   }
-  interface ToggleButtonProps extends Omit<ButtonProps, 'checked'> {
-    /** Whether the button is in a checked/selected/pressed state. */
-    checked?: boolean | 'indeterminate' | undefined
+  interface ToggleButtonProps extends Omit<ButtonProps, 'checked' | 'defaultChecked'> {
+    /** Whether the button is in a pressed/selected state. */
+    checked?: boolean | undefined
+    defaultChecked?: boolean | undefined
   }
-  interface LinkProps extends BaseProps, DisableableProps, ComponentProps<'a'> {
+  interface LinkProps
+    extends BaseProps, DisableableProps, Omit<ComponentProps<'a'>, 'defaultValue'> {
     href: string
     type?: undefined
     checked?: undefined
+    defaultChecked?: undefined
   }
 }
 
@@ -191,11 +199,19 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       role = 'button',
       type = 'button',
       checked,
+      defaultChecked,
       href: _href,
       target: _target,
       ...remainingProps
     } = nonBaseProps
 
+    if (defaultChecked !== undefined) {
+      // oxlint-disable-next-line no-console
+      console.warn(
+        '[ButtonOrLink] `defaultChecked` is not supported; use a controlled `checked` prop instead, or wrap `ButtonOrLink` in a component that manages the uncontrolled state',
+      )
+    }
+
     const Element = inline ? SpanButtonWithContext : ButtonWithContext
 
     const state: ButtonOrLinkState = {
@@ -207,22 +223,23 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       checked,
     }
 
-    const checkedAttribute = (() => {
-      if (checked === undefined) {
-        return {}
-      }
-      if (
-        (role === 'option' || role === 'tab' || role === 'row' || role === 'gridcell') &&
-        checked !== 'indeterminate'
-      ) {
-        return { 'aria-selected': checked }
-      }
-      const checkedOrMixed = checked === 'indeterminate' ? ('mixed' as const) : checked
-      if (role === 'button') {
-        return { 'aria-pressed': checkedOrMixed }
-      }
-      return { 'aria-checked': checkedOrMixed }
-    })()
+    const checkedAttribute =
+      checked === undefined
+        ? {}
+        : ((checked: unknown) => {
+            if (
+              (role === 'option' || role === 'tab' || role === 'row' || role === 'gridcell') &&
+              checked !== 'indeterminate'
+            ) {
+              return { 'aria-selected': Boolean(checked) }
+            }
+            const checkedOrMixed =
+              checked === 'indeterminate' ? ('mixed' as const) : Boolean(checked)
+            if (role === 'button') {
+              return { 'aria-pressed': checkedOrMixed }
+            }
+            return { 'aria-checked': checkedOrMixed }
+          })(checked)
 
     let buttonProps: ComponentProps<typeof Element> = {
       role,
@@ -250,6 +267,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     rel = target === '_blank' ? 'noopener noreferrer' : undefined,
     type: _type,
     checked: _checked,
+    defaultChecked: _defaultChecked,
     ...remainingProps
   } = nonBaseProps
 
@@ -337,25 +355,38 @@ export const ButtonOrLinkConfig = ({
   children,
 }: ButtonOrLinkConfigProps) => {
   const ancestorConfig = useContext(ButtonOrLinkConfigContext)
+
   const onClick =
     passedOnClick && ancestorConfig?.onClick
-      ? (
-          event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>,
-          props: InternalButtonOrLinkProps,
-        ) => {
-          passedOnClick(event, props)
-          if (event.isPropagationStopped()) return
-          ancestorConfig.onClick!(event, props)
-        }
+      ? (() => {
+          const ancestorOnClick = ancestorConfig.onClick
+          return (
+            event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>,
+            props: InternalButtonOrLinkProps,
+          ) => {
+            passedOnClick(event, props)
+            if (event.isPropagationStopped()) return
+            ancestorOnClick(event, props)
+          }
+        })()
       : (passedOnClick ?? ancestorConfig?.onClick)
   const transformProps =
     passedTransformProps && ancestorConfig?.transformProps
-      ? (props: InternalButtonOrLinkProps) => {
-          return ancestorConfig.transformProps!(passedTransformProps(props))
-        }
+      ? (() => {
+          const ancestorTransformProps = ancestorConfig.transformProps
+          return (props: InternalButtonOrLinkProps) => {
+            return ancestorTransformProps(passedTransformProps(props))
+          }
+        })()
       : (passedTransformProps ?? ancestorConfig?.transformProps)
+
+  const buttonOrLinkConfigContextValue = useMemo(() => {
+    if (!onClick && !transformProps) return null
+    return { onClick, transformProps }
+  }, [onClick, transformProps])
+
   return (
-    <ButtonOrLinkConfigContext.Provider value={{ onClick, transformProps }}>
+    <ButtonOrLinkConfigContext.Provider value={buttonOrLinkConfigContextValue}>
       {children}
     </ButtonOrLinkConfigContext.Provider>
   )

package/src/components/base/Render.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ComponentProps, ElementType } from 'react'
-import { useRender } from '@base-ui-components/react/use-render'
+import { useRender } from '@base-ui/react/use-render'
 
 export type RenderProps<
   T extends ElementType = 'span',

package/src/components/index.ts

@@ -14,6 +14,8 @@ export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.tsx'
 export { ButtonGroupMeta } from './ButtonGroup.meta.ts'
 export { Card, type CardProps } from './Card.tsx'
 export { CardMeta } from './Card.meta.ts'
+export { Chip, type ChipProps, type ChipGroupProps } from './Chip.tsx'
+export { ChipMeta, ChipGroupMeta } from './Chip.meta.ts'
 export { Cluster, type ClusterProps } from './Cluster.tsx'
 export { ClusterMeta } from './Cluster.meta.ts'
 export { CodeBlock, type CodeBlockProps, type CodeBlockTabsProps } from './CodeBlock.tsx'
@@ -63,6 +65,8 @@ export { OTCInput, type OTCInputProps } from './OTCInput.tsx'
 export { OTCInputMeta } from './OTCInput.meta.ts'
 export { Radio, type RadioAreaProps, type RadioGroupProps, type RadioProps } from './Radio.tsx'
 export { RadioMeta } from './Radio.meta.ts'
+export { Search, type SearchProps } from './Search.tsx'
+export { SearchMeta } from './Search.meta.ts'
 export {
   SegmentedControl,
   type SegmentedControlOptionProps,

package/src/hooks/useCSSProp.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef, type Ref, type RefCallback } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import {
   parseCSSPropValue,

package/src/hooks/useEffectWithRefDeps.ts

@@ -6,7 +6,7 @@ import {
   type Ref,
   type RefCallback,
 } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import { useCustomCompareEffect, useCustomCompareMemo, type EffectHook } from '@react-hookz/web'
 import { isEqual } from '@ver0/deep-equal'
 

package/src/hooks/useNumberInput.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import {
   bigIntToNumber,