Toggle

"use client"

import * as React from "react"
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { buttonVariantOption } from "@/components/ui/button"

const { base, options } = buttonVariantOption

const toggleVariants = cva(
  `${base} text-foreground not-data-disabled:hover:bg-accent not-data-disabled:hover:text-accent-foreground not-data-disabled:active:bg-accent-pressed`,
  {
    variants: {
      variant: {
        default: `data-pressed:bg-secondary-hovered not-data-disabled:data-pressed:hover:bg-secondary-pressed not-data-disabled:data-pressed:active:bg-secondary-hovered`,
        outline: `border-border data-pressed:bg-secondary-hovered not-data-disabled:data-pressed:hover:bg-secondary-pressed not-data-disabled:data-pressed:active:bg-secondary-hovered`,
        primary: `data-pressed:bg-primary-hovered data-pressed:text-primary-foreground not-data-disabled:data-pressed:hover:bg-primary-hovered not-data-disabled:data-pressed:active:bg-primary-pressed`,
        "primary-muted": `data-pressed:bg-primary-text/[.08] data-pressed:text-primary-text not-data-disabled:data-pressed:hover:bg-primary-text/[.16] not-data-disabled:data-pressed:active:bg-primary-text/[.24]`,
      },
      size: options.variants.size,
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Toggle({
  className,
  variant = "default",
  size = "default",
  ...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Toggle, toggleVariants }

import { Toggle } from "@/components/ui/toggle"

<Toggle>Toggle</Toggle>