Blob Selector

"use client";

import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react";
import { cn } from "@/lib/utils";

// Segmented control with a liquid pill. The pill's two edges spring
// separately: the leading edge snaps toward the new segment and the trailing
// edge lags behind, so the pill stretches across and then gathers itself up.
// While it's stretched it thins out, as if keeping its volume, and fills back
// out as it settles. Pressing squeezes it; pressing and dragging scrubs the
// liquid across the segments, and the choice is made on release.
//
// Labels never move or scale. A second copy of the row in the selected
// colours sits on top, clipped to the pill's shape, so the text changes colour
// exactly where the liquid covers it.
//
// It's a radio group: Tab lands on the selected segment, arrows move the
// choice, Home and End jump to the ends.

export type BlobOption = string | { value: string; label: ReactNode; icon?: ReactNode; disabled?: boolean };

export type BlobSelectorProps = {
  options: readonly BlobOption[];