36:T33dd,

"use client"

import { createContext, useContext } from "react"
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
import type { VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

type Variants = VariantProps<typeof toggleVariants>

const ToggleGroupContext = createContext<Variants>({})

const ToggleGroup = ({
  className,
  variant,
  size,
  children,
  ...props
}: ToggleGroupPrimitive.Props & Variants) => (
  <ToggleGroupPrimitive
    data-slot="toggle-group"
    className={cn(
      "flex w-fit items-center gap-4 rounded-full bg-background-tertiary p-4 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
      className
    )}
    {...props}
  >
    <ToggleGroupContext value={{ variant, size }}>
      {children}
    </ToggleGroupContext>
  </ToggleGroupPrimitive>
)

const ToggleGroupItem = ({
  className,
  variant,
  size,
  ...props
}: TogglePrimitive.Props & Variants) => {
  const context = useContext(ToggleGroupContext)
  return (
    <TogglePrimitive
      data-slot="toggle-group-item"
      className={cn(
        toggleVariants({
          variant: context.variant ?? variant,
          size: context.size ?? size ?? "sm",
        }),
        "h-28 min-w-28 px-8 data-pressed:bg-background-primary data-pressed:shadow-xs data-pressed:backdrop-filter-none",
        className
      )}
      {...props}
    />
  )
}

export { ToggleGroup, ToggleGroupItem }

35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$36"}}],"$L37"]}]

Installation

Usage