meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Button/Button.cjs

@@ -1,97 +1,47 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const Spinner = require("../Spinner/Spinner.cjs");
-const colorMap = require("../../colors/colorMap.cjs");
-const blue = require("../../colors/blue.cjs");
-const Ripple = require("../Ripple/Ripple.cjs");
-const white = require("../../colors/white.cjs");
-const grey = require("../../colors/grey.cjs");
-const constants = require("./constants.cjs");
-const PropTypes = require("prop-types");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const ButtonWrapper = styled__default.default.button`
-  height: ${({
-  $height
-}) => $height}rem;
-  width: ${({
-  $width
-}) => $width}rem;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),M=require("react"),D=require("../Spinner/Spinner.cjs"),P=require("../../colors/colorMap.cjs"),w=require("../../colors/blue.cjs"),R=require("../Ripple/Ripple.cjs"),S=require("../../colors/white.cjs"),v=require("../../colors/grey.cjs"),y=require("./constants.cjs"),z=require("prop-types"),l=require("styled-components"),x=e=>e&&e.__esModule?e:{default:e},o=x(z),d=x(l),B=d.default.button`
+  height: ${({$height:e})=>e}rem;
+  width: ${({$width:e})=>e}rem;
   border-radius: 0.96rem;
   border: none;
   padding: 0.96rem 0.64rem;
   position: relative;
   overflow: hidden;
-  background-color: ${({
-  $selectedColor,
-  disabled
-}) => disabled ? grey.default.m500 : $selectedColor};
-  cursor: ${({
-  disabled,
-  $isLoading
-}) => disabled ? "not-allowed" : $isLoading ? "auto" : "pointer"};
+  background-color: ${({$selectedColor:e,disabled:t})=>t?v.default.m500:e};
+  cursor: ${({disabled:e,$isLoading:t})=>e?"not-allowed":t?"auto":"pointer"};
 
-  ${({
-  $isLoading
-}) => $isLoading && /*@__PURE__*/styled.css`
+  ${({$isLoading:e})=>e&&l.css`
       pointer-events: none;
     `};
 
-  ${({
-  disabled,
-  $isLoading
-}) => !(disabled || $isLoading) && /*@__PURE__*/styled.css`
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&l.css`
       &:hover {
-        background-color: ${({
-  $hoverColor
-}) => $hoverColor};
+        background-color: ${({$hoverColor:n})=>n};
       }
 
       &:active {
-        background-color: ${({
-  $activeColor
-}) => $activeColor};
+        background-color: ${({$activeColor:n})=>n};
       }
     `};
 
   &:focus-visible {
     outline: none;
   }
-`;
-const Content = styled__default.default.div`
-  font-size: ${({
-  $font
-}) => $font}rem;
+`,E=d.default.div`
+  font-size: ${({$font:e})=>e}rem;
   font-weight: 500;
   max-width: 100%;
   overflow: hidden;
-  color: ${({
-  $textColor
-}) => $textColor};
-  opacity: ${({
-  $isLoading
-}) => $isLoading ? 0 : 1};
+  color: ${({$textColor:e})=>e};
+  opacity: ${({$isLoading:e})=>e?0:1};
   transition: opacity 0.3s ease;
-`;
-const ButtonContainer = styled__default.default.div`
-  height: ${({
-  $height
-}) => $height}rem;
-  width: ${({
-  $width
-}) => $width}rem;
+`,K=d.default.div`
+  height: ${({$height:e})=>e}rem;
+  width: ${({$width:e})=>e}rem;
   display: inline-block;
   position: relative;
   border-radius: 0.96rem;
 
-  ${({
-  disabled,
-  $isLoading
-}) => !(disabled || $isLoading) && /*@__PURE__*/styled.css`
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&l.css`
       box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
       transition:
         transform 0.2s,
@@ -103,98 +53,13 @@ const ButtonContainer = styled__default.default.div`
         transform: translateY(-2px);
       }
     `};
-`;
-const SpinnerWrapper = styled__default.default.div`
+`,O=d.default.div`
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: ${({
-  $isLoading
-}) => $isLoading ? 1 : 0};
+  opacity: ${({$isLoading:e})=>e?1:0};
   transition: opacity 0.3s ease;
   pointer-events: none;
-`;
-const Rippled = ({
-  theme,
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(Ripple.default, { rippleColor: theme["m100"], children });
-const Button = (props) => {
-  var _a;
-  const {
-    children,
-    theme = blue.blue,
-    size = constants.MEDIUM,
-    width,
-    leftIcon,
-    rightIcon,
-    isLoading,
-    textColor,
-    onKeyDown,
-    ...rest
-  } = props || {};
-  const lastKeyPressRef = react.useRef(0);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      const now = Date.now();
-      if (now - lastKeyPressRef.current < 500) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      lastKeyPressRef.current = now;
-    }
-    onKeyDown == null ? void 0 : onKeyDown(e);
-  };
-  const {
-    m400: selectedColor,
-    m500: hoverColor,
-    m600: activeColor
-  } = (_a = colorMap.default[theme]) != null ? _a : blue.blue;
-  const {
-    height: $height,
-    width: $width,
-    font: $font
-  } = constants.SIZE[size] || {};
-  const txtClr = ["white", "yellow"].includes(theme) ? grey.default.m600 : white.default;
-  const btnChild = /* @__PURE__ */ jsxRuntime.jsxs(ButtonWrapper, { type: "button", ...rest, onKeyDown: handleKeyDown, ...{
-    $hoverColor: hoverColor,
-    $activeColor: activeColor,
-    $selectedColor: selectedColor,
-    $height,
-    $width: width || $width,
-    disabled: props.disabled,
-    $isLoading: isLoading
-  }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SpinnerWrapper, { $isLoading: isLoading, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.default, { size: "small", color: textColor || txtClr }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content, { $isLoading: isLoading, $textColor: textColor || txtClr, $font, children })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { ...{
-    $height,
-    $width: width || $width,
-    disabled: props.disabled,
-    $isLoading: isLoading
-  }, children: isLoading ? btnChild : /* @__PURE__ */ jsxRuntime.jsx(Rippled, { theme, children: btnChild }) });
-};
-Button.propTypes = {
-  /** Button label or content */
-  children: PropTypes__default.default.node,
-  /** Color theme key from the meticulous-ui color map. Defaults to `'blue'` */
-  theme: PropTypes__default.default.string,
-  /** Button size variant: `'small'`, `'medium'`, `'large'`, or `'ex-large'` */
-  size: PropTypes__default.default.string,
-  /** Override the button width */
-  width: /* @__PURE__ */ PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  /** Icon component rendered to the left of the label */
-  leftIcon: PropTypes__default.default.elementType,
-  /** Icon component rendered to the right of the label */
-  rightIcon: PropTypes__default.default.elementType,
-  /** Shows a spinner and disables interaction while true */
-  isLoading: PropTypes__default.default.bool,
-  /** Override the label and icon color */
-  textColor: PropTypes__default.default.string,
-  /** Disables the button */
-  disabled: PropTypes__default.default.bool
-};
-exports.default = Button;
+`,W=({theme:e,children:t})=>r.jsx(R.default,{rippleColor:e.m100,children:t}),C=e=>{var g;const{children:t,theme:n=w.blue,size:q=y.MEDIUM,width:c,leftIcon:U,rightIcon:Y,isLoading:i,textColor:u,onKeyDown:a,...j}=e||{},f=M.useRef(0),_=s=>{if(s.key==="Enter"||s.key===" "){const $=Date.now();if($-f.current<500){s.preventDefault(),s.stopPropagation();return}f.current=$}a==null||a(s)},{m400:T,m500:k,m600:I}=(g=P.default[n])!=null?g:w.blue,{height:h,width:p,font:L}=y.SIZE[q]||{},m=["white","yellow"].includes(n)?v.default.m600:S.default,b=r.jsxs(B,{type:"button",...j,onKeyDown:_,$hoverColor:k,$activeColor:I,$selectedColor:T,$height:h,$width:c||p,disabled:e.disabled,$isLoading:i,children:[r.jsx(O,{$isLoading:i,children:r.jsx(D.default,{size:"small",color:u||m})}),r.jsx(E,{$isLoading:i,$textColor:u||m,$font:L,children:t})]});return r.jsx(K,{$height:h,$width:c||p,disabled:e.disabled,$isLoading:i,children:i?b:r.jsx(W,{theme:n,children:b})})};C.propTypes={children:o.default.node,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),leftIcon:o.default.elementType,rightIcon:o.default.elementType,isLoading:o.default.bool,textColor:o.default.string,disabled:o.default.bool};exports.default=C;

package/cjs/components/Button/constants.cjs

@@ -1,33 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SMALL = "small";
-const MEDIUM = "medium";
-const LARGE = "large";
-const EX_LARGE = "ex-large";
-const SIZE = {
-  [SMALL]: {
-    height: 4.48,
-    width: 8.4,
-    font: 1.6
-  },
-  [MEDIUM]: {
-    height: 5.12,
-    width: 9.6,
-    font: 1.92
-  },
-  [LARGE]: {
-    height: 5.76,
-    width: 10.8,
-    font: 2.24
-  },
-  [EX_LARGE]: {
-    height: 6.4,
-    width: 12,
-    font: 2.56
-  }
-};
-exports.EX_LARGE = EX_LARGE;
-exports.LARGE = LARGE;
-exports.MEDIUM = MEDIUM;
-exports.SIZE = SIZE;
-exports.SMALL = SMALL;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="small",e="medium",o="large",h="ex-large",i={[t]:{height:4.48,width:8.4,font:1.6},[e]:{height:5.12,width:9.6,font:1.92},[o]:{height:5.76,width:10.8,font:2.24},[h]:{height:6.4,width:12,font:2.56}};exports.EX_LARGE=h;exports.LARGE=o;exports.MEDIUM=e;exports.SIZE=i;exports.SMALL=t;

package/cjs/components/Button/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Button = require("./Button.cjs");
-exports.default = Button.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Button.cjs");exports.default=e.default;

package/cjs/components/Carousel/Carousel.cjs

@@ -1,13 +1,4 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const ChevronLeft = require("../Icons/ChevronLeft.cjs");
-const ChevronRight = require("../Icons/ChevronRight.cjs");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const Wrapper = styled__default.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),s=require("react"),fe=require("../Icons/ChevronLeft.cjs"),he=require("../Icons/ChevronRight.cjs"),Y=require("styled-components"),pe=t=>t&&t.__esModule?t:{default:t},o=pe(Y),xe=o.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -15,52 +6,36 @@ const Wrapper = styled__default.default.div`
   width: 100%;
   gap: 12px;
   outline: none;
-`;
-const SlideArea = styled__default.default.div`
+`,be=o.default.div`
   position: relative;
   width: 100%;
-`;
-const SlideViewport = styled__default.default.div`
+`,ge=o.default.div`
   overflow: hidden;
   width: 100%;
   outline: none;
-  cursor: ${({
-  $draggable
-}) => $draggable ? "grab" : "default"};
+  cursor: ${({$draggable:t})=>t?"grab":"default"};
 
   &:active {
-    cursor: ${({
-  $draggable
-}) => $draggable ? "grabbing" : "default"};
+    cursor: ${({$draggable:t})=>t?"grabbing":"default"};
   }
-`;
-const SlideTrack = styled__default.default.div`
+`,ve=o.default.div`
   display: flex;
   width: 100%;
-  transform: translateX(${({
-  $translateX
-}) => $translateX}%);
-  transition: ${({
-  $dragging
-}) => $dragging ? "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
-}) => 100 / $visibleSlides}%;
+    flex: 0 0 ${({$visibleSlides:t})=>100/t}%;
     min-width: 0;
     box-sizing: border-box;
   }
-`;
-const NavButton = styled__default.default.button`
+`,N=o.default.button`
   position: absolute;
-  top: ${({
-  $arrowTop
-}) => $arrowTop != null ? $arrowTop : "50%"};
+  top: ${({$arrowTop:t})=>t!=null?t:"50%"};
   transform: translateY(-50%);
   z-index: 1;
   display: flex;
@@ -78,10 +53,7 @@ const NavButton = styled__default.default.button`
     opacity 0.3s;
   padding: 0;
 
-  ${({
-  $direction,
-  $overlay
-}) => $direction === "prev" ? `left: ${$overlay ? "12px" : "-16px"};` : `right: ${$overlay ? "12px" : "-16px"};`}
+  ${({$direction:t,$overlay:l})=>t==="prev"?`left: ${l?"12px":"-16px"};`:`right: ${l?"12px":"-16px"};`}
 
   &:hover:not(:disabled) {
     background: #f5f5f5;
@@ -98,46 +70,33 @@ const NavButton = styled__default.default.button`
     border-color: #f9a8c0;
   }
 
-  ${({
-  $viewportFocused
-}) => $viewportFocused && `
+  ${({$viewportFocused:t})=>t&&`
     border-color: #bdbdbd;
   `}
 
-  ${({
-  $overlay,
-  $visible
-}) => $overlay && !$visible && `
+  ${({$overlay:t,$visible:l})=>t&&!l&&`
     opacity: 0;
     pointer-events: none;
   `}
-`;
-const DotsWrapper = styled__default.default.div`
+`,me=o.default.div`
   display: flex;
   gap: 6px;
   align-items: center;
-`;
-const Dot = styled__default.default.button`
-  width: ${({
-  $active
-}) => $active ? "20px" : "8px"};
+`,we=o.default.button`
+  width: ${({$active:t})=>t?"20px":"8px"};
   height: 8px;
   border-radius: 4px;
   border: none;
-  background: ${({
-  $active
-}) => $active ? "#333" : "#ccc"};
+  background: ${({$active:t})=>t?"#333":"#ccc"};
   cursor: pointer;
   padding: 0;
   transition:
     width 0.2s ease,
     background 0.2s ease;
-`;
-const fillProgress = /*@__PURE__*/styled.keyframes`
+`,$e=Y.keyframes`
   from { width: 0%; }
   to { width: 100%; }
-`;
-const ProgressBar = styled__default.default.div`
+`,je=o.default.div`
   width: 100%;
   height: 3px;
   background: #e0e0e0;
@@ -151,20 +110,15 @@ const ProgressBar = styled__default.default.div`
     inset: 0;
     width: 0%;
     background: #333;
-    animation: ${fillProgress} ${({
-  $duration
-}) => $duration}s linear forwards;
-    animation-play-state: ${({
-  $paused
-}) => $paused ? "paused" : "running"};
+    animation: ${$e} ${({$duration:t})=>t}s linear forwards;
+    animation-play-state: ${({$paused:t})=>t?"paused":"running"};
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
       width: 100%;
     }
   }
-`;
-const PauseButton = styled__default.default.button`
+`,ke=o.default.button`
   position: absolute;
   bottom: 8px;
   right: 8px;
@@ -191,184 +145,4 @@ const PauseButton = styled__default.default.button`
     outline: 2px solid #fff;
     outline-offset: 2px;
   }
-`;
-const SWIPE_THRESHOLD = 50;
-const ARROW_HIDE_DELAY = 2e3;
-const PauseIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
-  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
-] });
-const PlayIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) });
-const Carousel = ({
-  data,
-  renderCarousel,
-  visibleSlides = 1,
-  hasArrow = true,
-  overlayArrows = false,
-  arrowTop,
-  areDotsHidden = false,
-  autoSlide = false,
-  autoSlideSec = 3,
-  loop = false,
-  dragToSlide = false,
-  liveDrag = false,
-  liveDragMobile = true,
-  showProgress = false,
-  defaultIndex = 0,
-  onSlideChange,
-  ...rest
-}) => {
-  var _a, _b;
-  const [currentIndex, setCurrentIndex] = react.useState(defaultIndex);
-  const [arrowsVisible, setArrowsVisible] = react.useState(true);
-  const [viewportFocused, setViewportFocused] = react.useState(false);
-  const [paused, setPaused] = react.useState(false);
-  const [dragOffsetPx, setDragOffsetPx] = react.useState(0);
-  const [dragging, setDragging] = react.useState(false);
-  const [isMobileOrTablet, setIsMobileOrTablet] = react.useState(false);
-  const touchStartX = react.useRef(null);
-  const dragStartX = react.useRef(null);
-  const hideTimer = react.useRef(null);
-  const viewportRef = react.useRef(null);
-  react.useEffect(() => {
-    const mq = window.matchMedia("(max-width: 1024px)");
-    setIsMobileOrTablet(mq.matches);
-    const handler = (e) => setIsMobileOrTablet(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, []);
-  const maxIndex = data.length - visibleSlides;
-  const prev = () => setCurrentIndex((i) => loop && i === 0 ? maxIndex : Math.max(i - 1, 0));
-  const next = () => setCurrentIndex((i) => loop && i >= maxIndex ? 0 : Math.min(i + 1, maxIndex));
-  react.useEffect(() => {
-    onSlideChange == null ? void 0 : onSlideChange(currentIndex);
-  }, [currentIndex]);
-  const showArrows = () => {
-    if (!overlayArrows) return;
-    clearTimeout(hideTimer.current);
-    setArrowsVisible(true);
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-  };
-  const handleMouseEnter = () => {
-    setPaused(true);
-    if (!overlayArrows) return;
-    clearTimeout(hideTimer.current);
-    setArrowsVisible(true);
-  };
-  const handleMouseLeave = () => {
-    setPaused(false);
-    if (!overlayArrows) return;
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-  };
-  react.useEffect(() => {
-    if (!overlayArrows) return;
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-    return () => clearTimeout(hideTimer.current);
-  }, [overlayArrows]);
-  react.useEffect(() => {
-    if (!autoSlide || paused) return;
-    const id = setInterval(() => {
-      setCurrentIndex((i) => i >= maxIndex ? 0 : i + 1);
-    }, autoSlideSec * 1e3);
-    return () => clearInterval(id);
-  }, [autoSlide, autoSlideSec, paused, maxIndex]);
-  const getResistantOffset = (offsetPx) => {
-    if (loop) return offsetPx;
-    if (currentIndex === 0 && offsetPx > 0) return offsetPx * 0.3;
-    if (currentIndex === maxIndex && offsetPx < 0) return offsetPx * 0.3;
-    return offsetPx;
-  };
-  const handleTouchStart = (e) => {
-    touchStartX.current = e.touches[0].clientX;
-    if (liveDragMobile && isMobileOrTablet) setDragging(true);
-    showArrows();
-  };
-  const handleTouchMove = (e) => {
-    if (!liveDragMobile || !isMobileOrTablet || touchStartX.current === null) return;
-    setDragOffsetPx(getResistantOffset(e.touches[0].clientX - touchStartX.current));
-  };
-  const handleTouchEnd = (e) => {
-    if (liveDragMobile && isMobileOrTablet) {
-      setDragging(false);
-      setDragOffsetPx(0);
-    }
-    if (touchStartX.current === null) return;
-    const delta = touchStartX.current - e.changedTouches[0].clientX;
-    if (delta > SWIPE_THRESHOLD) next();
-    else if (delta < -SWIPE_THRESHOLD) prev();
-    touchStartX.current = null;
-  };
-  const handleMouseDown = (e) => {
-    if (!dragToSlide) return;
-    dragStartX.current = e.clientX;
-    if (liveDrag) setDragging(true);
-  };
-  const handleMouseMove = (e) => {
-    if (!dragToSlide || !liveDrag || dragStartX.current === null) return;
-    setDragOffsetPx(getResistantOffset(e.clientX - dragStartX.current));
-  };
-  const handleMouseUp = (e) => {
-    if (!dragToSlide || dragStartX.current === null) return;
-    if (liveDrag) {
-      setDragging(false);
-      setDragOffsetPx(0);
-    }
-    const delta = dragStartX.current - e.clientX;
-    if (delta > SWIPE_THRESHOLD) next();
-    else if (delta < -SWIPE_THRESHOLD) prev();
-    dragStartX.current = null;
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      prev();
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      next();
-    }
-  };
-  const containerWidth = (_b = (_a = viewportRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
-  const dragOffsetPercent = containerWidth > 0 ? dragOffsetPx / containerWidth * 100 : 0;
-  const translateX = -(currentIndex * (100 / visibleSlides)) + dragOffsetPercent;
-  const arrowTopValue = arrowTop !== void 0 ? typeof arrowTop === "number" ? `${arrowTop}px` : arrowTop : void 0;
-  const totalSlides = maxIndex + 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { onClick: showArrows, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onKeyDown: handleKeyDown, role: "region", "aria-label": "Carousel", ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(SlideArea, { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [
-      hasArrow && /* @__PURE__ */ jsxRuntime.jsx(NavButton, { onClick: prev, disabled: !loop && currentIndex === 0, "aria-label": "Previous slide", $direction: "prev", $overlay: overlayArrows, $visible: arrowsVisible, $arrowTop: arrowTopValue, $viewportFocused: viewportFocused, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft.default, { size: 20, "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SlideViewport, { ref: viewportRef, tabIndex: 0, "aria-label": "Carousel slides. Use arrow keys to navigate.", $draggable: dragToSlide, onFocus: () => {
-        setViewportFocused(true);
-        setPaused(true);
-      }, onBlur: () => {
-        setViewportFocused(false);
-        setPaused(false);
-      }, onMouseDown: handleMouseDown, onMouseLeave: (e) => {
-        if (e.buttons === 1) return;
-        if (liveDrag && dragging) {
-          setDragging(false);
-          setDragOffsetPx(0);
-        }
-        dragStartX.current = null;
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(SlideTrack, { $translateX: translateX, $visibleSlides: visibleSlides, $dragging: dragging, children: data.map(renderCarousel) }) }),
-      hasArrow && /* @__PURE__ */ jsxRuntime.jsx(NavButton, { onClick: next, disabled: !loop && currentIndex === maxIndex, "aria-label": "Next slide", $direction: "next", $overlay: overlayArrows, $visible: arrowsVisible, $arrowTop: arrowTopValue, $viewportFocused: viewportFocused, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.default, { size: 20, "aria-hidden": "true" }) }),
-      autoSlide && /* @__PURE__ */ jsxRuntime.jsx(PauseButton, { onClick: () => setPaused((p) => !p), "aria-label": paused ? "Play slideshow" : "Pause slideshow", children: paused ? /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(PauseIcon, {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("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 ",
-      currentIndex + 1,
-      " of ",
-      totalSlides
-    ] }),
-    autoSlide && showProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $duration: autoSlideSec, $paused: paused }, currentIndex),
-    !areDotsHidden && /* @__PURE__ */ jsxRuntime.jsx(DotsWrapper, { children: Array.from({
-      length: totalSlides
-    }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(Dot, { $active: i === currentIndex, onClick: () => setCurrentIndex(i), "aria-label": `Slide ${i + 1} of ${totalSlides}`, "aria-current": i === currentIndex ? "true" : void 0 }, i)) })
-  ] });
-};
-exports.default = Carousel;
+`,E=50,D=2e3,ye=()=>n.jsxs("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:[n.jsx("rect",{x:"2",y:"1",width:"3",height:"10",rx:"1"}),n.jsx("rect",{x:"7",y:"1",width:"3",height:"10",rx:"1"})]}),Me=()=>n.jsx("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:n.jsx("path",{d:"M2 1.5l9 4.5-9 4.5V1.5z"})}),Ee=({data:t,renderCarousel:l,visibleSlides:R=1,hasArrow:L=!0,overlayArrows:u=!1,arrowTop:m,areDotsHidden:A=!1,autoSlide:w=!1,autoSlideSec:T=3,loop:h=!1,dragToSlide:$=!1,liveDrag:j=!1,liveDragMobile:I=!0,showProgress:G=!1,defaultIndex:J=0,onSlideChange:X,...Q})=>{var U,K;const[i,k]=s.useState(J),[O,p]=s.useState(!0),[P,S]=s.useState(!1),[x,b]=s.useState(!1),[Z,g]=s.useState(0),[q,v]=s.useState(!1),[_,z]=s.useState(!1),d=s.useRef(null),c=s.useRef(null),f=s.useRef(null),B=s.useRef(null);s.useEffect(()=>{const e=window.matchMedia("(max-width: 1024px)");z(e.matches);const r=de=>z(de.matches);return e.addEventListener("change",r),()=>e.removeEventListener("change",r)},[]);const a=t.length-R,y=()=>k(e=>h&&e===0?a:Math.max(e-1,0)),M=()=>k(e=>h&&e>=a?0:Math.min(e+1,a));s.useEffect(()=>{X==null||X(i)},[i]);const V=()=>{u&&(clearTimeout(f.current),p(!0),f.current=setTimeout(()=>p(!1),D))},ee=()=>{b(!0),u&&(clearTimeout(f.current),p(!0))},te=()=>{b(!1),u&&(f.current=setTimeout(()=>p(!1),D))};s.useEffect(()=>{if(u)return f.current=setTimeout(()=>p(!1),D),()=>clearTimeout(f.current)},[u]),s.useEffect(()=>{if(!w||x)return;const e=setInterval(()=>{k(r=>r>=a?0:r+1)},T*1e3);return()=>clearInterval(e)},[w,T,x,a]);const W=e=>h?e:i===0&&e>0||i===a&&e<0?e*.3:e,ne=e=>{d.current=e.touches[0].clientX,I&&_&&v(!0),V()},re=e=>{!I||!_||d.current===null||g(W(e.touches[0].clientX-d.current))},se=e=>{if(I&&_&&(v(!1),g(0)),d.current===null)return;const r=d.current-e.changedTouches[0].clientX;r>E?M():r<-E&&y(),d.current=null},ie=e=>{$&&(c.current=e.clientX,j&&v(!0))},oe=e=>{!$||!j||c.current===null||g(W(e.clientX-c.current))},ae=e=>{if(!$||c.current===null)return;j&&(v(!1),g(0));const r=c.current-e.clientX;r>E?M():r<-E&&y(),c.current=null},ue=e=>{e.key==="ArrowLeft"?(e.preventDefault(),y()):e.key==="ArrowRight"&&(e.preventDefault(),M())},F=(K=(U=B.current)==null?void 0:U.clientWidth)!=null?K:0,ce=F>0?Z/F*100:0,le=-(i*(100/R))+ce,H=m!==void 0?typeof m=="number"?`${m}px`:m:void 0,C=a+1;return n.jsxs(xe,{onClick:V,onMouseEnter:ee,onMouseLeave:te,onMouseMove:oe,onMouseUp:ae,onKeyDown:ue,role:"region","aria-label":"Carousel",...Q,children:[n.jsxs(be,{onTouchStart:ne,onTouchMove:re,onTouchEnd:se,children:[L&&n.jsx(N,{onClick:y,disabled:!h&&i===0,"aria-label":"Previous slide",$direction:"prev",$overlay:u,$visible:O,$arrowTop:H,$viewportFocused:P,children:n.jsx(fe.default,{size:20,"aria-hidden":"true"})}),n.jsx(ge,{ref:B,tabIndex:0,"aria-label":"Carousel slides. Use arrow keys to navigate.",$draggable:$,onFocus:()=>{S(!0),b(!0)},onBlur:()=>{S(!1),b(!1)},onMouseDown:ie,onMouseLeave:e=>{e.buttons!==1&&(j&&q&&(v(!1),g(0)),c.current=null)},children:n.jsx(ve,{$translateX:le,$visibleSlides:R,$dragging:q,children:t.map(l)})}),L&&n.jsx(N,{onClick:M,disabled:!h&&i===a,"aria-label":"Next slide",$direction:"next",$overlay:u,$visible:O,$arrowTop:H,$viewportFocused:P,children:n.jsx(he.default,{size:20,"aria-hidden":"true"})}),w&&n.jsx(ke,{onClick:()=>b(e=>!e),"aria-label":x?"Play slideshow":"Pause slideshow",children:x?n.jsx(Me,{}):n.jsx(ye,{})})]}),n.jsxs("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 ",C]}),w&&G&&n.jsx(je,{$duration:T,$paused:x},i),!A&&n.jsx(me,{children:Array.from({length:C}).map((e,r)=>n.jsx(we,{$active:r===i,onClick:()=>k(r),"aria-label":`Slide ${r+1} of ${C}`,"aria-current":r===i?"true":void 0},r))})]})};exports.default=Ee;

package/cjs/components/Carousel/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Carousel = require("./Carousel.cjs");
-exports.default = Carousel.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Carousel.cjs");exports.default=e.default;