"use client";
import * as React from "react";
import * as G from "@radix-ui/react-toggle-group";
import { motion } from "motion/react";
import type { VariantProps } from "class-variance-authority";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";
import { toggleVariants } from "@/components/ui/toggle";

type Size = VariantProps<typeof toggleVariants>["size"];
const Ctx = React.createContext<{ single: boolean; value?: string; id: string; size: Size }>({ single: false, id: "", size: "default" });

/**
 * Same API as Radix ToggleGroup, sitting in a sunken track.
 * With type="single" the active item gets a pill that slides between items.
 */
export function ToggleGroup(props: React.ComponentProps<typeof G.Root> & { size?: Size }) {
  const id = React.useId();
  const cls = cn("inline-flex items-center gap-1 rounded-full bg-surface-sunken p-1.5 shadow-well", props.className);
  const [inner, setInner] = React.useState(props.type === "single" ? props.defaultValue : undefined);
  if (props.type === "single") {
    const { value, defaultValue: _d, onValueChange, size = "default", className: _c, ...p } = props;
    void _d;
    void _c;
    const current = value ?? inner;
    return (
      <Ctx.Provider value={{ single: true, value: current, id, size }}>
        <G.Root
          {...p}
          type="single"
          value={current ?? ""}
          onValueChange={(v) => {
            setInner(v);
            onValueChange?.(v);
          }}
          className={cls}
        />
      </Ctx.Provider>
    );
  }
  const { size = "default", className: _c, ...p } = props;
  void _c;
  return (
    <Ctx.Provider value={{ single: false, id, size }}>
      <G.Root {...p} className={cls} />
    </Ctx.Provider>
  );
}

export function ToggleGroupItem({ className, value, children, ...p }: React.ComponentProps<typeof G.Item>) {
  const ctx = React.useContext(Ctx);
  const active = ctx.single && ctx.value === value;
  return (
    <G.Item
      value={value}
      className={cn(
        toggleVariants({ size: ctx.size }),
        "relative hover:bg-transparent hover:text-on-surface",
        ctx.single
          ? "data-[state=on]:bg-transparent data-[state=on]:text-on-primary data-[state=on]:shadow-none"
          : "data-[state=on]:bg-primary data-[state=on]:text-on-primary data-[state=on]:shadow-clay-sm",
        className
      )}
      {...p}
    >
      {active && (
        <motion.span layoutId={`${ctx.id}-pill`} className="absolute inset-0 rounded-full bg-primary shadow-clay-sm" transition={springs.snappy} />
      )}
      <span className="relative inline-flex items-center gap-2">{children}</span>
    </G.Item>
  );
}
Installation
