meticulous-ui 3.7.10 → 3.7.12

package/components/Button/Button.js

@@ -10,27 +10,46 @@ import { MEDIUM as P, SIZE as S } from "./constants.js";
 import t from "prop-types";
 import l, { css as a } from "styled-components";
 const K = l.button`
-  height: ${({ $height: o }) => o}rem;
-  width: ${({ $width: o }) => o}rem;
+  height: ${({
+  $height: o
+}) => o}rem;
+  width: ${({
+  $width: o
+}) => o}rem;
   border-radius: 0.96rem;
   border: none;
   padding: 0.96rem 0.64rem;
   position: relative;
   overflow: hidden;
-  background-color: ${({ $selectedColor: o, disabled: e }) => e ? y.m500 : o};
-  cursor: ${({ disabled: o, $isLoading: e }) => o ? "not-allowed" : e ? "auto" : "pointer"};
+  background-color: ${({
+  $selectedColor: o,
+  disabled: e
+}) => e ? y.m500 : o};
+  cursor: ${({
+  disabled: o,
+  $isLoading: e
+}) => o ? "not-allowed" : e ? "auto" : "pointer"};
 
-  ${({ $isLoading: o }) => o && a`
+  ${({
+  $isLoading: o
+}) => o && a`
       pointer-events: none;
     `};
 
-  ${({ disabled: o, $isLoading: e }) => !(o || e) && a`
+  ${({
+  disabled: o,
+  $isLoading: e
+}) => !(o || e) && a`
       &:hover {
-        background-color: ${({ $hoverColor: r }) => r};
+        background-color: ${({
+  $hoverColor: r
+}) => r};
       }
 
       &:active {
-        background-color: ${({ $activeColor: r }) => r};
+        background-color: ${({
+  $activeColor: r
+}) => r};
       }
     `};
 
@@ -38,21 +57,34 @@ const K = l.button`
     outline: none;
   }
 `, M = l.div`
-  font-size: ${({ $font: o }) => o}rem;
+  font-size: ${({
+  $font: o
+}) => o}rem;
   font-weight: 500;
   max-width: 100%;
   overflow: hidden;
-  color: ${({ $textColor: o }) => o};
-  opacity: ${({ $isLoading: o }) => o ? 0 : 1};
+  color: ${({
+  $textColor: o
+}) => o};
+  opacity: ${({
+  $isLoading: o
+}) => o ? 0 : 1};
   transition: opacity 0.3s ease;
 `, W = l.div`
-  height: ${({ $height: o }) => o}rem;
-  width: ${({ $width: o }) => o}rem;
+  height: ${({
+  $height: o
+}) => o}rem;
+  width: ${({
+  $width: o
+}) => o}rem;
   display: inline-block;
   position: relative;
   border-radius: 0.96rem;
 
-  ${({ disabled: o, $isLoading: e }) => !(o || e) && a`
+  ${({
+  disabled: o,
+  $isLoading: e
+}) => !(o || e) && a`
       box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
       transition:
         transform 0.2s,
@@ -70,10 +102,15 @@ const K = l.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: ${({ $isLoading: o }) => o ? 1 : 0};
+  opacity: ${({
+  $isLoading: o
+}) => o ? 1 : 0};
   transition: opacity 0.3s ease;
   pointer-events: none;
-`, U = ({ theme: o, children: e }) => /* @__PURE__ */ i(B, { rippleColor: o.m100, children: e }), Y = (o) => {
+`, U = ({
+  theme: o,
+  children: e
+}) => /* @__PURE__ */ i(B, { rippleColor: o.m100, children: e }), Y = (o) => {
   var b;
   const {
     children: e,
@@ -96,35 +133,19 @@ const K = l.button`
       p.current = g;
     }
     d == null || d(s);
-  }, { m400: k, m500: I, m600: L } = (b = j[r]) != null ? b : w, { height: h, width: f, font: T } = S[v] || {}, $ = ["white", "yellow"].includes(r) ? y.m600 : E, u = /* @__PURE__ */ z(
-    K,
-    {
-      type: "button",
-      ...C,
-      onKeyDown: x,
-      $hoverColor: I,
-      $activeColor: L,
-      $selectedColor: k,
-      $height: h,
-      $width: c || f,
-      disabled: o.disabled,
-      $isLoading: n,
-      children: [
-        /* @__PURE__ */ i(O, { $isLoading: n, children: /* @__PURE__ */ i(R, { size: "small", color: m || $ }) }),
-        /* @__PURE__ */ i(M, { $isLoading: n, $textColor: m || $, $font: T, children: e })
-      ]
-    }
-  );
-  return /* @__PURE__ */ i(
-    W,
-    {
-      $height: h,
-      $width: c || f,
-      disabled: o.disabled,
-      $isLoading: n,
-      children: n ? u : /* @__PURE__ */ i(U, { theme: r, children: u })
-    }
-  );
+  }, {
+    m400: k,
+    m500: I,
+    m600: L
+  } = (b = j[r]) != null ? b : w, {
+    height: h,
+    width: f,
+    font: T
+  } = S[v] || {}, $ = ["white", "yellow"].includes(r) ? y.m600 : E, u = /* @__PURE__ */ z(K, { type: "button", ...C, onKeyDown: x, $hoverColor: I, $activeColor: L, $selectedColor: k, $height: h, $width: c || f, disabled: o.disabled, $isLoading: n, children: [
+    /* @__PURE__ */ i(O, { $isLoading: n, children: /* @__PURE__ */ i(R, { size: "small", color: m || $ }) }),
+    /* @__PURE__ */ i(M, { $isLoading: n, $textColor: m || $, $font: T, children: e })
+  ] });
+  return /* @__PURE__ */ i(W, { $height: h, $width: c || f, disabled: o.disabled, $isLoading: n, children: n ? u : /* @__PURE__ */ i(U, { theme: r, children: u }) });
 };
 Y.propTypes = {
   /** Button label or content */
@@ -134,7 +155,7 @@ Y.propTypes = {
   /** Button size variant: `'small'`, `'medium'`, `'large'`, or `'ex-large'` */
   size: t.string,
   /** Override the button width */
-  width: t.oneOfType([t.string, t.number]),
+  width: /* @__PURE__ */ t.oneOfType([t.string, t.number]),
   /** Icon component rendered to the left of the label */
   leftIcon: t.elementType,
   /** Icon component rendered to the right of the label */

package/components/Carousel/Carousel.js

@@ -18,29 +18,41 @@ const xe = o.div`
   overflow: hidden;
   width: 100%;
   outline: none;
-  cursor: ${({ $draggable: t }) => t ? "grab" : "default"};
+  cursor: ${({
+  $draggable: t
+}) => t ? "grab" : "default"};
 
   &:active {
-    cursor: ${({ $draggable: t }) => t ? "grabbing" : "default"};
+    cursor: ${({
+  $draggable: t
+}) => t ? "grabbing" : "default"};
   }
 `, we = o.div`
   display: flex;
   width: 100%;
-  transform: translateX(${({ $translateX: t }) => t}%);
-  transition: ${({ $dragging: t }) => t ? "none" : "transform 0.35s ease"};
+  transform: translateX(${({
+  $translateX: t
+}) => t}%);
+  transition: ${({
+  $dragging: t
+}) => t ? "none" : "transform 0.35s ease"};
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 
   & > * {
-    flex: 0 0 ${({ $visibleSlides: t }) => 100 / t}%;
+    flex: 0 0 ${({
+  $visibleSlides: t
+}) => 100 / t}%;
     min-width: 0;
     box-sizing: border-box;
   }
 `, J = o.button`
   position: absolute;
-  top: ${({ $arrowTop: t }) => t != null ? t : "50%"};
+  top: ${({
+  $arrowTop: t
+}) => t != null ? t : "50%"};
   transform: translateY(-50%);
   z-index: 1;
   display: flex;
@@ -58,7 +70,10 @@ const xe = o.div`
     opacity 0.3s;
   padding: 0;
 
-  ${({ $direction: t, $overlay: u }) => t === "prev" ? `left: ${u ? "12px" : "-16px"};` : `right: ${u ? "12px" : "-16px"};`}
+  ${({
+  $direction: t,
+  $overlay: u
+}) => t === "prev" ? `left: ${u ? "12px" : "-16px"};` : `right: ${u ? "12px" : "-16px"};`}
 
   &:hover:not(:disabled) {
     background: #f5f5f5;
@@ -75,11 +90,16 @@ const xe = o.div`
     border-color: #f9a8c0;
   }
 
-  ${({ $viewportFocused: t }) => t && `
+  ${({
+  $viewportFocused: t
+}) => t && `
     border-color: #bdbdbd;
   `}
 
-  ${({ $overlay: t, $visible: u }) => t && !u && `
+  ${({
+  $overlay: t,
+  $visible: u
+}) => t && !u && `
     opacity: 0;
     pointer-events: none;
   `}
@@ -88,11 +108,15 @@ const xe = o.div`
   gap: 6px;
   align-items: center;
 `, ke = o.button`
-  width: ${({ $active: t }) => t ? "20px" : "8px"};
+  width: ${({
+  $active: t
+}) => t ? "20px" : "8px"};
   height: 8px;
   border-radius: 4px;
   border: none;
-  background: ${({ $active: t }) => t ? "#333" : "#ccc"};
+  background: ${({
+  $active: t
+}) => t ? "#333" : "#ccc"};
   cursor: pointer;
   padding: 0;
   transition:
@@ -115,8 +139,12 @@ const xe = o.div`
     inset: 0;
     width: 0%;
     background: #333;
-    animation: ${ye} ${({ $duration: t }) => t}s linear forwards;
-    animation-play-state: ${({ $paused: t }) => t ? "paused" : "running"};
+    animation: ${ye} ${({
+  $duration: t
+}) => t}s linear forwards;
+    animation-play-state: ${({
+  $paused: t
+}) => t ? "paused" : "running"};
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
@@ -221,120 +249,37 @@ const xe = o.div`
   }, ue = (e) => {
     e.key === "ArrowLeft" ? (e.preventDefault(), M()) : e.key === "ArrowRight" && (e.preventDefault(), E());
   }, Y = (G = (A = U.current) == null ? void 0 : A.clientWidth) != null ? G : 0, de = Y > 0 ? te / Y * 100 : 0, fe = -(i * (100 / L)) + de, q = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, z = s + 1;
-  return /* @__PURE__ */ C(
-    xe,
-    {
-      onClick: K,
-      onMouseEnter: ne,
-      onMouseLeave: re,
-      onMouseMove: ce,
-      onMouseUp: le,
-      onKeyDown: ue,
-      role: "region",
-      "aria-label": "Carousel",
-      ...ee,
-      children: [
-        /* @__PURE__ */ C(
-          me,
-          {
-            onTouchStart: ie,
-            onTouchMove: oe,
-            onTouchEnd: se,
-            children: [
-              V && /* @__PURE__ */ r(
-                J,
-                {
-                  onClick: M,
-                  disabled: !h && i === 0,
-                  "aria-label": "Previous slide",
-                  $direction: "prev",
-                  $overlay: a,
-                  $visible: W,
-                  $arrowTop: q,
-                  $viewportFocused: F,
-                  children: /* @__PURE__ */ r(pe, { size: 20, "aria-hidden": "true" })
-                }
-              ),
-              /* @__PURE__ */ r(
-                ve,
-                {
-                  ref: U,
-                  tabIndex: 0,
-                  "aria-label": "Carousel slides. Use arrow keys to navigate.",
-                  $draggable: $,
-                  onFocus: () => {
-                    j(!0), g(!0);
-                  },
-                  onBlur: () => {
-                    j(!1), g(!1);
-                  },
-                  onMouseDown: ae,
-                  onMouseLeave: (e) => {
-                    e.buttons !== 1 && (k && _ && (m(!1), x(0)), c.current = null);
-                  },
-                  children: /* @__PURE__ */ r(we, { $translateX: fe, $visibleSlides: L, $dragging: _, children: t.map(u) })
-                }
-              ),
-              V && /* @__PURE__ */ r(
-                J,
-                {
-                  onClick: E,
-                  disabled: !h && i === s,
-                  "aria-label": "Next slide",
-                  $direction: "next",
-                  $overlay: a,
-                  $visible: W,
-                  $arrowTop: q,
-                  $viewportFocused: F,
-                  children: /* @__PURE__ */ r(be, { size: 20, "aria-hidden": "true" })
-                }
-              ),
-              w && /* @__PURE__ */ r(
-                Ee,
-                {
-                  onClick: () => g((e) => !e),
-                  "aria-label": b ? "Play slideshow" : "Pause slideshow",
-                  children: b ? /* @__PURE__ */ r(Te, {}) : /* @__PURE__ */ r(Ie, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ C(
-          "div",
-          {
-            "aria-live": "polite",
-            "aria-atomic": "true",
-            style: {
-              position: "absolute",
-              width: 1,
-              height: 1,
-              overflow: "hidden",
-              clip: "rect(0,0,0,0)",
-              whiteSpace: "nowrap"
-            },
-            children: [
-              "Slide ",
-              i + 1,
-              " of ",
-              z
-            ]
-          }
-        ),
-        w && Z && /* @__PURE__ */ r(Me, { $duration: D, $paused: b }, i),
-        !Q && /* @__PURE__ */ r($e, { children: Array.from({ length: z }).map((e, n) => /* @__PURE__ */ r(
-          ke,
-          {
-            $active: n === i,
-            onClick: () => y(n),
-            "aria-label": `Slide ${n + 1} of ${z}`,
-            "aria-current": n === i ? "true" : void 0
-          },
-          n
-        )) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ C(xe, { onClick: K, onMouseEnter: ne, onMouseLeave: re, onMouseMove: ce, onMouseUp: le, onKeyDown: ue, role: "region", "aria-label": "Carousel", ...ee, children: [
+    /* @__PURE__ */ C(me, { onTouchStart: ie, onTouchMove: oe, onTouchEnd: se, children: [
+      V && /* @__PURE__ */ r(J, { onClick: M, disabled: !h && i === 0, "aria-label": "Previous slide", $direction: "prev", $overlay: a, $visible: W, $arrowTop: q, $viewportFocused: F, children: /* @__PURE__ */ r(pe, { size: 20, "aria-hidden": "true" }) }),
+      /* @__PURE__ */ r(ve, { ref: U, tabIndex: 0, "aria-label": "Carousel slides. Use arrow keys to navigate.", $draggable: $, onFocus: () => {
+        j(!0), g(!0);
+      }, onBlur: () => {
+        j(!1), g(!1);
+      }, onMouseDown: ae, onMouseLeave: (e) => {
+        e.buttons !== 1 && (k && _ && (m(!1), x(0)), c.current = null);
+      }, children: /* @__PURE__ */ r(we, { $translateX: fe, $visibleSlides: L, $dragging: _, children: t.map(u) }) }),
+      V && /* @__PURE__ */ r(J, { onClick: E, disabled: !h && i === s, "aria-label": "Next slide", $direction: "next", $overlay: a, $visible: W, $arrowTop: q, $viewportFocused: F, children: /* @__PURE__ */ r(be, { size: 20, "aria-hidden": "true" }) }),
+      w && /* @__PURE__ */ r(Ee, { onClick: () => g((e) => !e), "aria-label": b ? "Play slideshow" : "Pause slideshow", children: b ? /* @__PURE__ */ r(Te, {}) : /* @__PURE__ */ r(Ie, {}) })
+    ] }),
+    /* @__PURE__ */ C("div", { "aria-live": "polite", "aria-atomic": "true", style: {
+      position: "absolute",
+      width: 1,
+      height: 1,
+      overflow: "hidden",
+      clip: "rect(0,0,0,0)",
+      whiteSpace: "nowrap"
+    }, children: [
+      "Slide ",
+      i + 1,
+      " of ",
+      z
+    ] }),
+    w && Z && /* @__PURE__ */ r(Me, { $duration: D, $paused: b }, i),
+    !Q && /* @__PURE__ */ r($e, { children: Array.from({
+      length: z
+    }).map((e, n) => /* @__PURE__ */ r(ke, { $active: n === i, onClick: () => y(n), "aria-label": `Slide ${n + 1} of ${z}`, "aria-current": n === i ? "true" : void 0 }, n)) })
+  ] });
 };
 export {
   Pe as default