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

Simple & minimal Nepali date picker that just works.

import "../style.css";
import { jsx as t, jsxs as u, Fragment as L } from "react/jsx-runtime";
import { useRef as h, useEffect as c } from "react";
import { cn as x } from "../utils/clsx.js";
import P from "./Components/helpers/direction-aware-container.js";
import V from "./Components/picker-body.js";
import M from "./Components/picker-header.js";
import O from "./Components/picker-input.js";
import { PickerProvider as q, usePicker as B } from "./hooks/usePicker.js";
import { isInvalidDateRange as F } from "../utils/validators.js";
/* empty css          */
import H from "./Components/label.js";
import { formatISO as m } from "./format.js";
const ee = (D) => {
  const {
    minDate: a,
    maxDate: r,
    shouldShowInput: k = !0,
    className: v,
    inputProps: e,
    dAwareConProps: g = {},
    onSelect: d,
    label: n,
    description: f,
    bodyProps: b,
    headerProps: p = {},
    isVisible: w,
    disabled: i,
    required: C = !1,
    onInputClick: I
  } = D, s = (e == null ? void 0 : e.ref) ?? h(null), l = h(null);
  let R = () => {
    const {
      updatePickerVisiblity: o,
      pickerState: y,
      updatePickerDay: N,
      setMinDate: S,
      setMaxDate: j
    } = B(), A = y.isVisible;
    c(() => {
      N(e != null && e.defaultDate ? e.defaultDate : null);
    }, [
      e != null && e.defaultDate ? m(e == null ? void 0 : e.defaultDate) : void 0
    ]), c(() => {
      a && S(a);
    }, [a ? m(a) : void 0]), c(() => {
      r && j(r);
    }, [r ? m(r) : void 0]);
    const E = a && r && F(a, r);
    return /* @__PURE__ */ t(
      P,
      {
        direction: "bottom",
        activateWith: "ref",
        activatorRef: s,
        onOutsideClick: () => {
          o(!1), l.current && l.current();
        },
        centerAlignContainer: !0,
        active: i ? !i : w ?? A,
        className: "mt-2",
        ...g,
        children: /* @__PURE__ */ t(
          "div",
          {
            className: x(
              "flex flex-col gap-0.5 w-72 h-max bg-white drop-shadow-sm p-2.5 rounded-md"
            ),
            children: E ? /* @__PURE__ */ t("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__ */ u(L, { children: [
              /* @__PURE__ */ t(M, { ...p }),
              /* @__PURE__ */ t(V, { ...b, onSelect: d })
            ] })
          }
        )
      }
    );
  };
  return /* @__PURE__ */ t(
    q,
    {
      minDate: a,
      maxDate: r,
      defaultDate: e == null ? void 0 : e.defaultDate,
      defaultLocale: e == null ? void 0 : e.defaultLocale,
      onSelect: d,
      children: /* @__PURE__ */ u("div", { className: x("flex flex-col gap-0.5 w-full mt-0.5", v), children: [
        n && /* @__PURE__ */ t(H, { required: C, children: n }),
        k && /* @__PURE__ */ t(
          O,
          {
            onClick: I,
            disabled: i,
            ref: s,
            ...e,
            onRegisterClearError: e != null && e.editable ? (o) => {
              l.current = o;
            } : void 0
          }
        ),
        /* @__PURE__ */ t(R, {}),
        f && /* @__PURE__ */ t("span", { className: "text-sm text-gray-500 text-start", children: f })
      ] })
    }
  );
};
export {
  ee as default
};