Toggle Group

1"use client";
2 
3import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
4import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
5import { createContext, useContext } from "react";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8import { selectionFocus } from "@/lib/recipes";
9 
10type ToggleGroupSize = "sm" | "md" | "lg";
11 
12const ToggleGroupSizeContext = createContext<ToggleGroupSize>("md");
13 
14export interface ToggleGroupProps
15  extends Omit<
16    React.ComponentProps<typeof ToggleGroupPrimitive<string>>,
17    "value" | "defaultValue" | "onValueChange" | "multiple"
18  > {
19  /** Active item value (single-select). */
20  value?: string;
21  defaultValue?: string;
22  onValueChange?: (value: string) => void;
23  size?: ToggleGroupSize;
24}
25 
26/** Compact filled single-select control group. */
27export function ToggleGroup({
28  value,
29  defaultValue,
30  onValueChange,
31  size = "md",
32  className,
33  children,
34  ...props
35}: ToggleGroupProps): React.ReactElement {
36  return (
37    <ToggleGroupSizeContext.Provider value={size}>
38      <ToggleGroupPrimitive<string>
39        value={value !== undefined ? [value] : undefined}
40        defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}
41        onValueChange={
42          onValueChange
43            ? (next: string[]) => onValueChange(next[0] ?? "")
44            : undefined
45        }
46        data-slot="toggle-group"
47        data-size={size}
48        className={cn(
49          "inline-flex w-fit self-start items-center gap-0.5 rounded-[var(--radius-8)] bg-fill-1 p-0.5",
50          className,
51        )}
52        {...props}
53      >
54        {children}
55      </ToggleGroupPrimitive>
56    </ToggleGroupSizeContext.Provider>
57  );
58}
59 
60export interface ToggleGroupItemProps
61  extends Omit<React.ComponentProps<typeof TogglePrimitive>, "value"> {
62  value: string;
63}
64 
65export function ToggleGroupItem({
66  value,
67  className,
68  children,
69  ...props
70}: ToggleGroupItemProps): React.ReactElement {
71  const size = useContext(ToggleGroupSizeContext);
72  return (
73    <TogglePrimitive
74      value={value}
75      data-slot="toggle-group-item"
76      className={cn(
77        "relative inline-flex items-center justify-center rounded-[var(--radius-8)] transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)] disabled:pointer-events-none disabled:opacity-50",
78        "text-ink-muted hover:text-ink data-[pressed]:text-ink",
79        "not-data-[pressed]:hover:bg-layer-hover",
80// … truncated