{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "date-time-range-picker",
  "title": "Date Time Range Picker",
  "description": "A component for selecting date and time ranges with presets support.",
  "dependencies": [
    "date-fns",
    "@lucide/vue"
  ],
  "registryDependencies": [
    "range-calendar",
    "popover",
    "input",
    "button"
  ],
  "files": [
    {
      "path": "src/components/date-time-range-picker/DateInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, watch, useId, useTemplateRef } from \"vue\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\nimport type { DateParts } from \"./types\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst inputId = useId();\n\nconst modelValue = defineModel<Date>();\n\nconst props = withDefaults(\n  defineProps<{\n    disabled?: boolean;\n    class?: string;\n    locale?: Locale;\n  }>(),\n  {\n    disabled: false,\n  }\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\nconst monthRef = useTemplateRef<HTMLInputElement>(\"monthRef\");\nconst dayRef = useTemplateRef<HTMLInputElement>(\"dayRef\");\nconst yearRef = useTemplateRef<HTMLInputElement>(\"yearRef\");\n\nconst date = ref<DateParts>({\n  day: 1,\n  month: 1,\n  year: new Date().getFullYear(),\n});\n\nconst initialDate = ref<DateParts>({ ...date.value });\n\nconst syncFromValue = () => {\n  const d = modelValue.value ? new Date(modelValue.value) : new Date();\n  date.value = {\n    day: d.getDate(),\n    month: d.getMonth() + 1,\n    year: d.getFullYear(),\n  };\n  initialDate.value = { ...date.value };\n};\n\nwatch(() => modelValue.value, syncFromValue, { immediate: true });\n\nconst validateDate = (field: keyof DateParts, value: number): boolean => {\n  if (\n    (field === \"day\" && (value < 1 || value > 31)) ||\n    (field === \"month\" && (value < 1 || value > 12)) ||\n    (field === \"year\" && (value < 1000 || value > 9999))\n  ) {\n    return false;\n  }\n\n  const newDate = { ...date.value, [field]: value };\n  const d = new Date(newDate.year, newDate.month - 1, newDate.day);\n  return (\n    d.getFullYear() === newDate.year &&\n    d.getMonth() + 1 === newDate.month &&\n    d.getDate() === newDate.day\n  );\n};\n\nconst handleInputChange = (field: keyof DateParts, value: string | number) => {\n  if (props.disabled) return;\n\n  const stringValue = String(value);\n  const newValue = stringValue ? Number(stringValue) : \"\";\n  const isValid = typeof newValue === \"number\" && validateDate(field, newValue);\n\n  date.value = { ...date.value, [field]: newValue };\n\n  if (isValid) {\n    modelValue.value = new Date(\n      date.value.year,\n      date.value.month - 1,\n      date.value.day\n    );\n  }\n};\n\nconst handleBlur = (field: keyof DateParts, e: FocusEvent) => {\n  if (props.disabled) return;\n\n  const target = e.target as HTMLInputElement;\n  if (!target.value) {\n    date.value = { ...initialDate.value };\n    return;\n  }\n\n  const newValue = Number(target.value);\n  const isValid = validateDate(field, newValue);\n\n  if (!isValid) {\n    date.value = { ...initialDate.value };\n  } else {\n    initialDate.value = { ...date.value, [field]: newValue };\n  }\n};\n\nconst handleKeyDown = (field: keyof DateParts, e: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (e.metaKey || e.ctrlKey) return;\n\n  if (\n    !/^[0-9]$/.test(e.key) &&\n    ![\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Delete\",\n      \"Tab\",\n      \"Backspace\",\n      \"Enter\",\n    ].includes(e.key)\n  ) {\n    e.preventDefault();\n    return;\n  }\n\n  const target = e.currentTarget as HTMLInputElement;\n\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    let newDate = { ...date.value };\n\n    if (field === \"day\") {\n      const daysInMonth = new Date(\n        date.value.year,\n        date.value.month,\n        0\n      ).getDate();\n      if (date.value.day === daysInMonth) {\n        newDate = { ...newDate, day: 1, month: (date.value.month % 12) + 1 };\n        if (newDate.month === 1) newDate.year += 1;\n      } else {\n        newDate.day += 1;\n      }\n    }\n\n    if (field === \"month\") {\n      if (date.value.month === 12) {\n        newDate = { ...newDate, month: 1, year: date.value.year + 1 };\n      } else {\n        newDate.month += 1;\n      }\n    }\n\n    if (field === \"year\") {\n      newDate.year += 1;\n    }\n\n    date.value = newDate;\n    modelValue.value = new Date(newDate.year, newDate.month - 1, newDate.day);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    let newDate = { ...date.value };\n\n    if (field === \"day\") {\n      if (date.value.day === 1) {\n        newDate.month -= 1;\n        if (newDate.month === 0) {\n          newDate.month = 12;\n          newDate.year -= 1;\n        }\n        newDate.day = new Date(newDate.year, newDate.month, 0).getDate();\n      } else {\n        newDate.day -= 1;\n      }\n    }\n\n    if (field === \"month\") {\n      if (date.value.month === 1) {\n        newDate = { ...newDate, month: 12, year: date.value.year - 1 };\n      } else {\n        newDate.month -= 1;\n      }\n    }\n\n    if (field === \"year\") {\n      newDate.year -= 1;\n    }\n\n    date.value = newDate;\n    modelValue.value = new Date(newDate.year, newDate.month - 1, newDate.day);\n  }\n\n  if (e.key === \"ArrowRight\") {\n    if (\n      target.selectionStart === target.value.length ||\n      (target.selectionStart === 0 &&\n        target.selectionEnd === target.value.length)\n    ) {\n      e.preventDefault();\n      if (field === \"month\") dayRef.value?.focus();\n      if (field === \"day\") yearRef.value?.focus();\n    }\n  } else if (e.key === \"ArrowLeft\") {\n    if (\n      target.selectionStart === 0 ||\n      (target.selectionStart === 0 &&\n        target.selectionEnd === target.value.length)\n    ) {\n      e.preventDefault();\n      if (field === \"day\") monthRef.value?.focus();\n      if (field === \"year\") dayRef.value?.focus();\n    }\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  if (window.innerWidth > 1024) {\n    (e.target as HTMLInputElement).select();\n  }\n};\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex border rounded-lg items-center text-sm px-1', props.class)\"\n  >\n    <Input\n      :id=\"`date-input-month-${inputId}`\"\n      ref=\"monthRef\"\n      type=\"text\"\n      :max=\"12\"\n      :maxlength=\"2\"\n      :model-value=\"date.month.toString()\"\n      @update:model-value=\"handleInputChange('month', $event)\"\n      @keydown=\"handleKeyDown('month', $event)\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur('month', $event)\"\n      class=\"p-0 outline-none w-6 border-none text-center\"\n      :placeholder=\"$t('month')\"\n      :disabled=\"disabled\"\n    />\n    <span class=\"opacity-20 -mx-px\">/</span>\n    <Input\n      :id=\"`date-input-day-${inputId}`\"\n      ref=\"dayRef\"\n      type=\"text\"\n      :max=\"31\"\n      :maxlength=\"2\"\n      :model-value=\"date.day.toString()\"\n      @update:model-value=\"handleInputChange('day', $event)\"\n      @keydown=\"handleKeyDown('day', $event)\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur('day', $event)\"\n      class=\"p-0 outline-none w-7 border-none text-center\"\n      :placeholder=\"$t('day')\"\n      :disabled=\"disabled\"\n    />\n    <span class=\"opacity-20 -mx-px\">/</span>\n    <Input\n      :id=\"`date-input-year-${inputId}`\"\n      ref=\"yearRef\"\n      type=\"text\"\n      :max=\"9999\"\n      :maxlength=\"4\"\n      :model-value=\"date.year.toString()\"\n      @update:model-value=\"handleInputChange('year', $event)\"\n      @keydown=\"handleKeyDown('year', $event)\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur('year', $event)\"\n      class=\"p-0 outline-none w-12 border-none text-center\"\n      :placeholder=\"$t('year')\"\n      :disabled=\"disabled\"\n    />\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/TimeInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, watch, useId } from \"vue\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDown, ChevronUp } from \"@lucide/vue\";\nimport type { TimeParts } from \"./types\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst inputId = useId();\nconst modelValue = defineModel<Date>();\n\nconst props = withDefaults(\n  defineProps<{\n    disabled?: boolean;\n    class?: string;\n    locale?: Locale;\n  }>(),\n  {\n    disabled: false,\n  }\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\nconst time = ref<TimeParts>({\n  hours: 12,\n  minutes: 0,\n  ampm: \"AM\",\n});\n\nconst syncFromValue = () => {\n  if (modelValue.value) {\n    const d = new Date(modelValue.value);\n    const hours = d.getHours();\n    time.value = {\n      hours: hours % 12 === 0 ? 12 : hours % 12,\n      minutes: d.getMinutes(),\n      ampm: hours >= 12 ? \"PM\" : \"AM\",\n    };\n  }\n};\n\nwatch(() => modelValue.value, syncFromValue, { immediate: true });\n\nconst updateTime = (newTime: TimeParts) => {\n  if (props.disabled) return;\n\n  const currentDate = modelValue.value\n    ? new Date(modelValue.value)\n    : new Date();\n  const hours =\n    newTime.ampm === \"PM\" && newTime.hours !== 12\n      ? newTime.hours + 12\n      : newTime.ampm === \"AM\" && newTime.hours === 12\n      ? 0\n      : newTime.hours;\n\n  currentDate.setHours(hours);\n  currentDate.setMinutes(newTime.minutes);\n  currentDate.setSeconds(0);\n\n  modelValue.value = currentDate;\n  time.value = newTime;\n};\n\nconst handleInputChange = (\n  field: \"hours\" | \"minutes\",\n  value: string | number\n) => {\n  if (props.disabled) return;\n\n  const stringValue = String(value).replace(/\\D/g, \"\");\n  if (!stringValue) return;\n\n  const numValue = parseInt(stringValue, 10);\n\n  let newValue = numValue;\n  if (field === \"hours\") {\n    if (numValue < 1) newValue = 1;\n    else if (numValue > 12) newValue = 12;\n  } else if (field === \"minutes\") {\n    if (numValue < 0) newValue = 0;\n    else if (numValue > 59) newValue = 59;\n  }\n\n  updateTime({ ...time.value, [field]: newValue });\n};\n\nconst handleAmPmToggle = () => {\n  if (props.disabled) return;\n  updateTime({ ...time.value, ampm: time.value.ampm === \"AM\" ? \"PM\" : \"AM\" });\n};\n\nconst incrementHours = () => {\n  if (props.disabled) return;\n  const newHours = time.value.hours === 12 ? 1 : time.value.hours + 1;\n  updateTime({ ...time.value, hours: newHours });\n};\n\nconst decrementHours = () => {\n  if (props.disabled) return;\n  const newHours = time.value.hours === 1 ? 12 : time.value.hours - 1;\n  updateTime({ ...time.value, hours: newHours });\n};\n\nconst incrementMinutes = () => {\n  if (props.disabled) return;\n  const newMinutes = (time.value.minutes + 1) % 60;\n  updateTime({ ...time.value, minutes: newMinutes });\n};\n\nconst decrementMinutes = () => {\n  if (props.disabled) return;\n  const newMinutes = (time.value.minutes - 1 + 60) % 60;\n  updateTime({ ...time.value, minutes: newMinutes });\n};\n\nconst formatTimeValue = (value: number): string => {\n  return value.toString().padStart(2, \"0\");\n};\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex items-center space-x-1 rounded-md border p-1', props.class)\n    \"\n  >\n    <div class=\"flex flex-col items-center\">\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"h-5 w-5\"\n        :disabled=\"disabled\"\n        @click=\"incrementHours\"\n      >\n        <ChevronUp class=\"h-3 w-3\" />\n      </Button>\n      <Input\n        :id=\"`time-input-hours-${inputId}`\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        :model-value=\"formatTimeValue(time.hours)\"\n        @update:model-value=\"handleInputChange('hours', $event)\"\n        class=\"w-7 border-0 text-center focus:outline-none focus:ring-0 p-0 disabled:opacity-50\"\n        :disabled=\"disabled\"\n      />\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"h-5 w-5\"\n        :disabled=\"disabled\"\n        @click=\"decrementHours\"\n      >\n        <ChevronDown class=\"h-3 w-3\" />\n      </Button>\n    </div>\n    <span class=\"text-sm font-medium\">:</span>\n    <div class=\"flex flex-col items-center\">\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"h-5 w-5\"\n        :disabled=\"disabled\"\n        @click=\"incrementMinutes\"\n      >\n        <ChevronUp class=\"h-3 w-3\" />\n      </Button>\n      <Input\n        :id=\"`time-input-minutes-${inputId}`\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        :model-value=\"formatTimeValue(time.minutes)\"\n        @update:model-value=\"handleInputChange('minutes', $event)\"\n        class=\"w-7 border-0 text-center focus:outline-none focus:ring-0 p-0 disabled:opacity-50\"\n        :disabled=\"disabled\"\n      />\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"h-5 w-5\"\n        :disabled=\"disabled\"\n        @click=\"decrementMinutes\"\n      >\n        <ChevronDown class=\"h-3 w-3\" />\n      </Button>\n    </div>\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"sm\"\n      class=\"text-xs px-2 h-8\"\n      :disabled=\"disabled\"\n      @click=\"handleAmPmToggle\"\n    >\n      {{ time.ampm === \"AM\" ? $t(\"am\") : $t(\"pm\") }}\n    </Button>\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/DateTimeInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { cn } from \"@/lib/utils\";\nimport DateInput from \"./DateInput.vue\";\nimport TimeInput from \"./TimeInput.vue\";\nimport type { Locale } from \"./locales\";\n\nconst modelValue = defineModel<Date>();\n\nconst props = withDefaults(\n  defineProps<{\n    disabled?: boolean;\n    class?: string;\n    label?: string;\n    locale?: Locale;\n  }>(),\n  {\n    disabled: false,\n  }\n);\n\nconst date = ref<Date>(modelValue.value || new Date());\n\nwatch(\n  () => modelValue.value,\n  (newVal) => {\n    if (newVal) {\n      date.value = new Date(newVal);\n    }\n  }\n);\n\nconst handleDateChange = (newDate: Date | undefined) => {\n  if (props.disabled || !newDate) return;\n\n  const updatedDate = new Date(newDate);\n  if (date.value) {\n    updatedDate.setHours(\n      date.value.getHours(),\n      date.value.getMinutes(),\n      date.value.getSeconds(),\n      date.value.getMilliseconds()\n    );\n  }\n\n  date.value = updatedDate;\n  modelValue.value = updatedDate;\n};\n\nconst handleTimeChange = (newTime: Date | undefined) => {\n  if (props.disabled || !newTime) return;\n\n  const updatedDate = new Date(date.value);\n  updatedDate.setHours(\n    newTime.getHours(),\n    newTime.getMinutes(),\n    newTime.getSeconds(),\n    newTime.getMilliseconds()\n  );\n\n  date.value = updatedDate;\n  modelValue.value = updatedDate;\n};\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col space-y-1', props.class)\">\n    <span v-if=\"label\" class=\"text-xs text-muted-foreground\">{{ label }}</span>\n    <div class=\"flex flex-col sm:flex-row gap-2\">\n      <DateInput\n        :model-value=\"date\"\n        :disabled=\"disabled\"\n        :locale=\"props.locale\"\n        @update:model-value=\"handleDateChange\"\n      />\n      <TimeInput\n        :model-value=\"date\"\n        :disabled=\"disabled\"\n        :locale=\"props.locale\"\n        @update:model-value=\"handleTimeChange\"\n      />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/DatePicker.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { Button } from \"@/components/ui/button\";\nimport { RangeCalendar } from \"@/components/ui/range-calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\nimport { format, isEqual, isValid, startOfDay } from \"date-fns\";\nimport { enUS, zhCN, type Locale } from \"date-fns/locale\";\nimport { CalendarIcon } from \"@lucide/vue\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\nimport { toDate } from \"reka-ui/date\";\nimport type { DateRange as RekaDateRange } from \"reka-ui\";\nimport DateInput from \"./DateInput.vue\";\nimport { GetI18nText, type Locale as I18nLocale } from \"./locales\";\n\nconst modelValue = defineModel<Date>();\n\nconst props = withDefaults(\n  defineProps<{\n    align?: \"start\" | \"center\" | \"end\";\n    locale?: I18nLocale;\n    class?: string;\n  }>(),\n  {\n    align: \"center\",\n    locale: \"en\",\n  },\n);\n\nconst emit = defineEmits<{\n  update: [payload: { date: Date | undefined }];\n}>();\n\nconst currentLocale = computed<Locale>(() =>\n  props.locale === \"zhHans\" ? zhCN : enUS,\n);\n\nconst calendarLocale = computed(() =>\n  props.locale === \"zhHans\" ? \"zh-CN\" : \"en-US\",\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst dateToDateValue = (date: Date): DateValue =>\n  new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());\n\nconst dateValueToDate = (dateValue: DateValue): Date => toDate(dateValue);\n\nconst formatDate = (date: Date | undefined, locale: Locale): string => {\n  if (!date || !isValid(date)) {\n    return $t(\"selectDate\");\n  }\n\n  return format(date, \"PPP\", { locale });\n};\n\nconst getComparableTime = (date: Date | undefined) =>\n  date ? startOfDay(date).getTime() : undefined;\n\nconst isSameDay = (left: Date | undefined, right: Date | undefined) => {\n  if (!left || !right) return left === right;\n  return isEqual(startOfDay(left), startOfDay(right));\n};\n\nconst resolveSelectedDate = (\n  start: Date,\n  end: Date | undefined,\n  currentDate: Date | undefined,\n) => {\n  if (!end) return start;\n  if (!currentDate) return end;\n\n  const currentTime = getComparableTime(currentDate);\n  const startTime = getComparableTime(start);\n  const endTime = getComparableTime(end);\n\n  if (currentTime === startTime && currentTime !== endTime) {\n    return end;\n  }\n\n  if (currentTime === endTime && currentTime !== startTime) {\n    return start;\n  }\n\n  return end;\n};\n\nconst isOpen = ref(false);\nconst selectedDate = ref<Date | undefined>(\n  modelValue.value ? new Date(modelValue.value) : undefined,\n);\nconst openedDate = ref<Date | undefined>(\n  selectedDate.value ? new Date(selectedDate.value) : undefined,\n);\n\nconst calendarValue = computed<RekaDateRange>({\n  get: () => ({\n    start: selectedDate.value\n      ? dateToDateValue(selectedDate.value)\n      : dateToDateValue(new Date()),\n    end: undefined,\n  }),\n  set: (newVal) => {\n    if (!newVal.start) return;\n\n    const start = dateValueToDate(newVal.start as DateValue);\n    const end = newVal.end\n      ? dateValueToDate(newVal.end as DateValue)\n      : undefined;\n\n    selectedDate.value = resolveSelectedDate(start, end, selectedDate.value);\n  },\n});\n\nwatch(\n  () => modelValue.value,\n  (newVal) => {\n    selectedDate.value = newVal ? new Date(newVal) : undefined;\n  },\n);\n\nwatch(isOpen, (nextOpen) => {\n  if (nextOpen) {\n    openedDate.value = selectedDate.value\n      ? new Date(selectedDate.value)\n      : undefined;\n  }\n});\n\nconst handleDateChange = (date: Date | undefined) => {\n  if (!date) return;\n  selectedDate.value = date;\n};\n\nconst handleCancel = () => {\n  isOpen.value = false;\n  selectedDate.value = openedDate.value ? new Date(openedDate.value) : undefined;\n};\n\nconst handleUpdate = () => {\n  isOpen.value = false;\n  if (isSameDay(selectedDate.value, openedDate.value)) {\n    return;\n  }\n\n  modelValue.value = selectedDate.value\n    ? new Date(selectedDate.value)\n    : undefined;\n  emit(\"update\", { date: modelValue.value });\n};\n</script>\n\n<template>\n  <Popover v-model:open=\"isOpen\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-full min-w-0 max-w-full justify-start overflow-hidden px-3 text-left font-normal',\n            props.class,\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4 shrink-0\" />\n        <span class=\"min-w-0 truncate text-sm\">\n          {{ formatDate(selectedDate, currentLocale) }}\n        </span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      class=\"flex w-auto flex-col overflow-hidden p-0\"\n      :align=\"align\"\n      :side-offset=\"4\"\n      style=\"max-height: min(90vh, var(--reka-popover-content-available-height));\"\n    >\n      <div class=\"min-h-0 overflow-y-auto p-4\">\n        <div class=\"space-y-4\">\n          <div class=\"hidden lg:block\">\n            <RangeCalendar\n              v-model=\"calendarValue\"\n              :number-of-months=\"2\"\n              :locale=\"calendarLocale\"\n              class=\"rounded-md border\"\n            />\n          </div>\n\n          <div class=\"lg:hidden\">\n            <RangeCalendar\n              v-model=\"calendarValue\"\n              :number-of-months=\"1\"\n              :locale=\"calendarLocale\"\n              class=\"rounded-md border\"\n            />\n          </div>\n\n          <DateInput\n            :model-value=\"selectedDate\"\n            :locale=\"props.locale\"\n            @update:model-value=\"handleDateChange\"\n          />\n        </div>\n      </div>\n\n      <div class=\"flex shrink-0 items-center justify-end gap-2 border-t bg-popover p-4\">\n        <Button variant=\"ghost\" @click=\"handleCancel\">{{ $t(\"cancel\") }}</Button>\n        <Button @click=\"handleUpdate\">{{ $t(\"confirm\") }}</Button>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/DateRangePicker.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { Button } from \"@/components/ui/button\";\nimport { RangeCalendar } from \"@/components/ui/range-calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  endOfDay,\n  endOfWeek,\n  endOfMonth,\n  format,\n  isEqual,\n  isValid,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  subDays,\n  subMonths,\n} from \"date-fns\";\nimport { enUS, zhCN, type Locale } from \"date-fns/locale\";\nimport { CheckIcon, ChevronRightIcon } from \"@lucide/vue\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\nimport { toDate } from \"reka-ui/date\";\nimport DateInput from \"./DateInput.vue\";\nimport type { DateRange } from \"./types\";\nimport type { DateRange as RekaDateRange } from \"reka-ui\";\nimport { PRESETS } from \"./types\";\nimport { GetI18nText, type Locale as I18nLocale } from \"./locales\";\n\nconst modelValue = defineModel<DateRange>();\n\nconst props = withDefaults(\n  defineProps<{\n    align?: \"start\" | \"center\" | \"end\";\n    locale?: I18nLocale;\n    class?: string;\n  }>(),\n  {\n    align: \"center\",\n    locale: \"en\",\n  }\n);\n\nconst emit = defineEmits<{\n  update: [payload: { range: DateRange }];\n}>();\n\nconst currentLocale = computed<Locale>(() => {\n  return props.locale === \"zhHans\" ? zhCN : enUS;\n});\n\nconst calendarLocale = computed(() =>\n  props.locale === \"zhHans\" ? \"zh-CN\" : \"en-US\",\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst dateToDateValue = (date: Date): DateValue => {\n  return new CalendarDate(\n    date.getFullYear(),\n    date.getMonth() + 1,\n    date.getDate()\n  );\n};\n\nconst dateValueToDate = (dateValue: DateValue): Date => {\n  return toDate(dateValue);\n};\n\nconst formatDate = (date: Date | undefined, locale: Locale): string => {\n  if (!date || !isValid(date)) {\n    return $t(\"selectDate\");\n  }\n  return format(date, \"PPP\", { locale });\n};\n\nconst isOpen = ref(false);\nconst range = ref<DateRange>({\n  from: modelValue.value?.from,\n  to: modelValue.value?.to,\n});\nconst openedRange = ref<DateRange>({ ...range.value });\nconst selectedPreset = ref<string | undefined>(undefined);\n\nconst calendarRange = computed<RekaDateRange>({\n  get: () => ({\n    start: range.value.from\n      ? dateToDateValue(range.value.from)\n      : dateToDateValue(new Date()),\n    end: range.value.to\n      ? dateToDateValue(range.value.to)\n      : undefined,\n  }),\n  set: (newVal) => {\n    if (newVal.start) {\n      range.value = {\n        from: dateValueToDate(newVal.start as DateValue),\n        to: newVal.end ? dateValueToDate(newVal.end as DateValue) : undefined,\n      };\n    }\n  },\n});\n\nwatch(\n  () => modelValue.value,\n  (newVal) => {\n    range.value = {\n      from: newVal?.from,\n      to: newVal?.to,\n    };\n  },\n);\n\nconst getPresetRange = (presetName: string): DateRange => {\n  const now = new Date();\n  const today = startOfDay(now);\n  const endToday = endOfDay(now);\n\n  switch (presetName) {\n    case \"today\":\n      return { from: today, to: endToday };\n    case \"yesterday\": {\n      const yesterday = subDays(today, 1);\n      return {\n        from: yesterday,\n        to: endOfDay(yesterday),\n      };\n    }\n    case \"last7\":\n      return {\n        from: subDays(today, 6),\n        to: endToday,\n      };\n    case \"last14\":\n      return {\n        from: subDays(today, 13),\n        to: endToday,\n      };\n    case \"last30\":\n      return {\n        from: subDays(today, 29),\n        to: endToday,\n      };\n    case \"thisWeek\": {\n      return {\n        from: startOfWeek(today, { locale: currentLocale.value }),\n        to: endToday,\n      };\n    }\n    case \"lastWeek\": {\n      const lastWeekStart = startOfWeek(subDays(today, 7), {\n        locale: currentLocale.value,\n      });\n      return {\n        from: lastWeekStart,\n        to: endOfWeek(lastWeekStart, { locale: currentLocale.value }),\n      };\n    }\n    case \"thisMonth\": {\n      return {\n        from: startOfMonth(today),\n        to: endToday,\n      };\n    }\n    case \"lastMonth\": {\n      const lastMonth = subMonths(today, 1);\n      return {\n        from: startOfMonth(lastMonth),\n        to: endOfMonth(lastMonth),\n      };\n    }\n    default:\n      throw new Error(`Unknown date range preset: ${presetName}`);\n  }\n};\n\nconst setPreset = (preset: string) => {\n  const newRange = getPresetRange(preset);\n  if (!newRange.from) return;\n\n  range.value = newRange;\n  selectedPreset.value = preset;\n  calendarRange.value = {\n    start: dateToDateValue(newRange.from),\n    end: newRange.to\n      ? dateToDateValue(newRange.to)\n      : dateToDateValue(newRange.from),\n  };\n};\n\nconst checkPreset = () => {\n  if (!range.value.from) {\n    selectedPreset.value = undefined;\n    return;\n  }\n\n  for (const preset of PRESETS) {\n    const presetRange = getPresetRange(preset.name);\n    if (!presetRange.from) continue;\n\n    if (\n      isEqual(startOfDay(presetRange.from), startOfDay(range.value.from)) &&\n      isEqual(\n        endOfDay(presetRange.to ?? presetRange.from),\n        endOfDay(range.value.to ?? range.value.from),\n      )\n    ) {\n      selectedPreset.value = preset.name;\n      return;\n    }\n  }\n  selectedPreset.value = undefined;\n};\n\nconst resetValues = () => {\n  const fromDate = modelValue.value?.from;\n  const toDate = modelValue.value?.to;\n  range.value = { from: fromDate, to: toDate };\n  selectedPreset.value = undefined;\n};\n\nconst areRangesEqual = (a?: DateRange, b?: DateRange): boolean => {\n  if (!a || !b) return a === b;\n  return (\n    a.from?.getTime() === b.from?.getTime() &&\n    a.to?.getTime() === b.to?.getTime()\n  );\n};\n\nwatch(isOpen, (newVal) => {\n  if (newVal) {\n    openedRange.value = { ...range.value };\n  }\n});\n\nwatch(range, checkPreset, { deep: true, immediate: true });\n\nconst handleFromDateChange = (date: Date | undefined) => {\n  if (!date) return;\n  const toDate =\n    range.value.to == null || date > range.value.to ? date : range.value.to;\n  range.value = { ...range.value, from: date, to: toDate };\n};\n\nconst handleToDateChange = (date: Date | undefined) => {\n  if (!date) return;\n  const fromDate =\n    !range.value.from || date < range.value.from ? date : range.value.from;\n  range.value = { ...range.value, from: fromDate, to: date };\n};\n\nconst handleCancel = () => {\n  isOpen.value = false;\n  resetValues();\n};\n\nconst handleUpdate = () => {\n  isOpen.value = false;\n  if (!areRangesEqual(range.value, openedRange.value)) {\n    modelValue.value = range.value;\n    emit(\"update\", { range: range.value });\n  }\n};\n</script>\n\n<template>\n  <Popover v-model:open=\"isOpen\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-full min-w-0 max-w-full justify-start overflow-hidden px-3 text-left font-normal',\n            props.class,\n          )\n        \"\n      >\n        <div class=\"flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-sm\">\n          <span class=\"min-w-0 truncate\">\n            {{ formatDate(range.from, currentLocale) }}\n          </span>\n          <template v-if=\"range.to\">\n            <ChevronRightIcon class=\"h-4 w-4 shrink-0\" />\n            <span class=\"min-w-0 truncate\">\n              {{ formatDate(range.to, currentLocale) }}\n            </span>\n          </template>\n        </div>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      class=\"flex w-auto flex-col overflow-hidden p-0\"\n      :align=\"align\"\n      :side-offset=\"4\"\n      style=\"max-height: min(90vh, var(--reka-popover-content-available-height));\"\n    >\n      <div class=\"min-h-0 overflow-y-auto\">\n        <div class=\"flex flex-col gap-4 p-4 lg:flex-row\">\n          <div class=\"space-y-4\">\n            <div class=\"hidden lg:block\">\n              <RangeCalendar\n                v-model=\"calendarRange\"\n                :number-of-months=\"2\"\n                :locale=\"calendarLocale\"\n                class=\"border rounded-md\"\n              />\n            </div>\n\n            <div class=\"lg:hidden\">\n              <RangeCalendar\n                v-model=\"calendarRange\"\n                :number-of-months=\"1\"\n                :locale=\"calendarLocale\"\n                class=\"border rounded-md\"\n              />\n            </div>\n\n            <div class=\"flex items-center justify-between\">\n              <DateInput\n                :model-value=\"range.from\"\n                :locale=\"props.locale\"\n                @update:model-value=\"handleFromDateChange\"\n              />\n              <ChevronRightIcon class=\"mx-2 h-4 w-4\" />\n              <DateInput\n                :model-value=\"range.to\"\n                :locale=\"props.locale\"\n                @update:model-value=\"handleToDateChange\"\n              />\n            </div>\n          </div>\n\n          <div class=\"space-y-2 lg:border-l lg:pl-4\">\n            <h3 class=\"font-medium text-sm\">\n              {{ $t('presets') }}\n            </h3>\n            <div class=\"grid grid-cols-2 gap-1 lg:grid-cols-1\">\n              <Button\n                v-for=\"preset in PRESETS\"\n                :key=\"preset.name\"\n                :class=\"\n                  cn(\n                    'justify-start',\n                    selectedPreset === preset.name && 'bg-muted'\n                  )\n                \"\n                variant=\"ghost\"\n                @click=\"setPreset(preset.name)\"\n              >\n                <CheckIcon\n                  :class=\"\n                    cn(\n                      'mr-2 h-4 w-4',\n                      selectedPreset === preset.name ? 'opacity-100' : 'opacity-0'\n                    )\n                  \"\n                />\n                {{ $t(preset.name as Parameters<typeof GetI18nText>[0]) }}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex shrink-0 items-center justify-end gap-2 border-t bg-popover p-4\">\n        <Button variant=\"ghost\" @click=\"handleCancel\">{{ $t(\"cancel\") }}</Button>\n        <Button @click=\"handleUpdate\">{{ $t(\"confirm\") }}</Button>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/DateTimeRangePicker.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { Button } from \"@/components/ui/button\";\nimport { RangeCalendar } from \"@/components/ui/range-calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  endOfDay,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isEqual,\n  isValid,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  subDays,\n  subMonths,\n} from \"date-fns\";\nimport { enUS, zhCN, type Locale } from \"date-fns/locale\";\nimport { CalendarIcon, CheckIcon, ChevronRightIcon } from \"@lucide/vue\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\nimport { toDate } from \"reka-ui/date\";\nimport DateTimeInput from \"./DateTimeInput.vue\";\nimport type { DateTimeRange } from \"./types\";\nimport { PRESETS } from \"./types\";\nimport type { DateRange as RekaDateRange } from \"reka-ui\";\nimport { GetI18nText } from \"./locales\";\n\nconst modelValue = defineModel<DateTimeRange>();\n\nconst props = withDefaults(\n  defineProps<{\n    initialDateFrom?: Date | string;\n    initialDateTo?: Date | string;\n    align?: \"start\" | \"center\" | \"end\";\n    locale?: \"en\" | \"zhHans\";\n    class?: string;\n  }>(),\n  {\n    align: \"center\",\n    locale: \"en\",\n  }\n);\n\nconst emit = defineEmits<{\n  update: [payload: { range: DateTimeRange }];\n}>();\n\nconst currentLocale = computed<Locale>(() => {\n  return props.locale === \"zhHans\" ? zhCN : enUS;\n});\n\nconst calendarLocale = computed(() =>\n  props.locale === \"zhHans\" ? \"zh-CN\" : \"en-US\",\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\n\nconst dateToDateValue = (date: Date): DateValue => {\n  return new CalendarDate(\n    date.getFullYear(),\n    date.getMonth() + 1,\n    date.getDate()\n  );\n};\n\nconst dateValueToDate = (dateValue: DateValue): Date => {\n  return toDate(dateValue);\n};\n\nconst getDateAdjustedForTimezone = (\n  dateInput: Date | string | undefined\n): Date | undefined => {\n  if (!dateInput) return undefined;\n  if (typeof dateInput === \"string\") {\n    const parts = dateInput.split(\"-\").map((part) => parseInt(part, 10));\n    if (parts.length < 3 || parts.some(isNaN)) return undefined;\n    return new Date(parts[0]!, parts[1]! - 1, parts[2]!);\n  }\n  return new Date(dateInput);\n};\n\nconst formatDateTime = (\n  date: Date | undefined,\n  locale: Locale\n): { date: string; time: string; hasDate: boolean } => {\n  if (!date || !isValid(date)) {\n    return {\n      date: $t(\"selectDate\"),\n      time: \"\",\n      hasDate: false,\n    };\n  }\n  return {\n    date: format(date, \"PPP\", { locale }),\n    time: format(date, \"p\", { locale }),\n    hasDate: true,\n  };\n};\n\nconst isOpen = ref(false);\nconst range = ref<DateTimeRange>({\n  from:\n    modelValue.value?.from || getDateAdjustedForTimezone(props.initialDateFrom),\n  to: modelValue.value?.to || getDateAdjustedForTimezone(props.initialDateTo),\n});\nconst openedRange = ref<DateTimeRange>({ ...range.value });\nconst selectedPreset = ref<string | undefined>(undefined);\n\nconst calendarRange = computed<RekaDateRange>({\n  get: () => ({\n    start: range.value.from\n      ? dateToDateValue(range.value.from)\n      : dateToDateValue(new Date()),\n    end: range.value.to ? dateToDateValue(range.value.to) : undefined,\n  }),\n  set: (newVal) => {\n    if (newVal.start) {\n      range.value = {\n        from: dateValueToDate(newVal.start as DateValue),\n        to: newVal.end ? dateValueToDate(newVal.end as DateValue) : undefined,\n      };\n    }\n  },\n});\n\nwatch(\n  () => modelValue.value,\n  (newVal) => {\n    if (newVal) {\n      range.value = { ...newVal };\n    }\n  }\n);\n\nconst getPresetRange = (presetName: string): DateTimeRange => {\n  const now = new Date();\n  const today = startOfDay(now);\n  const endToday = endOfDay(now);\n\n  switch (presetName) {\n    case \"today\":\n      return { from: today, to: endToday };\n    case \"yesterday\": {\n      const yesterday = subDays(today, 1);\n      return { from: yesterday, to: endOfDay(yesterday) };\n    }\n    case \"last7\":\n      return { from: subDays(today, 6), to: endToday };\n    case \"last14\":\n      return { from: subDays(today, 13), to: endToday };\n    case \"last30\":\n      return { from: subDays(today, 29), to: endToday };\n    case \"thisWeek\":\n      return {\n        from: startOfWeek(today, { locale: currentLocale.value }),\n        to: endToday,\n      };\n    case \"lastWeek\": {\n      const lastWeekStart = startOfWeek(subDays(today, 7), {\n        locale: currentLocale.value,\n      });\n      const lastWeekEnd = endOfWeek(lastWeekStart, {\n        locale: currentLocale.value,\n      });\n      return { from: lastWeekStart, to: lastWeekEnd };\n    }\n    case \"thisMonth\":\n      return { from: startOfMonth(today), to: endToday };\n    case \"lastMonth\": {\n      const lastMonth = subMonths(today, 1);\n      return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };\n    }\n    default:\n      throw new Error(`Unknown date range preset: ${presetName}`);\n  }\n};\n\nconst setPreset = (preset: string) => {\n  const newRange = getPresetRange(preset);\n  range.value = newRange;\n  selectedPreset.value = preset;\n  calendarRange.value = {\n    start: newRange.from\n      ? dateToDateValue(newRange.from)\n      : dateToDateValue(new Date()),\n    end: newRange.to ? dateToDateValue(newRange.to) : undefined,\n  };\n};\n\nconst checkPreset = () => {\n  if (!range.value.from || !range.value.to) return;\n\n  for (const preset of PRESETS) {\n    const presetRange = getPresetRange(preset.name);\n    if (\n      isEqual(startOfDay(range.value.from), startOfDay(presetRange.from!)) &&\n      isEqual(endOfDay(range.value.to), endOfDay(presetRange.to!))\n    ) {\n      selectedPreset.value = preset.name;\n      return;\n    }\n  }\n  selectedPreset.value = undefined;\n};\n\nconst areRangesEqual = (a?: DateTimeRange, b?: DateTimeRange): boolean => {\n  if (!a || !b) return a === b;\n  return (\n    isEqual(a.from || new Date(), b.from || new Date()) &&\n    isEqual(a.to || new Date(), b.to || new Date())\n  );\n};\n\nwatch(isOpen, (newVal) => {\n  if (newVal) {\n    openedRange.value = { ...range.value };\n  }\n});\n\nwatch(range, checkPreset, { deep: true, immediate: true });\n\nconst handleFromDateTimeChange = (date: Date | undefined) => {\n  if (!date) return;\n  range.value = { ...range.value, from: date };\n};\n\nconst handleToDateTimeChange = (date: Date | undefined) => {\n  if (!date) return;\n  range.value = { ...range.value, to: date };\n};\n\nconst handleCancel = () => {\n  isOpen.value = false;\n  range.value = { ...openedRange.value };\n};\n\nconst handleUpdate = () => {\n  isOpen.value = false;\n  if (!areRangesEqual(range.value, openedRange.value)) {\n    modelValue.value = range.value;\n    emit(\"update\", { range: range.value });\n  }\n};\n</script>\n\n<template>\n  <Popover v-model:open=\"isOpen\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-full min-w-0 max-w-full min-h-9 justify-start overflow-hidden px-3 py-1 text-left font-normal',\n            props.class,\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4 shrink-0 self-center\" />\n        <div class=\"flex min-w-0 flex-1 items-center gap-2 overflow-hidden\">\n          <template v-if=\"formatDateTime(range.from, currentLocale).hasDate\">\n            <div class=\"flex min-w-0 flex-col gap-0.5 overflow-hidden text-[11px] leading-none\">\n              <span class=\"truncate\">{{ formatDateTime(range.from, currentLocale).date }}</span>\n              <span class=\"truncate text-muted-foreground\">\n                {{ formatDateTime(range.from, currentLocale).time }}\n              </span>\n            </div>\n          </template>\n          <template v-else>\n            <span class=\"min-w-0 truncate text-sm text-muted-foreground\">\n              {{ formatDateTime(range.from, currentLocale).date }}\n            </span>\n          </template>\n          <template v-if=\"range.to\">\n            <ChevronRightIcon class=\"h-4 w-4 shrink-0 self-center\" />\n            <div class=\"flex min-w-0 flex-col gap-0.5 overflow-hidden text-[11px] leading-none\">\n              <span class=\"truncate\">{{ formatDateTime(range.to, currentLocale).date }}</span>\n              <span class=\"truncate text-muted-foreground\">\n                {{ formatDateTime(range.to, currentLocale).time }}\n              </span>\n            </div>\n          </template>\n        </div>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      class=\"flex w-auto flex-col overflow-hidden p-0\"\n      :align=\"align\"\n      :side-offset=\"4\"\n      style=\"max-height: min(90vh, var(--reka-popover-content-available-height));\"\n    >\n      <div class=\"min-h-0 overflow-y-auto\">\n        <div class=\"flex flex-col gap-4 lg:flex-row\">\n          <div class=\"space-y-4 p-4\">\n            <div class=\"hidden lg:block\">\n              <RangeCalendar\n                v-model=\"calendarRange\"\n                :number-of-months=\"2\"\n                :locale=\"calendarLocale\"\n                class=\"border rounded-md\"\n              />\n            </div>\n\n            <div class=\"lg:hidden\">\n              <RangeCalendar\n                v-model=\"calendarRange\"\n                :number-of-months=\"1\"\n                :locale=\"calendarLocale\"\n                class=\"border rounded-md\"\n              />\n            </div>\n\n            <div class=\"flex items-center justify-between\">\n              <DateTimeInput\n                :model-value=\"range.from\"\n                :label=\"$t('start')\"\n                :locale=\"props.locale\"\n                @update:model-value=\"handleFromDateTimeChange\"\n              />\n              <ChevronRightIcon class=\"mx-2 h-4 w-4\" />\n              <DateTimeInput\n                :model-value=\"range.to\"\n                :label=\"$t('end')\"\n                :locale=\"props.locale\"\n                @update:model-value=\"handleToDateTimeChange\"\n              />\n            </div>\n          </div>\n\n          <div class=\"space-y-2 p-4 lg:border-l lg:pl-4\">\n            <h3 class=\"font-medium text-sm\">\n              {{ $t('presets') }}\n            </h3>\n            <div class=\"grid grid-cols-2 gap-1 lg:grid-cols-1\">\n              <Button\n                v-for=\"preset in PRESETS\"\n                :key=\"preset.name\"\n                :class=\"\n                  cn(\n                    'justify-start',\n                    selectedPreset === preset.name && 'bg-muted'\n                  )\n                \"\n                variant=\"ghost\"\n                @click=\"setPreset(preset.name)\"\n              >\n                <CheckIcon\n                  :class=\"\n                    cn(\n                      'mr-2 h-4 w-4',\n                      selectedPreset === preset.name ? 'opacity-100' : 'opacity-0'\n                    )\n                  \"\n                />\n                {{ $t(preset.name as Parameters<typeof GetI18nText>[0]) }}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex shrink-0 items-center justify-end gap-2 border-t bg-popover p-4\">\n        <Button variant=\"ghost\" @click=\"handleCancel\">{{ $t(\"cancel\") }}</Button>\n        <Button @click=\"handleUpdate\">{{ $t(\"confirm\") }}</Button>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/types.ts",
      "content": "export type DateRange = {\n  from: Date | undefined;\n  to: Date | undefined;\n};\n\nexport type DateTimeRange = {\n  from: Date | undefined;\n  to: Date | undefined;\n};\n\nexport type Preset = {\n  name: string;\n  label: string;\n};\n\nexport const PRESETS: Preset[] = [\n  { name: \"today\", label: \"Today\" },\n  { name: \"yesterday\", label: \"Yesterday\" },\n  { name: \"last7\", label: \"Last 7 days\" },\n  { name: \"last14\", label: \"Last 14 days\" },\n  { name: \"last30\", label: \"Last 30 days\" },\n  { name: \"thisWeek\", label: \"This Week\" },\n  { name: \"lastWeek\", label: \"Last Week\" },\n  { name: \"thisMonth\", label: \"This Month\" },\n  { name: \"lastMonth\", label: \"Last Month\" },\n];\n\nexport type DateParts = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nexport type TimeParts = {\n  hours: number;\n  minutes: number;\n  ampm: \"AM\" | \"PM\";\n};\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/locales.ts",
      "content": "export type Locale = \"en\" | \"zhHans\";\n\nconst translations = {\n  en: {\n    cancel: \"Cancel\",\n    confirm: \"Confirm\",\n    start: \"Start\",\n    end: \"End\",\n    presets: \"Presets\",\n    apply: \"Apply\",\n    selectDate: \"Select date\",\n    today: \"Today\",\n    yesterday: \"Yesterday\",\n    last7: \"Last 7 days\",\n    last14: \"Last 14 days\",\n    last30: \"Last 30 days\",\n    thisWeek: \"This Week\",\n    lastWeek: \"Last Week\",\n    thisMonth: \"This Month\",\n    lastMonth: \"Last Month\",\n    month: \"M\",\n    day: \"D\",\n    year: \"YYYY\",\n    am: \"AM\",\n    pm: \"PM\",\n  },\n  zhHans: {\n    cancel: \"取消\",\n    confirm: \"确认\",\n    start: \"开始\",\n    end: \"结束\",\n    presets: \"快捷选项\",\n    apply: \"应用\",\n    selectDate: \"选择日期\",\n    today: \"今天\",\n    yesterday: \"昨天\",\n    last7: \"最近 7 天\",\n    last14: \"最近 14 天\",\n    last30: \"最近 30 天\",\n    thisWeek: \"本周\",\n    lastWeek: \"上周\",\n    thisMonth: \"本月\",\n    lastMonth: \"上月\",\n    month: \"月\",\n    day: \"日\",\n    year: \"年\",\n    am: \"上午\",\n    pm: \"下午\",\n  },\n} as const;\n\nexport function GetI18nText(key: keyof typeof translations.en, locale: Locale) {\n  return translations[locale][key] || translations.en[key];\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/date-time-range-picker/index.ts",
      "content": "export { default as DateInput } from \"./DateInput.vue\";\nexport { default as TimeInput } from \"./TimeInput.vue\";\nexport { default as DateTimeInput } from \"./DateTimeInput.vue\";\nexport { default as DatePicker } from \"./DatePicker.vue\";\nexport { default as DateRangePicker } from \"./DateRangePicker.vue\";\nexport { default as DateTimeRangePicker } from \"./DateTimeRangePicker.vue\";\n\nexport type {\n  DateRange,\n  DateTimeRange,\n  Preset,\n  DateParts,\n  TimeParts,\n} from \"./types\";\nexport { PRESETS } from \"./types\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}