{
  "name": "DatePickerWithIndependentMonths",
  "type": "registry:example",
  "dependencies": [
    "reka-ui"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "popover",
    "range-calendar"
  ],
  "files": [
    {
      "path": "example/DatePickerWithIndependentMonths.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <Calendar class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}