meticulous-ui 2.7.0 → 2.8.0

package/README.md

@@ -65,6 +65,7 @@ import blue from 'meticulous-ui/colors/blue';
 | `Timer`        | Renders analog / digital clock with alarm                |
 | `OtpInput`     | Gives inputs to enter and edit OTP                       |
 | `VideoPlayer`  | Renders video with keyboard shortcuts                    |
+| `Image`        | Renders image with shimmer, lower resolution             |
 | `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      |

package/components/Image/Image.js

@@ -0,0 +1,49 @@
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { useState as a } from "react";
+import y from "../Shimmer/Shimmer.js";
+import { ImageWrapper as S, ShimmerOverlay as j, LowResImage as E, StyledImage as R } from "./styles.js";
+const o = (e) => {
+  if (e != null)
+    return typeof e == "number" ? `${e}rem` : e;
+}, k = ({
+  src: e,
+  alt: l = "",
+  width: c = "100%",
+  height: f = "100%",
+  borderRadius: r = "0.4rem",
+  loadLow: m = !1,
+  lowSrc: n,
+  ...u
+}) => {
+  const [i, $] = a(!1), [d, h] = a(!1), [s, L] = a(!1), p = () => $(!0), g = () => h(!0), w = () => L(!0), I = m ? i : d;
+  return /* @__PURE__ */ x(S, { $width: o(c), $height: o(f), $borderRadius: o(r), children: [
+    !s && /* @__PURE__ */ t(j, { $loaded: I, children: /* @__PURE__ */ t(y, { borderRadius: r }) }),
+    m && n && !s && /* @__PURE__ */ t(
+      E,
+      {
+        src: n,
+        alt: "",
+        "aria-hidden": "true",
+        $lowLoaded: i,
+        $loaded: d,
+        $borderRadius: o(r),
+        onLoad: p
+      }
+    ),
+    !s && /* @__PURE__ */ t(
+      R,
+      {
+        src: e,
+        alt: l,
+        $loaded: d,
+        $borderRadius: o(r),
+        onLoad: g,
+        onError: w,
+        ...u
+      }
+    )
+  ] });
+};
+export {
+  k as default
+};

package/components/Image/index.js

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

package/components/Image/styles.js

@@ -0,0 +1,44 @@
+import t from "styled-components";
+const s = t.span`
+  position: relative;
+  display: inline-block;
+  width: ${({ $width: i }) => i};
+  height: ${({ $height: i }) => i};
+  border-radius: ${({ $borderRadius: i }) => i};
+  overflow: hidden;
+`, a = t.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: ${({ $borderRadius: i }) => i};
+  opacity: ${({ $loaded: i }) => i ? 1 : 0};
+  transition: opacity 0.5s ease-in-out;
+`, n = t.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: ${({ $loaded: i }) => i ? 0 : 1};
+  transition: opacity 0.35s ease-out;
+  pointer-events: none;
+`, r = t.img`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.05);
+  filter: ${({ $loaded: i }) => i ? "blur(0px)" : "blur(12px)"};
+  opacity: ${({ $lowLoaded: i, $loaded: e }) => i && !e ? 1 : 0};
+  transition:
+    opacity 0.5s ease-in-out,
+    filter 0.5s ease-in-out;
+`;
+export {
+  s as ImageWrapper,
+  r as LowResImage,
+  n as ShimmerOverlay,
+  a as StyledImage
+};

package/components/Input/FileUploader/FileUploader.js

@@ -80,7 +80,17 @@ const G = ({ theme: e, children: l }) => /* @__PURE__ */ o(Z, { rippleColor: e.m
       ]
     }
   );
-  return /* @__PURE__ */ o(j, { $height: h, $width: s || a, disabled: r, $isLoading: t, ...K, children: t || r ? w : /* @__PURE__ */ o(G, { theme: p, children: w }) });
+  return /* @__PURE__ */ o(
+    j,
+    {
+      $height: h,
+      $width: s || a,
+      disabled: r,
+      $isLoading: t,
+      ...K,
+      children: t || r ? w : /* @__PURE__ */ o(G, { theme: p, children: w })
+    }
+  );
 };
 export {
   oo as default

package/components/Input/Radio/Radio.js

@@ -2,7 +2,17 @@ import { jsxs as u, jsx as n } from "react/jsx-runtime";
 import $ from "../../Typography/P/P.js";
 import m from "../../../colors/blue.js";
 import { Wrapper as y, HiddenInput as D, CircleBorder as w, Circle as x } from "./styles.js";
-const C = ({ label: s, value: r, name: p, color: e, textColor: f, isSelected: d, disabled: t, onChange: i, ...c }) => {
+const C = ({
+  label: s,
+  value: r,
+  name: p,
+  color: e,
+  textColor: f,
+  isSelected: d,
+  disabled: t,
+  onChange: i,
+  ...c
+}) => {
   const o = (e == null ? void 0 : e.m500) ?? m.m500, a = (e == null ? void 0 : e.m800) ?? m.m800;
   return /* @__PURE__ */ u(y, { $disabled: t, $focusShade: a, ...c, children: [
     /* @__PURE__ */ n(

package/components/Shimmer/Shimmer.js

@@ -3,7 +3,23 @@ import { ShimmerWrapper as u } from "./styles.js";
 const e = (r) => {
   if (r != null)
     return typeof r == "number" ? `${r}rem` : r;
-}, p = ({ width: r = "100%", height: t = "100%", borderRadius: o = "0.4rem", label: i = "Loading...", ...m }) => /* @__PURE__ */ n(u, { role: "status", "aria-label": i, $width: e(r), $height: e(t), $borderRadius: e(o), ...m });
+}, p = ({
+  width: r = "100%",
+  height: t = "100%",
+  borderRadius: o = "0.4rem",
+  label: i = "Loading...",
+  ...m
+}) => /* @__PURE__ */ n(
+  u,
+  {
+    role: "status",
+    "aria-label": i,
+    $width: e(r),
+    $height: e(t),
+    $borderRadius: e(o),
+    ...m
+  }
+);
 export {
   p as default
 };

package/components/Toast/Toast.js

@@ -9,7 +9,15 @@ const R = () => {
   o(!0), setTimeout(() => {
     e(!1), t();
   }, 500);
-}, b = ({ type: o = L, visible: e = !0, duration: t = 5, onExpire: a = R, title: l, subtitle: i, ...d }) => {
+}, 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);

package/components/VideoPlayer/VideoPlayer.js

@@ -4,7 +4,14 @@ 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 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." }),

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.7.0",
+  "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",