@brightsoftware/date-np/dist/src/Components/day.js

Simple & minimal Nepali date picker that just works.

import { jsx as N } from "react/jsx-runtime";
import { cn as j } from "../../utils/clsx.js";
import { usePicker as q } from "../hooks/usePicker.js";
import { areDatesEqual as c } from "../../utils/validators.js";
import { NepaliDate as y } from "../NepaliDate.js";
import { useMemo as g } from "react";
const E = (r) => {
  const {
    date: e,
    isToday: A = !1,
    disabled: n = !1,
    className: b,
    onRangeSelect: o,
    selected: l,
    todayStyle: d,
    ...p
  } = r, { updatePickerDay: D, updatePickerVisiblity: h, pickerState: v, updatePickerMonth: x, isDateInRange: u } = q(), { selectedDate: f, activeMonth: k, activeYear: M, today: s } = v, a = f ? c(e, f) : !1, m = g(() => {
    if (e instanceof y) {
      const i = y.fromADDate(s);
      return c(e, i);
    }
    return c(e, s);
  }, [e, s]), t = g(() => n || !u(e), [n, e, u]), P = (i) => {
    if (!t && (i.stopPropagation(), D(e), o == null || o(e), h(!1), k !== e.getMonth())) {
      const w = e.getFullYear() - M;
      x(e.getMonth() + w * 12);
    }
  };
  return /* @__PURE__ */ N(
    "button",
    {
      className: j(
        "text-center aspect-square rounded-sm items-center justify-center flex text-sm cursor-pointer",
        r.dateHover ? r.dateHover : "hover:bg-gray-200",
        // Today styling - blue indicator when not selected and not disabled
        m && !a && !t && d ? d : m && !a && !t ? "bg-blue-50 text-blue-600 font-semibold" : "",
        // Active/selected styling
        a && !t && l ? l : a && !t ? "bg-gray-900 text-white hover:bg-gray-900" : "",
        // Disabled styling
        t && !a && "opacity-50 bg-gray-50 cursor-not-allowed hover:bg-gray-50",
        t && a && "bg-gray-700 text-white opacity-70 cursor-not-allowed",
        b
      ),
      onClick: P,
      disabled: t,
      ...p,
      children: e.getDate()
    }
  );
};
export {
  E as default
};