{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar5",
  "title": "Calendar",
  "description": "A calendar component that allows users to select a date or a range of dates.",
  "files": [
    {
      "path": "contents/components/calendar/5/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Calendar, CalendarDayButton } from \"@/components/ui/calendar\";\n\nfunction getPriceForDate(date: Date) {\n  const seed = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();\n\n  const val = (seed * 9301 + 49297) % 233280;\n\n  return Math.floor(50 + (val / 233280) * 200);\n}\n\nconst CalendarPricingDemo = () => {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      showOutsideDays={false}\n      className=\"rounded-lg border [--cell-size:--spacing(12)]\"\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const price = getPriceForDate(day.date);\n          const isGreen = price < 100;\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && (\n                <span className={isGreen ? \"text-green-600 dark:text-green-400\" : \"\"}>\n                  ${price}\n                </span>\n              )}\n            </CalendarDayButton>\n          );\n        }\n      }}\n      disabled={{ before: new Date() }}\n    />\n  );\n};\n\nexport default CalendarPricingDemo;\n",
      "type": "registry:component",
      "target": "components/calendar5.tsx"
    }
  ],
  "type": "registry:component"
}