meticulous-ui 2.2.9 → 2.3.1

package/README.md

@@ -47,20 +47,21 @@ export default App;
 
 ## 📦 Components
 
-| Component     | Description                                        |
-| ------------- | -------------------------------------------------- |
-| `Pagination`  | Fully responsive pagination component              |
-| `Toast`       | Push 4 types of notifications on screen            |
-| `Timer`       | Renders analog / digital clock with alarm          |
-| `OtpInput`    | Gives inputs to enter and edit OTP                 |
-| `VideoPlayer` | Renders video with keyboard shortcuts              |
-| `Input`       | Renders input box to let user enter input          |
-| `Checkbox`    | Renders checkbox to let user give boolean value    |
-| `RadioGroup`  | Renders radio options ina group to let user select |
-| `Textarea`    | Renders textarea box to let user enter description |
-| `Dropdown`    | Renders dropdown to select from options            |
-| `Spinner`     | Renders a spinner to show the loading state        |
-| `Button`      | Renders a button to click & take an action         |
+| Component      | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| `Pagination`   | Fully responsive pagination component                  |
+| `Toast`        | Push 4 types of notifications on screen                |
+| `Timer`        | Renders analog / digital clock with alarm              |
+| `OtpInput`     | Gives inputs to enter and edit OTP                     |
+| `VideoPlayer`  | Renders video with keyboard shortcuts                  |
+| `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    |
+| `FileUploader` | Renders a button type input from where user can upload |
+| `Textarea`     | Renders textarea box to let user enter description     |
+| `Dropdown`     | Renders dropdown to select from options                |
+| `Spinner`      | Renders a spinner to show the loading state            |
+| `Button`       | Renders a button to click & take an action             |
 
 ## 📦 Icon Components
 

package/components/Button/Button.js

@@ -1,53 +1,55 @@
 import { j as o } from "../../_virtual/jsx-runtime.js";
-import C from "../../node_modules/lodash-es/get.js";
-import $ from "../Spinner/Spinner.js";
-import j from "../../colors/index.js";
+import $ from "../../node_modules/lodash-es/get.js";
+import j from "../Spinner/Spinner.js";
+import g from "../../colors/index.js";
 import h from "../../colors/blue.js";
-import { ButtonWrapper as g, SpinnerWrapper as u, Content as w, ButtonContainer as b } from "./styles.js";
-import v from "../Ripple/Ripple.js";
-import I from "../../colors/white.js";
-import B from "../../colors/grey.js";
-import { MEDIUM as E, SIZE as L } from "./constants.js";
-const R = ({ theme: t, children: i }) => /* @__PURE__ */ o.jsx(v, { rippleColor: t.m100, children: i }), G = (t) => {
+import { ButtonWrapper as u, SpinnerWrapper as w, Content as b, ButtonContainer as v } from "./styles.js";
+import I from "../Ripple/Ripple.js";
+import B from "../../colors/white.js";
+import E from "../../colors/grey.js";
+import { MEDIUM as L, SIZE as R } from "./constants.js";
+const S = ({ theme: t, children: e }) => /* @__PURE__ */ o.jsx(I, { rippleColor: t.m100, children: e }), H = (t) => {
   const {
-    children: i,
-    theme: e = h,
-    size: c = E,
+    children: e,
+    theme: i = h,
+    size: c = L,
     width: n,
-    leftIcon: S,
-    rightIcon: z,
-    isLoading: r
-  } = t || {}, { m400: p, m500: a, m600: f } = C(j, e, h), { height: l, width: s, font: x } = L[c] || {}, m = e !== "white" ? I : B.m600, d = /* @__PURE__ */ o.jsx(
-    g,
+    leftIcon: z,
+    rightIcon: M,
+    isLoading: r,
+    ...p
+  } = t || {}, { m400: a, m500: f, m600: x } = $(g, i, h), { height: l, width: s, font: C } = R[c] || {}, m = i !== "white" ? B : E.m600, d = /* @__PURE__ */ o.jsx(
+    u,
     {
-      $hoverColor: a,
-      $activeColor: f,
-      $selectedColor: p,
+      ...p,
+      $hoverColor: f,
+      $activeColor: x,
+      $selectedColor: a,
       $height: l,
       $width: n || s,
       disabled: t.disabled,
       $isLoading: r,
-      children: r ? /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx($, { size: "small", color: m }) }) : /* @__PURE__ */ o.jsx(
-        w,
+      children: r ? /* @__PURE__ */ o.jsx(w, { children: /* @__PURE__ */ o.jsx(j, { size: "small", color: m }) }) : /* @__PURE__ */ o.jsx(
+        b,
         {
           $textColor: m,
-          $font: x,
-          children: i
+          $font: C,
+          children: e
         }
       )
     }
   );
   return /* @__PURE__ */ o.jsx(
-    b,
+    v,
     {
       $height: l,
       $width: n || s,
       disabled: t.disabled,
       $isLoading: r,
-      children: r ? d : /* @__PURE__ */ o.jsx(R, { theme: e, children: d })
+      children: r ? d : /* @__PURE__ */ o.jsx(S, { theme: i, children: d })
     }
   );
 };
 export {
-  G as default
+  H as default
 };

package/components/Button/styles.js

@@ -1,19 +1,19 @@
 import e, { css as n } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import i from "../../colors/grey.js";
-const s = e.button`
-  height: ${({ $height: r }) => r}rem;
-  width: ${({ $width: r }) => r}rem;
+const d = e.button`
+  height: ${({ $height: o }) => o}rem;
+  width: ${({ $width: o }) => o}rem;
   border-radius: 0.6rem;
   border: none;
   padding: 0.6rem 0.4rem;
-  background-color: ${({ $selectedColor: r, disabled: o }) => o ? i.m500 : r};
-  cursor: ${({ disabled: r, $isLoading: o }) => r ? "not-allowed" : o ? "auto" : "pointer"};
+  background-color: ${({ $selectedColor: o, disabled: r }) => r ? i.m500 : o};
+  cursor: ${({ disabled: o, $isLoading: r }) => o ? "not-allowed" : r ? "auto" : "pointer"};
 
-  ${({ $isLoading: r }) => r && n`
+  ${({ $isLoading: o }) => o && n`
       pointer-events: none;
     `};
 
-  ${({ disabled: r, $isLoading: o }) => !(r || o) && n`
+  ${({ disabled: o, $isLoading: r }) => !(o || r) && n`
       &:hover {
         background-color: ${({ $hoverColor: t }) => t};
       }
@@ -22,26 +22,31 @@ const s = e.button`
         background-color: ${({ $activeColor: t }) => t};
       }
     `};
+
+  &:focus-visible {
+    outline: none;
+  }
 `, m = e.div`
-  font-size: ${({ $font: r }) => r}rem;
+  font-size: ${({ $font: o }) => o}rem;
   font-weight: 500;
   max-width: 100%;
   overflow: hidden;
-  color: ${({ $textColor: r }) => r};
+  color: ${({ $textColor: o }) => o};
 `, c = e.div`
-  height: ${({ $height: r }) => r}rem;
-  width: ${({ $width: r }) => r}rem;
+  height: ${({ $height: o }) => o}rem;
+  width: ${({ $width: o }) => o}rem;
   display: inline-block;
   position: relative;
   border-radius: 0.6rem;
 
-  ${({ disabled: r, $isLoading: o }) => !(r || o) && n`
+  ${({ disabled: o, $isLoading: r }) => !(o || r) && n`
       box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
       transition:
         transform 0.2s,
         box-shadow 0.2s;
 
-      &:hover {
+      &:hover,
+      &:focus-within {
         box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
         transform: translateY(-2px);
       }
@@ -54,7 +59,7 @@ const s = e.button`
 `;
 export {
   c as ButtonContainer,
-  s as ButtonWrapper,
+  d as ButtonWrapper,
   m as Content,
   l as SpinnerWrapper
 };

package/components/Icons/Link/index.js

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

package/components/Input/FileUploader/FileUploader.js

@@ -0,0 +1,76 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import { useRef as U } from "react";
+import a from "../../../node_modules/lodash-es/get.js";
+import { UploadBtnContainer as v, HiddenInput as M, Wrapper as W, PWrapper as g } from "./styles.js";
+import y from "../../../colors/white.js";
+import x from "../../../colors/blue.js";
+import B from "../../Icons/Link/Link.js";
+import D from "../../../colors/index.js";
+import F from "../../Ripple/Ripple.js";
+import { SIZE as H, MEDIUM as Z } from "./constants.js";
+const q = ({ theme: t, children: r }) => /* @__PURE__ */ o.jsx(F, { rippleColor: t.m100, children: r }), X = ({
+  label: t,
+  labelColor: r = y,
+  theme: s = x,
+  size: j = Z,
+  width: c,
+  isLoading: i,
+  disabled: e,
+  prefixIcon: n = B,
+  suffixIcon: m,
+  type: d = "file",
+  accept: C,
+  isMultiple: R,
+  onChange: k
+}) => {
+  const l = U(null), { m400: w, m500: z, m600: E } = a(D, s, x), { height: f, width: h, font: p } = H[j] || {}, I = () => {
+    var u;
+    !e && !i && ((u = l.current) == null || u.click());
+  }, $ = /* @__PURE__ */ o.jsxs(
+    W,
+    {
+      $selectedColor: w,
+      $hoverColor: z,
+      $height: f,
+      $width: c || h,
+      $activeColor: E,
+      disabled: e,
+      isLoading: i,
+      type: "button",
+      onClick: I,
+      children: [
+        n && /* @__PURE__ */ o.jsx(n, { color: r, size: p + 19 }),
+        /* @__PURE__ */ o.jsx(
+          g,
+          {
+            color: r,
+            size: `${p}rem`,
+            $prefixIcon: !!n,
+            $suffixIcon: !!m,
+            $iconSize: p + 19,
+            title: t,
+            children: t
+          }
+        ),
+        m && /* @__PURE__ */ o.jsx(m, { color: r, size: p + 19 })
+      ]
+    }
+  );
+  return /* @__PURE__ */ o.jsxs(v, { $height: f, $width: c || h, disabled: e, $isLoading: i, children: [
+    /* @__PURE__ */ o.jsx(
+      M,
+      {
+        ref: l,
+        type: d,
+        accept: C,
+        multiple: R,
+        disabled: e,
+        onChange: k
+      }
+    ),
+    i ? $ : /* @__PURE__ */ o.jsx(q, { theme: s, children: $ })
+  ] });
+};
+export {
+  X as default
+};

package/components/Input/FileUploader/constants.js

@@ -0,0 +1,29 @@
+const t = "small", h = "medium", o = "large", e = "ex-large", i = {
+  [t]: {
+    height: 2.8,
+    width: 6.75,
+    font: 1
+  },
+  [h]: {
+    height: 3.2,
+    width: 7.5,
+    font: 1.2
+  },
+  [o]: {
+    height: 3.6,
+    width: 8.25,
+    font: 1.4
+  },
+  [e]: {
+    height: 4,
+    width: 9,
+    font: 1.6
+  }
+};
+export {
+  e as EX_LARGE,
+  o as LARGE,
+  h as MEDIUM,
+  i as SIZE,
+  t as SMALL
+};

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

@@ -1,28 +1,35 @@
-import { j as f } from "../../_virtual/jsx-runtime.js";
-import { useRef as u } from "react";
+import { j as m } from "../../_virtual/jsx-runtime.js";
+import { useRef as g } from "react";
 /* empty css           */
 const y = ({
-  children: s,
-  rippleColor: c = "rgba(255, 255, 255, 0.3)",
-  className: l = "",
-  ...p
+  children: l,
+  rippleColor: p = "rgba(255, 255, 255, 0.3)",
+  className: a = "",
+  ...d
 }) => {
-  const o = u(null), a = (r) => {
-    const n = o.current;
-    if (!n) return;
-    const t = document.createElement("span"), e = n.getBoundingClientRect(), i = Math.max(e.width, e.height), d = r.clientX - e.left - i / 2, m = r.clientY - e.top - i / 2;
-    t.style.width = t.style.height = `${i}px`, t.style.left = `${d}px`, t.style.top = `${m}px`, t.style.backgroundColor = c, t.classList.add("ripple-effect"), n.appendChild(t), t.addEventListener("animationend", () => {
-      t.remove();
-    });
+  const r = g(null), c = (t, n) => {
+    const i = r.current;
+    if (!i) return;
+    const e = document.createElement("span"), s = i.getBoundingClientRect(), o = Math.max(s.width, s.height);
+    e.style.width = e.style.height = `${o}px`, e.style.left = `${t - o / 2}px`, e.style.top = `${n - o / 2}px`, e.style.backgroundColor = p, e.classList.add("ripple-effect"), i.appendChild(e), e.addEventListener("animationend", () => e.remove());
+  }, u = (t) => {
+    if (t.detail === 0) return;
+    const n = r.current.getBoundingClientRect();
+    c(t.clientX - n.left, t.clientY - n.top);
+  }, f = (t) => {
+    if (t.key !== "Enter" && t.key !== " ") return;
+    const n = r.current.getBoundingClientRect();
+    c(n.width / 2, n.height / 2);
   };
-  return /* @__PURE__ */ f.jsx(
+  return /* @__PURE__ */ m.jsx(
     "div",
     {
-      ref: o,
-      className: `ripple-container ${l}`,
-      onClick: a,
-      ...p,
-      children: s
+      ref: r,
+      className: `ripple-container ${a}`,
+      onClick: u,
+      onKeyDown: f,
+      ...d,
+      children: l
     }
   );
 };

package/index.js

@@ -1,46 +1,48 @@
-import { default as a } from "./components/Pagination/Pagination.js";
+import { default as t } from "./components/Pagination/Pagination.js";
 import { default as r } from "./components/Toast/Toast.js";
 import { default as p } from "./components/Spinner/Spinner.js";
-import { default as s } from "./components/OtpInput/OtpInput.js";
-import { default as l } from "./components/Dropdown/Dropdown.js";
+import { default as u } from "./components/OtpInput/OtpInput.js";
+import { default as s } from "./components/Dropdown/Dropdown.js";
 import { default as m } from "./components/Button/Button.js";
-import { default as i } from "./components/Timer/Timer.js";
+import { default as n } from "./components/Timer/Timer.js";
 import { default as c } from "./components/VideoPlayer/VideoPlayer.js";
 import { default as T } from "./components/Typography/P/P.js";
 import { default as b } from "./components/Input/Input/Input.js";
 import { default as h } from "./components/Input/Textarea/Textarea.js";
 import { default as w } from "./components/Input/Checkbox/Checkbox.js";
 import { default as B } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as D } from "./colors/index.js";
-import { default as O } from "./utils/index.js";
-import { default as S } from "./components/Icons/index.js";
+import { default as D } from "./components/Input/FileUploader/FileUploader.js";
+import { default as G } from "./colors/index.js";
+import { default as R } from "./utils/index.js";
+import { default as U } from "./components/Icons/index.js";
 import { default as j } from "./components/Typography/Headings/H1.js";
 import { default as v } from "./components/Typography/Headings/H2.js";
 import { default as A } from "./components/Typography/Headings/H3.js";
-import { default as F } from "./components/Typography/Headings/H4.js";
-import { default as K } from "./components/Typography/Headings/H5.js";
-import { default as M } from "./components/Typography/Headings/H6.js";
+import { default as J } from "./components/Typography/Headings/H4.js";
+import { default as L } from "./components/Typography/Headings/H5.js";
+import { default as N } from "./components/Typography/Headings/H6.js";
 export {
   m as Button,
   w as Checkbox,
-  l as Dropdown,
+  s as Dropdown,
+  D as FileUploader,
   j as H1,
   v as H2,
   A as H3,
-  F as H4,
-  K as H5,
-  M as H6,
+  J as H4,
+  L as H5,
+  N as H6,
   b as Input,
-  s as OtpInput,
+  u as OtpInput,
   T as P,
-  a as Pagination,
+  t as Pagination,
   B as RadioGroup,
   p as Spinner,
   h as Textarea,
-  i as Timer,
+  n as Timer,
   r as Toast,
   c as VideoPlayer,
-  D as colors,
-  S as icons,
-  O as utils
+  G as colors,
+  U as icons,
+  R as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.2.9",
+  "version": "2.3.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -36,6 +36,9 @@
     "button",
     "input",
     "textarea",
+    "checkbox",
+    "radio",
+    "file-uploader",
     "notification",
     "dropdown",
     "spinner",