welcome-ui/dist/TimePicker.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as l } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { useState as T, useEffect as x } from "react";
import { f as M, g as Y, D as w, a as I, c as L, b as O } from "./CustomPopper-DavRfSDP.mjs";
import { forwardRef as U } from "./System.mjs";
import W from "@xstyled/styled-components";
const _ = W.div`
  position: relative;
  ${M}
`, $ = U(
  ({
    autoFocus: h,
    dataTestId: j,
    dateFormat: k = "HH:mm",
    disabled: y,
    icon: a,
    iconPlacement: c = "left",
    onBlur: m,
    onChange: t,
    onFocus: p,
    placeholder: D,
    popperProps: S,
    size: d = "md",
    timeIntervals: f = 15,
    transparent: E,
    value: r = w,
    ...n
  }, F) => {
    const i = (e) => Y(e, f), P = D || n.placeholderText, [R, u] = T(h && "time" || null), [g, o] = T(i(r));
    x(() => {
      t && t(i(r));
    }, []), x(() => {
      var s;
      const e = i(r);
      ((s = new Date(r)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && t && t(e), o(e);
    }, [r]);
    const A = (e) => {
      u("time"), p && p(e);
    }, N = (e) => {
      u(null), m && m(e);
    }, b = (e) => {
      e.preventDefault(), o(null), t && t();
    }, H = (e) => {
      if (!e) return;
      const s = i(e);
      e.setFullYear(s.getFullYear(), s.getMonth(), s.getDate()), o(e), t && t(new Date(e));
    };
    return /* @__PURE__ */ l.jsx(_, { children: /* @__PURE__ */ l.jsx(
      I,
      {
        calendarClassName: "time-picker-popper",
        customInput: /* @__PURE__ */ l.jsx(
          O,
          {
            className: "time-picker",
            "data-testid": j,
            focused: R,
            handleBlur: N,
            handleFocus: A,
            icon: a,
            iconPlacement: c,
            onReset: b,
            ref: F,
            size: d
          }
        ),
        dateFormat: k,
        disabled: y,
        iconPlacement: !!a && c,
        onChange: H,
        placeholderText: P,
        popperContainer: L,
        popperProps: S,
        selected: g,
        showTimeSelect: !0,
        showTimeSelectOnly: !0,
        size: d,
        timeIntervals: f,
        transparent: E,
        ...n,
        isClearable: !1
      }
    ) });
  }
);
$.displayName = "TimePicker";
export {
  $ as TimePicker
};