"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; // Corregido: Importación de AnimatePresence añadida import { Check, X, Bell, Moon, Zap } from "lucide-react"; /** * PRO TIPS FOR USERS: * 1. Accents: "orange" | "indigo" | "emerald" - Seamlessly integrated with Uixtra themes. * 2. Ultra Pro Visuals: Branded radial track gradient and advanced haptic spring physics. * 3. Reusability: Supports controlled and uncontrolled states with labels and descriptions. */ export type ToggleAccentColor = "orange" | "indigo" | "emerald"; export interface ToggleSwitchProps { checked?: boolean; onChange?: (checked: boolean) => void; label?: string; description?: string; accent?: ToggleAccentColor; icon?: React.ReactNode; disabled?: boolean; className?: string; } export const ToggleSwitchMaster = ({ checked: controlledChecked, onChange, label, description, accent = "orange", icon, disabled = false, className, }: ToggleSwitchProps) => { const [internalChecked, setInternalChecked] = useState(false); const isChecked = controlledChecked !== undefined ? controlledChecked : internalChecked; const handleToggle = () => { if (disabled) return; if (controlledChecked === undefined) setInternalChecked(!isChecked); onChange?.(!isChecked); }; const themeMaps: Record = { orange: { track: "from-orange-600 via-orange-500 to-amber-500", ring: "focus-within:ring-orange-500/10", shadow: "shadow-orange-500/30", thumbIcon: "text-orange-500" }, indigo: { track: "from-indigo-600 via-indigo-500 to-blue-500", ring: "focus-within:ring-indigo-500/10", shadow: "shadow-indigo-500/30", thumbIcon: "text-indigo-500" }, emerald: { track: "from-emerald-600 via-emerald-500 to-teal-500", ring: "focus-within:ring-emerald-500/10", shadow: "shadow-emerald-500/30", thumbIcon: "text-emerald-500" }, }; const current = themeMaps[accent]; return (

{/* TEXT CONTENT */} {(label || description) && (

{label && (

{icon && {icon}} {label}

)} {description && (

{description}

)}

)} {/* INTERACTIVE TOGGLE */}

{isChecked ? ( ) : ( )}

{/* INNER TRACK VOLUME EFFECT */}

); }; // ========================================== // DEMO WITH UIXTRA BRANDED BACKGROUND // ========================================== export default function ToggleSwitchDemo() { return (

{/* Signature Uixtra Background Aura */}

System Master

Control your premium experience with advanced physics.

} checked={true} />

} />

); }