Readout

npx @glasskit-ui/cli add readout

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/readout.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Readout> — a single-value complication: label + value (+ optional * unit). The glanceable archetype — one number legible in a 1–2s glance. * Pure display (styled-only). Tabular numerals on the value. * * `emphasis="primary"` is the brightest value on the screen; reserve it * for the one key value (apple-feel §3 hierarchy-from-luminance). */export function Readout({  label,  value,  unit,  emphasis = "primary",  className,}: {  label: ReactNode;  value: ReactNode;  unit?: ReactNode;  emphasis?: "primary" | "secondary";  className?: string;}) {  return (    <div className={cn("flex flex-col items-center gap-1.5", className)}>      <span className="t-caption uppercase tracking-[0.16em] text-foreground-faint">        {label}      </span>      <span        className={cn(          "flex items-baseline gap-1.5 [font-variant-numeric:tabular-nums]",          emphasis === "primary" ? "t-title" : "t-readout text-muted-foreground",        )}      >        {value}        {unit != null ? (          <span className="t-body text-foreground-faint">{unit}</span>        ) : null}      </span>    </div>  );}