meticulous-ui 2.2.8 → 2.3.0

package/components/Input/FileUploader/index.js

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

package/components/Input/FileUploader/styles.js

@@ -0,0 +1,83 @@
+import e, { css as i } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import n from "../../Typography/P/P.js";
+import a from "../../../colors/grey.js";
+const p = e.button`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0 0.8rem;
+  border-radius: 0.6rem;
+  border: none;
+  outline-offset: 2px;
+  background-color: ${({ $inner: o }) => o};
+  transition: background-color 0.2s ease;
+  height: ${({ $height: o }) => `${o}rem`};
+  width: ${({ $width: o }) => `${o}rem`};
+  background-color: ${({ $selectedColor: o, disabled: r }) => r ? a.m500 : o};
+  cursor: ${({ disabled: o, $isLoading: r }) => o ? "not-allowed" : r ? "auto" : "pointer"};
+
+  ${({ $isLoading: o }) => o && i`
+      pointer-events: none;
+    `};
+
+  ${({ disabled: o, $isLoading: r }) => !(o || r) && i`
+      &:hover {
+        background-color: ${({ $hoverColor: t }) => t};
+      }
+
+      &:active {
+        background-color: ${({ $activeColor: t }) => t};
+      }
+    `};
+`, c = e.div`
+  height: ${({ $height: o }) => o}rem;
+  width: ${({ $width: o }) => o}rem;
+  display: inline-block;
+  position: relative;
+  border-radius: 0.8rem;
+
+  ${({ disabled: o, $isLoading: r }) => !(o || r) && i`
+      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
+      transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+      &:hover {
+        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
+        transform: translateY(-2px);
+      }
+    `};
+`, m = e(n)`
+  color: ${({ color: o }) => o};
+  font-size: ${({ size: o }) => o};
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(
+    100%
+      ${({ $prefixIcon: o, $iconSize: r }) => o ? ` - ${r}px - 0.8rem` : ""}${({
+  $suffixIcon: o,
+  $iconSize: r
+}) => o ? ` - ${r}px - 0.8rem` : ""}
+  );
+`;
+e.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const $ = e.input`
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+`;
+export {
+  $ as HiddenInput,
+  m as PWrapper,
+  c as UploadBtnContainer,
+  p as Wrapper
+};

package/components/Input/Radio/Radio.js

@@ -0,0 +1,26 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/lodash-es/get.js";
+import j from "../../Typography/P/P.js";
+import i from "../../../colors/blue.js";
+import { Wrapper as l, HiddenInput as f, CircleBorder as u, Circle as $ } from "./styles.js";
+const b = ({ label: m, value: o, name: d, color: t, textColor: a, isSelected: e, disabled: n, onChange: c }) => {
+  const p = s(t, "m500", i.m500), h = s(t, "m800", i.m800), x = () => c(o);
+  return /* @__PURE__ */ r.jsxs(l, { $disabled: n, children: [
+    /* @__PURE__ */ r.jsx(
+      f,
+      {
+        type: "radio",
+        name: d,
+        value: o,
+        checked: e,
+        disabled: n,
+        onChange: x
+      }
+    ),
+    /* @__PURE__ */ r.jsx(u, { $isSelected: e, $shade: h, children: /* @__PURE__ */ r.jsx($, { $isSelected: e, $shade: p }) }),
+    /* @__PURE__ */ r.jsx(j, { color: a, size: "1.2rem", children: m })
+  ] });
+};
+export {
+  b as default
+};

package/components/Input/Radio/styles.js

@@ -0,0 +1,45 @@
+import t, { css as o } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import i from "../../../colors/grey.js";
+const a = t.div`
+  position: absolute;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${({ $isSelected: r, $shade: e }) => r ? e : "transparent"};
+  transition: background-color 0.35s ease;
+`, p = t.div`
+  width: 1.1rem;
+  height: 1.1rem;
+  border: 1px solid ${({ $isSelected: r, $shade: e }) => r ? e : i.m900};
+  border-radius: 50%;
+  position: relative;
+`, d = t.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+`, c = t.label`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: max-content;
+
+  ${({ $disabled: r }) => r ? o`
+          pointer-events: none;
+          opacity: 0.4;
+          cursor: not-allowed;
+        ` : o`
+          cursor: pointer;
+        `}
+`;
+export {
+  a as Circle,
+  p as CircleBorder,
+  d as HiddenInput,
+  c as Wrapper
+};

package/components/Input/RadioGroup/RadioGroup.js

@@ -0,0 +1,27 @@
+import { j as i } from "../../../_virtual/jsx-runtime.js";
+import { createElement as f } from "react";
+import { getColor as u } from "../Checkbox/helpers.js";
+import x from "../Radio/Radio.js";
+import { Wrapper as h } from "./styles.js";
+const C = ({ options: n, color: s = "blue", value: e, onChange: m, isHorizonatal: a, label: o, name: c }) => {
+  const d = u(s), l = (r) => {
+    r !== e && m(r);
+  }, t = (r) => /* @__PURE__ */ f(
+    x,
+    {
+      ...r,
+      key: r == null ? void 0 : r.value,
+      name: c,
+      color: d,
+      isSelected: e === (r == null ? void 0 : r.value),
+      onChange: l
+    }
+  );
+  return /* @__PURE__ */ i.jsxs(h, { $isHorizonatal: a, children: [
+    o && /* @__PURE__ */ i.jsx("legend", { children: o }),
+    n.map(t)
+  ] });
+};
+export {
+  C as default
+};

package/components/Input/RadioGroup/index.js

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

package/components/Input/RadioGroup/styles.js

@@ -0,0 +1,18 @@
+import t, { css as r } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const o = t.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: ${({ $isHorizonatal: e }) => e ? "row" : "column"};
+
+  ${({ $isHorizonatal: e }) => e ? r`
+          flex-wrap: wrap;
+          justify-content: space-between;
+        ` : r`
+          gap: 1.2rem;
+        `};
+`;
+export {
+  o as Wrapper
+};

package/components/Input/Textarea/styles.js

@@ -54,7 +54,7 @@ const b = o.textarea`
 `, h = o.div`
   position: relative;
   width: fit-content;
-`, u = o.div`
+`, g = o.div`
   position: absolute;
   top: -0.4rem;
   left: 0.5rem;
@@ -83,13 +83,13 @@ const b = o.textarea`
           left: 0.5rem;
           font-size: 1.4rem;
         `}
-`, g = o.div`
+`, u = o.div`
   overflow: hidden;
 `;
 export {
   w as HelperText,
-  u as Label,
-  g as Parent,
+  g as Label,
+  u as Parent,
   b as TextareaBox,
   h as Wrapper
 };

package/components/MenuItem/styles.js

@@ -1,6 +1,6 @@
 import t from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import n from "../Typography/P/P.js";
-const d = t.div`
+const m = t.div`
   width: ${({ $width: o }) => o};
   background-color: ${({
   $isSelected: o,
@@ -18,13 +18,13 @@ const d = t.div`
   &:active {
     background-color: ${({ $isSelected: o, $activeColor: r, $selectedColor: e }) => o ? e : r};
   }
-`, m = t(n)`
+`, d = t(n)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: calc(${({ $width: o }) => o} - 2rem);
 `;
 export {
-  m as PWrapper,
-  d as Wrapper
+  d as PWrapper,
+  m as Wrapper
 };

package/components/OtpInput/OtpInput.js

@@ -1,42 +1,43 @@
-import { j as D } from "../../_virtual/jsx-runtime.js";
-import { useState as O, useRef as h, useEffect as w } from "react";
-import { OTPWrapper as x } from "./styles.js";
-import { renderNums as E } from "./helpers.js";
-const A = ({ length: r = 6, value: o = "", onChange: i, onComplete: n }) => {
-  const [p, a] = O(Array(r).fill("")), c = h([]);
-  w(() => {
-    if (!o) return;
-    const s = String(o).replace(/\D/g, "").slice(0, r), t = s.split("");
+import { j as x } from "../../_virtual/jsx-runtime.js";
+import { useState as E, useRef as P, useEffect as R } from "react";
+import { OTPWrapper as k } from "./styles.js";
+import { renderNums as l } from "./helpers.js";
+const b = ({ length: r = 6, value: a = "", onChange: p, onComplete: c }) => {
+  const [u, e] = E(Array(r).fill("")), i = P([]);
+  R(() => {
+    if (!a) return;
+    const s = String(a).replace(/\D/g, "").slice(0, r), t = s.split("");
     for (; t.length < r; ) t.push("");
-    a(t), s.length === r && n?.(s);
-  }, [o, r, n]);
-  const f = (s) => {
-    a(s);
+    e(t), s.length === r && (c == null || c(s));
+  }, [a, r, c]);
+  const n = (s) => {
+    e(s);
     const t = s.join("");
-    i?.(t), t.length === r && n?.(t);
-  }, u = (s, t) => {
+    p == null || p(t), t.length === r && (c == null || c(t));
+  }, d = (s, t) => {
     s = s.replace(/\D/g, "");
-    const e = [...p];
-    e[t] = s, f(e), s && t < r - 1 && c.current[t + 1].focus();
-  }, l = (s, t) => {
-    s.key === "Backspace" && !p[t] && t > 0 && c.current[t - 1].focus();
-  }, m = (s) => {
+    const f = [...u];
+    f[t] = s, n(f), s && t < r - 1 && i.current[t + 1].focus();
+  }, y = (s, t) => {
+    s.key === "Backspace" && !u[t] && t > 0 && i.current[t - 1].focus();
+  }, j = (s) => {
+    var o;
     const t = s.clipboardData.getData("text").replace(/\D/g, "");
     if (!t) return;
-    const e = Array(r).fill("");
-    t.slice(0, r).split("").forEach((y, j) => e[j] = y), f(e);
-    const d = Math.min(t.length - 1, r - 1);
-    c.current[d]?.focus();
+    const f = Array(r).fill("");
+    t.slice(0, r).split("").forEach((O, w) => f[w] = O), n(f);
+    const D = Math.min(t.length - 1, r - 1);
+    (o = i.current[D]) == null || o.focus();
   };
-  return /* @__PURE__ */ D.jsx(
-    x,
+  return /* @__PURE__ */ x.jsx(
+    k,
     {
       style: { display: "flex", gap: "10px", justifyContent: "center" },
-      onPaste: m,
-      children: p.map(E({ inputsRef: c, handleChange: u, handleKeyDown: l }))
+      onPaste: j,
+      children: u.map(l({ inputsRef: i, handleChange: d, handleKeyDown: y }))
     }
   );
 };
 export {
-  A as default
+  b as default
 };

package/components/Pagination/styles.js

@@ -1,13 +1,13 @@
 import o, { css as i } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
-import a from "../Icons/ChevronLeft/ChevronLeft.js";
-import f from "../Icons/ChevronRight/ChevronRight.js";
+import f from "../Icons/ChevronLeft/ChevronLeft.js";
+import a from "../Icons/ChevronRight/ChevronRight.js";
 import c from "../../colors/grey.js";
 import n from "../../colors/white.js";
-import d from "../../colors/black.js";
+import u from "../../colors/black.js";
 import { SELECTED_BG as m, NOT_SELECTED_BG as l, ACTIVE_NOT_SELECTED_BG as s } from "./constants.js";
 const t = (r) => ({ $shades: e }) => {
   if (["#FFFFFF"].includes(e))
-    return d.m900;
+    return u.m900;
   if (r === m)
     return e.m500;
   if (r === l)
@@ -55,9 +55,9 @@ const t = (r) => ({ $shades: e }) => {
         `}
 `, y = o.p`
   color: ${c.m500};
-`, k = o(a)`
+`, k = o(f)`
   cursor: pointer;
-`, w = o(f)`
+`, w = o(a)`
   cursor: pointer;
 `, x = o.div`
   min-width: ${({ size: r }) => r};

package/components/Spinner/Spinner.js

@@ -1,9 +1,9 @@
-import { j as t } from "../../_virtual/jsx-runtime.js";
-import n from "../../node_modules/lodash-es/get.js";
-import { SpinnerWrapper as p } from "./styles.js";
-import i from "../../colors/index.js";
-import l from "../../colors/green.js";
-const s = {
+import { j as n } from "../../_virtual/jsx-runtime.js";
+import p from "../../node_modules/lodash-es/get.js";
+import { SpinnerWrapper as i } from "./styles.js";
+import l from "../../colors/index.js";
+import s from "../../colors/green.js";
+const $ = {
   small: {
     $border: "0.25rem",
     $length: "1rem"
@@ -16,10 +16,11 @@ const s = {
     $border: "0.75rem",
     $length: "3rem"
   }
-}, c = ({ color: r = "green", size: e = "medium" }) => {
-  const { $border: m, $length: o } = s[e];
-  return /* @__PURE__ */ t.jsx(p, { $color: n(i, r, l)?.m500, $border: m, $length: o });
+}, u = ({ color: e = "green", size: m = "medium" }) => {
+  var r;
+  const { $border: o, $length: t } = $[m];
+  return /* @__PURE__ */ n.jsx(i, { $color: (r = p(l, e, s)) == null ? void 0 : r.m500, $border: o, $length: t });
 };
 export {
-  c as default
+  u as default
 };

package/components/Timer/Timer.js

@@ -0,0 +1,64 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import { useState as x, useEffect as B } from "react";
+import t from "../../node_modules/lodash-es/noop.js";
+import I from "../Glass/Glass.js";
+import b from "./components/TimerRing/TimerRing.js";
+import o from "../../colors/white.js";
+import { Wrapper as E, Dimmer as L, Time as u, TimeTxt as h, HourHand as N, MinuteHand as G, SecondHand as K, AllDots as U, Dots as _, AlarmRing as q, BulletRing as J, Bullet as O, LeftActions as Q, ActionBtn as n, MediaStopFilledWrapper as V, MediaPauseFilledWrapper as X, MediaPlayFilledWrapper as Y, RightActions as Z, AddWrapper as ee } from "./styles.js";
+const ae = ({
+  color: f = "green",
+  showTime: g = !0,
+  showTimeWithSec: T = !0,
+  timeZone: A = "Asia/Kolkata",
+  isDigital: y = !0,
+  timerSeconds: $ = 0,
+  onTimerAdd: P = t,
+  onTimerComplete: R = t,
+  onTimerRemove: S = t,
+  onTimerPause: W = t,
+  onTimerPlay: k = t
+}) => {
+  const [D, F] = x(/* @__PURE__ */ new Date()), [r, l] = x(0), [c, a] = x(!1), v = () => {
+    l($), a(!1), P();
+  }, w = () => {
+    l(0), S();
+  }, z = () => {
+    a(!0), W();
+  }, C = () => {
+    a(!1), k();
+  };
+  B(() => {
+    const p = setInterval(() => {
+      F(/* @__PURE__ */ new Date()), !c && l((s) => (s - 1 === 0 && R(), s - 1));
+    }, 1e3);
+    return () => clearInterval(p);
+  }, [c]);
+  const m = D.toLocaleString("en-Us", { hour12: !0, timeZone: A }).split(", ")[1], j = m.split(" ")[0], H = m.split(" ")[1], M = m.split(":").slice(0, 2).join(":"), i = j.split(":"), d = !(Number.isInteger(r) && r > 0);
+  return /* @__PURE__ */ e.jsxs(E, { $color: f, children: [
+    /* @__PURE__ */ e.jsx(I, { borderRadius: "1.2rem" }),
+    g && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx(L, {}),
+      y ? /* @__PURE__ */ e.jsxs(u, { children: [
+        /* @__PURE__ */ e.jsx(h, { children: T ? j : M }),
+        /* @__PURE__ */ e.jsx(h, { children: H })
+      ] }) : /* @__PURE__ */ e.jsxs(u, { children: [
+        /* @__PURE__ */ e.jsx(N, { style: { rotate: `${i[0] * 30 + i[1] * 0.5}deg` } }),
+        /* @__PURE__ */ e.jsx(G, { style: { rotate: `${i[1] * 6}deg` } }),
+        /* @__PURE__ */ e.jsx(K, { style: { rotate: `${i[2] * 6}deg` } })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx(U, { children: [...Array(60)].map((p, s) => /* @__PURE__ */ e.jsx(_, { style: { rotate: `${s * 6}deg` } }, s)) }),
+    !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx(q, { children: /* @__PURE__ */ e.jsx(b, { progress: r >= 60 ? 1 : r % 60 / 60 }) }),
+      /* @__PURE__ */ e.jsx(J, { $angle: r % 60 * 6, children: /* @__PURE__ */ e.jsx(O, {}) })
+    ] }),
+    /* @__PURE__ */ e.jsxs(Q, { $noActions: d, children: [
+      /* @__PURE__ */ e.jsx(n, { onClick: w, children: /* @__PURE__ */ e.jsx(V, { color: o, size: 14 }) }),
+      d || !c ? /* @__PURE__ */ e.jsx(n, { onClick: z, children: /* @__PURE__ */ e.jsx(X, { color: o, size: 14 }) }) : /* @__PURE__ */ e.jsx(n, { onClick: C, children: /* @__PURE__ */ e.jsx(Y, { color: o, size: 14 }) })
+    ] }),
+    /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx(n, { title: "Add timer in seconds", onClick: v, children: /* @__PURE__ */ e.jsx(ee, { color: o, size: 20 }) }) })
+  ] });
+};
+export {
+  ae as default
+};

package/components/Timer/components/TimerRing/TimerRing.js

@@ -0,0 +1,42 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { useRef as c, useEffect as f } from "react";
+import n from "../../../../colors/white.js";
+import { SVG as a } from "./styles.js";
+const k = ({ progress: s }) => {
+  const o = c(null), e = 105, t = 2 * Math.PI * e;
+  return f(() => {
+    const i = t * (1 - s);
+    o.current.style.strokeDashoffset = i;
+  }, [s]), /* @__PURE__ */ r.jsxs(a, { width: "220", height: "220", children: [
+    /* @__PURE__ */ r.jsx(
+      "circle",
+      {
+        cx: "110",
+        cy: "110",
+        r: e,
+        stroke: "rgba(255,255,255,.2)",
+        strokeWidth: "4",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "circle",
+      {
+        ref: o,
+        cx: "110",
+        cy: "110",
+        r: e,
+        stroke: n,
+        strokeWidth: "4",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeDasharray: t,
+        strokeDashoffset: t,
+        style: { transition: "stroke-dashoffset 0.2s linear" }
+      }
+    )
+  ] });
+};
+export {
+  k as default
+};

package/components/Timer/components/TimerRing/styles.js

@@ -0,0 +1,7 @@
+import t from "../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const r = t.svg`
+  rotate: -90deg;
+`;
+export {
+  r as SVG
+};

package/components/Timer/constants.js

@@ -0,0 +1,25 @@
+import o from "../../colors/green.js";
+import r from "../../colors/red.js";
+import m from "../../colors/blue.js";
+import e from "../../colors/brown.js";
+import i from "../../colors/grey.js";
+import t from "../../colors/indigo.js";
+import p from "../../colors/orange.js";
+import f from "../../colors/teal.js";
+import l from "../../colors/violet.js";
+import n from "../../colors/yellow.js";
+const c = {
+  green: o.m500,
+  red: r.m500,
+  blue: m.m500,
+  brown: e.m500,
+  grey: i.m500,
+  indigo: t.m500,
+  orange: p.m500,
+  teal: f.m500,
+  violet: l.m500,
+  yellow: n.m500
+};
+export {
+  c as COLOR_MAPPING
+};

package/components/Timer/index.js

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