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

Simple & minimal Nepali date picker that just works.

import { jsx as t, jsxs as k, Fragment as j } from "react/jsx-runtime";
import { useRef as A, useEffect as v } from "react";
import { cn as I } from "../../utils/clsx.js";
import { TimePickerProvider as W, useTimePicker as $ } from "./hooks/useTimePicker.js";
import { TimePickerInput as y } from "./components/time-picker-input.js";
import { TimePickerBody as B } from "./components/time-picker-body.js";
import O from "../Components/helpers/direction-aware-container.js";
import w from "../Components/label.js";
import "../../data/constants.js";
const E = ({
  className: l,
  shouldShowInput: e = !0,
  inputProps: d,
  onTimeChange: i,
  onDefaultTimeChange: o,
  onVisibilityChange: c,
  dAwareConProps: m,
  defaultTime: r,
  isVisible: s = !1,
  bodyProps: x = {},
  ...a
}) => {
  const { timePickerState: n, setVisibility: f, setTime: b } = $(
    i,
    c
  ), u = e ? A(null) : a.inputRef, { format: p } = n, R = n.shouldInclude;
  v(() => {
    r && (b(r), o == null || o(r));
  }, [r && `${r.hours}:${r.minutes}`]), v(() => {
    s !== void 0 && s !== n.isVisible && (f(s), c == null || c(s));
  }, [s]);
  const P = {
    onOutsideClick: () => f(!1),
    centerAlignContainer: !0,
    active: n.isVisible,
    className: e ? "" : "mt-2",
    direction: "bottom",
    offset: e ? 0 : 10,
    ...m
  }, N = e || a.inputRef ? {
    ...P,
    activateWith: "ref",
    activatorRef: u
  } : {
    ...P,
    activateWith: "position",
    activationPosition: { x: 0, y: 0 }
  }, h = Object.values(R).filter(Boolean).length * (p === "24hr" ? 24 : 30);
  return /* @__PURE__ */ k(j, { children: [
    e && /* @__PURE__ */ t("div", { className: "relative", ref: u, children: /* @__PURE__ */ t(y, { ...d }) }),
    /* @__PURE__ */ t(O, { ...N, children: /* @__PURE__ */ t(
      "div",
      {
        className: I(
          `w-[${h}px]`,
          "bg-white",
          "border border-gray-300 rounded-md drop-shadow-sm p-6",
          !e && l
        ),
        children: /* @__PURE__ */ t(B, { onTimeChange: i, onSave: a.onSave, ...x })
      }
    ) })
  ] });
}, Q = ({
  format: l = "am/pm",
  ...e
}) => {
  var d, i, o, c, m, r;
  return /* @__PURE__ */ t(
    W,
    {
      format: l,
      shouldInclude: {
        hours: ((i = (d = e.bodyProps) == null ? void 0 : d.shouldInclude) == null ? void 0 : i.hours) ?? !0,
        minutes: ((c = (o = e.bodyProps) == null ? void 0 : o.shouldInclude) == null ? void 0 : c.minutes) ?? !0,
        seconds: ((r = (m = e.bodyProps) == null ? void 0 : m.shouldInclude) == null ? void 0 : r.seconds) ?? !0
      },
      children: /* @__PURE__ */ k("div", { className: "flex flex-col gap-1 w-full", children: [
        e.label && /* @__PURE__ */ t(w, { children: e.label }),
        /* @__PURE__ */ t(E, { ...e })
      ] })
    }
  );
};
export {
  Q as TimePicker
};