{
  "name": "calendar",
  "title": "Calendar",
  "description": "Kura Calendar component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { ComponentProps } from 'svelte';\n  import type Calendar from './calendar.svelte';\n  import CalendarMonthSelect from './calendar-month-select.svelte';\n  import CalendarYearSelect from './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 Calendar>['captionLayout'];\n    months: ComponentProps<typeof CalendarMonthSelect>['months'];\n    monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];\n    years: ComponentProps<typeof CalendarYearSelect>['years'];\n    yearFormat: ComponentProps<typeof CalendarYearSelect>['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  <CalendarMonthSelect\n    class=\"text-sm font-medium\"\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  <CalendarYearSelect class=\"text-sm font-medium\" {years} {yearFormat} value={month.year} />\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=\"text-sm font-medium text-foreground\">{formatYear(placeholder)}</span>\n  {/if}\n{:else if captionLayout === 'dropdown-years'}\n  {#if placeholder}\n    <span class=\"text-sm font-medium text-foreground\">{formatMonth(placeholder)}</span>\n  {/if}\n  {@render YearSelect()}\n{:else}\n  <span class=\"text-sm font-medium text-foreground\">{formatMonth(month)} {formatYear(month)}</span>\n{/if}\n",
      "path": "calendar/calendar-caption.svelte",
      "_imports_": [
        {
          "import": "./calendar.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-month-select.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-month-select.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-year-select.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-year-select.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.CellProps = $props();\n</script>\n\n<CalendarPrimitive.Cell\n  bind:ref\n  class={cn(\n    'relative size-(--cell-size) border-r border-b border-border p-0 text-center text-xs focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-none [&:last-child[data-selected]_[data-bits-day]]:rounded-e-none',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-cell.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn } from '$lib/utils.js';\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.DayProps = $props();\n</script>\n\n<CalendarPrimitive.Day\n  bind:ref\n  class={cn(\n    'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-none border border-transparent p-0 text-xs font-medium leading-none whitespace-nowrap text-muted-foreground select-none',\n    '[&:last-child[data-selected=true]_button]:rounded-r-none',\n    'not-data-selected:hover:border-border not-data-selected:hover:bg-muted not-data-selected:hover:text-foreground',\n    '[&[data-today]:not([data-selected])]:border-link/60 [&[data-today]:not([data-selected])]:bg-muted [&[data-today]:not([data-selected])]:text-link [&[data-today][data-disabled]]:text-muted-foreground',\n    'data-[selected]:border-primary data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-primary-foreground',\n    // Outside months\n    '[&[data-outside-month]:not([data-selected])]:text-muted-foreground/50 [&[data-outside-month]:not([data-selected])]:hover:text-muted-foreground',\n    // Disabled\n    'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground/50 data-[disabled]:opacity-50',\n    // Unavailable\n    'data-[unavailable]:text-muted-foreground/50 data-[unavailable]:line-through',\n    // focus\n    'focus:relative focus:border-ring focus:ring-1 focus:ring-ring/50',\n    // inner spans\n    '[&>span]:text-xs [&>span]:opacity-70',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-day.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.GridBodyProps = $props();\n</script>\n\n<CalendarPrimitive.GridBody bind:ref class={cn('bg-background', className)} {...restProps} />\n",
      "path": "calendar/calendar-grid-body.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.GridHeadProps = $props();\n</script>\n\n<CalendarPrimitive.GridHead bind:ref class={cn('bg-muted/70', className)} {...restProps} />\n",
      "path": "calendar/calendar-grid-head.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.GridRowProps = $props();\n</script>\n\n<CalendarPrimitive.GridRow\n  bind:ref\n  class={cn('flex divide-x divide-border', className)}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-grid-row.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.GridProps = $props();\n</script>\n\n<CalendarPrimitive.Grid\n  bind:ref\n  class={cn('flex w-full border-collapse flex-col border border-border bg-background', className)}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-grid.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.HeadCellProps = $props();\n</script>\n\n<CalendarPrimitive.HeadCell\n  bind:ref\n  class={cn('w-(--cell-size) py-1 text-xs font-medium text-muted-foreground', className)}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-head-cell.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.HeaderProps = $props();\n</script>\n\n<CalendarPrimitive.Header\n  bind:ref\n  class={cn(\n    'flex h-(--cell-size) w-full items-center justify-center gap-1.5 border-b border-border text-sm font-medium',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-header.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: CalendarPrimitive.HeadingProps = $props();\n</script>\n\n<CalendarPrimitive.Heading\n  bind:ref\n  class={cn('px-(--cell-size) text-sm font-medium text-foreground', className)}\n  {...restProps}\n/>\n",
      "path": "calendar/calendar-heading.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';\n  import CaretDownIcon from 'phosphor-svelte/lib/CaretDownIcon';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    value,\n    onchange,\n    ...restProps\n  }: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();\n</script>\n\n<span\n  class={cn(\n    'relative flex h-(--cell-size) border border-border bg-muted text-foreground has-focus:border-ring has-focus:ring-1 has-focus:ring-ring/50',\n    className\n  )}\n>\n  <CalendarPrimitive.MonthSelect\n    bind:ref\n    class=\"bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0\"\n    {...restProps}\n  >\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-full items-center gap-1 ps-2 pe-1 text-sm font-medium text-foreground select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground\"\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  </CalendarPrimitive.MonthSelect>\n</span>\n",
      "path": "calendar/calendar-month-select.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { type WithElementRef, cn } from '$lib/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 w-full flex-col gap-3', className)}>\n  {@render children?.()}\n</div>\n",
      "path": "calendar/calendar-month.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/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-foreground md:flex-row', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "calendar/calendar-months.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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-muted-foreground',\n    className\n  )}\n>\n  {@render children?.()}\n</nav>\n",
      "path": "calendar/calendar-nav.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import CaretRightIcon from 'phosphor-svelte/lib/CaretRightIcon';\n  import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    variant = 'ghost',\n    ...restProps\n  }: CalendarPrimitive.NextButtonProps & {\n    variant?: ButtonVariant;\n  } = $props();\n</script>\n\n{#snippet Fallback()}\n  <CaretRightIcon class={cn('size-4', className)} />\n{/snippet}\n\n<CalendarPrimitive.NextButton\n  bind:ref\n  class={cn(\n    buttonVariants({ variant }),\n    'size-(--cell-size) rounded-none border border-border bg-transparent p-0 text-muted-foreground select-none hover:border-link hover:bg-primary hover:text-primary-foreground 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</CalendarPrimitive.NextButton>\n",
      "path": "calendar/calendar-next-button.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';\n  import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    variant = 'ghost',\n    ...restProps\n  }: CalendarPrimitive.PrevButtonProps & {\n    variant?: ButtonVariant;\n  } = $props();\n</script>\n\n{#snippet Fallback()}\n  <CaretLeftIcon class={cn('size-4', className)} />\n{/snippet}\n\n<CalendarPrimitive.PrevButton\n  bind:ref\n  class={cn(\n    buttonVariants({ variant }),\n    'size-(--cell-size) rounded-none border border-border bg-transparent p-0 text-muted-foreground select-none hover:border-link hover:bg-primary hover:text-primary-foreground 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</CalendarPrimitive.PrevButton>\n",
      "path": "calendar/calendar-prev-button.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';\n  import CaretDownIcon from 'phosphor-svelte/lib/CaretDownIcon';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    value,\n    ...restProps\n  }: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();\n</script>\n\n<span\n  class={cn(\n    'relative flex h-(--cell-size) border border-border bg-muted text-foreground has-focus:border-ring has-focus:ring-1 has-focus:ring-ring/50',\n    className\n  )}\n>\n  <CalendarPrimitive.YearSelect\n    bind:ref\n    class=\"dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0\"\n    {...restProps}\n  >\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-full items-center gap-1 ps-2 pe-1 text-sm font-medium text-foreground select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground\"\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  </CalendarPrimitive.YearSelect>\n</span>\n",
      "path": "calendar/calendar-year-select.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Calendar as CalendarPrimitive } from 'bits-ui';\n  import * as Calendar from './index.js';\n  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';\n  import type { ButtonVariant } from '../button/button.svelte';\n  import { isEqualMonth, type DateValue } from '@internationalized/date';\n  import type { Snippet } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    placeholder = $bindable(),\n    class: className,\n    weekdayFormat = 'short',\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<CalendarPrimitive.RootProps> & {\n    buttonVariant?: ButtonVariant;\n    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';\n    months?: CalendarPrimitive.MonthSelectProps['months'];\n    years?: CalendarPrimitive.YearSelectProps['years'];\n    monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];\n    yearFormat?: CalendarPrimitive.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<!--\nDiscriminated Unions + Destructing (required for bindable) do not\nget along, so we shut typescript up by casting `value` to `never`.\n-->\n<CalendarPrimitive.Root\n  bind:value={value as never}\n  bind:ref\n  bind:placeholder\n  {weekdayFormat}\n  {disableDaysOutsideMonth}\n  class={cn(\n    'group/calendar border border-border bg-background p-2 text-foreground [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',\n    className\n  )}\n  {locale}\n  {monthFormat}\n  {yearFormat}\n  {...restProps}\n>\n  {#snippet children({ months, weekdays })}\n    <Calendar.Months>\n      <Calendar.Nav>\n        <Calendar.PrevButton variant={buttonVariant} />\n        <Calendar.NextButton variant={buttonVariant} />\n      </Calendar.Nav>\n      {#each months as month, monthIndex (month)}\n        <Calendar.Month>\n          <Calendar.Header>\n            <Calendar.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          </Calendar.Header>\n          <Calendar.Grid>\n            <Calendar.GridHead>\n              <Calendar.GridRow class=\"select-none border-b border-border\">\n                {#each weekdays as weekday, i (i)}\n                  <Calendar.HeadCell>\n                    {weekday.slice(0, 2)}\n                  </Calendar.HeadCell>\n                {/each}\n              </Calendar.GridRow>\n            </Calendar.GridHead>\n            <Calendar.GridBody>\n              {#each month.weeks as weekDates (weekDates)}\n                <Calendar.GridRow class=\"w-full\">\n                  {#each weekDates as date (date)}\n                    <Calendar.Cell {date} month={month.value}>\n                      {#if day}\n                        {@render day({\n                          day: date,\n                          outsideMonth: !isEqualMonth(date, month.value)\n                        })}\n                      {:else}\n                        <Calendar.Day />\n                      {/if}\n                    </Calendar.Cell>\n                  {/each}\n                </Calendar.GridRow>\n              {/each}\n            </Calendar.GridBody>\n          </Calendar.Grid>\n        </Calendar.Month>\n      {/each}\n    </Calendar.Months>\n  {/snippet}\n</CalendarPrimitive.Root>\n",
      "path": "calendar/calendar.svelte",
      "_imports_": [
        {
          "import": "./index.js",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "../button/button.svelte",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/button.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './calendar.svelte';\nimport Cell from './calendar-cell.svelte';\nimport Day from './calendar-day.svelte';\nimport Grid from './calendar-grid.svelte';\nimport Header from './calendar-header.svelte';\nimport Months from './calendar-months.svelte';\nimport GridRow from './calendar-grid-row.svelte';\nimport Heading from './calendar-heading.svelte';\nimport GridBody from './calendar-grid-body.svelte';\nimport GridHead from './calendar-grid-head.svelte';\nimport HeadCell from './calendar-head-cell.svelte';\nimport NextButton from './calendar-next-button.svelte';\nimport PrevButton from './calendar-prev-button.svelte';\nimport MonthSelect from './calendar-month-select.svelte';\nimport YearSelect from './calendar-year-select.svelte';\nimport Month from './calendar-month.svelte';\nimport Nav from './calendar-nav.svelte';\nimport Caption from './calendar-caption.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  Nav,\n  Month,\n  YearSelect,\n  MonthSelect,\n  Caption,\n  //\n  Root as Calendar\n};\n",
      "path": "calendar/index.ts",
      "_imports_": [
        {
          "import": "./calendar.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-cell.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-cell.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-day.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-day.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-grid.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-grid.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-header.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-header.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-months.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-months.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-grid-row.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-grid-row.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-heading.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-heading.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-grid-body.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-grid-body.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-grid-head.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-grid-head.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-head-cell.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-head-cell.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-next-button.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-next-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-prev-button.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-prev-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-month-select.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-month-select.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-year-select.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-year-select.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-month.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-month.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-nav.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-nav.svelte"
          },
          "meta": {}
        },
        {
          "import": "./calendar-caption.svelte",
          "item": "calendar",
          "file": {
            "type": "ui",
            "path": "calendar/calendar-caption.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils",
    "button"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "@internationalized/date",
      "version": "^3.12.2"
    },
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    },
    {
      "ecosystem": "js",
      "name": "phosphor-svelte",
      "version": "^3.1.0"
    }
  ],
  "devDependencies": []
}