meticulous-ui 2.5.1 → 2.5.3

package/README.md

@@ -63,6 +63,7 @@ export default App;
 | `SelectBox`    | Renders selectbox to select multiple values from options |
 | `Spinner`      | Renders a spinner to show the loading state              |
 | `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               |
 
 ## 📦 Icon Components

package/components/PageLoader/PageLoader.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import l from "lodash-es/get";
+import { getColor as i } from "../Input/Checkbox/helpers.js";
+import { PageLdr as s } from "./styles.js";
+import p from "../../colors/blue.js";
+const d = ({ theme: r = "blue", color: o, ...a }) => {
+  const e = i(r), m = o || l(e, "m500", p.m500);
+  return /* @__PURE__ */ t(
+    s,
+    {
+      ...a,
+      $color: m,
+      role: "progressbar",
+      "aria-label": "Loading",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }
+  );
+};
+export {
+  d as default
+};

package/components/PageLoader/index.js

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

package/components/PageLoader/styles.js

@@ -0,0 +1,14 @@
+import o, { keyframes as t } from "styled-components";
+const a = t`
+  0%   { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+`, i = o.div`
+  width: 90%;
+  height: 3px;
+  background-color: ${({ $color: r }) => r};
+  transform-origin: left;
+  animation: ${a} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+`;
+export {
+  i as PageLdr
+};

package/components/Shimmer/Shimmer.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+/* empty css            */
+const r = (e) => {
+  if (e != null)
+    return typeof e == "number" ? `${e}rem` : e;
+}, n = ({ width: e = "", height: t = "", label: i = "Loading..." }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: "shimmer",
+    role: "status",
+    "aria-label": i,
+    style: {
+      width: r(e),
+      height: r(t)
+    }
+  }
+);
+export {
+  n as default
+};

package/components/Shimmer/index.js

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

package/index.js

@@ -1,52 +1,56 @@
-import { default as t } from "./components/Pagination/Pagination.js";
-import { default as r } from "./components/Toast/Toast.js";
+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 d } from "./components/Loader/Loader.js";
-import { default as s } from "./components/OtpInput/OtpInput.js";
-import { default as m } from "./components/Dropdown/Dropdown.js";
-import { default as n } from "./components/Selectbox/Selectbox.js";
-import { default as c } from "./components/Button/Button.js";
-import { default as T } from "./components/Timer/Timer.js";
-import { default as I } from "./components/VideoPlayer/VideoPlayer.js";
-import { default as g } from "./components/Typography/P/P.js";
-import { default as k } from "./components/Input/Input/Input.js";
-import { default as y } from "./components/Input/Textarea/Textarea.js";
-import { default as C } from "./components/Input/Checkbox/Checkbox.js";
-import { default as F } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as L } from "./components/Input/FileUploader/FileUploader.js";
-import { default as R } from "./colors/index.js";
-import { default as V } from "./utils/index.js";
-import { default as q } from "./components/Icons/index.js";
-import { default as z } from "./components/Typography/Headings/H1.js";
-import { default as E } from "./components/Typography/Headings/H2.js";
-import { default as K } from "./components/Typography/Headings/H3.js";
-import { default as N } from "./components/Typography/Headings/H4.js";
-import { default as W } from "./components/Typography/Headings/H5.js";
-import { default as Y } from "./components/Typography/Headings/H6.js";
+import { default as l } from "./components/Loader/Loader.js";
+import { default as s } 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 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";
 export {
-  c as Button,
-  C as Checkbox,
-  m as Dropdown,
-  L as FileUploader,
-  z as H1,
-  E as H2,
-  K as H3,
-  N as H4,
-  W as H5,
-  Y as H6,
-  k as Input,
-  d as Loader,
-  s as OtpInput,
-  g as P,
-  t as Pagination,
-  F as RadioGroup,
-  n as Selectbox,
+  S as Button,
+  G 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,
+  l as Loader,
+  x as OtpInput,
+  w as P,
+  s as PageLoader,
+  a as Pagination,
+  R as RadioGroup,
+  c as Selectbox,
+  h as Shimmer,
   p as Spinner,
-  y as Textarea,
-  T as Timer,
-  r as Toast,
-  I as VideoPlayer,
-  R as colors,
-  q as icons,
-  V as utils
+  D as Textarea,
+  b as Timer,
+  t as Toast,
+  L as VideoPlayer,
+  q as colors,
+  E as icons,
+  z as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "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",