Toggle Group

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function Example() {
  return <ToggleGroup />;
}

"use client";

import { forwardRef, createContext, useContext } from "react";
import { cn } from "@/lib/utils";

const ToggleGroupContext = createContext({ value: [], onChange: () => {}, type: "single" });

const ToggleGroup = forwardRef(
  ({ className, type = "single", value, onValueChange, children, ...props }, ref) => {
    const handleChange = (itemValue) => {
      if (type === "single") {
        onValueChange?.(value === itemValue ? "" : itemValue);
      } else {
        const arr = Array.isArray(value) ? value : [];
        onValueChange?.(
          arr.includes(itemValue) ? arr.filter((v) => v !== itemValue) : [...arr, itemValue]
        );
      }
    };

    return (
      <ToggleGroupContext.Provider value={{ value, onChange: handleChange, type }}>
        <div ref={ref} role="group" className={cn("flex items-center gap-1", className)} {...props}>
          {children}
        </div>
      </ToggleGroupContext.Provider>
    );
  }
);
ToggleGroup.displayName = "ToggleGroup";

const ToggleGroupItem = forwardRef(({ className, value: itemValue, children, ...props }, ref) => {
  const { value, onChange, type } = useContext(ToggleGroupContext);
  const pressed = type === "single" ? value === itemValue : (Array.isArray(value) && value.includes(itemValue));

  return (
    <button
      ref={ref}
      type="button"
      role="radio"
      aria-pressed={pressed}
      onClick={() => onChange(itemValue)}
      className={cn(
        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors h-9 px-3 cursor-pointer",
        "hover:bg-muted hover:text-muted-foreground",
        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
        "disabled:pointer-events-none disabled:opacity-50",
        pressed && "bg-accent text-accent-foreground",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
});
ToggleGroupItem.displayName = "ToggleGroupItem";

export { ToggleGroup, ToggleGroupItem };