"use client"; import * as SwitchPrimitives from "@radix-ui/react-switch"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { cn } from "../../lib/utils"; const switchRootVariants = cva( "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-background-control focus-visible:ring-offset-2 focus-visible:ring-offset-foreground-muted disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border", { variants: { size: { small: "h-[16px] w-[28px]", medium: "h-[20px] w-[34px]", large: "h-[24px] w-[44px]", }, }, defaultVariants: { size: "medium", }, }, ); const switchThumbVariants = cva( "pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-white shadow-lg ring-0 transition-transform", { variants: { size: { small: "h-[12px] w-[12px] data-[state=checked]:translate-x-[13px] data-[state=unchecked]:translate-x-px", medium: "h-[16px] w-[16px] data-[state=checked]:translate-x-[15px] data-[state=unchecked]:translate-x-px", large: "h-[18px] w-[18px] data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[3px]", }, }, defaultVariants: { size: "medium", }, }, ); export interface SwitchProps extends React.ComponentPropsWithoutRef, VariantProps {} const Switch = React.forwardRef< React.ComponentRef, SwitchProps >(({ className, size, ...props }, ref) => ( )); Switch.displayName = SwitchPrimitives.Root.displayName; export { Switch };