"use client"; import React, { useState } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { PenTool } from "lucide-react"; // --- TYPES --- type DrawingVariant = "primary" | "accent" | "blueprint"; export interface DrawingPathButtonProps extends Omit, "onDrag" | "onDragStart" | "onDragEnd" | "ref" | "children"> { /** Async or sync action to trigger the drawing */ action?: () => Promise | void; label?: string; successLabel?: string; variant?: DrawingVariant; disabled?: boolean; /** React 19 native ref support */ ref?: React.Ref; } /** * Drawing Path Pro (v2.1 Ultra) * A premium technical button that animates a geometric SVG path. * Optimized for React 19, 100% bimodal, and strictly typed. */ export const DrawingPathButton = ({ action, label = "Draw Blueprint", successLabel = "Render Complete", variant = "accent", disabled = false, className, onClick, ref, ...props }: DrawingPathButtonProps) => { const [status, setStatus] = useState<"idle" | "drawing" | "done">("idle"); // Variant Mapping const configs: Record = { primary: { stroke: "currentColor", text: "text-neutral-900 dark:text-white", bg: "bg-white dark:bg-neutral-950", border: "border-neutral-200 dark:border-neutral-800" }, accent: { stroke: "#f97316", text: "text-orange-500", bg: "bg-white dark:bg-neutral-950", border: "border-orange-500/20 dark:border-orange-500/10" }, blueprint: { stroke: "#3b82f6", text: "text-blue-500", bg: "bg-blue-50 dark:bg-neutral-950", border: "border-blue-500/20 dark:border-blue-500/10" } }; const current = configs[variant]; const handlePress = async (e: React.MouseEvent) => { if (status !== "idle" || disabled) return; if (onClick) onClick(e); setStatus("drawing"); if (action) await action(); // The duration of the SVG animation setTimeout(() => { setStatus("done"); setTimeout(() => setStatus("idle"), 3000); }, 1800); }; return ( {status === "idle" && ( {label} )} {status === "drawing" && ( )} {status === "done" && ( {successLabel} )} ); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function DrawingPathButtonDemo() { return (

{/* 1. Signature Accent (Uixtra Orange) */} {/* 2. Blueprint Style (Technical Blue) */} {/* 3. Primary Bimodal */}

); }