welcome-ui/dist/TimePicker.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsx as f } from "react/jsx-runtime";
import { forwardRef as S, useState as j, useRef as F, useEffect as d } from "react";
import { D as I, C as L } from "./CustomPopper-C1wIDHbM.js";
import { b as M, D as O, s as U } from "./utils-ZE_dEXnJ.js";
import { InputText as _ } from "./InputText.js";
import { c as q } from "./index-B6iGEm-i.js";
const a = q(U), z = S(
  ({
    autoFocus: o,
    className: T,
    dateFormat: D = "HH:mm",
    disabled: k,
    icon: N,
    iconPlacement: R = "left",
    onChange: t,
    placeholder: w,
    size: x = "md",
    timeIntervals: m = 15,
    transparent: y,
    value: r = O,
    ...c
  }, p) => {
    const i = (e) => M(e, m), [A, l] = j(i(r)), H = F(), P = p || H;
    d(() => {
      t == null || t(i(r));
    }, []), d(() => {
      var s;
      const e = i(r);
      ((s = new Date(r)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), l(e);
    }, [r]);
    const b = (e) => {
      var s;
      e.preventDefault(), (s = P.current) == null || s.blur(), l(null), t == null || t(null);
    }, E = (e) => {
      if (!e) {
        l(null), t == null || t(null);
        return;
      }
      const s = Array.isArray(e) ? e[0] : e;
      if (!s) {
        l(null), t == null || t(null);
        return;
      }
      const u = i(s);
      s.setHours(u.getHours(), u.getMinutes()), l(s), t == null || t(new Date(s));
    };
    return (
      // type issue in react-datepicker (https://github.com/Hacker0x01/react-datepicker/issues/5391)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      /* @__PURE__ */ f(
        I,
        {
          calendarClassName: "time-picker-popper",
          customInput: /* @__PURE__ */ f(
            _,
            {
              autoFocus: o,
              className: a("time-picker", T),
              "data-testid": c["data-testid"],
              disabled: k,
              icon: N,
              iconPlacement: R,
              isClearable: !1,
              onReset: b,
              ref: p,
              size: x,
              transparent: y
            }
          ),
          dateFormat: D,
          onChange: E,
          placeholderText: w,
          popperContainer: L,
          selected: A,
          showTimeSelect: !0,
          showTimeSelectOnly: !0,
          timeIntervals: m,
          ...c,
          wrapperClassName: a(c.wrapperClassName, "date-picker-wrapper", "field-input")
        }
      )
    );
  }
);
z.displayName = "TimePicker";
export {
  z as TimePicker
};