@zerodev/wallet-react-ui 0.0.4 → 0.0.5

package/src/shared/components/Screen/index.tsx

@@ -1,85 +0,0 @@
-import { cn } from '@zerodev/react-ui'
-import type { CSSProperties, ReactNode } from 'react'
-import { TOP_NAV_HEIGHT } from '../TopNav'
-import {
-  CardGlow,
-  MultiRadialBackground,
-  WrapperBorder,
-} from './MultiRadialBackground'
-
-const CONTENT_PADDING_TOP = TOP_NAV_HEIGHT + 16
-
-export function Screen({
-  children,
-  className,
-  contentClassName,
-  size = 'lg',
-  style,
-  topNav,
-}: {
-  children: ReactNode
-  className?: string | undefined
-  contentClassName?: string | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  style?: CSSProperties | undefined
-  topNav?: ReactNode
-}) {
-  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
-        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"
-            // 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))`,
-            }}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/shared/components/TopNav/index.tsx

@@ -1,48 +0,0 @@
-import { cn, IconButton, Text } from '@zerodev/react-ui'
-import type { ReactNode } from 'react'
-
-export const TOP_NAV_HEIGHT = 52
-
-export function TopNav({
-  onBack,
-  onClose,
-  title,
-  logo,
-  className,
-}: {
-  onBack?: () => void
-  onClose: () => void
-  title?: string
-  logo?: ReactNode
-  className?: string
-}) {
-  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))` }}
-    >
-      {onBack ? (
-        <IconButton iconName="chevronLeft" onClick={onBack} />
-      ) : (
-        <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>
-      )}
-      <IconButton iconName="x" onClick={onClose} />
-    </div>
-  )
-}