"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; import { Zap, Sparkles, ShieldCheck, LucideIcon } from "lucide-react"; // --- TYPES --- export type RadioAccentColor = "orange" | "indigo" | "emerald"; export interface RadioOption { id: string; name: string; price: string; period?: string; desc: string; icon: LucideIcon; popular?: boolean; } export interface RadioCardSelectorProps { options: RadioOption[]; value?: string; onChange?: (id: string) => void; color?: RadioAccentColor; className?: string; /** React 19 native ref support */ ref?: React.Ref; } /** * Radio Card Selector Pro (v2.3 Ultra - Auto-Fit Grid Fixed) * A premium, bimodal selection engine for pricing tiers. * Engineered with auto-fit CSS Grid to prevent squishing in split-pane previewers. */ export const RadioCardSelector = ({ options, value, onChange, color = "orange", className, ref, }: RadioCardSelectorProps) => { const [internalSelected, setInternalSelected] = useState(options[0]?.id || ""); const isControlled = value !== undefined; const selectedPlan = isControlled ? value : internalSelected; const handleSelect = (id: string) => { if (!isControlled) setInternalSelected(id); if (onChange) onChange(id); }; // Safe Color Mapping for Tailwind JIT const colorMaps: Record = { orange: { bgActive: "bg-orange-50/50 dark:bg-orange-500/10", borderActive: "border-orange-500", textIcon: "text-orange-500", badge: "bg-orange-500 text-white", shadow: "shadow-[0_8px_30px_rgba(249,115,22,0.12)]" }, indigo: { bgActive: "bg-indigo-50/50 dark:bg-indigo-500/10", borderActive: "border-indigo-500", textIcon: "text-indigo-500", badge: "bg-indigo-500 text-white", shadow: "shadow-[0_8px_30px_rgba(99,102,241,0.12)]" }, emerald: { bgActive: "bg-emerald-50/50 dark:bg-emerald-500/10", borderActive: "border-emerald-500", textIcon: "text-emerald-500", badge: "bg-emerald-500 text-white", shadow: "shadow-[0_8px_30px_rgba(16,185,129,0.12)]" } }; const currentTheme = colorMaps[color]; return ( // FIX: El uso de auto-fit y minmax asegura que nunca se aplasten, sin importar el ancho de la pantalla o el panel.

{options.map((plan) => { const isSelected = selectedPlan === plan.id; const Icon = plan.icon; return (

{/* POPULAR BADGE */} {plan.popular && (

{plan.name}

{plan.price} {plan.period && ( {plan.period} )}

{plan.desc}

); })}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function RadioCardSelectorDemo() { const [plan, setPlan] = useState("pro"); const plansList = [ { id: "hobby", name: "Hobby", price: "$0", period: "/mo", desc: "Perfect for side projects and learning the basics of the platform.", icon: Zap, popular: false, }, { id: "pro", name: "Pro", price: "$19", period: "/mo", desc: "Advanced features and priority support for professional developers.", icon: Sparkles, popular: true, }, { id: "enterprise", name: "Enterprise", price: "$99", period: "/mo", desc: "Unlimited power, custom SLAs, and dedicated account management.", icon: ShieldCheck, popular: false, }, ]; return (

Choose your plan

Scale your workflow with the right tools for your team.

); }