@archpublicwebsite/rangepicker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Archipelago International Hotels and Resorts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,340 @@
+# rangepicker
+
+Custom, lightweight date range picker component for Vue 3.
+
+## Features
+
+- 🎨 **Vue 3 Composition API** - Built with modern Vue 3 and TypeScript
+- 📦 **Framework Agnostic CSS** - Pre-compiled CSS, no Tailwind required in your project
+- 📅 **Dayjs Integration** - Powerful date manipulation without moment.js bloat
+- 🎨 **Themeable** - Easy color customization via CSS variables
+- 📱 **Mobile Responsive** - Touch-friendly with bottom sheet on mobile
+- 🎯 **Smart Positioning** - Auto-adjusts based on available viewport space
+- ♿ **Accessible** - Keyboard navigation and screen reader support
+- 🚀 **SSR Compatible** - Works perfectly with Nuxt 3
+- 🪶 **Lightweight** - No external datepicker dependencies
+
+## Installation
+
+From the monorepo root:
+
+```bash
+pnpm add rangepicker --filter @pba/nuxt
+```
+
+Or install dependencies in the rangepicker package:
+
+```bash
+cd packages/rangepicker
+pnpm install
+```
+
+## Quick Start
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { RangepickerInput } from '@archi-ui/rangepicker'
+import '@archi-ui/rangepicker/style.css' // Pre-compiled CSS - no Tailwind needed!
+
+const dates = ref('')
+</script>
+
+<template>
+  <RangepickerInput 
+    v-model="dates" 
+    primary-color="#3b82f6"
+    placeholder="Check in / Check out" 
+  />
+</template>
+```
+
+**No Tailwind CSS required!** The package includes pre-compiled CSS that works with any framework.
+
+## Color Customization
+
+Customize colors easily by passing HEX color values as props. Each rangepicker instance can have its own color scheme:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { RangepickerInput } from '@archi-ui/rangepicker'
+
+const dates1 = ref('')
+const dates2 = ref('')
+const dates3 = ref('')
+</script>
+
+<template>
+  <!-- Blue theme -->
+  <RangepickerInput
+    v-model="dates1"
+    primary-color="#3b82f6"
+    secondary-color="#60a5fa"
+    placeholder="Blue theme"
+  />
+
+  <!-- Purple theme -->
+  <RangepickerInput
+    v-model="dates2"
+    primary-color="#8b5cf6"
+    secondary-color="#a78bfa"
+    placeholder="Purple theme"
+  />
+
+  <!-- Red theme -->
+  <RangepickerInput
+    v-model="dates3"
+    primary-color="#ef4444"
+    secondary-color="#f87171"
+    placeholder="Red theme"
+  />
+</template>
+```
+
+### Color Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `primary-color` | `string` | - | Main color for selected dates and buttons (HEX format, e.g., `#3b82f6`) |
+| `secondary-color` | `string` | - | Color for hover states and secondary elements (HEX format, optional) |
+
+**Features:**
+- ✅ **Scoped per instance** - Multiple pickers can have different colors simultaneously
+- ✅ **No global state** - Colors don't conflict between instances
+- ✅ **HEX format** - Standard 3 or 6 digit HEX colors (e.g., `#3b82f6`, `#fff`)
+- ✅ **Auto-conversion** - Automatically converts HEX to RGB for CSS variables
+- ✅ **Optional** - Falls back to default theme if not provided
+
+## Customization
+
+Customize colors using CSS variables:
+
+```css
+/* Your global styles */
+:root {
+  --color-primary: 59 130 246; /* blue-500 */
+  --color-secondary: 148 163 184; /* slate-400 */
+}
+```
+
+**📖 See [CUSTOMIZATION.md](./CUSTOMIZATION.md) for complete theming guide**
+
+## Usage
+
+### Basic Usage
+
+```vue
+<template>
+  <div>
+    <input
+      ref="triggerRef"
+      type="text"
+      :value="dateRangeText"
+      placeholder="Select dates"
+      readonly
+      @click="isOpen = true"
+    />
+
+    <Rangepicker
+      v-model="dateRange"
+      v-model:is-open="isOpen"
+      :trigger-element="triggerRef"
+      :number-of-months="2"
+      :format="'DD MMM YYYY'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Rangepicker } from 'rangepicker'
+import 'rangepicker/style.css'
+
+const triggerRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const dateRange = ref({ startDate: '', endDate: '' })
+
+const dateRangeText = computed(() => {
+  if (!dateRange.value.startDate || !dateRange.value.endDate) return ''
+  return `${dateRange.value.startDate} - ${dateRange.value.endDate}`
+})
+</script>
+```
+
+### Using the Composable
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Rangepicker, useRangepicker } from 'rangepicker'
+import 'rangepicker/style.css'
+
+const triggerRef = ref<HTMLElement | null>(null)
+const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, {
+  numberOfMonths: 2,
+  format: 'DD MMM YYYY',
+  minDays: 1,
+})
+</script>
+```
+
+### Hotel Booking Example
+
+```vue
+<template>
+  <div>
+    <input
+      ref="bookingInputRef"
+      type="text"
+      :value="bookingText"
+      placeholder="Check-in - Check-out"
+      readonly
+      @click="isBookingOpen = true"
+    />
+
+    <Rangepicker
+      v-model="bookingDates"
+      v-model:is-open="isBookingOpen"
+      :trigger-element="bookingInputRef"
+      :number-of-months="2"
+      :number-of-columns="2"
+      :min-days="1"
+      :format="'DD MMM YYYY'"
+      :show-tooltip="true"
+      :holidays="holidays"
+      :min-date="today"
+      variant="desktop"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Rangepicker } from 'rangepicker'
+import 'rangepicker/style.css'
+import dayjs from 'dayjs'
+
+const bookingInputRef = ref<HTMLElement | null>(null)
+const isBookingOpen = ref(false)
+const bookingDates = ref({ startDate: '', endDate: '' })
+const today = dayjs().format('YYYY-MM-DD')
+const holidays = ref(['2025-12-25', '2025-01-01'])
+
+const bookingText = computed(() => {
+  if (!bookingDates.value.startDate || !bookingDates.value.endDate) return ''
+  return `${bookingDates.value.startDate} - ${bookingDates.value.endDate}`
+})
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `{ startDate?: string \| Date \| Dayjs, endDate?: string \| Date \| Dayjs }` | `{}` | Selected date range |
+| `isOpen` | `boolean` | `false` | Controls picker visibility |
+| `variant` | `'desktop' \| 'mobile'` | `'desktop'` | Display variant |
+| `primaryColor` | `string` | - | Primary color in HEX format (e.g., `#3b82f6`) |
+| `secondaryColor` | `string` | - | Secondary color in HEX format (e.g., `#60a5fa`) |
+| `minDate` | `string \| Date \| Dayjs` | - | Minimum selectable date |
+| `maxDate` | `string \| Date \| Dayjs` | - | Maximum selectable date |
+| `minDays` | `number` | - | Minimum number of days in range |
+| `maxDays` | `number` | - | Maximum number of days in range |
+| `numberOfMonths` | `number` | `2` | Number of months to display |
+| `numberOfColumns` | `number` | `2` | Grid columns for months |
+| `disabledDates` | `(string \| Date)[]` | `[]` | Array of disabled dates |
+| `holidays` | `(string \| Date)[]` | `[]` | Array of holiday dates |
+| `format` | `string` | `'YYYY-MM-DD'` | Date format |
+| `delimiter` | `string` | `' - '` | Delimiter between dates |
+| `placeholder` | `string` | `'Select dates'` | Placeholder text |
+| `label` | `string` | - | Label for the picker |
+| `showTooltip` | `boolean` | `true` | Show night count tooltip |
+| `autoApply` | `boolean` | `false` | Auto-apply selection |
+| `position` | `'auto' \| 'top' \| 'bottom'` | `'auto'` | Positioning strategy |
+| `triggerElement` | `HTMLElement \| null` | - | Trigger element for positioning |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `{ startDate: string, endDate: string }` | Emitted when date range changes |
+| `update:isOpen` | `boolean` | Emitted when picker opens/closes |
+| `dateSelected` | `Dayjs` | Emitted when a date is clicked |
+| `rangeSelected` | `{ start: Dayjs, end: Dayjs }` | Emitted when range is complete |
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server with demo
+pnpm dev
+
+# Build package
+pnpm build
+
+# Type check
+pnpm type-check
+
+# Preview build
+pnpm preview
+```
+
+## Package Structure
+
+```
+packages/rangepicker/
+├── dist/                  # Built files
+│   ├── rangepicker.js    # ES module
+│   ├── rangepicker.umd.cjs  # UMD module
+│   ├── style.css         # Compiled styles
+│   └── index.d.ts        # TypeScript types
+├── src/
+│   ├── index.ts          # Main entry
+│   ├── Rangepicker.vue   # Component
+│   ├── types.ts          # Type definitions
+│   ├── utils/
+│   │   ├── calendar.ts   # Calendar logic
+│   │   ├── date.ts       # Date utilities
+│   │   └── position.ts   # Positioning
+│   └── styles/
+│       └── rangepicker.scss
+├── index.html            # Demo page
+├── package.json
+├── vite.config.ts
+└── tsconfig.json
+```
+
+## Styling
+
+The component uses Tailwind CSS for styling. You can customize the appearance by:
+
+1. **Using Tailwind Classes**: The component uses standard Tailwind classes that can be customized via your Tailwind config
+2. **CSS Variables**: Override CSS custom properties for colors and spacing
+3. **Custom CSS**: Import your own styles after the component styles
+
+Example custom styling:
+
+```css
+.rangepicker-day-selected {
+  @apply bg-purple-600 text-white hover:bg-purple-700;
+}
+
+.rangepicker-day-in-range {
+  @apply bg-purple-50 text-purple-900;
+}
+```
+
+## Browser Support
+
+- Chrome/Edge (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+- Mobile Safari (iOS 14+)
+- Chrome for Android (latest)
+
+## License
+
+MIT

package/dist/Rangepicker.vue.d.ts

@@ -0,0 +1,58 @@
+import { Dayjs } from 'dayjs';
+interface Props {
+    modelValue?: {
+        startDate?: string | Date | Dayjs;
+        endDate?: string | Date | Dayjs;
+    };
+    isOpen?: boolean;
+    variant?: 'desktop' | 'mobile';
+    minDate?: string | Date | Dayjs;
+    maxDate?: string | Date | Dayjs;
+    minDays?: number;
+    maxDays?: number;
+    close?: boolean;
+    valueOfMonths?: number;
+    valueOfColumns?: number;
+    disabledDates?: (string | Date)[];
+    holidays?: (string | Date)[];
+    format?: string;
+    delimiter?: string;
+    placeholder?: string;
+    label?: string;
+    showTooltip?: boolean;
+    autoApply?: boolean;
+    position?: 'auto' | 'top' | 'bottom';
+    triggerElement?: HTMLElement | null;
+    colorStyles?: Record<string, string>;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        startDate: string;
+        endDate: string;
+    }) => any;
+    "update:isOpen": (value: boolean) => any;
+    dateSelected: (date: Dayjs) => any;
+    rangeSelected: (start: Dayjs, end: Dayjs) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: {
+        startDate: string;
+        endDate: string;
+    }) => any;
+    "onUpdate:isOpen"?: (value: boolean) => any;
+    onDateSelected?: (date: Dayjs) => any;
+    onRangeSelected?: (start: Dayjs, end: Dayjs) => any;
+}>, {
+    isOpen: boolean;
+    variant: "desktop" | "mobile";
+    valueOfMonths: number;
+    valueOfColumns: number;
+    format: string;
+    delimiter: string;
+    showTooltip: boolean;
+    autoApply: boolean;
+    position: "auto" | "top" | "bottom";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    calendarRef: HTMLDivElement;
+}, any>;
+export default _default;
+//# sourceMappingURL=Rangepicker.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AAwiBA,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"}

package/dist/RangepickerInput.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+export declare const Default: Story;
+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

@@ -0,0 +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"}

package/dist/RangepickerInput.stories.js

@@ -0,0 +1,117 @@
+import { ref, watch } from "vue";
+import RangepickerInput from "./RangepickerInput.vue";
+const meta = {
+    title: "Components/Rangepicker",
+    component: RangepickerInput,
+    argTypes: {
+        modelValue: {
+            control: "text"
+        },
+        options: {
+            control: "object"
+        },
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"]
+        },
+        primaryColor: {
+            control: "color",
+            description: "Primary color for selected dates and highlights"
+        },
+        secondaryColor: {
+            control: "color",
+            description: "Secondary color for hover states"
+        }
+    },
+    args: {
+        modelValue: "",
+        placeholder: "Check in / Check out",
+        id: "dates",
+        name: "dates",
+        variant: "desktop",
+        options: {
+            autoApply: true,
+            allowRepick: true,
+            dropdowns: {
+                minYear: new Date().getFullYear(),
+                maxYear: new Date().getFullYear() + 2,
+                months: true,
+                years: true,
+            },
+            startDate: new Date(),
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+            singleMode: false,
+            tooltipText: {
+                one: 'night',
+                other: 'nights',
+            },
+            tooltipNumber: (totalDays) => {
+                return totalDays - 1;
+            },
+        }
+    },
+    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: 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>
+    `
+    })
+};
+export default meta;
+export const Default = {};
+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"
+    }
+};

package/dist/RangepickerInput.vue.d.ts

@@ -0,0 +1,47 @@
+interface LitepickerOptions {
+    autoApply?: boolean;
+    allowRepick?: boolean;
+    dropdowns?: any;
+    startDate?: Date | string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    format?: string;
+    numberOfColumns?: number;
+    numberOfMonths?: number;
+    singleMode?: boolean;
+    tooltipText?: any;
+    tooltipNumber?: any;
+    inlineMode?: boolean;
+    minDays?: number;
+    maxDays?: number;
+    showTooltip?: boolean;
+}
+interface Props {
+    id?: string;
+    close?: boolean;
+    modelValue?: string;
+    name?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    class?: string;
+    options?: LitepickerOptions;
+    variant?: 'desktop' | 'mobile';
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    focusin: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+    onFocusin?: () => any;
+}>, {
+    variant: "desktop" | "mobile";
+    placeholder: string;
+    readonly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    wrapperRef: HTMLDivElement;
+    inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=RangepickerInput.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"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;;;;;AAyNpB,wBAUG"}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import Rangepicker from './Rangepicker.vue';
+import RangepickerInput from './RangepickerInput.vue';
+import type { DateRange, RangepickerProps } from './types';
+export default RangepickerInput;
+export { Rangepicker, RangepickerInput };
+export type { RangepickerProps, DateRange };
+export declare function useRangepicker(triggerRef: any, options?: Partial<RangepickerProps>): {
+    isOpen: import("vue").Ref<boolean, boolean>;
+    dateRange: import("vue").Ref<{
+        startDate: string;
+        endDate: string;
+    }, DateRange | {
+        startDate: string;
+        endDate: string;
+    }>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    options: Partial<RangepickerProps>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAC3C,OAAO,gBAAgB,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG1D,eAAe,gBAAgB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAGxC,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAA;AAG3C,wBAAgB,cAAc,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,GAAE,OAAO,CAAC,gBAAgB,CAAM;;;;;;;;;;;;;EAgBtF"}

package/dist/index.js

@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+import Rangepicker from './Rangepicker.vue';
+import RangepickerInput from './RangepickerInput.vue';
+// Default export - RangepickerInput (Litepicker-compatible wrapper)
+export default RangepickerInput;
+// Named exports
+export { Rangepicker, RangepickerInput };
+// Vue 3 composable for easy integration
+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; };
+    return {
+        isOpen,
+        dateRange,
+        open,
+        close,
+        toggle,
+        options,
+    };
+}