@shwfed/config 1.0.0

package/dist/runtime/components/ui/date-picker/DatePickerYearPanel.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: DateValue;
+    isDateDisabled?: (d: DateValue) => boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: DateValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: DateValue | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-picker/DatePickerYearPanel.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { cn } from "../../../utils/cn";
+import { Calendar } from "../calendar";
+defineOptions({ name: "UiDatePickerYearPanel" });
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  isDateDisabled: { type: Function, required: false },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+function handleUpdate(value) {
+  if (Array.isArray(value)) {
+    emits("update:modelValue", value[0]);
+    return;
+  }
+  emits("update:modelValue", value);
+}
+</script>
+
+<template>
+  <Calendar
+    layout="year"
+    data-slot="date-picker-year-panel"
+    :class="cn(props.class)"
+    :model-value="props.modelValue"
+    :default-placeholder="props.modelValue"
+    :is-date-disabled="props.isDateDisabled"
+    @update:model-value="handleUpdate"
+  >
+    <template #calendar-prev-icon>
+      <Icon icon="lucide:chevron-left" />
+    </template>
+    <template #calendar-next-icon>
+      <Icon icon="lucide:chevron-right" />
+    </template>
+  </Calendar>
+</template>

package/dist/runtime/components/ui/date-picker/DatePickerYearPanel.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: DateValue;
+    isDateDisabled?: (d: DateValue) => boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: DateValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: DateValue | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-picker/PickerShortcuts.d.vue.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'vue';
+import type { LocaleValue } from '../../../share/locale.js';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        items: ReadonlyArray<{
+            name: LocaleValue;
+            value: T;
+        }>;
+        class?: HTMLAttributes["class"];
+    } & {
+        onSelect?: ((index: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "select", index: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ui/date-picker/PickerShortcuts.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useNavigatorLanguage } from "@vueuse/core";
+import { computed } from "vue";
+import { getLocalizedText } from "../../../share/locale";
+import { cn } from "../../../utils/cn";
+defineOptions({ name: "UiPickerShortcuts" });
+const props = defineProps({
+  items: { type: Array, required: true },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["select"]);
+const nav = useNavigatorLanguage();
+const lang = computed(() => nav.language.value?.split("-")[0] ?? "en");
+function label(name) {
+  return getLocalizedText(name, lang.value) ?? "";
+}
+</script>
+
+<template>
+  <div
+    data-slot="picker-shortcuts"
+    :class="cn(
+  'border-zinc-200 flex flex-wrap items-center gap-1 border-t px-2 py-2 text-xs',
+  props.class
+)"
+  >
+    <button
+      v-for="(item, index) in props.items"
+      :key="index"
+      type="button"
+      class="text-zinc-700 hover:bg-zinc-100 hover:text-(--primary) cursor-pointer rounded px-2 py-1"
+      @click="emits('select', index)"
+    >
+      {{ label(item.name) }}
+    </button>
+  </div>
+</template>

package/dist/runtime/components/ui/date-picker/PickerShortcuts.vue.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'vue';
+import type { LocaleValue } from '../../../share/locale.js';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        items: ReadonlyArray<{
+            name: LocaleValue;
+            value: T;
+        }>;
+        class?: HTMLAttributes["class"];
+    } & {
+        onSelect?: ((index: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "select", index: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ui/date-picker/index.d.ts

@@ -0,0 +1,10 @@
+export { default as DatePicker, type DatePickerShortcut } from './DatePicker.vue.js';
+export { default as DatePickerDatePanel } from './DatePickerDatePanel.vue.js';
+export { default as DatePickerDateTimePanel } from './DatePickerDateTimePanel.vue.js';
+export { default as DatePickerInput } from './DatePickerInput.vue.js';
+export { default as DatePickerMonthPanel } from './DatePickerMonthPanel.vue.js';
+export { default as DatePickerTimeInput } from './DatePickerTimeInput.vue.js';
+export { default as DatePickerYearPanel } from './DatePickerYearPanel.vue.js';
+export { default as PickerShortcuts } from './PickerShortcuts.vue.js';
+export { DATE_PICKER_DEFAULT_FORMATS } from './types.js';
+export type { DatePickerType } from './types.js';

package/dist/runtime/components/ui/date-picker/index.js

@@ -0,0 +1,9 @@
+export { default as DatePicker } from "./DatePicker.vue";
+export { default as DatePickerDatePanel } from "./DatePickerDatePanel.vue";
+export { default as DatePickerDateTimePanel } from "./DatePickerDateTimePanel.vue";
+export { default as DatePickerInput } from "./DatePickerInput.vue";
+export { default as DatePickerMonthPanel } from "./DatePickerMonthPanel.vue";
+export { default as DatePickerTimeInput } from "./DatePickerTimeInput.vue";
+export { default as DatePickerYearPanel } from "./DatePickerYearPanel.vue";
+export { default as PickerShortcuts } from "./PickerShortcuts.vue";
+export { DATE_PICKER_DEFAULT_FORMATS } from "./types.js";

package/dist/runtime/components/ui/date-picker/types.d.ts

@@ -0,0 +1,5 @@
+export type DatePickerType = 'date' | 'datetime' | 'year' | 'month' | 'time';
+export declare const DATE_PICKER_DEFAULT_FORMATS: Record<DatePickerType, {
+    display: string;
+    value: string;
+}>;

package/dist/runtime/components/ui/date-picker/types.js

@@ -0,0 +1,7 @@
+export const DATE_PICKER_DEFAULT_FORMATS = {
+  date: { display: "yyyy-MM-dd", value: "yyyy-MM-dd" },
+  datetime: { display: "yyyy-MM-dd HH:mm:ss", value: "yyyy-MM-dd HH:mm:ss" },
+  year: { display: "yyyy", value: "yyyy" },
+  month: { display: "yyyy-MM", value: "yyyy-MM" },
+  time: { display: "HH:mm:ss", value: "HH:mm:ss" }
+};

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.d.vue.ts

@@ -0,0 +1,54 @@
+import type { DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { LocaleValue } from '../../../share/locale.js';
+import type { DateRangePickerType } from './types.js';
+type RangeShortcutValue = [string, string] | (() => [string, string]);
+export interface DateRangePickerShortcut {
+    name: LocaleValue;
+    value: RangeShortcutValue;
+}
+type __VLS_Props = {
+    modelValue?: [string, string];
+    defaultValue?: [string, string];
+    type?: DateRangePickerType;
+    format?: string;
+    valueFormat?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    rangeSeparatorIcon?: string;
+    prefixIcon?: string;
+    clearIcon?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    disabledDate?: (d: DateValue) => boolean;
+    numberOfMonths?: number;
+    timeGranularity?: 'hour' | 'minute' | 'second';
+    hourCycle?: 12 | 24;
+    shortcuts?: ReadonlyArray<DateRangePickerShortcut>;
+    size?: 'sm' | 'md' | 'lg';
+    class?: HTMLAttributes['class'];
+    popoverClass?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    blur: (args_0: FocusEvent, args_1: "end" | "start") => any;
+    change: (args_0: [string, string] | undefined) => any;
+    focus: (args_0: FocusEvent, args_1: "end" | "start") => any;
+    "update:modelValue": (args_0: [string, string] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBlur?: ((args_0: FocusEvent, args_1: "end" | "start") => any) | undefined;
+    onChange?: ((args_0: [string, string] | undefined) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent, args_1: "end" | "start") => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: [string, string] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    type: DateRangePickerType;
+    numberOfMonths: number;
+    hourCycle: 12 | 24;
+    clearable: boolean;
+    timeGranularity: "hour" | "minute" | "second";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue

@@ -0,0 +1,304 @@
+<script setup>
+import { CalendarDate, CalendarDateTime, Time } from "@internationalized/date";
+import { useVModel } from "@vueuse/core";
+import { format as formatDate, isValid, parse as parseDate } from "date-fns";
+import { computed, ref, shallowRef, useTemplateRef, watch } from "vue";
+import { cn } from "../../../utils/cn";
+import PickerShortcuts from "../date-picker/PickerShortcuts.vue";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover";
+import DateRangePickerDatePanel from "./DateRangePickerDatePanel.vue";
+import DateRangePickerDateTimePanel from "./DateRangePickerDateTimePanel.vue";
+import DateRangePickerInput from "./DateRangePickerInput.vue";
+import DateRangePickerMonthPanel from "./DateRangePickerMonthPanel.vue";
+import DateRangePickerTimeInput from "./DateRangePickerTimeInput.vue";
+import DateRangePickerYearPanel from "./DateRangePickerYearPanel.vue";
+import { DATE_RANGE_PICKER_DEFAULT_FORMATS } from "./types";
+defineOptions({ name: "UiDateRangePicker", inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: Array, required: false },
+  defaultValue: { type: Array, required: false },
+  type: { type: String, required: false, default: "daterange" },
+  format: { type: String, required: false },
+  valueFormat: { type: String, required: false },
+  startPlaceholder: { type: String, required: false },
+  endPlaceholder: { type: String, required: false },
+  rangeSeparatorIcon: { type: String, required: false },
+  prefixIcon: { type: String, required: false },
+  clearIcon: { type: String, required: false },
+  clearable: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  disabledDate: { type: Function, required: false },
+  numberOfMonths: { type: Number, required: false, default: 2 },
+  timeGranularity: { type: String, required: false, default: "second" },
+  hourCycle: { type: Number, required: false, default: 24 },
+  shortcuts: { type: Array, required: false },
+  size: { type: String, required: false, default: "md" },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  popoverClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["update:modelValue", "change", "clear", "focus", "blur"]);
+const stringValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+});
+const valueFormat = computed(
+  () => props.valueFormat ?? DATE_RANGE_PICKER_DEFAULT_FORMATS[props.type].value
+);
+const displayFormat = computed(
+  () => props.format ?? DATE_RANGE_PICKER_DEFAULT_FORMATS[props.type].display
+);
+function nativeToDateValue(date, type) {
+  const y = date.getFullYear();
+  const m = date.getMonth() + 1;
+  const d = date.getDate();
+  switch (type) {
+    case "yearrange":
+      return new CalendarDate(y, 1, 1);
+    case "monthrange":
+      return new CalendarDate(y, m, 1);
+    case "datetimerange":
+      return new CalendarDateTime(y, m, d, date.getHours(), date.getMinutes(), date.getSeconds());
+    case "daterange":
+    default:
+      return new CalendarDate(y, m, d);
+  }
+}
+function dateValueToNative(value) {
+  return new Date(
+    value.year,
+    value.month - 1,
+    "day" in value ? value.day : 1,
+    "hour" in value ? value.hour : 0,
+    "hour" in value ? value.minute : 0,
+    "hour" in value ? value.second : 0
+  );
+}
+function nativeToTime(date) {
+  return new Time(date.getHours(), date.getMinutes(), date.getSeconds());
+}
+function timeToNative(time) {
+  const d = new Date(2e3, 0, 1);
+  d.setHours(time.hour, time.minute, time.second, 0);
+  return d;
+}
+function parseString(text) {
+  if (!text) return void 0;
+  const parsed = parseDate(text, valueFormat.value, /* @__PURE__ */ new Date());
+  if (!isValid(parsed)) return void 0;
+  return parsed;
+}
+const startNative = computed(() => parseString(stringValue.value?.[0]));
+const endNative = computed(() => parseString(stringValue.value?.[1]));
+const startTime = computed(
+  () => startNative.value ? nativeToTime(startNative.value) : void 0
+);
+const endTime = computed(
+  () => endNative.value ? nativeToTime(endNative.value) : void 0
+);
+const startDateValue = computed(() => {
+  if (!startNative.value) return void 0;
+  return nativeToDateValue(startNative.value, props.type);
+});
+const endDateValue = computed(() => {
+  if (!endNative.value) return void 0;
+  return nativeToDateValue(endNative.value, props.type);
+});
+const inProgressRange = shallowRef(void 0);
+const rangeValue = computed(() => {
+  if (inProgressRange.value) return inProgressRange.value;
+  return {
+    start: startDateValue.value,
+    end: endDateValue.value
+  };
+});
+function emitRange(start, end) {
+  if (!start || !end) {
+    if (stringValue.value !== void 0) {
+      stringValue.value = void 0;
+      emits("change", void 0);
+    }
+    return;
+  }
+  const startStr = formatDate(start, valueFormat.value);
+  const endStr = formatDate(end, valueFormat.value);
+  const next = [startStr, endStr];
+  const current = stringValue.value;
+  if (current && current[0] === next[0] && current[1] === next[1]) return;
+  stringValue.value = next;
+  emits("change", next);
+}
+function setStart(date) {
+  emitRange(date, endNative.value);
+}
+function setEnd(date) {
+  emitRange(startNative.value, date);
+}
+function setStartTime(time) {
+  emitRange(time ? timeToNative(time) : void 0, endNative.value);
+}
+function setEndTime(time) {
+  emitRange(startNative.value, time ? timeToNative(time) : void 0);
+}
+function clearAll() {
+  if (stringValue.value !== void 0) {
+    stringValue.value = void 0;
+    emits("change", void 0);
+  }
+  emits("clear");
+}
+function applyShortcut(index) {
+  const item = props.shortcuts?.[index];
+  if (!item) return;
+  const raw = typeof item.value === "function" ? item.value() : item.value;
+  const next = [raw[0], raw[1]];
+  const current = stringValue.value;
+  if (current && current[0] === next[0] && current[1] === next[1]) {
+    open.value = false;
+    return;
+  }
+  stringValue.value = next;
+  emits("change", next);
+  open.value = false;
+}
+function onPanelUpdate(value, closeOnComplete) {
+  if (!value || !value.start && !value.end) {
+    inProgressRange.value = void 0;
+    emitRange(void 0, void 0);
+    return;
+  }
+  if (!value.start || !value.end) {
+    inProgressRange.value = value;
+    return;
+  }
+  inProgressRange.value = void 0;
+  const startNext = dateValueToNative(value.start);
+  const endNext = dateValueToNative(value.end);
+  emitRange(startNext, endNext);
+  if (closeOnComplete) open.value = false;
+}
+const open = ref(false);
+const anchorEl = useTemplateRef("anchor-el");
+watch(open, (isOpen) => {
+  if (!isOpen) inProgressRange.value = void 0;
+});
+function isInsideAnchor(target) {
+  if (!(target instanceof Node)) return false;
+  return anchorEl.value?.contains(target) ?? false;
+}
+function onInteractOutside(event) {
+  const original = event.detail?.originalEvent;
+  const target = original?.target ?? null;
+  if (isInsideAnchor(target)) {
+    event.preventDefault();
+  }
+}
+function onInputFocus(event, side) {
+  if (!props.disabled && !props.readonly) {
+    open.value = true;
+  }
+  emits("focus", event, side);
+}
+function onInputBlur(event, side) {
+  emits("blur", event, side);
+}
+</script>
+
+<template>
+  <div
+    ref="anchor-el"
+    data-slot="date-range-picker"
+    :class="cn('w-full', props.class)"
+  >
+    <DateRangePickerTimeInput
+      v-if="props.type === 'timerange'"
+      v-bind="$attrs"
+      :start-value="startTime"
+      :end-value="endTime"
+      :granularity="props.timeGranularity"
+      :hour-cycle="props.hourCycle"
+      :range-separator-icon="props.rangeSeparatorIcon"
+      :prefix-icon="props.prefixIcon"
+      :clear-icon="props.clearIcon"
+      :clearable="props.clearable"
+      :disabled="props.disabled"
+      :readonly="props.readonly"
+      :size="props.size"
+      @update:start-value="setStartTime"
+      @update:end-value="setEndTime"
+      @clear="clearAll"
+    />
+    <Popover
+      v-else
+      v-model:open="open"
+    >
+      <PopoverAnchor as-child>
+        <DateRangePickerInput
+          v-bind="$attrs"
+          :start-value="startNative"
+          :end-value="endNative"
+          :format="displayFormat"
+          :start-placeholder="props.startPlaceholder"
+          :end-placeholder="props.endPlaceholder"
+          :range-separator-icon="props.rangeSeparatorIcon"
+          :prefix-icon="props.prefixIcon"
+          :clear-icon="props.clearIcon"
+          :clearable="props.clearable"
+          :disabled="props.disabled"
+          :readonly="props.readonly"
+          :open="open"
+          :size="props.size"
+          @update:start-value="setStart"
+          @update:end-value="setEnd"
+          @focus="onInputFocus"
+          @blur="onInputBlur"
+          @clear="clearAll"
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        align="start"
+        :class="cn('w-auto p-0', props.popoverClass)"
+        :style="{ minWidth: 'var(--reka-popover-trigger-width)' }"
+        @open-auto-focus="(event) => event.preventDefault()"
+        @interact-outside="onInteractOutside"
+      >
+        <div class="flex flex-col">
+          <DateRangePickerDatePanel
+            v-if="props.type === 'daterange'"
+            :model-value="rangeValue"
+            :is-date-disabled="props.disabledDate"
+            :number-of-months="props.numberOfMonths"
+            @update:model-value="(v) => onPanelUpdate(v, true)"
+          />
+          <DateRangePickerMonthPanel
+            v-else-if="props.type === 'monthrange'"
+            :model-value="rangeValue"
+            :is-date-disabled="props.disabledDate"
+            @update:model-value="(v) => onPanelUpdate(v, true)"
+          />
+          <DateRangePickerYearPanel
+            v-else-if="props.type === 'yearrange'"
+            :model-value="rangeValue"
+            :is-date-disabled="props.disabledDate"
+            @update:model-value="(v) => onPanelUpdate(v, true)"
+          />
+          <DateRangePickerDateTimePanel
+            v-else-if="props.type === 'datetimerange'"
+            :model-value="rangeValue"
+            :is-date-disabled="props.disabledDate"
+            :granularity="props.timeGranularity"
+            :hour-cycle="props.hourCycle"
+            :number-of-months="props.numberOfMonths"
+            :range-separator-icon="props.rangeSeparatorIcon"
+            @update:model-value="(v) => onPanelUpdate(v, false)"
+          />
+          <PickerShortcuts
+            v-if="props.shortcuts && props.shortcuts.length > 0"
+            :items="props.shortcuts"
+            @select="applyShortcut"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue.d.ts

@@ -0,0 +1,54 @@
+import type { DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { LocaleValue } from '../../../share/locale.js';
+import type { DateRangePickerType } from './types.js';
+type RangeShortcutValue = [string, string] | (() => [string, string]);
+export interface DateRangePickerShortcut {
+    name: LocaleValue;
+    value: RangeShortcutValue;
+}
+type __VLS_Props = {
+    modelValue?: [string, string];
+    defaultValue?: [string, string];
+    type?: DateRangePickerType;
+    format?: string;
+    valueFormat?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    rangeSeparatorIcon?: string;
+    prefixIcon?: string;
+    clearIcon?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    disabledDate?: (d: DateValue) => boolean;
+    numberOfMonths?: number;
+    timeGranularity?: 'hour' | 'minute' | 'second';
+    hourCycle?: 12 | 24;
+    shortcuts?: ReadonlyArray<DateRangePickerShortcut>;
+    size?: 'sm' | 'md' | 'lg';
+    class?: HTMLAttributes['class'];
+    popoverClass?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    blur: (args_0: FocusEvent, args_1: "end" | "start") => any;
+    change: (args_0: [string, string] | undefined) => any;
+    focus: (args_0: FocusEvent, args_1: "end" | "start") => any;
+    "update:modelValue": (args_0: [string, string] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBlur?: ((args_0: FocusEvent, args_1: "end" | "start") => any) | undefined;
+    onChange?: ((args_0: [string, string] | undefined) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent, args_1: "end" | "start") => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: [string, string] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    type: DateRangePickerType;
+    numberOfMonths: number;
+    hourCycle: 12 | 24;
+    clearable: boolean;
+    timeGranularity: "hour" | "minute" | "second";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerDatePanel.d.vue.ts

@@ -0,0 +1,15 @@
+import type { DateRange, DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: DateRange;
+    isDateDisabled?: (d: DateValue) => boolean;
+    numberOfMonths?: number;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: DateRange | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: DateRange | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerDatePanel.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+import { RangeCalendar } from "../range-calendar";
+defineOptions({ name: "UiDateRangePickerDatePanel" });
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  isDateDisabled: { type: Function, required: false },
+  numberOfMonths: { type: Number, required: false },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+function handleUpdate(value) {
+  emits("update:modelValue", value);
+}
+</script>
+
+<template>
+  <RangeCalendar
+    data-slot="date-range-picker-date-panel"
+    :class="cn(props.class)"
+    :model-value="props.modelValue"
+    :default-placeholder="props.modelValue?.start"
+    :is-date-disabled="props.isDateDisabled"
+    :number-of-months="props.numberOfMonths ?? 2"
+    @update:model-value="handleUpdate"
+  />
+</template>