meticulous-ui 2.6.2 → 2.8.0

package/components/Timer/Timer.js

@@ -1,18 +1,18 @@
 import { jsxs as i, jsx as e, Fragment as B } from "react/jsx-runtime";
-import { useState as n, useRef as ae, useEffect as F } from "react";
-import se from "../Glass/Glass.js";
-import oe from "./components/TimerRing/TimerRing.js";
+import { useState as n, useRef as se, useEffect as F } from "react";
+import oe from "../Glass/Glass.js";
+import le from "./components/TimerRing/TimerRing.js";
 import u from "../../colors/white.js";
-import { Wrapper as le, Dimmer as ce, Time as N, TimeTxt as E, HourHand as de, MinuteHand as ue, SecondHand as me, AllDots as he, Dots as pe, AlarmRing as ge, BulletRing as fe, Bullet as Se, LeftActions as be, ActionBtn as m, MediaStopFilledWrapper as Te, MediaPauseFilledWrapper as we, MediaPlayFilledWrapper as Ae, RightActions as $e, AddWrapper as Re } from "./styles.js";
+import { Wrapper as ce, Dimmer as de, Time as N, TimeTxt as E, HourHand as ue, MinuteHand as me, SecondHand as he, AllDots as pe, Dots as ge, AlarmRing as fe, BulletRing as Se, Bullet as be, LeftActions as Te, ActionBtn as m, MediaStopFilledWrapper as we, MediaPauseFilledWrapper as Ae, MediaPlayFilledWrapper as $e, RightActions as Re, AddWrapper as Pe } from "./styles.js";
 const l = () => {
-}, Pe = (h) => () => {
+}, De = (h) => () => {
   const a = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: h }).split(", ")[1].split(" ")[0], [g, r, c] = a.split(":").map(Number);
   return {
     second: c * 6,
     minute: r * 6 + c * 0.1,
     hour: g % 12 * 30 + r * 0.5
   };
-}, We = ({
+}, je = ({
   color: h = "green",
   showTime: H = !0,
   showTimeWithSec: p = !0,
@@ -23,66 +23,67 @@ const l = () => {
   onTimerComplete: U = l,
   onTimerRemove: O = l,
   onTimerPause: G = l,
-  onTimerPlay: K = l
+  onTimerPlay: K = l,
+  ..._
 }) => {
-  const [f, _] = n(/* @__PURE__ */ new Date()), [s, S] = n(0), [d, b] = n(!1), [T, q] = n(Pe(a)), [J, w] = n(0), [A, $] = n(!1), k = ae(d);
+  const [f, q] = n(/* @__PURE__ */ new Date()), [s, S] = n(0), [d, b] = n(!1), [T, J] = n(De(a)), [Q, w] = n(0), [A, $] = n(!1), k = se(d);
   F(() => {
     k.current = d;
   }, [d]);
-  const Q = () => {
+  const X = () => {
     S(r), w(r % 60 * 6), b(!1), c();
-  }, X = () => {
-    $(!0), O();
   }, Y = () => {
-    S(0), w(0), $(!1);
+    $(!0), O();
   }, V = () => {
-    b(!0), G();
+    S(0), w(0), $(!1);
   }, Z = () => {
+    b(!0), G();
+  }, ee = () => {
     b(!1), K();
   };
   F(() => {
     const L = setInterval(() => {
       const o = /* @__PURE__ */ new Date();
-      _(o), q((t) => {
-        const ee = o.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [te, W, j] = ee.split(":").map(Number), re = j * 6, ie = W * 6 + j * 0.1, ne = te % 12 * 30 + W * 0.5, D = (v, x) => {
+      q(o), J((t) => {
+        const te = o.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [re, W, j] = te.split(":").map(Number), ie = j * 6, ne = W * 6 + j * 0.1, ae = re % 12 * 30 + W * 0.5, D = (v, x) => {
           const z = v % 360;
           return v - z + x + (x < z ? 360 : 0);
         };
         return {
-          second: D(t.second, re),
-          minute: D(t.minute, ie),
-          hour: D(t.hour, ne)
+          second: D(t.second, ie),
+          minute: D(t.minute, ne),
+          hour: D(t.hour, ae)
         };
       }), k.current || (S((t) => (t - 1 === 0 && (U(), $(!0)), t - 1)), w((t) => t - 6));
     }, 1e3);
     return () => clearInterval(L);
   }, []);
   const R = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], I = R.split(" ")[0], M = R.split(" ")[1], y = R.split(":").slice(0, 2).join(":"), P = !(Number.isInteger(s) && s > 0), C = `${p ? I : y} ${M}`;
-  return /* @__PURE__ */ i(le, { $color: h, role: "region", "aria-label": "Clock", children: [
-    /* @__PURE__ */ e(se, { borderRadius: "1.2rem", "aria-hidden": "true" }),
+  return /* @__PURE__ */ i(ce, { $color: h, role: "region", "aria-label": "Clock", ..._, children: [
+    /* @__PURE__ */ e(oe, { borderRadius: "1.2rem", "aria-hidden": "true" }),
     H && /* @__PURE__ */ i(B, { children: [
-      /* @__PURE__ */ e(ce, { "aria-hidden": "true" }),
+      /* @__PURE__ */ e(de, { "aria-hidden": "true" }),
       g ? /* @__PURE__ */ i(N, { as: "time", dateTime: f.toISOString(), "aria-label": C, children: [
         /* @__PURE__ */ e(E, { "aria-hidden": "true", children: p ? I : y }),
         /* @__PURE__ */ e(E, { "aria-hidden": "true", children: M })
       ] }) : /* @__PURE__ */ i(N, { as: "time", dateTime: f.toISOString(), "aria-label": C, children: [
-        /* @__PURE__ */ e(de, { $rotate: T.hour, "aria-hidden": "true" }),
-        /* @__PURE__ */ e(ue, { $rotate: T.minute, "aria-hidden": "true" }),
-        /* @__PURE__ */ e(me, { $rotate: T.second, "aria-hidden": "true" })
+        /* @__PURE__ */ e(ue, { $rotate: T.hour, "aria-hidden": "true" }),
+        /* @__PURE__ */ e(me, { $rotate: T.minute, "aria-hidden": "true" }),
+        /* @__PURE__ */ e(he, { $rotate: T.second, "aria-hidden": "true" })
       ] })
     ] }),
-    /* @__PURE__ */ e(he, { "aria-hidden": "true", children: [...Array(60)].map((L, o) => /* @__PURE__ */ e(pe, { style: { rotate: `${o * 6}deg` } }, o)) }),
+    /* @__PURE__ */ e(pe, { "aria-hidden": "true", children: [...Array(60)].map((L, o) => /* @__PURE__ */ e(ge, { style: { rotate: `${o * 6}deg` } }, o)) }),
     (!P || A) && /* @__PURE__ */ i(B, { children: [
       /* @__PURE__ */ e(
-        ge,
+        fe,
         {
           $dismissing: A,
-          onAnimationEnd: Y,
+          onAnimationEnd: V,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ e(oe, { progress: s >= 60 ? 1 : s % 60 / 60 })
+          children: /* @__PURE__ */ e(le, { progress: s >= 60 ? 1 : s % 60 / 60 })
         }
       ),
-      /* @__PURE__ */ e(fe, { $angle: J, $dismissing: A, "aria-hidden": "true", children: /* @__PURE__ */ e(Se, {}) }),
+      /* @__PURE__ */ e(Se, { $angle: Q, $dismissing: A, "aria-hidden": "true", children: /* @__PURE__ */ e(be, {}) }),
       /* @__PURE__ */ e(
         "span",
         {
@@ -100,13 +101,13 @@ const l = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ i(be, { $noActions: P, children: [
-      /* @__PURE__ */ e(m, { onClick: X, "aria-label": "Stop timer", children: /* @__PURE__ */ e(Te, { color: u, size: 14, "aria-hidden": "true" }) }),
-      P || !d ? /* @__PURE__ */ e(m, { onClick: V, "aria-label": "Pause timer", children: /* @__PURE__ */ e(we, { color: u, size: 14, "aria-hidden": "true" }) }) : /* @__PURE__ */ e(m, { onClick: Z, "aria-label": "Resume timer", children: /* @__PURE__ */ e(Ae, { color: u, size: 14, "aria-hidden": "true" }) })
+    /* @__PURE__ */ i(Te, { $noActions: P, children: [
+      /* @__PURE__ */ e(m, { onClick: Y, "aria-label": "Stop timer", children: /* @__PURE__ */ e(we, { color: u, size: 14, "aria-hidden": "true" }) }),
+      P || !d ? /* @__PURE__ */ e(m, { onClick: Z, "aria-label": "Pause timer", children: /* @__PURE__ */ e(Ae, { color: u, size: 14, "aria-hidden": "true" }) }) : /* @__PURE__ */ e(m, { onClick: ee, "aria-label": "Resume timer", children: /* @__PURE__ */ e($e, { color: u, size: 14, "aria-hidden": "true" }) })
     ] }),
-    /* @__PURE__ */ e($e, { children: /* @__PURE__ */ e(m, { onClick: Q, "aria-label": `Start ${r} second timer`, children: /* @__PURE__ */ e(Re, { color: u, size: 20, "aria-hidden": "true" }) }) })
+    /* @__PURE__ */ e(Re, { children: /* @__PURE__ */ e(m, { onClick: X, "aria-label": `Start ${r} second timer`, children: /* @__PURE__ */ e(Pe, { color: u, size: 20, "aria-hidden": "true" }) }) })
   ] });
 };
 export {
-  We as default
+  je as default
 };

package/components/Toast/Toast.js

@@ -1,35 +1,43 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { useState as f, useEffect as u } from "react";
-import { Logo as C } from "./helpers.js";
-import S from "../../colors/grey.js";
-import { COLOR_MAP as $, INFO as F, INFO_COLORS as L } from "./constants.js";
-import { ToastWrapper as N, Message as j, Title as w, Subtitle as x, CloseWrapper as I } from "./styles.js";
-const M = () => {
+import { Logo as S } from "./helpers.js";
+import $ from "../../colors/grey.js";
+import { COLOR_MAP as F, INFO as L, INFO_COLORS as N } from "./constants.js";
+import { ToastWrapper as j, Message as w, Title as x, Subtitle as I, CloseWrapper as M } from "./styles.js";
+const R = () => {
 }, m = (o, e, t) => () => {
   o(!0), setTimeout(() => {
     e(!1), t();
   }, 500);
-}, P = ({ type: o = F, visible: e = !0, duration: t = 5, onExpire: a = M, title: l, subtitle: i }) => {
-  const [d, s] = f(e), [p, c] = f(!1);
+}, b = ({
+  type: o = L,
+  visible: e = !0,
+  duration: t = 5,
+  onExpire: a = R,
+  title: l,
+  subtitle: i,
+  ...d
+}) => {
+  const [p, s] = f(e), [O, c] = f(!1);
   u(() => {
     s(e);
   }, [e]), u(() => {
-    const g = setTimeout(m(c, s, a), t * 1e3 - 500);
+    const C = setTimeout(m(c, s, a), t * 1e3 - 500);
     return () => {
-      clearTimeout(g);
+      clearTimeout(C);
     };
   }, [t, m]);
-  const { main: O, side: T, bg: h } = $[o] ?? L;
-  if (d)
-    return /* @__PURE__ */ n(N, { $bg: h, className: `${p ? "fade-out" : "fade-in"}`, children: [
-      /* @__PURE__ */ r(C, { type: o, $main: O, $side: T }),
-      /* @__PURE__ */ n(j, { children: [
-        /* @__PURE__ */ r(w, { children: l }),
-        i && /* @__PURE__ */ r(x, { children: i })
+  const { main: T, side: h, bg: g } = F[o] ?? N;
+  if (p)
+    return /* @__PURE__ */ n(j, { $bg: g, className: `${O ? "fade-out" : "fade-in"}`, ...d, children: [
+      /* @__PURE__ */ r(S, { type: o, $main: T, $side: h }),
+      /* @__PURE__ */ n(w, { children: [
+        /* @__PURE__ */ r(x, { children: l }),
+        i && /* @__PURE__ */ r(I, { children: i })
       ] }),
-      /* @__PURE__ */ r(I, { size: 20, color: S.m600, onClick: m(c, s, a) })
+      /* @__PURE__ */ r(M, { size: 20, color: $.m600, onClick: m(c, s, a) })
     ] });
 };
 export {
-  P as default
+  b as default
 };

package/components/Typography/Headings/H1.js

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-const s = e.h1`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+const m = s.h1`
   color: ${({ $color: o }) => o};
   font-size: 3.6rem;
-`, c = ({ color: o, children: r }) => /* @__PURE__ */ t(s, { $color: o, children: r });
+`, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
-  c as default
+  f as default
 };

package/components/Typography/Headings/H2.js

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-const s = e.h2`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+const m = s.h2`
   color: ${({ $color: o }) => o};
   font-size: 3rem;
-`, c = ({ color: o, children: r }) => /* @__PURE__ */ t(s, { $color: o, children: r });
+`, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
-  c as default
+  f as default
 };

package/components/Typography/Headings/H3.js

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-const s = e.h3`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+const m = s.h3`
   color: ${({ $color: o }) => o};
   font-size: 2.4rem;
-`, c = ({ color: o, children: r }) => /* @__PURE__ */ t(s, { $color: o, children: r });
+`, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
-  c as default
+  f as default
 };

package/components/Typography/Headings/H4.js

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-const s = e.h4`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+const m = s.h4`
   color: ${({ $color: o }) => o};
   font-size: 1.8rem;
-`, c = ({ color: o, children: r }) => /* @__PURE__ */ t(s, { $color: o, children: r });
+`, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
-  c as default
+  f as default
 };

package/components/Typography/Headings/H5.js

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-const s = e.h5`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+const m = s.h5`
   color: ${({ $color: o }) => o};
   font-size: 1.4rem;
-`, c = ({ color: o, children: r }) => /* @__PURE__ */ t(s, { $color: o, children: r });
+`, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
-  c as default
+  f as default
 };

package/components/Typography/Headings/H6.js

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-const s = e.h6`
+import { jsx as e } from "react/jsx-runtime";
+import s from "styled-components";
+const m = s.h6`
   color: ${({ $color: o }) => o};
   font-size: 1.2rem;
-`, c = ({ color: o, children: r }) => /* @__PURE__ */ t(s, { $color: o, children: r });
+`, f = ({ color: o, children: r, ...t }) => /* @__PURE__ */ e(m, { $color: o, ...t, children: r });
 export {
-  c as default
+  f as default
 };

package/components/VideoPlayer/VideoPlayer.js

@@ -1,16 +1,23 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { useRef as t } from "react";
-import { VideoContainer as f, Video as p } from "./styles.js";
-import { useSpacebarToggle as c } from "./useSpacebarToggle.js";
-import h from "./components/Volumebar/Volumebar.js";
-import { useVolumeOverlay as V } from "./useVolumeOverlay.js";
-const $ = ({ link: s, thumbnail: i, width: m = "600", borderRadius: u = 8, height: l = "auto" }) => {
-  const o = t(null), e = t(null), { volume: n, showVolume: a } = V();
-  return c(o, e, a), /* @__PURE__ */ d(f, { ref: e, $width: m, $height: l, children: [
-    /* @__PURE__ */ r(p, { $borderRadius: u, ref: o, src: s, poster: i, controls: !0, children: "Your browser does not support the video tag." }),
-    /* @__PURE__ */ r(h, { volume: n })
+import { VideoContainer as p, Video as c } from "./styles.js";
+import { useSpacebarToggle as h } from "./useSpacebarToggle.js";
+import V from "./components/Volumebar/Volumebar.js";
+import { useVolumeOverlay as g } from "./useVolumeOverlay.js";
+const j = ({
+  link: s,
+  thumbnail: i,
+  width: m = "600",
+  borderRadius: u = 8,
+  height: l = "auto",
+  ...n
+}) => {
+  const o = t(null), e = t(null), { volume: a, showVolume: d } = g();
+  return h(o, e, d), /* @__PURE__ */ f(p, { ref: e, $width: m, $height: l, ...n, children: [
+    /* @__PURE__ */ r(c, { $borderRadius: u, ref: o, src: s, poster: i, controls: !0, children: "Your browser does not support the video tag." }),
+    /* @__PURE__ */ r(V, { volume: a })
   ] });
 };
 export {
-  $ as default
+  j as default
 };

package/index.js

@@ -2,55 +2,57 @@ import { default as a } from "./components/Pagination/Pagination.js";
 import { default as t } from "./components/Toast/Toast.js";
 import { default as p } from "./components/Spinner/Spinner.js";
 import { default as l } from "./components/Loader/Loader.js";
-import { default as s } from "./components/PageLoader/PageLoader.js";
+import { default as m } from "./components/PageLoader/PageLoader.js";
 import { default as x } from "./components/OtpInput/OtpInput.js";
 import { default as n } from "./components/Dropdown/Dropdown.js";
 import { default as c } from "./components/Selectbox/Selectbox.js";
-import { default as S } from "./components/Button/Button.js";
-import { default as b } from "./components/Timer/Timer.js";
-import { default as h } from "./components/Shimmer/Shimmer.js";
+import { default as g } from "./components/Button/Button.js";
+import { default as S } from "./components/Timer/Timer.js";
+import { default as b } from "./components/Shimmer/Shimmer.js";
 import { default as L } from "./components/VideoPlayer/VideoPlayer.js";
-import { default as w } from "./components/Typography/P/P.js";
-import { default as B } from "./components/Input/Input/Input.js";
-import { default as D } from "./components/Input/Textarea/Textarea.js";
-import { default as G } from "./components/Input/Checkbox/Checkbox.js";
-import { default as R } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as V } from "./components/Input/FileUploader/FileUploader.js";
-import { default as q } from "./colors/index.js";
-import { default as z } from "./utils/index.js";
-import { default as E } from "./components/Icons/index.js";
-import { default as K } from "./components/Typography/Headings/H1.js";
-import { default as N } from "./components/Typography/Headings/H2.js";
-import { default as W } from "./components/Typography/Headings/H3.js";
-import { default as Y } from "./components/Typography/Headings/H4.js";
-import { default as _ } from "./components/Typography/Headings/H5.js";
-import { default as oo } from "./components/Typography/Headings/H6.js";
+import { default as w } from "./components/Image/Image.js";
+import { default as B } from "./components/Typography/P/P.js";
+import { default as D } from "./components/Input/Input/Input.js";
+import { default as G } from "./components/Input/Textarea/Textarea.js";
+import { default as R } from "./components/Input/Checkbox/Checkbox.js";
+import { default as V } from "./components/Input/RadioGroup/RadioGroup.js";
+import { default as q } from "./components/Input/FileUploader/FileUploader.js";
+import { default as z } from "./colors/index.js";
+import { default as E } from "./utils/index.js";
+import { default as K } from "./components/Icons/index.js";
+import { default as N } from "./components/Typography/Headings/H1.js";
+import { default as W } from "./components/Typography/Headings/H2.js";
+import { default as Y } from "./components/Typography/Headings/H3.js";
+import { default as _ } from "./components/Typography/Headings/H4.js";
+import { default as ee } from "./components/Typography/Headings/H5.js";
+import { default as ae } from "./components/Typography/Headings/H6.js";
 export {
-  S as Button,
-  G as Checkbox,
+  g as Button,
+  R as Checkbox,
   n as Dropdown,
-  V as FileUploader,
-  K as H1,
-  N as H2,
-  W as H3,
-  Y as H4,
-  _ as H5,
-  oo as H6,
-  B as Input,
+  q as FileUploader,
+  N as H1,
+  W as H2,
+  Y as H3,
+  _ as H4,
+  ee as H5,
+  ae as H6,
+  w as Image,
+  D as Input,
   l as Loader,
   x as OtpInput,
-  w as P,
-  s as PageLoader,
+  B as P,
+  m as PageLoader,
   a as Pagination,
-  R as RadioGroup,
+  V as RadioGroup,
   c as Selectbox,
-  h as Shimmer,
+  b as Shimmer,
   p as Spinner,
-  D as Textarea,
-  b as Timer,
+  G as Textarea,
+  S as Timer,
   t as Toast,
   L as VideoPlayer,
-  q as colors,
-  E as icons,
-  z as utils
+  z as colors,
+  K as icons,
+  E as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.6.2",
+  "version": "2.8.0",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",
@@ -43,6 +43,8 @@
     "textarea",
     "checkbox",
     "radio",
+    "image",
+    "video-player",
     "file-uploader",
     "notification",
     "dropdown",