meticulous-ui 3.7.12 → 3.7.13

package/components/Button/Button.js

@@ -10,46 +10,27 @@ 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};
       }
     `};
 
@@ -57,34 +38,21 @@ 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,
@@ -102,15 +70,10 @@ 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,
@@ -133,19 +96,35 @@ 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 */
@@ -155,7 +134,7 @@ Y.propTypes = {
   /** Button size variant: `'small'`, `'medium'`, `'large'`, or `'ex-large'` */
   size: t.string,
   /** Override the button width */
-  width: /* @__PURE__ */ t.oneOfType([t.string, t.number]),
+  width: 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,41 +18,29 @@ 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;
@@ -70,10 +58,7 @@ 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;
@@ -90,16 +75,11 @@ 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;
   `}
@@ -108,15 +88,11 @@ 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:
@@ -139,12 +115,8 @@ 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;
@@ -249,37 +221,120 @@ 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