Readout

npx @glasskit-ui/cli add readout

npm install @glasskit-ui/react

// components/lib/utils.tsexport type ClassValue = string | number | null | undefined | false;/** * Join truthy class names. Dependency-free on purpose: the lens components * style via bespoke semantic classes (no conflicting Tailwind utilities to * de-dupe), so this needs no clsx/tailwind-merge and resolves from anywhere * the registry is vendored. */export function cn(...inputs: ClassValue[]): string {  return inputs.filter(Boolean).join(" ");}/** * 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(        "gk-readout",        emphasis === "secondary" && "gk-readout--secondary",        className,      )}    >      <span className="gk-readout__label t-caption">{label}</span>      <span        className={cn(          "gk-readout__value",          emphasis === "primary" ? "t-title" : "t-readout",        )}      >        {value}        {unit != null ? (          <span className="gk-readout__unit t-body">{unit}</span>        ) : null}      </span>    </div>  );}