meticulous-ui 3.6.1 → 3.6.3

package/components/Button/Button.js

@@ -1,65 +1,86 @@
-import { jsxs as D, jsx as o } from "react/jsx-runtime";
-import { useRef as v } from "react";
-import L from "../Spinner/Spinner.js";
-import I from "../../colors/colorMap.js";
-import { blue as f } from "../../colors/blue.js";
-import { ButtonWrapper as K, SpinnerWrapper as R, Content as B, ButtonContainer as E } from "./styles.js";
-import S from "../Ripple/Ripple.js";
-import j from "../../colors/white.js";
-import k from "../../colors/grey.js";
-import { MEDIUM as z, SIZE as M } from "./constants.js";
-const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m100, children: i }), T = (t) => {
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import { useRef as L } from "react";
+import v from "../Spinner/Spinner.js";
+import T from "../../colors/colorMap.js";
+import { blue as g } from "../../colors/blue.js";
+import { ButtonWrapper as K, SpinnerWrapper as R, Content as z, ButtonContainer as B } from "./styles.js";
+import E from "../Ripple/Ripple.js";
+import P from "../../colors/white.js";
+import S from "../../colors/grey.js";
+import { MEDIUM as j, SIZE as k } from "./constants.js";
+import o from "../../_virtual/index.js";
+const M = ({ theme: t, children: n }) => /* @__PURE__ */ e(E, { rippleColor: t.m100, children: n }), W = (t) => {
   const {
-    children: i,
-    theme: n = f,
-    size: u = z,
-    width: l,
-    leftIcon: W,
+    children: n,
+    theme: l = g,
+    size: u = j,
+    width: s,
+    leftIcon: O,
     rightIcon: U,
-    isLoading: e,
-    textColor: s,
+    isLoading: r,
+    textColor: d,
     onKeyDown: w,
-    ...C
-  } = t || {}, d = v(0), $ = (r) => {
-    if (r.key === "Enter" || r.key === " ") {
-      const h = Date.now();
-      if (h - d.current < 500) {
-        r.preventDefault(), r.stopPropagation();
+    ...y
+  } = t || {}, m = L(0), C = (i) => {
+    if (i.key === "Enter" || i.key === " ") {
+      const f = Date.now();
+      if (f - m.current < 500) {
+        i.preventDefault(), i.stopPropagation();
         return;
       }
-      d.current = h;
+      m.current = f;
     }
-    w?.(r);
-  }, { m400: g, m500: y, m600: b } = I[n] ?? f, { height: m, width: c, font: x } = M[u] || {}, a = ["white", "yellow"].includes(n) ? k.m600 : j, p = /* @__PURE__ */ D(
+    w?.(i);
+  }, { m400: $, m500: b, m600: x } = T[l] ?? g, { height: p, width: c, font: D } = k[u] || {}, h = ["white", "yellow"].includes(l) ? S.m600 : P, a = /* @__PURE__ */ I(
     K,
     {
       type: "button",
-      ...C,
-      onKeyDown: $,
-      $hoverColor: y,
-      $activeColor: b,
-      $selectedColor: g,
-      $height: m,
-      $width: l || c,
+      ...y,
+      onKeyDown: C,
+      $hoverColor: b,
+      $activeColor: x,
+      $selectedColor: $,
+      $height: p,
+      $width: s || c,
       disabled: t.disabled,
-      $isLoading: e,
+      $isLoading: r,
       children: [
-        /* @__PURE__ */ o(R, { $isLoading: e, children: /* @__PURE__ */ o(L, { size: "small", color: s || a }) }),
-        /* @__PURE__ */ o(B, { $isLoading: e, $textColor: s || a, $font: x, children: i })
+        /* @__PURE__ */ e(R, { $isLoading: r, children: /* @__PURE__ */ e(v, { size: "small", color: d || h }) }),
+        /* @__PURE__ */ e(z, { $isLoading: r, $textColor: d || h, $font: D, children: n })
       ]
     }
   );
-  return /* @__PURE__ */ o(
-    E,
+  return /* @__PURE__ */ e(
+    B,
     {
-      $height: m,
-      $width: l || c,
+      $height: p,
+      $width: s || c,
       disabled: t.disabled,
-      $isLoading: e,
-      children: e ? p : /* @__PURE__ */ o(P, { theme: n, children: p })
+      $isLoading: r,
+      children: r ? a : /* @__PURE__ */ e(M, { theme: l, children: a })
     }
   );
 };
+W.propTypes = {
+  /** Button label or content */
+  children: o.node,
+  /** Color theme key from the meticulous-ui color map. Defaults to `'blue'` */
+  theme: o.string,
+  /** Button size variant: `'small'`, `'medium'`, `'large'`, or `'ex-large'` */
+  size: o.string,
+  /** Override the button width */
+  width: o.oneOfType([o.string, o.number]),
+  /** Icon component rendered to the left of the label */
+  leftIcon: o.elementType,
+  /** Icon component rendered to the right of the label */
+  rightIcon: o.elementType,
+  /** Shows a spinner and disables interaction while true */
+  isLoading: o.bool,
+  /** Override the label and icon color */
+  textColor: o.string,
+  /** Disables the button */
+  disabled: o.bool
+};
 export {
-  T as default
+  W as default
 };

package/components/DatePicker/DatePicker.js

@@ -1,11 +1,12 @@
-import { jsxs as c, jsx as n, Fragment as ve } from "react/jsx-runtime";
-import { useMemo as Ce, useState as a, useCallback as Le } from "react";
-import ye from "../../colors/colorMap.js";
-import { blue as De } from "../../colors/blue.js";
-import { MODE as l, MONTHS as Q, DAYS_SHORT as Ge } from "./constants.js";
-import { buildCalendarGrid as Me, formatDate as H, isToday as $e, isSameDay as U, isRangeStart as Ye, isRangeEnd as be, isInRange as we } from "./utils.js";
-import { Wrapper as Ie, SelectedDisplay as Pe, DateChip as x, RangeArrow as Te, ModeToggle as _e, ModeBtn as X, Nav as He, NavBtn as Z, MonthLabel as ee, Footer as xe, ActionBtn as ne, Grid as Oe, DayHeader as Be, DayCell as je, DayBtn as Fe, PickerGrid as We, PickerItem as re, YearScroll as Ve } from "./styles.js";
-const qe = () => /* @__PURE__ */ n(
+import { jsxs as s, jsx as n, Fragment as ye } from "react/jsx-runtime";
+import { useMemo as Ce, useState as d, useCallback as Le, useEffect as Ge } from "react";
+import c from "../../_virtual/index.js";
+import Me from "../../colors/colorMap.js";
+import { blue as $e } from "../../colors/blue.js";
+import { MODE as t, MONTHS as U, DAYS_SHORT as be } from "./constants.js";
+import { buildCalendarGrid as we, formatDate as H, isToday as Te, isSameDay as X, isRangeStart as Ye, isRangeEnd as Oe, isInRange as Ie } from "./utils.js";
+import { Wrapper as Pe, SelectedDisplay as _e, DateChip as B, RangeArrow as xe, ModeToggle as He, ModeBtn as Z, Nav as Be, NavBtn as ee, MonthLabel as ne, Footer as je, ActionBtn as re, Grid as Fe, DayHeader as We, DayCell as Ve, DayBtn as qe, PickerGrid as ze, PickerItem as te, YearScroll as Je } from "./styles.js";
+const Ke = () => /* @__PURE__ */ n(
   "svg",
   {
     width: "16",
@@ -18,7 +19,7 @@ const qe = () => /* @__PURE__ */ n(
     strokeLinejoin: "round",
     children: /* @__PURE__ */ n("polyline", { points: "15 18 9 12 15 6" })
   }
-), ze = () => /* @__PURE__ */ n(
+), Qe = () => /* @__PURE__ */ n(
   "svg",
   {
     width: "16",
@@ -31,193 +32,218 @@ const qe = () => /* @__PURE__ */ n(
     strokeLinejoin: "round",
     children: /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" })
   }
-), i = { CALENDAR: "calendar", MONTH: "month", YEAR: "year" }, Je = /* @__PURE__ */ new Date(), le = 1924, Ke = Je.getFullYear() + 20, Qe = Array.from(
-  { length: Ke - le + 1 },
-  (L, y) => le + y
-), tn = ({
+), o = { CALENDAR: "calendar", MONTH: "month", YEAR: "year" }, Ue = /* @__PURE__ */ new Date(), le = 1924, Xe = Ue.getFullYear() + 20, Ze = Array.from(
+  { length: Xe - le + 1 },
+  (L, f) => le + f
+), en = ({
   theme: L = "blue",
-  mode: y = l.SINGLE,
-  value: te,
-  rangeValue: O,
-  onChange: E,
-  minDate: D,
-  maxDate: G,
+  mode: f = t.SINGLE,
+  value: oe,
+  rangeValue: j,
+  onChange: m,
+  minDate: G,
+  maxDate: M,
   showModeToggle: ie = !0,
-  showFooter: M = !0
+  showFooter: $ = !0,
+  ...se
 }) => {
-  const $ = Ce(() => ye[L] ?? De, [L]), o = $.m500, Y = $.m700, f = $.m100, b = { $primary: o, $primaryDark: Y, $primaryLight: f }, B = /* @__PURE__ */ new Date(), [t, oe] = a(y), [w, I] = a(B.getFullYear()), [A, R] = a(B.getMonth()), [u, m] = a(i.CALENDAR), [N, P] = a(te ?? null), [r, T] = a(O?.[0] ?? null), [d, g] = a(O?.[1] ?? null), [S, k] = a(null), [v, C] = a(!1), ce = Me(w, A), j = Le(
-    (e) => !!(!e || D && e < D || G && e > G),
-    [D, G]
-  ), se = () => {
-    A === 0 ? (R(11), I((e) => e - 1)) : R((e) => e - 1);
-  }, ae = () => {
-    A === 11 ? (R(0), I((e) => e + 1)) : R((e) => e + 1);
-  }, de = (e) => {
-    if (!(!e || j(e))) {
-      if (t === l.SINGLE) {
-        P(e), M || E?.(e);
+  const b = Ce(() => Me[L] ?? $e, [L]), i = b.m500, w = b.m700, N = b.m100, T = { $primary: i, $primaryDark: w, $primaryLight: N }, F = /* @__PURE__ */ new Date(), [l, ce] = d(f), [Y, O] = d(F.getFullYear()), [g, A] = d(F.getMonth()), [p, S] = d(o.CALENDAR), [R, I] = d(oe ?? null), [r, P] = d(j?.[0] ?? null), [h, k] = d(j?.[1] ?? null), [D, v] = d(null), [y, C] = d(!1), ae = we(Y, g), W = Le(
+    (e) => !!(!e || G && e < G || M && e > M),
+    [G, M]
+  ), de = () => {
+    g === 0 ? (A(11), O((e) => e - 1)) : A((e) => e - 1);
+  }, he = () => {
+    g === 11 ? (A(0), O((e) => e + 1)) : A((e) => e + 1);
+  }, ue = (e) => {
+    if (!(!e || W(e))) {
+      if (l === t.SINGLE) {
+        I(e), $ || m?.(e);
         return;
       }
-      !v || !r ? (T(e), g(null), C(!0)) : (g(e), C(!1), M || E?.([
+      !y || !r ? (P(e), k(null), C(!0)) : (k(e), C(!1), $ || m?.([
         e <= r ? e : r,
         e <= r ? r : e
       ]));
     }
-  }, F = (e) => {
-    oe(e), P(null), T(null), g(null), C(!1), k(null);
-  }, he = () => {
-    if (t === l.SINGLE)
-      E?.(N);
-    else if (r && d) {
-      const [e, p] = r <= d ? [r, d] : [d, r];
-      E?.([e, p]);
+  }, _ = (e) => {
+    ce(e), I(null), P(null), k(null), C(!1), v(null);
+  };
+  Ge(() => {
+    _(f);
+  }, [f]);
+  const pe = () => {
+    if (l === t.SINGLE)
+      m?.(R);
+    else if (r && h) {
+      const [e, E] = r <= h ? [r, h] : [h, r];
+      m?.([e, E]);
     }
-  }, ue = () => {
-    P(null), T(null), g(null), C(!1), k(null), E?.(t === l.SINGLE ? null : [null, null]);
-  }, h = v && S ? S : d, W = (e) => t === l.RANGE && Ye(e, r, h), V = (e) => t === l.RANGE && be(e, r, h), pe = (e) => t === l.RANGE && we(e, r, h), Ee = (e) => t === l.SINGLE ? U(e, N) : W(e) || V(e), q = t === l.SINGLE ? H(N) : H(
-    r ? r <= (h ?? r) ? r : h : null
-  ), Ae = t === l.RANGE ? H(h ? h >= r ? h : r : null) : null, Re = t === l.SINGLE ? !N : !r || !d, Ne = () => /* @__PURE__ */ n(We, { children: Q.map((e, p) => /* @__PURE__ */ n(
-    re,
+  }, Ee = () => {
+    I(null), P(null), k(null), C(!1), v(null), m?.(l === t.SINGLE ? null : [null, null]);
+  }, u = y && D ? D : h, V = (e) => l === t.RANGE && Ye(e, r, u), q = (e) => l === t.RANGE && Oe(e, r, u), fe = (e) => l === t.RANGE && Ie(e, r, u), me = (e) => l === t.SINGLE ? X(e, R) : V(e) || q(e), z = l === t.SINGLE ? H(R) : H(
+    r ? r <= (u ?? r) ? r : u : null
+  ), ge = l === t.RANGE ? H(u ? u >= r ? u : r : null) : null, Ae = l === t.SINGLE ? !R : !r || !h, Re = () => /* @__PURE__ */ n(ze, { children: U.map((e, E) => /* @__PURE__ */ n(
+    te,
     {
-      $active: p === A,
-      ...b,
+      $active: E === g,
+      ...T,
       onClick: () => {
-        R(p), m(i.CALENDAR);
+        A(E), S(o.CALENDAR);
       },
       children: e.slice(0, 3)
     },
     e
-  )) }), fe = () => /* @__PURE__ */ n(Ve, { children: Qe.map((e) => /* @__PURE__ */ n(
-    re,
+  )) }), Ne = () => /* @__PURE__ */ n(Je, { children: Ze.map((e) => /* @__PURE__ */ n(
+    te,
     {
-      $active: e === w,
-      ...b,
+      $active: e === Y,
+      ...T,
       onClick: () => {
-        I(e), m(i.CALENDAR);
+        O(e), S(o.CALENDAR);
       },
       children: e
     },
     e
-  )) }), me = () => /* @__PURE__ */ c(Oe, { children: [
-    Ge.map((e) => /* @__PURE__ */ n(Be, { children: e }, e)),
-    ce.map((e, p) => {
-      const s = !e, z = j(e), _ = !s && Ee(e), ge = !s && $e(e), J = !s && W(e), K = !s && V(e), Se = !s && pe(e), ke = !s && S && U(e, S);
+  )) }), Se = () => /* @__PURE__ */ s(Fe, { children: [
+    be.map((e) => /* @__PURE__ */ n(We, { children: e }, e)),
+    ae.map((e, E) => {
+      const a = !e, J = W(e), x = !a && me(e), ke = !a && Te(e), K = !a && V(e), Q = !a && q(e), De = !a && fe(e), ve = !a && D && X(e, D);
       return /* @__PURE__ */ n(
-        je,
+        Ve,
         {
-          $inRange: Se || J || K,
-          $rangeStart: J,
-          $rangeEnd: K,
-          $primaryLight: f,
+          $inRange: De || K || Q,
+          $rangeStart: K,
+          $rangeEnd: Q,
+          $primaryLight: N,
           children: /* @__PURE__ */ n(
-            Fe,
+            qe,
             {
-              $empty: s,
-              $selected: _,
-              $today: ge,
-              $hovered: ke && !_,
-              disabled: z,
-              ...b,
-              onClick: () => de(e),
-              onMouseEnter: () => !s && k(e),
-              onMouseLeave: () => k(null),
+              $empty: a,
+              $selected: x,
+              $today: ke,
+              $hovered: ve && !x,
+              disabled: J,
+              ...T,
+              onClick: () => ue(e),
+              onMouseEnter: () => !a && v(e),
+              onMouseLeave: () => v(null),
               "aria-label": e ? e.toDateString() : void 0,
-              "aria-pressed": _,
-              tabIndex: s || z ? -1 : 0,
+              "aria-pressed": x,
+              tabIndex: a || J ? -1 : 0,
               children: e?.getDate()
             }
           )
         },
-        p
+        E
       );
     })
   ] });
-  return /* @__PURE__ */ c(Ie, { children: [
-    /* @__PURE__ */ n(Pe, { children: t === l.RANGE ? /* @__PURE__ */ c(ve, { children: [
-      /* @__PURE__ */ c(x, { $active: v || !r && !d, $primary: o, children: [
+  return /* @__PURE__ */ s(Pe, { ...se, children: [
+    /* @__PURE__ */ n(_e, { children: l === t.RANGE ? /* @__PURE__ */ s(ye, { children: [
+      /* @__PURE__ */ s(B, { $active: y || !r && !h, $primary: i, children: [
         /* @__PURE__ */ n("span", { children: "From" }),
-        q
+        z
       ] }),
-      /* @__PURE__ */ n(Te, { children: "→" }),
-      /* @__PURE__ */ c(x, { $active: !v && !!d, $primary: o, children: [
+      /* @__PURE__ */ n(xe, { children: "→" }),
+      /* @__PURE__ */ s(B, { $active: !y && !!h, $primary: i, children: [
         /* @__PURE__ */ n("span", { children: "To" }),
-        Ae
+        ge
       ] })
-    ] }) : /* @__PURE__ */ c(x, { $active: !!N, $primary: o, style: { flex: "none", width: "100%" }, children: [
+    ] }) : /* @__PURE__ */ s(B, { $active: !!R, $primary: i, style: { flex: "none", width: "100%" }, children: [
       /* @__PURE__ */ n("span", { children: "Selected" }),
-      q
+      z
     ] }) }),
-    ie && /* @__PURE__ */ c(_e, { children: [
+    ie && /* @__PURE__ */ s(He, { children: [
       /* @__PURE__ */ n(
-        X,
+        Z,
         {
-          $active: t === l.SINGLE,
-          $primary: o,
-          onClick: () => F(l.SINGLE),
+          $active: l === t.SINGLE,
+          $primary: i,
+          onClick: () => _(t.SINGLE),
           children: "Single"
         }
       ),
       /* @__PURE__ */ n(
-        X,
+        Z,
         {
-          $active: t === l.RANGE,
-          $primary: o,
-          onClick: () => F(l.RANGE),
+          $active: l === t.RANGE,
+          $primary: i,
+          onClick: () => _(t.RANGE),
           children: "Range"
         }
       )
     ] }),
-    /* @__PURE__ */ c(He, { children: [
-      /* @__PURE__ */ n(Z, { $primary: o, onClick: se, "aria-label": "Previous month", children: /* @__PURE__ */ n(qe, {}) }),
-      /* @__PURE__ */ c("div", { style: { display: "flex", gap: 4 }, children: [
+    /* @__PURE__ */ s(Be, { children: [
+      /* @__PURE__ */ n(ee, { $primary: i, onClick: de, "aria-label": "Previous month", children: /* @__PURE__ */ n(Ke, {}) }),
+      /* @__PURE__ */ s("div", { style: { display: "flex", gap: 4 }, children: [
         /* @__PURE__ */ n(
-          ee,
+          ne,
           {
-            $primary: o,
-            onClick: () => m(u === i.MONTH ? i.CALENDAR : i.MONTH),
-            children: Q[A]
+            $primary: i,
+            onClick: () => S(p === o.MONTH ? o.CALENDAR : o.MONTH),
+            children: U[g]
           }
         ),
         /* @__PURE__ */ n(
-          ee,
+          ne,
           {
-            $primary: o,
-            onClick: () => m(u === i.YEAR ? i.CALENDAR : i.YEAR),
-            children: w
+            $primary: i,
+            onClick: () => S(p === o.YEAR ? o.CALENDAR : o.YEAR),
+            children: Y
           }
         )
       ] }),
-      /* @__PURE__ */ n(Z, { $primary: o, onClick: ae, "aria-label": "Next month", children: /* @__PURE__ */ n(ze, {}) })
+      /* @__PURE__ */ n(ee, { $primary: i, onClick: he, "aria-label": "Next month", children: /* @__PURE__ */ n(Qe, {}) })
     ] }),
-    u === i.CALENDAR && me(),
-    u === i.MONTH && Ne(),
-    u === i.YEAR && fe(),
-    M && u === i.CALENDAR && /* @__PURE__ */ c(xe, { children: [
+    p === o.CALENDAR && Se(),
+    p === o.MONTH && Re(),
+    p === o.YEAR && Ne(),
+    $ && p === o.CALENDAR && /* @__PURE__ */ s(je, { children: [
       /* @__PURE__ */ n(
-        ne,
+        re,
         {
-          $primary: o,
-          $primaryDark: Y,
-          $primaryLight: f,
-          onClick: ue,
+          $primary: i,
+          $primaryDark: w,
+          $primaryLight: N,
+          onClick: Ee,
           children: "Clear"
         }
       ),
       /* @__PURE__ */ n(
-        ne,
+        re,
         {
           $isPrimary: !0,
-          $primary: o,
-          $primaryDark: Y,
-          $primaryLight: f,
-          disabled: Re,
-          onClick: he,
+          $primary: i,
+          $primaryDark: w,
+          $primaryLight: N,
+          disabled: Ae,
+          onClick: pe,
           children: "Apply"
         }
       )
     ] })
   ] });
 };
+en.propTypes = {
+  /** Color theme key from the meticulous-ui color map */
+  theme: c.string,
+  /** Initial selection mode. Can be switched via the built-in toggle unless `showModeToggle` is false. */
+  mode: c.oneOf(["single", "range"]),
+  /** Controlled selected date for single mode */
+  value: c.instanceOf(Date),
+  /** Controlled selected range for range mode — `[start, end]` */
+  rangeValue: c.arrayOf(c.instanceOf(Date)),
+  /** Called with a `Date` in single mode or `[Date, Date]` tuple in range mode */
+  onChange: c.func,
+  /** Dates before this value are disabled */
+  minDate: c.instanceOf(Date),
+  /** Dates after this value are disabled */
+  maxDate: c.instanceOf(Date),
+  /** Shows or hides the Single / Range mode toggle pill */
+  showModeToggle: c.bool,
+  /** Shows or hides the Clear / Apply footer. When false, `onChange` fires immediately on each click. */
+  showFooter: c.bool
+};
 export {
-  tn as default
+  en as default
 };