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: '',  variants: {    variant: {      default: '',      outline: '',    },    size: {      sm: '',      lg: '',    },  },  defaultVariants: {    variant: 'default',    size: 'sm',  },});/** * 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}    />  );}