@brightsoftware/date-np/dist/src/TimePicker/components/time-picker-input.js

Simple & minimal Nepali date picker that just works.

import { jsxs as u, jsx as n } from "react/jsx-runtime";
import { useState as N, useRef as T, useEffect as V } from "react";
import { cn as h } from "../../../utils/clsx.js";
import { useTimePicker as D } from "../hooks/useTimePicker.js";
const H = ({
  placeholder: d = "Select Time",
  className: p,
  inputClassName: f
}) => {
  const {
    timePickerState: t,
    setVisibility: m,
    getFormattedTime: a,
    handleKeyInput: g,
    setCurrentInputPosition: i,
    getFormattedTimeWithHighlight: b
  } = D(), [y, c] = N(""), k = T(null);
  V(() => {
    t.selectedTime && c(a());
  }, [t.selectedTime, t.format, a]);
  const v = () => {
    t.isVisible || (m(!0), i("hours"));
  }, x = (e) => {
    c(e.target.value);
  }, w = (e) => {
    if (e.key === "Tab") {
      e.preventDefault();
      const { currentInputPosition: s } = t;
      i(s === "hours" ? "minutes" : s === "minutes" ? "seconds" : "hours");
      return;
    }
    if (e.key === "Backspace") {
      e.preventDefault();
      const { currentInputPosition: s } = t;
      s === "seconds" ? i("minutes") : s === "minutes" && i("hours");
      return;
    }
    e.key >= "0" && e.key <= "9" && (e.preventDefault(), g(e.key) && c(a()));
  }, I = () => {
    t.isVisible && i("hours");
  }, l = (() => {
    const { display: e } = b(), { currentInputPosition: s } = t;
    if (!t.isVisible)
      return e;
    let r = 0, o = 0;
    switch (s) {
      case "hours":
        r = 0, o = 2;
        break;
      case "minutes":
        r = 3, o = 5;
        break;
      case "seconds":
        r = 6, o = 8;
        break;
    }
    return {
      before: e.slice(0, r),
      highlighted: e.slice(r, o),
      after: e.slice(o)
    };
  })();
  return /* @__PURE__ */ u("div", { className: h("relative", p), children: [
    /* @__PURE__ */ u("div", { className: "relative", children: [
      /* @__PURE__ */ n(
        "input",
        {
          ref: k,
          type: "text",
          value: y,
          onChange: x,
          onClick: v,
          onKeyDown: w,
          onFocus: I,
          placeholder: d,
          className: h(
            "w-full px-3 py-2 border border-gray-300 rounded-md",
            "bg-white text-gray-900 placeholder-gray-500",
            "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
            "cursor-text font-mono",
            f
          )
        }
      ),
      t.isVisible && typeof l == "object" && /* @__PURE__ */ u("div", { className: "absolute inset-0 px-3 py-2 pointer-events-none flex items-center font-mono", children: [
        /* @__PURE__ */ n("span", { className: "text-transparent", children: l.before }),
        /* @__PURE__ */ n("span", { className: "bg-blue-100 text-blue-800 px-1 rounded", children: l.highlighted }),
        /* @__PURE__ */ n("span", { className: "text-transparent", children: l.after })
      ] })
    ] }),
    /* @__PURE__ */ n("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ n(
      "svg",
      {
        className: "w-4 h-4 text-gray-400",
        fill: "none",
        stroke: "currentColor",
        viewBox: "0 0 24 24",
        children: /* @__PURE__ */ n(
          "path",
          {
            strokeLinecap: "round",
            strokeLinejoin: "round",
            strokeWidth: 2,
            d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          }
        )
      }
    ) })
  ] });
};
export {
  H as TimePickerInput
};