CallCard

npx @glasskit-ui/cli add call-card

npm install @glasskit-ui/react

// components/lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export type { ClassValue };/** * Merge class names the shadcn way: clsx joins conditionals, tailwind-merge * de-dupes conflicting Tailwind utilities so a consumer's `className` override * wins (e.g. passing `px-2` beats the component's `px-6`). Lens components are * Tailwind utilities + `--gk-*` tokens, so this de-dupe matters. */export function cn(...inputs: ClassValue[]): string {  return twMerge(clsx(inputs));}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/call-card.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <CallCard> — an incoming / active call: a big avatar, caller name, a status * line ("Incoming…", "02:14"), and an action row (accept / decline via * D-pad-focusable <Button>s). Drop it into a <Screen> stage. */export function CallCard({  avatar,  name,  status,  actions,  className,}: {  /** A large <Avatar>. */  avatar?: ReactNode;  name: ReactNode;  /** "Incoming call", a running timer, etc. */  status?: ReactNode;  /** Accept / decline buttons. */  actions?: ReactNode;  className?: string;}) {  return (    <div      className={cn(        "flex flex-col items-center gap-3.5 text-center",        className,      )}    >      {avatar != null ? <span>{avatar}</span> : null}      <span className="t-title font-bold">{name}</span>      {status != null ? (        <span className="t-body text-muted-foreground">{status}</span>      ) : null}      {actions != null ? (        <div className="mt-3 flex gap-7">{actions}</div>      ) : null}    </div>  );}