@archpublicwebsite/rangepicker 1.2.13 → 1.2.15

package/dist/RangepickerSpecialDates.stories.js

@@ -1,38 +1,39 @@
-import { ref } from "vue";
-import Rangepicker from "./Rangepicker.vue";
+import { ref } from 'vue';
+import Rangepicker from './Rangepicker.vue';
 // Helper to generate dates
 const today = new Date();
-const getDate = (daysFromToday) => {
+function getDate(daysFromToday) {
     const date = new Date(today);
     date.setDate(today.getDate() + daysFromToday);
     return date;
-};
+}
 // Generate sample disabled dates (every Tuesday for the next 2 months)
-const generateDisabledDates = () => {
+function generateDisabledDates() {
     const dates = [];
     for (let i = 0; i < 60; i++) {
         const date = getDate(i);
-        if (date.getDay() === 2) { // Tuesday
+        if (date.getDay() === 2) {
+            // Tuesday
             dates.push(new Date(date));
         }
     }
     return dates;
-};
+}
 // Generate sample holidays
-const generateHolidays = () => {
+function generateHolidays() {
     return [
         getDate(7), // A week from now
         getDate(14), // Two weeks from now
         getDate(21), // Three weeks from now
         getDate(30), // One month from now
     ];
-};
+}
 /**
  * Stories demonstrating special dates functionality
  * including holidays and disabled dates.
  */
 const meta = {
-    title: "Components/Rangepicker/Examples",
+    title: 'Components/Rangepicker/Examples',
     component: Rangepicker,
     tags: ['autodocs'],
     parameters: {
@@ -59,32 +60,32 @@ These dates can be visually distinguished and/or made non-selectable.
     },
     argTypes: {
         disabledDates: {
-            control: "object",
-            description: "Array of dates that should be disabled for selection",
+            control: 'object',
+            description: 'Array of dates that should be disabled for selection',
             table: {
-                type: { summary: "(string | Date)[]" },
-                defaultValue: { summary: "[]" },
+                type: { summary: '(string | Date)[]' },
+                defaultValue: { summary: '[]' },
             },
         },
         holidays: {
-            control: "object",
-            description: "Array of dates to mark as holidays",
+            control: 'object',
+            description: 'Array of dates to mark as holidays',
             table: {
-                type: { summary: "(string | Date)[]" },
-                defaultValue: { summary: "[]" },
+                type: { summary: '(string | Date)[]' },
+                defaultValue: { summary: '[]' },
             },
         },
         variant: {
-            control: "select",
-            options: ["desktop", "mobile"],
+            control: 'select',
+            options: ['desktop', 'mobile'],
         },
     },
     args: {
         isOpen: true,
-        variant: "desktop",
+        variant: 'desktop',
         valueOfMonths: 2,
         valueOfColumns: 2,
-        format: "DD MMM YYYY",
+        format: 'DD MMM YYYY',
         autoApply: true,
         showTooltip: true,
         minDate: today,
@@ -92,7 +93,7 @@ These dates can be visually distinguished and/or made non-selectable.
     render: (args) => ({
         components: { Rangepicker },
         setup() {
-            const modelValue = ref({ startDate: "", endDate: "" });
+            const modelValue = ref({ startDate: '', endDate: '' });
             const isOpen = ref(args.isOpen ?? true);
             return { args, modelValue, isOpen };
         },
@@ -107,8 +108,8 @@ These dates can be visually distinguished and/or made non-selectable.
           v-model:is-open="isOpen"
         />
       </div>
-    `
-    })
+    `,
+    }),
 };
 export default meta;
 /**
@@ -224,13 +225,7 @@ Combine both props for comprehensive date management.
  */
 export const BlockedDateRange = {
     args: {
-        disabledDates: [
-            getDate(10),
-            getDate(11),
-            getDate(12),
-            getDate(13),
-            getDate(14),
-        ],
+        disabledDates: [getDate(10), getDate(11), getDate(12), getDate(13), getDate(14)],
     },
     parameters: {
         docs: {
@@ -270,7 +265,8 @@ export const HolidayWeekends = {
             for (let i = 0; i < 30; i++) {
                 const date = getDate(i);
                 const day = date.getDay();
-                if (day === 5 || day === 6 || day === 0) { // Fri, Sat, Sun
+                if (day === 5 || day === 6 || day === 0) {
+                    // Fri, Sat, Sun
                     dates.push(new Date(date));
                 }
             }

package/dist/RangepickerTheming.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import RangepickerInput from "./RangepickerInput.vue";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import RangepickerInput from './RangepickerInput.vue';
 /**
  * Stories demonstrating theming and color customization options
  * for the Rangepicker component.

package/dist/RangepickerTheming.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangepickerTheming.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerTheming.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAwGvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA0DxB,CAAC"}
+{"version":3,"file":"RangepickerTheming.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerTheming.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AAErD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAwGvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA0DxB,CAAA"}

package/dist/RangepickerTheming.stories.js

@@ -1,11 +1,11 @@
-import { ref, watch } from "vue";
-import RangepickerInput from "./RangepickerInput.vue";
+import { ref, watch } from 'vue';
+import RangepickerInput from './RangepickerInput.vue';
 /**
  * Stories demonstrating theming and color customization options
  * for the Rangepicker component.
  */
 const meta = {
-    title: "Components/Rangepicker/Examples",
+    title: 'Components/Rangepicker/Examples',
     component: RangepickerInput,
     tags: ['autodocs'],
     parameters: {
@@ -33,64 +33,64 @@ Each instance can have its own color scheme using HEX color values.
     },
     argTypes: {
         primaryColor: {
-            control: "color",
-            description: "Primary color for selected dates and highlights (HEX format)",
+            control: 'color',
+            description: 'Primary color for selected dates and highlights (HEX format)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "undefined (uses default blue)" },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined (uses default blue)' },
             },
         },
         secondaryColor: {
-            control: "color",
-            description: "Secondary color for hover states (HEX format)",
+            control: 'color',
+            description: 'Secondary color for hover states (HEX format)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "undefined (uses default light blue)" },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined (uses default light blue)' },
             },
         },
         borderRadius: {
-            control: "text",
-            description: "Border radius for the calendar container (CSS value)",
+            control: 'text',
+            description: 'Border radius for the calendar container (CSS value)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "0.75rem" },
+                type: { summary: 'string' },
+                defaultValue: { summary: '0.75rem' },
             },
         },
         fontFamily: {
-            control: "text",
-            description: "Font family for the calendar (CSS font-family value)",
+            control: 'text',
+            description: 'Font family for the calendar (CSS font-family value)',
             table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "inherit" },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'inherit' },
             },
         },
         variant: {
-            control: "select",
-            options: ["desktop", "mobile"],
+            control: 'select',
+            options: ['desktop', 'mobile'],
         },
         options: {
-            control: "object",
+            control: 'object',
         },
     },
     args: {
-        placeholder: "Check in / Check out",
-        id: "dates",
-        name: "dates",
-        variant: "desktop",
+        placeholder: 'Check in / Check out',
+        id: 'dates',
+        name: 'dates',
+        variant: 'desktop',
         options: {
             autoApply: true,
             minDate: new Date(),
             format: 'DD MMM YYYY',
             numberOfColumns: 2,
             numberOfMonths: 2,
-        }
+        },
     },
     render: (args) => ({
         components: { RangepickerInput },
         setup() {
-            const modelValue = ref(args.modelValue ?? "");
+            const modelValue = ref(args.modelValue ?? '');
             watch(() => args.modelValue, (value) => {
-                const nextValue = value ?? "";
+                const nextValue = value ?? '';
                 if (nextValue !== modelValue.value) {
                     modelValue.value = nextValue;
                 }
@@ -101,8 +101,8 @@ Each instance can have its own color scheme using HEX color values.
       <div style="padding: 2rem; background: #f5f5f5; min-height: 400px;">
         <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
       </div>
-    `
-    })
+    `,
+    }),
 };
 export default meta;
 /**
@@ -110,18 +110,18 @@ export default meta;
  */
 export const ColorThemes = {
     args: {
-        primaryColor: "#ff00de",
-        secondaryColor: "#5a6258",
-        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        primaryColor: '#ff00de',
+        secondaryColor: '#5a6258',
+        modelValue: '02 Feb 2026 - 04 Feb 2026',
     },
     argTypes: {
         primaryColor: {
-            control: "color",
-            description: "Primary color for selected dates and highlights",
+            control: 'color',
+            description: 'Primary color for selected dates and highlights',
         },
         secondaryColor: {
-            control: "color",
-            description: "Secondary color for hover states",
+            control: 'color',
+            description: 'Secondary color for hover states',
         },
     },
     parameters: {
@@ -165,14 +165,14 @@ Use the color pickers below to customize your theme, or try these popular preset
  */
 export const BorderRadius = {
     args: {
-        borderRadius: "12px",
-        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        borderRadius: '12px',
+        modelValue: '02 Feb 2026 - 04 Feb 2026',
     },
     argTypes: {
         borderRadius: {
-            control: "select",
-            options: ["4px", "6px", "8px", "12px"],
-            description: "Border radius of the calendar container",
+            control: 'select',
+            options: ['4px', '6px', '8px', '12px'],
+            description: 'Border radius of the calendar container',
         },
     },
     parameters: {
@@ -207,22 +207,22 @@ You can also use any valid CSS value like \`"0.75rem"\` or \`"16px"\`.
  */
 export const FontFamily = {
     args: {
-        fontFamily: "Georgia, serif",
-        modelValue: "02 Feb 2026 - 04 Feb 2026",
+        fontFamily: 'Georgia, serif',
+        modelValue: '02 Feb 2026 - 04 Feb 2026',
     },
     argTypes: {
         fontFamily: {
-            control: "select",
+            control: 'select',
             options: [
-                "inherit",
+                'inherit',
                 "'Inter', sans-serif",
                 "'Roboto', sans-serif",
                 "'Poppins', sans-serif",
                 "'Arial', sans-serif",
-                "Georgia, serif",
+                'Georgia, serif',
                 "'Courier New', monospace",
             ],
-            description: "Font family for the calendar",
+            description: 'Font family for the calendar',
         },
     },
     parameters: {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAA;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAC3C,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,aAAa,EACd,CAAA;AAGD,wBAAgB,cAAc,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,GAAE,OAAO,CAAC,gBAAgB,CAAM;;;;;;;;;;;;;EAgBtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAA;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAC3C,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA;AAGhH,wBAAgB,cAAc,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,GAAE,OAAO,CAAC,gBAAgB,CAAM;;;;;;;;;;;;;EAsBtF"}

package/dist/index.js

@@ -10,9 +10,15 @@ export { Rangepicker, RangepickerInput };
 export function useRangepicker(triggerRef, options = {}) {
     const isOpen = ref(false);
     const dateRange = ref({ startDate: '', endDate: '' });
-    const open = () => { isOpen.value = true; };
-    const close = () => { isOpen.value = false; };
-    const toggle = () => { isOpen.value = !isOpen.value; };
+    const open = () => {
+        isOpen.value = true;
+    };
+    const close = () => {
+        isOpen.value = false;
+    };
+    const toggle = () => {
+        isOpen.value = !isOpen.value;
+    };
     return {
         isOpen,
         dateRange,

package/dist/rangepicker.js

@@ -246,13 +246,7 @@ function generateCalendarMonths(numberOfMonths, startOffset = 0, options = {}) {
   for (let i = 0; i < numberOfMonths; i++) {
     const { month, days } = getMonthDays(startOffset + i);
     const calendarDays = days.map(
-      (day) => createCalendarDay(
-        day.date,
-        day.isPrevMonth,
-        day.isCurrentMonth,
-        day.isNextMonth,
-        options
-      )
+      (day) => createCalendarDay(day.date, day.isPrevMonth, day.isCurrentMonth, day.isNextMonth, options)
     );
     months.push({
       month,
@@ -271,8 +265,7 @@ function getWeekDays(locale = "en", format = "short") {
   return days;
 }
 function calculatePosition(triggerElement, calendarElement, preferredPosition = "auto") {
-  if (!triggerElement || !calendarElement)
-    return { left: 0 };
+  if (!triggerElement || !calendarElement) return { left: 0 };
   const triggerRect = triggerElement.getBoundingClientRect();
   const calendarRect = calendarElement.getBoundingClientRect();
   const viewportHeight = window.innerHeight;
@@ -291,10 +284,8 @@ function calculatePosition(triggerElement, calendarElement, preferredPosition =
   } else {
     position.top = triggerRect.bottom + 8;
   }
-  if (position.left + calendarRect.width > viewportWidth)
-    position.left = viewportWidth - calendarRect.width - 16;
-  if (position.left < 16)
-    position.left = 16;
+  if (position.left + calendarRect.width > viewportWidth) position.left = viewportWidth - calendarRect.width - 16;
+  if (position.left < 16) position.left = 16;
   return position;
 }
 const _hoisted_1$1 = {
@@ -305,12 +296,12 @@ const _hoisted_2$1 = { class: "rangepicker-header" };
 const _hoisted_3 = { class: "arch-flex arch-items-center arch-justify-between" };
 const _hoisted_4 = {
   key: 0,
-  class: "arch-text-xs arch-font-medium arch-text-gray-500 arch-mb-1"
+  class: "arch-mb-1 arch-text-xs arch-font-medium arch-text-gray-500"
 };
 const _hoisted_5 = { class: "arch-text-sm arch-font-semibold arch-text-gray-900" };
 const _hoisted_6 = {
   key: 0,
-  class: "arch-text-xs arch-text-gray-500 arch-mt-1"
+  class: "arch-mt-1 arch-text-xs arch-text-gray-500"
 };
 const _hoisted_7 = { class: "rangepicker-body" };
 const _hoisted_8 = { class: "rangepicker-month-grid" };
@@ -334,6 +325,7 @@ const _hoisted_17 = {
 };
 const _hoisted_18 = ["disabled"];
 const _hoisted_19 = { class: "arch-flex arch-items-center arch-gap-1" };
+const packageVersion = 10;
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Rangepicker",
   props: {
@@ -366,12 +358,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const breakpoints = useBreakpoints(breakpointsTailwind);
     const isMobile = breakpoints.smallerOrEqual("lg");
-    const numberOfMonths = computed(
-      () => isMobile.value ? 1 : props.valueOfMonths
-    );
-    computed(
-      () => isMobile.value ? 1 : props.valueOfColumns
-    );
+    const numberOfMonths = computed(() => isMobile.value ? 1 : props.valueOfMonths);
+    computed(() => isMobile.value ? 1 : props.valueOfColumns);
     const calendarRef = ref(null);
     const isFadingOut = ref(false);
     const hoveredDay = ref(null);
@@ -379,28 +367,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const localIsOpen = ref(props.isOpen);
     const localStartDate = ref(null);
     const localEndDate = ref(null);
-    const parsedMinDate = computed(
-      () => props.minDate ? dayjs(props.minDate) : null
-    );
-    const parsedMaxDate = computed(
-      () => props.maxDate ? dayjs(props.maxDate) : null
-    );
-    const parsedDisabledDates = computed(
-      () => {
-        var _a;
-        return ((_a = props.disabledDates) == null ? void 0 : _a.map((d) => dayjs(d))) || [];
-      }
-    );
-    const parsedHolidays = computed(
-      () => {
-        var _a;
-        return ((_a = props.holidays) == null ? void 0 : _a.map((h) => dayjs(h))) || [];
-      }
-    );
+    const parsedMinDate = computed(() => props.minDate ? dayjs(props.minDate) : null);
+    const parsedMaxDate = computed(() => props.maxDate ? dayjs(props.maxDate) : null);
+    const parsedDisabledDates = computed(() => {
+      var _a;
+      return ((_a = props.disabledDates) == null ? void 0 : _a.map((d) => dayjs(d))) || [];
+    });
+    const parsedHolidays = computed(() => {
+      var _a;
+      return ((_a = props.holidays) == null ? void 0 : _a.map((h) => dayjs(h))) || [];
+    });
     const weekdays = computed(() => getWeekDays("en", "narrow"));
-    const effectiveNumberOfMonths = computed(
-      () => props.variant === "mobile" ? 1 : numberOfMonths.value
-    );
+    const effectiveNumberOfMonths = computed(() => props.variant === "mobile" ? 1 : numberOfMonths.value);
     const calendarMonths = computed(
       () => generateCalendarMonths(effectiveNumberOfMonths.value, monthOffset.value, {
         startDate: localStartDate.value,
@@ -417,8 +395,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     const formattedDateRange = computed(() => {
       if (!localStartDate.value && !localEndDate.value) return "";
-      else if (localStartDate.value && !localEndDate.value)
-        return localStartDate.value.format(props.format);
+      else if (localStartDate.value && !localEndDate.value) return localStartDate.value.format(props.format);
       else if (localStartDate.value && localEndDate.value)
         return `${localStartDate.value.format(props.format)}${props.delimiter}${localEndDate.value.format(props.format)}`;
       else return "";
@@ -443,13 +420,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return;
       }
       nextTick(() => {
-        const position = calculatePosition(
-          props.triggerElement,
-          calendarRef.value,
-          props.position
-        );
+        const position = calculatePosition(props.triggerElement, calendarRef.value, props.position);
         calendarStyle.value = {
-          left: `${position.left}px`,
+          "left": `${position.left}px`,
           ...position.top !== void 0 && { top: `${position.top}px` },
           ...position.bottom !== void 0 && { bottom: `${position.bottom}px` },
           ...position.transform && { transform: position.transform },
@@ -475,13 +448,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (day.isWeekend && !day.isSelected) classes.push("rangepicker-day-weekend");
       if (day.isHoliday) classes.push("rangepicker-day-holiday");
       if (day.isSelected) {
-        if (localStartDate.value && localEndDate.value && day.date.isSame(localStartDate.value, "day") && day.date.isSame(localEndDate.value, "day"))
+        if (localStartDate.value && localEndDate.value && day.date.isSame(localStartDate.value, "day") && day.date.isSame(localEndDate.value, "day")) {
           classes.push("rangepicker-day-selected-single");
-        else if (localStartDate.value && day.date.isSame(localStartDate.value, "day"))
+        } else if (localStartDate.value && day.date.isSame(localStartDate.value, "day")) {
           classes.push("rangepicker-day-selected-start");
-        else if (localEndDate.value && day.date.isSame(localEndDate.value, "day"))
+        } else if (localEndDate.value && day.date.isSame(localEndDate.value, "day")) {
           classes.push("rangepicker-day-selected-end");
-        else classes.push("rangepicker-day-selected");
+        } else {
+          classes.push("rangepicker-day-selected");
+        }
       }
       if (day.isInRange) classes.push("rangepicker-day-in-range");
       if (localStartDate.value && !localEndDate.value && hoveredDay.value) {
@@ -543,8 +518,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     function handleDayHover(day, event) {
       hoveredDay.value = day;
-      if (props.showTooltip && localStartDate.value && !localEndDate.value)
-        updateTooltipPosition(event);
+      if (props.showTooltip && localStartDate.value && !localEndDate.value) updateTooltipPosition(event);
     }
     function updateTooltipPosition(event) {
       const rect = event.target.getBoundingClientRect();
@@ -583,11 +557,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     function cancel() {
       var _a, _b;
-      if ((_a = props.modelValue) == null ? void 0 : _a.startDate)
-        localStartDate.value = dayjs(props.modelValue.startDate);
+      if ((_a = props.modelValue) == null ? void 0 : _a.startDate) localStartDate.value = dayjs(props.modelValue.startDate);
       else localStartDate.value = null;
-      if ((_b = props.modelValue) == null ? void 0 : _b.endDate)
-        localEndDate.value = dayjs(props.modelValue.endDate);
+      if ((_b = props.modelValue) == null ? void 0 : _b.endDate) localEndDate.value = dayjs(props.modelValue.endDate);
       else localEndDate.value = null;
       close();
     }
@@ -647,6 +619,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", {
                   ref_key: "calendarRef",
                   ref: calendarRef,
+                  "data-version": packageVersion,
                   class: normalizeClass(["rangepicker-container", [__props.variant === "mobile" ? "rangepicker-mobile" : ""]]),
                   style: normalizeStyle({ ...calendarStyle.value, ...__props.colorStyles, borderRadius: props.borderRadius })
                 }, [
@@ -739,11 +712,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     ]),
                     !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_17, [
                       createElementVNode("button", {
-                        class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 hover:arch-bg-gray-100 arch-rounded-lg arch-transition-colors",
+                        class: "arch-rounded-lg arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 arch-transition-colors hover:arch-bg-gray-100",
                         onClick: cancel
                       }, " Cancel "),
                       createElementVNode("button", {
-                        class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-rounded-lg arch-transition-colors disabled:arch-opacity-50 disabled:arch-cursor-not-allowed",
+                        class: "arch-rounded-lg arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-transition-colors disabled:arch-cursor-not-allowed disabled:arch-opacity-50",
                         style: normalizeStyle({
                           backgroundColor: ((_a = __props.colorStyles) == null ? void 0 : _a["--color-primary"]) ? `rgb(${__props.colorStyles["--color-primary"]})` : "rgb(37 99 235)"
                         }),
@@ -776,7 +749,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-00d0dacd"]]);
+const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-373603fd"]]);
 const _hoisted_1 = { class: "rangepicker-input-container" };
 const _hoisted_2 = ["id", "value", "placeholder", "readonly", "name"];
 const inputClass = "rangepicker-input block w-full h-full bg-transparent border-0 shadow-none outline-none cursor-pointer font-inherit text-inherit p-0";
@@ -825,10 +798,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         console.warn(`[Rangepicker] Invalid hex color: ${hex}`);
         return null;
       }
-      const r = parseInt(hex.substring(0, 2), 16);
-      const g = parseInt(hex.substring(2, 4), 16);
-      const b = parseInt(hex.substring(4, 6), 16);
-      if (isNaN(r) || isNaN(g) || isNaN(b)) {
+      const r = Number.parseInt(hex.substring(0, 2), 16);
+      const g = Number.parseInt(hex.substring(2, 4), 16);
+      const b = Number.parseInt(hex.substring(4, 6), 16);
+      if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
         return null;
       }
       return `${r} ${g} ${b}`;
@@ -838,8 +811,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inputRef = ref(null);
     const isOpen = ref(false);
     function parseValue(value) {
-      if (!value)
-        return { startDate: "", endDate: "" };
+      if (!value) return { startDate: "", endDate: "" };
       const parts = value.split(" - ");
       if (parts.length === 2) {
         return {
@@ -849,10 +821,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return { startDate: "", endDate: "" };
     }
-    watch(() => props == null ? void 0 : props.close, (cur) => {
-      if (cur)
-        inputRef.value.blur();
-    });
+    watch(
+      () => props == null ? void 0 : props.close,
+      (cur) => {
+        if (cur) inputRef.value.blur();
+      }
+    );
     const localValue = ref(parseValue(props.modelValue));
     const displayValue = computed(() => {
       return props.modelValue || "";
@@ -874,9 +848,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", "");
       isOpen.value = false;
     }
-    watch(() => props.modelValue, (newVal) => {
-      localValue.value = parseValue(newVal);
-    });
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        localValue.value = parseValue(newVal);
+      }
+    );
     const colorStyles = computed(() => {
       const styles = {};
       if (props.primaryColor) {
@@ -898,7 +875,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
-        ref: "wrapperRef",
         class: "rangepicker-input-wrapper",
         style: colorStyles.value
       }), [
@@ -964,7 +940,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18c5e3d4"]]);
+const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1132af89"]]);
 function useRangepicker(triggerRef, options = {}) {
   const isOpen = ref(false);
   const dateRange = ref({ startDate: "", endDate: "" });