{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "schedule-date",
  "type": "registry:component",
  "title": "Schedule Date",
  "description": "Date scheduling dialog with calendar selection, time picking, and confirmations.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/schedule-date.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { ChevronLeft, ChevronRight, Check, ChevronDown } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\ninterface DateRange {\n  start: Date | null;\n  end: Date | null;\n}\n\ninterface ScheduleDateProps {\n  onApply?: (range: DateRange) => void;\n  onCancel?: () => void;\n}\n\nconst PRESETS = [\n  { label: 'Today', id: 'today' },\n  { label: 'Yesterday', id: 'yesterday' },\n  { label: 'Last 7 Days', id: '7d' },\n  { label: 'Last 30 Days', id: '30d' },\n  { label: 'Last 365 Days', id: '365d' },\n  { label: 'Week to Date', id: 'wtd' },\n  { label: 'Month to Date', id: 'mtd' },\n  { label: 'Year to Date', id: 'ytd' },\n  { label: 'Custom', id: 'custom' },\n];\n\nconst DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\nexport const ScheduleDate: React.FC<ScheduleDateProps> = ({\n  onApply,\n  onCancel,\n}) => {\n  const [selectedPreset, setSelectedPreset] = useState('custom');\n  const [viewDate, setViewDate] = useState(new Date(2025, 9, 1));\n  const [range, setRange] = useState<DateRange>({\n    start: new Date(2025, 9, 15),\n    end: new Date(2025, 9, 25),\n  });\n\n  const handleDateClick = (date: Date) => {\n    if (!range.start || (range.start && range.end)) {\n      setRange({ start: date, end: null });\n      setSelectedPreset('custom');\n    } else {\n      if (date < range.start) {\n        setRange({ start: date, end: range.start });\n      } else {\n        setRange({ ...range, end: date });\n      }\n    }\n  };\n\n  const renderMonthGrid = (\n    monthDate: Date,\n    showLeftNav = false,\n    showRightNav = false,\n  ) => {\n    const year = monthDate.getFullYear();\n    const month = monthDate.getMonth();\n    const firstDay = (new Date(year, month, 1).getDay() + 6) % 7;\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    const monthName = monthDate.toLocaleString('default', {\n      month: 'long',\n      year: 'numeric',\n    });\n\n    return (\n      <div className=\"min-w-56 flex-1\">\n        <div className=\"mb-4 flex items-center justify-between px-2\">\n          {showLeftNav ? (\n            <button\n              title=\"left\"\n              onClick={() => setViewDate(new Date(year, month - 1, 1))}\n              className=\"p-1 text-neutral-400 transition-colors hover:text-neutral-900 dark:text-neutral-500 dark:hover:text-white\"\n            >\n              <ChevronLeft size={18} strokeWidth={2.5} />\n            </button>\n          ) : (\n            <div className=\"w-7\" />\n          )}\n          <span className=\"text-[13px] font-semibold tracking-tight text-neutral-800 dark:text-neutral-200\">\n            {monthName}\n          </span>\n          {showRightNav ? (\n            <button\n              title=\"right\"\n              onClick={() => setViewDate(new Date(year, month + 1, 1))}\n              className=\"p-1 text-neutral-400 transition-colors hover:text-neutral-900 dark:text-neutral-500 dark:hover:text-white\"\n            >\n              <ChevronRight size={18} strokeWidth={2.5} />\n            </button>\n          ) : (\n            <div className=\"w-7\" />\n          )}\n        </div>\n\n        <div className=\"relative grid grid-cols-7 gap-y-1 text-center\">\n          {DAYS.map((d) => (\n            <span\n              key={d}\n              className=\"mb-2 text-[11px] font-medium text-neutral-400 dark:text-neutral-600\"\n            >\n              {d}\n            </span>\n          ))}\n          {Array.from({ length: firstDay }).map((_, i) => (\n            <div key={`empty-${i}`} className=\"h-8\" />\n          ))}\n          {Array.from({ length: daysInMonth }).map((_, i) => {\n            const day = i + 1;\n            const currentDayDate = new Date(year, month, day);\n            const isStart =\n              range.start?.toDateString() === currentDayDate.toDateString();\n            const isEnd =\n              range.end?.toDateString() === currentDayDate.toDateString();\n            const isInRange =\n              range.start &&\n              range.end &&\n              currentDayDate > range.start &&\n              currentDayDate < range.end;\n\n            return (\n              <div\n                key={day}\n                onClick={() => handleDateClick(currentDayDate)}\n                className=\"group relative flex h-8 cursor-pointer items-center justify-center\"\n              >\n                {(isInRange || isStart || isEnd) && (\n                  <div\n                    className={cn(\n                      'absolute z-0 h-8',\n                      'border-y border-neutral-200 bg-neutral-100 dark:border-white/5 dark:bg-neutral-900/50',\n                      isStart ? 'left-1/2 rounded-l-lg border-l' : 'left-0',\n                      isEnd ? 'right-1/2 rounded-r-lg border-r' : 'right-0',\n                      isInRange && !isStart && !isEnd ? 'w-full' : '',\n                    )}\n                  />\n                )}\n                {isStart || isEnd ? (\n                  <div className=\"absolute z-10 flex h-8 w-8 flex-col items-center justify-center rounded-lg border border-neutral-600 bg-linear-to-b from-neutral-700 to-neutral-900 shadow-xl dark:border-white/10 dark:from-neutral-800 dark:to-indigo-900/50\">\n                    <span className=\"text-xs font-bold text-white\">{day}</span>\n                    <motion.div\n                      layoutId=\"activeThumb\"\n                      className=\"absolute bottom-1 h-[1.5px] w-2 rounded-full bg-blue-400 shadow-[0_0_8px_#6366f1] dark:bg-indigo-500\"\n                    />\n                  </div>\n                ) : (\n                  <span\n                    className={cn(\n                      'relative z-10 text-[13px] font-normal transition-colors',\n                      isInRange\n                        ? 'text-neutral-900 dark:text-white'\n                        : 'text-neutral-600 group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white',\n                    )}\n                  >\n                    {day}\n                  </span>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-195 flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white font-sans text-neutral-600 shadow-2xl dark:border-neutral-800 dark:bg-black dark:text-neutral-400\">\n      <div className=\"flex min-h-0 w-full flex-col md:min-h-105 md:flex-row\">\n        {/* Sidebar */}\n        <aside className=\"no-scrollbar flex w-full shrink-0 flex-row gap-1 overflow-x-auto border-b border-neutral-200 bg-neutral-50/50 py-3 md:w-52 md:flex-col md:border-r md:border-b-0 dark:border-neutral-800 dark:bg-neutral-950/20\">\n          {PRESETS.map((preset, idx) => (\n            <React.Fragment key={preset.id}>\n              {[2, 5, 8].includes(idx) && (\n                <div className=\"mx-3 my-1 hidden h-px bg-neutral-200 md:block dark:bg-neutral-800\" />\n              )}\n              <button\n                onClick={() => setSelectedPreset(preset.id)}\n                className={cn(\n                  'group mx-2 flex items-center justify-between rounded-lg px-3 py-1.5 text-xs whitespace-nowrap transition-all duration-200 md:mx-3 md:text-[13px]',\n                  selectedPreset === preset.id\n                    ? preset.id === 'custom'\n                      ? 'border border-neutral-300 bg-linear-to-b from-neutral-100 to-neutral-200 font-medium text-neutral-900 dark:border-neutral-700 dark:from-neutral-800 dark:to-neutral-900 dark:text-white'\n                      : 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white'\n                    : 'hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-900 dark:hover:text-neutral-200',\n                )}\n              >\n                <span>{preset.label}</span>\n                {selectedPreset === preset.id && preset.id === 'custom' && (\n                  <motion.div\n                    initial={{ scale: 0 }}\n                    animate={{ scale: 1 }}\n                    className=\"ml-2\"\n                  >\n                    <Check size={12} />\n                  </motion.div>\n                )}\n              </button>\n            </React.Fragment>\n          ))}\n        </aside>\n        {/* Main Content */}\n        <main className=\"flex min-w-0 flex-1 flex-col gap-6 overflow-hidden bg-white p-4 md:p-5 dark:bg-transparent\">\n          {/* Inputs Area */}\n          <div className=\"grid shrink-0 grid-cols-1 gap-3 sm:grid-cols-2\">\n            <DateInput label=\"Start date\" date={range.start} />\n            <DateInput label=\"End date\" date={range.end} />\n          </div>\n\n          {/* Calendars Container */}\n          <div className=\"no-scrollbar flex snap-x snap-mandatory flex-row items-start gap-8 overflow-x-auto overflow-y-hidden pb-2 lg:gap-10\">\n            {/* Left Month */}\n            <div className=\"shrink-0 snap-start\">\n              {renderMonthGrid(viewDate, true, false)}\n            </div>\n\n            {/* Divider */}\n            <div className=\"hidden h-40 w-px shrink-0 self-center bg-neutral-200 opacity-50 lg:block dark:bg-neutral-800\" />\n\n            {/* Right Month */}\n            <div className=\"shrink-0 snap-start\">\n              {renderMonthGrid(\n                new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1),\n                false,\n                true,\n              )}\n            </div>\n          </div>\n        </main>\n      </div>\n\n      <footer className=\"flex h-16 shrink-0 items-center justify-end gap-3 border-t border-neutral-200 bg-neutral-50/50 px-6 dark:border-neutral-800 dark:bg-neutral-950/50\">\n        <button\n          onClick={onCancel}\n          className=\"rounded-full border border-neutral-200 px-4 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white\"\n        >\n          Cancel\n        </button>\n        <button\n          onClick={() => onApply?.(range)}\n          className=\"rounded-full bg-neutral-900 px-5 py-1.5 text-xs font-semibold text-white shadow-lg transition-all hover:opacity-90 active:scale-95 dark:bg-neutral-100 dark:text-black\"\n        >\n          Apply\n        </button>\n      </footer>\n    </div>\n  );\n};\n\nconst DateInput = ({ label, date }: { label: string; date: Date | null }) => (\n  <div className=\"flex flex-1 flex-col gap-1.5\">\n    <label className=\"ml-1 text-[12px] font-normal text-neutral-400 dark:text-neutral-500\">\n      {label}\n    </label>\n    <div className=\"flex cursor-pointer items-center justify-between rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-xs text-neutral-600 transition-colors hover:border-neutral-300 md:text-[13px] dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:border-neutral-700\">\n      <span>\n        {date\n          ? date.toLocaleDateString('en-US', {\n              month: 'short',\n              day: 'numeric',\n              year: 'numeric',\n            })\n          : 'Select Date'}\n      </span>\n      <ChevronDown\n        size={14}\n        className=\"text-neutral-400 dark:text-neutral-500\"\n      />\n    </div>\n  </div>\n);\n"
    }
  ]
}