{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-calendar-24",
  "description": "Pricing calendar with custom day buttons",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "@coss/calendar"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-calendar-24.tsx",
      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"size-12\",\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n        today: \"*:after:hidden\",\n        weekday: \"w-12\",\n      }}\n      components={{\n        DayButton: (props: DayButtonProps) => (\n          <DayButton {...props} prices={mockPriceData} />\n        ),\n      }}\n      disabled={isDateDisabled}\n      mode=\"single\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-normal text-xs\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "colSpan": 2
  },
  "categories": [
    "calendar"
  ],
  "type": "registry:block"
}