Radio

<div className="flex items-center space-x-2"><input type="radio" id="radio-0" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-primary text-primary" checked /><label htmlFor="radio-0" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Primary Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioPrimary({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioPrimary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-0" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-primary text-primary" checked /><label htmlFor="radio-0" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Primary Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-1" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-muted-foreground text-muted-foreground" checked /><label htmlFor="radio-1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Secondary Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioSecondary({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioSecondary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-1" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-muted-foreground text-muted-foreground" checked /><label htmlFor="radio-1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Secondary Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-2" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-red-500 text-red-500" checked /><label htmlFor="radio-2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Destructive Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioDestructive({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioDestructive() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-2" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-red-500 text-red-500" checked /><label htmlFor="radio-2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Destructive Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-3" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-green-500 text-green-500" checked /><label htmlFor="radio-3" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Success Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioSuccess({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioSuccess() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-3" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-green-500 text-green-500" checked /><label htmlFor="radio-3" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Success Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-4" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-yellow-500 text-yellow-500" checked /><label htmlFor="radio-4" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Warning Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioWarning({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioWarning() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-4" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-yellow-500 text-yellow-500" checked /><label htmlFor="radio-4" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Warning Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-5" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-blue-500 text-blue-500" checked /><label htmlFor="radio-5" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Info Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioInfo({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioInfo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-5" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-blue-500 text-blue-500" checked /><label htmlFor="radio-5" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Info Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-6" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-purple-500 text-purple-500" checked /><label htmlFor="radio-6" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Purple Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioPurple({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioPurple() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-6" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-purple-500 text-purple-500" checked /><label htmlFor="radio-6" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Purple Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-7" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-orange-500 text-orange-500" checked /><label htmlFor="radio-7" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Orange Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioOrange({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioOrange() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-7" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-orange-500 text-orange-500" checked /><label htmlFor="radio-7" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Orange Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-8" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-pink-500 text-pink-500" checked /><label htmlFor="radio-8" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Pink Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioPink({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioPink() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-8" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-pink-500 text-pink-500" checked /><label htmlFor="radio-8" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Pink Option</label></div>
    </motion.div>
  );
}

<div className="flex items-center space-x-2"><input type="radio" id="radio-9" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-teal-500 text-teal-500" checked /><label htmlFor="radio-9" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Teal Option</label></div>

"use client";

import React, { useState } from "react";

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

const defaultOptions: RadioOption[] = [
  { value: "standard", label: "Standard Plan", description: "Best for individuals and small hobby projects." },
  { value: "pro", label: "Pro Team Plan", description: "Best for high-growth commercial organizations." },
];

export default function RadioTeal({
  options = defaultOptions,
  defaultValue = "standard",
}: {
  options?: RadioOption[];
  defaultValue?: string;
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div className="w-full max-w-sm space-y-2.5">
      {options.map((opt) => {
        const isSelected = selected === opt.value;
        return (
          <label
            key={opt.value}
            onClick={() => setSelected(opt.value)}
            className={`flex items-start gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
              isSelected
                ? "border-primary bg-primary/5 shadow-2xs"
                : "border-border hover:bg-muted/40"
            }`}
          >
            <div
              className={`h-4 w-4 mt-0.5 rounded-full border flex items-center justify-center shrink-0 transition-colors ${
                isSelected ? "border-primary" : "border-muted-foreground/60"
              }`}
            >
              {isSelected && <div className="h-2 w-2 rounded-full bg-primary" />}
            </div>
            <div>
              <span className="text-xs font-bold text-foreground block">{opt.label}</span>
              {opt.description && (
                <span className="text-[11px] text-muted-foreground block mt-0.5 leading-relaxed">{opt.description}</span>
              )}
            </div>
          </label>
        );
      })}
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedRadioTeal() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex items-center space-x-2"><input type="radio" id="radio-9" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-teal-500 text-teal-500" checked /><label htmlFor="radio-9" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Teal Option</label></div>
    </motion.div>
  );
}