@zerodev/react-ui 0.0.2 → 0.0.4

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}
+      />
+    </>
+  )
+}

package/src/components/Screen/MultiRadialBackground.tsx

@@ -0,0 +1,323 @@
+import { useId } from 'react'
+
+import { EllipticalRadial, type RadialLayer } from './EllipticalRadial'
+
+// The design frame: the gradient layers live on a 412×812 rect offset to
+// (-6,-6) so they bleed 6px past the 400×800 card on every side — that 6px
+// reveal is the wrapper's gradient border. The matrices below are the
+// Figma-exported gradientTransform values verbatim, so rendering the SVG with
+// a matching viewBox + preserveAspectRatio="none" reproduces the design 1:1
+// while still scaling to any container size.
+const FRAME_VIEWBOX = '-6 -6 412 812'
+
+export function MultiRadialBackground() {
+  // The colorful gradient now lives entirely in CardGlow. This base layer is
+  // just a flat, soft warm-white fill behind it so CardGlow's colors read
+  // bright and clean, with no gray muddiers underneath.
+  return (
+    <div className="zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox={FRAME_VIEWBOX}
+        preserveAspectRatio="none"
+        role="img"
+        aria-label="Decorative gradient background"
+      >
+        <rect x="-6" y="-6" width="412" height="812" fill="#FBF7F2" />
+      </svg>
+    </div>
+  )
+}
+
+// On-card overlay (400×800), sitting ON TOP of the translucent card body so its
+// color reads at full strength (the card at 0.8 opacity would otherwise wash a
+// behind-card gradient to ~20%). This reproduces the vivid orange + blue that in
+// the source design came from the decorative "Amorphic" blob raster overlaid on
+// the lower card, plus the design's own white card glow (Figma paint6).
+//
+// The orange + blue lobes are NOT verbatim Figma layers — they reconstruct the
+// blob's measured color footprint (orange across the lower card; blue lobe
+// bottom-left ~x 0-150 / y 600-800) as gradients, per the decision to treat the
+// blob as a background effect rather than ship the raster.
+export function CardGlow() {
+  const baseId = useId()
+  // VERBATIM from the Figma `--Background-Brand-Gradient` token (6 stacked
+  // radial-gradients). CSS lists topmost-first; SVG paints last-on-top, so the
+  // array is the CSS list REVERSED. Each matrix is the CSS `rx% ry% at cx% cy%`
+  // converted over the 400×800 frame. An upward linear fade is applied on top
+  // (see the <rect> below) to soften the gradient toward the top.
+  const layers: RadialLayer[] = [
+    {
+      // (CSS #6) blue → top-right. x-radius widened so the lobe reaches further
+      // left; y-radius kept short so it stays up top and doesn't bleed into the
+      // orange band.
+      id: `${baseId}-blue`,
+      matrix: [1850, 0, 0, 645, 381.44, 0],
+      fillOpacity: 1,
+      stops: [
+        { offset: 0, color: '#45ABFB', opacity: 0.66 },
+        { offset: 0.4615, color: '#1E9AFB', opacity: 0.35 },
+        { offset: 1, color: '#45ABFB', opacity: 0 },
+      ],
+    },
+    {
+      // (CSS #5) offWhite → blue, very faint
+      id: `${baseId}-offwhite-tr`,
+      matrix: [55.28, 0, 0, 773.36, 386.68, 13.28],
+      fillOpacity: 1,
+      stops: [
+        { offset: 0, color: '#F7F5F0', opacity: 0.1 },
+        { offset: 1, color: '#45ABFB', opacity: 0 },
+      ],
+    },
+    {
+      // (CSS #4) warmGrey
+      id: `${baseId}-warmgrey`,
+      matrix: [326.72, 0, 0, 855.52, 0, 50.32],
+      fillOpacity: 1,
+      stops: [
+        { offset: 0, color: '#E3CFC3', opacity: 1 },
+        { offset: 1, color: '#E3CFC3', opacity: 0 },
+      ],
+    },
+    {
+      // (CSS #3) orange — spans the full width across the bottom ~30%, uniform.
+      id: `${baseId}-orange`,
+      matrix: [580, 0, 0, 380, 200, 835],
+      fillOpacity: 1,
+      stops: [
+        { offset: 0, color: '#EE6C2E', opacity: 0.8 },
+        { offset: 0.55, color: '#EE6C2E', opacity: 0.6 },
+        { offset: 1, color: '#EE6C2E', opacity: 0.15 },
+      ],
+    },
+    {
+      // (CSS #2) peach — spread further up (~30% of the bottom), a bit more vivid
+      id: `${baseId}-peach`,
+      matrix: [520, 0, 0, 560, 180, 830],
+      fillOpacity: 1,
+      stops: [
+        { offset: 0, color: '#FAC8AC', opacity: 1 },
+        { offset: 1, color: '#F27B3E', opacity: 0 },
+      ],
+    },
+    {
+      // (CSS #1) white glow (topmost of the colour stack)
+      id: `${baseId}-white-bl`,
+      matrix: [90.72, 0, 0, 550.48, 38.04, 702.64],
+      fillOpacity: 1,
+      stops: [
+        { offset: 0, color: 'white', opacity: 0.58 },
+        { offset: 1, color: 'white', opacity: 0 },
+      ],
+    },
+  ]
+
+  return (
+    <div className="zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 400 800"
+        preserveAspectRatio="none"
+        role="presentation"
+      >
+        {layers.map((layer) => (
+          <EllipticalRadial
+            key={layer.id}
+            layer={layer}
+            rect={{ x: 0, y: 0, width: 400, height: 800 }}
+          />
+        ))}
+        {/* Vertical white fade — strongest at the bottom, easing linearly to
+            nothing at the top. Softens the lower (most vivid) part of the
+            gradient. A gradient layer (not an opaque card) so the frosted
+            buttons composite over it cleanly. */}
+        <defs>
+          <linearGradient
+            id={`${baseId}-vfade`}
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="800"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="white" stopOpacity="0.55" />
+            <stop offset="0.45" stopColor="white" stopOpacity="0.52" />
+            <stop offset="0.65" stopColor="white" stopOpacity="0.5" />
+            <stop offset="0.85" stopColor="white" stopOpacity="0.5" />
+            <stop offset="1" stopColor="white" stopOpacity="0.5" />
+          </linearGradient>
+        </defs>
+        <rect
+          x="0"
+          y="0"
+          width="400"
+          height="800"
+          fill={`url(#${baseId}-vfade)`}
+        />
+        {/* Blue — a diagonal linear gradient from the bottom-left corner fading
+            to transparent toward the top-right, so it blends smoothly into the
+            orange with no hard edge. On top of the fade so #A7B8E2 reads true. */}
+        <defs>
+          <linearGradient
+            id={`${baseId}-bluefade`}
+            x1="0"
+            y1="800"
+            x2="120"
+            y2="640"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="#A7B8E2" stopOpacity="1" />
+            <stop offset="0.33" stopColor="#A7B8E2" stopOpacity="0.7" />
+            <stop offset="0.66" stopColor="#A7B8E2" stopOpacity="0.35" />
+            <stop offset="1" stopColor="#A7B8E2" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <rect
+          x="0"
+          y="0"
+          width="400"
+          height="800"
+          fill={`url(#${baseId}-bluefade)`}
+        />
+      </svg>
+    </div>
+  )
+}
+
+// The wrapper's gradient BORDER. Renders full-frame behind the inner card; the
+// card sits on top with a 6px margin so this gradient shows as the border ring.
+// Uses normalized cx/cy/rx/ry radial gradients (scale-transform) over a #130E0B
+// base — the original border look.
+type BorderLayer = {
+  id: string
+  cx: number
+  cy: number
+  rx: number
+  ry: number
+  stops: { offset: number; color: string; opacity: number }[]
+}
+
+export function WrapperBorder() {
+  const baseId = useId()
+  // VERBATIM from the Figma `--Background-Brand-Gradient` token (6 stacked
+  // radial-gradients). CSS lists topmost-first, SVG paints last-on-top, so the
+  // array is the CSS list REVERSED. Each CSS `rx% ry% at cx% cy%` maps to
+  // normalized cx/cy/rx/ry (÷100); the inline <radialGradient> below applies
+  // the cx=(cx/rx)*100% + scale(rx,ry) convention.
+  const layers: BorderLayer[] = [
+    {
+      id: `${baseId}-g6`, // (CSS #6) blue, top-right
+      cx: 0.9536,
+      cy: 0.0,
+      rx: 0.9385,
+      ry: 1.2256,
+      stops: [
+        { offset: 0, color: '#45ABFB', opacity: 0.6 },
+        { offset: 0.4615, color: '#1E9AFB', opacity: 0.32 },
+        { offset: 1, color: '#45ABFB', opacity: 0 },
+      ],
+    },
+    {
+      id: `${baseId}-g5`, // (CSS #5) faint light, top-right
+      cx: 0.9667,
+      cy: 0.0166,
+      rx: 0.1382,
+      ry: 0.9667,
+      stops: [
+        { offset: 0, color: '#F7F5F0', opacity: 0.1 },
+        { offset: 1, color: '#45ABFB', opacity: 0 },
+      ],
+    },
+    {
+      id: `${baseId}-g4`, // (CSS #4) warm grey, top-left
+      cx: 0.0,
+      cy: 0.0629,
+      rx: 0.8168,
+      ry: 1.0694,
+      stops: [
+        { offset: 0, color: '#E3CFC3', opacity: 1 },
+        { offset: 1, color: '#E3CFC3', opacity: 0 },
+      ],
+    },
+    {
+      id: `${baseId}-g3`, // (CSS #3) orange, bottom-left
+      cx: 0.0393,
+      cy: 1.0,
+      rx: 1.0628,
+      ry: 1.0303,
+      stops: [
+        { offset: 0, color: '#FF6B1F', opacity: 1 },
+        { offset: 0.476, color: '#E76000', opacity: 0.72 },
+        { offset: 1, color: '#E76000', opacity: 0 },
+      ],
+    },
+    {
+      id: `${baseId}-g2`, // (CSS #2) peach, bottom-center
+      cx: 0.3476,
+      cy: 1.0,
+      rx: 0.9614,
+      ry: 0.338,
+      stops: [
+        { offset: 0, color: '#FAC8AC', opacity: 0.7 },
+        { offset: 1, color: '#F27B3E', opacity: 0 },
+      ],
+    },
+    {
+      id: `${baseId}-g1`, // (CSS #1) white glow, bottom-left
+      cx: 0.0951,
+      cy: 0.8783,
+      rx: 0.2268,
+      ry: 0.6881,
+      stops: [
+        { offset: 0, color: '#FFFFFF', opacity: 0.58 },
+        { offset: 1, color: '#FFFFFF', opacity: 0 },
+      ],
+    },
+  ]
+
+  return (
+    <div className="zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden">
+      <svg
+        width="100%"
+        height="100%"
+        preserveAspectRatio="none"
+        role="presentation"
+      >
+        <rect width="100%" height="100%" fill="#130E0B" />
+        <defs>
+          {layers.map((layer) => (
+            <radialGradient
+              key={layer.id}
+              id={layer.id}
+              cx={`${(layer.cx / layer.rx) * 100}%`}
+              cy={`${(layer.cy / layer.ry) * 100}%`}
+              r="100%"
+              gradientUnits="objectBoundingBox"
+              gradientTransform={`scale(${layer.rx}, ${layer.ry})`}
+            >
+              {layer.stops.map((s, i) => (
+                <stop
+                  key={s.color + i.toString()}
+                  offset={s.offset}
+                  stopColor={s.color}
+                  stopOpacity={s.opacity}
+                />
+              ))}
+            </radialGradient>
+          ))}
+        </defs>
+        {layers.map((layer) => (
+          <rect
+            key={`${layer.id}-rect`}
+            width="100%"
+            height="100%"
+            fill={`url(#${layer.id})`}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}