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

Simple & minimal Nepali date picker that just works.

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