StatGrid

npx @glasskit-ui/cli add stat-grid

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/stat-grid.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";export type Stat = {  label: ReactNode;  value: ReactNode;  unit?: ReactNode;};/** * <StatGrid> — a compact grid of readouts for a multi-metric glance (a watch * "complication cluster"). Pure display, tabular numerals. Keep it to 2–4 cells * — density past that stops being glanceable. */export function StatGrid({  items,  className,}: {  items: Stat[];  className?: string;}) {  return (    <div className={cn("grid w-full grid-cols-2 gap-3", className)}>      {items.map((it, i) => (        <div          key={i}          className="surface flex flex-col items-start gap-1.5 rounded-[20px] p-[18px] text-start"        >          <span className="t-caption uppercase tracking-[0.12em] text-foreground-faint">            {it.label}          </span>          <span className="t-readout font-bold">            {it.value}            {it.unit != null ? (              <span className="text-[16px] text-foreground-faint"> {it.unit}</span>            ) : null}          </span>        </div>      ))}    </div>  );}