"use client"; import React from 'react'; import { cn } from '@/lib/utils'; const styles = { switch: `relative block cursor-pointer h-8 w-[52px] [--c-active:#275EFE] [--c-success:#10B981] [--c-warning:#F59E0B] [--c-danger:#EF4444] [--c-active-inner:#FFFFFF] [--c-default:#D2D6E9] [--c-default-dark:#C7CBDF] [--c-black:#1B1B22] [transform:translateZ(0)] [-webkit-transform:translateZ(0)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden] [perspective:1000] [-webkit-perspective:1000]`, input: `h-full w-full cursor-pointer appearance-none rounded-full bg-[--c-default] outline-none transition-colors duration-500 hover:bg-[--c-default-dark] [transform:translate3d(0,0,0)] [-webkit-transform:translate3d(0,0,0)] data-[checked=true]:bg-[--c-background]`, svg: `pointer-events-none absolute inset-0 fill-white [transform:translate3d(0,0,0)] [-webkit-transform:translate3d(0,0,0)]`, circle: `transform-gpu transition-transform duration-500 [transform:translate3d(0,0,0)] [-webkit-transform:translate3d(0,0,0)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]`, dropCircle: `transform-gpu transition-transform duration-700 [transform:translate3d(0,0,0)] [-webkit-transform:translate3d(0,0,0)]` }; const variantStyles = { default: '[--c-background:var(--c-active)]', success: '[--c-background:var(--c-success)]', warning: '[--c-background:var(--c-warning)]', danger: '[--c-background:var(--c-danger)]', }; interface ToggleProps { checked?: boolean; onCheckedChange?: (checked: boolean) => void; className?: string; variant?: 'default' | 'success' | 'warning' | 'danger'; } export function Toggle({ checked = false, onCheckedChange, className, variant = 'default' }: ToggleProps) { const [isChecked, setIsChecked] = React.useState(checked); const handleChange = (e: React.ChangeEvent) => { setIsChecked(e.target.checked); onCheckedChange?.(e.target.checked); }; return ( ); } export function GooeyFilter() { return ( ); }