meticulous-ui 3.3.0 → 3.4.0

package/colors/amber.js

@@ -15,5 +15,5 @@ const F = {
   a700: "#FFAB00"
 };
 export {
-  F as default
+  F as amber
 };

package/colors/black.js

@@ -1,25 +1,16 @@
 const m = {
   m50: "#FAFAFA",
-  // almost white (for very light backgrounds)
   m100: "#E0E0E0",
-  // light gray
   m200: "#BDBDBD",
-  // medium light gray
   m300: "#9E9E9E",
-  // gray
   m400: "#757575",
-  // medium dark gray
   m500: "#616161",
-  // dark gray
   m600: "#424242",
-  // very dark gray
   m700: "#212121",
-  // near black
   m800: "#121212",
-  // dark black
   m900: "#000000"
-  // pure black
 };
 export {
+  m as black,
   m as default
 };

package/colors/blue.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#2962FF"
 };
 export {
+  F as blue,
   F as default
 };

package/colors/blueGray.js

@@ -11,5 +11,5 @@ const m = {
   m900: "#263238"
 };
 export {
-  m as default
+  m as blueGray
 };

package/colors/brown.js

@@ -11,5 +11,6 @@ const m = {
   m900: "#3E2723"
 };
 export {
+  m as brown,
   m as default
 };

package/colors/cider.js

@@ -11,5 +11,5 @@ const F = {
   m900: "#4D1A00"
 };
 export {
-  F as default
+  F as cider
 };

package/colors/colorMap.js

@@ -1,18 +1,18 @@
-import r from "./amber.js";
-import o from "./black.js";
-import m from "./blue.js";
-import i from "./blueGray.js";
-import t from "./brown.js";
-import p from "./cider.js";
-import e from "./cyan.js";
-import f from "./deepOrange.js";
-import l from "./deepPurple.js";
+import { amber as r } from "./amber.js";
+import { black as o } from "./black.js";
+import { blue as m } from "./blue.js";
+import { blueGray as i } from "./blueGray.js";
+import { brown as t } from "./brown.js";
+import { cider as p } from "./cider.js";
+import { cyan as e } from "./cyan.js";
+import { deepOrange as f } from "./deepOrange.js";
+import { deepPurple as l } from "./deepPurple.js";
 import a from "./green.js";
 import n from "./grey.js";
 import g from "./indigo.js";
-import d from "./lightBlue.js";
-import u from "./lightGreen.js";
-import b from "./lime.js";
+import { lightBlue as d } from "./lightBlue.js";
+import { lightGreen as u } from "./lightGreen.js";
+import { lime as b } from "./lime.js";
 import c from "./orange.js";
 import y from "./pink.js";
 import h from "./purple.js";

package/colors/cyan.js

@@ -15,5 +15,5 @@ const F = {
   a700: "#00B8D4"
 };
 export {
-  F as default
+  F as cyan
 };

package/colors/deepOrange.js

@@ -15,5 +15,5 @@ const F = {
   a700: "#DD2C00"
 };
 export {
-  F as default
+  F as deepOrange
 };

package/colors/deepPurple.js

@@ -15,5 +15,5 @@ const m = {
   a700: "#6200EA"
 };
 export {
-  m as default
+  m as deepPurple
 };

package/colors/green.js

@@ -15,5 +15,6 @@ const m = {
   a700: "#00C853"
 };
 export {
-  m as default
+  m as default,
+  m as green
 };

package/colors/grey.js

@@ -11,5 +11,6 @@ const E = {
   m900: "#212121"
 };
 export {
-  E as default
+  E as default,
+  E as grey
 };

package/colors/indigo.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#304FFE"
 };
 export {
-  F as default
+  F as default,
+  F as indigo
 };

package/colors/lightBlue.js

@@ -15,5 +15,5 @@ const F = {
   a700: "#0091EA"
 };
 export {
-  F as default
+  F as lightBlue
 };

package/colors/lightGreen.js

@@ -15,5 +15,5 @@ const m = {
   a700: "#64DD17"
 };
 export {
-  m as default
+  m as lightGreen
 };

package/colors/lime.js

@@ -15,5 +15,5 @@ const F = {
   a700: "#AEEA00"
 };
 export {
-  F as default
+  F as lime
 };

package/colors/orange.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#FF6D00"
 };
 export {
-  F as default
+  F as default,
+  F as orange
 };

package/colors/pink.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#C51162"
 };
 export {
-  F as default
+  F as default,
+  F as pink
 };

package/colors/purple.js

@@ -15,5 +15,6 @@ const A = {
   a700: "#AA00FF"
 };
 export {
-  A as default
+  A as default,
+  A as purple
 };

package/colors/red.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#D50000"
 };
 export {
-  F as default
+  F as default,
+  F as red
 };

package/colors/teal.js

@@ -15,5 +15,6 @@ const m = {
   a700: "#00BFA5"
 };
 export {
-  m as default
+  m as default,
+  m as teal
 };

package/colors/violet.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#7A00E6"
 };
 export {
-  F as default
+  F as default,
+  F as violet
 };

package/colors/white.js

@@ -1,4 +1,5 @@
 const F = "#FFFFFF";
 export {
-  F as default
+  F as default,
+  F as white
 };

package/colors/yellow.js

@@ -15,5 +15,6 @@ const F = {
   a700: "#FFD600"
 };
 export {
-  F as default
+  F as default,
+  F as yellow
 };

package/components/Button/Button.js

@@ -1,66 +1,66 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useRef as x } from "react";
-import D from "../Spinner/Spinner.js";
+import { useRef as v } from "react";
+import x from "../Spinner/Spinner.js";
 import I from "../../colors/colorMap.js";
-import u from "../../colors/blue.js";
-import { ButtonWrapper as R, SpinnerWrapper as B, Content as E, ButtonContainer as L } from "./styles.js";
-import S from "../Ripple/Ripple.js";
-import k from "../../colors/white.js";
-import z from "../../colors/grey.js";
-import { MEDIUM as K, SIZE as M } from "./constants.js";
-const P = ({ theme: t, children: i }) => /* @__PURE__ */ o(S, { rippleColor: t.m100, children: i }), Q = (t) => {
+import { blue as f } from "../../colors/blue.js";
+import { ButtonWrapper as K, SpinnerWrapper as R, Content as B, ButtonContainer as E } from "./styles.js";
+import L from "../Ripple/Ripple.js";
+import S from "../../colors/white.js";
+import k from "../../colors/grey.js";
+import { MEDIUM as z, SIZE as M } from "./constants.js";
+const P = ({ theme: t, children: n }) => /* @__PURE__ */ o(L, { rippleColor: t.m100, children: n }), Q = (t) => {
   const {
-    children: i,
-    theme: n = u,
-    size: C = K,
-    width: s,
+    children: n,
+    theme: i = f,
+    size: u = z,
+    width: l,
     leftIcon: W,
     rightIcon: j,
     isLoading: r,
-    textColor: d,
-    onKeyDown: l,
-    ...w
-  } = t || {}, m = x(0), $ = (e) => {
+    textColor: s,
+    onKeyDown: w,
+    ...C
+  } = t || {}, d = v(0), $ = (e) => {
     if (e.key === "Enter" || e.key === " ") {
-      const f = Date.now();
-      if (f - m.current < 500) {
+      const a = Date.now();
+      if (a - d.current < 500) {
         e.preventDefault(), e.stopPropagation();
         return;
       }
-      m.current = f;
+      d.current = a;
     }
-    l == null || l(e);
-  }, { m400: g, m500: b, m600: y } = I[n] ?? u, { height: c, width: p, font: v } = M[C] || {}, h = ["white", "yellow"].includes(n) ? z.m600 : k, a = /* @__PURE__ */ o(
-    R,
+    w?.(e);
+  }, { m400: y, m500: g, m600: b } = I[i] ?? f, { height: m, width: c, font: D } = M[u] || {}, p = ["white", "yellow"].includes(i) ? k.m600 : S, h = /* @__PURE__ */ o(
+    K,
     {
       type: "button",
-      ...w,
+      ...C,
       onKeyDown: $,
-      $hoverColor: b,
-      $activeColor: y,
-      $selectedColor: g,
-      $height: c,
-      $width: s || p,
+      $hoverColor: g,
+      $activeColor: b,
+      $selectedColor: y,
+      $height: m,
+      $width: l || c,
       disabled: t.disabled,
       $isLoading: r,
-      children: r ? /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(D, { size: "small", color: d || h }) }) : /* @__PURE__ */ o(
-        E,
+      children: r ? /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(x, { size: "small", color: s || p }) }) : /* @__PURE__ */ o(
+        B,
         {
-          $textColor: d || h,
-          $font: v,
-          children: i
+          $textColor: s || p,
+          $font: D,
+          children: n
         }
       )
     }
   );
   return /* @__PURE__ */ o(
-    L,
+    E,
     {
-      $height: c,
-      $width: s || p,
+      $height: m,
+      $width: l || c,
       disabled: t.disabled,
       $isLoading: r,
-      children: r ? a : /* @__PURE__ */ o(P, { theme: n, children: a })
+      children: r ? h : /* @__PURE__ */ o(P, { theme: i, children: h })
     }
   );
 };

package/components/Carousel/Carousel.js

@@ -1,157 +1,156 @@
-import { jsxs as X, jsx as r } from "react/jsx-runtime";
-import { useState as c, useRef as T, useEffect as E } from "react";
-import de from "../Icons/ChevronLeft/ChevronLeft.js";
-import he from "../Icons/ChevronRight/ChevronRight.js";
-import { Wrapper as fe, SlideArea as me, NavButton as A, SlideViewport as pe, SlideTrack as ve, PauseButton as we, ProgressBar as ge, DotsWrapper as $e, Dot as Me } from "./styles.js";
-const I = 50, R = 2e3, be = () => /* @__PURE__ */ X("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
+import { useState as a, useRef as T, useEffect as C } from "react";
+import { Wrapper as ue, SlideArea as de, NavButton as K, SlideViewport as he, SlideTrack as fe, PauseButton as me, ProgressBar as pe, DotsWrapper as ve, Dot as ge } from "./styles.js";
+import we from "../Icons/ChevronLeft/ChevronLeft.js";
+import $e from "../Icons/ChevronRight/ChevronRight.js";
+const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
   /* @__PURE__ */ r("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
   /* @__PURE__ */ r("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
-] }), xe = () => /* @__PURE__ */ r("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), Ce = ({
-  data: P,
-  renderCarousel: Y,
-  visibleSlides: k = 1,
-  hasArrow: B = !0,
+] }), be = () => /* @__PURE__ */ r("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), Xe = ({
+  data: R,
+  renderCarousel: N,
+  visibleSlides: X = 1,
+  hasArrow: P = !0,
   overlayArrows: i = !1,
   arrowTop: v,
-  areDotsHidden: G = !1,
-  autoSlide: w = !1,
-  autoSlideSec: C = 3,
-  loop: l = !1,
-  dragToSlide: g = !1,
+  areDotsHidden: q = !1,
+  autoSlide: g = !1,
+  autoSlideSec: k = 3,
+  loop: u = !1,
+  dragToSlide: w = !1,
   liveDrag: $ = !1,
   liveDragMobile: L = !0,
-  showProgress: J = !1,
-  defaultIndex: Q = 0,
-  onSlideChange: y
+  showProgress: A = !1,
+  defaultIndex: Y = 0,
+  onSlideChange: G
 }) => {
-  var q;
-  const [n, M] = c(Q), [V, d] = c(!0), [W, F] = c(!1), [h, f] = c(!1), [Z, m] = c(0), [_, p] = c(!1), [D, z] = c(!1), a = T(null), o = T(null), u = T(null), H = T(null);
-  E(() => {
+  const [n, M] = a(Y), [B, d] = a(!0), [V, W] = a(!1), [h, f] = a(!1), [J, m] = a(0), [F, p] = a(!1), [y, _] = a(!1), c = T(null), o = T(null), l = T(null), z = T(null);
+  C(() => {
     const e = window.matchMedia("(max-width: 1024px)");
-    z(e.matches);
-    const t = (le) => z(le.matches);
+    _(e.matches);
+    const t = (le) => _(le.matches);
     return e.addEventListener("change", t), () => e.removeEventListener("change", t);
   }, []);
-  const s = P.length - k, b = () => M((e) => l && e === 0 ? s : Math.max(e - 1, 0)), x = () => M((e) => l && e >= s ? 0 : Math.min(e + 1, s));
-  E(() => {
-    y == null || y(n);
+  const s = R.length - X, b = () => M((e) => u && e === 0 ? s : Math.max(e - 1, 0)), x = () => M((e) => u && e >= s ? 0 : Math.min(e + 1, s));
+  C(() => {
+    G?.(n);
   }, [n]);
-  const U = () => {
-    i && (clearTimeout(u.current), d(!0), u.current = setTimeout(() => d(!1), R));
-  }, S = () => {
-    f(!0), i && (clearTimeout(u.current), d(!0));
-  }, ee = () => {
-    f(!1), i && (u.current = setTimeout(() => d(!1), R));
+  const H = () => {
+    i && (clearTimeout(l.current), d(!0), l.current = setTimeout(() => d(!1), O));
+  }, Q = () => {
+    f(!0), i && (clearTimeout(l.current), d(!0));
+  }, Z = () => {
+    f(!1), i && (l.current = setTimeout(() => d(!1), O));
   };
-  E(() => {
+  C(() => {
     if (i)
-      return u.current = setTimeout(() => d(!1), R), () => clearTimeout(u.current);
-  }, [i]), E(() => {
-    if (!w || h) return;
+      return l.current = setTimeout(() => d(!1), O), () => clearTimeout(l.current);
+  }, [i]), C(() => {
+    if (!g || h) return;
     const e = setInterval(() => {
       M((t) => t >= s ? 0 : t + 1);
-    }, C * 1e3);
+    }, k * 1e3);
     return () => clearInterval(e);
-  }, [w, C, h, s]);
-  const j = (e) => l ? e : n === 0 && e > 0 || n === s && e < 0 ? e * 0.3 : e, te = (e) => {
-    a.current = e.touches[0].clientX, L && D && p(!0), U();
+  }, [g, k, h, s]);
+  const S = (e) => u ? e : n === 0 && e > 0 || n === s && e < 0 ? e * 0.3 : e, ee = (e) => {
+    c.current = e.touches[0].clientX, L && y && p(!0), H();
+  }, te = (e) => {
+    !L || !y || c.current === null || m(S(e.touches[0].clientX - c.current));
   }, re = (e) => {
-    !L || !D || a.current === null || m(j(e.touches[0].clientX - a.current));
+    if (L && y && (p(!1), m(0)), c.current === null) return;
+    const t = c.current - e.changedTouches[0].clientX;
+    t > E ? x() : t < -E && b(), c.current = null;
   }, ne = (e) => {
-    if (L && D && (p(!1), m(0)), a.current === null) return;
-    const t = a.current - e.changedTouches[0].clientX;
-    t > I ? x() : t < -I && b(), a.current = null;
+    w && (o.current = e.clientX, $ && p(!0));
   }, se = (e) => {
-    g && (o.current = e.clientX, $ && p(!0));
+    !w || !$ || o.current === null || m(S(e.clientX - o.current));
   }, ie = (e) => {
-    !g || !$ || o.current === null || m(j(e.clientX - o.current));
-  }, oe = (e) => {
-    if (!g || o.current === null) return;
+    if (!w || o.current === null) return;
     $ && (p(!1), m(0));
     const t = o.current - e.clientX;
-    t > I ? x() : t < -I && b(), o.current = null;
-  }, ce = (e) => {
+    t > E ? x() : t < -E && b(), o.current = null;
+  }, oe = (e) => {
     e.key === "ArrowLeft" ? (e.preventDefault(), b()) : e.key === "ArrowRight" && (e.preventDefault(), x());
-  }, K = ((q = H.current) == null ? void 0 : q.clientWidth) ?? 0, ae = K > 0 ? Z / K * 100 : 0, ue = -(n * (100 / k)) + ae, N = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, O = s + 1;
-  return /* @__PURE__ */ X(
-    fe,
+  }, U = z.current?.clientWidth ?? 0, ae = U > 0 ? J / U * 100 : 0, ce = -(n * (100 / X)) + ae, j = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, D = s + 1;
+  return /* @__PURE__ */ I(
+    ue,
     {
-      onClick: U,
-      onMouseEnter: S,
-      onMouseLeave: ee,
-      onMouseMove: ie,
-      onMouseUp: oe,
-      onKeyDown: ce,
+      onClick: H,
+      onMouseEnter: Q,
+      onMouseLeave: Z,
+      onMouseMove: se,
+      onMouseUp: ie,
+      onKeyDown: oe,
       role: "region",
       "aria-label": "Carousel",
       children: [
-        /* @__PURE__ */ X(
-          me,
+        /* @__PURE__ */ I(
+          de,
           {
-            onTouchStart: te,
-            onTouchMove: re,
-            onTouchEnd: ne,
+            onTouchStart: ee,
+            onTouchMove: te,
+            onTouchEnd: re,
             children: [
-              B && /* @__PURE__ */ r(
-                A,
+              P && /* @__PURE__ */ r(
+                K,
                 {
                   onClick: b,
-                  disabled: !l && n === 0,
+                  disabled: !u && n === 0,
                   "aria-label": "Previous slide",
                   $direction: "prev",
                   $overlay: i,
-                  $visible: V,
-                  $arrowTop: N,
-                  $viewportFocused: W,
-                  children: /* @__PURE__ */ r(de, { size: 20, "aria-hidden": "true" })
+                  $visible: B,
+                  $arrowTop: j,
+                  $viewportFocused: V,
+                  children: /* @__PURE__ */ r(we, { size: 20, "aria-hidden": "true" })
                 }
               ),
               /* @__PURE__ */ r(
-                pe,
+                he,
                 {
-                  ref: H,
+                  ref: z,
                   tabIndex: 0,
                   "aria-label": "Carousel slides. Use arrow keys to navigate.",
-                  $draggable: g,
+                  $draggable: w,
                   onFocus: () => {
-                    F(!0), f(!0);
+                    W(!0), f(!0);
                   },
                   onBlur: () => {
-                    F(!1), f(!1);
+                    W(!1), f(!1);
                   },
-                  onMouseDown: se,
+                  onMouseDown: ne,
                   onMouseLeave: (e) => {
-                    e.buttons !== 1 && ($ && _ && (p(!1), m(0)), o.current = null);
+                    e.buttons !== 1 && ($ && F && (p(!1), m(0)), o.current = null);
                   },
-                  children: /* @__PURE__ */ r(ve, { $translateX: ue, $visibleSlides: k, $dragging: _, children: P.map(Y) })
+                  children: /* @__PURE__ */ r(fe, { $translateX: ce, $visibleSlides: X, $dragging: F, children: R.map(N) })
                 }
               ),
-              B && /* @__PURE__ */ r(
-                A,
+              P && /* @__PURE__ */ r(
+                K,
                 {
                   onClick: x,
-                  disabled: !l && n === s,
+                  disabled: !u && n === s,
                   "aria-label": "Next slide",
                   $direction: "next",
                   $overlay: i,
-                  $visible: V,
-                  $arrowTop: N,
-                  $viewportFocused: W,
-                  children: /* @__PURE__ */ r(he, { size: 20, "aria-hidden": "true" })
+                  $visible: B,
+                  $arrowTop: j,
+                  $viewportFocused: V,
+                  children: /* @__PURE__ */ r($e, { size: 20, "aria-hidden": "true" })
                 }
               ),
-              w && /* @__PURE__ */ r(
-                we,
+              g && /* @__PURE__ */ r(
+                me,
                 {
                   onClick: () => f((e) => !e),
                   "aria-label": h ? "Play slideshow" : "Pause slideshow",
-                  children: h ? /* @__PURE__ */ r(xe, {}) : /* @__PURE__ */ r(be, {})
+                  children: h ? /* @__PURE__ */ r(be, {}) : /* @__PURE__ */ r(Me, {})
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ X(
+        /* @__PURE__ */ I(
           "div",
           {
             "aria-live": "polite",
@@ -168,17 +167,17 @@ const I = 50, R = 2e3, be = () => /* @__PURE__ */ X("svg", { width: 12, height:
               "Slide ",
               n + 1,
               " of ",
-              O
+              D
             ]
           }
         ),
-        w && J && /* @__PURE__ */ r(ge, { $duration: C, $paused: h }, n),
-        !G && /* @__PURE__ */ r($e, { children: Array.from({ length: O }).map((e, t) => /* @__PURE__ */ r(
-          Me,
+        g && A && /* @__PURE__ */ r(pe, { $duration: k, $paused: h }, n),
+        !q && /* @__PURE__ */ r(ve, { children: Array.from({ length: D }).map((e, t) => /* @__PURE__ */ r(
+          ge,
           {
             $active: t === n,
             onClick: () => M(t),
-            "aria-label": `Slide ${t + 1} of ${O}`,
+            "aria-label": `Slide ${t + 1} of ${D}`,
             "aria-current": t === n ? "true" : void 0
           },
           t
@@ -188,5 +187,5 @@ const I = 50, R = 2e3, be = () => /* @__PURE__ */ X("svg", { width: 12, height:
   );
 };
 export {
-  Ce as default
+  Xe as default
 };