@epilot/zenith-react 0.1.0 → 0.2.0-next.1

package/dist/components/date-range-picker/date-range-picker.js

@@ -1,16 +1,17 @@
-import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import { jsxs as I, jsx as s } from "react/jsx-runtime";
 import * as a from "react";
-import { createElement as ae } from "react";
-import { SLOT_ATTR as l, mergeClasses as B, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { Field as se, FieldLabel as ie, FieldInputGroup as de, FieldGroupAddon as oe, FieldError as pe } from "../field/field.js";
-import { Button as ce } from "../button/button.js";
-import { Pill as le } from "../pill/pill.js";
-import { Popover as ge, PopoverTrigger as ue, PopoverContent as he } from "../popover/popover.js";
-import { makeZenithStyles as me } from "../../styles/make-styles.js";
-import { gray6 as fe, gray9 as Te, leadingSm as H, textSm as z, grayA8 as Ce, grayA12 as qe, spacingElement1 as ye, spacingGroup1 as Se, spacingElement2 as ke } from "../../tokens/index.js";
-import { RangeCalendar as xe } from "./range-calendar.js";
-import { formatDateTimeDisplay as i, parseDateTimeInput as b } from "../date-time-picker/date-time-picker-utils.js";
-const we = (x) => /* @__PURE__ */ s(
+import { createElement as oe } from "react";
+import { SLOT_ATTR as c, mergeClasses as J, shorthands as p } from "@epilot/zenith-runtime/v1";
+import { Field as le, FieldLabel as pe, FieldInputGroup as ce, FieldGroupAddon as ue, FieldError as ge } from "../field/field.js";
+import { Button as he } from "../button/button.js";
+import { Pill as me } from "../pill/pill.js";
+import { Popover as fe, PopoverTrigger as Te, PopoverContent as ye } from "../popover/popover.js";
+import { makeZenithStyles as Ce } from "../../styles/make-styles.js";
+import { boxModel as g, nativeControl as qe } from "../../styles/host-reset.js";
+import { gray6 as be, gray9 as Se, leadingSm as U, textSm as W, grayA8 as ke, grayA12 as Ie, spacingElement1 as xe, spacingGroup1 as ve, spacingElement2 as we } from "../../tokens/index.js";
+import { RangeCalendar as Re } from "./range-calendar.js";
+import { formatDateTimeDisplay as d, parseDateTimeInput as N } from "../date-time-picker/date-time-picker-utils.js";
+const Ee = (x) => /* @__PURE__ */ s(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -21,11 +22,13 @@ const we = (x) => /* @__PURE__ */ s(
     ...x,
     children: /* @__PURE__ */ s("path", { d: "M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" })
   }
-), Re = "dd/MM/yyyy", _ = me({
+), Ne = "dd/MM/yyyy", K = Ce({
   root: {
+    ...g,
     width: "100%"
   },
   inputGroup: {
+    ...g,
     width: "100%"
   },
   /**
@@ -34,6 +37,7 @@ const we = (x) => /* @__PURE__ */ s(
    * unconstrained 18px icon rather than the 28x28-with-14px-icon that `icon-sm` specifies.
    */
   addonButton: {
+    ...g,
     width: "auto",
     height: "auto",
     "& svg": { width: "auto", height: "auto" }
@@ -44,9 +48,10 @@ const we = (x) => /* @__PURE__ */ s(
     flexBasis: "0%"
   },
   triggerRoot: {
+    ...g,
     display: "flex",
     alignItems: "center",
-    ...c.gap(ke),
+    ...p.gap(we),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
@@ -54,103 +59,112 @@ const we = (x) => /* @__PURE__ */ s(
     cursor: "pointer"
   },
   input: {
+    ...qe,
     width: "5.5rem",
     outlineStyle: "none",
-    fontSize: z,
-    lineHeight: H,
-    color: qe,
+    fontSize: W,
+    lineHeight: U,
+    color: Ie,
     backgroundColor: "transparent",
     textAlign: "center",
-    ...c.border("0"),
-    ...c.padding("0"),
+    ...p.border("0"),
+    ...p.padding("0"),
     "::placeholder": {
-      color: Ce
+      color: ke
     },
     ":disabled": {
       cursor: "not-allowed"
     }
   },
   separator: {
-    fontSize: z,
-    lineHeight: H,
-    color: Te,
+    ...g,
+    fontSize: W,
+    lineHeight: U,
+    color: Se,
     flexShrink: 0,
     userSelect: "none",
-    ...c.padding("0", "0.125rem")
+    ...p.padding("0", "0.125rem")
     // v1 px-0.5
   },
   popoverContent: {
-    ...c.overflow("hidden")
+    ...p.overflow("hidden")
   },
   content: {
+    ...g,
     display: "flex",
     flexDirection: "row",
-    ...c.gap(Se),
-    ...c.padding("0.75rem")
+    ...p.gap(ve),
+    ...p.padding("0.75rem")
     // v1 p-3 (0.75rem)
   },
   presets: {
+    ...g,
     display: "flex",
     flexDirection: "column",
-    ...c.gap(ye),
+    ...p.gap(xe),
     width: "8rem",
     // v1 w-32
     borderLeftWidth: "1px",
     borderLeftStyle: "solid",
-    borderLeftColor: fe,
+    borderLeftColor: be,
     paddingLeft: "0.75rem"
     // v1 pl-3 (0.75rem)
   },
   presetPill: {
     alignSelf: "flex-start"
   }
-}), be = a.forwardRef((x, t) => {
+}), Pe = a.forwardRef((x, t) => {
   const {
     startValue: o,
-    endValue: d,
-    startPlaceholder: w,
-    endPlaceholder: v,
-    disabled: C,
-    onStartChange: q,
-    onEndChange: E,
-    onStartBlur: I,
+    endValue: i,
+    startPlaceholder: v,
+    endPlaceholder: P,
+    disabled: h,
+    onStartChange: b,
+    onEndChange: V,
+    onStartBlur: Z,
     onEndBlur: n,
     testId: e,
-    inputAriaLabel: N,
-    className: P,
-    "data-slot": F,
-    ...V
-  } = x, u = _();
-  return /* @__PURE__ */ k(
+    inputAriaLabel: M,
+    startId: w,
+    endId: R,
+    labelId: m,
+    className: A,
+    "data-slot": z,
+    ...D
+  } = x, f = K();
+  return /* @__PURE__ */ I(
     "div",
     {
       ref: t,
-      ...V,
-      className: B(u.triggerRoot, P),
+      ...D,
+      className: J(f.triggerRoot, A),
       "data-slot": "date-range-input",
-      [l]: "date-range-input",
+      [c]: "date-range-input",
       children: [
         /* @__PURE__ */ s(
           "input",
           {
-            "aria-label": N || "Start date",
-            className: u.input,
+            "aria-label": M || "Start date",
+            id: w,
+            "aria-labelledby": m ? `${m} ${w}` : void 0,
+            className: f.input,
             "data-slot": "date-range-start-input",
-            [l]: "date-range-start-input",
+            [c]: "date-range-start-input",
             "data-testid": e ? `${e}-start` : void 0,
-            disabled: C,
-            onBlur: I,
-            onChange: q,
-            placeholder: w,
+            disabled: h,
+            onBlur: Z,
+            onChange: b,
+            placeholder: v,
             value: o
           }
         ),
         /* @__PURE__ */ s(
           "span",
           {
-            className: u.separator,
+            className: f.separator,
             "data-slot": "date-range-separator",
-            [l]: "date-range-separator",
+            [c]: "date-range-separator",
             children: "–"
           }
         ),
@@ -158,218 +172,223 @@ const we = (x) => /* @__PURE__ */ s(
           "input",
           {
             "aria-label": "End date",
-            className: u.input,
+            id: R,
+            "aria-labelledby": m ? `${m} ${R}` : void 0,
+            className: f.input,
             "data-slot": "date-range-end-input",
-            [l]: "date-range-end-input",
+            [c]: "date-range-end-input",
             "data-testid": e ? `${e}-end` : void 0,
-            disabled: C,
+            disabled: h,
             onBlur: n,
-            onChange: E,
-            placeholder: v,
-            value: d
+            onChange: V,
+            placeholder: P,
+            value: i
           }
         )
       ]
     }
   );
-}), Oe = a.forwardRef(function({
+}), Be = a.forwardRef(function({
   value: t,
   onChange: o,
-  onBlur: d,
-  disabled: w = !1,
-  disablePast: v = !1,
-  label: C,
-  error: q,
-  startPlaceholder: E = "dd/MM/yyyy",
-  endPlaceholder: I = "dd/MM/yyyy",
-  format: n = Re,
+  onBlur: i,
+  disabled: v = !1,
+  disablePast: P = !1,
+  label: h,
+  error: b,
+  startPlaceholder: V = "dd/MM/yyyy",
+  endPlaceholder: Z = "dd/MM/yyyy",
+  format: n = Ne,
   locale: e = "de",
-  className: N,
-  keyboardIcon: P,
-  inputAriaLabel: F,
-  openPickerAriaLabel: V = "Open date picker",
-  previousMonthLabel: u = "Previous month",
-  nextMonthLabel: j = "Next month",
-  testId: $,
-  currentTimeInTimezone: U,
-  showWeekNumbers: W = !1,
-  presets: Z
-}, J) {
-  const p = _(), [M, A] = a.useState(!1), [D, h] = a.useState(
-    () => t.start ? i(t.start, n, e) : ""
-  ), [L, m] = a.useState(
-    () => t.end ? i(t.end, n, e) : ""
-  ), [R, y] = a.useState(t), f = a.useRef(t), T = a.useRef(
+  className: M,
+  keyboardIcon: w,
+  inputAriaLabel: R,
+  openPickerAriaLabel: m = "Open date picker",
+  previousMonthLabel: A = "Previous month",
+  nextMonthLabel: z = "Next month",
+  testId: D,
+  currentTimeInTimezone: f,
+  showWeekNumbers: Q = !1,
+  presets: F
+}, X) {
+  const l = K(), [L, O] = a.useState(!1), [G, T] = a.useState(
+    () => t.start ? d(t.start, n, e) : ""
+  ), [$, y] = a.useState(
+    () => t.end ? d(t.end, n, e) : ""
+  ), [E, S] = a.useState(t), C = a.useRef(t), q = a.useRef(
     void 0
   );
   a.useEffect(
     () => () => {
-      T.current !== void 0 && clearTimeout(T.current);
+      q.current !== void 0 && clearTimeout(q.current);
     },
     []
   ), a.useEffect(() => {
-    h(
-      t.start ? i(t.start, n, e) : ""
-    ), m(
-      t.end ? i(t.end, n, e) : ""
-    ), y(t);
+    T(
+      t.start ? d(t.start, n, e) : ""
+    ), y(
+      t.end ? d(t.end, n, e) : ""
+    ), S(t);
   }, [t, n, e]), a.useEffect(() => {
-    M && (f.current = t, y(t));
-  }, [M, t]);
-  const K = a.useCallback(
+    L && (C.current = t, S(t));
+  }, [L, t]);
+  const Y = a.useCallback(
     (r) => {
-      const g = r.target.value;
-      h(g);
-      const S = b(g, n, e);
-      if (S) {
-        const O = { ...t, start: S };
-        o(O);
+      const u = r.target.value;
+      T(u);
+      const k = N(u, n, e);
+      if (k) {
+        const H = { ...t, start: k };
+        o(H);
       }
     },
     [o, t, n, e]
-  ), Q = a.useCallback(
+  ), ee = a.useCallback(
     (r) => {
-      const g = r.target.value;
-      m(g);
-      const S = b(g, n, e);
-      if (S) {
-        const O = { ...t, end: S };
-        o(O);
+      const u = r.target.value;
+      y(u);
+      const k = N(u, n, e);
+      if (k) {
+        const H = { ...t, end: k };
+        o(H);
       }
     },
     [o, t, n, e]
-  ), X = a.useCallback(() => {
-    b(D, n, e) || h(
-      t.start ? i(t.start, n, e) : ""
-    ), d == null || d();
-  }, [D, t.start, n, e, d]), Y = a.useCallback(() => {
-    b(L, n, e) || m(
-      t.end ? i(t.end, n, e) : ""
-    ), d == null || d();
-  }, [L, t.end, n, e, d]), ee = a.useCallback(
+  ), te = a.useCallback(() => {
+    N(G, n, e) || T(
+      t.start ? d(t.start, n, e) : ""
+    ), i == null || i();
+  }, [G, t.start, n, e, i]), ne = a.useCallback(() => {
+    N($, n, e) || y(
+      t.end ? d(t.end, n, e) : ""
+    ), i == null || i();
+  }, [$, t.end, n, e, i]), re = a.useCallback(
     (r) => {
-      y(r), h(
-        r.start ? i(r.start, n, e) : ""
-      ), m(
-        r.end ? i(r.end, n, e) : ""
+      S(r), T(
+        r.start ? d(r.start, n, e) : ""
+      ), y(
+        r.end ? d(r.end, n, e) : ""
       );
     },
     [n, e]
-  ), G = a.useCallback(
+  ), B = a.useCallback(
     (r) => {
-      o(r), y(r), h(
-        r.start ? i(r.start, n, e) : ""
-      ), m(
-        r.end ? i(r.end, n, e) : ""
-      ), T.current !== void 0 && clearTimeout(T.current), T.current = setTimeout(() => {
-        T.current = void 0, A(!1);
+      o(r), S(r), T(
+        r.start ? d(r.start, n, e) : ""
+      ), y(
+        r.end ? d(r.end, n, e) : ""
+      ), q.current !== void 0 && clearTimeout(q.current), q.current = setTimeout(() => {
+        q.current = void 0, O(!1);
       }, 150);
     },
     [o, n, e]
-  ), te = a.useCallback(
+  ), ae = a.useCallback(
     (r) => {
-      r || (!R.start || !R.end) && (y(f.current), h(
-        f.current.start ? i(
-          f.current.start,
+      r || (!E.start || !E.end) && (S(C.current), T(
+        C.current.start ? d(
+          C.current.start,
           n,
           e
         ) : ""
-      ), m(
-        f.current.end ? i(
-          f.current.end,
+      ), y(
+        C.current.end ? d(
+          C.current.end,
           n,
           e
         ) : ""
-      )), A(r);
+      )), O(r);
     },
-    [R, n, e]
-  ), ne = P || /* @__PURE__ */ s(we, {}), re = q ? "destructive" : "highlight";
-  return /* @__PURE__ */ k(
-    se,
+    [E, n, e]
+  ), se = w || /* @__PURE__ */ s(Ee, {}), de = b ? "destructive" : "highlight", _ = a.useId(), j = a.useId(), ie = a.useId();
+  return /* @__PURE__ */ I(
+    le,
     {
-      className: B(p.root, N),
+      className: J(l.root, M),
       "data-slot": "daterangepicker",
-      [l]: "daterangepicker",
-      ref: J,
-      variant: re,
+      [c]: "daterangepicker",
+      ref: X,
+      variant: de,
       children: [
-        C && /* @__PURE__ */ s(ie, { children: C }),
-        /* @__PURE__ */ k(ge, { modal: !0, onOpenChange: te, open: M, children: [
-          /* @__PURE__ */ k(de, { className: p.inputGroup, children: [
-            /* @__PURE__ */ s(ue, { asChild: !0, className: p.popoverTrigger, children: /* @__PURE__ */ s(
-              be,
+        h && /* @__PURE__ */ s(pe, { id: _, htmlFor: j, children: h }),
+        /* @__PURE__ */ I(fe, { modal: !0, onOpenChange: ae, open: L, children: [
+          /* @__PURE__ */ I(ce, { className: l.inputGroup, children: [
+            /* @__PURE__ */ s(Te, { asChild: !0, className: l.popoverTrigger, children: /* @__PURE__ */ s(
+              Pe,
               {
-                disabled: w,
-                endPlaceholder: I,
-                endValue: L,
-                inputAriaLabel: F,
-                onEndBlur: Y,
-                onEndChange: Q,
-                onStartBlur: X,
-                onStartChange: K,
-                startPlaceholder: E,
-                startValue: D,
-                testId: $
+                disabled: v,
+                endPlaceholder: Z,
+                endValue: $,
+                inputAriaLabel: R,
+                startId: j,
+                endId: ie,
+                labelId: h ? _ : void 0,
+                onEndBlur: ne,
+                onEndChange: ee,
+                onStartBlur: te,
+                onStartChange: Y,
+                startPlaceholder: V,
+                startValue: G,
+                testId: D
               }
             ) }),
-            /* @__PURE__ */ s(oe, { align: "end", children: /* @__PURE__ */ s(
-              ce,
+            /* @__PURE__ */ s(ue, { align: "end", children: /* @__PURE__ */ s(
+              he,
               {
-                "aria-label": V,
-                disabled: w,
-                onClick: () => A(!0),
-                className: p.addonButton,
+                "aria-label": m,
+                disabled: v,
+                onClick: () => O(!0),
+                className: l.addonButton,
                 size: "icon-sm",
                 variant: "tertiary",
-                children: ne
+                children: se
               }
             ) })
           ] }),
           /* @__PURE__ */ s(
-            he,
+            ye,
             {
               align: "start",
-              className: p.popoverContent,
+              className: l.popoverContent,
               flush: !0,
               side: "bottom",
               sideOffset: 4,
-              children: /* @__PURE__ */ k(
+              children: /* @__PURE__ */ I(
                 "div",
                 {
-                  className: p.content,
+                  className: l.content,
                   "data-slot": "daterangepicker-content",
-                  [l]: "daterangepicker-content",
+                  [c]: "daterangepicker-content",
                   children: [
                     /* @__PURE__ */ s(
-                      xe,
+                      Re,
                       {
-                        currentTimeInTimezone: U,
-                        disablePast: v,
+                        currentTimeInTimezone: f,
+                        disablePast: P,
                         locale: e,
-                        nextMonthLabel: j,
-                        onChange: ee,
-                        onRangeComplete: G,
-                        previousMonthLabel: u,
-                        showWeekNumbers: W,
-                        value: R
+                        nextMonthLabel: z,
+                        onChange: re,
+                        onRangeComplete: B,
+                        previousMonthLabel: A,
+                        showWeekNumbers: Q,
+                        value: E
                       }
                     ),
-                    Z && Z.length > 0 && /* @__PURE__ */ s(
+                    F && F.length > 0 && /* @__PURE__ */ s(
                       "aside",
                       {
-                        className: p.presets,
+                        className: l.presets,
                         "data-slot": "daterangepicker-presets",
-                        [l]: "daterangepicker-presets",
-                        children: Z.map((r) => /* @__PURE__ */ ae(
-                          le,
+                        [c]: "daterangepicker-presets",
+                        children: F.map((r) => /* @__PURE__ */ oe(
+                          me,
                           {
-                            className: p.presetPill,
+                            className: l.presetPill,
                             "data-slot": "daterangepicker-preset",
-                            [l]: "daterangepicker-preset",
+                            [c]: "daterangepicker-preset",
                             key: r.label,
                             onClick: () => {
-                              const g = r.getValue();
-                              G(g);
+                              const u = r.getValue();
+                              B(u);
                             },
                             variant: "surface"
                           },
@@ -383,13 +402,13 @@ const we = (x) => /* @__PURE__ */ s(
             }
           )
         ] }),
-        q && /* @__PURE__ */ s(pe, { children: q })
+        b && /* @__PURE__ */ s(ge, { children: b })
       ]
     }
   );
 });
 export {
-  Oe as DateRangePicker,
-  xe as RangeCalendar
+  Be as DateRangePicker,
+  Re as RangeCalendar
 };
 //# sourceMappingURL=date-range-picker.js.map