@zerodev/react-ui 0.0.3 → 0.0.5

package/src/components/ListItem/index.tsx

@@ -1,7 +1,7 @@
-import type { ButtonHTMLAttributes } from 'react'
+import { Slot } from 'radix-ui'
+import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react'
 
 import { cn } from '../../utils/common'
-import { Badge, type BadgeProps } from '../Badge'
 import { Icon, type IconName } from '../Icon'
 import { Text } from '../Text'
 import { Wrapper } from '../Wrapper'
@@ -20,117 +20,112 @@ export function ListItemSkeleton({ className }: ListItemSkeletonProps) {
     >
       <div className="zd:flex zd:flex-row zd:justify-between zd:items-center zd:p-2">
         <div className="zd:flex zd:flex-row zd:items-center zd:gap-3">
-          <div className="zd:w-13 zd:h-13 zd:rounded-2xl zd:bg-offWhite/50 zd:animate-pulse" />
+          <div className="zd:w-13 zd:h-13 zd:rounded-2xl zd:bg-greyScale/15 zd:animate-skel-pulse" />
           <div className="zd:gap-2">
-            <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-offWhite/50 zd:animate-pulse zd:mb-2" />
-            <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-offWhite/50 zd:animate-pulse" />
+            <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-greyScale/15 zd:animate-skel-pulse zd:mb-2" />
+            <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-greyScale/15 zd:animate-skel-pulse" />
           </div>
         </div>
         <div className="zd:gap-2">
-          <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-offWhite/50 zd:animate-pulse zd:mb-2" />
-          <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-offWhite/50 zd:animate-pulse" />
+          <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-greyScale/15 zd:animate-skel-pulse zd:mb-2" />
+          <div className="zd:w-14 zd:h-3 zd:rounded-lg zd:bg-greyScale/15 zd:animate-skel-pulse" />
         </div>
       </div>
     </div>
   )
 }
 
-export interface ListItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  iconName?: IconName
-  imageUri?: string
+interface ListItemBaseProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   title: string
-  subtitle?: string
-  badgeProps?: BadgeProps
-  details?: { text: string; subtext?: string }
-  chevron?: boolean
-  alert?: boolean
+  /** Secondary line under the title — plain text (auto-styled) or any node,
+   * e.g. a `<Badge />`. */
+  subtitle?: ReactNode
+  /** Leading tile content — any node (`ListItemIcon`, `<img>`, a brand mark).
+   * Size the node itself (e.g. `zd:w-6 zd:h-6`); the tile keeps its frame. */
+  icon?: ReactNode
+  /** Right side of the row — `<ListItemChevron />` or any custom node. */
+  trailing?: ReactNode
 }
 
+// `children` is only meaningful as the asChild target — the union makes the
+// pairing a compile-time contract.
+type ListItemAsChildProps =
+  | {
+      /** Render the row into the child element (e.g. an `<a>`) instead of a
+       * `<button>`. Pass a single childless element; the row layout is
+       * injected into it. */
+      asChild: true
+      children: ReactElement
+    }
+  | { asChild?: false; children?: never }
+
+export type ListItemProps = ListItemBaseProps & ListItemAsChildProps
+
 export function ListItem({
-  iconName,
-  imageUri,
+  icon,
   title,
   subtitle,
-  badgeProps,
-  details,
-  chevron,
-  alert,
+  trailing,
+  asChild,
+  children,
   className,
   ...rest
 }: ListItemProps) {
+  const Comp = asChild ? Slot.Root : 'button'
   return (
-    <Wrapper
-      className={cn(
-        'zd:w-full zd:h-17 zd:rounded-2xl',
-        alert && 'zd:border-0',
-        className,
-      )}
-    >
-      <button
-        type="button"
+    <Wrapper className={cn('zd:w-full zd:h-17 zd:rounded-2xl', className)}>
+      <Comp
+        {...(!asChild && { type: 'button' as const })}
         className={cn(
-          'zd:w-full zd:flex zd:flex-row zd:justify-between zd:items-center zd:p-2 zd:transition-colors zd:cursor-pointer',
-          alert
-            ? 'zd:bg-solarOrange/15'
-            : 'zd:hover:bg-white/20 zd:active:bg-white/30',
+          'zd:w-full zd:flex zd:flex-row zd:justify-between zd:items-center zd:p-2 zd:transition-colors zd:cursor-pointer zd:hover:bg-white/20 zd:active:bg-white/30',
           rest.disabled && 'zd:opacity-50 zd:cursor-not-allowed',
         )}
         {...rest}
       >
+        {asChild && <Slot.Slottable>{children}</Slot.Slottable>}
         <div className="zd:flex zd:flex-row zd:items-center zd:gap-3">
-          <div
-            className={cn(
-              'zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:shrink-0',
-              alert ? 'zd:bg-offWhite/50' : 'zd:bg-white',
-            )}
-          >
-            {imageUri ? (
-              <img src={imageUri} alt="" className="zd:w-6 zd:h-6" />
-            ) : iconName ? (
-              <Icon
-                name={iconName}
-                className={cn(
-                  'zd:w-6 zd:h-6',
-                  details || alert
-                    ? 'zd:text-solarOrange'
-                    : 'zd:text-greyScale',
-                )}
-              />
-            ) : null}
+          <div className="zd:w-13 zd:h-13 zd:rounded-2xl zd:bg-white zd:flex zd:items-center zd:justify-center zd:shrink-0">
+            {icon}
           </div>
-          <div
-            className={cn(
-              'zd:flex zd:flex-col zd:justify-center zd:text-left',
-              badgeProps ? 'zd:gap-2' : 'zd:gap-1',
-            )}
-          >
+          <div className="zd:flex zd:flex-col zd:justify-center zd:text-left zd:gap-1">
             <Text className="zd:text-body1">{title}</Text>
-            {subtitle && (
+            {typeof subtitle === 'string' ? (
               <Text className="zd:text-body3 zd:text-greyScale/50">
                 {subtitle}
               </Text>
+            ) : (
+              subtitle
             )}
-            {badgeProps && <Badge {...badgeProps} />}
           </div>
         </div>
-        {details ? (
-          <div className="zd:flex zd:flex-col zd:pr-1">
-            <Text className="zd:text-body1">{details.text}</Text>
-            {details.subtext && (
-              <Text className="zd:text-body3 zd:text-greyScale/50 zd:self-end">
-                {details.subtext}
-              </Text>
-            )}
-          </div>
-        ) : chevron ? (
-          <div className="zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center">
-            <Icon
-              name="chevronRight"
-              className="zd:h-6 zd:w-6 zd:text-greyScale"
-            />
-          </div>
-        ) : null}
-      </button>
+        {trailing}
+      </Comp>
     </Wrapper>
   )
 }
+
+export interface ListItemIconProps {
+  name: IconName
+  className?: string
+}
+
+/** Standard leading icon for the tile — pre-sized and colored for the slot;
+ * override via `className` (e.g. `zd:text-solarOrange`). */
+export function ListItemIcon({ name, className }: ListItemIconProps) {
+  return (
+    <Icon
+      name={name}
+      className={cn('zd:w-6 zd:h-6 zd:text-greyScale', className)}
+    />
+  )
+}
+
+/** Standard trailing chevron for navigation rows. */
+export function ListItemChevron() {
+  return (
+    <div className="zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center">
+      <Icon name="chevronRight" className="zd:h-6 zd:w-6 zd:text-greyScale" />
+    </div>
+  )
+}

package/src/components/Pill/index.tsx

@@ -0,0 +1,167 @@
+import type { HTMLAttributes, KeyboardEvent, ReactNode, Ref } from 'react'
+import { cn } from '../../utils/common'
+import { Text } from '../Text'
+import { Wrapper } from '../Wrapper'
+
+export interface PillProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Text label rendered next to the logo (e.g., "USDC", "Base"). */
+  label: string
+  /** URL of the logo image; when omitted, a neutral placeholder disc with the
+   * first letter of `label` is drawn. */
+  logoUri?: string
+  /** Click handler; when supplied and not `disabled`, the pill becomes a keyboard-accessible button. */
+  onClick?: () => void
+  /** When true, renders as a dimmed, non-interactive pill. */
+  disabled?: boolean
+  /** Render a pulsing skeleton placeholder instead of the content. */
+  loading?: boolean
+  /** Optional trailing affordance (e.g., `<SelectIcon />`). Rendered in a padded slot on the right. */
+  trailingIcon?: ReactNode
+  ref?: Ref<HTMLDivElement>
+}
+
+export function Pill({
+  label,
+  logoUri,
+  onClick,
+  disabled,
+  loading,
+  trailingIcon,
+  className,
+  ref,
+  ...rest
+}: PillProps) {
+  if (loading) return <PillSkeleton className={className} disabled={disabled} />
+
+  const logoInitial = label.charAt(0).toUpperCase()
+
+  const interactive = Boolean(onClick) && !disabled
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!interactive) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onClick?.()
+    }
+  }
+
+  return (
+    <Wrapper
+      ref={ref}
+      variant="solid"
+      // Override Wrapper's variant-based bg color for the display variant —
+      // Figma spec is exactly rgba(255,255,255,0.05), which none of the
+      // Wrapper variants match. Inline style beats Wrapper's own style.
+      style={
+        disabled ? { backgroundColor: 'rgba(255, 255, 255, 0.05)' } : undefined
+      }
+      className={cn(
+        // Sizing/padding matches Figma: outer pl-1 pr-2 py-1, rounded-2xl.
+        // Height is content-driven — 44px logo + 4px vertical padding = 52px.
+        'zd:relative zd:flex zd:w-full zd:items-center zd:justify-between zd:overflow-hidden zd:rounded-2xl zd:pl-1 zd:pr-2 zd:py-1',
+        // Universal inner shadow from the Figma design token.
+        'zd:shadow-[inset_0_-4px_4px_0_rgba(255,255,255,0.1),inset_0_3px_4px_0_rgba(0,0,0,0.02)]',
+        !disabled && 'zd:cursor-pointer',
+        className,
+      )}
+      {...rest}
+      {...(interactive && {
+        role: 'button',
+        tabIndex: 0,
+        onClick,
+        onKeyDown: handleKeyDown,
+      })}
+    >
+      <div className="zd:flex zd:items-center zd:gap-1.5">
+        {/* 44×44 logo well with a 34×34 centered inner disc. Figma places the
+            image with translate-1/2 offsets so the smaller disc sits inside
+            the larger well — the 10px reveal reads as the pill's "logo pad". */}
+        <div
+          className="zd:relative zd:size-11 zd:shrink-0 zd:rounded-xl"
+          aria-hidden={!logoUri}
+        >
+          <div
+            className={cn(
+              'zd:absolute zd:top-1/2 zd:left-1/2 zd:-translate-x-1/2 zd:-translate-y-1/2',
+              'zd:flex zd:size-8.5 zd:items-center zd:justify-center',
+              // Only round + clip when we're showing the letter fallback disc.
+              // Real logo SVGs bring their own shape (round, diamond, etc.) —
+              // clipping them to a circle chops off tips like Polygon's.
+              // The neutral greyScale/10 fallback disc reads as a design-
+              // system placeholder rather than a token-specific color; real
+              // tokens/chains ship via `logoUri`.
+              !logoUri &&
+                'zd:overflow-hidden zd:rounded-full zd:bg-greyScale/10',
+            )}
+          >
+            {logoUri ? (
+              <img
+                alt=""
+                src={logoUri}
+                className="zd:size-full zd:object-contain"
+                data-testid="token-chain-pill-logo"
+              />
+            ) : logoInitial ? (
+              <span className="zd:text-body2 zd:font-medium zd:text-greyScale">
+                {logoInitial}
+              </span>
+            ) : null}
+          </div>
+        </div>
+        <Text className="zd:whitespace-nowrap zd:text-body1">{label}</Text>
+      </div>
+      {trailingIcon && (
+        <div
+          className="zd:flex zd:shrink-0 zd:items-center zd:rounded-full zd:p-2"
+          data-testid="pill-trailing-icon"
+        >
+          {trailingIcon}
+        </div>
+      )}
+    </Wrapper>
+  )
+}
+
+export function PillSkeleton({
+  className,
+  disabled,
+}: {
+  className?: string | undefined
+  /** Match `Pill`'s dimmed display-variant background so the skeleton on a
+   * destination (disabled) pill doesn't look like an interactive pill. */
+  disabled?: boolean | undefined
+}) {
+  return (
+    <Wrapper
+      variant="solid"
+      role="status"
+      aria-busy="true"
+      aria-label="Loading"
+      style={
+        disabled ? { backgroundColor: 'rgba(255, 255, 255, 0.05)' } : undefined
+      }
+      className={cn(
+        // Match Pill's outer chrome so the placeholder occupies the same
+        // footprint (52px tall = 44px logo well + 4px vertical padding).
+        'zd:relative zd:flex zd:w-full zd:items-center zd:overflow-hidden zd:rounded-2xl zd:pl-1 zd:pr-2 zd:py-1',
+        'zd:shadow-[inset_0_-4px_4px_0_rgba(255,255,255,0.1),inset_0_3px_4px_0_rgba(0,0,0,0.02)]',
+        className,
+      )}
+    >
+      {/* Visual only — the outer wrapper carries the a11y busy/label state,
+       *  so hide the placeholder bars from assistive tech to avoid narrating
+       *  empty pill contents. */}
+      <div
+        aria-hidden
+        className="zd:flex zd:items-center zd:gap-1.5 zd:animate-skel-pulse"
+      >
+        {/* Logo well mirrors Pill's 44×44 → inner 34×34 (size-8.5). */}
+        <div className="zd:relative zd:size-11 zd:shrink-0">
+          <div className="zd:absolute zd:top-1/2 zd:left-1/2 zd:size-8.5 zd:-translate-x-1/2 zd:-translate-y-1/2 zd:rounded-full zd:bg-greyScale/15" />
+        </div>
+        <div className="zd:h-3.5 zd:w-14 zd:rounded-md zd:bg-greyScale/15" />
+      </div>
+    </Wrapper>
+  )
+}

package/src/components/PoweredBy/index.tsx

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'react'
+import { cn } from '../../utils/common'
+import { Text } from '../Text'
+import { ZeroDevLogo } from '../ZeroDevLogo'
+
+export function PoweredBy({
+  className,
+  style,
+}: {
+  className?: string
+  style?: CSSProperties
+}) {
+  return (
+    <div
+      className={cn(
+        'zd:gap-1.5 zd:flex zd:flex-row zd:items-center',
+        className,
+      )}
+    >
+      <Text>Powered by</Text>
+      <ZeroDevLogo
+        variant="lockup"
+        tone="black"
+        className="zd:h-4.5 zd:w-auto"
+        style={style}
+      />
+    </div>
+  )
+}

package/src/components/Screen/EllipticalRadial.tsx

@@ -0,0 +1,65 @@
+interface RadialStop {
+  offset: number
+  color: string
+  opacity: number
+}
+
+export interface RadialLayer {
+  id: string
+  // Figma-exported gradientTransform matrix: the unit circle
+  // (center 0,0 radius 1) mapped to a rotated/scaled/translated ellipse.
+  matrix: [number, number, number, number, number, number]
+  // Opacity of the rect the gradient fills (Figma exports this on the <rect>).
+  fillOpacity: number
+  stops: RadialStop[]
+}
+
+// The rect each gradient fills, in the parent SVG's viewBox coordinates.
+interface RadialRect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export function EllipticalRadial({
+  layer,
+  rect,
+}: {
+  layer: RadialLayer
+  rect: RadialRect
+}) {
+  const { id, matrix, fillOpacity, stops } = layer
+
+  return (
+    <>
+      <defs>
+        <radialGradient
+          id={id}
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform={`matrix(${matrix.join(' ')})`}
+        >
+          {stops.map((s, i) => (
+            <stop
+              key={s.color + i.toString()}
+              offset={s.offset}
+              stopColor={s.color}
+              stopOpacity={s.opacity}
+            />
+          ))}
+        </radialGradient>
+      </defs>
+      <rect
+        x={rect.x}
+        y={rect.y}
+        width={rect.width}
+        height={rect.height}
+        fill={`url(#${id})`}
+        fillOpacity={fillOpacity}
+      />
+    </>
+  )
+}