@zerodev/react-ui 0.0.3 → 0.0.4

package/src/components/TokenListItem/index.tsx

@@ -0,0 +1,192 @@
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'
+
+import { cn } from '../../utils/common'
+import { Icon, type IconName } from '../Icon'
+import { Text } from '../Text'
+
+export type TokenListItemIconVariant = 'token' | 'network'
+
+interface CommonProps {
+  /** Primary text — usually a token symbol like "ETH". */
+  symbol: string
+  /** Subtitle text under the symbol (e.g. "3 networks" or "Arbitrum"). */
+  subtitle?: string
+  /** Kit `Icon` name for the main slot (preferred for known chains/tokens). */
+  iconName?: IconName
+  /** URL of the main icon image (token logo). Used when `iconName` is absent. */
+  imageSource?: string
+  /** Kit `Icon` name rendered inline before the subtitle text (e.g. chain logo). */
+  subtitleIcon?: IconName
+  /** Right-aligned value (e.g. "$0.00"). */
+  value?: string
+  /** Right-aligned percentage change. Coloured green by default, red when
+   * the string starts with a leading "-". */
+  change?: string
+  /** Shape of the main icon. `'token'` = 44x44 rounded square (default),
+   * `'network'` = 36x36 circle. */
+  iconVariant?: TokenListItemIconVariant
+  /** Render a skeleton placeholder instead of the content. */
+  loading?: boolean
+}
+
+export type TokenListItemProps = CommonProps &
+  (
+    | ({ onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'] } & Omit<
+        ButtonHTMLAttributes<HTMLButtonElement>,
+        keyof CommonProps | 'children'
+      >)
+    | ({ onClick?: undefined } & Omit<
+        HTMLAttributes<HTMLDivElement>,
+        keyof CommonProps | 'children'
+      >)
+  )
+
+function IconBlock({
+  iconName,
+  imageSource,
+  variant,
+}: {
+  iconName?: IconName
+  imageSource?: string
+  variant: TokenListItemIconVariant
+}) {
+  const isNetwork = variant === 'network'
+  return (
+    <div
+      className={cn(
+        'zd:shrink-0 zd:bg-white zd:flex zd:items-center zd:justify-center zd:overflow-hidden',
+        isNetwork
+          ? 'zd:w-9 zd:h-9 zd:rounded-full'
+          : 'zd:w-11 zd:h-11 zd:rounded-2xl',
+      )}
+    >
+      {iconName ? (
+        <Icon name={iconName} className="zd:w-6 zd:h-6" />
+      ) : imageSource ? (
+        <img
+          src={imageSource}
+          alt=""
+          className="zd:w-6 zd:h-6 zd:object-contain"
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function TokenListItemSkeleton({
+  className,
+}: {
+  className?: string | undefined
+}) {
+  return (
+    <div
+      className={cn(
+        'zd:w-full zd:p-2 zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2',
+        className,
+      )}
+    >
+      <div className="zd:flex zd:flex-row zd:items-center zd:gap-2 zd:min-w-0">
+        <div className="zd:w-11 zd:h-11 zd:shrink-0 zd:rounded-2xl zd:bg-greyScale/15 zd:animate-skel-pulse" />
+        <div className="zd:flex zd:flex-col zd:gap-2">
+          <div className="zd:h-3 zd:w-14 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+          <div className="zd:h-3 zd:w-10 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+        </div>
+      </div>
+      <div className="zd:flex zd:flex-col zd:items-end zd:gap-2 zd:shrink-0">
+        <div className="zd:h-3 zd:w-12 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+        <div className="zd:h-3 zd:w-10 zd:rounded-md zd:bg-greyScale/15 zd:animate-skel-pulse" />
+      </div>
+    </div>
+  )
+}
+
+export function TokenListItem({
+  symbol,
+  subtitle,
+  iconName,
+  imageSource,
+  subtitleIcon,
+  value,
+  change,
+  iconVariant = 'token',
+  loading = false,
+  className,
+  onClick,
+  ...rest
+}: TokenListItemProps) {
+  if (loading) return <TokenListItemSkeleton className={className} />
+
+  const changeColor = change?.startsWith('-')
+    ? 'zd:text-negative'
+    : 'zd:text-positive'
+
+  const content = (
+    <>
+      <div className="zd:flex zd:flex-row zd:items-center zd:gap-2 zd:min-w-0">
+        <IconBlock
+          {...(iconName && { iconName })}
+          {...(imageSource && { imageSource })}
+          variant={iconVariant}
+        />
+        <div className="zd:flex zd:flex-col zd:items-start zd:gap-2 zd:min-w-0">
+          <Text className="zd:text-body1 zd:truncate">{symbol}</Text>
+          {subtitle && (
+            <div className="zd:flex zd:flex-row zd:items-center zd:gap-1 zd:min-w-0">
+              {subtitleIcon && (
+                <span className="zd:inline-flex zd:w-3 zd:h-3 zd:rounded-full zd:bg-offWhite/50 zd:overflow-hidden zd:shrink-0 zd:items-center zd:justify-center">
+                  <Icon name={subtitleIcon} className="zd:w-full zd:h-full" />
+                </span>
+              )}
+              <Text className="zd:text-body3 zd:text-greyScale/50 zd:truncate">
+                {subtitle}
+              </Text>
+            </div>
+          )}
+        </div>
+      </div>
+      {(value || change) && (
+        <div className="zd:flex zd:flex-col zd:items-end zd:gap-2 zd:shrink-0">
+          {value && <Text className="zd:text-body1 zd:truncate">{value}</Text>}
+          {change && (
+            <Text className={cn('zd:text-body3 zd:truncate', changeColor)}>
+              {change}
+            </Text>
+          )}
+        </div>
+      )}
+    </>
+  )
+
+  const baseClassName = cn(
+    'zd:w-full zd:p-2 zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2 zd:text-left',
+    className,
+  )
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          baseClassName,
+          'zd:transition-colors zd:rounded-xl',
+          (rest as ButtonHTMLAttributes<HTMLButtonElement>).disabled
+            ? 'zd:opacity-50 zd:cursor-not-allowed'
+            : 'zd:cursor-pointer zd:hover:bg-offWhite/40',
+        )}
+        {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return (
+    <div
+      className={baseClassName}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
+      {content}
+    </div>
+  )
+}

package/src/components/TopNav/index.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import { cn } from '../../utils/common'
+import type { IconName } from '../Icon'
+import { IconButton } from '../IconButton'
+import { Text } from '../Text'
+
+export const TOP_NAV_HEIGHT = 52
+
+export interface TopNavProps {
+  /** Handler for the left icon button. When omitted, the left slot renders
+   * an empty spacer so the title/logo stays centred. */
+  onLeftButtonClick?: () => void
+  /** Handler for the right icon button. When omitted, the right slot
+   * renders an empty spacer. */
+  onRightButtonClick?: () => void
+  /** Icon rendered in the left slot. Defaults to `'chevronLeft'` (back). */
+  leftButtonIcon?: IconName
+  /** Icon rendered in the right slot. Defaults to `'x'` (close). */
+  rightButtonIcon?: IconName
+  title?: string
+  logo?: ReactNode
+  className?: string
+}
+
+export function TopNav({
+  onLeftButtonClick,
+  onRightButtonClick,
+  leftButtonIcon = 'chevronLeft',
+  rightButtonIcon = 'x',
+  title,
+  logo,
+  className,
+}: TopNavProps) {
+  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))` }}
+    >
+      {onLeftButtonClick ? (
+        <IconButton iconName={leftButtonIcon} onClick={onLeftButtonClick} />
+      ) : (
+        <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>
+      )}
+      {onRightButtonClick ? (
+        <IconButton iconName={rightButtonIcon} onClick={onRightButtonClick} />
+      ) : (
+        <div className="zd:h-13 zd:w-13" />
+      )}
+    </div>
+  )
+}

package/src/components/Wrapper/index.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react'
+import type { HTMLAttributes, PropsWithChildren, Ref } from 'react'
 
 import { cn } from '../../utils/common'
 
@@ -6,6 +6,7 @@ export type WrapperVariant = 'ghost' | 'soft' | 'solid'
 
 export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
   variant?: WrapperVariant
+  ref?: Ref<HTMLDivElement> | undefined
 }
 
 function getBackgroundAlpha(variant: WrapperVariant): number {
@@ -23,6 +24,7 @@ export function Wrapper({
   className,
   children,
   variant = 'soft',
+  ref,
   ...rest
 }: PropsWithChildren<WrapperProps>) {
   const backgroundAlpha = getBackgroundAlpha(variant)
@@ -30,6 +32,7 @@ export function Wrapper({
 
   return (
     <div
+      ref={ref}
       className={cn(
         'zd:overflow-hidden zd:border-offWhite zd:border-[0.3px] zd:backdrop-blur-[15px]',
         className,

package/src/index.ts

@@ -9,6 +9,12 @@ export {
   ArrowView,
 } from './components/ArrowCardPair'
 export { Badge, type BadgeProps } from './components/Badge'
+export {
+  BottomSheet,
+  BottomSheetClose,
+  BottomSheetContent,
+  BottomSheetTitle,
+} from './components/BottomSheet'
 export { Button, type ButtonProps } from './components/Button'
 export { Callout, type CalloutProps } from './components/Callout'
 export {
@@ -27,11 +33,38 @@ export { IconButton, type IconButtonProps } from './components/IconButton'
 export { Input, type InputProps } from './components/Input'
 export {
   ListItem,
+  ListItemChevron,
+  ListItemIcon,
+  type ListItemIconProps,
   type ListItemProps,
   ListItemSkeleton,
 } from './components/ListItem'
+export {
+  Pill,
+  type PillProps,
+  PillSkeleton,
+} from './components/Pill'
+export { PoweredBy } from './components/PoweredBy'
+export { Screen } from './components/Screen'
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectItemText,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './components/Select'
 export { Switch, type SwitchProps } from './components/Switch'
 export { Text, type TextProps } from './components/Text'
+export {
+  TokenListItem,
+  type TokenListItemIconVariant,
+  type TokenListItemProps,
+} from './components/TokenListItem'
+export { TopNav, type TopNavProps } from './components/TopNav'
 export {
   WrappedPressable,
   type WrappedPressableProps,

package/tailwind.config.ts

@@ -57,6 +57,45 @@ const config: Config = {
         mono: undefined,
         roboto: ['Roboto', 'sans-serif'],
       },
+      // Sheet / overlay animations bound to Radix's `data-state=open|closed`
+      // attributes. Defined here (not in the CSS) so downstream packages that
+      // `@config` this file inherit them without duplication.
+      keyframes: {
+        'sheet-in': {
+          from: { transform: 'translateY(100%)' },
+          to: { transform: 'translateY(0)' },
+        },
+        'sheet-out': {
+          from: { transform: 'translateY(0)' },
+          to: { transform: 'translateY(100%)' },
+        },
+        'backdrop-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'backdrop-out': {
+          from: { opacity: '1' },
+          to: { opacity: '0' },
+        },
+        // Gentle opacity pulse for loading skeletons — softer than Tailwind's
+        // default `pulse` (which dips to 50% and looks jittery on greys).
+        'skel-pulse': {
+          '0%, 100%': { opacity: '0.65' },
+          '50%': { opacity: '1' },
+        },
+        'popper-in': {
+          from: { opacity: '0', transform: 'scale(0.97) translateY(-3px)' },
+          to: { opacity: '1', transform: 'scale(1) translateY(0)' },
+        },
+      },
+      animation: {
+        'sheet-in': 'sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards',
+        'sheet-out': 'sheet-out 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards',
+        'backdrop-in': 'backdrop-in 200ms ease-out forwards',
+        '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',
+      },
     },
   },
   plugins: [],