Segmented

npx @glasskit-ui/cli add segmented

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/segmented.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";export type SegmentedOption<T extends string | number> = {  value: T;  label: ReactNode;};/** * <Segmented> — pick one of a few options (a watchOS-style segmented control). * Each segment is a D-pad-focusable radio; the selected one lifts with the * accent. Controlled: pass `value` + `onChange`. Keep it to 2–4 options on * the lens. */export function Segmented<T extends string | number>({  options,  value,  onChange,  label,  className,}: {  options: SegmentedOption<T>[];  value: T;  onChange?: (next: T) => void;  /** Accessible name for the group (e.g. "View mode"). */  label?: string;  className?: string;}) {  return (    // A single connected track (one surface) with the segments joined inside,    // so it reads as one control, not separate buttons (watchOS style).    <div      role="radiogroup"      aria-label={label}      className={cn("surface inline-flex gap-1 rounded-full p-1", className)}    >      {options.map((o) => {        const on = o.value === value;        return (          <button            key={String(o.value)}            type="button"            role="radio"            aria-checked={on}            onClick={onChange ? () => onChange(o.value) : undefined}            className={cn(              "focusable press-scale t-body rounded-full px-5 py-3",              // On = the filled accent pill; off = transparent, just the label.              on                ? "btn-primary"                : "border-0 bg-transparent text-muted-foreground",            )}          >            {o.label}          </button>        );      })}    </div>  );}