toggle-group

1"use client"
2 
3import * as React from "react"
4 
5import { ToggleGroup as ToggleGroupPrimitive } from "@ark-ui/react/toggle-group"
6import type { VariantProps } from "class-variance-authority"
7 
8import { toggleVariants } from "@/components/ui/toggle"
9import { cn } from "@/lib/utils"
10 
11const ToggleGroupExtendContext = React.createContext<
12  VariantProps<typeof toggleVariants>
13>({
14  size: "default",
15  variant: "default",
16})
17 
18const ToggleGroup = React.forwardRef<
19  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
20  ToggleGroupPrimitive.RootProps & VariantProps<typeof toggleVariants>
21>(({ className, variant, size, children, ...props }, ref) => (
22  <ToggleGroupPrimitive.Root
23    ref={ref}
24    data-variant={variant}
25    data-size={size}
26    className={cn(
27      "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
28      className
29    )}
30    {...props}
31  >
32    <ToggleGroupExtendContext.Provider value={{ variant, size }}>
33      {children}
34    </ToggleGroupExtendContext.Provider>
35  </ToggleGroupPrimitive.Root>
36))
37ToggleGroup.displayName = "ToggleGroup"
38 
39const ToggleGroupContext = ToggleGroupPrimitive.Context
40 
41const ToggleGroupItem = React.forwardRef<
42  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
43  ToggleGroupPrimitive.ItemProps & VariantProps<typeof toggleVariants>
44>(({ className, variant, size, ...props }, ref) => {
45  const context = React.useContext(ToggleGroupExtendContext)
46 
47  return (
48    <ToggleGroupPrimitive.Item
49      ref={ref}
50      data-variant={context.variant || variant}
51      data-size={context.size || size}
52      className={cn(
53        toggleVariants({
54          variant: context.variant || variant,
55          size: context.size || size,
56        }),
57        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
58        className
59      )}
60      {...props}
61    />
62  )
63})
64ToggleGroupItem.displayName = "ToggleGroupItem"
65 
66const ToggleGroupRootProvider = ToggleGroupPrimitive.RootProvider
67 
68export {
69  ToggleGroup,
70  ToggleGroupContext,
71  ToggleGroupItem,
72  ToggleGroupRootProvider,
73}
74 
75export {
76  useToggleGroup,
77  useToggleGroupContext,
78  type ToggleGroupValueChangeDetails,
79} from "@ark-ui/react/toggle-group"