"use client"; import type { 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 * as React from "react"; import { cn } from "~/lib/utils";import { Separator } from "~/components/ui/separator";import { Toggle as ToggleComponent, type toggleVariants } from "~/components/ui/toggle"; const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({  size: "default",  variant: "default",}); function ToggleGroup({  className,  variant = "default",  size = "default",  orientation = "horizontal",  children,  ...props}: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>) {  const value = React.useMemo(() => ({ size, variant }), [size, variant]);  return (    <ToggleGroupPrimitive      className={cn(        "flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input",        orientation === "horizontal"          ? "*:pointer-coarse:after:min-w-auto"          : "*:pointer-coarse:after:min-h-auto",        variant === "default"          ? "gap-0.5"          : orientation === "horizontal"            ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"            : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",        className,      )}      data-size={size}      data-slot="toggle-group"      data-variant={variant}      orientation={orientation}      {...props}    >      <ToggleGroupContext value={value}>{children}</ToggleGroupContext>    </ToggleGroupPrimitive>  );} function Toggle({  className,  children,  variant,  size,  ...props}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {  const context = React.use(ToggleGroupContext);   const resolvedVariant = variant ?? context.variant;  const resolvedSize = size ?? context.size;   return (    <ToggleComponent      className={className}      data-size={resolvedSize}      data-variant={resolvedVariant}      size={resolvedSize}      variant={resolvedVariant}      {...props}    >      {children}    </ToggleComponent>  );} function ToggleGroupSeparator({  className,  orientation = "vertical",  ...props}: {  className?: string;} & React.ComponentProps<typeof Separator>) {  return (    <Separator      className={cn(        "pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32",        className,      )}      orientation={orientation}      {...props}    />  );} export { ToggleGroup, Toggle, Toggle as ToggleGroupItem, ToggleGroupSeparator };