@zerodev/react-ui 0.0.4 → 0.0.6

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

@@ -34,13 +34,19 @@ export function TopNav({
   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',
+        // Spans the card edge-to-edge; internal px-4 aligns icons with
+        // the scroll container's 16px inset.
+        'zd:absolute zd:top-0 zd:left-0 zd:right-0 zd:z-20 zd:flex zd:flex-row zd:items-center zd:justify-between zd:px-4 zd:pt-4',
+        // Frosted bg masks scrolled content passing under the nav.
+        'zd:backdrop-blur-[15px]',
         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))` }}
+      style={{
+        height: `calc(${(TOP_NAV_HEIGHT + 24) / 4} * var(--zd-spacing))`,
+      }}
     >
       {onLeftButtonClick ? (
         <IconButton iconName={leftButtonIcon} onClick={onLeftButtonClick} />

package/src/index.ts

@@ -30,6 +30,11 @@ 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,
@@ -45,7 +50,17 @@ export {
   PillSkeleton,
 } from './components/Pill'
 export { PoweredBy } from './components/PoweredBy'
+export {
+  ProgressStep,
+  type ProgressStepProps,
+  type ProgressStepStatus,
+} from './components/ProgressStep'
 export { Screen } from './components/Screen'
+export { Section, type SectionProps } from './components/Section'
+export {
+  MessageDetails,
+  type MessageDetailsProps,
+} from './components/Section/MessageDetails'
 export {
   Select,
   SelectContent,
@@ -64,6 +79,16 @@ export {
   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,
@@ -80,4 +105,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

@@ -87,6 +87,13 @@ const config: Config = {
           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',
@@ -95,6 +102,7 @@ const config: Config = {
         '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',
       },
     },
   },