meticulous-ui 2.5.6 → 2.6.0

package/README.md

@@ -2,47 +2,59 @@
 
 A lightweight, modern React component library, following Semantic HTML & ARIA, designed for elegance and precision ✨
 
+[![npm version](https://img.shields.io/npm/v/meticulous-ui)](https://www.npmjs.com/package/meticulous-ui)
+[![npm downloads](https://img.shields.io/npm/dm/meticulous-ui)](https://www.npmjs.com/package/meticulous-ui)
+[![license](https://img.shields.io/npm/l/meticulous-ui)](https://github.com/xe3110/meticulous-ui/blob/main/LICENSE)
+
 ---
 
 ## 🚀 Demo
 
-<a href="https://meticulous-ui.vercel.app/" target="_blank">meticulous-ui</a>
+[meticulous-ui.vercel.app](https://meticulous-ui.vercel.app/)
 
 ## 🚀 Installation
 
-```
+```bash
 npm install meticulous-ui
+# or
+yarn add meticulous-ui
 ```
 
-# or
+**Peer dependencies** — install these if you haven't already:
 
-```
-yarn add meticulous-ui
+```bash
+npm install react react-dom styled-components
 ```
 
-## 🧩 Usage
+## 🧩 Quick Start
 
 ```jsx
-import { useState } from 'react';
-
-import Pagination from 'meticulous-ui/components/Pagination';
-import ChevronLeft from 'meticulous-ui/components/Icons/ChevronLeft';
+import { Button, Input, Shimmer, Toast } from 'meticulous-ui';
 import blue from 'meticulous-ui/colors/blue';
-import capFirstLetter from 'meticulous-ui/utils/capFirstLetter';
 
 function App() {
-  const [pageNumber, setPageNumber] = useState(1);
-
   return (
-    <div>
-      <h2>{capFirstLetter('example with pagination')}</h2> // returns: Example with pagination
-      <ChevronLeft size={10} color={blue.m400} onClick={setPrevPage} />
-      <Pagination totalPages={10} pageNumber={pageNumber} setPageNumber={setPageNumber} />
-    </div>
+    <>
+      {/* Loading skeleton */}
+      <Shimmer width={200} height={20} />
+
+      {/* Themed button */}
+      <Button theme={blue} onClick={() => console.log('clicked')}>
+        Submit
+      </Button>
+
+      {/* Controlled input */}
+      <Input label='Email' color='blue' value={email} onChange={handleChange} />
+    </>
   );
 }
+```
+
+Or import directly from the component path for the smallest bundle:
 
-export default App;
+```js
+import Button from 'meticulous-ui/components/Button';
+import blue from 'meticulous-ui/colors/blue';
 ```
 
 ## 📦 Components
@@ -65,6 +77,7 @@ export default App;
 | `Loader`       | Renders a loader with dots to show the loading state     |
 | `PageLoader`   | Renders a loader with line at the top of page            |
 | `Button`       | Renders a button to click & take an action               |
+| `Shimmer`      | Animated skeleton loading placeholder                    |
 
 ## 📦 Icon Components
 

package/components/Button/Button.js

@@ -1,38 +1,37 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useRef as x } from "react";
-import D from "lodash-es/get";
-import I from "../Spinner/Spinner.js";
-import R from "../../colors/index.js";
+import D from "../Spinner/Spinner.js";
+import I from "../../colors/index.js";
 import u from "../../colors/blue.js";
-import { ButtonWrapper as B, SpinnerWrapper as E, Content as L, ButtonContainer as S } from "./styles.js";
-import k from "../Ripple/Ripple.js";
-import z from "../../colors/white.js";
-import K from "../../colors/grey.js";
-import { MEDIUM as M, SIZE as P } from "./constants.js";
-const W = ({ theme: t, children: i }) => /* @__PURE__ */ o(k, { rippleColor: t.m100, children: i }), T = (t) => {
+import { ButtonWrapper as R, SpinnerWrapper as B, Content as E, ButtonContainer as L } from "./styles.js";
+import S from "../Ripple/Ripple.js";
+import k from "../../colors/white.js";
+import z from "../../colors/grey.js";
+import { MEDIUM as K, SIZE as M } from "./constants.js";
+const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m100, children: i }), Q = (t) => {
   const {
     children: i,
     theme: n = u,
-    size: C = M,
-    width: m,
-    leftIcon: j,
-    rightIcon: U,
-    isLoading: e,
-    textColor: d,
+    size: C = K,
+    width: d,
+    leftIcon: W,
+    rightIcon: j,
+    isLoading: r,
+    textColor: s,
     onKeyDown: l,
     ...w
-  } = t || {}, s = x(0), $ = (r) => {
-    if (r.key === "Enter" || r.key === " ") {
+  } = t || {}, m = x(0), $ = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
       const f = Date.now();
-      if (f - s.current < 500) {
-        r.preventDefault(), r.stopPropagation();
+      if (f - m.current < 500) {
+        e.preventDefault(), e.stopPropagation();
         return;
       }
-      s.current = f;
+      m.current = f;
     }
-    l == null || l(r);
-  }, { m400: g, m500: b, m600: y } = D(R, n, u), { height: c, width: p, font: v } = P[C] || {}, h = ["white", "yellow"].includes(n) ? K.m600 : z, a = /* @__PURE__ */ o(
-    B,
+    l == null || l(e);
+  }, { m400: g, m500: b, m600: y } = I[n] ?? u, { height: c, width: h, font: v } = M[C] || {}, p = ["white", "yellow"].includes(n) ? z.m600 : k, a = /* @__PURE__ */ o(
+    R,
     {
       ...w,
       onKeyDown: $,
@@ -40,13 +39,13 @@ const W = ({ theme: t, children: i }) => /* @__PURE__ */ o(k, { rippleColor: t.m
       $activeColor: y,
       $selectedColor: g,
       $height: c,
-      $width: m || p,
+      $width: d || h,
       disabled: t.disabled,
-      $isLoading: e,
-      children: e ? /* @__PURE__ */ o(E, { children: /* @__PURE__ */ o(I, { size: "medium", color: d || h }) }) : /* @__PURE__ */ o(
-        L,
+      $isLoading: r,
+      children: r ? /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(D, { size: "medium", color: s || p }) }) : /* @__PURE__ */ o(
+        E,
         {
-          $textColor: d || h,
+          $textColor: s || p,
           $font: v,
           children: i
         }
@@ -54,16 +53,16 @@ const W = ({ theme: t, children: i }) => /* @__PURE__ */ o(k, { rippleColor: t.m
     }
   );
   return /* @__PURE__ */ o(
-    S,
+    L,
     {
       $height: c,
-      $width: m || p,
+      $width: d || h,
       disabled: t.disabled,
-      $isLoading: e,
-      children: e ? a : /* @__PURE__ */ o(W, { theme: n, children: a })
+      $isLoading: r,
+      children: r ? a : /* @__PURE__ */ o(P, { theme: n, children: a })
     }
   );
 };
 export {
-  T as default
+  Q as default
 };

package/components/Dropdown/Dropdown.js

@@ -1,13 +1,12 @@
 import { jsxs as C, jsx as u } 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 fe } from "react";
-import de from "lodash-es/get";
 import E from "../../colors/grey.js";
-import pe from "../MenuItem/MenuItem.js";
-import me from "../../colors/index.js";
-import he from "../../colors/blue.js";
+import de from "../MenuItem/MenuItem.js";
+import pe from "../../colors/index.js";
+import me from "../../colors/blue.js";
 import K from "../Spinner/Spinner.js";
-import { DropdownWrapper as be, Box as we, PWrapper as xe, ChevronDownWrapper as ge, OptionWrapper as Ie, SearchContainer as ke, SearchIcon as Se, SearchInput as Ce, OptionsList as $e, LoadMoreSentinel as ve, SpinnerWrapper as ye } from "./styles.js";
-const Ee = (n) => {
+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")) {
@@ -15,7 +14,7 @@ const Ee = (n) => {
     return O * s;
   }
   return parseFloat(n);
-}, Ve = ({
+}, Pe = ({
   options: n,
   onChange: O,
   value: s,
@@ -33,7 +32,7 @@ const Ee = (n) => {
   searchPh: R = "Search..."
 }) => {
   var j;
-  const [r, d] = $(!1), [q, W] = $(!1), [N, T] = $("bottom"), [k, A] = $(""), [i, p] = $(-1), y = ie(), m = v(null), S = v(null), D = v(null), B = v(null), _ = v(!0), G = () => !w && !x && d((e) => !e), P = (e) => {
+  const [r, d] = $(!1), [q, W] = $(!1), [N, T] = $("bottom"), [k, A] = $(""), [i, p] = $(-1), y = ie(), m = v(null), S = v(null), D = v(null), B = v(null), G = v(!0), J = () => !w && !x && d((e) => !e), P = (e) => {
     e !== s && (O(e), d(!1));
   }, l = le(() => {
     if (!g || !k.trim()) return n;
@@ -62,7 +61,7 @@ const Ee = (n) => {
   }, [i, r]), h(() => {
     r && g && D.current && D.current.focus();
   }, [r, g]), h(() => {
-    r || (_.current = !0);
+    r || (G.current = !0);
   }, [r]), h(() => {
     const e = (t) => {
       m.current && !m.current.contains(t.target) && d(!1);
@@ -70,27 +69,27 @@ const Ee = (n) => {
     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 = Ee(F), a = t - e.bottom;
+      const e = m.current.getBoundingClientRect(), t = window.innerHeight, o = ye(F), a = t - e.bottom;
       T(
         a < o + 8 && e.top > a ? "top" : "bottom"
       );
     }
   }, [r, F]);
-  const J = (e) => {
+  const X = (e) => {
     let t = e + 1;
     for (; t < l.length; ) {
       if (!l[t].disabled) return t;
       t++;
     }
     return e;
-  }, X = (e) => {
+  }, Y = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
       if (!l[t].disabled) return t;
       t--;
     }
     return e;
-  }, Y = (e) => {
+  }, Z = (e) => {
     if (!(w || x)) {
       if (!r) {
         (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d(!0));
@@ -99,11 +98,11 @@ const Ee = (n) => {
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = J(i);
+          const t = X(i);
           t === i && I && !f && (c == null || c()), p(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((a) => X(a));
+          e.preventDefault(), p((a) => Y(a));
           break;
         case "Enter":
           e.preventDefault();
@@ -136,12 +135,12 @@ const Ee = (n) => {
     return t.observe(e), () => t.disconnect();
   }, [H, c, I, f]);
   const {
-    m50: Z,
+    m50: _,
     m100: L,
     m200: M,
     m500: ee
-  } = de(me, U, he), te = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, re = ({ value: e, label: t, disabled: o }, a) => /* @__PURE__ */ fe(
-    pe,
+  } = pe[U] ?? me, te = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, re = ({ value: e, label: t, disabled: o }, a) => /* @__PURE__ */ fe(
+    de,
     {
       value: e,
       label: t,
@@ -154,7 +153,7 @@ const Ee = (n) => {
       id: V(a),
       width: b,
       selectedColor: M,
-      hoverColor: Z,
+      hoverColor: _,
       activeColor: L
     }
   ), ne = (e) => () => {
@@ -168,12 +167,12 @@ const Ee = (n) => {
     e.stopPropagation();
   };
   return /* @__PURE__ */ C(
-    be,
+    he,
     {
       ref: m,
       $width: b,
       tabIndex: x || w ? -1 : 0,
-      onKeyDown: Y,
+      onKeyDown: Z,
       $isLoading: w,
       $isDisabled: x,
       role: "combobox",
@@ -186,24 +185,24 @@ const Ee = (n) => {
       onBlur: oe,
       children: [
         /* @__PURE__ */ C(
-          we,
+          be,
           {
             $width: b,
-            onClick: G,
+            onClick: J,
             $isOpen: r,
             $border: ee,
             $isFocused: q && !r,
             children: [
-              /* @__PURE__ */ u(xe, { $width: b, color: s ? E.m700 : E.m500, size: "1.2rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
-              /* @__PURE__ */ u(ge, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ u(we, { $width: b, color: s ? E.m700 : E.m500, size: "1.2rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
+              /* @__PURE__ */ u(xe, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ C(Ie, { $isOpen: r, $width: b, $height: F, $top: N === "top", children: [
-          g && /* @__PURE__ */ C(ke, { onClick: ce, children: [
-            /* @__PURE__ */ u(Se, { size: 20, color: E.m600, "aria-hidden": !0 }),
+        /* @__PURE__ */ C(ge, { $isOpen: r, $width: b, $height: F, $top: N === "top", children: [
+          g && /* @__PURE__ */ C(Ie, { onClick: ce, children: [
+            /* @__PURE__ */ u(ke, { size: 20, color: E.m600, "aria-hidden": !0 }),
             /* @__PURE__ */ u(
-              Ce,
+              Se,
               {
                 ref: D,
                 value: k,
@@ -218,16 +217,16 @@ const Ee = (n) => {
               }
             )
           ] }),
-          /* @__PURE__ */ C($e, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
+          /* @__PURE__ */ C(Ce, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
             l.map(re),
-            c && /* @__PURE__ */ u(ve, { ref: B, children: f && /* @__PURE__ */ u(K, { size: "small", color: z }) })
+            c && /* @__PURE__ */ u($e, { ref: B, children: f && /* @__PURE__ */ u(K, { size: "small", color: z }) })
           ] })
         ] }),
-        w && /* @__PURE__ */ u(ye, { children: /* @__PURE__ */ u(K, { size: "small", color: z }) })
+        w && /* @__PURE__ */ u(ve, { children: /* @__PURE__ */ u(K, { size: "small", color: z }) })
       ]
     }
   );
 };
 export {
-  Ve as default
+  Pe as default
 };

package/components/Input/Checkbox/Checkbox.js

@@ -1,24 +1,23 @@
-import { jsxs as D, jsx as n } from "react/jsx-runtime";
-import { useState as $, useRef as H } from "react";
-import m from "lodash-es/get";
-import P from "../../../colors/grey.js";
-import j from "../../Typography/P/P.js";
-import z from "../../../colors/white.js";
-import u 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: d,
-  value: r,
+import { jsxs as D, jsx as s } from "react/jsx-runtime";
+import { useState as $, useRef as g } from "react";
+import H from "../../../colors/grey.js";
+import P from "../../Typography/P/P.js";
+import j from "../../../colors/white.js";
+import m from "../../../colors/blue.js";
+import { Wrapper as z, CbInput as B, Box as C } from "./styles.js";
+import { getColor as E } from "./helpers.js";
+const G = ({
+  label: u,
+  value: o,
   color: l = "blue",
-  textColor: p = P.m700,
-  disabled: s,
-  onChange: o,
-  tabIndex: h,
-  innerShade: k,
-  outerShade: y
+  textColor: p = H.m700,
+  disabled: c,
+  onChange: t,
+  tabIndex: d,
+  innerShade: h,
+  outerShade: k
 }) => {
-  const [S, t] = $(!1), c = F(l), b = k ?? m(c, "m500", u.m500), x = y ?? m(c, "m600", u.m600), a = H(0), g = (e) => o(e.target.checked), w = (e) => {
+  const [y, n] = $(!1), r = E(l), S = h ?? (r == null ? void 0 : r.m500) ?? m.m500, b = k ?? (r == null ? void 0 : r.m600) ?? m.m600, a = g(0), x = (e) => t(e.target.checked), w = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       const i = Date.now();
       if (i - a.current < 500) {
@@ -26,42 +25,42 @@ const J = ({
         return;
       }
       if (a.current = i, e.key === " ") {
-        e.preventDefault(), o(!r);
+        e.preventDefault(), t(!o);
         return;
       }
-      o(!r), t(!1);
+      t(!o), n(!1);
     }
-    e.key === "Escape" && t(!1);
-  }, f = (e) => () => t(e);
-  return /* @__PURE__ */ D(B, { as: "label", $disabled: s, children: [
-    /* @__PURE__ */ n(
-      C,
+    e.key === "Escape" && n(!1);
+  }, f = (e) => () => n(e);
+  return /* @__PURE__ */ D(z, { as: "label", $disabled: c, children: [
+    /* @__PURE__ */ s(
+      B,
       {
         type: "checkbox",
-        checked: r,
-        onChange: g,
+        checked: o,
+        onChange: x,
         onKeyDown: w,
         onFocus: f(!0),
         onBlur: f(!1),
-        disabled: s,
-        tabIndex: h
+        disabled: c,
+        tabIndex: d
       }
     ),
-    /* @__PURE__ */ n(
-      E,
+    /* @__PURE__ */ s(
+      C,
       {
-        $value: r,
-        $focused: S,
+        $value: o,
+        $focused: y,
         size: 6,
-        color: z,
-        $innerShade: b,
-        $outerShade: x,
+        color: j,
+        $innerShade: S,
+        $outerShade: b,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ n(j, { color: p, size: "1.2rem", children: d })
+    /* @__PURE__ */ s(P, { color: p, size: "1.2rem", children: u })
   ] });
 };
 export {
-  J as default
+  G as default
 };

package/components/Input/Checkbox/helpers.js

@@ -1,28 +1,27 @@
-import m from "lodash-es/get";
 import o from "../../../colors/blue.js";
-import t from "../../../colors/green.js";
-import p from "../../../colors/red.js";
-import i from "../../../colors/yellow.js";
-import e from "../../../colors/orange.js";
-import f from "../../../colors/black.js";
-import l from "../../../colors/grey.js";
-import g from "../../../colors/violet.js";
+import m from "../../../colors/green.js";
+import t from "../../../colors/red.js";
+import p from "../../../colors/yellow.js";
+import i from "../../../colors/orange.js";
+import e from "../../../colors/black.js";
+import f from "../../../colors/grey.js";
+import l from "../../../colors/violet.js";
 import n from "../../../colors/teal.js";
-import a from "../../../colors/purple.js";
-import c from "../../../colors/pink.js";
-const _ = {
+import g from "../../../colors/purple.js";
+import a from "../../../colors/pink.js";
+const c = {
   blue: o,
-  green: t,
-  red: p,
-  yellow: i,
-  orange: e,
-  black: f,
-  grey: l,
-  violet: g,
+  green: m,
+  red: t,
+  yellow: p,
+  orange: i,
+  black: e,
+  grey: f,
+  violet: l,
   teal: n,
-  purple: a,
-  pink: c
-}, D = (r) => m(_, r, o.m500);
+  purple: g,
+  pink: a
+}, w = (r) => c[r] ?? o.m500;
 export {
-  D as getColor
+  w as getColor
 };

package/components/Input/FileUploader/FileUploader.js

@@ -1,15 +1,14 @@
-import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { jsx as o, jsxs as U } from "react/jsx-runtime";
 import { useRef as C } from "react";
-import U from "lodash-es/get";
-import { UploadBtnContainer as j, Wrapper as M, HiddenInput as W, PWrapper as b } from "./styles.js";
-import B from "../../../colors/white.js";
+import { UploadBtnContainer as g, Wrapper as j, HiddenInput as M, PWrapper as W } from "./styles.js";
+import b from "../../../colors/white.js";
 import x from "../../../colors/blue.js";
-import F from "../../../colors/grey.js";
-import H from "../../Icons/Link/Link.js";
-import P from "../../../colors/index.js";
-import Z from "../../Ripple/Ripple.js";
-import { SIZE as _, MEDIUM as q } from "./constants.js";
-const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m100, children: l }), ro = ({
+import B from "../../../colors/grey.js";
+import F from "../../Icons/Link/Link.js";
+import H from "../../../colors/index.js";
+import P from "../../Ripple/Ripple.js";
+import { SIZE as Z, MEDIUM as q } from "./constants.js";
+const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(P, { rippleColor: e.m100, children: l }), L = ({
   label: e,
   labelColor: l,
   theme: p = x,
@@ -17,21 +16,21 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
   width: s,
   isLoading: t,
   disabled: r,
-  prefixIcon: c = H,
+  prefixIcon: c = F,
   suffixIcon: m,
   type: I = "file",
   accept: R,
   isMultiple: k,
   onChange: z
 }) => {
-  const u = C(null), { m400: K, m500: g, m600: v } = U(P, p, x), { height: h, width: a, font: n } = _[D] || {}, f = l || ["white", "yellow"].includes(p) ? F.m600 : B, $ = C(0), w = /* @__PURE__ */ E(
-    M,
+  const u = C(null), { m400: K, m500: v, m600: E } = H[p] ?? x, { height: h, width: a, font: n } = Z[D] || {}, f = l || ["white", "yellow"].includes(p) ? B.m600 : b, $ = C(0), w = /* @__PURE__ */ U(
+    j,
     {
       $selectedColor: K,
-      $hoverColor: g,
+      $hoverColor: v,
       $height: h,
       $width: s || a,
-      $activeColor: v,
+      $activeColor: E,
       disabled: r,
       $isLoading: t,
       role: "button",
@@ -52,7 +51,7 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
       },
       children: [
         /* @__PURE__ */ o(
-          W,
+          M,
           {
             ref: u,
             type: I,
@@ -65,7 +64,7 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
         ),
         c && /* @__PURE__ */ o(c, { color: f, size: n + 19 }),
         /* @__PURE__ */ o(
-          b,
+          W,
           {
             color: f,
             size: `${n}rem`,
@@ -80,8 +79,8 @@ const A = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
       ]
     }
   );
-  return /* @__PURE__ */ o(j, { $height: h, $width: s || a, disabled: r, $isLoading: t, children: t || r ? w : /* @__PURE__ */ o(A, { theme: p, children: w }) });
+  return /* @__PURE__ */ o(g, { $height: h, $width: s || a, disabled: r, $isLoading: t, children: t || r ? w : /* @__PURE__ */ o(A, { theme: p, children: w }) });
 };
 export {
-  ro as default
+  L as default
 };