Toggle

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'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}
    />
  );
}