@strapi/design-system 1.7.10 → 1.8.0

package/dist/DatePicker/DatePicker.js

@@ -1,71 +1,397 @@
-import { jsxs as R, jsx as r } from "react/jsx-runtime";
-import { useState as S, useRef as W } from "react";
-import { Cross as $, Calendar as v } from "@strapi/icons";
-import m from "styled-components";
-import { DatePickerWrapper as A } from "./components.js";
-import { DatePickerCalendar as P } from "./DatePickerCalendar.js";
-import { formatDate as j } from "./utils/formatDate.js";
-import { getDefaultLocale as E } from "../helpers/getDefaultLocale.js";
-import { TextInput as I } from "../TextInput/TextInput.js";
-import { FieldAction as V } from "../Field/FieldAction.js";
-const N = ({
+import { jsxs as A, jsx as l } from "react/jsx-runtime";
+import * as d from "react";
+import { useFloating as be, offset as xe, shift as we, flip as ke, autoUpdate as Te } from "@floating-ui/react-dom";
+import { today as j, minDate as U, maxDate as W, startOfMonth as Ee, startOfWeek as re, getDayOfWeek as Ie, isSameDay as ne, endOfMonth as Pe, parseAbsoluteToLocal as Se, toCalendarDate as Ae } from "@internationalized/date";
+import { useFocusGuards as Re } from "@radix-ui/react-focus-guards";
+import { FocusScope as Me } from "@radix-ui/react-focus-scope";
+import { Cross as ve, Calendar as $e } from "@strapi/icons";
+import { composeEventHandlers as R } from "@strapi/ui-primitives";
+import { createPortal as Le } from "react-dom";
+import { RemoveScroll as Fe } from "react-remove-scroll";
+import E from "styled-components";
+import { useDesignSystem as Ne } from "../DesignSystemProvider.js";
+import { DismissibleLayer as _e } from "../DismissibleLayer/index.js";
+import { createContext as Oe } from "../helpers/context.js";
+import { useComposedRefs as B } from "../hooks/useComposeRefs.js";
+import { useControllableState as Ve } from "../hooks/useControllableState.js";
+import { useDateFormatter as _ } from "../hooks/useDateFormatter.js";
+import { useId as ae } from "../hooks/useId.js";
+import { SingleSelectInput as J, SingleSelectOption as Q } from "../Select/SingleSelect.js";
+import { Portal as Ye } from "../Portal/Portal.js";
+import { Flex as V } from "../Flex/Flex.js";
+import { getThemeSize as ze, inputFocusStyle as Ue } from "../themes/utils.js";
+import { Box as Y } from "../Box/Box.js";
+import { Typography as z } from "../Typography/Typography.js";
+import { Field as We } from "../Field/Field.js";
+import { FieldLabel as je } from "../Field/FieldLabel.js";
+import { FieldHint as Be } from "../Field/FieldHint.js";
+import { FieldError as qe } from "../Field/FieldError.js";
+const Ke = 200, ee = 15, [Ge, M] = Oe("DatePicker"), Ze = d.forwardRef(({
   /**
-   * DatePicker props
+   * DatePickerCalendar props
    */
-  ariaLabel: e,
-  onClear: a,
-  clearLabel: u = "Clear",
+  calendarLabel: e,
+  className: r,
+  initialDate: n,
+  locale: t,
+  maxDate: o,
+  minDate: c,
+  monthSelectLabel: h = "Month",
+  onChange: u,
+  selectedDate: i,
+  yearSelectLabel: p = "Year",
   /**
-   * DatePickerCalendar props
+   * Combobox props
+   */
+  error: y,
+  id: C,
+  disabled: a = !1,
+  placeholder: f,
+  required: b = !1,
+  onClear: D,
+  clearLabel: k = "Clear",
+  size: x,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
    */
-  initialDate: d,
-  locale: h,
-  maxDate: C,
-  minDate: D,
-  onChange: c,
-  selectedDate: n,
+  ariaLabel: T,
   /**
-   * TextInput props
+   * @preserve
+   * @deprecated This is no longer used.
    */
-  disabled: o = !1,
-  ...g
-}) => {
-  const [s, i] = S(!1), t = W(null), f = h || E(), p = n ? j(n, f) : "", x = () => {
-    o || i((l) => !l);
-  }, b = () => {
-    o || a && (a(), t.current.inputWrapperRef.current.focus());
-  }, k = (l) => {
-    c && c(l), i(!1);
-  }, y = () => {
-    i(!1);
+  selectedDateLabel: s,
+  ...m
+}, w) => {
+  const v = Ne("DatePicker"), P = t ?? v.locale, q = _(P, {
+    dateStyle: "short"
+  }), $ = d.useMemo(() => {
+    const g = q.formatToParts(/* @__PURE__ */ new Date()), { value: S } = g.find((N) => N.type === "literal");
+    return S;
+  }, [q]), [le, se] = d.useState(!1), [ie, ce] = d.useState(null), [K, de] = d.useState(null), [ue, fe] = d.useState(null), [O, L] = d.useState(), [F, G] = Ve({
+    defaultProp: n ? I(n) : void 0,
+    prop: i && I(i),
+    onChange(g) {
+      u && u(g?.toDate("UTC"));
+    }
+  }), [Z, H] = d.useMemo(() => {
+    const g = n ? I(n) : j("UTC"), S = c ? I(c) : g.set({ day: 1, month: 1, year: g.year - Ke });
+    let N = o ? I(o) : g.set({ day: 31, month: 12, year: g.year + ee });
+    return N.compare(S) < 0 && (N = S.set({ day: 31, month: 12, year: S.year + ee })), [S, N];
+  }, [c, o, n]), [me, X] = d.useState(He({
+    currentValue: F,
+    minDate: Z,
+    maxDate: H
+  })), he = ae(), pe = d.useRef(null), ge = (g) => {
+    D && !a && (L(""), G(void 0), D(g), K?.focus());
+  }, De = d.useCallback((g) => {
+    g && F && X(F), se(g);
+  }, [F]);
+  d.useLayoutEffect(() => {
+    if (i) {
+      const g = I(i);
+      L(g.toString().split("-").reverse().join($));
+    } else
+      L("");
+  }, [$, i]), d.useLayoutEffect(() => {
+    if (n && O === void 0) {
+      const g = I(n);
+      L(g.toString().split("-").reverse().join($));
+    }
+  }, [$, n, O]);
+  const Ce = `${C}-hint`, ye = `${C}-error`;
+  return A(Ge, { calendarDate: me, content: ue, contentId: he, disabled: a, locale: P, minDate: Z, maxDate: H, open: le, onCalendarDateChange: X, onContentChange: fe, onOpenChange: De, onTextInputChange: de, onTextValueChange: L, onTriggerChange: ce, onValueChange: G, required: b, separator: $, textInput: K, textValue: O, timeZone: "UTC", trigger: ie, value: F, children: [A(Je, { className: r, size: x, hasError: !!y, children: [l(tt, { "aria-hidden": !0 }), l(nt, { ref: w, placeholder: f, "aria-describedby": `${Ce} ${ye}`, id: C, ...m }), O && D ? l(et, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ge, "aria-disabled": a, "aria-label": k, title: k, ref: pe, children: l(ve, {}) }) : null] }), l(Ye, { children: l(st, { label: e, children: l(ft, { monthSelectLabel: h, yearSelectLabel: p }) }) })] });
+}), te = (e) => !!e.match(/^[^a-zA-Z]*$/), He = ({ currentValue: e, minDate: r, maxDate: n }) => {
+  const t = j("UTC");
+  return e || (U(r, t) === r && W(n, t) === n ? t : U(r, t) === t ? r : W(n, t) === t ? n : t);
+}, Xe = "DatePickerTrigger", Je = d.forwardRef(({ hasError: e, size: r = "M", ...n }, t) => {
+  const o = M(Xe), c = B(t, (u) => o.onTriggerChange(u)), h = () => {
+    o.disabled || o.onOpenChange(!0);
   };
-  return R(A, { bold: s, children: [r(I, {
-    ref: t,
-    onClick: x,
-    // Prevent input from changing for now
-    onChange: () => {
+  return l(Me, {
+    asChild: !0,
+    // we make sure we're not trapping once it's been closed
+    // (closed !== unmounted when animating out)
+    trapped: o.open,
+    onMountAutoFocus: (u) => {
+      u.preventDefault();
     },
-    value: p,
-    startAction: r(F, { "aria-hidden": !0 }),
-    endAction: a && p ? r(V, { label: u, onClick: b, "aria-disabled": o || void 0, children: r(w, {}) }) : void 0,
-    "aria-autocomplete": "none",
-    "aria-label": e,
-    disabled: o,
-    type: "text",
-    ...g
-  }), t.current && t.current.inputWrapperRef && s && r(P, { selectedDate: n, initialDate: d, onChange: k, onEscape: y, locale: f, popoverSource: t.current.inputWrapperRef, minDate: D, maxDate: C })] });
-}, w = m($)`
-  height: ${11 / 16}rem;
-  width: ${11 / 16}rem;
+    onUnmountAutoFocus: (u) => {
+      document.getSelection()?.empty(), u.preventDefault();
+    },
+    children: l(Qe, { ref: c, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: o.disabled ? "neutral150" : "neutral0", onClick: R(n.onClick, () => {
+      o.textInput?.focus();
+    }), onPointerDown: R(n.onPointerDown, (u) => {
+      const i = u.target;
+      i.hasPointerCapture(u.pointerId) && i.releasePointerCapture(u.pointerId), (i.closest("button") ?? i.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (h(), o.textInput?.focus());
+    }) })
+  });
+}), Qe = E(V)`
+  border: 1px solid ${({ theme: e, $hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
+  min-height: ${({ theme: e, $size: r }) => ze("input")({ theme: e, size: r })};
+
+  &[data-disabled] {
+    color: ${({ theme: e }) => e.colors.neutral600};
+    background: ${({ theme: e }) => e.colors.neutral150};
+    cursor: not-allowed;
+  }
 
-  path {
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({ theme: e, $hasError: r }) => Ue()({ theme: e, hasError: r })};
+`, et = E(Y)`
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
     fill: ${({ theme: e }) => e.colors.neutral600};
   }
-`, F = m(v)`
+`, tt = E($e)`
   & > path {
     fill: ${({ theme: e }) => e.colors.neutral500};
   }
-`;
+`, rt = "DatePickerTextInput", nt = d.forwardRef(({ placeholder: e, ...r }, n) => {
+  const t = M(rt), { onTextValueChange: o, textValue: c, onTextInputChange: h, onOpenChange: u, disabled: i, separator: p } = t, y = B(n, (a) => h(a)), C = () => {
+    i || u(!0);
+  };
+  return l(ot, { role: "combobox", type: "text", inputMode: "numeric", ref: y, "aria-autocomplete": "none", "aria-controls": t.contentId, "aria-disabled": t.disabled, "aria-expanded": t.open, "aria-required": t.required, "aria-haspopup": "dialog", "data-state": t.open ? "open" : "closed", disabled: i, "data-disabled": i ? "" : void 0, pattern: `\\d{2}${p}\\d{2}${p}\\d{4}`, placeholder: e ?? `DD${p}MM${p}YYYY`, ...r, value: c ?? "", onBlur: R(r.onBlur, () => {
+    if (!t.textValue) {
+      t.onValueChange(void 0);
+      return;
+    }
+    t.onTextValueChange(t.calendarDate.toString().split("-").reverse().join(p)), t.onValueChange(t.calendarDate);
+  }), onChange: R(r.onChange, (a) => {
+    if (te(a.target.value)) {
+      const [f, b, D] = a.target.value.split(p), k = t.calendarDate.year;
+      let x = t.calendarDate.year;
+      if (D) {
+        let P = D.length === 1 ? `0${D}` : D;
+        x = D.length < 3 ? Number(`${k}`.slice(0, 4 - P.length) + P) : Number(P);
+      }
+      D && D.length < 3 && x > t.maxDate.year && (x -= 100);
+      const T = t.calendarDate.set({ year: x }), s = T.calendar.getMonthsInYear(T), m = T.set({
+        month: b && Number(b) <= s ? Number(b) : void 0
+      }), w = m.calendar.getDaysInMonth(m), v = m.set({
+        day: f && Number(f) <= w ? Number(f) : void 0
+      });
+      t.onCalendarDateChange(at(v, t.minDate, t.maxDate)), t.onTextValueChange(a.target.value);
+    }
+  }), onKeyDown: R(r.onKeyDown, (a) => {
+    if (!t.open && (te(a.key) || ["ArrowDown", "Backspace"].includes(a.key)))
+      C();
+    else if (["Tab"].includes(a.key) && t.open)
+      a.preventDefault();
+    else if (["Escape"].includes(a.key))
+      t.open ? t.onOpenChange(!1) : (t.onValueChange(void 0), t.onTextValueChange("")), a.preventDefault();
+    else if (t.open && ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(a.key))
+      switch (a.preventDefault(), a.key) {
+        case "ArrowDown": {
+          const f = t.calendarDate.add({ weeks: 1 });
+          if (t.maxDate && f.compare(t.maxDate) > 0)
+            return;
+          t.onCalendarDateChange(f);
+          return;
+        }
+        case "ArrowRight": {
+          const f = t.calendarDate.add({ days: 1 });
+          if (t.maxDate && f.compare(t.maxDate) > 0)
+            return;
+          t.onCalendarDateChange(f);
+          return;
+        }
+        case "ArrowUp": {
+          const f = t.calendarDate.subtract({ weeks: 1 });
+          if (t.minDate && f.compare(t.minDate) < 0)
+            return;
+          t.onCalendarDateChange(f);
+          return;
+        }
+        case "ArrowLeft": {
+          const f = t.calendarDate.subtract({ days: 1 });
+          if (t.minDate && f.compare(t.minDate) < 0)
+            return;
+          t.onCalendarDateChange(f);
+        }
+      }
+    else
+      t.open && ["Enter"].includes(a.key) && (a.preventDefault(), o(t.calendarDate.toString().split("-").reverse().join(p)), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
+  }) });
+});
+function at(e, r, n) {
+  return r && (e = W(e, r)), n && (e = U(e, n)), e;
+}
+const ot = E.input`
+  width: 100%;
+  font-size: ${14 / 16}rem;
+  color: ${({ theme: e }) => e.colors.neutral800};
+  height: 100%;
+  border: none;
+  background-color: transparent;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`, lt = "DatePickerContent", st = d.forwardRef((e, r) => {
+  const [n, t] = d.useState(), o = M(lt);
+  if (d.useLayoutEffect(() => {
+    t(new DocumentFragment());
+  }, []), !o.open) {
+    const c = n;
+    return c ? Le(l("div", { children: e.children }), c) : null;
+  }
+  return l(ct, { ...e, ref: r });
+}), it = "DatePickerContent", ct = d.forwardRef((e, r) => {
+  const { label: n = "Choose date", ...t } = e, { onOpenChange: o, ...c } = M(it), { x: h, y: u, reference: i, floating: p, strategy: y } = be({
+    strategy: "fixed",
+    placement: "bottom-start",
+    middleware: [
+      xe({
+        mainAxis: 4
+      }),
+      we(),
+      ke()
+    ],
+    whileElementsMounted: Te
+  });
+  d.useEffect(() => {
+    const a = () => {
+      o(!1);
+    };
+    return window.addEventListener("blur", a), window.addEventListener("resize", a), () => {
+      window.removeEventListener("blur", a), window.removeEventListener("resize", a);
+    };
+  }, [o]), d.useLayoutEffect(() => {
+    i(c.trigger);
+  }, [i, c.trigger]);
+  const C = B(r, (a) => c.onContentChange(a), p);
+  return Re(), l(Fe, { allowPinchZoom: !0, children: l(_e, {
+    asChild: !0,
+    // When focus is trapped, a focusout event may still happen.
+    // We make sure we don't trigger our `onDismiss` in such case.
+    onFocusOutside: (a) => {
+      a.preventDefault();
+    },
+    onDismiss: () => {
+      o(!1);
+    },
+    children: l(dt, { ref: C, "data-state": c.open ? "open" : "closed", onContextMenu: (a) => a.preventDefault(), id: c.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
+      left: h,
+      top: u,
+      position: y
+    }, hasRadius: !0, background: "neutral0", padding: 1, ...t })
+  }) });
+}), dt = E(Y)`
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  z-index: ${({ theme: e }) => e.zIndices[0]};
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, ut = "DatePickerCalendar", ft = d.forwardRef(({ monthSelectLabel: e, yearSelectLabel: r, ...n }, t) => {
+  const { locale: o, timeZone: c, minDate: h, maxDate: u, calendarDate: i, onCalendarDateChange: p } = M(ut), y = Ee(i), C = d.useMemo(() => {
+    const s = h.year, m = u.year;
+    return [...Array(m - s + 1).keys()].map((w) => (s + w).toString());
+  }, [h, u]), a = _(o, { month: "long" }), f = d.useMemo(() => [...Array(i.calendar.getMonthsInYear(i)).keys()].map((s) => a.format(i.set({ month: s + 1 }).toDate(c))), [i, a, c]), b = _(o, { weekday: "short" }), D = d.useMemo(() => {
+    let s = re(j(c), o);
+    return [...new Array(7).keys()].map((m) => {
+      let v = s.add({ days: m }).toDate(c);
+      return b.format(v);
+    });
+  }, [c, o, b]), k = (s) => {
+    if (typeof s == "number")
+      return;
+    const m = i.set({ month: f.indexOf(s) + 1 });
+    p(m);
+  }, x = (s) => {
+    if (typeof s == "number")
+      return;
+    const m = i.set({ year: parseInt(s, 10) });
+    p(m);
+  }, T = mt(y, o);
+  return A(V, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [A(ht, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [l(J, { label: e, size: "S", value: f[i.month - 1], onChange: k, children: f.map((s) => l(Q, { value: s, children: s }, s)) }), l(J, { size: "S", value: i.year.toString(), label: r, onChange: x, children: C.map((s) => l(Q, { value: s, children: s }, s)) })] }), A("table", { role: "grid", children: [l("thead", { "aria-hidden": !0, children: l("tr", { "aria-rowindex": 0, children: D.map((s, m) => l(pt, { "aria-colindex": m, children: s }, s)) }) }), l("tbody", { children: [...new Array(6).keys()].map((s) => l("tr", { "aria-rowindex": s + 2, children: T(s).map((m, w) => m ? l(Ct, { "aria-colindex": w + 1, date: m, startDate: y }, m.toString()) : l(oe, { "aria-colindex": w + 1 })) }, s)) })] })] });
+}), mt = (e, r) => (n) => {
+  let t = e.add({ weeks: n }), o = [];
+  t = re(t, r);
+  let c = Ie(t, r);
+  for (let h = 0; h < c; h++)
+    o.push(null);
+  for (; o.length < 7; ) {
+    o.push(t);
+    let h = t.add({ days: 1 });
+    if (ne(t, h))
+      break;
+    t = h;
+  }
+  for (; o.length < 7; )
+    o.push(null);
+  return o;
+}, ht = E(V)`
+  div[role='combobox'] {
+    border: 1px solid transparent;
+    background: transparent;
+    font-weight: ${(e) => e.theme.fontWeights.bold};
+
+    ${z} {
+      color: ${({ theme: e }) => e.colors.neutral800};
+    }
+
+    svg {
+      > g,
+      path {
+        fill: ${({ theme: e }) => e.colors.neutral500};
+      }
+    }
+
+    &:hover {
+      background-color: ${({ theme: e }) => e.colors.neutral100};
+    }
+  }
+`, pt = d.forwardRef(({ children: e, ...r }, n) => l(gt, { as: "th", role: "gridcell", ref: n, ...r, height: `${24 / 16}rem`, width: `${32 / 16}rem`, children: l(z, { variant: "pi", fontWeight: "bold", color: "neutral800", children: e.slice(0, 2) }) })), gt = E(Y)`
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  text-transform: capitalize;
+`, Dt = "DatePickerCalendarCell", Ct = d.forwardRef(({ date: e, startDate: r, ...n }, t) => {
+  const { timeZone: o, locale: c, calendarDate: h, onValueChange: u, onOpenChange: i, onTextValueChange: p, separator: y, onCalendarDateChange: C } = M(Dt), a = ne(h, e), f = _(c, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  }), b = d.useMemo(() => f.format(e.toDate(o)), [f, e, o]), D = _(c, {
+    day: "numeric",
+    calendar: e.calendar.identifier
+  }), k = d.useMemo(() => D.formatToParts(e.toDate(o)).find((m) => m.type === "day").value, [D, e, o]), x = Pe(r), T = e.compare(r) < 0 || e.compare(x) > 0;
+  let s = "neutral900";
+  return a ? s = "primary600" : T && (s = "neutral600"), l(oe, { as: "td", role: "gridcell", ref: t, "aria-selected": a, ...n, hasRadius: !0, "aria-label": b, tabIndex: a ? 0 : -1, background: a ? "primary100" : "neutral0", cursor: "pointer", onPointerDown: R(n.onPointerDown, (m) => {
+    m.preventDefault(), C(e), u(e), p(e.toString().split("-").reverse().join(y)), i(!1);
+  }), children: l(z, { variant: "pi", textColor: s, children: k }) });
+}), oe = E(Y)`
+  text-align: center;
+  padding: ${7 / 16}rem;
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px !important;
+
+  &:hover {
+    background: ${({ theme: e }) => e.colors.primary100};
+
+    & > ${z} {
+      color: ${({ theme: e }) => e.colors.primary600};
+    }
+  }
+`, yt = d.forwardRef((e, r) => {
+  const { error: n, hint: t, id: o, required: c, label: h, ...u } = e, i = ae(o);
+  return l(We, { error: n, hint: t, required: c, ref: r, id: i, children: A(V, { direction: "column", alignItems: "stretch", gap: 1, children: [l(je, { children: h }), l(Ze, { id: i, error: n, required: c, ...u }), l(Be, {}), l(qe, {})] }) });
+}), I = (e) => {
+  const r = e.toISOString(), n = Se(r);
+  return Ae(n);
+}, Kt = yt;
 export {
-  N as DatePicker
+  Kt as DatePicker,
+  Ze as DatePickerInput
 };

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),$=require("../hooks/useControllableState.cjs"),w=require("../hooks/useId.cjs"),L=require("../DatePicker/DatePicker.cjs"),N=require("../TimePicker/TimePicker.cjs"),V=require("../Field/Field.cjs"),f=require("../Flex/Flex.cjs"),v=require("../Field/FieldLabel.cjs"),E=require("../Field/FieldHint.cjs"),z=require("../Field/FieldError.cjs"),B=({ariaLabel:a,clearLabel:s="clear",disabled:m=!1,error:c,hint:u,id:x,label:d,labelAction:b,onChange:q,onClear:D,name:F,required:p=!1,selectButtonTitle:j="select",size:h="M",step:T=1,value:C,...I})=>{const k=O(C),[t,o]=$.useControllableState({prop:k,onChange:q}),r=t?`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`:void 0,y=e=>{if(r){const[i,g]=r.split(":");e.setHours(parseInt(i,10)),e.setMinutes(parseInt(g,10))}o(e)},P=e=>{const i=t?new Date(t):new Date,[g,M]=e.split(":");i.setHours(parseInt(g,10)),i.setMinutes(parseInt(M,10)),o(i)},S=()=>{o(void 0),D&&D()},H=()=>{let e=t?new Date(t):new Date;e.setHours(0),e.setMinutes(0),o(e)},l=w.useId(x);return n.jsx(V.Field,{name:F,role:"group",id:l,"aria-labelledby":l,hint:u,error:c,required:p,children:n.jsxs(f.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[n.jsx(v.FieldLabel,{action:b,children:d}),n.jsxs(f.Flex,{gap:2,children:[n.jsx(L.DatePicker,{ariaLabel:d||a,selectedDate:t,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:y,error:typeof c=="string",hint:typeof u=="string",required:p,size:h,onClear:S,clearLabel:`${s} date`,disabled:m,id:l,...I}),n.jsx(N.TimePicker,{size:h,"aria-label":d||a,error:typeof c=="string",hint:typeof u=="string",value:r,onChange:P,onClear:r!==void 0&&r!=="0:0:0"?H:void 0,clearLabel:`${s} time`,required:p,selectButtonTitle:j,disabled:m,step:T,id:l})]}),n.jsx(E.FieldHint,{}),n.jsx(z.FieldError,{})]})})},O=a=>{const s=Date.parse(a);if(!Number.isNaN(s))return new Date(s)};exports.DateTimePicker=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("react"),d=require("@internationalized/date"),A=require("styled-components"),G=require("../DatePicker/DatePicker.cjs"),J=require("../DesignSystemProvider.cjs"),K=require("../hooks/useControllableState.cjs"),N=require("../hooks/useDateFormatter.cjs"),x=require("../hooks/useId.cjs"),Q=require("../TimePicker/TimePicker.cjs"),W=require("../Field/Field.cjs"),j=require("../Flex/Flex.cjs"),X=require("../Field/FieldLabel.cjs"),k=require("../VisuallyHidden/VisuallyHidden.cjs"),Y=require("../Field/FieldHint.cjs"),ee=require("../Field/FieldError.cjs"),S=i=>i&&i.__esModule?i:{default:i},te=S(U),L=S(A),ne=({ariaLabel:i,clearLabel:c="clear",dateLabel:h="Choose date",timeLabel:o="Choose time",disabled:b=!1,error:D,hint:_,id:$,label:w,labelAction:V,onChange:q,onClear:u,name:H,required:p=!1,selectButtonTitle:se,size:I="M",step:R,value:T,initialDate:F,...v})=>{const C=te.default.useRef(null),[n,m]=K.useControllableState({defaultProp:F?a(F,!1):void 0,prop:T?a(T,!1):T??void 0,onChange(e){q&&q(e?.toDate(d.getLocalTimeZone()))}}),M=J.useDesignSystem("DateTimePicker"),Z=N.useDateFormatter(M.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),l=n?Z.format(n.toDate(d.getLocalTimeZone())):"",z=e=>{let r=e?a(e):void 0;if(!(r&&n&&r.compare(n)===0)){if(l&&r){const[f,g]=l.split(":");r=r.set({hour:parseInt(f,10),minute:parseInt(g,10)})}m(r)}},B=e=>{if(!e)return;const[r,f]=e.split(":"),g=n?n.set({hour:parseInt(r,10),minute:parseInt(f,10)}):a(new Date).set({hour:parseInt(r,10),minute:parseInt(f,10)});m(g)},E=e=>{m(void 0),u&&u(e)},O=()=>{const e=n?n.set({hour:0,minute:0}):a(new Date);m(e)},s=x.useId($),y=x.useId(),P=x.useId();return t.jsx(W.Field,{name:H,as:"fieldset",id:s,"aria-labelledby":s,hint:_,error:D,required:p,children:t.jsxs(j.Flex,{as:"span",direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(X.FieldLabel,{onClick:()=>{C.current.focus()},as:"legend",id:s,action:V,children:w}),t.jsxs(j.Flex,{flex:"1",gap:1,children:[t.jsx(k.VisuallyHidden,{as:"label",htmlFor:P,children:h}),t.jsx(re,{...v,selectedDate:n?.toDate(d.getLocalTimeZone()),onChange:z,error:typeof D=="string",required:p,size:I,onClear:u?E:void 0,clearLabel:`${c} date`,disabled:b,id:P,ref:C,"aria-describedby":`${s}-hint ${s}-error`}),t.jsx(k.VisuallyHidden,{as:"label",htmlFor:y,children:o}),t.jsx(ie,{size:I,error:typeof D=="string",value:l,onChange:B,onClear:u&&l!==void 0&&l!=="00:00"?O:void 0,clearLabel:`${c} time`,required:p,disabled:b,step:R,id:y,"aria-describedby":`${s}-hint ${s}-error`})]}),t.jsx(Y.FieldHint,{}),t.jsx(ee.FieldError,{})]})})},a=(i,c=!0)=>{const h=i.toISOString();let o=d.parseAbsoluteToLocal(h);return c&&(o=o.set({hour:0,minute:0})),d.toCalendarDateTime(o)},re=L.default(G.DatePickerInput)`
+  flex: 1 1 70%;
+  min-width: 120px;
+`,ie=L.default(Q.TimePickerInput)`
+  flex: 1 1 30%;
+  min-width: 120px;
+`;exports.DateTimePicker=ne;exports.convertUTCDateToCalendarDateTime=a;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,56 +1,94 @@
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { useControllableState as P } from "../hooks/useControllableState.js";
-import { useId as V } from "../hooks/useId.js";
-import { DatePicker as j } from "../DatePicker/DatePicker.js";
-import { TimePicker as q } from "../TimePicker/TimePicker.js";
-import { Field as v } from "../Field/Field.js";
-import { Flex as C } from "../Flex/Flex.js";
-import { FieldLabel as z } from "../Field/FieldLabel.js";
-import { FieldHint as B } from "../Field/FieldHint.js";
-import { FieldError as E } from "../Field/FieldError.js";
-const Z = ({ ariaLabel: a, clearLabel: n = "clear", disabled: f = !1, error: d, hint: c, id: b, label: m, labelAction: I, onChange: T, onClear: g, name: $, required: u = !1, selectButtonTitle: w = "select", size: h = "M", step: y = 1, value: F, ...H }) => {
-  const M = A(F), [t, o] = P({
-    prop: M,
-    onChange: T
-  }), i = t ? `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}` : void 0, k = (e) => {
-    if (i) {
-      const [s, p] = i.split(":");
-      e.setHours(parseInt(s, 10)), e.setMinutes(parseInt(p, 10));
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
+import Z from "react";
+import { getLocalTimeZone as g, parseAbsoluteToLocal as v, toCalendarDateTime as G } from "@internationalized/date";
+import $ from "styled-components";
+import { DatePickerInput as J } from "../DatePicker/DatePicker.js";
+import { useDesignSystem as K } from "../DesignSystemProvider.js";
+import { useControllableState as N } from "../hooks/useControllableState.js";
+import { useDateFormatter as Q } from "../hooks/useDateFormatter.js";
+import { useId as T } from "../hooks/useId.js";
+import { TimePickerInput as W } from "../TimePicker/TimePicker.js";
+import { Field as X } from "../Field/Field.js";
+import { Flex as L } from "../Flex/Flex.js";
+import { FieldLabel as Y } from "../Field/FieldLabel.js";
+import { VisuallyHidden as S } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldHint as ee } from "../Field/FieldHint.js";
+import { FieldError as te } from "../Field/FieldError.js";
+const Ce = ({
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  ariaLabel: b,
+  clearLabel: l = "clear",
+  dateLabel: u = "Choose date",
+  timeLabel: n = "Choose time",
+  disabled: I = !1,
+  error: f,
+  hint: V,
+  id: _,
+  label: R,
+  labelAction: j,
+  onChange: C,
+  onClear: d,
+  name: z,
+  required: p = !1,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  selectButtonTitle: oe,
+  size: x = "M",
+  step: B,
+  value: h,
+  initialDate: F,
+  ...H
+}) => {
+  const k = Z.useRef(null), [t, m] = N({
+    defaultProp: F ? s(F, !1) : void 0,
+    prop: h ? s(h, !1) : h ?? void 0,
+    onChange(e) {
+      C && C(e?.toDate(g()));
     }
-    o(e);
-  }, x = (e) => {
-    const s = t ? new Date(t) : /* @__PURE__ */ new Date(), [p, N] = e.split(":");
-    s.setHours(parseInt(p, 10)), s.setMinutes(parseInt(N, 10)), o(s);
-  }, S = () => {
-    o(void 0), g && g();
-  }, L = () => {
-    let e = t ? new Date(t) : /* @__PURE__ */ new Date();
-    e.setHours(0), e.setMinutes(0), o(e);
-  }, l = V(b);
-  return r(v, { name: $, role: "group", id: l, "aria-labelledby": l, hint: c, error: d, required: u, children: D(C, { direction: "column", alignItems: "stretch", gap: 1, children: [r(z, { action: I, children: m }), D(C, { gap: 2, children: [r(j, { ariaLabel: m || a, selectedDate: t, selectedDateLabel: (e) => `Date picker, current is ${e}`, onChange: k, error: typeof d == "string", hint: typeof c == "string", required: u, size: h, onClear: S, clearLabel: `${n} date`, disabled: f, id: l, ...H }), r(q, {
-    size: h,
-    "aria-label": m || a,
-    error: typeof d == "string",
-    hint: typeof c == "string",
-    value: i,
-    onChange: x,
-    /**
-     * In reality the time picker is only cleared when there is no date otherwise it's just 00:00
-     * and we should show that for accurate UX and therefore you cannot clear it when it's 00:00.
-     */
-    onClear: i !== void 0 && i !== "0:0:0" ? L : void 0,
-    clearLabel: `${n} time`,
-    required: u,
-    selectButtonTitle: w,
-    disabled: f,
-    step: y,
-    id: l
-  })] }), r(B, {}), r(E, {})] }) });
-}, A = (a) => {
-  const n = Date.parse(a);
-  if (!Number.isNaN(n))
-    return new Date(n);
-};
+  }), q = K("DateTimePicker"), A = Q(q.locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !1
+  }), a = t ? A.format(t.toDate(g())) : "", E = (e) => {
+    let r = e ? s(e) : void 0;
+    if (!(r && t && r.compare(t) === 0)) {
+      if (a && r) {
+        const [c, D] = a.split(":");
+        r = r.set({ hour: parseInt(c, 10), minute: parseInt(D, 10) });
+      }
+      m(r);
+    }
+  }, M = (e) => {
+    if (!e)
+      return;
+    const [r, c] = e.split(":"), D = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(c, 10) }) : s(/* @__PURE__ */ new Date()).set({ hour: parseInt(r, 10), minute: parseInt(c, 10) });
+    m(D);
+  }, O = (e) => {
+    m(void 0), d && d(e);
+  }, U = () => {
+    const e = t ? t.set({ hour: 0, minute: 0 }) : s(/* @__PURE__ */ new Date());
+    m(e);
+  }, o = T(_), y = T(), P = T();
+  return i(X, { name: z, as: "fieldset", id: o, "aria-labelledby": o, hint: V, error: f, required: p, children: w(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [i(Y, { onClick: () => {
+    k.current.focus();
+  }, as: "legend", id: o, action: j, children: R }), w(L, { flex: "1", gap: 1, children: [i(S, { as: "label", htmlFor: P, children: u }), i(re, { ...H, selectedDate: t?.toDate(g()), onChange: E, error: typeof f == "string", required: p, size: x, onClear: d ? O : void 0, clearLabel: `${l} date`, disabled: I, id: P, ref: k, "aria-describedby": `${o}-hint ${o}-error` }), i(S, { as: "label", htmlFor: y, children: n }), i(ie, { size: x, error: typeof f == "string", value: a, onChange: M, onClear: d && a !== void 0 && a !== "00:00" ? U : void 0, clearLabel: `${l} time`, required: p, disabled: I, step: B, id: y, "aria-describedby": `${o}-hint ${o}-error` })] }), i(ee, {}), i(te, {})] }) });
+}, s = (b, l = !0) => {
+  const u = b.toISOString();
+  let n = v(u);
+  return l && (n = n.set({ hour: 0, minute: 0 })), G(n);
+}, re = $(J)`
+  flex: 1 1 70%;
+  min-width: 120px;
+`, ie = $(W)`
+  flex: 1 1 30%;
+  min-width: 120px;
+`;
 export {
-  Z as DateTimePicker
+  Ce as DateTimePicker,
+  s as convertUTCDateToCalendarDateTime
 };

package/dist/DateTimePicker/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateTimePicker.cjs");exports.DateTimePicker=e.DateTimePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateTimePicker.cjs");exports.DateTimePicker=e.DateTimePicker;exports.convertUTCDateToCalendarDateTime=e.convertUTCDateToCalendarDateTime;

package/dist/DateTimePicker/index.js

@@ -1,4 +1,5 @@
-import { DateTimePicker as i } from "./DateTimePicker.js";
+import { DateTimePicker as r, convertUTCDateToCalendarDateTime as t } from "./DateTimePicker.js";
 export {
-  i as DateTimePicker
+  r as DateTimePicker,
+  t as convertUTCDateToCalendarDateTime
 };

package/dist/DesignSystemProvider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./helpers/context.cjs"),s=require("./ThemeProvider/ThemeProvider.cjs"),t="en-EN",r=()=>typeof navigator>"u"?t:navigator.language?navigator.language:t,[a,u]=o.createContext("StrapiDesignSystem",{locale:r()}),c=({locale:n=r(),...i})=>e.jsx(a,{locale:n,children:e.jsx(s.ThemeProvider,{...i})});exports.DesignSystemProvider=c;exports.useDesignSystem=u;