{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "simple-calendar-shadcnui",
  "type": "registry:component",
  "title": "Simple Calendar",
  "description": "Calendar picker with date selection animation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/forms/simple-calendar.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst daysOfWeek = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst daysInMonth = Array.from({ length: 28 }, (_, i) => i + 1);\n\nexport function SimpleCalendar() {\n  const [selectedDay, setSelectedDay] = useState<number | null>(15);\n\n  return (\n    <div className=\"w-full max-w-sm rounded-2xl border  bg-[var(--card-bg)] p-6\">\n      <div className=\"mb-6 flex items-center justify-between\">\n        <h3 className=\"text-lg font-semibold\">January 2024</h3>\n        <div className=\"flex gap-2\">\n          <motion.button\n            whileHover={{ scale: 1.1 }}\n            whileTap={{ scale: 0.95 }}\n            className=\"rounded-lg p-1 hover:bg-[var(--foreground)]/10\"\n          >\n            <ChevronLeft className=\"h-5 w-5\" />\n          </motion.button>\n          <motion.button\n            whileHover={{ scale: 1.1 }}\n            whileTap={{ scale: 0.95 }}\n            className=\"rounded-lg p-1 hover:bg-[var(--foreground)]/10\"\n          >\n            <ChevronRight className=\"h-5 w-5\" />\n          </motion.button>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-7 gap-2\">\n        {daysOfWeek.map((day) => (\n          <div\n            key={day}\n            className=\"text-center text-xs font-medium text-[var(--foreground)]/60\"\n          >\n            {day}\n          </div>\n        ))}\n\n        {daysInMonth.map((day) => (\n          <motion.button\n            key={day}\n            onClick={() => setSelectedDay(day)}\n            className=\"relative aspect-square rounded-lg text-sm font-medium\"\n            whileHover={{ scale: 1.1 }}\n            whileTap={{ scale: 0.95 }}\n            style={{\n              color: selectedDay === day ? \"white\" : \"var(--foreground)\",\n            }}\n          >\n            {selectedDay === day && (\n              <motion.div\n                layoutId=\"calendar-selected\"\n                className=\"absolute inset-0 rounded-lg bg-accent\"\n                transition={{ type: \"spring\", stiffness: 380, damping: 30 }}\n              />\n            )}\n            <span className=\"relative z-10\">{day}</span>\n          </motion.button>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/simple-calendar-shadcnui.tsx"
    }
  ]
}