{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "calendar",
  "title": "Calendar",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/calendar/Calendar.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport type { LayoutTypes } from '.'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { createReusableTemplate, reactiveOmit } from '@vueuse/core'\nimport { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createYear, toDate } from 'reka-ui/date'\nimport { computed, ref, toRaw } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarCell,\n  CalendarCellTrigger,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHead,\n  CalendarGridRow,\n  CalendarHeadCell,\n  CalendarHeader,\n  CalendarHeading,\n  CalendarNextButton,\n  CalendarPrevButton,\n  NativeSelect,\n  NativeSelectOption,\n} from '.'\n\nconst props = withDefaults(\n  defineProps<CalendarRootProps & { class?: HTMLAttributes['class']; layout?: LayoutTypes; yearRange?: DateValue[] }>(),\n  {\n    modelValue: undefined,\n    layout: undefined,\n  },\n)\nconst emits = defineEmits<CalendarRootEmits>()\n\n// Fix: Don't pass defaultValue or defaultPlaceholder to reka-ui to avoid .copy() errors\n// Only pass the props that reka-ui needs\nconst delegatedProps = reactiveOmit(props, [\n  'class',\n  'layout',\n  'placeholder',\n  'modelValue',\n  'defaultValue',\n  'defaultPlaceholder',\n])\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter(props.locale ?? 'en')\n\nconst yearRange = computed(() => {\n  if (props.yearRange) return props.yearRange\n  const base = toRaw(props.placeholder) ?? today(getLocalTimeZone())\n  const start = props?.minValue ?? base.add({ years: -100 })\n  const end = props?.maxValue ?? base.add({ years: 10 })\n  const years: DateValue[] = []\n  let current = start\n  while (current.compare(end) <= 0) {\n    years.push(current)\n    current = current.add({ years: 1 })\n  }\n  return years\n})\n\nconst [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()\nconst [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()\n\n// Fix: Use simple ref for placeholder, not useVModel, to avoid .copy() error in reka-ui\nconst internalPlaceholder = ref(props.placeholder ?? today(getLocalTimeZone()))\n\nfunction setMonth(e: Event) {\n  const v = Number((e?.target as HTMLSelectElement | null)?.value)\n  internalPlaceholder.value = (internalPlaceholder.value as DateValue).set({ month: v })\n}\nfunction setYear(e: Event) {\n  const v = Number((e?.target as HTMLSelectElement | null)?.value)\n  internalPlaceholder.value = (internalPlaceholder.value as DateValue).set({ year: v })\n}\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=\"pointer-events-none absolute inset-0 flex h-full items-center pl-2 text-sm\">\n          {{ formatter.custom(toDate(date), { month: 'short' }) }}\n        </div>\n        <NativeSelect class=\"relative h-8 pr-6 pl-2 text-xs text-transparent\" @change=\"setMonth\">\n          <NativeSelectOption\n            v-for=\"month in createYear({ dateObj: date })\"\n            :key=\"month.toString()\"\n            :value=\"month.month\"\n            :selected=\"date.month === month.month\"\n          >\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=\"pointer-events-none absolute inset-0 flex h-full items-center pl-2 text-sm\">\n          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}\n        </div>\n        <NativeSelect class=\"relative h-8 pr-6 pl-2 text-xs text-transparent\" @change=\"setYear\">\n          <NativeSelectOption\n            v-for=\"year in yearRange\"\n            :key=\"year.toString()\"\n            :value=\"year.year\"\n            :selected=\"date.year === year.year\"\n          >\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    :placeholder=\"internalPlaceholder as DateValue\"\n    data-uipkge\n    data-slot=\"calendar\"\n    :class=\"cn('p-3', props.class)\"\n    @update:placeholder=\"\n      (val) => {\n        internalPlaceholder = val\n      }\n    \"\n  >\n    <CalendarHeader class=\"pt-0\">\n      <nav class=\"absolute inset-x-0 top-0 flex items-center justify-between gap-1\">\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=\"mt-4 flex flex-col gap-y-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 v-for=\"day in weekDays\" :key=\"day\">\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 v-for=\"weekDate in weekDates\" :key=\"weekDate.toString()\" :date=\"weekDate\">\n              <CalendarCellTrigger :day=\"weekDate\" :month=\"month.value\">\n                <slot name=\"cell\" :day=\"weekDate\" :month=\"month.value\">\n                  {{ weekDate.day }}\n                </slot>\n              </CalendarCellTrigger>\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/Calendar.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarCell.vue",
      "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-uipkge\n    data-slot=\"calendar-cell\"\n    :class=\"\n      cn(\n        '[&:has([data-selected])]:bg-accent relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',\n        props.class,\n      )\n    \"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarCell.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarCellTrigger.vue",
      "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-uipkge\n    data-slot=\"calendar-cell-trigger\"\n    :class=\"\n      cn(\n        buttonVariants({ variant: 'ghost' }),\n        'size-9 cursor-pointer p-0 font-normal aria-selected:opacity-100',\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]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100',\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    \"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarCellTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarGrid.vue",
      "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-uipkge\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",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarGrid.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarGridBody.vue",
      "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 data-uipkge data-slot=\"calendar-grid-body\" v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarGridBody.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarGridHead.vue",
      "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 data-uipkge data-slot=\"calendar-grid-head\" v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarGridHead.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarGridRow.vue",
      "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 data-uipkge data-slot=\"calendar-grid-row\" :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarGridRow.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarHeadCell.vue",
      "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-uipkge\n    data-slot=\"calendar-head-cell\"\n    :class=\"cn('text-muted-foreground flex-1 rounded-md text-xs font-normal', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarHeadCell.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarHeader.vue",
      "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-uipkge\n    data-slot=\"calendar-header\"\n    :class=\"cn('relative flex w-full items-center justify-center px-8 pt-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeader>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarHeading.vue",
      "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-uipkge\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",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarHeading.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarNextButton.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarNextProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\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-uipkge\n    data-slot=\"calendar-next-button\"\n    :class=\"\n      cn(\n        buttonVariants({ variant: 'outline' }),\n        'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible: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  </CalendarNext>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarNextButton.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/CalendarPrevButton.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { CalendarPrevProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\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-uipkge\n    data-slot=\"calendar-prev-button\"\n    :class=\"\n      cn(\n        buttonVariants({ variant: 'outline' }),\n        'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible: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  </CalendarPrev>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/CalendarPrevButton.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/NativeSelect.vue",
      "content": "<script setup lang=\"ts\">\nimport type { AcceptableValue } from 'reka-ui'\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronDownIcon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ninterface Props {\n  modelValue?: AcceptableValue | AcceptableValue[]\n  class?: HTMLAttributes['class']\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  error?: boolean\n  errorMessages?: string | string[]\n  successMessages?: string | string[]\n  hint?: string\n  variant?: 'outlined' | 'filled' | 'solo' | 'underlined'\n  density?: 'compact' | 'default' | 'comfortable'\n  color?: 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info'\n  hideDetails?: boolean\n  bgColor?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: undefined,\n  label: '',\n  placeholder: '',\n  disabled: false,\n  readonly: false,\n  error: false,\n  errorMessages: () => [],\n  successMessages: () => [],\n  hint: '',\n  variant: 'outlined',\n  density: 'default',\n  color: 'primary',\n  hideDetails: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': AcceptableValue\n}>()\n\nconst modelValue = computed({\n  get() {\n    return props.modelValue\n  },\n  set(value) {\n    emit('update:modelValue', value)\n  },\n})\n\nconst delegatedProps = reactiveOmit(\n  props,\n  'class',\n  'label',\n  'placeholder',\n  'disabled',\n  'readonly',\n  'error',\n  'errorMessages',\n  'successMessages',\n  'hint',\n  'variant',\n  'density',\n  'color',\n  'hideDetails',\n  'bgColor',\n  'modelValue',\n)\n\nconst hasError = computed(\n  () => props.error || (Array.isArray(props.errorMessages) ? props.errorMessages.length > 0 : !!props.errorMessages),\n)\nconst hasSuccess = computed(\n  () =>\n    !hasError.value &&\n    (Array.isArray(props.successMessages) ? props.successMessages.length > 0 : !!props.successMessages),\n)\n\nconst densityClasses = {\n  compact: 'h-8 text-xs',\n  default: 'h-9 text-sm',\n  comfortable: 'h-10 text-base',\n}\n\nconst variantClasses = {\n  outlined: 'border bg-transparent',\n  filled: 'border-b-2 bg-muted/30 border-transparent',\n  solo: 'border bg-card shadow-md',\n  underlined: 'border-b bg-transparent rounded-none border-x-0 border-t-0',\n}\n\nconst stateClasses = computed(() => {\n  if (hasError.value) return 'border-destructive focus-visible:ring-destructive/20'\n  if (hasSuccess.value) return 'border-[var(--success)] focus-visible:border-[var(--success)]'\n  return 'border-input focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px]'\n})\n</script>\n\n<template>\n  <div class=\"relative w-full\" :class=\"densityClasses[density]\">\n    <!-- Label -->\n    <label v-if=\"label\" class=\"mb-1 block text-sm font-medium\" :class=\"{ 'text-destructive': hasError }\">\n      {{ label }}\n    </label>\n\n    <!-- Select Wrapper -->\n    <div class=\"group/native-select relative w-full\" :class=\"props.class\">\n      <select\n        v-bind=\"{ ...$attrs, ...delegatedProps }\"\n        v-model=\"modelValue\"\n        data-uipkge\n        data-slot=\"native-select\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :class=\"\n          cn(\n            'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50',\n            variantClasses[variant],\n            stateClasses,\n            densityClasses[density],\n            'w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 pr-9 shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n            bgColor,\n          )\n        \"\n      >\n        <slot />\n      </select>\n      <ChevronDownIcon\n        class=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none\"\n        :class=\"{\n          'top-1/2': density === 'default' || density === 'compact' || density === 'comfortable',\n        }\"\n        aria-hidden=\"true\"\n        data-uipkge\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n\n    <!-- Details: hint, error, success -->\n    <div\n      v-if=\"!hideDetails\"\n      class=\"mt-1 text-xs\"\n      :class=\"{\n        'text-destructive': hasError,\n        'text-[var(--success)]': hasSuccess,\n        'text-muted-foreground': !hasError && !hasSuccess,\n      }\"\n    >\n      <template v-if=\"hasError\">\n        <span v-if=\"typeof errorMessages === 'string'\">{{ errorMessages }}</span>\n        <span v-else>{{ errorMessages[0] }}</span>\n      </template>\n      <template v-else-if=\"hasSuccess\">\n        <span v-if=\"typeof successMessages === 'string'\">{{ successMessages }}</span>\n        <span v-else>{{ successMessages[0] }}</span>\n      </template>\n      <template v-else>{{ hint }}</template>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/NativeSelect.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/NativeSelectOption.vue",
      "content": "<!-- @fallthroughAttributes true -->\n<!-- @strictTemplates true -->\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\nconst dataAttrs = { 'data-slot': 'native-select-option' }\n</script>\n\n<template>\n  <option v-bind=\"dataAttrs\" :class=\"cn('bg-popover text-popover-foreground', props.class)\">\n    <slot />\n  </option>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/NativeSelectOption.vue"
    },
    {
      "path": "packages/registry-vue/components/calendar/index.ts",
      "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'\nexport { default as NativeSelect } from './NativeSelect.vue'\nexport { default as NativeSelectOption } from './NativeSelectOption.vue'\n\nexport type LayoutTypes = 'month-and-year' | 'month-only' | 'year-only' | undefined\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/calendar/index.ts"
    }
  ],
  "dependencies": [
    "@internationalized/date",
    "@vueuse/core",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json"
  ],
  "description": "Single-month calendar grid for date selection, built on reka-ui’s Calendar primitive. Pair it with a Popover or use it inline. Supports min/max bounds, disabled dates, and locale formatting.",
  "categories": [
    "date-time"
  ]
}