meticulous-ui 3.6.0 → 3.6.2

package/components/Dropdown/Dropdown.js

@@ -1,131 +1,132 @@
-import { jsxs as C, jsx as a } from "react/jsx-runtime";
-import { useState as $, useId as ie, useRef as v, useMemo as le, useEffect as h, useLayoutEffect as ae, useCallback as ue, createElement as de } from "react";
+import { jsxs as v, jsx as d } from "react/jsx-runtime";
+import { useState as S, useId as le, useRef as O, useMemo as ae, useEffect as b, useLayoutEffect as de, useCallback as ue, createElement as pe } from "react";
+import r from "../../_virtual/index.js";
 import E from "../../colors/grey.js";
 import fe from "../MenuItem/MenuItem.js";
-import pe from "../../colors/colorMap.js";
-import { blue as me } from "../../colors/blue.js";
+import me from "../../colors/colorMap.js";
+import { blue as he } from "../../colors/blue.js";
 import j from "../Spinner/Spinner.js";
-import { DropdownWrapper as he, Box as be, PWrapper as we, ChevronDownWrapper as xe, OptionWrapper as ge, SearchContainer as Ie, SearchIcon as ke, SearchInput as Se, OptionsList as Ce, LoadMoreSentinel as $e, SpinnerWrapper as ve } from "./styles.js";
-const ye = (n) => {
-  if (typeof n != "string") return n;
-  if (n.endsWith("px")) return parseFloat(n);
-  if (n.endsWith("rem")) {
-    const O = parseFloat(n), s = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return O * s;
+import { DropdownWrapper as be, Box as ge, PWrapper as we, ChevronDownWrapper as xe, OptionWrapper as Ie, SearchContainer as ye, SearchIcon as Ce, SearchInput as ke, OptionsList as ve, LoadMoreSentinel as Se, SpinnerWrapper as Oe } from "./styles.js";
+const $e = (o) => {
+  if (typeof o != "string") return o;
+  if (o.endsWith("px")) return parseFloat(o);
+  if (o.endsWith("rem")) {
+    const D = parseFloat(o), i = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return D * i;
   }
-  return parseFloat(n);
-}, Pe = ({
-  options: n,
-  onChange: O,
-  value: s,
-  width: b = "32rem",
+  return parseFloat(o);
+}, Ee = ({
+  options: o,
+  onChange: D,
+  value: i,
+  width: g = "32rem",
   menuHeight: F = "32rem",
   placeholder: K,
   theme: Q = "blue",
   isLoading: w,
   isDisabled: x,
-  loaderColor: z,
-  searchable: g = !1,
+  loaderColor: R,
+  searchable: I = !1,
   onLoadMore: u,
-  hasMore: I = !1,
-  isLoadingMore: d = !1,
-  searchPh: R = "Search...",
+  hasMore: y = !1,
+  isLoadingMore: p = !1,
+  searchPh: W = "Search...",
   ...U
 }) => {
-  const [r, f] = $(!1), [q, W] = $(!1), [N, T] = $("bottom"), [k, A] = $(""), [c, p] = $(-1), y = ie(), m = v(null), S = v(null), D = v(null), B = v(null), G = v(!0), J = () => !w && !x && f((e) => !e), P = (e) => {
-    e !== s && (O(e), f(!1));
-  }, i = le(() => {
-    if (!g || !k.trim()) return n;
-    const e = k.toLowerCase();
-    return n.filter(({ label: t }) => t.toLowerCase().includes(e));
-  }, [n, k, g]);
-  h(() => {
-    if (r) {
-      const e = i.findIndex((t) => t.value === s);
-      if (e !== -1 && !i[e].disabled)
-        p(e);
+  const [n, f] = S(!1), [q, P] = S(!1), [N, G] = S("bottom"), [C, A] = S(""), [c, m] = S(-1), $ = le(), h = O(null), k = O(null), z = O(null), B = O(null), J = O(!0), X = () => !w && !x && f((e) => !e), H = (e) => {
+    e !== i && (D(e), f(!1));
+  }, l = ae(() => {
+    if (!I || !C.trim()) return o;
+    const e = C.toLowerCase();
+    return o.filter(({ label: t }) => t.toLowerCase().includes(e));
+  }, [o, C, I]);
+  b(() => {
+    if (n) {
+      const e = l.findIndex((t) => t.value === i);
+      if (e !== -1 && !l[e].disabled)
+        m(e);
       else {
-        const t = i.findIndex((o) => !o.disabled);
-        p(t);
+        const t = l.findIndex((s) => !s.disabled);
+        m(t);
       }
     } else
-      A(""), p(-1);
-  }, [r, k, i, s]), h(() => {
-    if (r && c !== -1 && S.current) {
-      const e = S.current.children[c];
+      A(""), m(-1);
+  }, [n, C, l, i]), b(() => {
+    if (n && c !== -1 && k.current) {
+      const e = k.current.children[c];
       e && e.scrollIntoView({
         block: "nearest",
         behavior: "auto"
       });
     }
-  }, [c, r]), h(() => {
-    r && g && D.current && D.current.focus();
-  }, [r, g]), h(() => {
-    r || (G.current = !0);
-  }, [r]), h(() => {
+  }, [c, n]), b(() => {
+    n && I && z.current && z.current.focus();
+  }, [n, I]), b(() => {
+    n || (J.current = !0);
+  }, [n]), b(() => {
     const e = (t) => {
-      m.current && !m.current.contains(t.target) && f(!1);
+      h.current && !h.current.contains(t.target) && f(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ae(() => {
-    if (r && S.current && m.current) {
-      const e = m.current.getBoundingClientRect(), t = window.innerHeight, o = ye(F), l = t - e.bottom;
-      T(
-        l < o + 8 && e.top > l ? "top" : "bottom"
+  }, []), de(() => {
+    if (n && k.current && h.current) {
+      const e = h.current.getBoundingClientRect(), t = window.innerHeight, s = $e(F), a = t - e.bottom;
+      G(
+        a < s + 8 && e.top > a ? "top" : "bottom"
       );
     }
-  }, [r, F]);
-  const X = (e) => {
+  }, [n, F]);
+  const Y = (e) => {
     let t = e + 1;
-    for (; t < i.length; ) {
-      if (!i[t].disabled) return t;
+    for (; t < l.length; ) {
+      if (!l[t].disabled) return t;
       t++;
     }
     return e;
-  }, Y = (e) => {
+  }, Z = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
-      if (!i[t].disabled) return t;
+      if (!l[t].disabled) return t;
       t--;
     }
     return e;
-  }, Z = (e) => {
+  }, _ = (e) => {
     if (!(w || x)) {
-      if (!r) {
+      if (!n) {
         (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), f(!0));
         return;
       }
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = X(c);
-          t === c && I && !d && u?.(), p(t);
+          const t = Y(c);
+          t === c && y && !p && u?.(), m(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((l) => Y(l));
+          e.preventDefault(), m((a) => Z(a));
           break;
         case "Enter":
           e.preventDefault();
-          const o = i[c];
-          o && !o.disabled && P(o.value);
+          const s = l[c];
+          s && !s.disabled && H(s.value);
           break;
         case "Escape":
           f(!1);
           break;
       }
     }
-  }, H = ue(() => {
-    I && !d && u && u();
-  }, [I, d, u]);
-  h(() => {
+  }, T = ue(() => {
+    y && !p && u && u();
+  }, [y, p, u]);
+  b(() => {
     const e = B.current;
-    if (!e || !u || !I) return;
+    if (!e || !u || !y) return;
     const t = new IntersectionObserver(
-      ([o]) => {
-        o.isIntersecting && !d && H();
+      ([s]) => {
+        s.isIntersecting && !p && T();
       },
       {
-        root: S.current,
+        root: k.current,
         // Observe relative to the scrollable container
         threshold: 0.1,
         rootMargin: "20px"
@@ -133,100 +134,138 @@ const ye = (n) => {
       }
     );
     return t.observe(e), () => t.disconnect();
-  }, [H, u, I, d]);
+  }, [T, u, y, p]);
   const {
-    m50: _,
-    m100: L,
-    m200: M,
-    m500: ee
-  } = pe[Q] ?? me, te = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, re = ({ value: e, label: t, disabled: o }, l) => /* @__PURE__ */ de(
+    m50: L,
+    m100: M,
+    m200: ee,
+    m500: te
+  } = me[Q] ?? he, re = (e, t) => () => !e && m(t), V = (e) => `${$}-opt-${e}`, ne = ({ value: e, label: t, disabled: s }, a) => /* @__PURE__ */ pe(
     fe,
     {
       value: e,
       label: t,
-      isDisabled: o,
-      onSelect: P,
-      onMouseEnter: te(o, l),
-      isSelected: e === s,
-      isHighlighted: l === c,
+      isDisabled: s,
+      onSelect: H,
+      onMouseEnter: re(s, a),
+      isSelected: e === i,
+      isHighlighted: a === c,
       key: e,
-      id: V(l),
-      width: b,
-      selectedColor: M,
-      hoverColor: _,
-      activeColor: L
+      id: V(a),
+      width: g,
+      selectedColor: ee,
+      hoverColor: L,
+      activeColor: M
     }
-  ), ne = (e) => () => {
-    W(e);
-  }, oe = (e) => {
-    W(!1), m.current?.contains(e.relatedTarget) || f(!1);
+  ), oe = (e) => () => {
+    P(e);
   }, se = (e) => {
+    P(!1), h.current?.contains(e.relatedTarget) || f(!1);
+  }, ie = (e) => {
     A(e.target.value);
   }, ce = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ C(
-    he,
+  return /* @__PURE__ */ v(
+    be,
     {
-      ref: m,
-      $width: b,
+      ref: h,
+      $width: g,
       ...U,
       tabIndex: x || w ? -1 : 0,
-      onKeyDown: Z,
+      onKeyDown: _,
       $isLoading: w,
       $isDisabled: x,
       role: "combobox",
-      "aria-expanded": r,
+      "aria-expanded": n,
       "aria-haspopup": "listbox",
-      "aria-controls": y,
+      "aria-controls": $,
       "aria-disabled": x || void 0,
       "aria-activedescendant": c !== -1 ? V(c) : void 0,
-      onFocus: ne(!0),
-      onBlur: oe,
+      onFocus: oe(!0),
+      onBlur: se,
       children: [
-        /* @__PURE__ */ C(
-          be,
+        /* @__PURE__ */ v(
+          ge,
           {
-            $width: b,
-            onClick: J,
-            $isOpen: r,
-            $border: ee,
-            $isFocused: q && !r,
+            $width: g,
+            onClick: X,
+            $isOpen: n,
+            $border: te,
+            $isFocused: q && !n,
             children: [
-              /* @__PURE__ */ a(we, { $width: b, color: s ? E.m700 : E.m500, size: "1.92rem", children: s ? n.find(({ value: e }) => s === e)?.label : K }),
-              /* @__PURE__ */ a(xe, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ d(we, { $width: g, color: i ? E.m700 : E.m500, size: "1.92rem", children: i ? o.find(({ value: e }) => i === e)?.label : K }),
+              /* @__PURE__ */ d(xe, { color: E.m500, size: 22, $isOpen: n, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ C(ge, { $isOpen: r, $width: b, $height: F, $top: N === "top", children: [
-          g && /* @__PURE__ */ C(Ie, { onClick: ce, children: [
-            /* @__PURE__ */ a(ke, { size: 20, color: E.m600, "aria-hidden": !0 }),
-            /* @__PURE__ */ a(
-              Se,
+        /* @__PURE__ */ v(Ie, { $isOpen: n, $width: g, $height: F, $top: N === "top", children: [
+          I && /* @__PURE__ */ v(ye, { onClick: ce, children: [
+            /* @__PURE__ */ d(Ce, { size: 20, color: E.m600, "aria-hidden": !0 }),
+            /* @__PURE__ */ d(
+              ke,
               {
-                ref: D,
-                value: k,
-                onChange: se,
-                placeholder: R,
-                "aria-label": R,
-                "aria-controls": y,
+                ref: z,
+                value: C,
+                onChange: ie,
+                placeholder: W,
+                "aria-label": W,
+                "aria-controls": $,
                 "aria-autocomplete": "list",
-                "aria-expanded": r,
+                "aria-expanded": n,
                 role: "combobox",
-                tabIndex: r ? 0 : -1
+                tabIndex: n ? 0 : -1
               }
             )
           ] }),
-          /* @__PURE__ */ C(Ce, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
-            i.map(re),
-            u && /* @__PURE__ */ a($e, { ref: B, children: d && /* @__PURE__ */ a(j, { size: "small", color: z }) })
+          /* @__PURE__ */ v(ve, { ref: k, role: "listbox", id: $, tabIndex: -1, children: [
+            l.map(ne),
+            u && /* @__PURE__ */ d(Se, { ref: B, children: p && /* @__PURE__ */ d(j, { size: "small", color: R }) })
           ] })
         ] }),
-        w && /* @__PURE__ */ a(ve, { children: /* @__PURE__ */ a(j, { size: "small", color: z }) })
+        w && /* @__PURE__ */ d(Oe, { children: /* @__PURE__ */ d(j, { size: "small", color: R }) })
       ]
     }
   );
 };
+Ee.propTypes = {
+  /** Array of option objects: `{ value, label, disabled? }` */
+  options: r.arrayOf(
+    r.shape({
+      value: r.any,
+      label: r.string,
+      disabled: r.bool
+    })
+  ),
+  /** Currently selected value (controlled) */
+  value: r.any,
+  /** Called with the selected value when an option is picked */
+  onChange: r.func,
+  /** CSS width of the dropdown trigger. Defaults to `'32rem'` */
+  width: r.string,
+  /** Maximum CSS height of the dropdown menu. Defaults to `'32rem'` */
+  menuHeight: r.string,
+  /** Placeholder text shown when no value is selected */
+  placeholder: r.string,
+  /** Color theme key. Defaults to `'blue'` */
+  theme: r.string,
+  /** Shows a spinner inside the trigger and disables interaction */
+  isLoading: r.bool,
+  /** Disables the dropdown */
+  isDisabled: r.bool,
+  /** Color key for the loading spinner */
+  loaderColor: r.string,
+  /** Adds a search input inside the dropdown menu */
+  searchable: r.bool,
+  /** Placeholder text for the search input. Defaults to `'Search...'` */
+  searchPh: r.string,
+  /** Called when the user scrolls to the bottom of the list (infinite scroll) */
+  onLoadMore: r.func,
+  /** Whether more options are available to load */
+  hasMore: r.bool,
+  /** Shows a spinner at the bottom while loading more options */
+  isLoadingMore: r.bool
+};
 export {
-  Pe as default
+  Ee as default
 };

package/components/Input/Checkbox/Checkbox.js

@@ -1,67 +1,88 @@
-import { jsxs as $, jsx as n } from "react/jsx-runtime";
-import { useState as g, useRef as H } from "react";
-import P from "../../../colors/grey.js";
+import { jsxs as $, jsx as s } from "react/jsx-runtime";
+import { useState as C, useRef as P } from "react";
+import r from "../../../_virtual/index.js";
+import H from "../../../colors/grey.js";
 import j from "../../Typography/P/P.js";
 import z from "../../../colors/white.js";
-import { blue as m } from "../../../colors/blue.js";
-import { Wrapper as B, CbInput as C, Box as E } from "./styles.js";
-import { getColor as F } from "./helpers.js";
-const J = ({
-  label: u,
-  value: r,
-  color: d = "blue",
-  textColor: l = P.m700,
-  disabled: s,
-  onChange: o,
-  tabIndex: p,
-  innerShade: h,
-  outerShade: k,
-  ...y
+import { blue as u } from "../../../colors/blue.js";
+import { Wrapper as B, CbInput as E, Box as F } from "./styles.js";
+import { getColor as I } from "./helpers.js";
+const K = ({
+  label: d,
+  value: o,
+  color: m = "blue",
+  textColor: p = H.m700,
+  disabled: a,
+  onChange: t,
+  tabIndex: h,
+  innerShade: b,
+  outerShade: y,
+  ...g
 }) => {
-  const [S, t] = g(!1), c = F(d), b = h ?? c?.m500 ?? m.m500, x = k ?? c?.m600 ?? m.m600, a = H(0), w = (e) => o(e.target.checked), D = (e) => {
+  const [k, n] = C(!1), c = I(m), S = b ?? c?.m500 ?? u.m500, x = y ?? c?.m600 ?? u.m600, i = P(0), w = (e) => t(e.target.checked), D = (e) => {
     if (e.key === "Enter" || e.key === " ") {
-      const i = Date.now();
-      if (i - a.current < 500) {
+      const f = Date.now();
+      if (f - i.current < 500) {
         e.preventDefault(), e.stopPropagation();
         return;
       }
-      if (a.current = i, e.key === " ") {
-        e.preventDefault(), o(!r);
+      if (i.current = f, e.key === " ") {
+        e.preventDefault(), t(!o);
         return;
       }
-      o(!r), t(!1);
+      t(!o), n(!1);
     }
-    e.key === "Escape" && t(!1);
-  }, f = (e) => () => t(e);
-  return /* @__PURE__ */ $(B, { as: "label", $disabled: s, ...y, children: [
-    /* @__PURE__ */ n(
-      C,
+    e.key === "Escape" && n(!1);
+  }, l = (e) => () => n(e);
+  return /* @__PURE__ */ $(B, { as: "label", $disabled: a, ...g, children: [
+    /* @__PURE__ */ s(
+      E,
       {
         type: "checkbox",
-        checked: r,
+        checked: o,
         onChange: w,
         onKeyDown: D,
-        onFocus: f(!0),
-        onBlur: f(!1),
-        disabled: s,
-        tabIndex: p
+        onFocus: l(!0),
+        onBlur: l(!1),
+        disabled: a,
+        tabIndex: h
       }
     ),
-    /* @__PURE__ */ n(
-      E,
+    /* @__PURE__ */ s(
+      F,
       {
-        $value: r,
-        $focused: S,
+        $value: o,
+        $focused: k,
         size: 6,
         color: z,
-        $innerShade: b,
+        $innerShade: S,
         $outerShade: x,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ n(j, { color: l, size: "1.92rem", children: u })
+    /* @__PURE__ */ s(j, { color: p, size: "1.92rem", children: d })
   ] });
 };
+K.propTypes = {
+  /** Text label rendered next to the checkbox */
+  label: r.string,
+  /** Controlled checked state */
+  value: r.bool,
+  /** Color theme key for the checkbox accent. Defaults to 'blue' */
+  color: r.string,
+  /** Color of the label text */
+  textColor: r.string,
+  /** Disables the checkbox */
+  disabled: r.bool,
+  /** Called with the new boolean value on change */
+  onChange: r.func,
+  /** Tab order index for the checkbox input */
+  tabIndex: r.number,
+  /** Override the inner fill color (checked state) */
+  innerShade: r.string,
+  /** Override the outer border/ring color (checked state) */
+  outerShade: r.string
+};
 export {
-  J as default
+  K as default
 };