{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "range-calendar",
	"title": "Range Calendar",
	"type": "registry:ui",
	"description": "Kura Range Calendar component source.",
	"devDependencies": [
		"@internationalized/date@^3.12.2",
		"bits-ui@^2.18.1",
		"phosphor-svelte@^3.1.0"
	],
	"registryDependencies": [
		"button",
		"utils"
	],
	"files": [
		{
			"content": "import Root from './range-calendar.svelte';\nimport Cell from './range-calendar-cell.svelte';\nimport Day from './range-calendar-day.svelte';\nimport Grid from './range-calendar-grid.svelte';\nimport Header from './range-calendar-header.svelte';\nimport Months from './range-calendar-months.svelte';\nimport GridRow from './range-calendar-grid-row.svelte';\nimport Heading from './range-calendar-heading.svelte';\nimport HeadCell from './range-calendar-head-cell.svelte';\nimport NextButton from './range-calendar-next-button.svelte';\nimport PrevButton from './range-calendar-prev-button.svelte';\nimport MonthSelect from './range-calendar-month-select.svelte';\nimport YearSelect from './range-calendar-year-select.svelte';\nimport Caption from './range-calendar-caption.svelte';\nimport Nav from './range-calendar-nav.svelte';\nimport Month from './range-calendar-month.svelte';\nimport GridBody from './range-calendar-grid-body.svelte';\nimport GridHead from './range-calendar-grid-head.svelte';\n\nexport {\n  Day,\n  Cell,\n  Grid,\n  Header,\n  Months,\n  GridRow,\n  Heading,\n  GridBody,\n  GridHead,\n  HeadCell,\n  NextButton,\n  PrevButton,\n  MonthSelect,\n  YearSelect,\n  Caption,\n  Nav,\n  Month,\n  //\n  Root as RangeCalendar\n};\n",
			"type": "registry:file",
			"target": "range-calendar/index.ts"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { ComponentProps } from 'svelte';\n  import type RangeCalendar from './range-calendar.svelte';\n  import RangeCalendarMonthSelect from './range-calendar-month-select.svelte';\n  import RangeCalendarYearSelect from './range-calendar-year-select.svelte';\n  import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';\n\n  let {\n    captionLayout,\n    months,\n    monthFormat,\n    years,\n    yearFormat,\n    month,\n    locale,\n    placeholder = $bindable(),\n    monthIndex = 0\n  }: {\n    captionLayout: ComponentProps<typeof RangeCalendar>['captionLayout'];\n    months: ComponentProps<typeof RangeCalendarMonthSelect>['months'];\n    monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>['monthFormat'];\n    years: ComponentProps<typeof RangeCalendarYearSelect>['years'];\n    yearFormat: ComponentProps<typeof RangeCalendarYearSelect>['yearFormat'];\n    month: DateValue;\n    placeholder: DateValue | undefined;\n    locale: string;\n    monthIndex: number;\n  } = $props();\n\n  function formatYear(date: DateValue) {\n    const dateObj = date.toDate(getLocalTimeZone());\n    if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());\n    return new DateFormatter(locale, { year: yearFormat }).format(dateObj);\n  }\n\n  function formatMonth(date: DateValue) {\n    const dateObj = date.toDate(getLocalTimeZone());\n    if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);\n    return new DateFormatter(locale, { month: monthFormat }).format(dateObj);\n  }\n</script>\n\n{#snippet MonthSelect()}\n  <RangeCalendarMonthSelect\n    class=\"font-mono text-xs font-semibold tracking-[0.14em] uppercase\"\n    {months}\n    {monthFormat}\n    value={month.month}\n    onchange={(e) => {\n      if (!placeholder) return;\n      const v = Number.parseInt(e.currentTarget.value);\n      const newPlaceholder = placeholder.set({ month: v });\n      placeholder = newPlaceholder.subtract({ months: monthIndex });\n    }}\n  />\n{/snippet}\n\n{#snippet YearSelect()}\n  <RangeCalendarYearSelect\n    class=\"font-mono text-xs font-semibold tracking-[0.14em] uppercase\"\n    {years}\n    {yearFormat}\n    value={month.year}\n  />\n{/snippet}\n\n{#if captionLayout === 'dropdown'}\n  {@render MonthSelect()}\n  {@render YearSelect()}\n{:else if captionLayout === 'dropdown-months'}\n  {@render MonthSelect()}\n  {#if placeholder}\n    <span class=\"font-mono text-xs font-semibold tracking-[0.14em] text-zinc-100 uppercase\"\n      >{formatYear(placeholder)}</span\n    >\n  {/if}\n{:else if captionLayout === 'dropdown-years'}\n  {#if placeholder}\n    <span class=\"font-mono text-xs font-semibold tracking-[0.14em] text-zinc-100 uppercase\"\n      >{formatMonth(placeholder)}</span\n    >\n  {/if}\n  {@render YearSelect()}\n{:else}\n  <span class=\"font-mono text-xs font-semibold tracking-[0.14em] text-zinc-100 uppercase\"\n    >{formatMonth(month)} {formatYear(month)}</span\n  >\n{/if}\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-caption.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.CellProps = $props();\n</script>\n\n<RangeCalendarPrimitive.Cell\n  bind:ref\n  class={cn(\n    'relative size-(--cell-size) border-r border-b border-zinc-900 p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:has([data-range-middle])]:bg-[#b9d765]/20 [&:has([data-selected])]:bg-[#b9d765]/15 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) [&:has([data-range-start])]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-cell.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.DayProps = $props();\n</script>\n\n<RangeCalendarPrimitive.Day\n  bind:ref\n  class={cn(\n    'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) border border-transparent p-0 font-mono text-xs leading-none font-medium whitespace-nowrap text-zinc-300 select-none',\n    'not-data-selected:hover:border-zinc-700 not-data-selected:hover:bg-zinc-950 not-data-selected:hover:text-white',\n    '[&[data-today]:not([data-selected])]:border-[#d0e891]/60 [&[data-today]:not([data-selected])]:bg-zinc-950 [&[data-today]:not([data-selected])]:text-[#d0e891] [&[data-today][data-disabled]]:text-zinc-500 data-[range-middle]:rounded-none',\n    // range Start\n    'data-[range-start]:border-[#b9d765] data-[range-start]:bg-[#b9d765] data-[range-start]:text-[#101207] data-[range-start]:hover:text-[#101207]',\n    // range End\n    'data-[range-end]:border-[#b9d765] data-[range-end]:bg-[#b9d765] data-[range-end]:text-[#101207] data-[range-end]:hover:text-[#101207]',\n    // Outside months\n    '[&[data-outside-month]:not([data-selected])]:text-zinc-700 [&[data-outside-month]:not([data-selected])]:hover:text-zinc-400',\n    // Disabled\n    'data-[disabled]:pointer-events-none data-[disabled]:text-zinc-600 data-[disabled]:opacity-50',\n    // Unavailable\n    'data-[unavailable]:line-through',\n    'data-[range-middle]:bg-[#b9d765]/20 data-[range-middle]:text-zinc-100 dark:data-[range-middle]:hover:bg-[#b9d765]/20',\n    // focus\n    'focus:relative focus:border-zinc-300 focus:ring-2 focus:ring-zinc-300/30',\n    // inner spans\n    '[&>span]:text-xs [&>span]:opacity-70',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-day.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.GridBodyProps = $props();\n</script>\n\n<RangeCalendarPrimitive.GridBody bind:ref class={cn('bg-background', className)} {...restProps} />\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-grid-body.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.GridHeadProps = $props();\n</script>\n\n<RangeCalendarPrimitive.GridHead bind:ref class={cn('bg-zinc-950/70', className)} {...restProps} />\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-grid-head.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.GridRowProps = $props();\n</script>\n\n<RangeCalendarPrimitive.GridRow\n  bind:ref\n  class={cn('flex divide-x divide-zinc-900', className)}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-grid-row.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.GridProps = $props();\n</script>\n\n<RangeCalendarPrimitive.Grid\n  bind:ref\n  class={cn('flex w-full border-collapse flex-col border border-zinc-900 bg-background', className)}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-grid.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.HeadCellProps = $props();\n</script>\n\n<RangeCalendarPrimitive.HeadCell\n  bind:ref\n  class={cn(\n    'w-(--cell-size) py-1 font-mono text-[0.7rem] font-semibold tracking-[0.14em] text-zinc-500 uppercase',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-head-cell.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.HeaderProps = $props();\n</script>\n\n<RangeCalendarPrimitive.Header\n  bind:ref\n  class={cn(\n    'flex h-(--cell-size) w-full items-center justify-center gap-1.5 border-b border-zinc-900 text-sm font-medium',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-header.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: RangeCalendarPrimitive.HeadingProps = $props();\n</script>\n\n<RangeCalendarPrimitive.Heading\n  bind:ref\n  class={cn(\n    'px-(--cell-size) font-mono text-xs font-semibold tracking-[0.14em] text-zinc-100 uppercase',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-heading.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn, type WithoutChildrenOrChild } from '$UTILS$.js';\n  import CaretDownIcon from 'phosphor-svelte/lib/CaretDown';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    value,\n    onchange,\n    ...restProps\n  }: WithoutChildrenOrChild<RangeCalendarPrimitive.MonthSelectProps> = $props();\n</script>\n\n<span\n  class={cn(\n    'relative flex border border-zinc-800 bg-zinc-950 text-zinc-100 has-focus:border-zinc-300 has-focus:ring-2 has-focus:ring-zinc-300/30',\n    className\n  )}\n>\n  <RangeCalendarPrimitive.MonthSelect bind:ref class=\"absolute inset-0 opacity-0\" {...restProps}>\n    {#snippet child({ props, monthItems, selectedMonthItem })}\n      <select {...props} {value} {onchange}>\n        {#each monthItems as monthItem (monthItem.value)}\n          <option\n            value={monthItem.value}\n            selected={value !== undefined\n              ? monthItem.value === value\n              : monthItem.value === selectedMonthItem.value}\n          >\n            {monthItem.label}\n          </option>\n        {/each}\n      </select>\n      <span\n        class=\"flex h-(--cell-size) items-center gap-1 ps-2 pe-1 text-sm font-medium text-zinc-100 select-none [&>svg]:size-3.5 [&>svg]:text-zinc-500\"\n        aria-hidden=\"true\"\n      >\n        {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}\n        <CaretDownIcon class={cn('size-4', className)} />\n      </span>\n    {/snippet}\n  </RangeCalendarPrimitive.MonthSelect>\n</span>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-month-select.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { type WithElementRef, cn } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<div {...restProps} bind:this={ref} class={cn('flex flex-col gap-3', className)}>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-month.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  class={cn('relative flex flex-col gap-4 text-zinc-100 md:flex-row', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-months.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<nav\n  {...restProps}\n  bind:this={ref}\n  class={cn(\n    'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1 text-zinc-300',\n    className\n  )}\n>\n  {@render children?.()}\n</nav>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-nav.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import CaretRightIcon from 'phosphor-svelte/lib/CaretRight';\n  import { buttonVariants, type ButtonVariant } from '$UI$/button/index.js';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    variant = 'ghost',\n    ...restProps\n  }: RangeCalendarPrimitive.NextButtonProps & {\n    variant?: ButtonVariant;\n  } = $props();\n</script>\n\n{#snippet Fallback()}\n  <CaretRightIcon class={cn('size-4', className)} />\n{/snippet}\n\n<RangeCalendarPrimitive.NextButton\n  bind:ref\n  class={cn(\n    buttonVariants({ variant }),\n    'size-(--cell-size) rounded-full border border-zinc-800 bg-transparent p-0 text-zinc-300 select-none hover:border-[#d0e891] hover:bg-[#b9d765] hover:text-[#101207] disabled:opacity-50 rtl:rotate-180',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</RangeCalendarPrimitive.NextButton>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-next-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeft';\n  import { buttonVariants, type ButtonVariant } from '$UI$/button/index.js';\n  import { cn } from '$UTILS$.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    variant = 'ghost',\n    ...restProps\n  }: RangeCalendarPrimitive.PrevButtonProps & {\n    variant?: ButtonVariant;\n  } = $props();\n</script>\n\n{#snippet Fallback()}\n  <CaretLeftIcon class={cn('size-4', className)} />\n{/snippet}\n\n<RangeCalendarPrimitive.PrevButton\n  bind:ref\n  class={cn(\n    buttonVariants({ variant }),\n    'size-(--cell-size) rounded-full border border-zinc-800 bg-transparent p-0 text-zinc-300 select-none hover:border-[#d0e891] hover:bg-[#b9d765] hover:text-[#101207] disabled:opacity-50 rtl:rotate-180',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</RangeCalendarPrimitive.PrevButton>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-prev-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import { cn, type WithoutChildrenOrChild } from '$UTILS$.js';\n  import CaretDownIcon from 'phosphor-svelte/lib/CaretDown';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    value,\n    ...restProps\n  }: WithoutChildrenOrChild<RangeCalendarPrimitive.YearSelectProps> = $props();\n</script>\n\n<span\n  class={cn(\n    'relative flex border border-zinc-800 bg-zinc-950 text-zinc-100 has-focus:border-zinc-300 has-focus:ring-2 has-focus:ring-zinc-300/30',\n    className\n  )}\n>\n  <RangeCalendarPrimitive.YearSelect bind:ref class=\"absolute inset-0 opacity-0\" {...restProps}>\n    {#snippet child({ props, yearItems, selectedYearItem })}\n      <select {...props} {value}>\n        {#each yearItems as yearItem (yearItem.value)}\n          <option\n            value={yearItem.value}\n            selected={value !== undefined\n              ? yearItem.value === value\n              : yearItem.value === selectedYearItem.value}\n          >\n            {yearItem.label}\n          </option>\n        {/each}\n      </select>\n      <span\n        class=\"flex h-(--cell-size) items-center gap-1 ps-2 pe-1 text-sm font-medium text-zinc-100 select-none [&>svg]:size-3.5 [&>svg]:text-zinc-500\"\n        aria-hidden=\"true\"\n      >\n        {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}\n        <CaretDownIcon class={cn('size-4', className)} />\n      </span>\n    {/snippet}\n  </RangeCalendarPrimitive.YearSelect>\n</span>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar-year-select.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';\n  import * as RangeCalendar from './index.js';\n  import { cn, type WithoutChildrenOrChild } from '$UTILS$.js';\n  import type { ButtonVariant } from '$UI$/button/index.js';\n  import type { Snippet } from 'svelte';\n  import { isEqualMonth, type DateValue } from '@internationalized/date';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    placeholder = $bindable(),\n    weekdayFormat = 'short',\n    class: className,\n    buttonVariant = 'ghost',\n    captionLayout = 'label',\n    locale = 'en-US',\n    months: monthsProp,\n    years,\n    monthFormat: monthFormatProp,\n    yearFormat = 'numeric',\n    day,\n    disableDaysOutsideMonth = false,\n    ...restProps\n  }: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {\n    buttonVariant?: ButtonVariant;\n    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';\n    months?: RangeCalendarPrimitive.MonthSelectProps['months'];\n    years?: RangeCalendarPrimitive.YearSelectProps['years'];\n    monthFormat?: RangeCalendarPrimitive.MonthSelectProps['monthFormat'];\n    yearFormat?: RangeCalendarPrimitive.YearSelectProps['yearFormat'];\n    day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;\n  } = $props();\n\n  const monthFormat = $derived.by(() => {\n    if (monthFormatProp) return monthFormatProp;\n    if (captionLayout.startsWith('dropdown')) return 'short';\n    return 'long';\n  });\n</script>\n\n<RangeCalendarPrimitive.Root\n  bind:ref\n  bind:value\n  bind:placeholder\n  {weekdayFormat}\n  {disableDaysOutsideMonth}\n  class={cn(\n    'group/calendar border border-zinc-800 bg-background p-3 text-zinc-100 [--cell-radius:0] [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',\n    className\n  )}\n  {locale}\n  {monthFormat}\n  {yearFormat}\n  {...restProps}\n>\n  {#snippet children({ months, weekdays })}\n    <RangeCalendar.Months>\n      <RangeCalendar.Nav>\n        <RangeCalendar.PrevButton variant={buttonVariant} />\n        <RangeCalendar.NextButton variant={buttonVariant} />\n      </RangeCalendar.Nav>\n      {#each months as month, monthIndex (month)}\n        <RangeCalendar.Month>\n          <RangeCalendar.Header>\n            <RangeCalendar.Caption\n              {captionLayout}\n              months={monthsProp}\n              {monthFormat}\n              {years}\n              {yearFormat}\n              month={month.value}\n              bind:placeholder\n              {locale}\n              {monthIndex}\n            />\n          </RangeCalendar.Header>\n\n          <RangeCalendar.Grid>\n            <RangeCalendar.GridHead>\n              <RangeCalendar.GridRow class=\"select-none border-b border-zinc-900\">\n                {#each weekdays as weekday, i (i)}\n                  <RangeCalendar.HeadCell>\n                    {weekday.slice(0, 2)}\n                  </RangeCalendar.HeadCell>\n                {/each}\n              </RangeCalendar.GridRow>\n            </RangeCalendar.GridHead>\n            <RangeCalendar.GridBody>\n              {#each month.weeks as weekDates (weekDates)}\n                <RangeCalendar.GridRow class=\"w-full\">\n                  {#each weekDates as date (date)}\n                    <RangeCalendar.Cell {date} month={month.value}>\n                      {#if day}\n                        {@render day({\n                          day: date,\n                          outsideMonth: !isEqualMonth(date, month.value)\n                        })}\n                      {:else}\n                        <RangeCalendar.Day />\n                      {/if}\n                    </RangeCalendar.Cell>\n                  {/each}\n                </RangeCalendar.GridRow>\n              {/each}\n            </RangeCalendar.GridBody>\n          </RangeCalendar.Grid>\n        </RangeCalendar.Month>\n      {/each}\n    </RangeCalendar.Months>\n  {/snippet}\n</RangeCalendarPrimitive.Root>\n",
			"type": "registry:file",
			"target": "range-calendar/range-calendar.svelte"
		}
	]
}