@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.11

package/src/tedi/components/form/date-time-field/date-time-field.d.ts

@@ -0,0 +1,207 @@
+import { default as React } from 'react';
+import { Locale, Matcher } from 'react-day-picker';
+import { BreakpointSupport } from '../../../helpers';
+import { CalendarView } from '../date-field/date-field';
+import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
+export type DateTimeFieldStep = 'date' | 'time';
+export type DateTimeFieldLayout = 'side-by-side' | 'multi-step';
+export type DateTimeFieldMode = 'single' | 'range';
+export interface DateTimeRange {
+    from?: Date;
+    to?: Date;
+}
+export type DateTimeFieldValue = Date | DateTimeRange;
+type DateTimeFieldBreakpointProps = {
+    /**
+     * When `true`, renders an `<input type="datetime-local">` and skips the
+     * custom popover entirely — the browser's built-in date/time picker is
+     * shown when the calendar icon is clicked. Has no effect when
+     * `mode='range'` (native datetime-local has no range counterpart).
+     * @default false
+     */
+    useNativePicker?: boolean;
+    /**
+     * Layout of the date-and-time popover. `mode='range'` always uses
+     * `'side-by-side'` regardless of this value — the range UI needs the
+     * calendar and both `from` / `to` time pickers visible at once.
+     * @default side-by-side
+     */
+    layout?: DateTimeFieldLayout;
+    /**
+     * Predefined time slots, each in `"HH:mm"` format. When provided, the
+     * time step renders a grid of slots instead of the scroll-wheel picker.
+     *
+     * Accepts either:
+     * - a static array — the same slot list for every date,
+     * - or a function `(date: Date) => string[]` evaluated per render with the
+     *   currently-selected date. Use the function form when slots depend on
+     *   the picked date (e.g. clinic appointments where Tuesdays differ from
+     *   Wednesdays). In `mode='range'` the function is called twice: once
+     *   with `rangeValue.from` for the `from` time picker, once with
+     *   `rangeValue.to` for the `to` time picker. When no date is picked yet
+     *   the function is called with today's date as a fallback.
+     *
+     * Returning an empty array currently falls back to the wheel picker —
+     * if you need a dedicated "no times available" UX, render it from the
+     * consumer side via `onChange` / `value` state for now.
+     */
+    availableTimes?: string[] | ((date: Date) => string[]);
+    /**
+     * Layout variant for the time grid when `availableTimes` is set.
+     * Defaults differ per layout: `'button'` for `side-by-side`, `'radio'`
+     * for `multi-step`.
+     */
+    timeGridVariant?: 'button' | 'radio';
+    /**
+     * How the month/year selector in the calendar header is rendered.
+     * @default dropdown
+     */
+    monthYearSelectType?: 'dropdown' | 'grid';
+    /**
+     * Show days from adjacent months in the calendar grid.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Heading rendered above the time picker in the side-by-side layout.
+     * Falls back to the localised `dateTimeField.timeHeading` label.
+     */
+    timeHeading?: React.ReactNode;
+};
+export interface DateTimeFieldProps extends BreakpointSupport<DateTimeFieldBreakpointProps> {
+    /**
+     * Unique identifier for the input field.
+     */
+    id: string;
+    /**
+     * Field label. Required for accessibility.
+     */
+    label: string;
+    /**
+     * Placeholder shown in the input when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Additional class on the container.
+     */
+    className?: string;
+    /**
+     * Selection mode.
+     * - `'single'` (default) — one combined `Date` value.
+     * - `'range'` — pair of `from` / `to` `Date` values, each carrying their
+     *   own time. Renders a 2-month calendar and two time pickers (one for
+     *   `from`, one for `to`) stacked underneath.
+     * @default single
+     */
+    mode?: DateTimeFieldMode;
+    /**
+     * Controlled value. Type depends on `mode`:
+     * - `mode='single'` → `Date | undefined`
+     * - `mode='range'` → `DateTimeRange | undefined` (`{ from, to }`)
+     */
+    value?: DateTimeFieldValue;
+    /**
+     * Initial value for uncontrolled usage. Ignored when `value` is provided.
+     */
+    defaultValue?: DateTimeFieldValue;
+    /**
+     * Fires whenever the user picks a date or a time. The argument shape
+     * matches `mode`: `Date | undefined` for `'single'`,
+     * `DateTimeRange | undefined` for `'range'`.
+     */
+    onChange?: (value: DateTimeFieldValue | undefined) => void;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * When `true`, the input is read-only — typing is disabled, but the
+     * picker can still be opened.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Disables the input and the picker.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Minimum selectable date. Dates before this are disabled in the calendar.
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date. Dates after this are disabled in the calendar.
+     */
+    maxDate?: Date;
+    /**
+     * Disables every date strictly before today.
+     */
+    disablePast?: boolean;
+    /**
+     * Disables every date strictly after today.
+     */
+    disableFuture?: boolean;
+    /**
+     * Disable specific dates via react-day-picker matchers. Layered on top of
+     * the `minDate` / `maxDate` / `disablePast` / `disableFuture` shortcuts —
+     * use this for free-form matchers like "every Sunday" or "specific
+     * blacklisted dates". Mirrors the `disabledMatchers` prop on `DateField`.
+     */
+    disabledMatchers?: Matcher | Matcher[];
+    /**
+     * Step interval (minutes) for the time-wheel picker. Ignored when
+     * `availableTimes` is set.
+     * @default 15
+     */
+    stepMinutes?: number;
+    /**
+     * Initial month displayed when the calendar opens. Defaults to the
+     * month of the current value, or the current month if no value.
+     */
+    initialMonth?: Date;
+    /**
+     * Locale object used by react-day-picker for the calendar grid.
+     * @default et
+     */
+    locale?: Locale;
+    /**
+     * Locale code used for the displayed date format.
+     * @default et-EE
+     */
+    localeCode?: string;
+    /**
+     * Label of the "Select time" footer button under the calendar in the
+     * multi-step layout. Falls back to the localised
+     * `dateTimeField.selectTime` label.
+     */
+    selectTimeLabel?: string;
+    /**
+     * Label of the "Back" link shown above the time picker in the
+     * multi-step layout. Falls back to the localised `dateTimeField.back`
+     * label.
+     */
+    backLabel?: string;
+    /**
+     * Lowest calendar drill-down level the user can pick from before the value
+     * commits. `'days'` (default) requires drilling all the way down to a day;
+     * `'months'` commits as soon as a month is picked; `'years'` commits on
+     * year selection. Only meaningful when `monthYearSelectType='grid'`.
+     * @default days
+     */
+    selectionLevel?: CalendarView;
+    /**
+     * Forwarded to the underlying `TextField`. `id`, `label`, `value`, and
+     * `onChange` are owned by `DateTimeField`.
+     */
+    inputProps?: Omit<TextFieldProps, 'id' | 'label' | 'value' | 'onChange'>;
+    /**
+     * Error message rendered below the input when the user types a date that
+     * fails the disable matchers (`disablePast`, `disableFuture`, `minDate`,
+     * `maxDate`, `disabledMatchers`). Falls back to the localised
+     * `dateField.disabledDateError` label.
+     */
+    disabledDateErrorMessage?: string;
+}
+export declare const DateTimeField: React.ForwardRefExoticComponent<DateTimeFieldProps & React.RefAttributes<TextFieldForwardRef>>;
+export default DateTimeField;

package/src/tedi/components/form/date-time-field/date-time-field.es.js

@@ -0,0 +1,376 @@
+import { jsx as r, jsxs as f, Fragment as Nt } from "react/jsx-runtime";
+import { useFloating as yt, useInteractions as Dt, useDismiss as Ft, useRole as Tt, FloatingPortal as kt, FloatingFocusManager as Mt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import C from "../../../../../external/classnames/index.es.js";
+import Me, { useState as g, useRef as wt, useEffect as se, useMemo as W, useCallback as F } from "react";
+import { Button as we } from "../../buttons/button/button.es.js";
+import { Calendar as xt } from "../../content/calendar/calendar.es.js";
+import { getLocaleDateParts as Rt, buildDateRegexSource as Vt, buildDisabledMatchers as Ct, CALENDAR_POPOVER_OFFSET as Et, CALENDAR_POPOVER_PADDING as xe } from "../date-field/date-field-helpers.es.js";
+import { TextField as St } from "../textfield/textfield.es.js";
+import { TimePicker as Re } from "../time-picker/time-picker.es.js";
+import i from "./date-time-field.module.scss.es.js";
+import { et as Pt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+import { autoUpdate as $t } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as At, flip as Ot, shift as Lt, size as Ht } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useBreakpointProps as It } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Bt } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpoint as zt, isBreakpointBelow as Gt } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { dateMatchModifiers as Wt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
+const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:${p(a.getMinutes())}` : "00:00", v = (a, o) => {
+  const [Y, b] = o.split(":"), E = Number(Y), S = Number(b), P = new Date(a);
+  return P.setHours(Number.isFinite(E) ? E : 0, Number.isFinite(S) ? S : 0, 0, 0), P;
+}, le = (a) => a instanceof Date, Yt = (a) => a ? `${a.getFullYear()}-${p(a.getMonth() + 1)}-${p(a.getDate())}T${p(a.getHours())}:${p(a.getMinutes())}` : "", jt = (a) => {
+  if (!a) return;
+  const o = new Date(a);
+  return isNaN(o.getTime()) ? void 0 : o;
+}, qt = (a) => !a || le(a) ? {} : a, Ut = (a) => le(a) ? a : void 0, Jt = Me.forwardRef((a, o) => {
+  const { getCurrentBreakpointProps: Y } = It(a.defaultServerBreakpoint), { getLabel: b } = Bt(), E = zt(a.defaultServerBreakpoint), S = Gt(E, "md"), {
+    layout: P = "side-by-side",
+    useNativePicker: Ve = !1,
+    monthYearSelectType: Ce = "dropdown",
+    timeGridVariant: Ee,
+    showOutsideDays: Se = !0,
+    availableTimes: N,
+    timeHeading: j = b("dateTimeField.timeHeading")
+  } = Y(a), {
+    id: Pe,
+    label: $e,
+    placeholder: Ae,
+    className: Oe,
+    value: de,
+    defaultValue: Le,
+    onChange: q,
+    required: oe,
+    readOnly: He,
+    disabled: $,
+    minDate: ce,
+    maxDate: me,
+    disablePast: fe,
+    disableFuture: ue,
+    disabledMatchers: T,
+    stepMinutes: pe = 15,
+    initialMonth: U,
+    locale: Ie = Pt,
+    localeCode: k = "et-EE",
+    selectTimeLabel: Be = b("dateTimeField.selectTime"),
+    backLabel: ze = b("dateTimeField.back"),
+    mode: Ge = "single",
+    selectionLevel: We = "days",
+    inputProps: s,
+    disabledDateErrorMessage: Ye = b("dateField.disabledDateError")
+  } = a, l = Ge === "range", u = Ve && !l, M = l ? "side-by-side" : P, he = Ee ?? (M === "multi-step" ? "radio" : "button"), ge = de !== void 0, [je, qe] = g(Le), y = ge ? de : je, c = l ? qt(y) : {}, m = l ? void 0 : Ut(y), [D, J] = g(!1), [Ue, K] = g("date"), [Je, _e] = g("days"), Q = l ? c.from : m, [Ke, A] = g(() => Q ?? U ?? /* @__PURE__ */ new Date()), ve = wt(Q);
+  ve.current = Q, se(() => {
+    D || (K("date"), _e("days"), A(ve.current ?? U ?? /* @__PURE__ */ new Date()));
+  }, [D, U]);
+  const O = W(
+    () => new Intl.DateTimeFormat(k, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    }),
+    [k]
+  ), Qe = W(
+    () => new Intl.DateTimeFormat(k, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "2-digit"
+    }),
+    [k]
+  ), L = F(
+    (e) => e ? `${O.format(e)} ${p(e.getHours())}:${p(e.getMinutes())}` : "",
+    [O]
+  ), H = F(
+    (e) => {
+      if (!e) return "";
+      if (le(e)) return L(e);
+      const t = L(e.from), n = L(e.to);
+      return !t && !n ? "" : n ? t ? `${t} – ${n}` : n : t;
+    },
+    [L]
+  ), Xe = W(() => {
+    const e = Rt(O), { fieldOrder: t } = e, n = new RegExp(`^${Vt(e)}\\s+(\\d{2}):(\\d{2})$`);
+    return (_t) => {
+      const G = _t.trim().match(n);
+      if (!G) return;
+      const Fe = {};
+      t.forEach((vt, bt) => {
+        Fe[vt] = Number(G[bt + 1]);
+      });
+      const Te = Number(G[t.length + 1]), ke = Number(G[t.length + 2]), { day: ae, month: re, year: ne } = Fe;
+      if (ae === void 0 || re === void 0 || ne === void 0 || Te > 23 || ke > 59) return;
+      const V = new Date(ne, re - 1, ae, Te, ke, 0, 0);
+      if (!(isNaN(V.getTime()) || V.getFullYear() !== ne || V.getMonth() !== re - 1 || V.getDate() !== ae))
+        return V;
+    };
+  }, [O]), [Ze, X] = g(() => H(y)), [be, h] = g(!1);
+  se(() => {
+    X(H(y));
+  }, [y, H]);
+  const et = yt({
+    open: D,
+    onOpenChange: J,
+    placement: "bottom-end",
+    middleware: [
+      At(Et),
+      Ot(),
+      Lt({ padding: xe }),
+      Ht({
+        padding: xe,
+        apply({ availableWidth: e, elements: t }) {
+          t.floating.style.maxWidth = `${e}px`;
+        }
+      })
+    ],
+    whileElementsMounted: $t
+  }), { refs: Z, context: ee, x: tt, y: it, strategy: at } = et, rt = Dt([
+    Ft(ee, {
+      outsidePress: (e) => {
+        const t = e.target;
+        return !(t != null && t.closest('[role="menu"], [role="listbox"]'));
+      }
+    }),
+    Tt(ee, { role: "dialog" })
+  ]), I = Me.useRef(null), nt = F(
+    (e) => {
+      I.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+    },
+    [o]
+  );
+  se(() => {
+    var e;
+    (e = I.current) != null && e.inner && Z.setReference(I.current.inner);
+  }, [Z]);
+  const d = (e) => {
+    ge || qe(e), q == null || q(e), X(H(e));
+  }, w = F(
+    (e) => {
+      if (N)
+        return typeof N == "function" ? N(e ?? /* @__PURE__ */ new Date()) : N;
+    },
+    [N]
+  ), x = F(
+    (e, t) => {
+      const n = w(e);
+      return !n || n.length === 0 || n.includes(t) ? t : n[0];
+    },
+    [w]
+  ), st = (e) => {
+    if (l) {
+      const t = e;
+      if (!t || !t.from && !t.to) {
+        d(void 0);
+        return;
+      }
+      const n = {};
+      t.from && (n.from = v(t.from, x(t.from, _(c.from)))), t.to && (n.to = v(t.to, x(t.to, _(c.to)))), d(n);
+      return;
+    }
+    e instanceof Date ? d(v(e, x(e, _(m)))) : e === void 0 && d(void 0);
+  }, lt = (e) => {
+    if (l) {
+      d({ from: v(e, x(e, _(c.from))) });
+      return;
+    }
+    d(v(e, x(e, _(m))));
+  }, dt = (e) => {
+    const t = m ?? /* @__PURE__ */ new Date();
+    d(v(t, e)), M === "multi-step" && w(t) && J(!1);
+  }, ot = (e) => (t) => {
+    const n = c[e] ?? c.from ?? /* @__PURE__ */ new Date();
+    d({ ...c, [e]: v(n, t) });
+  }, B = W(
+    () => [
+      ...Ct({
+        minDate: ce,
+        maxDate: me,
+        disablePast: fe,
+        disableFuture: ue
+      }),
+      ...T ? Array.isArray(T) ? T : [T] : []
+    ],
+    [ce, me, fe, ue, T]
+  ), Ne = F(
+    (e) => Wt(e, B),
+    [B]
+  ), ct = (e) => {
+    if (X(e), e === "") {
+      h(!1), d(void 0);
+      return;
+    }
+    if (u) {
+      const n = jt(e);
+      if (!n) {
+        h(!1);
+        return;
+      }
+      if (Ne(n)) {
+        h(!0);
+        return;
+      }
+      h(!1), d(n), A(n);
+      return;
+    }
+    if (l) return;
+    const t = Xe(e);
+    if (!t) {
+      h(!1);
+      return;
+    }
+    if (Ne(t)) {
+      h(!0);
+      return;
+    }
+    h(!1), d(t), A(t);
+  }, mt = () => {
+    var t;
+    const e = (t = I.current) == null ? void 0 : t.input;
+    if (e) {
+      if (typeof e.showPicker == "function") {
+        e.showPicker();
+        return;
+      }
+      e.focus();
+    }
+  }, ft = () => {
+    if (!$) {
+      if (u) {
+        mt();
+        return;
+      }
+      J((e) => !e);
+    }
+  }, ut = M === "multi-step" ? /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__select-time-wrapper"], children: /* @__PURE__ */ r(we, { type: "button", visualType: "link", size: "small", iconLeft: "schedule", onClick: () => K("time"), children: Be }) }) : void 0, te = /* @__PURE__ */ r(
+    xt,
+    {
+      view: Je,
+      setView: _e,
+      selectionLevel: We,
+      currentMonth: Ke,
+      setCurrentMonth: A,
+      mode: l ? "range" : "single",
+      value: l ? c : m,
+      numberOfMonths: l && !S ? 2 : 1,
+      locale: Ie,
+      localeCode: k,
+      showOutsideDays: Se,
+      monthYearSelectType: Ce,
+      disabledMatchers: B.length ? B : void 0,
+      required: oe,
+      handleSelect: st,
+      applyValue: lt,
+      footer: ut,
+      className: C(
+        i["tedi-date-time-field__calendar"],
+        M === "side-by-side" && i["tedi-date-time-field__calendar--split"]
+      )
+    }
+  ), ie = w(m), pt = !ie || ie.length === 0, ye = /* @__PURE__ */ r(
+    Re,
+    {
+      value: _(m),
+      stepMinutes: pe,
+      availableTimes: ie,
+      gridVariant: he,
+      onChange: dt,
+      className: C(i["tedi-date-time-field__time-picker"], {
+        [i["tedi-date-time-field__time-picker--wheel"]]: pt
+      })
+    }
+  ), De = (e) => {
+    const t = w(c[e]), n = !t || t.length === 0;
+    return /* @__PURE__ */ r(
+      Re,
+      {
+        value: _(c[e]),
+        stepMinutes: pe,
+        availableTimes: t,
+        gridVariant: he,
+        onChange: ot(e),
+        className: C(i["tedi-date-time-field__time-picker"], {
+          [i["tedi-date-time-field__time-picker--wheel"]]: n
+        })
+      }
+    );
+  }, R = s == null ? void 0 : s.helper, z = be ? { text: Ye, type: "error" } : null, ht = z ? R ? Array.isArray(R) ? [...R, z] : [R, z] : z : R, gt = {
+    ...s,
+    id: Pe,
+    label: $e,
+    value: u ? Yt(m) : Ze,
+    placeholder: Ae,
+    readOnly: He || !u && !!N && !!y,
+    icon: "calendar_today",
+    isClearable: !0,
+    required: oe,
+    disabled: $,
+    invalid: be || (s == null ? void 0 : s.invalid),
+    helper: ht,
+    onIconClick: ft,
+    onChange: ct,
+    className: C(i["tedi-date-time-field__textfield"], s == null ? void 0 : s.className, {
+      [i["tedi-date-time-field__icon--disabled"]]: $
+    }),
+    input: {
+      ...s == null ? void 0 : s.input,
+      type: u ? "datetime-local" : "text",
+      "aria-expanded": u ? void 0 : D
+    }
+  };
+  return /* @__PURE__ */ f(Nt, { children: [
+    /* @__PURE__ */ r("div", { className: C(i["tedi-date-time-field__container"], Oe), "aria-haspopup": "dialog", children: /* @__PURE__ */ r(St, { ref: nt, "aria-expanded": u ? void 0 : D, ...gt }) }),
+    !u && /* @__PURE__ */ r(kt, { children: D && !$ && /* @__PURE__ */ r(Mt, { context: ee, modal: !1, initialFocus: -1, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: Z.setFloating,
+        className: i["tedi-date-time-field__popup"],
+        ...rt.getFloatingProps({
+          style: {
+            position: at,
+            top: it ?? 0,
+            left: tt ?? 0
+          }
+        }),
+        children: l ? /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range"], children: [
+          te,
+          /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__range-separator"], "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__range-separator-line"] }) }),
+          /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range-times"], children: [
+            /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range-time"], children: [
+              /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-header"], children: /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__split-heading"], children: j }) }),
+              /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: De("from") })
+            ] }),
+            /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range-time"], children: [
+              /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-header"], children: /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__split-heading"], children: j }) }),
+              /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: De("to") })
+            ] })
+          ] })
+        ] }) : M === "side-by-side" ? /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__split"], children: [
+          te,
+          /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-separator"], "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-separator-line"] }) }),
+          /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__split-time"], children: [
+            /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-header"], children: /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__split-heading"], children: j }) }),
+            /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: ye })
+          ] })
+        ] }) : Ue === "date" ? te : /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__time-step"], children: [
+          /* @__PURE__ */ f("header", { className: i["tedi-date-time-field__time-header"], children: [
+            /* @__PURE__ */ r(
+              we,
+              {
+                type: "button",
+                visualType: "link",
+                size: "small",
+                iconLeft: "arrow_back",
+                onClick: () => K("date"),
+                children: ze
+              }
+            ),
+            /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__time-date"], children: Qe.format(m ?? /* @__PURE__ */ new Date()) })
+          ] }),
+          /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__time-body"], children: ye })
+        ] })
+      }
+    ) }) })
+  ] });
+});
+Jt.displayName = "DateTimeField";
+export {
+  Jt as DateTimeField,
+  Jt as default
+};

package/src/tedi/components/form/date-time-field/date-time-field.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-time-field__container":"tedi-date-time-field__container-27fb2d35","tedi-date-time-field__textfield":"tedi-date-time-field__textfield-74c7a842","tedi-date-time-field__icon--disabled":"tedi-date-time-field__icon--disabled-82069c63","tedi-date-time-field__popup":"tedi-date-time-field__popup-9c353957","tedi-date-time-field__calendar":"tedi-date-time-field__calendar-44cf1ff8","tedi-date-time-field__split":"tedi-date-time-field__split-7c921802","tedi-date-time-field__calendar--split":"tedi-date-time-field__calendar--split-758ff612","tedi-date-time-field__time-picker":"tedi-date-time-field__time-picker-4d9e2eb6","tedi-date-time-field__time-picker--wheel":"tedi-date-time-field__time-picker--wheel-4bd09564","tedi-date-time-field__split-separator":"tedi-date-time-field__split-separator-b37f315f","tedi-date-time-field__split-separator-line":"tedi-date-time-field__split-separator-line-d4cb6bfe","tedi-date-time-field__split-time":"tedi-date-time-field__split-time-d898edf8","tedi-date-time-field__split-time-header":"tedi-date-time-field__split-time-header-7a646313","tedi-date-time-field__split-heading":"tedi-date-time-field__split-heading-8a3194a5","tedi-date-time-field__split-time-body":"tedi-date-time-field__split-time-body-ce0c1335","tedi-date-time-field__range":"tedi-date-time-field__range-17507b68","tedi-date-time-field__range-separator":"tedi-date-time-field__range-separator-8159580a","tedi-date-time-field__range-separator-line":"tedi-date-time-field__range-separator-line-993e312a","tedi-date-time-field__range-times":"tedi-date-time-field__range-times-a55a5598","tedi-date-time-field__range-time":"tedi-date-time-field__range-time-f46bcb80","tedi-date-time-field__select-time-wrapper":"tedi-date-time-field__select-time-wrapper-5c969c55","tedi-date-time-field__time-step":"tedi-date-time-field__time-step-c25362e0","tedi-date-time-field__time-header":"tedi-date-time-field__time-header-e72d431f","tedi-date-time-field__time-date":"tedi-date-time-field__time-date-e5eb5da7","tedi-date-time-field__time-body":"tedi-date-time-field__time-body-b8c484e0"};exports.default=e;

package/src/tedi/components/form/date-time-field/date-time-field.module.scss.es.js

@@ -0,0 +1,30 @@
+const e = {
+  "tedi-date-time-field__container": "tedi-date-time-field__container-27fb2d35",
+  "tedi-date-time-field__textfield": "tedi-date-time-field__textfield-74c7a842",
+  "tedi-date-time-field__icon--disabled": "tedi-date-time-field__icon--disabled-82069c63",
+  "tedi-date-time-field__popup": "tedi-date-time-field__popup-9c353957",
+  "tedi-date-time-field__calendar": "tedi-date-time-field__calendar-44cf1ff8",
+  "tedi-date-time-field__split": "tedi-date-time-field__split-7c921802",
+  "tedi-date-time-field__calendar--split": "tedi-date-time-field__calendar--split-758ff612",
+  "tedi-date-time-field__time-picker": "tedi-date-time-field__time-picker-4d9e2eb6",
+  "tedi-date-time-field__time-picker--wheel": "tedi-date-time-field__time-picker--wheel-4bd09564",
+  "tedi-date-time-field__split-separator": "tedi-date-time-field__split-separator-b37f315f",
+  "tedi-date-time-field__split-separator-line": "tedi-date-time-field__split-separator-line-d4cb6bfe",
+  "tedi-date-time-field__split-time": "tedi-date-time-field__split-time-d898edf8",
+  "tedi-date-time-field__split-time-header": "tedi-date-time-field__split-time-header-7a646313",
+  "tedi-date-time-field__split-heading": "tedi-date-time-field__split-heading-8a3194a5",
+  "tedi-date-time-field__split-time-body": "tedi-date-time-field__split-time-body-ce0c1335",
+  "tedi-date-time-field__range": "tedi-date-time-field__range-17507b68",
+  "tedi-date-time-field__range-separator": "tedi-date-time-field__range-separator-8159580a",
+  "tedi-date-time-field__range-separator-line": "tedi-date-time-field__range-separator-line-993e312a",
+  "tedi-date-time-field__range-times": "tedi-date-time-field__range-times-a55a5598",
+  "tedi-date-time-field__range-time": "tedi-date-time-field__range-time-f46bcb80",
+  "tedi-date-time-field__select-time-wrapper": "tedi-date-time-field__select-time-wrapper-5c969c55",
+  "tedi-date-time-field__time-step": "tedi-date-time-field__time-step-c25362e0",
+  "tedi-date-time-field__time-header": "tedi-date-time-field__time-header-e72d431f",
+  "tedi-date-time-field__time-date": "tedi-date-time-field__time-date-e5eb5da7",
+  "tedi-date-time-field__time-body": "tedi-date-time-field__time-body-b8c484e0"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/input-group/components/input/input.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),a=require("../../input-group.cjs.js"),s=require("../../input-group.module.scss.cjs.js"),n=({children:t})=>{const{disabled:u,inputId:r}=a.useInputGroup();if(!p.isValidElement(t))return t;const o=typeof t.type=="string",i={disabled:u||t.props.disabled,id:t.props.id??r,className:e.default(t.props.className,s.default["tedi-input-group__input"]),...!o&&{wrapperClassName:e.default(t.props.wrapperClassName,s.default["tedi-input-group__input"])}};return p.cloneElement(t,i)};exports.Input=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../../../../../../../external/classnames/index.cjs.js"),i=require("react"),n=require("../../input-group.cjs.js"),s=require("../../input-group.module.scss.cjs.js"),d=({children:t})=>{const{disabled:a,invalid:e,inputId:u}=n.useInputGroup();if(!i.isValidElement(t))return t;const o=typeof t.type=="string",r={disabled:a||t.props.disabled,id:t.props.id??u,className:p.default(t.props.className,s.default["tedi-input-group__input"]),...o?{"aria-invalid":e||t.props["aria-invalid"]||void 0}:{invalid:e||t.props.invalid,wrapperClassName:p.default(t.props.wrapperClassName,s.default["tedi-input-group__input"])}};return i.cloneElement(t,r)};exports.Input=d;

package/src/tedi/components/form/input-group/components/input/input.es.js

@@ -1,20 +1,21 @@
 import t from "../../../../../../../external/classnames/index.es.js";
-import s from "react";
+import i from "react";
 import { useInputGroup as u } from "../../input-group.es.js";
-import o from "../../input-group.module.scss.es.js";
-const f = ({ children: p }) => {
-  const { disabled: r, inputId: e } = u();
-  if (!s.isValidElement(p)) return p;
-  const a = typeof p.type == "string", i = {
-    disabled: r || p.props.disabled,
-    id: p.props.id ?? e,
-    className: t(p.props.className, o["tedi-input-group__input"]),
-    ...!a && {
-      wrapperClassName: t(p.props.wrapperClassName, o["tedi-input-group__input"])
+import a from "../../input-group.module.scss.es.js";
+const v = ({ children: p }) => {
+  const { disabled: o, invalid: s, inputId: r } = u();
+  if (!i.isValidElement(p)) return p;
+  const e = typeof p.type == "string", n = {
+    disabled: o || p.props.disabled,
+    id: p.props.id ?? r,
+    className: t(p.props.className, a["tedi-input-group__input"]),
+    ...e ? { "aria-invalid": s || p.props["aria-invalid"] || void 0 } : {
+      invalid: s || p.props.invalid,
+      wrapperClassName: t(p.props.wrapperClassName, a["tedi-input-group__input"])
     }
   };
-  return s.cloneElement(p, i);
+  return i.cloneElement(p, n);
 };
 export {
-  f as Input
+  v as Input
 };

package/src/tedi/components/form/input-group/components/prefix/prefix.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),d=require("react"),a=require("../../input-group.cjs.js"),i=require("../../input-group.module.scss.cjs.js"),c=({children:e,className:u,...n})=>{const{registerPrefix:r,unregisterPrefix:t,disabled:s}=a.useInputGroup();d.useEffect(()=>(r(),()=>t()),[r,t]);const o=typeof e=="string"||typeof e=="number";return p.jsx("div",{...n,className:f.default(i.default["tedi-input-group__prefix"],{[i.default["tedi-input-group__prefix--no-inner-div"]]:o},u),"aria-disabled":s,children:e})};exports.Prefix=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),t=require("react"),c=require("../../input-group.cjs.js"),n=require("../../input-group.module.scss.cjs.js"),l=({children:e,className:s,...o})=>{const{registerPrefix:r,unregisterPrefix:i,disabled:u}=c.useInputGroup();t.useEffect(()=>(r(),()=>i()),[r,i]);const d=typeof e=="string"||typeof e=="number",p=u&&t.isValidElement(e)?t.cloneElement(e,{disabled:!0}):e;return a.jsx("div",{...o,className:f.default(n.default["tedi-input-group__prefix"],{[n.default["tedi-input-group__prefix--no-inner-div"]]:d},s),"aria-disabled":u,children:p})};exports.Prefix=l;