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

Simple & minimal Nepali date picker that just works.

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