@zerodev/react-ui 0.0.3 → 0.0.4

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

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