meticulous-ui 2.2.9 → 2.3.0

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/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/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.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -36,6 +36,9 @@
     "button",
     "input",
     "textarea",
+    "checkbox",
+    "radio",
+    "file-uploader",
     "notification",
     "dropdown",
     "spinner",