@archpublicwebsite/rangepicker 1.1.0 → 1.4.1

package/dist/Rangepicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AA2iBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAiClC,UAAU,KAAK;IACb,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;QACjC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;KAChC,CAAA;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACpC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACrC;;;mBAvC2C,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;YAmBxD,OAAO;aACN,SAAS,GAAG,QAAQ;mBAMd,MAAM;oBACL,MAAM;YAGd,MAAM;eACH,MAAM;iBAGJ,OAAO;eACT,OAAO;cACR,MAAM,GAAG,KAAK,GAAG,QAAQ;;;;AAonBtC,wBAUG"}
+{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AAmnBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAmClC,UAAU,KAAK;IACb,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;QACjC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;KAChC,CAAA;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACpC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACrC;;;mBAvC2C,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;YAmBxD,OAAO;aACN,SAAS,GAAG,QAAQ;mBAMd,MAAM;oBACL,MAAM;YAGd,MAAM;eACH,MAAM;iBAGJ,OAAO;eACT,OAAO;cACR,MAAM,GAAG,KAAK,GAAG,QAAQ;;;;AA+oBtC,wBAUG"}

package/dist/RangepickerInput.stories.d.ts

@@ -1,14 +1,74 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * RangepickerInput is a date range picker component that provides an intuitive
+ * interface for selecting date ranges. It supports both desktop and mobile variants,
+ * custom styling, and various configuration options.
+ *
+ * ## Features
+ * - Desktop and mobile variants
+ * - Custom color theming
+ * - Date restrictions (min/max dates, min/max days)
+ * - Multiple date formats
+ * - Tooltip support showing number of nights
+ * - Auto-apply or manual confirmation
+ */
 declare const meta: Meta<typeof RangepickerInput>;
 export default meta;
 type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Default state with no pre-selected dates.
+ * Shows the basic usage with standard configuration.
+ */
 export declare const Default: Story;
+/**
+ * Desktop variant with 2 columns showing months side by side.
+ * Best for larger screens and quick date range selection.
+ */
+export declare const Desktop: Story;
+/**
+ * Mobile variant with stacked calendar display.
+ * Optimized for smaller screens and touch interactions.
+ */
 export declare const Mobile: Story;
-export declare const CustomBlueColor: Story;
-export declare const CustomPurpleColor: Story;
-export declare const CustomRedColor: Story;
-export declare const CustomGreenColor: Story;
-export declare const CustomOrangeColor: Story;
-export declare const CustomPinkColor: Story;
+/**
+ * Pre-selected date range.
+ * Useful for editing existing bookings or showing current selection.
+ */
+export declare const WithPreselectedDates: Story;
+/**
+ * Custom brand colors for theming.
+ * Primary color is used for selected dates, secondary for hover states.
+ */
+export declare const CustomColors: Story;
+/**
+ * Date restrictions with minimum and maximum selectable dates.
+ * Prevents users from selecting dates outside the allowed range.
+ */
+export declare const WithDateRestrictions: Story;
+/**
+ * Minimum and maximum stay duration restrictions.
+ * Enforces booking rules like "minimum 3 nights" or "maximum 14 nights".
+ */
+export declare const WithStayDurationLimits: Story;
+/**
+ * Different date format (YYYY-MM-DD).
+ * Useful for backend integration or regional preferences.
+ */
+export declare const CustomDateFormat: Story;
+/**
+ * Manual apply mode - requires user to click apply button.
+ * Gives users a chance to review their selection before confirming.
+ */
+export declare const ManualApply: Story;
+/**
+ * Compact single column layout.
+ * Saves space while still providing full functionality.
+ */
+export declare const SingleColumn: Story;
+/**
+ * Without tooltip display.
+ * Cleaner interface when night count is not needed.
+ */
+export declare const WithoutTooltip: Story;
 //# sourceMappingURL=RangepickerInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RangepickerInput.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA4EvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC"}
+{"version":3,"file":"RangepickerInput.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAItD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAoHvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAelC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAmBpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC"}

package/dist/RangepickerInput.stories.js

@@ -1,26 +1,68 @@
 import { ref, watch } from "vue";
 import RangepickerInput from "./RangepickerInput.vue";
+import StoryWrapper from "./StoryWrapper.vue";
+/**
+ * RangepickerInput is a date range picker component that provides an intuitive
+ * interface for selecting date ranges. It supports both desktop and mobile variants,
+ * custom styling, and various configuration options.
+ *
+ * ## Features
+ * - Desktop and mobile variants
+ * - Custom color theming
+ * - Date restrictions (min/max dates, min/max days)
+ * - Multiple date formats
+ * - Tooltip support showing number of nights
+ * - Auto-apply or manual confirmation
+ */
 const meta = {
-    title: "Components/Rangepicker",
+    title: "Components/Rangepicker/Input",
     component: RangepickerInput,
+    tags: ['autodocs'],
     argTypes: {
         modelValue: {
-            control: "text"
+            control: "text",
+            description: "The selected date range in format 'DD MMM YYYY - DD MMM YYYY'"
         },
-        options: {
-            control: "object"
+        placeholder: {
+            control: "text",
+            description: "Placeholder text shown when no date is selected"
         },
         variant: {
             control: "select",
-            options: ["desktop", "mobile"]
+            options: ["desktop", "mobile"],
+            description: "Display variant - desktop shows side-by-side calendars, mobile shows stacked"
         },
         primaryColor: {
             control: "color",
-            description: "Primary color for selected dates and highlights"
+            description: "Primary color for selected dates and highlights (hex format)"
         },
         secondaryColor: {
             control: "color",
-            description: "Secondary color for hover states"
+            description: "Secondary color for hover states (hex format)"
+        },
+        id: {
+            control: "text",
+            description: "HTML id attribute for the input element"
+        },
+        name: {
+            control: "text",
+            description: "HTML name attribute for form submission"
+        },
+        readonly: {
+            control: "boolean",
+            description: "Whether the input is readonly"
+        },
+        options: {
+            control: "object",
+            description: "Litepicker configuration options"
+        },
+        'onUpdate:modelValue': {
+            action: 'update:modelValue',
+            description: "Emitted when date range changes"
+        },
+        'onFocusin': {
+            action: 'focusin',
+            description: "Emitted when input receives focus"
         }
     },
     args: {
@@ -29,6 +71,7 @@ const meta = {
         id: "dates",
         name: "dates",
         variant: "desktop",
+        readonly: true,
         options: {
             autoApply: true,
             allowRepick: true,
@@ -44,6 +87,7 @@ const meta = {
             numberOfColumns: 2,
             numberOfMonths: 2,
             singleMode: false,
+            showTooltip: true,
             tooltipText: {
                 one: 'night',
                 other: 'nights',
@@ -54,7 +98,7 @@ const meta = {
         }
     },
     render: (args) => ({
-        components: { RangepickerInput },
+        components: { RangepickerInput, StoryWrapper },
         setup() {
             const modelValue = ref(args.modelValue ?? "");
             watch(() => args.modelValue, (value) => {
@@ -63,55 +107,213 @@ const meta = {
                     modelValue.value = nextValue;
                 }
             });
-            return { args, modelValue };
+            const handleUpdate = (value) => {
+                modelValue.value = value;
+                args['onUpdate:modelValue']?.(value);
+            };
+            return { args, modelValue, handleUpdate };
         },
         template: `
-      <div style="padding: 2rem; background: #f5f5f5; min-height: 360px;">
-        <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
-      </div>
+      <StoryWrapper>
+        <RangepickerInput
+          v-bind="args"
+          v-model="modelValue"
+          @update:model-value="handleUpdate"
+          class="tw-w-full"
+        />
+      </StoryWrapper>
     `
     })
 };
 export default meta;
+/**
+ * Default state with no pre-selected dates.
+ * Shows the basic usage with standard configuration.
+ */
 export const Default = {};
+/**
+ * Desktop variant with 2 columns showing months side by side.
+ * Best for larger screens and quick date range selection.
+ */
+export const Desktop = {
+    args: {
+        variant: "desktop",
+        placeholder: "Select your dates"
+    }
+};
+/**
+ * Mobile variant with stacked calendar display.
+ * Optimized for smaller screens and touch interactions.
+ */
 export const Mobile = {
     args: {
-        variant: "mobile"
+        variant: "mobile",
+        placeholder: "Tap to select dates"
+    }
+};
+/**
+ * Pre-selected date range.
+ * Useful for editing existing bookings or showing current selection.
+ */
+export const WithPreselectedDates = {
+    args: {
+        modelValue: (() => {
+            const start = new Date();
+            const end = new Date();
+            end.setDate(end.getDate() + 7);
+            const format = (date) => {
+                const day = date.getDate().toString().padStart(2, '0');
+                const month = date.toLocaleString('en-US', { month: 'short' });
+                const year = date.getFullYear();
+                return `${day} ${month} ${year}`;
+            };
+            return `${format(start)} - ${format(end)}`;
+        })()
     }
 };
-export const CustomBlueColor = {
+/**
+ * Custom brand colors for theming.
+ * Primary color is used for selected dates, secondary for hover states.
+ */
+export const CustomColors = {
     args: {
-        primaryColor: "#3b82f6",
-        secondaryColor: "#60a5fa"
+        primaryColor: "#10b981",
+        secondaryColor: "#34d399",
+        placeholder: "Pick your travel dates"
     }
 };
-export const CustomPurpleColor = {
+/**
+ * Date restrictions with minimum and maximum selectable dates.
+ * Prevents users from selecting dates outside the allowed range.
+ */
+export const WithDateRestrictions = {
     args: {
-        primaryColor: "#8b5cf6",
-        secondaryColor: "#a78bfa"
+        placeholder: "Available dates only",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            maxDate: (() => {
+                const maxDate = new Date();
+                maxDate.setMonth(maxDate.getMonth() + 3);
+                return maxDate;
+            })(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            showTooltip: true,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
     }
 };
-export const CustomRedColor = {
+/**
+ * Minimum and maximum stay duration restrictions.
+ * Enforces booking rules like "minimum 3 nights" or "maximum 14 nights".
+ */
+export const WithStayDurationLimits = {
     args: {
-        primaryColor: "#ef4444",
-        secondaryColor: "#f87171"
+        placeholder: "3-14 nights stay",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            minDays: 3,
+            maxDays: 14,
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            showTooltip: true,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
     }
 };
-export const CustomGreenColor = {
+/**
+ * Different date format (YYYY-MM-DD).
+ * Useful for backend integration or regional preferences.
+ */
+export const CustomDateFormat = {
     args: {
-        primaryColor: "#10b981",
-        secondaryColor: "#34d399"
+        placeholder: "YYYY-MM-DD format",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'YYYY-MM-DD',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            showTooltip: true,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
+    }
+};
+/**
+ * Manual apply mode - requires user to click apply button.
+ * Gives users a chance to review their selection before confirming.
+ */
+export const ManualApply = {
+    args: {
+        placeholder: "Click apply to confirm",
+        options: {
+            autoApply: false,
+            allowRepick: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            showTooltip: true,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
     }
 };
-export const CustomOrangeColor = {
+/**
+ * Compact single column layout.
+ * Saves space while still providing full functionality.
+ */
+export const SingleColumn = {
     args: {
-        primaryColor: "#f97316",
-        secondaryColor: "#fb923c"
+        placeholder: "Compact view",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 1,
+            numberOfMonths: 2,
+            showTooltip: true,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => totalDays - 1,
+        }
     }
 };
-export const CustomPinkColor = {
+/**
+ * Without tooltip display.
+ * Cleaner interface when night count is not needed.
+ */
+export const WithoutTooltip = {
     args: {
-        primaryColor: "#ec4899",
-        secondaryColor: "#f472b6"
+        placeholder: "No tooltip shown",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            showTooltip: false
+        }
     }
 };

package/dist/StoryWrapper.vue.d.ts

@@ -0,0 +1,18 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=StoryWrapper.vue.d.ts.map

package/dist/StoryWrapper.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryWrapper.vue.d.ts","sourceRoot":"","sources":["../src/StoryWrapper.vue"],"names":[],"mappings":"AAiBA,iBAAS,cAAc;WAwBT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAOD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0RAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/rangepicker.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, toDisplayString, Fragment, renderList, nextTick } from "vue";
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, withModifiers, normalizeStyle, normalizeClass, toDisplayString, Fragment, renderList, nextTick } from "vue";
 import { useBreakpoints, breakpointsTailwind, useWindowSize, onClickOutside } from "@vueuse/core";
 import dayjs from "dayjs";
 function getDefaultExportFromCjs(x) {
@@ -329,7 +329,7 @@ const _hoisted_1$1 = {
   class: "rangepicker-overlay"
 };
 const _hoisted_2 = { class: "rangepicker-header" };
-const _hoisted_3 = { class: "flex items-center justify-between" };
+const _hoisted_3 = { class: "flex items-center justify-between w-full" };
 const _hoisted_4 = {
   key: 0,
   class: "text-xs font-medium text-gray-500 mb-1"
@@ -508,14 +508,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       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
+        } else {
           classes.push("rangepicker-day-selected");
+        }
       }
       if (day.isInRange)
         classes.push("rangepicker-day-in-range");
@@ -529,7 +530,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return classes;
     }
-    function selectDate(day) {
+    function selectDate(event, day) {
+      console.log("[Rangepicker v1.1] selectDate called", day.date.format("YYYY-MM-DD"));
+      event.stopPropagation();
+      const target = event.currentTarget;
+      if (target) {
+        target.blur();
+      }
       if (day.isDisabled)
         return;
       emit("dateSelected", day.date);
@@ -564,7 +571,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           apply();
       }
     }
-    function handleDayHover(day, event) {
+    function handleDayHover(event, day) {
       hoveredDay.value = day;
       if (props.showTooltip && localStartDate.value && !localEndDate.value)
         updateTooltipPosition(event);
@@ -589,13 +596,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         monthOffset.value++;
     }
     function close() {
+      var _a;
+      console.log("[Rangepicker v1.1] close called, activeElement:", (_a = document.activeElement) == null ? void 0 : _a.tagName);
       if (isFadingOut.value)
         return;
+      if (document.activeElement && document.activeElement !== document.body) {
+        document.activeElement.blur();
+      }
+      document.body.focus();
+      console.log("[Rangepicker v1.1] Focus moved to body");
       isFadingOut.value = true;
       setTimeout(() => {
         localIsOpen.value = false;
         emit("update:isOpen", false);
         isFadingOut.value = false;
+        nextTick(() => {
+          if (document.activeElement === document.body) {
+            document.body.blur();
+          }
+        });
       }, 200);
     }
     function apply() {
@@ -679,7 +698,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             localIsOpen.value || isFadingOut.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
               createElementVNode("div", {
                 class: "rangepicker-backdrop",
-                onClick: close
+                onClick: withModifiers(close, ["stop"])
               }),
               createElementVNode("div", {
                 ref_key: "calendarRef",
@@ -767,8 +786,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                               class: normalizeClass(getDayClasses(day)),
                               disabled: day.isDisabled,
                               "aria-label": day.date.format("MMMM D, YYYY"),
-                              onClick: ($event) => selectDate(day),
-                              onMouseenter: (e) => handleDayHover(day, e),
+                              onClick: (e) => selectDate(e, day),
+                              onMouseenter: (e) => handleDayHover(e, day),
                               onMouseleave: handleDayLeave
                             }, [
                               createElementVNode("span", null, toDisplayString(day.date.date()), 1)
@@ -813,7 +832,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-b9be9dd2"]]);
+const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-10261b64"]]);
 const _hoisted_1 = ["id", "value", "placeholder", "readonly", "name"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RangepickerInput",