@zerodev/react-ui 0.0.3 → 0.0.5

package/src/components/TokenListItem/index.tsx

@@ -0,0 +1,192 @@
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'
+
+import { cn } from '../../utils/common'
+import { Icon, type IconName } from '../Icon'
+import { Text } from '../Text'
+
+export type TokenListItemIconVariant = 'token' | 'network'
+
+interface CommonProps {
+  /** Primary text — usually a token symbol like "ETH". */
+  symbol: string
+  /** Subtitle text under the symbol (e.g. "3 networks" or "Arbitrum"). */
+  subtitle?: string
+  /** Kit `Icon` name for the main slot (preferred for known chains/tokens). */
+  iconName?: IconName
+  /** URL of the main icon image (token logo). Used when `iconName` is absent. */
+  imageSource?: string
+  /** Kit `Icon` name rendered inline before the subtitle text (e.g. chain logo). */
+  subtitleIcon?: IconName
+  /** Right-aligned value (e.g. "$0.00"). */
+  value?: string
+  /** Right-aligned percentage change. Coloured green by default, red when
+   * the string starts with a leading "-". */
+  change?: string
+  /** Shape of the main icon. `'token'` = 44x44 rounded square (default),
+   * `'network'` = 36x36 circle. */
+  iconVariant?: TokenListItemIconVariant
+  /** Render a skeleton placeholder instead of the content. */
+  loading?: boolean
+}
+
+export type TokenListItemProps = CommonProps &
+  (
+    | ({ onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'] } & Omit<
+        ButtonHTMLAttributes<HTMLButtonElement>,
+        keyof CommonProps | 'children'
+      >)
+    | ({ onClick?: undefined } & Omit<
+        HTMLAttributes<HTMLDivElement>,
+        keyof CommonProps | 'children'
+      >)
+  )
+
+function IconBlock({
+  iconName,
+  imageSource,
+  variant,
+}: {
+  iconName?: IconName
+  imageSource?: string
+  variant: TokenListItemIconVariant
+}) {
+  const isNetwork = variant === 'network'
+  return (
+    <div
+      className={cn(
+        'zd:shrink-0 zd:bg-white zd:flex zd:items-center zd:justify-center zd:overflow-hidden',
+        isNetwork
+          ? 'zd:w-9 zd:h-9 zd:rounded-full'
+          : 'zd:w-11 zd:h-11 zd:rounded-2xl',
+      )}
+    >
+      {iconName ? (
+        <Icon name={iconName} className="zd:w-6 zd:h-6" />
+      ) : imageSource ? (
+        <img
+          src={imageSource}
+          alt=""
+          className="zd:w-6 zd:h-6 zd:object-contain"
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function TokenListItemSkeleton({
+  className,
+}: {
+  className?: string | undefined
+}) {
+  return (
+    <div
+      className={cn(
+        'zd:w-full zd:p-2 zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2',
+        className,
+      )}
+    >
+      <div className="zd:flex zd:flex-row zd:items-center zd:gap-2 zd:min-w-0">
+        <div className="zd:w-11 zd:h-11 zd:shrink-0 zd:rounded-2xl zd:bg-greyScale/15 zd:animate-skel-pulse" />
+        <div className="zd:flex zd:flex-col zd:gap-2">
+          <div className="zd:h-3 zd:w-14 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+          <div className="zd:h-3 zd:w-10 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+        </div>
+      </div>
+      <div className="zd:flex zd:flex-col zd:items-end zd:gap-2 zd:shrink-0">
+        <div className="zd:h-3 zd:w-12 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+        <div className="zd:h-3 zd:w-10 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+      </div>
+    </div>
+  )
+}
+
+export function TokenListItem({
+  symbol,
+  subtitle,
+  iconName,
+  imageSource,
+  subtitleIcon,
+  value,
+  change,
+  iconVariant = 'token',
+  loading = false,
+  className,
+  onClick,
+  ...rest
+}: TokenListItemProps) {
+  if (loading) return <TokenListItemSkeleton className={className} />
+
+  const changeColor = change?.startsWith('-')
+    ? 'zd:text-negative'
+    : 'zd:text-positive'
+
+  const content = (
+    <>
+      <div className="zd:flex zd:flex-row zd:items-center zd:gap-2 zd:min-w-0">
+        <IconBlock
+          {...(iconName && { iconName })}
+          {...(imageSource && { imageSource })}
+          variant={iconVariant}
+        />
+        <div className="zd:flex zd:flex-col zd:items-start zd:gap-2 zd:min-w-0">
+          <Text className="zd:text-body1 zd:truncate">{symbol}</Text>
+          {subtitle && (
+            <div className="zd:flex zd:flex-row zd:items-center zd:gap-1 zd:min-w-0">
+              {subtitleIcon && (
+                <span className="zd:inline-flex zd:w-3 zd:h-3 zd:rounded-full zd:bg-offWhite/50 zd:overflow-hidden zd:shrink-0 zd:items-center zd:justify-center">
+                  <Icon name={subtitleIcon} className="zd:w-full zd:h-full" />
+                </span>
+              )}
+              <Text className="zd:text-body3 zd:text-greyScale/50 zd:truncate">
+                {subtitle}
+              </Text>
+            </div>
+          )}
+        </div>
+      </div>
+      {(value || change) && (
+        <div className="zd:flex zd:flex-col zd:items-end zd:gap-2 zd:shrink-0">
+          {value && <Text className="zd:text-body1 zd:truncate">{value}</Text>}
+          {change && (
+            <Text className={cn('zd:text-body3 zd:truncate', changeColor)}>
+              {change}
+            </Text>
+          )}
+        </div>
+      )}
+    </>
+  )
+
+  const baseClassName = cn(
+    'zd:w-full zd:p-2 zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2 zd:text-left',
+    className,
+  )
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          baseClassName,
+          'zd:transition-colors zd:rounded-xl',
+          (rest as ButtonHTMLAttributes<HTMLButtonElement>).disabled
+            ? 'zd:opacity-50 zd:cursor-not-allowed'
+            : 'zd:cursor-pointer zd:hover:bg-offWhite/40',
+        )}
+        {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return (
+    <div
+      className={baseClassName}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
+      {content}
+    </div>
+  )
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,94 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode, Ref } from 'react'
+
+import { cn } from '../../utils/common'
+
+/**
+ * Floating tooltip wrapping the Radix primitive with our token palette.
+ *
+ * The primitive is unopinionated about presentation — this file adds:
+ *   - default styling (dark ink bg, white text, 8px offset, subtle shadow)
+ *   - a bundled `Provider` so the common case (a single tooltip in a row)
+ *     doesn't require the consumer to remember to wrap the tree
+ *   - a Portal render so tooltips escape overflow-hidden ancestors
+ *
+ * For dense trees where mount overhead matters, use `TooltipProvider` at
+ * the app root and drop the internal Provider by importing `TooltipRoot`
+ * / `TooltipTrigger` / `TooltipContent` directly.
+ */
+
+export const TooltipProvider = TooltipPrimitive.Provider
+export const TooltipRoot = TooltipPrimitive.Root
+export const TooltipTrigger = TooltipPrimitive.Trigger
+export const TooltipPortal = TooltipPrimitive.Portal
+
+export interface TooltipContentProps
+  extends ComponentProps<typeof TooltipPrimitive.Content> {
+  ref?: Ref<HTMLDivElement>
+}
+
+/** Styled content surface — dark chip, ~11.5px semibold copy, arrow-less. */
+export function TooltipContent({
+  ref,
+  className,
+  sideOffset = 8,
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'zd:z-50 zd:max-w-[220px] zd:rounded-lg zd:px-2 zd:py-1.5',
+        'zd:text-body3 zd:font-semibold zd:text-white zd:text-center',
+        'zd:shadow-[0_8px_22px_-10px_rgba(25,17,11,0.45)]',
+        // Match the popper-in animation used by Select so all our floating
+        // surfaces share one motion vocabulary.
+        'zd:data-[state=delayed-open]:animate-popper-in',
+        className,
+      )}
+      style={{ backgroundColor: 'rgba(25, 17, 11, 0.94)' }}
+      {...props}
+    />
+  )
+}
+
+export interface TooltipProps {
+  /** Trigger element — receives Radix's ref + event handlers via `asChild`. */
+  children: ReactNode
+  /** Tooltip copy. When omitted, the trigger renders without a tooltip. */
+  content?: ReactNode
+  /** Delay before the tooltip appears on hover. Defaults to 200ms. */
+  delayDuration?: number
+  /** Side to render on. Defaults to `top`. */
+  side?: ComponentProps<typeof TooltipPrimitive.Content>['side']
+  /** Alignment along `side`. Defaults to `center`. */
+  align?: ComponentProps<typeof TooltipPrimitive.Content>['align']
+}
+
+/**
+ * Opinionated one-shot tooltip. Wraps its child in a Radix Trigger and mounts
+ * a portalled content surface; no-op when `content` is empty so callers can
+ * pass an optional string without conditional rendering.
+ */
+export function Tooltip({
+  children,
+  content,
+  delayDuration = 200,
+  side = 'top',
+  align = 'center',
+}: TooltipProps) {
+  if (!content) return <>{children}</>
+  return (
+    <TooltipProvider delayDuration={delayDuration}>
+      <TooltipRoot>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent side={side} align={align}>
+            {content}
+          </TooltipContent>
+        </TooltipPortal>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}

package/src/components/TopNav/index.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import { cn } from '../../utils/common'
+import type { IconName } from '../Icon'
+import { IconButton } from '../IconButton'
+import { Text } from '../Text'
+
+export const TOP_NAV_HEIGHT = 52
+
+export interface TopNavProps {
+  /** Handler for the left icon button. When omitted, the left slot renders
+   * an empty spacer so the title/logo stays centred. */
+  onLeftButtonClick?: () => void
+  /** Handler for the right icon button. When omitted, the right slot
+   * renders an empty spacer. */
+  onRightButtonClick?: () => void
+  /** Icon rendered in the left slot. Defaults to `'chevronLeft'` (back). */
+  leftButtonIcon?: IconName
+  /** Icon rendered in the right slot. Defaults to `'x'` (close). */
+  rightButtonIcon?: IconName
+  title?: string
+  logo?: ReactNode
+  className?: string
+}
+
+export function TopNav({
+  onLeftButtonClick,
+  onRightButtonClick,
+  leftButtonIcon = 'chevronLeft',
+  rightButtonIcon = 'x',
+  title,
+  logo,
+  className,
+}: TopNavProps) {
+  return (
+    <div
+      className={cn(
+        'zd:absolute zd:top-4 zd:left-0 zd:right-0 zd:flex zd:flex-row zd:items-center zd:justify-between',
+        className,
+      )}
+      // Scale via --zd-spacing (the 4px base) like every spacing utility, so
+      // the nav height tracks the density variants and doesn't eat a
+      // disproportionate share of the shrunken frame at smaller sizes.
+      style={{ height: `calc(${TOP_NAV_HEIGHT / 4} * var(--zd-spacing))` }}
+    >
+      {onLeftButtonClick ? (
+        <IconButton iconName={leftButtonIcon} onClick={onLeftButtonClick} />
+      ) : (
+        <div className="zd:h-13 zd:w-13" />
+      )}
+      {logo && (
+        <div className="zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none">
+          {logo}
+        </div>
+      )}
+      {title && (
+        <div className="zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none">
+          <Text className="zd:text-body1">{title}</Text>
+        </div>
+      )}
+      {onRightButtonClick ? (
+        <IconButton iconName={rightButtonIcon} onClick={onRightButtonClick} />
+      ) : (
+        <div className="zd:h-13 zd:w-13" />
+      )}
+    </div>
+  )
+}

package/src/components/Wrapper/index.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react'
+import type { HTMLAttributes, PropsWithChildren, Ref } from 'react'
 
 import { cn } from '../../utils/common'
 
@@ -6,6 +6,7 @@ export type WrapperVariant = 'ghost' | 'soft' | 'solid'
 
 export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
   variant?: WrapperVariant
+  ref?: Ref<HTMLDivElement> | undefined
 }
 
 function getBackgroundAlpha(variant: WrapperVariant): number {
@@ -23,6 +24,7 @@ export function Wrapper({
   className,
   children,
   variant = 'soft',
+  ref,
   ...rest
 }: PropsWithChildren<WrapperProps>) {
   const backgroundAlpha = getBackgroundAlpha(variant)
@@ -30,6 +32,7 @@ export function Wrapper({
 
   return (
     <div
+      ref={ref}
       className={cn(
         'zd:overflow-hidden zd:border-offWhite zd:border-[0.3px] zd:backdrop-blur-[15px]',
         className,

package/src/index.ts

@@ -9,6 +9,12 @@ export {
   ArrowView,
 } from './components/ArrowCardPair'
 export { Badge, type BadgeProps } from './components/Badge'
+export {
+  BottomSheet,
+  BottomSheetClose,
+  BottomSheetContent,
+  BottomSheetTitle,
+} from './components/BottomSheet'
 export { Button, type ButtonProps } from './components/Button'
 export { Callout, type CalloutProps } from './components/Callout'
 export {
@@ -24,14 +30,61 @@ export {
   icons,
 } from './components/Icon'
 export { IconButton, type IconButtonProps } from './components/IconButton'
+export {
+  InfoCard,
+  type InfoCardImageStyle,
+  type InfoCardProps,
+} from './components/InfoCard'
 export { Input, type InputProps } from './components/Input'
 export {
   ListItem,
+  ListItemChevron,
+  ListItemIcon,
+  type ListItemIconProps,
   type ListItemProps,
   ListItemSkeleton,
 } from './components/ListItem'
+export {
+  Pill,
+  type PillProps,
+  PillSkeleton,
+} from './components/Pill'
+export { PoweredBy } from './components/PoweredBy'
+export { Screen } from './components/Screen'
+export { Section, type SectionProps } from './components/Section'
+export {
+  MessageDetails,
+  type MessageDetailsProps,
+} from './components/Section/MessageDetails'
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectItemText,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './components/Select'
 export { Switch, type SwitchProps } from './components/Switch'
 export { Text, type TextProps } from './components/Text'
+export {
+  TokenListItem,
+  type TokenListItemIconVariant,
+  type TokenListItemProps,
+} from './components/TokenListItem'
+export {
+  Tooltip,
+  TooltipContent,
+  type TooltipContentProps,
+  TooltipPortal,
+  type TooltipProps,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from './components/Tooltip'
+export { TopNav, type TopNavProps } from './components/TopNav'
 export {
   WrappedPressable,
   type WrappedPressableProps,
@@ -47,4 +100,4 @@ export {
   ZeroDevLogo,
   type ZeroDevLogoProps,
 } from './components/ZeroDevLogo'
-export { cn } from './utils/common'
+export { camelCaseToTitle, cn } from './utils/common'

package/src/utils/common.ts

@@ -15,3 +15,18 @@ const customTwMerge = extendTailwindMerge({
 export function cn(...inputs: ClassValue[]) {
   return customTwMerge(clsx(inputs))
 }
+
+/** Turn `"fromAddress"` into `"From Address"`. Leaves strings that already
+ * start with uppercase (i.e. already display-cased) untouched, so callers can
+ * pass either camelCase keys or human-readable labels through unchanged. */
+export function camelCaseToTitle(str: string): string {
+  if (str.length === 0 || str.at(0) === str.at(0)?.toUpperCase()) {
+    return str
+  }
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .trim()
+    .split(' ')
+    .map((word) => (word.at(0) ?? '').toUpperCase() + word.slice(1))
+    .join(' ')
+}

package/tailwind.config.ts

@@ -57,6 +57,53 @@ const config: Config = {
         mono: undefined,
         roboto: ['Roboto', 'sans-serif'],
       },
+      // Sheet / overlay animations bound to Radix's `data-state=open|closed`
+      // attributes. Defined here (not in the CSS) so downstream packages that
+      // `@config` this file inherit them without duplication.
+      keyframes: {
+        'sheet-in': {
+          from: { transform: 'translateY(100%)' },
+          to: { transform: 'translateY(0)' },
+        },
+        'sheet-out': {
+          from: { transform: 'translateY(0)' },
+          to: { transform: 'translateY(100%)' },
+        },
+        'backdrop-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'backdrop-out': {
+          from: { opacity: '1' },
+          to: { opacity: '0' },
+        },
+        // Gentle opacity pulse for loading skeletons — softer than Tailwind's
+        // default `pulse` (which dips to 50% and looks jittery on greys).
+        'skel-pulse': {
+          '0%, 100%': { opacity: '0.65' },
+          '50%': { opacity: '1' },
+        },
+        'popper-in': {
+          from: { opacity: '0', transform: 'scale(0.97) translateY(-3px)' },
+          to: { opacity: '1', transform: 'scale(1) translateY(0)' },
+        },
+        // Fresh-value flash for live-updating fee estimates: fades and lifts
+        // in when the underlying quote changes, so a route swap visibly
+        // recalculates rather than silently snapping.
+        'fee-flash': {
+          from: { opacity: '0', transform: 'translateY(-3px) scale(0.96)' },
+          to: { opacity: '1', transform: 'none' },
+        },
+      },
+      animation: {
+        'sheet-in': 'sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards',
+        'sheet-out': 'sheet-out 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards',
+        'backdrop-in': 'backdrop-in 200ms ease-out forwards',
+        'backdrop-out': 'backdrop-out 200ms ease-out forwards',
+        'skel-pulse': 'skel-pulse 1.1s ease-in-out infinite',
+        'popper-in': 'popper-in 160ms ease-out both',
+        'fee-flash': 'fee-flash 420ms cubic-bezier(0.2, 0.9, 0.3, 1) both',
+      },
     },
   },
   plugins: [],