meticulous-ui 1.6.2 → 1.7.1

package/README.md

@@ -47,14 +47,16 @@ 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 |
+| 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   |
+| `Dropdown`    | Renders dropdown to select from options     |
+| `Spinner`     | Renders a spinner to show the loading state |
 
 ## 📦 Icon Components
 

package/components/Dropdown/Dropdown.js

@@ -0,0 +1,77 @@
+import { j as o } from "../../_virtual/jsx-runtime.js";
+import { useState as a, useRef as h, useEffect as D, useLayoutEffect as k, createElement as y } from "react";
+import z from "../../node_modules/lodash-es/get.js";
+import p from "../../colors/grey.js";
+import H from "../MenuItem/MenuItem.js";
+import L from "../../colors/index.js";
+import P from "../../colors/blue.js";
+import I from "../Spinner/Spinner.js";
+import { DropdownWrapper as M, Box as q, PWrapper as A, ChevronDownWrapper as F, OptionWrapper as G, SpinnerWrapper as J } from "./styles.js";
+const oe = ({
+  options: l,
+  onChange: g,
+  value: r,
+  width: n = "20rem",
+  menuHeight: b = "20rem",
+  placeholder: x,
+  theme: $ = "blue",
+  isLoading: f,
+  isDisabled: w,
+  loaderColor: j
+}) => {
+  const [i, c] = a(!1), [C, u] = a("bottom"), s = h(null), m = h(null), R = () => {
+    c((e) => !e);
+  }, O = (e) => {
+    e !== r && (g(e), c(!1));
+  };
+  D(() => {
+    const e = (t) => {
+      s.current && !s.current.contains(t.target) && c(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), k(() => {
+    if (i && m.current && s.current) {
+      const e = m.current.getBoundingClientRect(), t = s.current.getBoundingClientRect(), d = window.innerHeight - t.bottom;
+      d < e.height + 8 && t.top > d ? u("top") : u("bottom");
+    }
+  }, [i]);
+  const {
+    m50: E,
+    m100: S,
+    m200: W,
+    m500: v
+  } = z(L, $, P), B = ({ value: e, label: t }) => /* @__PURE__ */ y(
+    H,
+    {
+      value: e,
+      label: t,
+      onSelect: O,
+      isSelected: e === r,
+      key: e,
+      width: n,
+      selectedColor: W,
+      hoverColor: E,
+      activeColor: S
+    }
+  );
+  return /* @__PURE__ */ o.jsxs(
+    M,
+    {
+      ref: s,
+      $width: n,
+      $isLoading: f,
+      $isDisabled: w,
+      children: [
+        /* @__PURE__ */ o.jsxs(q, { $width: n, onClick: R, $isOpen: i, $border: v, children: [
+          /* @__PURE__ */ o.jsx(A, { $width: n, color: r ? p.m700 : p.m500, size: "1.2rem", children: r ? l.find(({ value: e }) => r === e)?.label : x }),
+          /* @__PURE__ */ o.jsx(F, { color: p.m500, size: 22, $isOpen: i })
+        ] }),
+        i && /* @__PURE__ */ o.jsx(G, { ref: m, $width: n, $height: b, $top: C === "top", children: l.map(B) }),
+        f && /* @__PURE__ */ o.jsx(J, { children: /* @__PURE__ */ o.jsx(I, { size: "small", color: j }) })
+      ]
+    }
+  );
+};
+export {
+  oe as default
+};

package/components/Dropdown/constants.js

@@ -0,0 +1,5 @@
+import o from "../../colors/grey.js";
+const m = o.m500;
+export {
+  m as DEFAULT_BORDER
+};

package/components/Dropdown/index.js

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

package/components/Dropdown/styles.js

@@ -0,0 +1,79 @@
+import o, { css as e, keyframes as i } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import n from "../../colors/grey.js";
+import p from "../Typography/P/P.js";
+import m from "../Icons/ChevronDown/ChevronDown.js";
+import { DEFAULT_BORDER as a } from "./constants.js";
+import s from "../../colors/white.js";
+const d = i`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(180deg);
+  }
+`, $ = o.div`
+  max-width: ${({ $width: r }) => r};
+  position: relative;
+
+  ${({ $isLoading: r }) => r && e`
+      pointer-events: none;
+      opacity: 0.8;
+    `}
+
+  ${({ $isDisabled: r }) => r && e`
+      pointer-events: none;
+    `}
+`, v = o.div`
+  height: 2rem;
+  width: ${({ $width: r }) => r};
+  border-radius: 0.6rem;
+  border: ${({ $isOpen: r, $border: t }) => r ? `2px solid ${t}` : `1px solid ${a}`};
+  padding: 0.4rem 0.6rem 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`, g = o(p)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(${({ $width: r }) => r} - 2rem);
+  pointer-events: none;
+`, u = o(m)`
+  ${({ $isOpen: r }) => r && e`
+      animation: ${d} 0.2s linear;
+    `};
+  transform: rotate(${({ $isOpen: r }) => r ? 180 : 0}deg);
+`, x = o.div`
+  border: 1px solid ${n.m900};
+  width: calc(${({ $width: r }) => r} + 1rem);
+  max-height: ${({ $height: r }) => r};
+  overflow: auto;
+  position: absolute;
+  z-index: 1000;
+  background-color: ${s};
+
+  ${({ $top: r }) => r ? e`
+          bottom: 100%;
+          border-top-right-radius: 0.6rem;
+          border-top-left-radius: 0.6rem;
+          border-bottom-width: 0;
+        ` : e`
+          top: 100%;
+          border-bottom-right-radius: 0.6rem;
+          border-bottom-left-radius: 0.6rem;
+          border-top-width: 0;
+        `}
+`, y = o.div`
+  position: absolute;
+  top: 0.7rem;
+  right: 1rem;
+`;
+export {
+  v as Box,
+  u as ChevronDownWrapper,
+  $ as DropdownWrapper,
+  x as OptionWrapper,
+  g as PWrapper,
+  y as SpinnerWrapper
+};

package/components/MenuItem/MenuItem.js

@@ -0,0 +1,38 @@
+import { j as m } from "../../_virtual/jsx-runtime.js";
+import i from "../../colors/grey.js";
+import r from "../../colors/blue.js";
+import $ from "../../colors/white.js";
+import { Wrapper as h, PWrapper as u } from "./styles.js";
+const w = ({
+  value: l,
+  label: o,
+  width: e = "20rem",
+  isSelected: t,
+  defaultColor: p = $,
+  selectedColor: c = r.m200,
+  hoverColor: n = r.m50,
+  activeColor: s = r.m100,
+  size: a = "1.2rem",
+  onSelect: d
+}) => {
+  const f = () => {
+    d(l);
+  };
+  return /* @__PURE__ */ m.jsx(
+    h,
+    {
+      $isSelected: t,
+      $width: e,
+      $defaultColor: p,
+      $selectedColor: c,
+      $hoverColor: n,
+      $activeColor: s,
+      onClick: f,
+      title: o,
+      children: /* @__PURE__ */ m.jsx(u, { size: a, color: t ? i.m700 : i.m500, $width: e, children: o })
+    }
+  );
+};
+export {
+  w as default
+};

package/components/MenuItem/styles.js

@@ -0,0 +1,26 @@
+import t from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import a from "../Typography/P/P.js";
+const p = t.div`
+  width: ${({ $width: r }) => r};
+  background-color: ${({ $isSelected: r, $defaultColor: o, $selectedColor: e }) => r ? e : o};
+  cursor: ${({ $isSelected: r }) => r ? "auto" : "pointer"};
+  padding: 0.6rem 0 0.8rem 1rem;
+  margin-top: 0.1rem;
+
+  &:hover {
+    background-color: ${({ $isSelected: r, $hoverColor: o, $selectedColor: e }) => r ? e : o};
+  }
+
+  &:active {
+    background-color: ${({ $isSelected: r, $activeColor: o, $selectedColor: e }) => r ? e : o};
+  }
+`, d = t(a)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(${({ $width: r }) => r} - 2rem);
+`;
+export {
+  d as PWrapper,
+  p as Wrapper
+};

package/components/Spinner/Spinner.js

@@ -0,0 +1,25 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import n from "../../node_modules/lodash-es/get.js";
+import { SpinnerWrapper as p } from "./styles.js";
+import i from "../../colors/index.js";
+import l from "../../colors/green.js";
+const s = {
+  small: {
+    $border: "0.25rem",
+    $length: "1rem"
+  },
+  medium: {
+    $border: "0.5rem",
+    $length: "2rem"
+  },
+  large: {
+    $border: "0.75rem",
+    $length: "3rem"
+  }
+}, c = ({ color: r = "green", size: e = "medium" }) => {
+  const { $border: m, $length: o } = s[e];
+  return /* @__PURE__ */ t.jsx(p, { $color: n(i, r, l)?.m500, $border: m, $length: o });
+};
+export {
+  c as default
+};

package/components/Spinner/index.js

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

package/components/Spinner/styles.js

@@ -0,0 +1,19 @@
+import o, { keyframes as e } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const i = e`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`, a = o.div`
+  border: ${({ $border: r }) => r} solid #f3f3f3;
+  border-top: ${({ $border: r, $color: t }) => `${r} solid ${t}`};
+  border-radius: 50%;
+  width: ${({ $length: r }) => r};
+  height: ${({ $length: r }) => r};
+  animation: ${i} 1s linear infinite;
+`;
+export {
+  a as SpinnerWrapper
+};

package/components/Typography/P/P.js

@@ -0,0 +1,10 @@
+import { j as i } from "../../../_virtual/jsx-runtime.js";
+import { PWrapper as s } from "./styles.js";
+import m from "../../../node_modules/lodash-es/omit.js";
+const p = (o) => {
+  const { color: r, size: t, children: e } = o || {};
+  return /* @__PURE__ */ i.jsx(s, { $color: r, $size: t, ...m(o, ["color", "size", "children"]), children: e });
+};
+export {
+  p as default
+};

package/components/Typography/P/index.js

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

package/components/Typography/P/styles.js

@@ -0,0 +1,11 @@
+import r from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import t from "../../../colors/black.js";
+const e = r.p`
+  font-size: ${({ $size: o }) => o || "1.2rem"};
+  color: ${({ $color: o }) => o || t};
+  margin: 0;
+  height: auto;
+`;
+export {
+  e as PWrapper
+};

package/index.js

@@ -1,16 +1,20 @@
 import { default as a } from "./components/Pagination/Pagination.js";
 import { default as e } from "./components/Toast/Toast.js";
-import { default as s } from "./components/OtpInput/OtpInput.js";
-import { default as u } from "./components/Input/Input/Input.js";
-import { default as d } from "./colors/index.js";
-import { default as x } from "./utils/index.js";
-import { default as i } from "./components/Icons/index.js";
+import { default as p } from "./components/Spinner/Spinner.js";
+import { default as u } from "./components/OtpInput/OtpInput.js";
+import { default as d } from "./components/Dropdown/Dropdown.js";
+import { default as x } from "./components/Input/Input/Input.js";
+import { default as i } from "./colors/index.js";
+import { default as I } from "./utils/index.js";
+import { default as w } from "./components/Icons/index.js";
 export {
-  u as Input,
-  s as OtpInput,
+  d as Dropdown,
+  x as Input,
+  u as OtpInput,
   a as Pagination,
+  p as Spinner,
   e as Toast,
-  d as colors,
-  i as icons,
-  x as utils
+  i as colors,
+  w as icons,
+  I as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.6.2",
+  "version": "1.7.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {