{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "range-calendar",
  "title": "Range Calendar",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendar.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n  RangeCalendarHeader,\n  RangeCalendarHeading,\n  RangeCalendarNextButton,\n  RangeCalendarPrevButton,\n} from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    data-uipkge\n    data-slot=\"range-calendar\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarHeading />\n\n      <div class=\"flex items-center gap-1\">\n        <RangeCalendarPrevButton />\n        <RangeCalendarNextButton />\n      </div>\n    </RangeCalendarHeader>\n\n    <div class=\"mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell v-for=\"day in weekDays\" :key=\"day\">\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell v-for=\"weekDate in weekDates\" :key=\"weekDate.toString()\" :date=\"weekDate\">\n              <RangeCalendarCellTrigger :day=\"weekDate\" :month=\"month.value\" />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendar.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarCell.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarCellProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarCell, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    data-uipkge\n    data-slot=\"range-calendar-cell\"\n    :class=\"\n      cn(\n        '[&:has([data-selected])]:bg-accent [&:has([data-highlighted])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',\n        props.class,\n      )\n    \"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarCell.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarCellTrigger.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarCellTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarCellTrigger, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button'\n\nconst props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'button',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    data-uipkge\n    data-slot=\"range-calendar-trigger\"\n    :class=\"\n      cn(\n        buttonVariants({ variant: 'ghost' }),\n        'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n        // Selection Start\n        'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n        // Selection End\n        'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n        // Outside months\n        'data-[outside-view]:text-muted-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        props.class,\n      )\n    \"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarCellTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarGrid.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarGridProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarGrid, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    data-uipkge\n    data-slot=\"range-calendar-grid\"\n    :class=\"cn('w-full border-collapse space-x-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarGrid.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarGridBody.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarGridBodyProps } from 'reka-ui'\nimport { RangeCalendarGridBody } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody data-uipkge data-slot=\"range-calendar-grid-body\" v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarGridBody.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarGridHead.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarGridHeadProps } from 'reka-ui'\nimport { RangeCalendarGridHead } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead data-uipkge data-slot=\"range-calendar-grid-head\" v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarGridHead.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarGridRow.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarGridRowProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarGridRow, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow\n    data-uipkge\n    data-slot=\"range-calendar-grid-row\"\n    :class=\"cn('flex', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarGridRow.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarHeadCell.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarHeadCellProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarHeadCell, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    data-uipkge\n    data-slot=\"range-calendar-head-cell\"\n    :class=\"cn('text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarHeadCell.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarHeader.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarHeaderProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarHeader, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader\n    data-uipkge\n    data-slot=\"range-calendar-header\"\n    :class=\"cn('relative flex w-full items-center justify-center pt-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarHeading.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarHeadingProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarHeading, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadingProps & { 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  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    data-uipkge\n    data-slot=\"range-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  </RangeCalendarHeading>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarHeading.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarNextButton.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarNextProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    data-uipkge\n    data-slot=\"range-calendar-next-button\"\n    :class=\"\n      cn(\n        buttonVariants({ variant: 'outline' }),\n        'absolute right-1',\n        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        props.class,\n      )\n    \"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarNextButton.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/RangeCalendarPrevButton.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { RangeCalendarPrevProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    data-uipkge\n    data-slot=\"range-calendar-prev-button\"\n    :class=\"\n      cn(\n        buttonVariants({ variant: 'outline' }),\n        'absolute left-1',\n        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        props.class,\n      )\n    \"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"size-4\" aria-hidden=\"true\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/RangeCalendarPrevButton.vue"
    },
    {
      "path": "packages/registry-vue/components/range-calendar/index.ts",
      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/range-calendar/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json"
  ],
  "description": "Calendar variant for from/to date selection — click two dates and the range fills in between. Same min/max and disabled-date support as the single-date Calendar.",
  "categories": [
    "date-time"
  ]
}