@mankindui/core/dist/components/Datepicker/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as n } from "../../_virtual/jsx-runtime.js";
import { useState as r, useRef as l, useEffect as b } from "react";
import "../index.js";
import { HiCalendarDays as w } from "../../node_modules/react-icons/hi2/index.js";
import { Popover as c } from "../Popover/index.js";
import { Calendar as S } from "../Calendar/index.js";
const Y = () => {
  const [m, f] = r(null), [x, h] = r(""), [y, i] = r(""), [j, p] = r(""), o = l(null), u = l(null), g = l(null);
  b(() => {
  }, [m]);
  const v = (e) => {
    var a;
    const t = e.target.value.replace(/\D/g, "");
    t.length <= 4 && (h(t), t.length === 4 && ((a = o.current) == null || a.focus()));
  }, D = (e) => {
    var a;
    const t = e.target.value.replace(/\D/g, "");
    t.length <= 2 && Number(t) <= 12 && (i(t), t.length === 2 && ((a = u.current) == null || a.focus()));
  }, N = (e) => {
    const t = e.target.value.replace(/\D/g, "");
    t.length <= 2 && Number(t) <= 31 && p(t);
  }, s = (e, t) => {
    var a, d;
    e.key === "Backspace" && e.currentTarget.value === "" && (t === "day" && ((a = o.current) == null || a.focus()), t === "month" && ((d = g.current) == null || d.focus()));
  }, C = (e) => {
    console.log("selectedDate: ", e), f(e), h(String(e.getFullYear())), i(String(e.getMonth() + 1).padStart(2, "0")), p(String(e.getDate()).padStart(2, "0"));
  };
  return /* @__PURE__ */ n.jsxs(c, { children: [
    /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2 w-fit", children: [
      /* @__PURE__ */ n.jsxs("div", { className: "flex gap-1", children: [
        /* @__PURE__ */ n.jsx(
          "input",
          {
            ref: g,
            type: "text",
            value: x,
            onChange: v,
            onKeyDown: (e) => s(e, "year"),
            placeholder: "YYYY",
            maxLength: 4,
            className: "w-14 text-center border p-1"
          }
        ),
        /* @__PURE__ */ n.jsx("span", { children: "/" }),
        /* @__PURE__ */ n.jsx(
          "input",
          {
            ref: o,
            type: "text",
            value: y,
            onChange: D,
            onKeyDown: (e) => s(e, "month"),
            placeholder: "MM",
            maxLength: 2,
            className: "w-10 text-center border p-1"
          }
        ),
        /* @__PURE__ */ n.jsx("span", { children: "/" }),
        /* @__PURE__ */ n.jsx(
          "input",
          {
            ref: u,
            type: "text",
            value: j,
            onChange: N,
            onKeyDown: (e) => s(e, "day"),
            placeholder: "DD",
            maxLength: 2,
            className: "w-10 text-center border p-1"
          }
        )
      ] }),
      /* @__PURE__ */ n.jsx(c.Trigger, { children: /* @__PURE__ */ n.jsx("button", { type: "button", className: "p-2 border rounded-md", children: /* @__PURE__ */ n.jsx(w, { className: "w-5 h-5" }) }) })
    ] }),
    /* @__PURE__ */ n.jsx(c.Content, { children: /* @__PURE__ */ n.jsx(S, { onSelect: C }) })
  ] });
};
Y.displayName = "Datepicker";
export {
  Y as Datepicker
};
//# sourceMappingURL=index.js.map