Segmented control

1"use client";2 3import { useId, useState, type HTMLAttributes, type ReactNode } from "react";4 5export type SegmentedControlOption = {6  /** Stable value reported to onChange. */7  value: string;8  /** Visible label. Keep it to one or two words. */9  label: ReactNode;10  /** Decorative glyph shown before the label. */11  icon?: ReactNode;12  /** Count shown after the label. The number is informational, not a choice. */13  count?: number;14  /** A disabled option cannot be selected. */15  disabled?: boolean;16  /** Extra context for assistive technology when the visible label is short. */17  description?: string;18  /** Accessible name for an option whose visible label is an icon alone. */19  ariaLabel?: string;20};21 22export type SegmentedControlProps = Omit<23  HTMLAttributes<HTMLDivElement>,24  "children" | "onChange" | "defaultValue"25> & {26  /** Accessible name for the group of options. */27  label: string;28  /** The options, in reading order. */