@archpublicwebsite/rangepicker 1.0.13 → 1.0.18

package/dist/RangepickerFormatting.stories.js

@@ -0,0 +1,352 @@
+import { ref, watch } from "vue";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating formatting and display options
+ * for the Rangepicker component.
+ */
+const meta = {
+    title: "Components/Rangepicker/Formatting",
+    component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+## Formatting
+
+Configure how dates are displayed in the input field and calendar.
+The component uses [dayjs](https://day.js.org/docs/en/display/format) format tokens.
+
+### Common Format Tokens
+
+| Token | Output | Description |
+|-------|--------|-------------|
+| \`DD\` | 01-31 | Day of month (2 digits) |
+| \`D\` | 1-31 | Day of month |
+| \`MMM\` | Jan-Dec | Month abbreviation |
+| \`MMMM\` | January-December | Full month name |
+| \`MM\` | 01-12 | Month (2 digits) |
+| \`YYYY\` | 2026 | 4-digit year |
+| \`YY\` | 26 | 2-digit year |
+        `,
+            },
+        },
+    },
+    argTypes: {
+        placeholder: {
+            control: "text",
+            description: "Placeholder text shown when no date is selected",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select dates" },
+            },
+        },
+        options: {
+            control: "object",
+            description: "Configuration options including format settings",
+        },
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"],
+        },
+    },
+    args: {
+        id: "dates",
+        name: "dates",
+        variant: "desktop",
+    },
+    render: (args) => ({
+        components: { RangepickerInput },
+        setup() {
+            const modelValue = ref(args.modelValue ?? "");
+            watch(() => args.modelValue, (value) => {
+                const nextValue = value ?? "";
+                if (nextValue !== modelValue.value) {
+                    modelValue.value = nextValue;
+                }
+            });
+            return { args, modelValue };
+        },
+        template: `
+      <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;
+/**
+ * Default format: DD MMM YYYY (e.g., "26 Jan 2026")
+ */
+export const DefaultFormat = {
+    args: {
+        placeholder: "Check in / Check out",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Default Format
+
+The default date format: \`DD MMM YYYY\`
+
+**Output**: \`26 Jan 2026 - 30 Jan 2026\`
+
+\`\`\`typescript
+options: {
+  format: 'DD MMM YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * ISO format: YYYY-MM-DD (e.g., "2026-01-26")
+ */
+export const ISOFormat = {
+    args: {
+        placeholder: "Select dates (ISO format)",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'YYYY-MM-DD',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### ISO Format
+
+Standard ISO date format: \`YYYY-MM-DD\`
+
+**Output**: \`2026-01-26 - 2026-01-30\`
+
+Useful for APIs and databases that expect ISO format.
+
+\`\`\`typescript
+options: {
+  format: 'YYYY-MM-DD'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * US format: MM/DD/YYYY (e.g., "01/26/2026")
+ */
+export const USFormat = {
+    args: {
+        placeholder: "Select dates (US format)",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'MM/DD/YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### US Format
+
+American date format: \`MM/DD/YYYY\`
+
+**Output**: \`01/26/2026 - 01/30/2026\`
+
+\`\`\`typescript
+options: {
+  format: 'MM/DD/YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * European format: DD/MM/YYYY (e.g., "26/01/2026")
+ */
+export const EuropeanFormat = {
+    args: {
+        placeholder: "Select dates (EU format)",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD/MM/YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### European Format
+
+European date format: \`DD/MM/YYYY\`
+
+**Output**: \`26/01/2026 - 30/01/2026\`
+
+\`\`\`typescript
+options: {
+  format: 'DD/MM/YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Full month name format: D MMMM YYYY (e.g., "26 January 2026")
+ */
+export const FullMonthFormat = {
+    args: {
+        placeholder: "Select dates",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'D MMMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Full Month Name
+
+Display full month name: \`D MMMM YYYY\`
+
+**Output**: \`26 January 2026 - 30 January 2026\`
+
+\`\`\`typescript
+options: {
+  format: 'D MMMM YYYY'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Short format without year: DD MMM (e.g., "26 Jan")
+ */
+export const ShortFormat = {
+    args: {
+        placeholder: "Select dates",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Short Format (No Year)
+
+Compact format without year: \`DD MMM\`
+
+**Output**: \`26 Jan - 30 Jan\`
+
+Useful for short-term bookings where the year is implied.
+
+\`\`\`typescript
+options: {
+  format: 'DD MMM'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Custom placeholder text
+ */
+export const CustomPlaceholder = {
+    args: {
+        placeholder: "When are you traveling?",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Custom Placeholder
+
+Set a custom placeholder text for the input field.
+
+- **Type**: \`string\`
+- **Default**: \`'Select dates'\`
+
+\`\`\`vue
+<RangepickerInput placeholder="When are you traveling?" />
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Booking-style placeholder
+ */
+export const BookingPlaceholder = {
+    args: {
+        placeholder: "Check-in → Check-out",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'ddd, DD MMM',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Booking Style
+
+Format with day of week: \`ddd, DD MMM\`
+
+**Output**: \`Sun, 26 Jan - Thu, 30 Jan\`
+
+\`\`\`typescript
+options: {
+  format: 'ddd, DD MMM'
+}
+\`\`\`
+        `,
+            },
+        },
+    },
+};

package/dist/RangepickerInput.stories.d.ts

@@ -1,14 +1,50 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * # Rangepicker
+ *
+ * A flexible date range picker component for Vue 3 applications.
+ *
+ * ## Features
+ *
+ * - 📅 Date range selection with visual calendar
+ * - 📱 Responsive design (desktop dropdown / mobile bottom sheet)
+ * - 🎨 Customizable colors via props
+ * - 🔒 Date constraints (min/max dates, min/max days)
+ * - 🎯 Holiday and disabled dates support
+ * - 🌍 Flexible date formatting via dayjs
+ *
+ * ## Quick Start
+ *
+ * ```vue
+ * <template>
+ *   <RangepickerInput
+ *     v-model="dates"
+ *     placeholder="Check in / Check out"
+ *     :options="{ minDate: new Date(), format: 'DD MMM YYYY' }"
+ *   />
+ * </template>
+ * ```
+ *
+ * ## Props Documentation
+ *
+ * Explore the categorized stories in the sidebar:
+ * - **Modes** - Display variants and behavior modes
+ * - **Constraints** - Date limits and validation
+ * - **Formatting** - Date format patterns
+ * - **Theming** - Color customization
+ * - **Special Dates** - Holidays and disabled dates
+ */
 declare const meta: Meta<typeof RangepickerInput>;
 export default meta;
 type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Default rangepicker with standard configuration.
+ * Click the input to open the calendar and select a date range.
+ */
 export declare const Default: Story;
+/**
+ * Mobile variant displays the calendar as a bottom sheet overlay.
+ */
 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;
 //# 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,iBAAiB,CAAC;AAEtD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAyIvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAmBpB,CAAC"}

package/dist/RangepickerInput.stories.js

@@ -1,27 +1,123 @@
 import { ref, watch } from "vue";
 import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * # Rangepicker
+ *
+ * A flexible date range picker component for Vue 3 applications.
+ *
+ * ## Features
+ *
+ * - 📅 Date range selection with visual calendar
+ * - 📱 Responsive design (desktop dropdown / mobile bottom sheet)
+ * - 🎨 Customizable colors via props
+ * - 🔒 Date constraints (min/max dates, min/max days)
+ * - 🎯 Holiday and disabled dates support
+ * - 🌍 Flexible date formatting via dayjs
+ *
+ * ## Quick Start
+ *
+ * ```vue
+ * <template>
+ *   <RangepickerInput
+ *     v-model="dates"
+ *     placeholder="Check in / Check out"
+ *     :options="{ minDate: new Date(), format: 'DD MMM YYYY' }"
+ *   />
+ * </template>
+ * ```
+ *
+ * ## Props Documentation
+ *
+ * Explore the categorized stories in the sidebar:
+ * - **Modes** - Display variants and behavior modes
+ * - **Constraints** - Date limits and validation
+ * - **Formatting** - Date format patterns
+ * - **Theming** - Color customization
+ * - **Special Dates** - Holidays and disabled dates
+ */
 const meta = {
-    title: "Components/Rangepicker",
+    title: "Components/Rangepicker/Overview",
     component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A flexible date range picker component with responsive design, 
+customizable theming, and comprehensive date constraints.
+
+See the **Props** categories in the sidebar for detailed documentation.
+        `,
+            },
+        },
+    },
     argTypes: {
         modelValue: {
-            control: "text"
+            control: "text",
+            description: "Two-way binding for formatted date range string",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: '""' },
+            },
         },
-        options: {
-            control: "object"
+        placeholder: {
+            control: "text",
+            description: "Placeholder text shown when no date is selected",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select dates" },
+            },
         },
         variant: {
             control: "select",
-            options: ["desktop", "mobile"]
+            options: ["desktop", "mobile"],
+            description: "Display variant - desktop shows dropdown, mobile shows bottom sheet",
+            table: {
+                type: { summary: "'desktop' | 'mobile'" },
+                defaultValue: { summary: "desktop" },
+            },
         },
         primaryColor: {
             control: "color",
-            description: "Primary color for selected dates and highlights"
+            description: "Primary color for selected dates and highlights (HEX format)",
+            table: {
+                type: { summary: "string" },
+            },
         },
         secondaryColor: {
             control: "color",
-            description: "Secondary color for hover states"
-        }
+            description: "Secondary color for hover states (HEX format)",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        options: {
+            control: "object",
+            description: "Configuration options for the rangepicker",
+            table: {
+                type: { summary: "LitepickerOptions" },
+            },
+        },
+        id: {
+            control: "text",
+            description: "HTML id attribute for the input",
+        },
+        name: {
+            control: "text",
+            description: "HTML name attribute for the input",
+        },
+        readonly: {
+            control: "boolean",
+            description: "Whether the input is readonly",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" },
+            },
+        },
+        close: {
+            control: "boolean",
+            description: "Programmatic control to close the picker",
+        },
     },
     args: {
         modelValue: "",
@@ -66,52 +162,57 @@ const meta = {
             return { args, modelValue };
         },
         template: `
-      <div style="padding: 2rem; background: #f5f5f5; min-height: 360px;">
+      <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;
-export const Default = {};
+/**
+ * Default rangepicker with standard configuration.
+ * Click the input to open the calendar and select a date range.
+ */
+export const Default = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Default Configuration
+
+The default rangepicker setup with:
+- Desktop variant (dropdown calendar)
+- Auto-apply enabled
+- 2-month view
+- Format: DD MMM YYYY
+- Min date: Today
+
+Click the input field to open the calendar.
+        `,
+            },
+        },
+    },
+};
+/**
+ * Mobile variant displays the calendar as a bottom sheet overlay.
+ */
 export const Mobile = {
     args: {
         variant: "mobile"
-    }
-};
-export const CustomBlueColor = {
-    args: {
-        primaryColor: "#3b82f6",
-        secondaryColor: "#60a5fa"
-    }
-};
-export const CustomPurpleColor = {
-    args: {
-        primaryColor: "#8b5cf6",
-        secondaryColor: "#a78bfa"
-    }
-};
-export const CustomRedColor = {
-    args: {
-        primaryColor: "#ef4444",
-        secondaryColor: "#f87171"
-    }
-};
-export const CustomGreenColor = {
-    args: {
-        primaryColor: "#10b981",
-        secondaryColor: "#34d399"
-    }
-};
-export const CustomOrangeColor = {
-    args: {
-        primaryColor: "#f97316",
-        secondaryColor: "#fb923c"
-    }
-};
-export const CustomPinkColor = {
-    args: {
-        primaryColor: "#ec4899",
-        secondaryColor: "#f472b6"
-    }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Mobile Variant
+
+Displays the calendar as a bottom sheet overlay, optimized for touch devices.
+
+\`\`\`vue
+<RangepickerInput variant="mobile" />
+\`\`\`
+        `,
+            },
+        },
+    },
 };

package/dist/RangepickerInput.vue.d.ts

@@ -28,6 +28,7 @@ interface Props {
     variant?: 'desktop' | 'mobile';
     primaryColor?: string;
     secondaryColor?: string;
+    fontFamily?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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":"AAqNA,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;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;;;;;;;;aAJW,SAAS,GAAG,QAAQ;iBAJhB,MAAM;cACT,OAAO;;;;;AA6NpB,wBAUG"}

package/dist/RangepickerModes.stories.d.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating different display modes and behaviors
+ * for the Rangepicker component.
+ */
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Desktop variant displays the calendar as a dropdown below the input field.
+ * Best for desktop/laptop screens with sufficient viewport space.
+ */
+export declare const DesktopVariant: Story;
+/**
+ * Mobile variant displays the calendar as a bottom sheet overlay.
+ * Optimized for touch devices and smaller screens.
+ */
+export declare const MobileVariant: Story;
+/**
+ * Single date mode allows selecting only one date instead of a range.
+ * Useful for single date inputs like birth dates or event dates.
+ */
+export declare const SingleMode: Story;
+/**
+ * Auto Apply mode automatically confirms the selection when both dates are picked.
+ * No need to click an Apply/Confirm button.
+ */
+export declare const AutoApply: Story;
+/**
+ * Manual Apply mode requires clicking an Apply button to confirm selection.
+ * Gives users a chance to review before confirming.
+ */
+export declare const ManualApply: Story;
+//# sourceMappingURL=RangepickerModes.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangepickerModes.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerModes.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,CAuFvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KA2BzB,CAAC"}