meticulous-ui 2.2.8 → 2.2.9

package/components/Dropdown/Dropdown.js

@@ -1,56 +1,57 @@
 import { j as r } from "../../_virtual/jsx-runtime.js";
-import { useState as C, useRef as S, useMemo as M, useEffect as d, useLayoutEffect as ee, useCallback as te, createElement as ne } from "react";
-import re from "../../node_modules/lodash-es/get.js";
+import { useState as C, useRef as S, useMemo as ee, useEffect as d, useLayoutEffect as te, useCallback as ne, createElement as re } from "react";
+import se from "../../node_modules/lodash-es/get.js";
 import I from "../../colors/grey.js";
 import oe from "../MenuItem/MenuItem.js";
-import se from "../../colors/index.js";
-import ie from "../../colors/blue.js";
-import F from "../Spinner/Spinner.js";
-import { DropdownWrapper as ce, Box as le, PWrapper as fe, ChevronDownWrapper as ue, OptionWrapper as ae, SearchContainer as pe, SearchIcon as de, SearchInput as me, OptionsList as he, LoadMoreSentinel as xe, SpinnerWrapper as be } from "./styles.js";
-const ge = (o) => {
-  if (typeof o != "string") return o;
-  if (o.endsWith("px")) return parseFloat(o);
-  if (o.endsWith("rem")) {
-    const E = parseFloat(o), i = parseFloat(getComputedStyle(document.documentElement).fontSize);
+import ie from "../../colors/index.js";
+import ce from "../../colors/blue.js";
+import P from "../Spinner/Spinner.js";
+import { DropdownWrapper as le, Box as fe, PWrapper as ue, ChevronDownWrapper as pe, OptionWrapper as ae, SearchContainer as de, SearchIcon as me, SearchInput as he, OptionsList as xe, LoadMoreSentinel as be, SpinnerWrapper as ge } from "./styles.js";
+const we = (s) => {
+  if (typeof s != "string") return s;
+  if (s.endsWith("px")) return parseFloat(s);
+  if (s.endsWith("rem")) {
+    const E = parseFloat(s), i = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return E * i;
   }
-  return parseFloat(o);
-}, ye = ({
-  options: o,
+  return parseFloat(s);
+}, De = ({
+  options: s,
   onChange: E,
   value: i,
   width: m = "20rem",
   menuHeight: O = "20rem",
-  placeholder: P,
-  theme: A = "blue",
+  placeholder: A,
+  theme: B = "blue",
   isLoading: $,
   isDisabled: v,
   loaderColor: y,
   searchable: h = !1,
-  onLoadMore: l,
+  onLoadMore: c,
   hasMore: x = !1,
-  isLoadingMore: a = !1,
-  searchPh: B = "Search..."
+  isLoadingMore: p = !1,
+  searchPh: H = "Search..."
 }) => {
-  const [n, j] = C(!1), [H, V] = C("bottom"), [b, D] = C(""), [f, p] = C(-1), g = S(null), w = S(null), k = S(null), R = S(null), K = S(!0), Q = () => j((e) => !e), z = (e) => {
+  var F;
+  const [n, j] = C(!1), [V, K] = C("bottom"), [b, D] = C(""), [f, a] = C(-1), g = S(null), w = S(null), k = S(null), R = S(null), Q = S(!0), q = () => j((e) => !e), z = (e) => {
     e !== i && (E(e), j(!1));
-  }, c = M(() => {
-    if (!h || !b.trim()) return o;
+  }, l = ee(() => {
+    if (!h || !b.trim()) return s;
     const e = b.toLowerCase();
-    return o.filter(({ label: t }) => t.toLowerCase().includes(e));
-  }, [o, b, h]);
+    return s.filter(({ label: t }) => t.toLowerCase().includes(e));
+  }, [s, b, h]);
   d(() => {
     if (n) {
-      const e = c.findIndex((t) => t.value === i);
-      if (e !== -1 && !c[e].disabled)
-        p(e);
+      const e = l.findIndex((t) => t.value === i);
+      if (e !== -1 && !l[e].disabled)
+        a(e);
       else {
-        const t = c.findIndex((s) => !s.disabled);
-        p(t);
+        const t = l.findIndex((o) => !o.disabled);
+        a(t);
       }
     } else
-      D(""), p(-1);
-  }, [n, b, c, i]), d(() => {
+      D(""), a(-1);
+  }, [n, b, l, i]), d(() => {
     if (n && f !== -1 && w.current) {
       const e = w.current.children[f];
       e && e.scrollIntoView({
@@ -61,63 +62,63 @@ const ge = (o) => {
   }, [f, n]), d(() => {
     n && h && k.current && k.current.focus();
   }, [n, h]), d(() => {
-    n || (K.current = !0);
+    n || (Q.current = !0);
   }, [n]), d(() => {
     const e = (t) => {
       g.current && !g.current.contains(t.target) && j(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ee(() => {
+  }, []), te(() => {
     if (n && w.current && g.current) {
-      const e = g.current.getBoundingClientRect(), t = window.innerHeight, s = ge(O), u = t - e.bottom;
-      V(
-        u < s + 8 && e.top > u ? "top" : "bottom"
+      const e = g.current.getBoundingClientRect(), t = window.innerHeight, o = we(O), u = t - e.bottom;
+      K(
+        u < o + 8 && e.top > u ? "top" : "bottom"
       );
     }
   }, [n, O]);
-  const q = (e) => {
+  const N = (e) => {
     let t = e + 1;
-    for (; t < c.length; ) {
-      if (!c[t].disabled) return t;
+    for (; t < l.length; ) {
+      if (!l[t].disabled) return t;
       t++;
     }
     return e;
-  }, N = (e) => {
+  }, U = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
-      if (!c[t].disabled) return t;
+      if (!l[t].disabled) return t;
       t--;
     }
     return e;
-  }, U = (e) => {
+  }, G = (e) => {
     if (n)
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = q(f);
-          t === f && x && !a && l?.(), p(t);
+          const t = N(f);
+          t === f && x && !p && (c == null || c()), a(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((u) => N(u));
+          e.preventDefault(), a((u) => U(u));
           break;
         case "Enter":
           e.preventDefault();
-          const s = c[f];
-          s && !s.disabled && z(s.value);
+          const o = l[f];
+          o && !o.disabled && z(o.value);
           break;
         case "Escape":
           j(!1);
           break;
       }
-  }, W = te(() => {
-    x && !a && l && l();
-  }, [x, a, l]);
+  }, W = ne(() => {
+    x && !p && c && c();
+  }, [x, p, c]);
   d(() => {
     const e = R.current;
-    if (!e || !l || !x) return;
+    if (!e || !c || !x) return;
     const t = new IntersectionObserver(
-      ([s]) => {
-        s.isIntersecting && !a && W();
+      ([o]) => {
+        o.isIntersecting && !p && W();
       },
       {
         root: w.current,
@@ -128,70 +129,70 @@ const ge = (o) => {
       }
     );
     return t.observe(e), () => t.disconnect();
-  }, [W, l, x, a]);
+  }, [W, c, x, p]);
   const {
-    m50: G,
-    m100: J,
-    m200: T,
-    m500: X
-  } = re(se, A, ie), Y = (e, t) => () => !e && p(t), Z = ({ value: e, label: t, disabled: s }, u) => /* @__PURE__ */ ne(
+    m50: J,
+    m100: T,
+    m200: X,
+    m500: Y
+  } = se(ie, B, ce), Z = (e, t) => () => !e && a(t), _ = ({ value: e, label: t, disabled: o }, u) => /* @__PURE__ */ re(
     oe,
     {
       value: e,
       label: t,
-      isDisabled: s,
+      isDisabled: o,
       onSelect: z,
-      onMouseEnter: Y(s, u),
+      onMouseEnter: Z(o, u),
       isSelected: e === i,
       isHighlighted: u === f,
       key: e,
       width: m,
-      selectedColor: T,
-      hoverColor: G,
-      activeColor: J
+      selectedColor: X,
+      hoverColor: J,
+      activeColor: T
     }
-  ), _ = (e) => {
+  ), L = (e) => {
     D(e.target.value);
-  }, L = (e) => {
+  }, M = (e) => {
     e.stopPropagation();
   };
   return /* @__PURE__ */ r.jsxs(
-    ce,
+    le,
     {
       ref: g,
       $width: m,
       tabIndex: v ? -1 : 0,
-      onKeyDown: U,
+      onKeyDown: G,
       $isLoading: $,
       $isDisabled: v,
       children: [
-        /* @__PURE__ */ r.jsxs(le, { $width: m, onClick: Q, $isOpen: n, $border: X, children: [
-          /* @__PURE__ */ r.jsx(fe, { $width: m, color: i ? I.m700 : I.m500, size: "1.2rem", children: i ? o.find(({ value: e }) => i === e)?.label : P }),
-          /* @__PURE__ */ r.jsx(ue, { color: I.m500, size: 22, $isOpen: n })
+        /* @__PURE__ */ r.jsxs(fe, { $width: m, onClick: q, $isOpen: n, $border: Y, children: [
+          /* @__PURE__ */ r.jsx(ue, { $width: m, color: i ? I.m700 : I.m500, size: "1.2rem", children: i ? (F = s.find(({ value: e }) => i === e)) == null ? void 0 : F.label : A }),
+          /* @__PURE__ */ r.jsx(pe, { color: I.m500, size: 22, $isOpen: n })
         ] }),
-        /* @__PURE__ */ r.jsxs(ae, { $isOpen: n, $width: m, $height: O, $top: H === "top", children: [
-          h && /* @__PURE__ */ r.jsxs(pe, { onClick: L, children: [
-            /* @__PURE__ */ r.jsx(de, { size: 20, color: I.m600 }),
+        /* @__PURE__ */ r.jsxs(ae, { $isOpen: n, $width: m, $height: O, $top: V === "top", children: [
+          h && /* @__PURE__ */ r.jsxs(de, { onClick: M, children: [
+            /* @__PURE__ */ r.jsx(me, { size: 20, color: I.m600 }),
             /* @__PURE__ */ r.jsx(
-              me,
+              he,
               {
                 ref: k,
                 value: b,
-                onChange: _,
-                placeholder: B
+                onChange: L,
+                placeholder: H
               }
             )
           ] }),
-          /* @__PURE__ */ r.jsxs(he, { ref: w, children: [
-            c.map(Z),
-            l && /* @__PURE__ */ r.jsx(xe, { ref: R, children: a && /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
+          /* @__PURE__ */ r.jsxs(xe, { ref: w, children: [
+            l.map(_),
+            c && /* @__PURE__ */ r.jsx(be, { ref: R, children: p && /* @__PURE__ */ r.jsx(P, { size: "small", color: y }) })
           ] })
         ] }),
-        $ && /* @__PURE__ */ r.jsx(be, { children: /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
+        $ && /* @__PURE__ */ r.jsx(ge, { children: /* @__PURE__ */ r.jsx(P, { size: "small", color: y }) })
       ]
     }
   );
 };
 export {
-  ye as default
+  De as default
 };

package/components/Dropdown/styles.js

@@ -114,9 +114,9 @@ const c = n`
   &::placeholder {
     color: ${t.m400};
   }
-`, L = e(d)`
+`, E = e(d)`
   margin: 0 0.8rem;
-`, O = e.div`
+`, L = e.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -128,12 +128,12 @@ export {
   $ as Box,
   S as ChevronDownWrapper,
   w as DropdownWrapper,
-  O as LoadMoreSentinel,
+  L as LoadMoreSentinel,
   k as OptionWrapper,
   D as OptionsList,
   y as PWrapper,
   z as SearchContainer,
-  L as SearchIcon,
+  E as SearchIcon,
   C as SearchInput,
   W as SpinnerWrapper
 };

package/components/Glass/Glass.js

@@ -0,0 +1,6 @@
+import { j as o } from "../../_virtual/jsx-runtime.js";
+import { GlassWrapper as a } from "./styles.js";
+const p = ({ border: r = "none", borderRadius: s = 0 }) => /* @__PURE__ */ o.jsx(a, { $border: r, $borderRadius: s });
+export {
+  p as default
+};

package/components/Glass/index.js

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

package/components/Glass/styles.js

@@ -0,0 +1,73 @@
+import a from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = a.div`
+  width: 100%;
+  height: 100%;
+  border-radius: ${({ $borderRadius: r }) => r};
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  background:
+    radial-gradient(
+      60rem 22rem at 50% 45%,
+      rgba(20, 40, 20, 0.06),
+      rgba(10, 25, 10, 0.02) 50%,
+      transparent 70%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.18) 0%,
+      rgba(255, 255, 255, 0.06) 40%,
+      rgba(255, 255, 255, 0.03) 100%
+    );
+
+  box-shadow:
+    0 3rem 6rem rgba(7, 22, 10, 0.3),
+    0 2px 0 rgba(255, 255, 255, 0.03) inset;
+
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: rgba(8, 34, 16, 0.95);
+
+  ::before {
+    content: '';
+    position: absolute;
+    left: -12%;
+    top: -24%;
+    width: 62%;
+    height: 62%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.24),
+      rgba(255, 255, 255, 0.06) 40%,
+      transparent 60%
+    );
+    filter: blur(4.6rem);
+    opacity: 0.85;
+    pointer-events: none;
+    transform: translateZ(0);
+  }
+
+  ::after {
+    content: '';
+    position: absolute;
+    right: -6%;
+    bottom: -18%;
+    width: 68%;
+    height: 68%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle at 30% 40%,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0.01) 40%,
+      transparent 70%
+    );
+    filter: blur(5.4rem);
+    opacity: 0.45;
+    pointer-events: none;
+    transform: translateZ(0);
+  }
+`;
+export {
+  e as GlassWrapper
+};

package/components/Icons/Add/index.js

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

package/components/Icons/MediaPauseFilled/index.js

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

package/components/Icons/MediaPlayFilled/index.js

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

package/components/Icons/MediaStopFilled/index.js

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

package/components/Input/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import m from "../../../node_modules/lodash-es/get.js";
+import f from "../../../colors/grey.js";
+import x from "../../Typography/P/P.js";
+import u from "../../../colors/white.js";
+import c from "../../../colors/blue.js";
+import { Wrapper as j, Box as k } from "./styles.js";
+import { getColor as g } from "./helpers.js";
+const E = ({ label: s, value: r, color: n = "blue", textColor: p = f.m700, disabled: e, onChange: t }) => {
+  const h = () => {
+    e || t(!r);
+  }, i = g(n), a = m(i, "m500", c.m500), l = m(i, "m800", c.m800);
+  return /* @__PURE__ */ o.jsxs(j, { onClick: h, $disabled: e, children: [
+    /* @__PURE__ */ o.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: r,
+        onChange: (d) => t(d.target.checked),
+        disabled: e,
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      k,
+      {
+        $value: r,
+        size: 6,
+        color: u,
+        $innerShade: a,
+        $outerShade: l
+      }
+    ),
+    /* @__PURE__ */ o.jsx(x, { color: p, size: "1.2rem", children: s })
+  ] });
+};
+export {
+  E as default
+};

package/components/Input/Checkbox/helpers.js

@@ -0,0 +1,28 @@
+import m from "../../../node_modules/lodash-es/get.js";
+import o from "../../../colors/blue.js";
+import t from "../../../colors/green.js";
+import p from "../../../colors/red.js";
+import i from "../../../colors/yellow.js";
+import e from "../../../colors/orange.js";
+import f from "../../../colors/black.js";
+import l from "../../../colors/grey.js";
+import g from "../../../colors/violet.js";
+import n from "../../../colors/teal.js";
+import a from "../../../colors/purple.js";
+import c from "../../../colors/pink.js";
+const b = {
+  blue: o,
+  green: t,
+  red: p,
+  yellow: i,
+  orange: e,
+  black: f,
+  grey: l,
+  violet: g,
+  teal: n,
+  purple: a,
+  pink: c
+}, D = (r) => m(b, r, o.m500);
+export {
+  D as getColor
+};

package/components/Input/Checkbox/index.js

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

package/components/Input/Checkbox/styles.js

@@ -0,0 +1,30 @@
+import t, { css as e } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import i from "../../Icons/Check/Check.js";
+import n from "../../../colors/grey.js";
+const m = t.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: max-content;
+
+  ${({ $disabled: r }) => r && e`
+      pointer-events: none;
+      opacity: 0.7;
+    `}
+`, c = t(i)`
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 1px solid ${({ $value: r, $outerShade: o }) => r ? o : n.m800};
+  border-radius: 0.2rem;
+  background-color: ${({ $value: r, $innerShade: o }) => r ? o : "transparent"};
+  transition: background-color 0.35s ease;
+
+  path {
+    stroke-width: 3;
+  }
+`;
+export {
+  c as Box,
+  m as Wrapper
+};

package/components/Input/Radio/Radio.js

@@ -0,0 +1,26 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/lodash-es/get.js";
+import j from "../../Typography/P/P.js";
+import i from "../../../colors/blue.js";
+import { Wrapper as l, HiddenInput as f, CircleBorder as u, Circle as $ } from "./styles.js";
+const b = ({ label: m, value: o, name: d, color: t, textColor: a, isSelected: e, disabled: n, onChange: c }) => {
+  const p = s(t, "m500", i.m500), h = s(t, "m800", i.m800), x = () => c(o);
+  return /* @__PURE__ */ r.jsxs(l, { $disabled: n, children: [
+    /* @__PURE__ */ r.jsx(
+      f,
+      {
+        type: "radio",
+        name: d,
+        value: o,
+        checked: e,
+        disabled: n,
+        onChange: x
+      }
+    ),
+    /* @__PURE__ */ r.jsx(u, { $isSelected: e, $shade: h, children: /* @__PURE__ */ r.jsx($, { $isSelected: e, $shade: p }) }),
+    /* @__PURE__ */ r.jsx(j, { color: a, size: "1.2rem", children: m })
+  ] });
+};
+export {
+  b as default
+};

package/components/Input/Radio/styles.js

@@ -0,0 +1,45 @@
+import t, { css as o } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import i from "../../../colors/grey.js";
+const a = t.div`
+  position: absolute;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${({ $isSelected: r, $shade: e }) => r ? e : "transparent"};
+  transition: background-color 0.35s ease;
+`, p = t.div`
+  width: 1.1rem;
+  height: 1.1rem;
+  border: 1px solid ${({ $isSelected: r, $shade: e }) => r ? e : i.m900};
+  border-radius: 50%;
+  position: relative;
+`, d = t.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+`, c = t.label`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: max-content;
+
+  ${({ $disabled: r }) => r ? o`
+          pointer-events: none;
+          opacity: 0.4;
+          cursor: not-allowed;
+        ` : o`
+          cursor: pointer;
+        `}
+`;
+export {
+  a as Circle,
+  p as CircleBorder,
+  d as HiddenInput,
+  c as Wrapper
+};

package/components/Input/RadioGroup/RadioGroup.js

@@ -0,0 +1,27 @@
+import { j as i } from "../../../_virtual/jsx-runtime.js";
+import { createElement as f } from "react";
+import { getColor as u } from "../Checkbox/helpers.js";
+import x from "../Radio/Radio.js";
+import { Wrapper as h } from "./styles.js";
+const C = ({ options: n, color: s = "blue", value: e, onChange: m, isHorizonatal: a, label: o, name: c }) => {
+  const d = u(s), l = (r) => {
+    r !== e && m(r);
+  }, t = (r) => /* @__PURE__ */ f(
+    x,
+    {
+      ...r,
+      key: r == null ? void 0 : r.value,
+      name: c,
+      color: d,
+      isSelected: e === (r == null ? void 0 : r.value),
+      onChange: l
+    }
+  );
+  return /* @__PURE__ */ i.jsxs(h, { $isHorizonatal: a, children: [
+    o && /* @__PURE__ */ i.jsx("legend", { children: o }),
+    n.map(t)
+  ] });
+};
+export {
+  C as default
+};

package/components/Input/RadioGroup/index.js

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

package/components/Input/RadioGroup/styles.js

@@ -0,0 +1,18 @@
+import t, { css as r } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const o = t.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: ${({ $isHorizonatal: e }) => e ? "row" : "column"};
+
+  ${({ $isHorizonatal: e }) => e ? r`
+          flex-wrap: wrap;
+          justify-content: space-between;
+        ` : r`
+          gap: 1.2rem;
+        `};
+`;
+export {
+  o as Wrapper
+};

package/components/Input/Textarea/styles.js

@@ -54,7 +54,7 @@ const b = o.textarea`
 `, h = o.div`
   position: relative;
   width: fit-content;
-`, u = o.div`
+`, g = o.div`
   position: absolute;
   top: -0.4rem;
   left: 0.5rem;
@@ -83,13 +83,13 @@ const b = o.textarea`
           left: 0.5rem;
           font-size: 1.4rem;
         `}
-`, g = o.div`
+`, u = o.div`
   overflow: hidden;
 `;
 export {
   w as HelperText,
-  u as Label,
-  g as Parent,
+  g as Label,
+  u as Parent,
   b as TextareaBox,
   h as Wrapper
 };