@brightsoftware/date-np/dist/src/RangePicker/range-picker.js

Simple & minimal Nepali date picker that just works.

import { jsx as e, jsxs as a, Fragment as W } from "react/jsx-runtime";
import { useRef as S, useEffect as p } from "react";
import { cn as l } from "../../utils/clsx.js";
import z from "../Components/helpers/direction-aware-container.js";
import x from "./Components/range-picker-body.js";
import P from "./Components/range-picker-header.js";
import G from "./Components/range-picker-input.js";
import { RangePickerProvider as J, useRangePicker as K } from "./hooks/useRangePicker.js";
import { LocaleSwitcher as M } from "./Components/locale-switcher.js";
import { isInvalidDateRange as Q } from "../../utils/validators.js";
/* empty css           */
import "../../data/constants.js";
import T from "../Components/label.js";
const oe = (t) => {
  const {
    shouldShowInput: w = !0,
    className: v,
    classNames: r = {},
    inputProps: n = {},
    dAwareConProps: b = {},
    onRangeSelect: k,
    onVisibilityChange: s,
    minDate: d,
    maxDate: f,
    startingDateRange: o,
    endingDateRange: c,
    defaultLocale: N = "AD",
    shouldShowSinglePanelProp: y = !1,
    editable: m = !1,
    required: C = !1
  } = t, R = (n == null ? void 0 : n.ref) ?? S(null), g = S(null);
  let D = () => {
    const {
      rangePickerState: i,
      updateRangePickerVisibility: j,
      clearSelection: I,
      shouldShowSinglePanel: A,
      setDatePickerRange: L,
      setShouldShowSinglePanel: E
    } = K(), { isVisible: h, startDate: V, endDate: O } = i;
    p(() => {
      y && E(!0);
    }, []), p(() => {
      o && c && L(o, c);
    }, [o, c]), p(() => {
      s && s(h);
    }, [h, s]);
    const q = () => {
      j(!1), m && g.current && g.current();
    }, B = () => {
      I();
    };
    let u = !1;
    i.shouldShowSinglePanel === void 0 ? u = A() : u = i.shouldShowSinglePanel;
    const F = d && f && Q(d, f);
    return /* @__PURE__ */ e(
      z,
      {
        direction: "bottom",
        activateWith: "ref",
        activatorRef: R,
        onOutsideClick: q,
        centerAlignContainer: !0,
        active: h,
        ...b,
        children: /* @__PURE__ */ e(
          "div",
          {
            className: l(
              "flex flex-col gap-4 w-max h-max bg-white p-4 rounded-lg",
              "shadow-md",
              r.container,
              v
            ),
            children: F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-4 text-red-600 text-sm font-medium", children: "Invalid date range: minimum date is greater than maximum date" }) : /* @__PURE__ */ a(W, { children: [
              u ? (
                /* Single Panel Mode */
                /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ a(
                  "div",
                  {
                    className: l(
                      "flex flex-col gap-2 w-72",
                      r.leftPanel
                    ),
                    children: [
                      /* @__PURE__ */ e(P, { panel: "left" }),
                      /* @__PURE__ */ e(x, { panel: "left" })
                    ]
                  }
                ) })
              ) : (
                /* Dual Panel Mode */
                /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
                  /* @__PURE__ */ a(
                    "div",
                    {
                      className: l(
                        "flex flex-col gap-2 w-72",
                        r.leftPanel
                      ),
                      children: [
                        /* @__PURE__ */ e(P, { panel: "left" }),
                        /* @__PURE__ */ e(x, { panel: "left" })
                      ]
                    }
                  ),
                  /* @__PURE__ */ e("div", { className: "w-px bg-gray-200 my-2" }),
                  /* @__PURE__ */ a(
                    "div",
                    {
                      className: l(
                        "flex flex-col gap-2 w-72",
                        r.rightPanel
                      ),
                      children: [
                        /* @__PURE__ */ e(P, { panel: "right" }),
                        /* @__PURE__ */ e(x, { panel: "right" })
                      ]
                    }
                  )
                ] })
              ),
              /* @__PURE__ */ a("div", { className: "flex justify-end pt-3 gap-2 ", children: [
                V && O && /* @__PURE__ */ e(
                  "button",
                  {
                    onClick: (H) => {
                      H.stopPropagation(), B();
                    },
                    className: l(
                      "px-3 py-1 text-xs rounded border hover:cursor-pointer",
                      "hover:bg-gray-50 transition-colors",
                      "text-gray-600 border-gray-300"
                    ),
                    children: "Clear"
                  }
                ),
                t.lockLocale ? null : /* @__PURE__ */ e(M, {})
              ] })
            ] })
          }
        )
      }
    );
  };
  return /* @__PURE__ */ e(
    J,
    {
      minDate: d,
      maxDate: f,
      startingDateRange: o,
      endingDateRange: c,
      defaultLocale: N,
      onRangeSelect: k,
      children: /* @__PURE__ */ a("div", { className: l(
        "flex flex-col gap-0.5 w-full",
        v
      ), children: [
        t.label && /* @__PURE__ */ e(T, { required: C, children: t.label }),
        w && /* @__PURE__ */ e(
          G,
          {
            ref: R,
            ...n,
            editable: m,
            onRegisterClearErrors: m ? (i) => {
              g.current = i;
            } : void 0
          }
        ),
        /* @__PURE__ */ e(D, {}),
        t.description && /* @__PURE__ */ e("span", { className: "text-sm text-gray-500 text-start", children: t.description })
      ] })
    }
  );
};
export {
  oe as default
};