welcome-ui/dist/DateTimePicker.js

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

"use client";
import { jsx as A } from "react/jsx-runtime";
import { forwardRef as E, useState as P, useRef as x, useEffect as a, Children as N, cloneElement as H } from "react";
import { b as I, D as b, s as j } from "./utils-ZE_dEXnJ.js";
import { c as F } from "./index-B6iGEm-i.js";
const L = F(j), M = E(
  ({
    children: o,
    disabled: d,
    locale: p,
    onChange: s,
    size: D = "md",
    transparent: n,
    value: i = b,
    ...l
  }, k) => {
    const u = l == null ? void 0 : l.timeIntervals, r = (t) => I(t, u), [T, c] = P(r(i)), y = x(), R = k || y, m = (t) => {
      if (!t) {
        c(null), s == null || s(null);
        return;
      }
      const e = Array.isArray(t) ? t[0] : t;
      if (!e) {
        c(null), s == null || s(null);
        return;
      }
      const f = r(e);
      e.setHours(f.getHours(), f.getMinutes()), c(e), s == null || s(new Date(e));
    };
    return a(() => {
      m(r(i));
    }, []), a(() => {
      var e;
      const t = r(i);
      ((e = new Date(i)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), c(t);
    }, [i]), /* @__PURE__ */ A("div", { className: L("date-time-picker", "field-input"), children: N.map(o, (t, e) => H(t, {
      disabled: d,
      inputRef: e === 0 ? R : null,
      // give ref only to the DatePicker
      key: e,
      locale: p,
      onChange: m,
      size: D,
      timeIntervals: u,
      transparent: n,
      value: T
    })) });
  }
);
M.displayName = "DateTimePicker";
export {
  M as DateTimePicker
};