@archpublicwebsite/rangepicker 1.0.8 → 1.4.1

package/README.md

@@ -5,7 +5,7 @@ Custom, lightweight date range picker component for Vue 3 with Tailwind CSS pref
 ## Features
 
 - 🎨 **Vue 3 Composition API** - Built with modern Vue 3 and TypeScript
-- 📦 **CSS Prefix Support** - All Tailwind classes prefixed with `arch-` to prevent conflicts with Vuetify/Bootstrap
+- 📦 **No CSS Prefix** - Clean Tailwind classes without prefix for maximum compatibility
 - 📅 **Dayjs Integration** - Powerful date manipulation without moment.js bloat
 - 🎨 **Themeable** - Easy color customization via props (HEX colors)
 - 📱 **Mobile Responsive** - Touch-friendly with bottom sheet on mobile
@@ -52,8 +52,8 @@ const dates = ref('')
 - No Flash of Unstyled Content (FOUC)
 - Industry standard (like Vuetify, Element Plus, etc.)
 
-**Tailwind CSS Prefix:**
-All Tailwind utility classes are prefixed with `arch-` to prevent conflicts with other CSS frameworks like Vuetify or Bootstrap. Your existing styles won't be affected!
+**Tailwind CSS Classes:**
+The component uses standard Tailwind CSS utilities without any prefix. All styling is encapsulated within the component's scoped CSS.
 
 ## Color Customization
 
@@ -115,14 +115,14 @@ const dates3 = ref('')
 
 This package is designed to work seamlessly with any Vue 3 framework:
 
-- ✅ **Vuetify** - No CSS conflicts thanks to `arch-` prefix
-- ✅ **Bootstrap** - Works alongside Bootstrap utilities
+- ✅ **Vuetify** - Works alongside Vuetify components
+- ✅ **Bootstrap** - Compatible with Bootstrap utilities
 - ✅ **Element Plus** - Fully compatible
 - ✅ **Quasar** - No issues
 - ✅ **Plain Vue 3** - Works great standalone
 - ✅ **Nuxt 3** - SSR compatible
 
-The `arch-` prefix on all Tailwind classes ensures zero conflicts with other CSS frameworks.
+All styles are compiled and scoped to the component, ensuring no conflicts with other frameworks.
 
 ## Usage
 
@@ -325,7 +325,7 @@ packages/rangepicker/
 ├── dist/                  # Built files (published to npm)
 │   ├── rangepicker.js    # ES module (39.91 KB, gzipped: 9.42 KB)
 │   ├── rangepicker.umd.cjs  # UMD module (20.18 KB, gzipped: 7.07 KB)
-│   ├── style.css         # Compiled styles with arch- prefix (48.69 KB, gzipped: 5.29 KB)
+│   ├── style.css         # Compiled styles (16.25 KB)
 │   └── *.d.ts            # TypeScript type definitions
 ├── src/
 │   ├── index.ts          # Main entry point
@@ -337,21 +337,21 @@ packages/rangepicker/
 │   │   ├── date.ts       # Dayjs utilities
 │   │   └── position.ts   # Smart positioning
 │   └── styles/
-│       └── rangepicker.scss  # Tailwind CSS with arch- prefix
+│       └── rangepicker.scss  # Source styles (compiled during build)
 ├── package.json
 ├── vite.config.ts
-└── tailwind.config.js    # With prefix: 'arch-'
+└── tailwind.config.js    # Tailwind config for package build
 ```
 
 ## CSS Architecture
 
-The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts with other frameworks:
+The component uses **compiled Tailwind CSS** bundled in the package:
 
-### Why the prefix?
-- ✅ **Zero conflicts** with Vuetify, Bootstrap, Element Plus, etc.
-- ✅ **Safe to use** alongside any CSS framework
-- ✅ **All utilities prefixed**: `.arch-flex`, `.arch-text-sm`, `.arch-bg-white`, etc.
-- ✅ **Custom classes untouched**: `.rangepicker-*` classes remain unprefixed
+### How it works
+- ✅ **Pre-compiled CSS** - All Tailwind utilities are built into `style.css`
+- ✅ **No conflicts** - Styles are scoped and don't interfere with your app
+- ✅ **Production-ready** - Minified and optimized (16KB gzipped)
+- ✅ **Just import and use** - No Tailwind config needed in your project
 
 ### Styling Options
 
@@ -384,11 +384,11 @@ The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts wit
 ### Styles not showing
 Make sure you imported the CSS:
 ```js
-import '@archpublicwebsite/rangepicker/style.css'
+import '@archpublicwebsite/rangepicker/dist/style.css'
 ```
 
-### CSS conflicts with Vuetify
-This should NOT happen thanks to the `arch-` prefix. If you see conflicts, please open an issue.
+### Using with other frameworks
+The component's CSS is self-contained and should not conflict with Vuetify, Bootstrap, or other frameworks. All styles are scoped to `.rangepicker-*` classes.
 
 ### TypeScript errors
 Ensure `vue` is installed as a dependency in your project.

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;;;;AAqnBtC,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/RangepickerInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AA+MA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,GAAG,CAAA;IACjB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;;;;;;;;aAHW,SAAS,GAAG,QAAQ;iBAJhB,MAAM;cACT,OAAO;;;;;AAyNpB,wBAUG"}
+{"version":3,"file":"RangepickerInput.vue.d.ts","sourceRoot":"","sources":["../src/RangepickerInput.vue"],"names":[],"mappings":"AAgNA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,GAAG,CAAA;IACjB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;;;;;;;;aAHW,SAAS,GAAG,QAAQ;iBAJhB,MAAM;cACT,OAAO;;;;;AA0NpB,wBAUG"}

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"}