meticulous-ui 2.2.8 → 2.3.0

package/README.md

@@ -47,20 +47,21 @@ export default App;
 
 ## 📦 Components
 
-| Component     | Description                                        |
-| ------------- | -------------------------------------------------- |
-| `Pagination`  | Fully responsive pagination component              |
-| `Toast`       | Push 4 types of notifications on screen            |
-| `Timer`       | Renders analog / digital clock with alarm          |
-| `OtpInput`    | Gives inputs to enter and edit OTP                 |
-| `VideoPlayer` | Renders video with keyboard shortcuts              |
-| `Input`       | Renders input box to let user enter input          |
-| `Checkbox`    | Renders checkbox to let user give boolean value    |
-| `RadioGroup`  | Renders radio options ina group to let user select |
-| `Textarea`    | Renders textarea box to let user enter description |
-| `Dropdown`    | Renders dropdown to select from options            |
-| `Spinner`     | Renders a spinner to show the loading state        |
-| `Button`      | Renders a button to click & take an action         |
+| Component      | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| `Pagination`   | Fully responsive pagination component                  |
+| `Toast`        | Push 4 types of notifications on screen                |
+| `Timer`        | Renders analog / digital clock with alarm              |
+| `OtpInput`     | Gives inputs to enter and edit OTP                     |
+| `VideoPlayer`  | Renders video with keyboard shortcuts                  |
+| `Input`        | Renders input box to let user enter input              |
+| `Checkbox`     | Renders checkbox to let user give boolean value        |
+| `RadioGroup`   | Renders radio options in a group to let user select    |
+| `FileUploader` | Renders a button type input from where user can upload |
+| `Textarea`     | Renders textarea box to let user enter description     |
+| `Dropdown`     | Renders dropdown to select from options                |
+| `Spinner`      | Renders a spinner to show the loading state            |
+| `Button`       | Renders a button to click & take an action             |
 
 ## 📦 Icon Components
 

package/components/Dropdown/Dropdown.js

@@ -1,56 +1,57 @@
 import { j as r } from "../../_virtual/jsx-runtime.js";
-import { useState as C, useRef as S, useMemo as M, useEffect as d, useLayoutEffect as ee, useCallback as te, createElement as ne } from "react";
-import re from "../../node_modules/lodash-es/get.js";
+import { useState as C, useRef as S, useMemo as ee, useEffect as d, useLayoutEffect as te, useCallback as ne, createElement as re } from "react";
+import se from "../../node_modules/lodash-es/get.js";
 import I from "../../colors/grey.js";
 import oe from "../MenuItem/MenuItem.js";
-import se from "../../colors/index.js";
-import ie from "../../colors/blue.js";
-import F from "../Spinner/Spinner.js";
-import { DropdownWrapper as ce, Box as le, PWrapper as fe, ChevronDownWrapper as ue, OptionWrapper as ae, SearchContainer as pe, SearchIcon as de, SearchInput as me, OptionsList as he, LoadMoreSentinel as xe, SpinnerWrapper as be } from "./styles.js";
-const ge = (o) => {
-  if (typeof o != "string") return o;
-  if (o.endsWith("px")) return parseFloat(o);
-  if (o.endsWith("rem")) {
-    const E = parseFloat(o), i = parseFloat(getComputedStyle(document.documentElement).fontSize);
+import ie from "../../colors/index.js";
+import ce from "../../colors/blue.js";
+import P from "../Spinner/Spinner.js";
+import { DropdownWrapper as le, Box as fe, PWrapper as ue, ChevronDownWrapper as pe, OptionWrapper as ae, SearchContainer as de, SearchIcon as me, SearchInput as he, OptionsList as xe, LoadMoreSentinel as be, SpinnerWrapper as ge } from "./styles.js";
+const we = (s) => {
+  if (typeof s != "string") return s;
+  if (s.endsWith("px")) return parseFloat(s);
+  if (s.endsWith("rem")) {
+    const E = parseFloat(s), i = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return E * i;
   }
-  return parseFloat(o);
-}, ye = ({
-  options: o,
+  return parseFloat(s);
+}, De = ({
+  options: s,
   onChange: E,
   value: i,
   width: m = "20rem",
   menuHeight: O = "20rem",
-  placeholder: P,
-  theme: A = "blue",
+  placeholder: A,
+  theme: B = "blue",
   isLoading: $,
   isDisabled: v,
   loaderColor: y,
   searchable: h = !1,
-  onLoadMore: l,
+  onLoadMore: c,
   hasMore: x = !1,
-  isLoadingMore: a = !1,
-  searchPh: B = "Search..."
+  isLoadingMore: p = !1,
+  searchPh: H = "Search..."
 }) => {
-  const [n, j] = C(!1), [H, V] = C("bottom"), [b, D] = C(""), [f, p] = C(-1), g = S(null), w = S(null), k = S(null), R = S(null), K = S(!0), Q = () => j((e) => !e), z = (e) => {
+  var F;
+  const [n, j] = C(!1), [V, K] = C("bottom"), [b, D] = C(""), [f, a] = C(-1), g = S(null), w = S(null), k = S(null), R = S(null), Q = S(!0), q = () => j((e) => !e), z = (e) => {
     e !== i && (E(e), j(!1));
-  }, c = M(() => {
-    if (!h || !b.trim()) return o;
+  }, l = ee(() => {
+    if (!h || !b.trim()) return s;
     const e = b.toLowerCase();
-    return o.filter(({ label: t }) => t.toLowerCase().includes(e));
-  }, [o, b, h]);
+    return s.filter(({ label: t }) => t.toLowerCase().includes(e));
+  }, [s, b, h]);
   d(() => {
     if (n) {
-      const e = c.findIndex((t) => t.value === i);
-      if (e !== -1 && !c[e].disabled)
-        p(e);
+      const e = l.findIndex((t) => t.value === i);
+      if (e !== -1 && !l[e].disabled)
+        a(e);
       else {
-        const t = c.findIndex((s) => !s.disabled);
-        p(t);
+        const t = l.findIndex((o) => !o.disabled);
+        a(t);
       }
     } else
-      D(""), p(-1);
-  }, [n, b, c, i]), d(() => {
+      D(""), a(-1);
+  }, [n, b, l, i]), d(() => {
     if (n && f !== -1 && w.current) {
       const e = w.current.children[f];
       e && e.scrollIntoView({
@@ -61,63 +62,63 @@ const ge = (o) => {
   }, [f, n]), d(() => {
     n && h && k.current && k.current.focus();
   }, [n, h]), d(() => {
-    n || (K.current = !0);
+    n || (Q.current = !0);
   }, [n]), d(() => {
     const e = (t) => {
       g.current && !g.current.contains(t.target) && j(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ee(() => {
+  }, []), te(() => {
     if (n && w.current && g.current) {
-      const e = g.current.getBoundingClientRect(), t = window.innerHeight, s = ge(O), u = t - e.bottom;
-      V(
-        u < s + 8 && e.top > u ? "top" : "bottom"
+      const e = g.current.getBoundingClientRect(), t = window.innerHeight, o = we(O), u = t - e.bottom;
+      K(
+        u < o + 8 && e.top > u ? "top" : "bottom"
       );
     }
   }, [n, O]);
-  const q = (e) => {
+  const N = (e) => {
     let t = e + 1;
-    for (; t < c.length; ) {
-      if (!c[t].disabled) return t;
+    for (; t < l.length; ) {
+      if (!l[t].disabled) return t;
       t++;
     }
     return e;
-  }, N = (e) => {
+  }, U = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
-      if (!c[t].disabled) return t;
+      if (!l[t].disabled) return t;
       t--;
     }
     return e;
-  }, U = (e) => {
+  }, G = (e) => {
     if (n)
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = q(f);
-          t === f && x && !a && l?.(), p(t);
+          const t = N(f);
+          t === f && x && !p && (c == null || c()), a(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((u) => N(u));
+          e.preventDefault(), a((u) => U(u));
           break;
         case "Enter":
           e.preventDefault();
-          const s = c[f];
-          s && !s.disabled && z(s.value);
+          const o = l[f];
+          o && !o.disabled && z(o.value);
           break;
         case "Escape":
           j(!1);
           break;
       }
-  }, W = te(() => {
-    x && !a && l && l();
-  }, [x, a, l]);
+  }, W = ne(() => {
+    x && !p && c && c();
+  }, [x, p, c]);
   d(() => {
     const e = R.current;
-    if (!e || !l || !x) return;
+    if (!e || !c || !x) return;
     const t = new IntersectionObserver(
-      ([s]) => {
-        s.isIntersecting && !a && W();
+      ([o]) => {
+        o.isIntersecting && !p && W();
       },
       {
         root: w.current,
@@ -128,70 +129,70 @@ const ge = (o) => {
       }
     );
     return t.observe(e), () => t.disconnect();
-  }, [W, l, x, a]);
+  }, [W, c, x, p]);
   const {
-    m50: G,
-    m100: J,
-    m200: T,
-    m500: X
-  } = re(se, A, ie), Y = (e, t) => () => !e && p(t), Z = ({ value: e, label: t, disabled: s }, u) => /* @__PURE__ */ ne(
+    m50: J,
+    m100: T,
+    m200: X,
+    m500: Y
+  } = se(ie, B, ce), Z = (e, t) => () => !e && a(t), _ = ({ value: e, label: t, disabled: o }, u) => /* @__PURE__ */ re(
     oe,
     {
       value: e,
       label: t,
-      isDisabled: s,
+      isDisabled: o,
       onSelect: z,
-      onMouseEnter: Y(s, u),
+      onMouseEnter: Z(o, u),
       isSelected: e === i,
       isHighlighted: u === f,
       key: e,
       width: m,
-      selectedColor: T,
-      hoverColor: G,
-      activeColor: J
+      selectedColor: X,
+      hoverColor: J,
+      activeColor: T
     }
-  ), _ = (e) => {
+  ), L = (e) => {
     D(e.target.value);
-  }, L = (e) => {
+  }, M = (e) => {
     e.stopPropagation();
   };
   return /* @__PURE__ */ r.jsxs(
-    ce,
+    le,
     {
       ref: g,
       $width: m,
       tabIndex: v ? -1 : 0,
-      onKeyDown: U,
+      onKeyDown: G,
       $isLoading: $,
       $isDisabled: v,
       children: [
-        /* @__PURE__ */ r.jsxs(le, { $width: m, onClick: Q, $isOpen: n, $border: X, children: [
-          /* @__PURE__ */ r.jsx(fe, { $width: m, color: i ? I.m700 : I.m500, size: "1.2rem", children: i ? o.find(({ value: e }) => i === e)?.label : P }),
-          /* @__PURE__ */ r.jsx(ue, { color: I.m500, size: 22, $isOpen: n })
+        /* @__PURE__ */ r.jsxs(fe, { $width: m, onClick: q, $isOpen: n, $border: Y, children: [
+          /* @__PURE__ */ r.jsx(ue, { $width: m, color: i ? I.m700 : I.m500, size: "1.2rem", children: i ? (F = s.find(({ value: e }) => i === e)) == null ? void 0 : F.label : A }),
+          /* @__PURE__ */ r.jsx(pe, { color: I.m500, size: 22, $isOpen: n })
         ] }),
-        /* @__PURE__ */ r.jsxs(ae, { $isOpen: n, $width: m, $height: O, $top: H === "top", children: [
-          h && /* @__PURE__ */ r.jsxs(pe, { onClick: L, children: [
-            /* @__PURE__ */ r.jsx(de, { size: 20, color: I.m600 }),
+        /* @__PURE__ */ r.jsxs(ae, { $isOpen: n, $width: m, $height: O, $top: V === "top", children: [
+          h && /* @__PURE__ */ r.jsxs(de, { onClick: M, children: [
+            /* @__PURE__ */ r.jsx(me, { size: 20, color: I.m600 }),
             /* @__PURE__ */ r.jsx(
-              me,
+              he,
               {
                 ref: k,
                 value: b,
-                onChange: _,
-                placeholder: B
+                onChange: L,
+                placeholder: H
               }
             )
           ] }),
-          /* @__PURE__ */ r.jsxs(he, { ref: w, children: [
-            c.map(Z),
-            l && /* @__PURE__ */ r.jsx(xe, { ref: R, children: a && /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
+          /* @__PURE__ */ r.jsxs(xe, { ref: w, children: [
+            l.map(_),
+            c && /* @__PURE__ */ r.jsx(be, { ref: R, children: p && /* @__PURE__ */ r.jsx(P, { size: "small", color: y }) })
           ] })
         ] }),
-        $ && /* @__PURE__ */ r.jsx(be, { children: /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
+        $ && /* @__PURE__ */ r.jsx(ge, { children: /* @__PURE__ */ r.jsx(P, { size: "small", color: y }) })
       ]
     }
   );
 };
 export {
-  ye as default
+  De as default
 };

package/components/Dropdown/styles.js

@@ -114,9 +114,9 @@ const c = n`
   &::placeholder {
     color: ${t.m400};
   }
-`, L = e(d)`
+`, E = e(d)`
   margin: 0 0.8rem;
-`, O = e.div`
+`, L = e.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -128,12 +128,12 @@ export {
   $ as Box,
   S as ChevronDownWrapper,
   w as DropdownWrapper,
-  O as LoadMoreSentinel,
+  L as LoadMoreSentinel,
   k as OptionWrapper,
   D as OptionsList,
   y as PWrapper,
   z as SearchContainer,
-  L as SearchIcon,
+  E as SearchIcon,
   C as SearchInput,
   W as SpinnerWrapper
 };

package/components/Glass/Glass.js

@@ -0,0 +1,6 @@
+import { j as o } from "../../_virtual/jsx-runtime.js";
+import { GlassWrapper as a } from "./styles.js";
+const p = ({ border: r = "none", borderRadius: s = 0 }) => /* @__PURE__ */ o.jsx(a, { $border: r, $borderRadius: s });
+export {
+  p as default
+};

package/components/Glass/index.js

@@ -0,0 +1,4 @@
+import o from "./Glass.js";
+export {
+  o as default
+};

package/components/Glass/styles.js

@@ -0,0 +1,73 @@
+import a from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = a.div`
+  width: 100%;
+  height: 100%;
+  border-radius: ${({ $borderRadius: r }) => r};
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  background:
+    radial-gradient(
+      60rem 22rem at 50% 45%,
+      rgba(20, 40, 20, 0.06),
+      rgba(10, 25, 10, 0.02) 50%,
+      transparent 70%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.18) 0%,
+      rgba(255, 255, 255, 0.06) 40%,
+      rgba(255, 255, 255, 0.03) 100%
+    );
+
+  box-shadow:
+    0 3rem 6rem rgba(7, 22, 10, 0.3),
+    0 2px 0 rgba(255, 255, 255, 0.03) inset;
+
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: rgba(8, 34, 16, 0.95);
+
+  ::before {
+    content: '';
+    position: absolute;
+    left: -12%;
+    top: -24%;
+    width: 62%;
+    height: 62%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.24),
+      rgba(255, 255, 255, 0.06) 40%,
+      transparent 60%
+    );
+    filter: blur(4.6rem);
+    opacity: 0.85;
+    pointer-events: none;
+    transform: translateZ(0);
+  }
+
+  ::after {
+    content: '';
+    position: absolute;
+    right: -6%;
+    bottom: -18%;
+    width: 68%;
+    height: 68%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle at 30% 40%,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0.01) 40%,
+      transparent 70%
+    );
+    filter: blur(5.4rem);
+    opacity: 0.45;
+    pointer-events: none;
+    transform: translateZ(0);
+  }
+`;
+export {
+  e as GlassWrapper
+};

package/components/Icons/Add/index.js

@@ -0,0 +1,4 @@
+import o from "./Add.js";
+export {
+  o as default
+};

package/components/Icons/Link/index.js

@@ -0,0 +1,4 @@
+import r from "./Link.js";
+export {
+  r as default
+};

package/components/Icons/MediaPauseFilled/index.js

@@ -0,0 +1,4 @@
+import a from "./MediaPauseFilled.js";
+export {
+  a as default
+};

package/components/Icons/MediaPlayFilled/index.js

@@ -0,0 +1,4 @@
+import e from "./MediaPlayFilled.js";
+export {
+  e as default
+};

package/components/Icons/MediaStopFilled/index.js

@@ -0,0 +1,4 @@
+import o from "./MediaStopFilled.js";
+export {
+  o as default
+};

package/components/Input/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import m from "../../../node_modules/lodash-es/get.js";
+import f from "../../../colors/grey.js";
+import x from "../../Typography/P/P.js";
+import u from "../../../colors/white.js";
+import c from "../../../colors/blue.js";
+import { Wrapper as j, Box as k } from "./styles.js";
+import { getColor as g } from "./helpers.js";
+const E = ({ label: s, value: r, color: n = "blue", textColor: p = f.m700, disabled: e, onChange: t }) => {
+  const h = () => {
+    e || t(!r);
+  }, i = g(n), a = m(i, "m500", c.m500), l = m(i, "m800", c.m800);
+  return /* @__PURE__ */ o.jsxs(j, { onClick: h, $disabled: e, children: [
+    /* @__PURE__ */ o.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: r,
+        onChange: (d) => t(d.target.checked),
+        disabled: e,
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      k,
+      {
+        $value: r,
+        size: 6,
+        color: u,
+        $innerShade: a,
+        $outerShade: l
+      }
+    ),
+    /* @__PURE__ */ o.jsx(x, { color: p, size: "1.2rem", children: s })
+  ] });
+};
+export {
+  E as default
+};

package/components/Input/Checkbox/helpers.js

@@ -0,0 +1,28 @@
+import m from "../../../node_modules/lodash-es/get.js";
+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 n from "../../../colors/teal.js";
+import a from "../../../colors/purple.js";
+import c from "../../../colors/pink.js";
+const b = {
+  blue: o,
+  green: t,
+  red: p,
+  yellow: i,
+  orange: e,
+  black: f,
+  grey: l,
+  violet: g,
+  teal: n,
+  purple: a,
+  pink: c
+}, D = (r) => m(b, r, o.m500);
+export {
+  D as getColor
+};

package/components/Input/Checkbox/index.js

@@ -0,0 +1,4 @@
+import e from "./Checkbox.js";
+export {
+  e as default
+};

package/components/Input/Checkbox/styles.js

@@ -0,0 +1,30 @@
+import t, { css as e } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import i from "../../Icons/Check/Check.js";
+import n from "../../../colors/grey.js";
+const m = t.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: max-content;
+
+  ${({ $disabled: r }) => r && e`
+      pointer-events: none;
+      opacity: 0.7;
+    `}
+`, c = t(i)`
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 1px solid ${({ $value: r, $outerShade: o }) => r ? o : n.m800};
+  border-radius: 0.2rem;
+  background-color: ${({ $value: r, $innerShade: o }) => r ? o : "transparent"};
+  transition: background-color 0.35s ease;
+
+  path {
+    stroke-width: 3;
+  }
+`;
+export {
+  c as Box,
+  m as Wrapper
+};

package/components/Input/FileUploader/FileUploader.js

@@ -0,0 +1,76 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import { useRef as U } from "react";
+import a from "../../../node_modules/lodash-es/get.js";
+import { UploadBtnContainer as v, HiddenInput as M, Wrapper as W, PWrapper as g } from "./styles.js";
+import y from "../../../colors/white.js";
+import x from "../../../colors/blue.js";
+import B from "../../Icons/Link/Link.js";
+import D from "../../../colors/index.js";
+import F from "../../Ripple/Ripple.js";
+import { SIZE as H, MEDIUM as Z } from "./constants.js";
+const q = ({ theme: t, children: r }) => /* @__PURE__ */ o.jsx(F, { rippleColor: t.m100, children: r }), X = ({
+  label: t,
+  labelColor: r = y,
+  theme: s = x,
+  size: j = Z,
+  width: c,
+  isLoading: i,
+  disabled: e,
+  prefixIcon: n = B,
+  suffixIcon: m,
+  type: d = "file",
+  accept: C,
+  isMultiple: R,
+  onChange: k
+}) => {
+  const l = U(null), { m400: w, m500: z, m600: E } = a(D, s, x), { height: f, width: h, font: p } = H[j] || {}, I = () => {
+    var u;
+    !e && !i && ((u = l.current) == null || u.click());
+  }, $ = /* @__PURE__ */ o.jsxs(
+    W,
+    {
+      $selectedColor: w,
+      $hoverColor: z,
+      $height: f,
+      $width: c || h,
+      $activeColor: E,
+      disabled: e,
+      isLoading: i,
+      type: "button",
+      onClick: I,
+      children: [
+        n && /* @__PURE__ */ o.jsx(n, { color: r, size: p + 19 }),
+        /* @__PURE__ */ o.jsx(
+          g,
+          {
+            color: r,
+            size: `${p}rem`,
+            $prefixIcon: !!n,
+            $suffixIcon: !!m,
+            $iconSize: p + 19,
+            title: t,
+            children: t
+          }
+        ),
+        m && /* @__PURE__ */ o.jsx(m, { color: r, size: p + 19 })
+      ]
+    }
+  );
+  return /* @__PURE__ */ o.jsxs(v, { $height: f, $width: c || h, disabled: e, $isLoading: i, children: [
+    /* @__PURE__ */ o.jsx(
+      M,
+      {
+        ref: l,
+        type: d,
+        accept: C,
+        multiple: R,
+        disabled: e,
+        onChange: k
+      }
+    ),
+    i ? $ : /* @__PURE__ */ o.jsx(q, { theme: s, children: $ })
+  ] });
+};
+export {
+  X as default
+};

package/components/Input/FileUploader/constants.js

@@ -0,0 +1,29 @@
+const t = "small", h = "medium", o = "large", e = "ex-large", i = {
+  [t]: {
+    height: 2.8,
+    width: 6.75,
+    font: 1
+  },
+  [h]: {
+    height: 3.2,
+    width: 7.5,
+    font: 1.2
+  },
+  [o]: {
+    height: 3.6,
+    width: 8.25,
+    font: 1.4
+  },
+  [e]: {
+    height: 4,
+    width: 9,
+    font: 1.6
+  }
+};
+export {
+  e as EX_LARGE,
+  o as LARGE,
+  h as MEDIUM,
+  i as SIZE,
+  t as SMALL
+};