{
  "name": "calendar",
  "type": "registry:ui",
  "dependencies": [
    "@internationalized/date",
    "@vueuse/core",
    "reka-ui"
  ],
  "registryDependencies": [
    "button",
    "native-select"
  ],
  "files": [
    {
      "path": "ui/calendar/Calendar.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarRootEmits, CalendarRootProps, DateValue } from \"reka-ui\"\nimport type { HTMLAttributes, Ref } from \"vue\"\nimport type { LayoutTypes } from \".\"\nimport { getLocalTimeZone, today } from \"@internationalized/date\"\nimport { createReusableTemplate, reactiveOmit, useVModel } from \"@vueuse/core\"\nimport { CalendarRoot, useDateFormatter, useForwardPropsEmits } from \"reka-ui\"\nimport { createYear, createYearRange, toDate } from \"reka-ui/date\"\nimport { computed, toRaw } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\"\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from \".\"\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes[\"class\"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {\n  modelValue: undefined,\n  layout: undefined,\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"layout\", \"placeholder\")\n\nconst placeholder = useVModel(props, \"placeholder\", emits, {\n  passive: true,\n  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst formatter = useDateFormatter(props.locale ?? \"en\")\n\nconst yearRange = computed(() => {\n  return props.yearRange ?? createYearRange({\n    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))\n      .cycle(\"year\", -100),\n\n    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))\n      .cycle(\"year\", 10),\n  })\n})\n\nconst [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()\nconst [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DefineMonthTemplate v-slot=\"{ date }\">\n    <div class=\"**:data-[slot=native-select-icon]:right-1\">\n      <div class=\"relative\">\n        <div class=\"absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none\">\n          {{ formatter.custom(toDate(date), { month: 'short' }) }}\n        </div>\n        <NativeSelect\n          class=\"text-xs h-8 pr-6 pl-2 text-transparent relative\"\n          @change=\"(e: Event) => {\n            placeholder = placeholder.set({\n              month: Number((e?.target as any)?.value),\n            })\n          }\"\n        >\n          <NativeSelectOption v-for=\"(month) in createYear({ dateObj: date })\" :key=\"month.toString()\" :value=\"month.month\" :selected=\"date.month === month.month\">\n            {{ formatter.custom(toDate(month), { month: 'short' }) }}\n          </NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </div>\n  </DefineMonthTemplate>\n\n  <DefineYearTemplate v-slot=\"{ date }\">\n    <div class=\"**:data-[slot=native-select-icon]:right-1\">\n      <div class=\"relative\">\n        <div class=\"absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none\">\n          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}\n        </div>\n        <NativeSelect\n          class=\"text-xs h-8 pr-6 pl-2 text-transparent relative\"\n          @change=\"(e: Event) => {\n            placeholder = placeholder.set({\n              year: Number((e?.target as any)?.value),\n            })\n          }\"\n        >\n          <NativeSelectOption v-for=\"(year) in yearRange\" :key=\"year.toString()\" :value=\"year.year\" :selected=\"date.year === year.year\">\n            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}\n          </NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </div>\n  </DefineYearTemplate>\n\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays, date }\"\n    v-bind=\"forwarded\"\n    v-model:placeholder=\"placeholder\"\n    data-slot=\"calendar\"\n    :class=\"cn('cn-calendar group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent', props.class)\"\n  >\n    <CalendarHeader class=\"pt-0\">\n      <nav class=\"flex items-center gap-1 absolute top-0 inset-x-0 justify-between\">\n        <CalendarPrevButton>\n          <slot name=\"calendar-prev-icon\" />\n        </CalendarPrevButton>\n        <CalendarNextButton>\n          <slot name=\"calendar-next-icon\" />\n        </CalendarNextButton>\n      </nav>\n\n      <slot name=\"calendar-heading\" :date=\"date\" :month=\"ReuseMonthTemplate\" :year=\"ReuseYearTemplate\">\n        <template v-if=\"layout === 'month-and-year'\">\n          <div class=\"flex items-center justify-center gap-1\">\n            <ReuseMonthTemplate :date=\"date\" />\n            <ReuseYearTemplate :date=\"date\" />\n          </div>\n        </template>\n        <template v-else-if=\"layout === 'month-only'\">\n          <div class=\"flex items-center justify-center gap-1\">\n            <ReuseMonthTemplate :date=\"date\" />\n            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}\n          </div>\n        </template>\n        <template v-else-if=\"layout === 'year-only'\">\n          <div class=\"flex items-center justify-center gap-1\">\n            {{ formatter.custom(toDate(date), { month: 'short' }) }}\n            <ReuseYearTemplate :date=\"date\" />\n          </div>\n        </template>\n        <template v-else>\n          <CalendarHeading />\n        </template>\n      </slot>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarCell.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarCellProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarCell, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    data-slot=\"calendar-cell\"\n    :class=\"cn('relative p-0 text-center text-sm flex-1 focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarCellTrigger.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarCellTriggerProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarCellTrigger, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes[\"class\"] }>(), {\n  as: \"button\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    data-slot=\"calendar-cell-trigger\"\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarGrid.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarGridProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarGrid, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    data-slot=\"calendar-grid\"\n    :class=\"cn('w-full border-collapse space-x-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarGridBody.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarGridBodyProps } from \"reka-ui\"\nimport { CalendarGridBody } from \"reka-ui\"\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody\n    data-slot=\"calendar-grid-body\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </CalendarGridBody>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarGridHead.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarGridHeadProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { CalendarGridHead } from \"reka-ui\"\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes[\"class\"] }>()\n</script>\n\n<template>\n  <CalendarGridHead\n    data-slot=\"calendar-grid-head\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </CalendarGridHead>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarGridRow.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarGridRowProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarGridRow, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow\n    data-slot=\"calendar-grid-row\"\n    :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGridRow>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarHeadCell.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarHeadCellProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarHeadCell, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell\n    data-slot=\"calendar-head-cell\"\n    :class=\"cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarHeader.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarHeaderProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarHeader, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader\n    data-slot=\"calendar-header\"\n    :class=\"cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeader>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarHeading.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarHeadingProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarHeading, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes[\"class\"] }>()\n\ndefineSlots<{\n  default: (props: { headingValue: string }) => any\n}>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    data-slot=\"calendar-heading\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarNextButton.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarNextProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarNext, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    data-slot=\"calendar-next-button\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <IconPlaceholder lucide=\"ChevronRightIcon\" tabler=\"IconChevronRight\" hugeicons=\"ArrowRight01Icon\" phosphor=\"CaretRightIcon\" remixicon=\"RiArrowRightSLine\" class=\"cn-rtl-flip size-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
    },
    {
      "path": "ui/calendar/CalendarPrevButton.vue",
      "type": "registry:ui",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarPrevProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CalendarPrev, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    data-slot=\"calendar-prev-button\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <IconPlaceholder lucide=\"ChevronLeftIcon\" tabler=\"IconChevronLeft\" hugeicons=\"ArrowLeft01Icon\" phosphor=\"CaretLeftIcon\" remixicon=\"RiArrowLeftSLine\" class=\"cn-rtl-flip size-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
    },
    {
      "path": "ui/calendar/index.ts",
      "type": "registry:ui",
      "content": "export { default as Calendar } from \"./Calendar.vue\"\nexport { default as CalendarCell } from \"./CalendarCell.vue\"\nexport { default as CalendarCellTrigger } from \"./CalendarCellTrigger.vue\"\nexport { default as CalendarGrid } from \"./CalendarGrid.vue\"\nexport { default as CalendarGridBody } from \"./CalendarGridBody.vue\"\nexport { default as CalendarGridHead } from \"./CalendarGridHead.vue\"\nexport { default as CalendarGridRow } from \"./CalendarGridRow.vue\"\nexport { default as CalendarHeadCell } from \"./CalendarHeadCell.vue\"\nexport { default as CalendarHeader } from \"./CalendarHeader.vue\"\nexport { default as CalendarHeading } from \"./CalendarHeading.vue\"\nexport { default as CalendarNextButton } from \"./CalendarNextButton.vue\"\nexport { default as CalendarPrevButton } from \"./CalendarPrevButton.vue\"\n\nexport type LayoutTypes = \"month-and-year\" | \"month-only\" | \"year-only\" | undefined\n"
    }
  ]
}