meticulous-ui 3.7.12 → 3.7.13

package/components/DatePicker/DatePicker.js

@@ -29,13 +29,8 @@ const Bn = Hn`
   margin-bottom: 16px;
 `, F = i.div`
   flex: 1;
-  background: ${({
-  $active: e,
-  $primary: t
-}) => e ? t : "#f1f3f4"};
-  color: ${({
-  $active: e
-}) => e ? "#fff" : "#5f6368"};
+  background: ${({ $active: e, $primary: t }) => e ? t : "#f1f3f4"};
+  color: ${({ $active: e }) => e ? "#fff" : "#5f6368"};
   border-radius: 12px;
   padding: 10px 14px;
   font-size: 13px;
@@ -66,13 +61,8 @@ const Bn = Hn`
 `, on = i.button`
   flex: 1;
   border: none;
-  background: ${({
-  $active: e
-}) => e ? "#fff" : "transparent"};
-  color: ${({
-  $active: e,
-  $primary: t
-}) => e ? t : "#5f6368"};
+  background: ${({ $active: e }) => e ? "#fff" : "transparent"};
+  color: ${({ $active: e, $primary: t }) => e ? t : "#5f6368"};
   border-radius: 8px;
   padding: 6px 0;
   font-size: 12px;
@@ -81,14 +71,10 @@ const Bn = Hn`
   transition:
     background 0.15s,
     color 0.15s;
-  box-shadow: ${({
-  $active: e
-}) => e ? "0 1px 4px rgba(0,0,0,0.1)" : "none"};
+  box-shadow: ${({ $active: e }) => e ? "0 1px 4px rgba(0,0,0,0.1)" : "none"};
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary: e
-}) => e};
+    outline: 2px solid ${({ $primary: e }) => e};
     outline-offset: 2px;
   }
 `, Jn = i.div`
@@ -113,15 +99,11 @@ const Bn = Hn`
 
   &:hover {
     background: #f1f3f4;
-    color: ${({
-  $primary: e
-}) => e};
+    color: ${({ $primary: e }) => e};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary: e
-}) => e};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
 `, sn = i.button`
   background: none;
@@ -139,9 +121,7 @@ const Bn = Hn`
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary: e
-}) => e};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
 `, Kn = i.div`
   display: grid;
@@ -166,14 +146,8 @@ const Bn = Hn`
     content: '';
     position: absolute;
     inset: 4px 0;
-    background: ${({
-  $inRange: e,
-  $primaryLight: t
-}) => e ? t : "transparent"};
-    border-radius: ${({
-  $rangeStart: e,
-  $rangeEnd: t
-}) => e ? "50% 0 0 50%" : t ? "0 50% 50% 0" : "0"};
+    background: ${({ $inRange: e, $primaryLight: t }) => e ? t : "transparent"};
+    border-radius: ${({ $rangeStart: e, $rangeEnd: t }) => e ? "50% 0 0 50%" : t ? "0 50% 50% 0" : "0"};
     pointer-events: none;
   }
 `, Zn = i.button`
@@ -188,55 +162,26 @@ const Bn = Hn`
   justify-content: center;
   font-size: 13px;
   font-weight: 500;
-  cursor: ${({
-  $empty: e,
-  disabled: t
-}) => e || t ? "default" : "pointer"};
-  background: ${({
-  $selected: e,
-  $hovered: t,
-  $primary: c,
-  $primaryLight: p
-}) => e ? c : t ? p : "transparent"};
-  color: ${({
-  $selected: e,
-  $today: t,
-  disabled: c,
-  $primary: p
-}) => e ? "#fff" : c ? "#dadce0" : t ? p : "#202124"};
-  outline: ${({
-  $today: e,
-  $selected: t,
-  $primary: c
-}) => e && !t ? `2px solid ${c}` : "none"};
+  cursor: ${({ $empty: e, disabled: t }) => e || t ? "default" : "pointer"};
+  background: ${({ $selected: e, $hovered: t, $primary: c, $primaryLight: p }) => e ? c : t ? p : "transparent"};
+  color: ${({ $selected: e, $today: t, disabled: c, $primary: p }) => e ? "#fff" : c ? "#dadce0" : t ? p : "#202124"};
+  outline: ${({ $today: e, $selected: t, $primary: c }) => e && !t ? `2px solid ${c}` : "none"};
   outline-offset: -2px;
   transition:
     background 0.12s,
     color 0.12s;
-  pointer-events: ${({
-  $empty: e,
-  disabled: t
-}) => e || t ? "none" : "auto"};
+  pointer-events: ${({ $empty: e, disabled: t }) => e || t ? "none" : "auto"};
 
-  ${({
-  $empty: e
-}) => e && Cn`
+  ${({ $empty: e }) => e && Cn`
       visibility: hidden;
     `}
 
   &:hover {
-    background: ${({
-  $selected: e,
-  $primary: t,
-  $primaryDark: c,
-  $primaryLight: p
-}) => e ? c : p};
+    background: ${({ $selected: e, $primary: t, $primaryDark: c, $primaryLight: p }) => e ? c : p};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary: e
-}) => e};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
 `, Vn = i.div`
   display: grid;
@@ -245,13 +190,8 @@ const Bn = Hn`
   padding: 4px 0;
 `, ln = i.button`
   border: none;
-  background: ${({
-  $active: e,
-  $primary: t
-}) => e ? t : "transparent"};
-  color: ${({
-  $active: e
-}) => e ? "#fff" : "#202124"};
+  background: ${({ $active: e, $primary: t }) => e ? t : "transparent"};
+  color: ${({ $active: e }) => e ? "#fff" : "#202124"};
   border-radius: 10px;
   padding: 8px 4px;
   font-size: 13px;
@@ -262,16 +202,11 @@ const Bn = Hn`
     color 0.13s;
 
   &:hover {
-    background: ${({
-  $active: e,
-  $primaryDark: t
-}) => e ? t : "#f1f3f4"};
+    background: ${({ $active: e, $primaryDark: t }) => e ? t : "#f1f3f4"};
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary: e
-}) => e};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
 `, ne = i.div`
   display: grid;
@@ -290,14 +225,8 @@ const Bn = Hn`
   border-top: 1px solid #f1f3f4;
 `, cn = i.button`
   border: none;
-  background: ${({
-  $isPrimary: e,
-  $primary: t
-}) => e ? t : "transparent"};
-  color: ${({
-  $isPrimary: e,
-  $primary: t
-}) => e ? "#fff" : t};
+  background: ${({ $isPrimary: e, $primary: t }) => e ? t : "transparent"};
+  color: ${({ $isPrimary: e, $primary: t }) => e ? "#fff" : t};
   border-radius: 8px;
   padding: 7px 16px;
   font-size: 13px;
@@ -308,11 +237,7 @@ const Bn = Hn`
     opacity 0.14s;
 
   &:hover {
-    background: ${({
-  $isPrimary: e,
-  $primaryDark: t,
-  $primaryLight: c
-}) => e ? t : c};
+    background: ${({ $isPrimary: e, $primaryDark: t, $primaryLight: c }) => e ? t : c};
   }
 
   &:disabled {
@@ -321,17 +246,38 @@ const Bn = Hn`
   }
 
   &:focus-visible {
-    outline: 2px solid ${({
-  $primary: e
-}) => e};
+    outline: 2px solid ${({ $primary: e }) => e};
   }
-`, te = () => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ o("polyline", { points: "15 18 9 12 15 6" }) }), oe = () => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" }) }), d = {
-  CALENDAR: "calendar",
-  MONTH: "month",
-  YEAR: "year"
-}, re = /* @__PURE__ */ new Date(), an = 1924, ie = /* @__PURE__ */ re.getFullYear() + 20, se = /* @__PURE__ */ Array.from({
-  length: ie - an + 1
-}, (e, t) => an + t), le = ({
+`, te = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ o("polyline", { points: "15 18 9 12 15 6" })
+  }
+), oe = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" })
+  }
+), d = { CALENDAR: "calendar", MONTH: "month", YEAR: "year" }, re = /* @__PURE__ */ new Date(), an = 1924, ie = re.getFullYear() + 20, se = Array.from(
+  { length: ie - an + 1 },
+  (e, t) => an + t
+), le = ({
   theme: e = "blue",
   mode: t = s.SINGLE,
   value: c,
@@ -347,11 +293,10 @@ const Bn = Hn`
   const I = Ln(() => {
     var n;
     return (n = Yn[e]) != null ? n : In;
-  }, [e]), f = I.m500, T = I.m700, A = I.m100, O = {
-    $primary: f,
-    $primaryDark: T,
-    $primaryLight: A
-  }, W = /* @__PURE__ */ new Date(), [a, fn] = m(t), [P, z] = m(W.getFullYear()), [v, $] = m(W.getMonth()), [y, R] = m(d.CALENDAR), [E, _] = m(c != null ? c : null), [r, j] = m((Q = p == null ? void 0 : p[0]) != null ? Q : null), [h, N] = m((X = p == null ? void 0 : p[1]) != null ? X : null), [S, w] = m(null), [D, L] = m(!1), un = On(P, v), U = Gn((n) => !!(!n || G && n < G || M && n > M), [G, M]), xn = () => {
+  }, [e]), f = I.m500, T = I.m700, A = I.m100, O = { $primary: f, $primaryDark: T, $primaryLight: A }, W = /* @__PURE__ */ new Date(), [a, fn] = m(t), [P, z] = m(W.getFullYear()), [v, $] = m(W.getMonth()), [y, R] = m(d.CALENDAR), [E, _] = m(c != null ? c : null), [r, j] = m((Q = p == null ? void 0 : p[0]) != null ? Q : null), [h, N] = m((X = p == null ? void 0 : p[1]) != null ? X : null), [S, w] = m(null), [D, L] = m(!1), un = On(P, v), U = Gn(
+    (n) => !!(!n || G && n < G || M && n > M),
+    [G, M]
+  ), xn = () => {
     v === 0 ? ($(11), z((n) => n - 1)) : $((n) => n - 1);
   }, gn = () => {
     v === 11 ? ($(0), z((n) => n + 1)) : $((n) => n + 1);
@@ -361,7 +306,10 @@ const Bn = Hn`
         _(n), Y || l == null || l(n);
         return;
       }
-      !D || !r ? (j(n), N(null), L(!0)) : (N(n), L(!1), Y || l == null || l([n <= r ? n : r, n <= r ? r : n]));
+      !D || !r ? (j(n), N(null), L(!0)) : (N(n), L(!1), Y || l == null || l([
+        n <= r ? n : r,
+        n <= r ? r : n
+      ]));
     }
   }, H = (n) => {
     fn(n), _(null), j(null), N(null), L(!1), w(null);
@@ -378,15 +326,62 @@ const Bn = Hn`
     }
   }, hn = () => {
     _(null), j(null), N(null), L(!1), w(null), l == null || l(a === s.SINGLE ? null : [null, null]);
-  }, u = D && S ? S : h, q = (n) => a === s.RANGE && zn(n, r, u), J = (n) => a === s.RANGE && _n(n, r, u), yn = (n) => a === s.RANGE && jn(n, r, u), kn = (n) => a === s.SINGLE ? tn(n, E) : q(n) || J(n), K = a === s.SINGLE ? B(E) : B(r ? r <= (u != null ? u : r) ? r : u : null), vn = a === s.RANGE ? B(u ? u >= r ? u : r : null) : null, $n = a === s.SINGLE ? !E : !r || !h, En = () => /* @__PURE__ */ o(Vn, { children: en.map((n, k) => /* @__PURE__ */ o(ln, { $active: k === v, ...O, onClick: () => {
-    $(k), R(d.CALENDAR);
-  }, children: n.slice(0, 3) }, n)) }), An = () => /* @__PURE__ */ o(ne, { children: se.map((n) => /* @__PURE__ */ o(ln, { $active: n === P, ...O, onClick: () => {
-    z(n), R(d.CALENDAR);
-  }, children: n }, n)) }), Rn = () => /* @__PURE__ */ x(Kn, { children: [
+  }, u = D && S ? S : h, q = (n) => a === s.RANGE && zn(n, r, u), J = (n) => a === s.RANGE && _n(n, r, u), yn = (n) => a === s.RANGE && jn(n, r, u), kn = (n) => a === s.SINGLE ? tn(n, E) : q(n) || J(n), K = a === s.SINGLE ? B(E) : B(
+    r ? r <= (u != null ? u : r) ? r : u : null
+  ), vn = a === s.RANGE ? B(u ? u >= r ? u : r : null) : null, $n = a === s.SINGLE ? !E : !r || !h, En = () => /* @__PURE__ */ o(Vn, { children: en.map((n, k) => /* @__PURE__ */ o(
+    ln,
+    {
+      $active: k === v,
+      ...O,
+      onClick: () => {
+        $(k), R(d.CALENDAR);
+      },
+      children: n.slice(0, 3)
+    },
+    n
+  )) }), An = () => /* @__PURE__ */ o(ne, { children: se.map((n) => /* @__PURE__ */ o(
+    ln,
+    {
+      $active: n === P,
+      ...O,
+      onClick: () => {
+        z(n), R(d.CALENDAR);
+      },
+      children: n
+    },
+    n
+  )) }), Rn = () => /* @__PURE__ */ x(Kn, { children: [
     Tn.map((n) => /* @__PURE__ */ o(Qn, { children: n }, n)),
     un.map((n, k) => {
       const b = !n, Z = U(n), C = !b && kn(n), Nn = !b && Pn(n), V = !b && q(n), nn = !b && J(n), Sn = !b && yn(n), wn = !b && S && tn(n, S);
-      return /* @__PURE__ */ o(Xn, { $inRange: Sn || V || nn, $rangeStart: V, $rangeEnd: nn, $primaryLight: A, children: /* @__PURE__ */ o(Zn, { $empty: b, $selected: C, $today: Nn, $hovered: wn && !C, disabled: Z, ...O, onClick: () => bn(n), onMouseEnter: () => !b && w(n), onMouseLeave: () => w(null), "aria-label": n ? n.toDateString() : void 0, "aria-pressed": C, tabIndex: b || Z ? -1 : 0, children: n == null ? void 0 : n.getDate() }) }, k);
+      return /* @__PURE__ */ o(
+        Xn,
+        {
+          $inRange: Sn || V || nn,
+          $rangeStart: V,
+          $rangeEnd: nn,
+          $primaryLight: A,
+          children: /* @__PURE__ */ o(
+            Zn,
+            {
+              $empty: b,
+              $selected: C,
+              $today: Nn,
+              $hovered: wn && !C,
+              disabled: Z,
+              ...O,
+              onClick: () => bn(n),
+              onMouseEnter: () => !b && w(n),
+              onMouseLeave: () => w(null),
+              "aria-label": n ? n.toDateString() : void 0,
+              "aria-pressed": C,
+              tabIndex: b || Z ? -1 : 0,
+              children: n == null ? void 0 : n.getDate()
+            }
+          )
+        },
+        k
+      );
     })
   ] });
   return /* @__PURE__ */ x(Fn, { ...pn, children: [
@@ -400,25 +395,49 @@ const Bn = Hn`
         /* @__PURE__ */ o("span", { children: "To" }),
         vn
       ] })
-    ] }) : /* @__PURE__ */ x(F, { $active: !!E, $primary: f, style: {
-      flex: "none",
-      width: "100%"
-    }, children: [
+    ] }) : /* @__PURE__ */ x(F, { $active: !!E, $primary: f, style: { flex: "none", width: "100%" }, children: [
       /* @__PURE__ */ o("span", { children: "Selected" }),
       K
     ] }) }),
     dn && /* @__PURE__ */ x(qn, { children: [
-      /* @__PURE__ */ o(on, { $active: a === s.SINGLE, $primary: f, onClick: () => H(s.SINGLE), children: "Single" }),
-      /* @__PURE__ */ o(on, { $active: a === s.RANGE, $primary: f, onClick: () => H(s.RANGE), children: "Range" })
+      /* @__PURE__ */ o(
+        on,
+        {
+          $active: a === s.SINGLE,
+          $primary: f,
+          onClick: () => H(s.SINGLE),
+          children: "Single"
+        }
+      ),
+      /* @__PURE__ */ o(
+        on,
+        {
+          $active: a === s.RANGE,
+          $primary: f,
+          onClick: () => H(s.RANGE),
+          children: "Range"
+        }
+      )
     ] }),
     /* @__PURE__ */ x(Jn, { children: [
       /* @__PURE__ */ o(rn, { $primary: f, onClick: xn, "aria-label": "Previous month", children: /* @__PURE__ */ o(te, {}) }),
-      /* @__PURE__ */ x("div", { style: {
-        display: "flex",
-        gap: 4
-      }, children: [
-        /* @__PURE__ */ o(sn, { $primary: f, onClick: () => R(y === d.MONTH ? d.CALENDAR : d.MONTH), children: en[v] }),
-        /* @__PURE__ */ o(sn, { $primary: f, onClick: () => R(y === d.YEAR ? d.CALENDAR : d.YEAR), children: P })
+      /* @__PURE__ */ x("div", { style: { display: "flex", gap: 4 }, children: [
+        /* @__PURE__ */ o(
+          sn,
+          {
+            $primary: f,
+            onClick: () => R(y === d.MONTH ? d.CALENDAR : d.MONTH),
+            children: en[v]
+          }
+        ),
+        /* @__PURE__ */ o(
+          sn,
+          {
+            $primary: f,
+            onClick: () => R(y === d.YEAR ? d.CALENDAR : d.YEAR),
+            children: P
+          }
+        )
       ] }),
       /* @__PURE__ */ o(rn, { $primary: f, onClick: gn, "aria-label": "Next month", children: /* @__PURE__ */ o(oe, {}) })
     ] }),
@@ -426,8 +445,28 @@ const Bn = Hn`
     y === d.MONTH && En(),
     y === d.YEAR && An(),
     Y && y === d.CALENDAR && /* @__PURE__ */ x(ee, { children: [
-      /* @__PURE__ */ o(cn, { $primary: f, $primaryDark: T, $primaryLight: A, onClick: hn, children: "Clear" }),
-      /* @__PURE__ */ o(cn, { $isPrimary: !0, $primary: f, $primaryDark: T, $primaryLight: A, disabled: $n, onClick: mn, children: "Apply" })
+      /* @__PURE__ */ o(
+        cn,
+        {
+          $primary: f,
+          $primaryDark: T,
+          $primaryLight: A,
+          onClick: hn,
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ o(
+        cn,
+        {
+          $isPrimary: !0,
+          $primary: f,
+          $primaryDark: T,
+          $primaryLight: A,
+          disabled: $n,
+          onClick: mn,
+          children: "Apply"
+        }
+      )
     ] })
   ] });
 };
@@ -435,17 +474,17 @@ le.propTypes = {
   /** Color theme key from the meticulous-ui color map */
   theme: g.string,
   /** Initial selection mode. Can be switched via the built-in toggle unless `showModeToggle` is false. */
-  mode: /* @__PURE__ */ g.oneOf(["single", "range"]),
+  mode: g.oneOf(["single", "range"]),
   /** Controlled selected date for single mode */
-  value: /* @__PURE__ */ g.instanceOf(Date),
+  value: g.instanceOf(Date),
   /** Controlled selected range for range mode — `[start, end]` */
-  rangeValue: /* @__PURE__ */ g.arrayOf(/* @__PURE__ */ g.instanceOf(Date)),
+  rangeValue: g.arrayOf(g.instanceOf(Date)),
   /** Called with a `Date` in single mode or `[Date, Date]` tuple in range mode */
   onChange: g.func,
   /** Dates before this value are disabled */
-  minDate: /* @__PURE__ */ g.instanceOf(Date),
+  minDate: g.instanceOf(Date),
   /** Dates after this value are disabled */
-  maxDate: /* @__PURE__ */ g.instanceOf(Date),
+  maxDate: g.instanceOf(Date),
   /** Shows or hides the Single / Range mode toggle pill */
   showModeToggle: g.bool,
   /** Shows or hides the Clear / Apply footer. When false, `onChange` fires immediately on each click. */

package/components/DatePicker/constants.js

@@ -1,4 +1,17 @@
-const e = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], r = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], u = {
+const e = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], r = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], u = {
   SINGLE: "single",
   RANGE: "range"
 };

package/components/DatePicker/utils.js

@@ -2,11 +2,7 @@ const i = (e, t) => new Date(e, t + 1, 0).getDate(), u = (e, t) => new Date(e, t
   if (!t || !n) return !1;
   const [s, r] = t <= n ? [t, n] : [n, t];
   return e > s && e < r;
-}, l = (e, t, n) => !t || !n ? !1 : a(e, t <= n ? t : n), D = (e, t, n) => !t || !n ? !1 : a(e, t <= n ? n : t), f = (e) => e ? e.toLocaleDateString("en-US", {
-  month: "short",
-  day: "numeric",
-  year: "numeric"
-}) : "—", y = (e, t) => {
+}, l = (e, t, n) => !t || !n ? !1 : a(e, t <= n ? t : n), D = (e, t, n) => !t || !n ? !1 : a(e, t <= n ? n : t), f = (e) => e ? e.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "—", y = (e, t) => {
   const n = i(e, t), s = u(e, t), r = [];
   for (let o = 0; o < s; o++) r.push(null);
   for (let o = 1; o <= n; o++) r.push(new Date(e, t, o));