meticulous-ui 2.5.0 → 2.5.2

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/Input/Radio/styles.js

@@ -1,6 +1,6 @@
-import e, { css as r } from "styled-components";
+import e, { css as t } from "styled-components";
 import i from "../../../colors/grey.js";
-const a = e.div`
+const p = e.div`
   position: absolute;
   width: 0.7rem;
   height: 0.7rem;
@@ -8,15 +8,18 @@ const a = e.div`
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  background-color: ${({ $isSelected: t, $shade: o }) => t ? o : "transparent"};
+  background-color: ${({ $isSelected: o, $shade: r }) => o ? r : "transparent"};
   transition: background-color 0.35s ease;
-`, n = e.div`
+`, s = e.div`
   width: 1.1rem;
   height: 1.1rem;
-  border: 1px solid ${({ $isSelected: t, $shade: o }) => t ? o : i.m900};
+  border: 1px solid ${({ $isSelected: o, $shade: r }) => o ? r : i.m900};
   border-radius: 50%;
   position: relative;
-`, l = e.input`
+  transition:
+    border-color 0.5s ease,
+    box-shadow 0.5s ease;
+`, d = e.input`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -26,28 +29,27 @@ const a = e.div`
   white-space: nowrap;
   opacity: 0;
   margin: 0;
-`, d = e.label`
+`, c = e.label`
   display: flex;
   align-items: center;
   gap: 0.8rem;
   width: max-content;
 
-  &:focus-within ${n} {
-    outline: 2px solid ${({ $focusShade: t }) => t || i.m900};
-    outline-offset: 2px;
+  &:focus-within ${s} {
+    box-shadow: 0 0 0 1px ${({ $focusShade: o }) => o || i.m900};
   }
 
-  ${({ $disabled: t }) => t ? r`
+  ${({ $disabled: o }) => o ? t`
           pointer-events: none;
           opacity: 0.4;
           cursor: not-allowed;
-        ` : r`
+        ` : t`
           cursor: pointer;
         `}
 `;
 export {
-  a as Circle,
-  n as CircleBorder,
-  l as HiddenInput,
-  d as Wrapper
+  p as Circle,
+  s as CircleBorder,
+  d as HiddenInput,
+  c as Wrapper
 };

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/index.js

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

package/package.json

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