Morph tabs

1"use client";2 3import { useId, useRef, useState } from "react";4import type { KeyboardEvent, ReactNode } from "react";5import { ViewTransitionSafe } from "./ViewTransitionSafe";6import { runViewTransition } from "@/lib/view-transition";7 8export type MorphTabItem = {9  /** Stable value identifying the tab. */10  value: string;11  /** Tab label. */12  label: ReactNode;13  /** Panel content. */14  panel: ReactNode;15  /** Disabled tabs cannot be selected. */16  disabled?: boolean;17};18 19export type MorphTabsProps = {20  items: MorphTabItem[];21  /** Selected value. Pair with onChange for controlled use. */22  value?: string;23  /** Initially selected value for uncontrolled use. */24  defaultValue?: string;25  /** Called when the selection changes. */26  onChange?: (value: string) => void;27  /** Accessible name for the tab list. */28  label?: string;