Toggle Group

1import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
2
3<ToggleGroup />

1"use client";
2
3import {
4  ToggleGroup as ArkToggleGroup,
5  useToggleGroupContext as useArkToggleGroupContext,
6} from "@ark-ui/react/toggle-group";
7import React from "react";
8import { tv } from "tailwind-variants";
9import { cn } from "@/lib/utils";
10import { Toggle, type ToggleProps } from "@/registry/react/components/toggle";
11
12export const useToggleGroup = useArkToggleGroupContext;
13
14type ToggleGroupContextProps = Pick<ToggleProps, "variant" | "size"> & {
15  /**
16   * Gap between items.
17   *
18   * @default 0
19   */
20  spacing?: number;
21};
22
23const ToggleGroupContext = React.createContext({} as ToggleGroupContextProps);
24
25interface ToggleGroupProps
26  extends React.ComponentProps<typeof ArkToggleGroup.Root>,
27    ToggleGroupContextProps {}
28