{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "simple-date-selector",
  "title": "Simple Date Selector",
  "description": "A simple date selector component",
  "files": [
    {
      "path": "registry/pioneerui/simple-date-selector.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState, useEffect } from \"react\"\nimport { motion, AnimatePresence } from \"framer-motion\"\nimport { FiChevronLeft, FiChevronRight } from \"react-icons/fi\"\n\ninterface ModernFlipCalendarProps {\n  className?: string\n}\n\nexport const ModernFlipCalendar: React.FC<ModernFlipCalendarProps> = ({ className = \"\" }) => {\n  const [currentDate, setCurrentDate] = useState(new Date())\n  const [selectedDate, setSelectedDate] = useState(new Date())\n  const [isFlipped, setIsFlipped] = useState(false)\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setCurrentDate(new Date())\n    }, 1000)\n\n    return () => clearInterval(timer)\n  }, [])\n\n  const monthNames = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ]\n\n  const dayNames = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"]\n\n  const handleDateChange = (amount: number) => {\n    const newDate = new Date(selectedDate)\n    newDate.setDate(selectedDate.getDate() + amount)\n    setSelectedDate(newDate)\n  }\n\n  const handleFlip = () => {\n    setIsFlipped(!isFlipped)\n    if (isFlipped) {\n      setCurrentDate(selectedDate)\n    } else {\n      setSelectedDate(currentDate)\n    }\n  }\n\n  return (\n    <div className={`bg-gradient-to-br from-purple-600 to-indigo-700 p-8 rounded-3xl shadow-2xl ${className}`}>\n      <div className=\"relative w-full h-64 cursor-pointer perspective-1000\" onClick={handleFlip}>\n        <AnimatePresence initial={false} mode=\"wait\">\n          {!isFlipped ? (\n            <CurrentDate key=\"current\" date={currentDate} monthNames={monthNames} dayNames={dayNames} />\n          ) : (\n            <DateSelector\n              key=\"selector\"\n              date={selectedDate}\n              selectedDate={selectedDate}\n              monthNames={monthNames}\n              dayNames={dayNames}\n              onDateChange={handleDateChange}\n            />\n          )}\n        </AnimatePresence>\n      </div>\n      <div className=\"flex justify-center mt-4\">\n        <button\n          onClick={handleFlip}\n          className=\"bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-purple-100 transition-colors\"\n        >\n          {isFlipped ? \"Set Date\" : \"Change Date\"}\n        </button>\n      </div>\n    </div>\n  )\n}\n\ninterface DateDisplayProps {\n  date: Date\n  monthNames: string[]\n  dayNames: string[]\n}\n\nconst CurrentDate: React.FC<DateDisplayProps> = ({ date, monthNames, dayNames }) => (\n  <motion.div\n    initial={{ rotateY: 180 }}\n    animate={{ rotateY: 0 }}\n    exit={{ rotateY: -180 }}\n    transition={{ duration: 0.6 }}\n    className=\"absolute inset-0 bg-white rounded-2xl p-6 flex flex-col justify-center items-center shadow-lg backface-hidden\"\n  >\n    <h2 className=\"text-4xl font-bold text-purple-700 mb-2\">{monthNames[date.getMonth()]}</h2>\n    <p className=\"text-2xl text-indigo-600 mb-4\">{dayNames[date.getDay()]}</p>\n    <div className=\"text-6xl font-bold text-purple-800\">{date.getDate()}</div>\n    <div className=\"text-3xl text-indigo-600 mt-4\">\n      {date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" })}\n    </div>\n  </motion.div>\n)\n\ninterface DateSelectorProps extends DateDisplayProps {\n  selectedDate: Date\n  onDateChange: (amount: number) => void\n}\n\nconst DateSelector: React.FC<DateSelectorProps> = ({ selectedDate, monthNames, dayNames, onDateChange }) => (\n  <motion.div\n    initial={{ rotateY: -180 }}\n    animate={{ rotateY: 0 }}\n    exit={{ rotateY: 180 }}\n    transition={{ duration: 0.6 }}\n    className=\"absolute inset-0 bg-white rounded-2xl p-6 flex flex-col justify-center items-center shadow-lg backface-hidden\"\n  >\n    <h2 className=\"text-4xl font-bold text-purple-700 mb-2\">{monthNames[selectedDate.getMonth()]}</h2>\n    <p className=\"text-2xl text-indigo-600 mb-4\">{dayNames[selectedDate.getDay()]}</p>\n    <div className=\"flex items-center justify-center\">\n      <button\n        onClick={(e) => {\n          e.stopPropagation()\n          onDateChange(-1)\n        }}\n        className=\"text-3xl text-purple-700 mr-4 hover:text-purple-500 transition-colors\"\n      >\n        <FiChevronLeft />\n      </button>\n      <div className=\"text-6xl font-bold text-purple-800\">{selectedDate.getDate()}</div>\n      <button\n        onClick={(e) => {\n          e.stopPropagation()\n          onDateChange(1)\n        }}\n        className=\"text-3xl text-purple-700 ml-4 hover:text-purple-500 transition-colors\"\n      >\n        <FiChevronRight />\n      </button>\n    </div>\n    <div className=\"text-xl text-indigo-600 mt-4\">{selectedDate.getFullYear()}</div>\n  </motion.div>\n)\n\n",
      "type": "registry:ui",
      "target": "components/pioneerui/simple-date-selector.tsx"
    }
  ],
  "type": "registry:ui"
}