"use client"; import React from "react"; import { motion, HTMLMotionProps } from "framer-motion"; // --- TYPES --- type RotatingVariant = "primary" | "accent" | "ocean" | "luxury"; export interface DoubleRotatingButtonProps extends Omit, "onDrag" | "onDragStart" | "onDragEnd" | "ref"> { /** If provided, renders as an anchor tag. Use "#" for demos. */ href?: string; target?: string; /** Built-in color schemes */ variant?: RotatingVariant; /** Speed of rotation in seconds (Default: 4) */ duration?: number; disabled?: boolean; children?: React.ReactNode; /** React 19 native ref support */ ref?: React.Ref; } /** * Double Edge Rotating Pro (v2.1 Ultra) * A premium button with a high-performance conic-gradient border. * Optimized for React 19 with bimodal support (Light/Dark). */ export const DoubleRotatingButton = ({ href, target, variant = "primary", duration = 4, disabled = false, children, className, onClick, ref, ...props }: DoubleRotatingButtonProps) => { const Component = href ? motion.a : motion.button; // Variant Color Logic const colorMap: Record = { primary: { primary: "#f97316", secondary: "#fb923c" }, // Uixtra Orange accent: { primary: "#a855f7", secondary: "#ec4899" }, // Purple/Pink ocean: { primary: "#06b6d4", secondary: "#3b82f6" }, // Cyan/Blue luxury: { primary: "#facc15", secondary: "#fbbf24" } // Gold/Yellow }; const { primary, secondary } = colorMap[variant]; const handleClick = (e: React.MouseEvent) => { if (disabled) { e.preventDefault(); return; } if (href === "#") e.preventDefault(); if (onClick) onClick(e); }; return ( {/* ROTATING BORDER ENGINE */} {/* INNER CORE (Bimodal Mask) */}

{children || "Double Edge"}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function DoubleRotatingButtonDemo() { return (

{/* 1. Signature Orange (Primary) */} Get Access Now {/* 2. Ocean Style (Fast Rotation) */} Fast Performance {/* 3. Luxury Gold Style */} Premium Plan {/* 4. Disabled State */} Feature Locked

); }