StatusDot

npx @glasskit-ui/cli add status-dot

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/status-dot.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <StatusDot> — a glanceable sensor / permission / connection indicator. The * lens has one accent, so state reads from luminance + motion, not a second * hue: `on` = steady accent, `live` = pulsing accent, `off` = dim. */export function StatusDot({  status = "on",  label,  className,}: {  /** Semantic state — live pulses, off dims. */  status?: "on" | "live" | "off";  label?: ReactNode;  className?: string;}) {  return (    <span      className={cn(        "inline-flex items-center gap-2",        `gk-statusdot--${status}`,        className,      )}    >      <span className="gk-statusdot__dot" />      {label != null ? (        <span className="t-caption text-muted-foreground">{label}</span>      ) : null}    </span>  );}