"use client"; import React, { useState, useEffect, useRef, useId } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Search, Orbit, Command, ArrowRight } from "lucide-react"; // --- TYPES --- export type ZeroGravityTheme = "astral" | "nebula" | "quantum" | "void"; export interface ZeroGravityFieldProps extends Omit, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"> { /** Array of placeholder texts that will float inside the input */ suggestions?: string[]; themeColor?: ZeroGravityTheme; onActionSubmit?: (value: string) => void; /** React 19 native ref support */ ref?: React.Ref; } // --- SUB-COMPONENT: FLOATING PILL --- const FloatingPill = ({ text, index, total, isInputActive, themeClass }: { text: string; index: number; total: number; isInputActive: boolean; themeClass: string; }) => { // Generate distinct, continuous orbital paths based on index const angle = (index / total) * Math.PI * 2; const radiusX = 30 + Math.random() * 40; const radiusY = 15 + Math.random() * 20; const generatePath = (axis: 'x' | 'y') => { const points = []; for (let i = 0; i <= 4; i++) { const stepAngle = angle + (i * Math.PI) / 2; const rad = axis === 'x' ? radiusX : radiusY; const offset = (Math.random() - 0.5) * 20; points.push(Math.cos(stepAngle) * rad + offset); } return points; }; const xPath = generatePath('x'); const yPath = generatePath('y'); const rotPath = [Math.random() * 10, Math.random() * -20, Math.random() * 15, Math.random() * -10, Math.random() * 10]; return ( {text} ); }; /** * Zero-Gravity Field (v3.0 Infinity) * An expansive command input where placeholders physically float inside a deep chamber * with simulated zero-gravity inertia. Elements scatter and fade when the user focuses. */ export const ZeroGravityField = ({ suggestions = ["Components", "Templates", "Dashboards", "Icons", "Framer Motion"], themeColor = "astral", onActionSubmit, className, value, onChange, onFocus, onBlur, ref: externalRef, ...props }: ZeroGravityFieldProps) => { const [internalValue, setInternalValue] = useState(""); const [isFocused, setIsFocused] = useState(false); const [isMounted, setIsMounted] = useState(false); const internalRef = useRef(null); const activeRef = (externalRef as React.RefObject) || internalRef; // Avoid SSR hydration mismatch for random paths useEffect(() => { setIsMounted(true); }, []); const isControlled = value !== undefined; const currentValue = isControlled ? String(value) : internalValue; const hasValue = currentValue.length > 0; // The gravity chamber is active when focused OR typing const isInputActive = isFocused || hasValue; const handleChange = (e: React.ChangeEvent) => { if (!isControlled) setInternalValue(e.target.value); if (onChange) onChange(e); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && onActionSubmit && currentValue.trim()) { onActionSubmit(currentValue); } }; // --- THEME ENGINE --- const themes: Record = { astral: { // Uixtra Orange Signature chamber: "shadow-[inset_0_10px_40px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_10px_50px_rgba(0,0,0,0.5)]", chamberActive: "ring-2 ring-orange-500/50 shadow-[0_0_40px_rgba(249,115,22,0.1)]", pill: "bg-white/80 dark:bg-neutral-900/80 text-orange-600 dark:text-orange-400", icon: "text-orange-500", submitBtn: "bg-orange-500 hover:bg-orange-400 text-white shadow-orange-500/30", }, nebula: { // Fuchsia/Purple chamber: "shadow-[inset_0_10px_40px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_10px_50px_rgba(0,0,0,0.5)]", chamberActive: "ring-2 ring-fuchsia-500/50 shadow-[0_0_40px_rgba(217,70,239,0.1)]", pill: "bg-white/80 dark:bg-neutral-900/80 text-fuchsia-600 dark:text-fuchsia-400", icon: "text-fuchsia-500", submitBtn: "bg-fuchsia-500 hover:bg-fuchsia-400 text-white shadow-fuchsia-500/30", }, quantum: { // Cyan chamber: "shadow-[inset_0_10px_40px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_10px_50px_rgba(0,0,0,0.5)]", chamberActive: "ring-2 ring-cyan-400/50 shadow-[0_0_40px_rgba(34,211,238,0.1)]", pill: "bg-white/80 dark:bg-neutral-900/80 text-cyan-600 dark:text-cyan-400", icon: "text-cyan-500", submitBtn: "bg-cyan-500 hover:bg-cyan-400 text-neutral-950 shadow-cyan-500/30", }, void: { // Monochromatic Minimal chamber: "shadow-[inset_0_10px_40px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_10px_50px_rgba(0,0,0,0.5)]", chamberActive: "ring-2 ring-neutral-900/20 dark:ring-white/20 shadow-[0_0_40px_rgba(0,0,0,0.05)] dark:shadow-[0_0_40px_rgba(255,255,255,0.05)]", pill: "bg-white/80 dark:bg-neutral-900/80 text-neutral-900 dark:text-white", icon: "text-neutral-900 dark:text-white", submitBtn: "bg-neutral-900 hover:bg-neutral-800 dark:bg-white dark:hover:bg-neutral-200 text-white dark:text-neutral-900", } }; const currentT = themes[themeColor]; return (

{/* Structural Chamber */}

{/* Zero-Gravity Environment (Floating Placeholders) */}

{isMounted && suggestions.map((text, idx) => ( ))}

{/* Input Interface */}

{ setIsFocused(true); if (onFocus) onFocus(e); }} onBlur={(e) => { setIsFocused(false); if (onBlur) onBlur(e); }} onKeyDown={handleKeyDown} placeholder={isInputActive ? "" : undefined} className={` w-full h-full bg-transparent border-none outline-none text-xl sm:text-2xl font-black tracking-tight text-neutral-900 dark:text-white placeholder-transparent z-10 `} /> {/* Action Button & Command Hint */}

{!hasValue && !isFocused && ( K )} {hasValue && ( onActionSubmit && onActionSubmit(currentValue)} className={`flex items-center justify-center w-12 h-12 rounded-xl transition-all shadow-xl ${currentT.submitBtn} outline-none`} > )}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function ZeroGravityFieldDemo() { const handleSearch = (val: string) => { console.log("Searching vault for:", val); }; return (

{/* 1. Astral Theme (Uixtra Orange) */}

{/* 2. Void Theme (Minimalist) */}

); }