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