{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "schedule-date-base",
  "type": "registry:component",
  "title": "Schedule Date (base)",
  "description": "Theme-ready base variant of 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-muted-foreground transition-colors hover:text-foreground\"\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-foreground\">\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-muted-foreground transition-colors hover:text-foreground\"\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-muted-foreground\"\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-border bg-muted',\n                      isStart ? 'left-1/2 rounded-lg border-l' : 'left-0',\n                      isEnd ? 'right-1/2 rounded-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-border bg-foreground shadow-xl\">\n                    <span className=\"text-xs font-bold text-background\">\n                      {day}\n                    </span>\n                    <motion.div\n                      layoutId=\"activeThumb\"\n                      className=\"absolute bottom-1 h-[1.5px] w-2 rounded-lg bg-background shadow\"\n                    />\n                  </div>\n                ) : (\n                  <span\n                    className={cn(\n                      'relative z-10 text-[13px] font-normal transition-colors',\n                      isInRange\n                        ? 'text-foreground'\n                        : 'text-muted-foreground group-hover:text-foreground',\n                    )}\n                  >\n                    {day}\n                  </span>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"theme-injected mx-auto flex w-full max-w-195 flex-col overflow-hidden rounded-lg border border-border bg-background font-sans text-muted-foreground shadow-2xl\">\n      <div className=\"flex min-h-0 w-full flex-col md:min-h-105 md:flex-row\">\n        <aside className=\"no-scrollbar flex w-full shrink-0 flex-row gap-1 overflow-x-auto border-b border-border bg-muted py-3 md:w-52 md:flex-col md:border-r md:border-b-0\">\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-border md:block\" />\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-border bg-muted font-medium text-foreground'\n                      : 'bg-muted text-foreground'\n                    : 'hover:bg-muted hover:text-foreground',\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\n        <main className=\"flex min-w-0 flex-1 flex-col gap-6 overflow-hidden bg-background p-4 md:p-5\">\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          <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            <div className=\"shrink-0 snap-start\">\n              {renderMonthGrid(viewDate, true, false)}\n            </div>\n\n            <div className=\"hidden h-40 w-px shrink-0 self-center bg-border opacity-50 lg:block\" />\n\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-border bg-muted px-6\">\n        <button\n          onClick={onCancel}\n          className=\"rounded-lg border border-border px-4 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n        >\n          Cancel\n        </button>\n        <button\n          onClick={() => onApply?.(range)}\n          className=\"rounded-lg bg-foreground px-5 py-1.5 text-xs font-semibold text-background shadow-lg transition-all hover:opacity-90 active:scale-95\"\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-muted-foreground\">\n      {label}\n    </label>\n    <div className=\"flex cursor-pointer items-center justify-between rounded-lg border border-border bg-muted px-3 py-2 text-xs text-muted-foreground transition-colors hover:border-border md:text-[13px]\">\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 size={14} className=\"text-muted-foreground\" />\n    </div>\n  </div>\n);"
    }
  ]
}