snack-datepicker 0.0.1

package/README.md

@@ -0,0 +1,186 @@
+# 📅 Snack Datepicker
+
+A modern **React Date Picker & Date Range Picker** built for flexibility, performance, and developer experience.
+
+**Snack Datepicker** provides a clean, customizable, and lightweight component for selecting **single dates** or **date ranges**, with powerful configuration options such as presets, disabled dates, multi-month view, and custom day rendering.
+
+Ideal for **analytics dashboards, booking systems, reporting tools, admin panels, data filters, and forms**.
+
+👉 [Try it](https://snack-calendar.vercel.app/)
+
+<p align="center">
+  <img src="https://github.com/hemanth-user13/Snack-DatePicker/blob/master/src/assests/Screenshot%202026-03-15%20183307.png" width="900"/>
+</p>
+
+<p align="center">
+  <img src="https://github.com/hemanth-user13/Snack-DatePicker/blob/master/src/assests/Screenshot%202026-03-15%20183352.png" width="900"/>
+</p>
+
+## Features
+
+- 📅 **Single Date Picker** — clean, minimal single date selection
+- 📆 **Date Range Picker** — intuitive start and end date selection
+- 🎯 **Preset date ranges** — quickly jump to common ranges like Last 7 Days or Last 30 Days
+- 📊 **Multi-month view** — display multiple months simultaneously
+- 🔒 **Min / Max date restrictions** — constrain selectable dates to a valid range
+- 🚫 **Disabled dates support** — block out specific unavailable dates
+- 🎨 **Custom day renderer** — full control over how each day cell looks
+- ⚡ **Lightweight & fast** — minimal bundle impact, tree-shakable
+- 🧩 **Highly customizable** — adapt to any design system
+- ⚛️ **Built for modern React** — hooks-first, no legacy patterns
+
+## Installation
+
+```bash
+npm install snack-datepicker
+# or
+yarn add snack-datepicker
+```
+
+### Peer Dependencies
+
+Ensure your project has these installed:
+
+```bash
+npm install react react-dom
+```
+
+## Usage
+
+> [!IMPORTANT]
+> You must import the stylesheet for the datepicker to display correctly:
+>
+> ```tsx
+> import "snack-datepicker/dist/style.css";
+> ```
+
+### Basic
+
+```tsx
+import { DatePicker } from "snack-datepicker";
+import "snack-datepicker/dist/style.css";
+
+function App() {
+  return <DatePicker mode="single" onChange={(date) => console.log(date)} />;
+}
+
+export default App;
+```
+
+### Date Range Example
+
+```tsx
+import { DatePicker } from "snack-datepicker";
+import { useState } from "react";
+
+function App() {
+  const [range, setRange] = useState({
+    start: null,
+    end: null,
+  });
+
+  return (
+    <DatePicker
+      mode="range"
+      value={range}
+      onChange={(value) => setRange(value)}
+      numberOfMonths={2}
+    />
+  );
+}
+```
+
+### Preset Range Example
+
+```tsx
+import { DatePicker } from "snack-datepicker";
+
+const presets = [
+  {
+    label: "Last 7 Days",
+    getValue: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setDate(end.getDate() - 7);
+      return { start, end };
+    },
+  },
+  {
+    label: "Last 30 Days",
+    getValue: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setDate(end.getDate() - 30);
+      return { start, end };
+    },
+  },
+];
+
+function App() {
+  return <DatePicker mode="range" presets={presets} />;
+}
+```
+
+### Props API
+
+| Prop             | Type                        | Description                             |
+| ---------------- | --------------------------- | --------------------------------------- |
+| `mode`           | `"single" \| "range"`       | Date picker mode                        |
+| `value`          | `Date \| DateRange`         | Current selected value                  |
+| `onChange`       | `(value) => void`           | Triggered when date changes             |
+| `onApply`        | `(value) => void`           | Triggered when apply button is clicked  |
+| `onReset`        | `() => void`                | Reset the current selection             |
+| `minDate`        | `Date`                      | Minimum selectable date                 |
+| `maxDate`        | `Date`                      | Maximum selectable date                 |
+| `disabledDates`  | `Date[]`                    | Disable specific dates                  |
+| `weekStart`      | `0 \| 1`                    | Week start day (0 = Sunday, 1 = Monday) |
+| `numberOfMonths` | `number`                    | Number of months displayed at once      |
+| `showFooter`     | `boolean`                   | Show apply / reset footer               |
+| `className`      | `string`                    | Custom CSS class for styling            |
+| `renderDay`      | `(date: Date) => ReactNode` | Custom day cell renderer                |
+| `presets`        | `PresetRange[]`             | Preset date range options               |
+
+### Types
+
+```ts
+export type DatePickerMode = "single" | "range";
+
+export interface DateRange {
+  start: Date | null;
+  end: Date | null;
+}
+
+export interface PresetRange {
+  label: string;
+  getValue: () => DateRange;
+}
+
+export interface DatePickerProps {
+  mode?: DatePickerMode;
+  value?: Date | DateRange;
+  onChange?: (value: Date | DateRange) => void;
+  onApply?: (value: Date | DateRange | undefined) => void;
+  onReset?: () => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  weekStart?: 0 | 1;
+  numberOfMonths?: number;
+  showFooter?: boolean;
+  className?: string;
+  renderDay?: (date: Date) => ReactNode;
+  presets?: PresetRange[];
+}
+```
+
+## Built With
+
+[React](https://react.dev) · [Radix UI](https://www.radix-ui.com) · [date-fns](https://date-fns.org) · [TailwindCSS](https://tailwindcss.com) · [Framer Motion](https://www.framer.com/motion) · [Lucide Icons](https://lucide.dev)
+
+## License
+
+MIT
+
+## Author
+
+**Hemanth Dev**

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+type DatePickerMode = "single" | "range";
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface PresetRange {
+    label: string;
+    getValue: () => DateRange;
+}
+interface DatePickerProps {
+    mode?: DatePickerMode;
+    value?: Date | DateRange;
+    onChange?: (value: Date | DateRange) => void;
+    onApply?: (value: Date | DateRange | undefined) => void;
+    onReset?: () => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    weekStart?: 0 | 1;
+    numberOfMonths?: number;
+    showFooter?: boolean;
+    className?: string;
+    renderDay?: (date: Date) => ReactNode;
+    presets?: PresetRange[];
+}
+
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+type DatePickerMode = "single" | "range";
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface PresetRange {
+    label: string;
+    getValue: () => DateRange;
+}
+interface DatePickerProps {
+    mode?: DatePickerMode;
+    value?: Date | DateRange;
+    onChange?: (value: Date | DateRange) => void;
+    onApply?: (value: Date | DateRange | undefined) => void;
+    onReset?: () => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    weekStart?: 0 | 1;
+    numberOfMonths?: number;
+    showFooter?: boolean;
+    className?: string;
+    renderDay?: (date: Date) => ReactNode;
+    presets?: PresetRange[];
+}
+
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/index.js

@@ -0,0 +1,411 @@
+'use strict';
+
+var React = require('react');
+var dateFns = require('date-fns');
+var lucideReact = require('lucide-react');
+var framerMotion = require('framer-motion');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/date-picker/DatePicker.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var WEEK_DAYS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var WEEK_DAYS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var MonthGrid = ({
+  month,
+  mode,
+  selectedDate,
+  selectedRange,
+  hoverDate,
+  onDateClick,
+  onDateHover,
+  minDate,
+  maxDate,
+  disabledDates = [],
+  weekStart = 0,
+  renderDay,
+  showLabel = true
+}) => {
+  const days = React.useMemo(() => {
+    return dateFns.eachDayOfInterval({
+      start: dateFns.startOfMonth(month),
+      end: dateFns.endOfMonth(month)
+    });
+  }, [month]);
+  const weekDays = weekStart === 1 ? WEEK_DAYS_MON : WEEK_DAYS_SUN;
+  const startPad = React.useMemo(() => {
+    const dayOfWeek = days[0].getDay();
+    return weekStart === 1 ? dayOfWeek === 0 ? 6 : dayOfWeek - 1 : dayOfWeek;
+  }, [days, weekStart]);
+  const isDisabled = (date) => {
+    if (minDate && dateFns.isBefore(date, minDate)) return true;
+    if (maxDate && dateFns.isAfter(date, maxDate)) return true;
+    return disabledDates.some((d) => dateFns.isSameDay(d, date));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-[252px]", children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-dp-text", children: dateFns.format(month, "MMMM yyyy") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-1.5", children: weekDays.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "text-[11px] font-semibold text-dp-text-muted text-center uppercase tracking-wider py-1",
+        children: d
+      },
+      d
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7", children: [
+      [...Array(startPad)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-9" }, `pad-${i}`)),
+      days.map((day) => {
+        const disabled = isDisabled(day);
+        const isSelected = mode === "single" ? selectedDate && dateFns.isSameDay(day, selectedDate) : selectedRange && (selectedRange.start && dateFns.isSameDay(day, selectedRange.start) || selectedRange.end && dateFns.isSameDay(day, selectedRange.end));
+        const isStart = mode === "range" && (selectedRange == null ? void 0 : selectedRange.start) && dateFns.isSameDay(day, selectedRange.start);
+        const isEnd = mode === "range" && (selectedRange == null ? void 0 : selectedRange.end) && dateFns.isSameDay(day, selectedRange.end);
+        let inRange = false;
+        if (mode === "range" && (selectedRange == null ? void 0 : selectedRange.start)) {
+          if (selectedRange.end) {
+            inRange = dateFns.isWithinInterval(day, {
+              start: selectedRange.start,
+              end: selectedRange.end
+            });
+          } else if (hoverDate) {
+            const rangeStart = dateFns.isBefore(hoverDate, selectedRange.start) ? hoverDate : selectedRange.start;
+            const rangeEnd = dateFns.isBefore(hoverDate, selectedRange.start) ? selectedRange.start : hoverDate;
+            inRange = dateFns.isWithinInterval(day, {
+              start: rangeStart,
+              end: rangeEnd
+            });
+          }
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => !disabled && onDateClick(day),
+            onMouseEnter: () => !disabled && onDateHover(day),
+            onMouseLeave: () => onDateHover(null),
+            "aria-label": dateFns.format(day, "PPPP"),
+            "aria-selected": !!isSelected,
+            className: cn(
+              "relative h-9 w-9 text-sm flex items-center justify-center transition-all tabular-nums",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              "active:scale-[0.96]",
+              // Default
+              !isSelected && !inRange && "text-dp-text hover:bg-dp-surface-hover rounded-lg",
+              // Selected (start/end/single)
+              isSelected && "bg-dp-surface-active text-dp-text-selected z-10 shadow-sm font-semibold",
+              // Single mode selected
+              mode === "single" && isSelected && "rounded-lg",
+              // Range endpoints
+              isStart && !isEnd && "rounded-l-lg rounded-r-none",
+              isEnd && !isStart && "rounded-r-lg rounded-l-none",
+              isStart && isEnd && "rounded-lg",
+              // In range but not selected
+              inRange && !isSelected && "bg-[hsl(var(--dp-range-tint)/0.08)] text-primary rounded-none",
+              // Disabled
+              disabled && "text-dp-text-muted/40 cursor-not-allowed hover:bg-transparent"
+            ),
+            children: renderDay ? renderDay(day) : dateFns.format(day, "d")
+          },
+          day.toISOString()
+        );
+      })
+    ] })
+  ] });
+};
+var MonthGrid_default = React__default.default.memo(MonthGrid);
+var MonthSelector = ({
+  currentMonth,
+  onSelect
+}) => {
+  const current = dateFns.getMonth(currentMonth);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, y: 4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -4 },
+      transition: { duration: 0.15, ease: [0.25, 0.1, 0.25, 1] },
+      className: "grid grid-cols-3 gap-2 w-full max-w-[320px] mx-auto",
+      children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(i),
+          className: cn(
+            "py-3 text-sm font-medium rounded-lg transition-all active:scale-[0.97]",
+            current === i ? "bg-dp-surface-active text-dp-text-selected shadow-sm" : "hover:bg-dp-surface-hover text-dp-text"
+          ),
+          children: dateFns.format(new Date(2024, i, 1), "MMM")
+        },
+        i
+      ))
+    },
+    "month-selector"
+  );
+};
+var MonthSelector_default = MonthSelector;
+var YearSelector = ({
+  currentYear,
+  onSelect,
+  minDate,
+  maxDate
+}) => {
+  const years = Array.from({ length: 12 }, (_, i) => currentYear - 5 + i);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, y: 4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -4 },
+      transition: { duration: 0.15, ease: [0.25, 0.1, 0.25, 1] },
+      className: "grid grid-cols-3 gap-2 w-full max-w-[320px] mx-auto",
+      children: years.map((y) => {
+        const disabled = minDate && y < minDate.getFullYear() || maxDate && y > maxDate.getFullYear();
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !!disabled,
+            onClick: () => !disabled && onSelect(y),
+            className: cn(
+              "py-3 text-sm font-medium rounded-lg transition-all active:scale-[0.97]",
+              currentYear === y ? "bg-dp-surface-active text-dp-text-selected shadow-sm" : "hover:bg-dp-surface-hover text-dp-text",
+              disabled && "opacity-30 cursor-not-allowed"
+            ),
+            children: y
+          },
+          y
+        );
+      })
+    },
+    "year-selector"
+  );
+};
+var YearSelector_default = YearSelector;
+var DatePicker = React__default.default.forwardRef(
+  ({
+    mode = "single",
+    value,
+    onChange,
+    onApply,
+    onReset,
+    minDate,
+    maxDate,
+    disabledDates,
+    weekStart = 0,
+    numberOfMonths = 2,
+    showFooter = true,
+    className,
+    renderDay,
+    presets
+  }, ref) => {
+    const [viewDate, setViewDate] = React.useState(() => {
+      if (mode === "single" && value instanceof Date) return value;
+      if (mode === "range" && value && "start" in value && value.start)
+        return value.start;
+      return /* @__PURE__ */ new Date();
+    });
+    const [viewMode, setViewMode] = React.useState("calendar");
+    const [hoverDate, setHoverDate] = React.useState(null);
+    const selectedRange = mode === "range" ? value != null ? value : null : null;
+    const selectedDate = mode === "single" ? value != null ? value : null : null;
+    const handleDateClick = React.useCallback(
+      (date) => {
+        if (mode === "single") {
+          onChange == null ? void 0 : onChange(date);
+        } else {
+          const range = selectedRange || { start: null, end: null };
+          if (!range.start || range.start && range.end) {
+            onChange == null ? void 0 : onChange({ start: date, end: null });
+          } else {
+            if (dateFns.isBefore(date, range.start)) {
+              onChange == null ? void 0 : onChange({ start: date, end: range.start });
+            } else if (dateFns.isSameDay(date, range.start)) {
+              onChange == null ? void 0 : onChange({ start: date, end: date });
+            } else {
+              onChange == null ? void 0 : onChange({ start: range.start, end: date });
+            }
+          }
+        }
+      },
+      [mode, selectedRange, onChange]
+    );
+    const handleKeyDown = React.useCallback((e) => {
+      if (e.key === "Escape") {
+        setViewMode("calendar");
+      }
+    }, []);
+    const handlePresetClick = React.useCallback(
+      (preset) => {
+        const range = preset.getValue();
+        onChange == null ? void 0 : onChange(range);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex flex-col rounded-xl border border-dp-border bg-dp-surface select-none antialiased",
+          "shadow-[var(--dp-shadow)]",
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        role: "application",
+        "aria-label": "Date picker",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-dp-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewDate(dateFns.subMonths(viewDate, 1)),
+                className: "p-1.5 rounded-md hover:bg-dp-surface-hover text-dp-text-muted hover:text-dp-text transition-colors",
+                "aria-label": "Previous month",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setViewMode(viewMode === "month" ? "calendar" : "month"),
+                  className: cn(
+                    "text-sm font-semibold px-2 py-1 rounded-md transition-colors",
+                    viewMode === "month" ? "bg-dp-surface-hover text-dp-text" : "hover:bg-dp-surface-hover text-dp-text"
+                  ),
+                  children: dateFns.format(viewDate, "MMMM")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setViewMode(viewMode === "year" ? "calendar" : "year"),
+                  className: cn(
+                    "text-sm font-semibold px-2 py-1 rounded-md transition-colors",
+                    viewMode === "year" ? "bg-dp-surface-hover text-dp-text" : "hover:bg-dp-surface-hover text-dp-text"
+                  ),
+                  children: dateFns.format(viewDate, "yyyy")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewDate(dateFns.addMonths(viewDate, 1)),
+                className: "p-1.5 rounded-md hover:bg-dp-surface-hover text-dp-text-muted hover:text-dp-text transition-colors",
+                "aria-label": "Next month",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+            presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r border-dp-border p-3 min-w-[140px] flex flex-col gap-0.5", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePresetClick(preset),
+                className: "text-left text-xs font-medium px-2.5 py-1.5 rounded-md text-dp-text-muted hover:text-dp-text hover:bg-dp-surface-hover transition-colors",
+                children: preset.label
+              },
+              preset.label
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
+              viewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
+                {
+                  initial: { opacity: 0, y: 4 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: -4 },
+                  transition: { duration: 0.15, ease: [0.25, 0.1, 0.25, 1] },
+                  className: "flex flex-col md:flex-row gap-6",
+                  children: [...Array(numberOfMonths)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    MonthGrid_default,
+                    {
+                      month: dateFns.addMonths(viewDate, i),
+                      mode,
+                      selectedDate,
+                      selectedRange,
+                      hoverDate,
+                      onDateClick: handleDateClick,
+                      onDateHover: setHoverDate,
+                      minDate,
+                      maxDate,
+                      disabledDates,
+                      weekStart,
+                      renderDay,
+                      showLabel: numberOfMonths > 1
+                    },
+                    i
+                  ))
+                },
+                "calendar"
+              ),
+              viewMode === "month" && /* @__PURE__ */ jsxRuntime.jsx(
+                MonthSelector_default,
+                {
+                  currentMonth: viewDate,
+                  onSelect: (m) => {
+                    setViewDate(dateFns.setMonth(viewDate, m));
+                    setViewMode("calendar");
+                  }
+                }
+              ),
+              viewMode === "year" && /* @__PURE__ */ jsxRuntime.jsx(
+                YearSelector_default,
+                {
+                  currentYear: dateFns.getYear(viewDate),
+                  onSelect: (y) => {
+                    setViewDate(dateFns.setYear(viewDate, y));
+                    setViewMode("calendar");
+                  },
+                  minDate,
+                  maxDate
+                }
+              )
+            ] }) })
+          ] }),
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-dp-footer border-t border-dp-border rounded-b-xl", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onReset,
+                className: "flex items-center gap-1.5 text-xs font-medium text-dp-text-muted hover:text-dp-text transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 13 }),
+                  "Reset"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onApply == null ? void 0 : onApply(value),
+                className: "px-5 py-1.5 bg-primary text-primary-foreground text-xs font-semibold rounded  hover:opacity-90 shadow-sm transition-all active:scale-[0.98]",
+                children: "Apply"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map