@zerodev/react-ui 0.0.2 → 0.0.4

package/src/components/Screen/index.tsx

@@ -0,0 +1,121 @@
+import {
+  type CSSProperties,
+  createContext,
+  type ReactNode,
+  useContext,
+  useState,
+} from 'react'
+import { cn } from '../../utils/common'
+import { TOP_NAV_HEIGHT } from '../TopNav'
+import {
+  CardGlow,
+  MultiRadialBackground,
+  WrapperBorder,
+} from './MultiRadialBackground'
+
+const CONTENT_PADDING_TOP = TOP_NAV_HEIGHT + 16
+
+// Container for card-scoped overlays (bottom sheets, dialogs, etc.). Consumers
+// portal into this element via `Radix Dialog.Portal container={...}` so the
+// overlay is clipped inside the card's rounded frame instead of covering the
+// whole page. Populated once Screen's inner card mounts.
+const ScreenOverlayContext = createContext<HTMLDivElement | null>(null)
+
+/** Element inside `Screen` that overlay/portal-based components (e.g. the QR
+ * sheet) should render into. Returns `null` outside a `Screen` — callers
+ * should guard on that and skip rendering. */
+export function useScreenOverlayContainer() {
+  return useContext(ScreenOverlayContext)
+}
+
+export function Screen({
+  children,
+  className,
+  contentClassName,
+  size = 'lg',
+  style,
+  topNav,
+  overlay,
+}: {
+  children: ReactNode
+  className?: string | undefined
+  contentClassName?: string | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  style?: CSSProperties | undefined
+  topNav?: ReactNode
+  overlay?: ReactNode
+}) {
+  // Overlay container ref goes into state so children re-render once the DOM
+  // node is available — that lets deeply nested components own their own
+  // overlay state and portal into the card without hoisting it up here.
+  const [overlayContainer, setOverlayContainer] =
+    useState<HTMLDivElement | null>(null)
+
+  return (
+    <div
+      data-zd-size={size}
+      className={cn(
+        // 400×810 by default, but never taller/wider than the parent — a
+        // consumer wrapper with its own size caps the Screen (max-w/h-full =
+        // 100% of the parent). overflow-hidden clips the frame to its rounded
+        // border ring; content scrolls in the inner div below.
+        'zd:relative zd:flex zd:flex-col zd:text-left',
+        // w-100 = 400px, h-202.5 = 810px at density 1; both compile to
+        // calc(var(--zd-spacing) * N), so they scale with the size variants.
+        // rounded-[38px] = inner card radius (32px) + the 6px border-ring gap,
+        // so the ring has a uniform width — equal inner/outer radii would make
+        // the corners read thicker than the sides.
+        'zd:w-100 zd:h-202.5 zd:max-w-full zd:max-h-full zd:overflow-hidden zd:rounded-[38px]',
+        className,
+      )}
+      style={style}
+    >
+      {/* Gradient border layer — fills the frame; the card on top has a 6px
+          margin so this shows as the border ring. */}
+      <WrapperBorder />
+      {/* Inner card sits on top with a 6px margin, exposing the border ring.
+          Its own gradient (base + CardGlow) fills the card so the colour stays
+          vivid and distinct from the border. */}
+      <div
+        ref={setOverlayContainer}
+        className={cn(
+          // m-1.5 = calc(var(--zd-spacing) * 1.5) = 6px at density 1, so the
+          // gradient border ring thins with the size variants. (Corner radii
+          // stay fixed, so at smaller sizes the ring is marginally non-uniform
+          // at the corners — a minor cosmetic trade-off.)
+          'zd:flex zd:flex-1 zd:flex-col zd:m-1.5 zd:px-4 zd:overflow-hidden zd:rounded-4xl zd:relative',
+          contentClassName,
+        )}
+        // clip-path clips backdrop-filter to the rounded corners; plain
+        // overflow-hidden does not (WebKit/Chromium leaves scrolled blurred
+        // children bleeding past the radius). Must match rounded-4xl (32px).
+        style={{ clipPath: 'inset(0 round 32px)' }}
+      >
+        <MultiRadialBackground />
+        <CardGlow />
+        <div className="zd:relative zd:z-10 zd:flex zd:flex-1 zd:flex-col zd:min-h-0">
+          {topNav}
+          <div
+            className="zd:flex zd:flex-1 zd:flex-col zd:min-h-0 zd:overflow-y-auto zd:overflow-x-hidden zd:-mr-4 zd:pr-4"
+            // Scale via --zd-spacing (matches TopNav's scaled height) so the
+            // top padding shrinks with the frame — otherwise the fixed 68px
+            // eats a disproportionate share at smaller sizes and overflows.
+            style={{
+              paddingTop: `calc(${CONTENT_PADDING_TOP / 4} * var(--zd-spacing))`,
+            }}
+          >
+            <ScreenOverlayContext.Provider value={overlayContainer}>
+              {children}
+            </ScreenOverlayContext.Provider>
+          </div>
+        </div>
+      </div>
+      {/* Overlay is a sibling of the inner card, not a child — so it escapes
+          the card's clip-path + horizontal padding, and its own absolute
+          `inset-0` fills the outer 400×810 frame. That lets the backdrop dim
+          the TopNav band too and lets a bottom sheet anchor to the outer
+          frame's bottom, not the padded inner card. */}
+      {overlay}
+    </div>
+  )
+}

package/src/components/Select/index.tsx

@@ -0,0 +1,153 @@
+import { Select as SelectPrimitive } from 'radix-ui'
+import type { ComponentProps, Ref } from 'react'
+
+import { cn } from '../../utils/common'
+import { Icon } from '../Icon'
+import { Wrapper } from '../Wrapper'
+
+export const Select = SelectPrimitive.Root
+export const SelectGroup = SelectPrimitive.Group
+export const SelectValue = SelectPrimitive.Value
+export const SelectItemText = SelectPrimitive.ItemText
+
+/** Bare styled trigger. Use `asChild` to wrap a custom trigger like `Pill`. */
+export function SelectTrigger({
+  ref,
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Trigger> & {
+  ref?: Ref<HTMLButtonElement>
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'zd:inline-flex zd:items-center zd:justify-between zd:gap-2',
+        'zd:outline-none zd:cursor-pointer',
+        // Counters Radix's `pointer-events: none` on the trigger while the
+        // panel is open — without this the trigger goes inert and can't be
+        // clicked to toggle closed.
+        'zd:data-[state=open]:pointer-events-auto',
+        'zd:disabled:cursor-not-allowed zd:disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </SelectPrimitive.Trigger>
+  )
+}
+
+/** Trigger affordance slot. Defaults to a chevronDown icon. */
+export function SelectIcon({
+  ref,
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Icon> & {
+  ref?: Ref<HTMLSpanElement>
+}) {
+  return (
+    <SelectPrimitive.Icon
+      ref={ref}
+      className={cn('zd:shrink-0', className)}
+      {...props}
+    >
+      {children ?? (
+        <Icon name="chevronDown" className="zd:size-4 zd:text-greyScale" />
+      )}
+    </SelectPrimitive.Icon>
+  )
+}
+
+/** Portaled popper panel. Width defaults to `--radix-select-trigger-width`;
+ * override via inline `style={{ width }}`. */
+export function SelectContent({
+  ref,
+  className,
+  children,
+  position = 'popper',
+  sideOffset = 8,
+  style,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content> & {
+  ref?: Ref<HTMLDivElement>
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        position={position}
+        sideOffset={sideOffset}
+        className={cn(
+          'zd:z-50 zd:max-h-80 zd:outline-none',
+          'zd:data-[state=open]:animate-popper-in',
+          className,
+        )}
+        {...props}
+        style={{
+          width: 'var(--radix-select-trigger-width)',
+          transformOrigin: 'var(--radix-select-content-transform-origin)',
+          ...style,
+        }}
+      >
+        <Wrapper
+          variant="solid"
+          // Override Wrapper's 80% white translucency — a dropdown over
+          // content shouldn't let the content bleed through.
+          style={{ backgroundColor: '#fff' }}
+          className="zd:flex zd:flex-col zd:rounded-2xl zd:overflow-hidden"
+        >
+          <SelectPrimitive.Viewport className="zd:overflow-y-auto zd:max-h-80">
+            {children}
+          </SelectPrimitive.Viewport>
+        </Wrapper>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+/** Option row. Children render as-is; set `textValue` for typeahead when
+ * children aren't plain text. */
+export function SelectItem({
+  ref,
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Item> & {
+  ref?: Ref<HTMLDivElement>
+}) {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        // Default padding for plain-text items. Complex children with their
+        // own padding (e.g. `<TokenListItem>`) opt out via `className="zd:p-0"`.
+        'zd:relative zd:outline-none zd:cursor-pointer zd:px-3 zd:py-2',
+        'zd:data-[highlighted]:bg-offWhite/40',
+        'zd:data-[state=checked]:bg-offWhite/60',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </SelectPrimitive.Item>
+  )
+}
+
+export function SelectSeparator({
+  ref,
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator> & {
+  ref?: Ref<HTMLDivElement>
+}) {
+  return (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={cn('zd:h-px zd:bg-offWhite/50 zd:mx-2 zd:my-1', className)}
+      {...props}
+    />
+  )
+}

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/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/components/ZeroDevLogo/index.tsx

@@ -0,0 +1,55 @@
+import type { FC, SVGProps } from 'react'
+
+import LockupBlack from '../../../assets/brand/zerodev-lockup-black.svg?react'
+import LockupOffwhite from '../../../assets/brand/zerodev-lockup-offwhite.svg?react'
+import MarkBlack from '../../../assets/brand/zerodev-mark-black.svg?react'
+import MarkColor from '../../../assets/brand/zerodev-mark-color.svg?react'
+import MarkOffwhite from '../../../assets/brand/zerodev-mark-offwhite.svg?react'
+import MarkOrange from '../../../assets/brand/zerodev-mark-orange.svg?react'
+
+// The `mark` (icon only) ships in four tones; the `lockup` (mark + wordmark)
+// only in black/offwhite — there is no colorful lockup asset. The union keeps
+// invalid combinations (e.g. lockup + color) from type-checking.
+export type MarkTone = 'black' | 'offwhite' | 'color' | 'orange'
+export type LockupTone = 'black' | 'offwhite'
+
+export type ZeroDevLogoProps = SVGProps<SVGSVGElement> &
+  (
+    | { variant?: 'mark'; tone?: MarkTone }
+    | { variant: 'lockup'; tone?: LockupTone }
+  )
+
+export function ZeroDevLogo({
+  variant = 'mark',
+  tone = 'black',
+  ...props
+}: ZeroDevLogoProps) {
+  // Brand SVGs carry literal fills (the tone IS the color), so no text-color
+  // class is applied — unlike Icon, currentColor would have no effect here.
+  let Svg: FC<SVGProps<SVGSVGElement>>
+  if (variant === 'lockup') {
+    switch (tone) {
+      case 'offwhite':
+        Svg = LockupOffwhite
+        break
+      default:
+        Svg = LockupBlack
+    }
+  } else {
+    switch (tone) {
+      case 'offwhite':
+        Svg = MarkOffwhite
+        break
+      case 'color':
+        Svg = MarkColor
+        break
+      case 'orange':
+        Svg = MarkOrange
+        break
+      default:
+        Svg = MarkBlack
+    }
+  }
+
+  return <Svg {...props} />
+}

package/src/index.ts

@@ -3,9 +3,26 @@
  * React UI primitives for ZeroDev
  */
 
+export {
+  ArrowCardPair,
+  type ArrowCardPairProps,
+  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 {
+  DataRow,
+  type DataRowProps,
+  DataRowSkeleton,
+  type DataRowSkeletonProps,
+} from './components/DataRow'
 export {
   Icon,
   type IconName,
@@ -16,11 +33,38 @@ export { IconButton, type IconButtonProps } from './components/IconButton'
 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 {
+  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 { TopNav, type TopNavProps } from './components/TopNav'
 export {
   WrappedPressable,
   type WrappedPressableProps,
@@ -30,4 +74,10 @@ export {
   type WrapperProps,
   type WrapperVariant,
 } from './components/Wrapper'
+export {
+  type LockupTone,
+  type MarkTone,
+  ZeroDevLogo,
+  type ZeroDevLogoProps,
+} from './components/ZeroDevLogo'
 export { cn } from './utils/common'