Toggle

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

'use client';import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';import type * as React from 'react';import { cva, type VariantProps } from '@/lib/utils';export const toggleVariants = cva({  base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-accent data-pressed:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",  variants: {    variant: {      transparent: 'bg-transparent',      outline:        'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',    },    size: {      sm: 'h-8 min-w-8 px-1.5',      md: 'h-9 min-w-9 px-2',      lg: 'h-10 min-w-10 px-2.5',    },  },  defaultVariants: {    variant: 'transparent',    size: 'md',  },});/** * A two-state button that can be on or off. * Renders a `<button>` element. * * Documentation: [Caprice UI Toggle](https://caprice-ui.com/docs/components/toggle) * * API Reference: [Base UI Toggle](https://base-ui.com/react/components/toggle) */export namespace Toggle {  export type State = TogglePrimitive.State;  export type Props = React.ComponentProps<typeof TogglePrimitive> &    VariantProps<typeof toggleVariants>;  export type ChangeEventDetails = TogglePrimitive.ChangeEventDetails;  export type ChangeEventReason = TogglePrimitive.ChangeEventReason;}export function Toggle({ className, variant, size, ...props }: Toggle.Props) {  return (    <TogglePrimitive      className={toggleVariants({ variant, size, className })}      data-slot="toggle"      {...props}    />  );}