@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Carousel/Carousel.js

@@ -1,9 +1,9 @@
-import { jsxs as O, Fragment as ue, jsx as l } from "react/jsx-runtime";
-import J, { useMemo as de, useState as g, useEffect as R, useRef as D, Children as Qe, isValidElement as ze, useCallback as h, cloneElement as et } from "react";
-import { ChevronLeft as tt, ChevronUp as rt, ChevronRight as nt, ChevronDown as st } from "lucide-react";
+import { jsxs as O, Fragment as ce, jsx as l } from "react/jsx-runtime";
+import J, { useMemo as ue, useState as g, useEffect as R, useRef as D, Children as Qe, isValidElement as ze, useCallback as h, cloneElement as es } from "react";
+import { ChevronLeft as ss, ChevronUp as ts, ChevronRight as rs, ChevronDown as ns } from "lucide-react";
 import { cn as f } from "../../packages/ui/src/lib/utils.js";
-import { ImageViewer as at } from "../ImageViewer/ImageViewer.js";
-const lt = J.forwardRef(
+import { ImageViewer as as } from "../ImageViewer/ImageViewer.js";
+const ls = J.forwardRef(
   ({
     children: Q,
     initialSlide: A = 0,
@@ -15,10 +15,10 @@ const lt = J.forwardRef(
     centeredSlides: fe = !1,
     loop: Y = !1,
     rewind: W = !1,
-    effect: n = "slide",
+    effect: r = "slide",
     breakpoints: k,
-    navigation: te = !1,
-    pagination: re = !1,
+    navigation: se = !1,
+    pagination: te = !1,
     autoplay: v = !1,
     allowTouchMove: E = !0,
     grabCursor: Pe = !0,
@@ -35,24 +35,24 @@ const lt = J.forwardRef(
     onAutoplayStart: ve,
     onAutoplayStop: we
   }, Ae) => {
-    const B = typeof te == "boolean" ? { enabled: te, position: "inside" } : { enabled: !0, position: "inside", ...te }, o = typeof re == "boolean" ? { enabled: re, type: "bullets", position: "inside" } : { enabled: !0, type: "bullets", position: "inside", ...re }, m = de(
+    const B = typeof se == "boolean" ? { enabled: se, position: "inside" } : { enabled: !0, position: "inside", ...se }, o = typeof te == "boolean" ? { enabled: te, type: "bullets", position: "inside" } : { enabled: !0, type: "bullets", position: "inside", ...te }, m = ue(
       () => typeof v == "boolean" ? { delay: 3e3, disableOnInteraction: !0 } : { delay: 3e3, disableOnInteraction: !0, ...v },
       [v]
-    ), [c, Le] = g(A), [Te, ye] = g(A === 0), [ne, xe] = g(!1), [se, ae] = g(!1), [ke, We] = g(0), [j, Ce] = g(!1), [Be, F] = g(!1), [Xe, je] = g(
+    ), [i, Le] = g(A), [Te, ye] = g(A === 0), [re, xe] = g(!1), [ne, ae] = g(!1), [ke, We] = g(0), [j, Ce] = g(!1), [Be, F] = g(!1), [Xe, je] = g(
       typeof window < "u" ? window.innerWidth : 1024
     ), [Fe, Me] = g(!1), [Ue, Ne] = g(0);
     R(() => {
       if (!k) return;
-      const t = () => {
+      const s = () => {
         je(window.innerWidth);
       };
-      return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+      return window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
     }, [k]);
-    const le = de(() => {
+    const le = ue(() => {
       if (!k)
         return { slidesPerView: L, spaceBetween: I, slidesPerGroup: T };
-      const t = Object.keys(k).map(Number).sort((e, r) => r - e);
-      for (const e of t)
+      const s = Object.keys(k).map(Number).sort((e, t) => t - e);
+      for (const e of s)
         if (Xe >= e)
           return {
             slidesPerView: k[e].slidesPerView ?? L,
@@ -60,56 +60,56 @@ const lt = J.forwardRef(
             slidesPerGroup: k[e].slidesPerGroup ?? T
           };
       return { slidesPerView: L, spaceBetween: I, slidesPerGroup: T };
-    }, [k, Xe, L, I, T]), Ie = le.slidesPerView, U = le.spaceBetween, _ = le.slidesPerGroup, G = D(null), _e = D(null), H = D(null), z = D(null), i = D({
+    }, [k, Xe, L, I, T]), Ie = le.slidesPerView, U = le.spaceBetween, _ = le.slidesPerGroup, G = D(null), _e = D(null), H = D(null), z = D(null), d = D({
       startX: 0,
       startY: 0,
       currentX: 0,
       currentY: 0
     }), S = D(!1), K = Qe.toArray(Q).filter(
-      (t) => ze(t) && t.type === Se
-    ), s = K.length, oe = h(
-      (t) => {
+      (s) => ze(s) && s.type === Se
+    ), n = K.length, oe = h(
+      (s) => {
         let e = null;
-        return J.Children.forEach(t, (r) => {
-          e || ze(r) && (r.type === "img" ? e = r : r.props && typeof r.props == "object" && "children" in r.props && (e = oe(
-            r.props.children
+        return J.Children.forEach(s, (t) => {
+          e || ze(t) && (t.type === "img" ? e = t : t.props && typeof t.props == "object" && "children" in t.props && (e = oe(
+            t.props.children
           )));
         }), e;
       },
       []
-    ), N = de(() => M ? K.map((t) => {
-      const r = oe(t.props.children);
-      return r ? {
-        src: r.props.src || "",
-        alt: r.props.alt || ""
+    ), N = ue(() => M ? K.map((s) => {
+      const t = oe(s.props.children);
+      return t ? {
+        src: t.props.src || "",
+        alt: t.props.alt || ""
       } : { src: "", alt: "" };
     }) : [], [K, M, oe]), Ge = h(
-      (t) => {
+      (s) => {
         console.log("Slide clicked:", {
-          index: t,
+          index: s,
           enableImageViewer: M,
-          hasSrc: !!N[t]?.src,
+          hasSrc: !!N[s]?.src,
           hasDragged: S.current,
           imageInfos: N
-        }), M && N[t]?.src && !S.current && (console.log("Opening viewer at index:", t), Ne(t), Me(!0));
+        }), M && N[s]?.src && !S.current && (console.log("Opening viewer at index:", s), Ne(s), Me(!0));
       },
       [M, N]
-    ), b = Ie === "auto" ? 1 : Math.min(Ie, s);
+    ), b = Ie === "auto" ? 1 : Math.min(Ie, n);
     R(() => {
-      Y ? (ye(!1), xe(!1)) : (ye(c === 0), xe(c >= s - b));
-    }, [c, s, b, Y]);
+      Y ? (ye(!1), xe(!1)) : (ye(i === 0), xe(i >= n - b));
+    }, [i, n, b, Y]);
     const w = h(
-      (t) => {
-        let e = t;
-        Y ? e = (t % s + s) % s : W ? t < 0 ? e = s - 1 : t >= s ? e = 0 : e = t : e = Math.max(0, Math.min(t, s - b)), Le(e);
-        const r = a === "horizontal" ? G.current?.offsetWidth || 0 : G.current?.offsetHeight || 0, u = r / b;
-        let d = -e * (u + U);
-        fe && b < s && (d += r / 2 - u / 2), We(d), o.type === "scrollbar" && (F(!0), z.current && clearTimeout(z.current), z.current = setTimeout(() => {
+      (s) => {
+        let e = s;
+        Y ? e = (s % n + n) % n : W ? s < 0 ? e = n - 1 : s >= n ? e = 0 : e = s : e = Math.max(0, Math.min(s, n - b)), Le(e);
+        const t = a === "horizontal" ? G.current?.offsetWidth || 0 : G.current?.offsetHeight || 0, c = t / b;
+        let u = -e * (c + U);
+        fe && b < n && (u += t / 2 - c / 2), We(u), o.type === "scrollbar" && (F(!0), z.current && clearTimeout(z.current), z.current = setTimeout(() => {
           F(!1);
-        }, 1e3)), me?.({ activeIndex: e, realIndex: e }), e === 0 && be?.(), e >= s - b && ge?.();
+        }, 1e3)), me?.({ activeIndex: e, realIndex: e }), e === 0 && be?.(), e >= n - b && ge?.();
       },
       [
-        s,
+        n,
         b,
         Y,
         W,
@@ -122,21 +122,21 @@ const lt = J.forwardRef(
         ge
       ]
     ), y = h(() => {
-      w(c + _);
-    }, [c, _, w]), x = h(() => {
-      w(c - _);
-    }, [c, _, w]), C = h(() => {
+      w(i + _);
+    }, [i, _, w]), x = h(() => {
+      w(i - _);
+    }, [i, _, w]), C = h(() => {
       H.current && (clearInterval(H.current), H.current = null), Ce(!1), we?.();
     }, [we]), V = h(() => {
       v && (H.current = setInterval(() => {
-        m.reverseDirection ? x() : y(), m.stopOnLastSlide && ne && C();
+        m.reverseDirection ? x() : y(), m.stopOnLastSlide && re && C();
       }, m.delay), Ce(!0), ve?.());
     }, [
       m,
       v,
       y,
       x,
-      ne,
+      re,
       ve,
       C
     ]);
@@ -151,92 +151,92 @@ const lt = J.forwardRef(
       j,
       V
     ]), Ve = h(
-      (t) => {
+      (s) => {
         if (E) {
           try {
-            t.currentTarget.setPointerCapture(t.pointerId);
+            s.currentTarget.setPointerCapture(s.pointerId);
           } catch (e) {
             console.error("Failed to capture pointer:", e);
           }
-          i.current.startX = t.clientX, i.current.startY = t.clientY, i.current.currentX = t.clientX, i.current.currentY = t.clientY, S.current = !1, ae(!0), m.disableOnInteraction && C();
+          d.current.startX = s.clientX, d.current.startY = s.clientY, d.current.currentX = s.clientX, d.current.currentY = s.clientY, S.current = !1, ae(!0), m.disableOnInteraction && C();
         }
       },
       [E, m.disableOnInteraction, C]
     ), Ze = h(
-      (t) => {
+      (s) => {
         if (!E) return;
-        const e = i.current.startX, r = i.current.startY;
-        if (e === 0 && r === 0) return;
-        t.preventDefault(), i.current.currentX = t.clientX, i.current.currentY = t.clientY;
-        const u = Math.abs(t.clientX - i.current.startX), d = Math.abs(t.clientY - i.current.startY);
-        (u > 5 || d > 5) && (S.current = !0), ae(!0);
+        const e = d.current.startX, t = d.current.startY;
+        if (e === 0 && t === 0) return;
+        s.preventDefault(), d.current.currentX = s.clientX, d.current.currentY = s.clientY;
+        const c = Math.abs(s.clientX - d.current.startX), u = Math.abs(s.clientY - d.current.startY);
+        (c > 5 || u > 5) && (S.current = !0), ae(!0);
       },
       [E]
     ), Ye = h(() => {
-      const t = i.current.startX, e = i.current.startY;
-      if (t === 0 && e === 0) return;
-      const r = i.current.currentX - t, u = i.current.currentY - e, d = a === "horizontal" ? r : u;
-      Math.abs(d) > 0 && S.current ? d > 0 ? x() : y() : w(c), setTimeout(() => {
-        ae(!1), i.current.startX = 0, i.current.startY = 0, i.current.currentX = 0, i.current.currentY = 0, S.current = !1;
+      const s = d.current.startX, e = d.current.startY;
+      if (s === 0 && e === 0) return;
+      const t = d.current.currentX - s, c = d.current.currentY - e, u = a === "horizontal" ? t : c;
+      Math.abs(u) > 0 && S.current ? u > 0 ? x() : y() : w(i), setTimeout(() => {
+        ae(!1), d.current.startX = 0, d.current.startY = 0, d.current.currentX = 0, d.current.currentY = 0, S.current = !1;
       }, 50);
-    }, [a, x, y, w, c]);
+    }, [a, x, y, w, i]);
     R(() => {
       if (!pe) return;
-      const t = (e) => {
+      const s = (e) => {
         e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), x()) : (e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), y());
       };
-      return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+      return window.addEventListener("keydown", s), () => window.removeEventListener("keydown", s);
     }, [pe, y, x]), R(() => {
       if (!he) return;
-      const t = (r) => {
-        r.preventDefault(), r.deltaY > 0 ? y() : r.deltaY < 0 && x();
+      const s = (t) => {
+        t.preventDefault(), t.deltaY > 0 ? y() : t.deltaY < 0 && x();
       }, e = G.current;
       if (e)
-        return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+        return e.addEventListener("wheel", s, { passive: !1 }), () => e.removeEventListener("wheel", s);
     }, [he, y, x]);
     const Ee = () => {
       if (!o.enabled) return null;
       const {
-        type: t,
+        type: s,
         clickable: e,
-        dynamicBullets: r,
-        dynamicMainBullets: u = 1,
-        position: d = "inside"
-      } = o, P = d === "outside";
-      if (t === "bullets") {
-        const $ = r ? Math.min(u * 2 + 1, s) : s;
+        dynamicBullets: t,
+        dynamicMainBullets: c = 1,
+        position: u = "inside"
+      } = o, P = u === "outside";
+      if (s === "bullets") {
+        const $ = t ? Math.min(c * 2 + 1, n) : n;
         return /* @__PURE__ */ l(
           "div",
           {
             className: f(
-              "flex items-center justify-center gap-2",
-              P ? "mt-4" : "absolute bottom-4 left-1/2 -translate-x-1/2",
+              "ds:flex ds:items-center ds:justify-center ds:gap-2",
+              P ? "ds:mt-4" : "ds:absolute ds:bottom-4 ds:left-1/2 ds:-translate-x-1/2",
               // Inside: overlay
-              a === "vertical" && !P && "flex-col right-4 left-auto top-1/2 -translate-y-1/2 translate-x-0 bottom-auto"
+              a === "vertical" && !P && "ds:flex-col ds:right-4 ds:left-auto ds:top-1/2 ds:-translate-y-1/2 ds:translate-x-0 ds:bottom-auto"
             ),
             children: Array.from({ length: $ }).map((Z, q) => {
-              const p = r ? Math.max(
+              const p = t ? Math.max(
                 0,
                 Math.min(
-                  q + c - u,
-                  s - 1
+                  q + i - c,
+                  n - 1
                 )
-              ) : q, X = p === c;
+              ) : q, X = p === i;
               return o.renderBullet ? /* @__PURE__ */ l(J.Fragment, { children: o.renderBullet(
                 p,
                 f(
-                  "carousel-pagination-bullet",
-                  X && "carousel-pagination-bullet-active"
+                  "ds:carousel-pagination-bullet",
+                  X && "ds:carousel-pagination-bullet-active"
                 )
               ) }, p) : /* @__PURE__ */ l(
                 "button",
                 {
                   onClick: () => e && w(p),
                   className: f(
-                    "rounded-full transition-all",
-                    "w-2 h-2",
-                    X ? a === "horizontal" ? "bg-primary w-6" : "bg-primary h-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50",
-                    e && "cursor-pointer"
+                    "ds:rounded-full ds:transition-all",
+                    "ds:w-2 ds:h-2",
+                    X ? a === "horizontal" ? "ds:bg-primary ds:w-6" : "ds:bg-primary ds:h-6" : "ds:bg-muted-foreground/30 ds:hover:bg-muted-foreground/50",
+                    e && "ds:cursor-pointer"
                   ),
                   "aria-label": `Go to slide ${p + 1}`
                 },
@@ -246,85 +246,85 @@ const lt = J.forwardRef(
           }
         );
       }
-      if (t === "fraction")
+      if (s === "fraction")
         return /* @__PURE__ */ l(
           "div",
           {
             className: f(
-              "text-center text-sm text-muted-foreground bg-background/80 backdrop-blur px-3 py-1 rounded-full",
-              P ? "mt-4 mx-auto w-fit" : "absolute bottom-4 left-1/2 -translate-x-1/2"
+              "ds:text-center ds:text-sm ds:text-muted-foreground ds:bg-background/80 ds:backdrop-blur ds:px-3 ds:py-1 ds:rounded-full",
+              P ? "ds:mt-4 ds:mx-auto ds:w-fit" : "ds:absolute ds:bottom-4 ds:left-1/2 ds:-translate-x-1/2"
               // Inside: overlay
             ),
             children: o.renderFraction ? o.renderFraction(
               "carousel-pagination-current",
               "carousel-pagination-total"
-            ) : /* @__PURE__ */ O(ue, { children: [
-              /* @__PURE__ */ l("span", { className: "carousel-pagination-current font-semibold text-foreground", children: c + 1 }),
+            ) : /* @__PURE__ */ O(ce, { children: [
+              /* @__PURE__ */ l("span", { className: "ds:carousel-pagination-current ds:font-semibold ds:text-foreground", children: i + 1 }),
               " / ",
-              /* @__PURE__ */ l("span", { className: "carousel-pagination-total", children: s })
+              /* @__PURE__ */ l("span", { className: "ds:carousel-pagination-total", children: n })
             ] })
           }
         );
-      if (t === "progressbar") {
-        const $ = (c + 1) / s * 100, Z = o.position === "inside";
+      if (s === "progressbar") {
+        const $ = (i + 1) / n * 100, Z = o.position === "inside";
         return /* @__PURE__ */ l(
           "div",
           {
             onClick: (p) => {
               if (!e) return;
-              const X = p.currentTarget.getBoundingClientRect(), ie = (p.clientX - X.left) / X.width, ce = Math.floor(ie * s);
-              w(Math.min(ce, s - 1));
+              const X = p.currentTarget.getBoundingClientRect(), de = (p.clientX - X.left) / X.width, ie = Math.floor(de * n);
+              w(Math.min(ie, n - 1));
             },
             className: f(
-              "w-full h-1 bg-muted rounded-full overflow-hidden",
-              Z ? "absolute bottom-0 left-0 right-0 rounded-none" : "mt-4",
-              e && "cursor-pointer"
+              "ds:w-full ds:h-1 ds:bg-muted ds:rounded-full ds:overflow-hidden",
+              Z ? "ds:absolute ds:bottom-0 ds:left-0 ds:right-0 ds:rounded-none" : "ds:mt-4",
+              e && "ds:cursor-pointer"
             ),
             children: o.renderProgressbar ? o.renderProgressbar("carousel-progressbar-fill") : /* @__PURE__ */ l(
               "div",
               {
-                className: "carousel-progressbar-fill h-full bg-primary transition-all duration-300",
+                className: "ds:carousel-progressbar-fill ds:h-full ds:bg-primary ds:transition-all ds:duration-300",
                 style: { width: `${$}%` }
               }
             )
           }
         );
       }
-      if (t === "custom" && o.renderCustom)
+      if (s === "custom" && o.renderCustom)
         return /* @__PURE__ */ l(
           "div",
           {
             className: f(
-              P ? "mt-4 flex justify-center" : "absolute bottom-4 left-1/2 -translate-x-1/2"
+              P ? "ds:mt-4 ds:flex ds:justify-center" : "ds:absolute ds:bottom-4 ds:left-1/2 ds:-translate-x-1/2"
               // Inside: overlay
             ),
-            children: o.renderCustom(c + 1, s)
+            children: o.renderCustom(i + 1, n)
           }
         );
-      if (t === "scrollbar") {
-        const $ = 1 / s * 100, Z = c / (s - 1) * (100 - $);
+      if (s === "scrollbar") {
+        const $ = 1 / n * 100, Z = i / (n - 1) * (100 - $);
         return /* @__PURE__ */ l(
           "div",
           {
             onClick: (p) => {
               if (!e) return;
               F(!0), z.current && clearTimeout(z.current);
-              const X = p.currentTarget.getBoundingClientRect(), ie = (p.clientX - X.left) / X.width, ce = Math.round(ie * (s - 1));
-              w(Math.max(0, Math.min(ce, s - 1))), z.current = setTimeout(() => {
+              const X = p.currentTarget.getBoundingClientRect(), de = (p.clientX - X.left) / X.width, ie = Math.round(de * (n - 1));
+              w(Math.max(0, Math.min(ie, n - 1))), z.current = setTimeout(() => {
                 F(!1);
               }, 1e3);
             },
             className: f(
-              "w-full h-1 bg-muted/50 rounded-full transition-opacity duration-300",
-              P ? "mt-4" : "absolute bottom-0 left-1/2 -translate-x-1/2",
+              "ds:w-full ds:h-1 ds:bg-muted/50 ds:rounded-full ds:transition-opacity ds:duration-300",
+              P ? "ds:mt-4" : "ds:absolute ds:bottom-0 ds:left-1/2 ds:-translate-x-1/2",
               // Inside: overlay at bottom
-              e && "cursor-pointer",
-              Be ? "opacity-100" : "opacity-0"
+              e && "ds:cursor-pointer",
+              Be ? "ds:opacity-100" : "ds:opacity-0"
             ),
             children: o.renderScrollbar ? o.renderScrollbar("carousel-scrollbar-drag") : /* @__PURE__ */ l(
               "div",
               {
-                className: "carousel-scrollbar-drag h-full bg-primary rounded-full transition-all duration-300 absolute left-0",
+                className: "ds:carousel-scrollbar-drag ds:h-full ds:bg-primary ds:rounded-full ds:transition-all ds:duration-300 ds:absolute ds:left-0",
                 style: {
                   width: `${$}%`,
                   left: `${Z}%`
@@ -335,9 +335,9 @@ const lt = J.forwardRef(
         );
       }
       return null;
-    }, qe = (t) => {
-      const e = t - c;
-      switch (n) {
+    }, qe = (s) => {
+      const e = s - i;
+      switch (r) {
         case "fade":
           return {
             opacity: e === 0 ? 1 : 0,
@@ -369,12 +369,12 @@ const lt = J.forwardRef(
           return {};
       }
     };
-    return /* @__PURE__ */ O(ue, { children: [
+    return /* @__PURE__ */ O(ce, { children: [
       /* @__PURE__ */ O(
         "div",
         {
           ref: Ae,
-          className: f("carousel-container", De, $e),
+          className: f("ds:carousel-container", De, $e),
           onMouseEnter: He,
           onMouseLeave: Ke,
           children: [
@@ -383,12 +383,12 @@ const lt = J.forwardRef(
               {
                 ref: G,
                 className: f(
-                  "carousel relative overflow-hidden",
-                  (n === "fade" || n === "cube" || n === "flip" || n === "cards") && "aspect-4/3",
-                  n === "coverflow" && "aspect-4/2 rounded-xl",
-                  a === "vertical" && n === "slide" && "h-full",
-                  Pe && E && !se && "cursor-grab",
-                  se && "cursor-grabbing"
+                  "ds:carousel ds:relative ds:overflow-hidden",
+                  (r === "fade" || r === "cube" || r === "flip" || r === "cards") && "ds:aspect-4/3",
+                  r === "coverflow" && "ds:aspect-4/2 ds:rounded-xl",
+                  a === "vertical" && r === "slide" && "ds:h-full",
+                  Pe && E && !ne && "ds:cursor-grab",
+                  ne && "ds:cursor-grabbing"
                 ),
                 children: [
                   /* @__PURE__ */ l(
@@ -396,84 +396,84 @@ const lt = J.forwardRef(
                     {
                       ref: _e,
                       className: f(
-                        "carousel-wrapper select-none",
-                        n === "slide" && "flex",
-                        a === "vertical" && n === "slide" && "flex-col h-full",
-                        n !== "slide" && "relative",
+                        "ds:carousel-wrapper ds:select-none",
+                        r === "slide" && "ds:flex",
+                        a === "vertical" && r === "slide" && "ds:flex-col ds:h-full",
+                        r !== "slide" && "ds:relative",
                         Oe
                       ),
                       style: {
-                        transform: n === "slide" ? a === "horizontal" ? `translateX(${ke}px)` : `translateY(${ke}px)` : void 0,
-                        transition: se ? "none" : `transform ${ee}ms ease`,
-                        gap: n === "slide" ? `${U}px` : void 0,
-                        perspective: n !== "slide" && n !== "fade" ? "1200px" : void 0,
+                        transform: r === "slide" ? a === "horizontal" ? `translateX(${ke}px)` : `translateY(${ke}px)` : void 0,
+                        transition: ne ? "none" : `transform ${ee}ms ease`,
+                        gap: r === "slide" ? `${U}px` : void 0,
+                        perspective: r !== "slide" && r !== "fade" ? "1200px" : void 0,
                         touchAction: E ? "none" : "auto",
-                        height: a === "vertical" && n === "slide" ? "100%" : void 0
+                        height: a === "vertical" && r === "slide" ? "100%" : void 0
                       },
                       onPointerDown: Ve,
                       onPointerMove: Ze,
                       onPointerUp: Ye,
                       onPointerCancel: Ye,
-                      children: K.map((t, e) => {
-                        const r = e === c, u = t;
-                        return et(u, {
+                      children: K.map((s, e) => {
+                        const t = e === i, c = s;
+                        return es(c, {
                           key: e,
                           className: f(
-                            "carousel-slide",
+                            "ds:carousel-slide",
                             Re,
-                            u.props.className,
-                            n !== "slide" && "absolute inset-0",
-                            n === "fade" && "transition-opacity duration-300",
-                            n !== "slide" && n !== "fade" && "transition-all duration-500",
-                            M && N[e]?.src && "cursor-pointer"
+                            c.props.className,
+                            r !== "slide" && "ds:absolute ds:inset-0",
+                            r === "fade" && "ds:transition-opacity ds:duration-300",
+                            r !== "slide" && r !== "fade" && "ds:transition-all ds:duration-500",
+                            M && N[e]?.src && "ds:cursor-pointer"
                           ),
                           style: {
-                            flex: n === "slide" ? a === "vertical" ? "0 0 100%" : `0 0 calc(${100 / b}% - ${U * (b - 1) / b}px)` : void 0,
-                            minWidth: n === "slide" && a === "horizontal" ? 0 : void 0,
-                            minHeight: n === "slide" && a === "vertical" ? 0 : void 0,
-                            height: a === "vertical" && n === "slide" ? "100%" : void 0,
+                            flex: r === "slide" ? a === "vertical" ? "0 0 100%" : `0 0 calc(${100 / b}% - ${U * (b - 1) / b}px)` : void 0,
+                            minWidth: r === "slide" && a === "horizontal" ? 0 : void 0,
+                            minHeight: r === "slide" && a === "vertical" ? 0 : void 0,
+                            height: a === "vertical" && r === "slide" ? "100%" : void 0,
                             userSelect: "none",
                             // @ts-expect-error - WebkitUserDrag is not in CSSProperties but is valid CSS
                             WebkitUserDrag: "none",
-                            ...n !== "slide" ? qe(e) : {},
-                            ...u.props.style
+                            ...r !== "slide" ? qe(e) : {},
+                            ...c.props.style
                           },
-                          onClick: (d) => {
-                            d.stopPropagation(), Ge(e);
+                          onClick: (u) => {
+                            u.stopPropagation(), Ge(e);
                           },
-                          onDragStart: (d) => d.preventDefault(),
-                          "data-active": r,
+                          onDragStart: (u) => u.preventDefault(),
+                          "data-active": t,
                           "data-index": e
                         });
                       })
                     }
                   ),
                   o.enabled && o.position !== "outside" && Ee(),
-                  B.enabled && B.position === "inside" && /* @__PURE__ */ O(ue, { children: [
+                  B.enabled && B.position === "inside" && /* @__PURE__ */ O(ce, { children: [
                     /* @__PURE__ */ l(
                       "button",
                       {
                         onClick: x,
                         disabled: !Y && !W && Te,
                         className: f(
-                          "absolute z-10 w-10 h-10 rounded-full bg-background/80 backdrop-blur shadow-lg flex items-center justify-center transition-all hover:bg-background disabled:opacity-30 disabled:cursor-not-allowed",
-                          a === "horizontal" ? "left-4 top-1/2 -translate-y-1/2" : "top-4 left-1/2 -translate-x-1/2"
+                          "ds:absolute ds:z-10 ds:w-10 ds:h-10 ds:rounded-full ds:bg-background/80 ds:backdrop-blur ds:shadow-lg ds:flex ds:items-center ds:justify-center ds:transition-all ds:hover:bg-background ds:disabled:opacity-30 ds:disabled:cursor-not-allowed",
+                          a === "horizontal" ? "ds:left-4 ds:top-1/2 ds:-translate-y-1/2" : "ds:top-4 ds:left-1/2 ds:-translate-x-1/2"
                         ),
                         "aria-label": "Previous slide",
-                        children: B.prevEl || (a === "horizontal" ? /* @__PURE__ */ l(tt, { className: "w-5 h-5" }) : /* @__PURE__ */ l(rt, { className: "w-5 h-5" }))
+                        children: B.prevEl || (a === "horizontal" ? /* @__PURE__ */ l(ss, { className: "ds:w-5 ds:h-5" }) : /* @__PURE__ */ l(ts, { className: "ds:w-5 ds:h-5" }))
                       }
                     ),
                     /* @__PURE__ */ l(
                       "button",
                       {
                         onClick: y,
-                        disabled: !Y && !W && ne,
+                        disabled: !Y && !W && re,
                         className: f(
-                          "absolute z-10 w-10 h-10 rounded-full bg-background/80 backdrop-blur shadow-lg flex items-center justify-center transition-all hover:bg-background disabled:opacity-30 disabled:cursor-not-allowed",
-                          a === "horizontal" ? "right-4 top-1/2 -translate-y-1/2" : "bottom-4 left-1/2 -translate-x-1/2"
+                          "ds:absolute ds:z-10 ds:w-10 ds:h-10 ds:rounded-full ds:bg-background/80 ds:backdrop-blur ds:shadow-lg ds:flex ds:items-center ds:justify-center ds:transition-all ds:hover:bg-background ds:disabled:opacity-30 ds:disabled:cursor-not-allowed",
+                          a === "horizontal" ? "ds:right-4 ds:top-1/2 ds:-translate-y-1/2" : "ds:bottom-4 ds:left-1/2 ds:-translate-x-1/2"
                         ),
                         "aria-label": "Next slide",
-                        children: B.nextEl || (a === "horizontal" ? /* @__PURE__ */ l(nt, { className: "w-5 h-5" }) : /* @__PURE__ */ l(st, { className: "w-5 h-5" }))
+                        children: B.nextEl || (a === "horizontal" ? /* @__PURE__ */ l(rs, { className: "ds:w-5 ds:h-5" }) : /* @__PURE__ */ l(ns, { className: "ds:w-5 ds:h-5" }))
                       }
                     )
                   ] })
@@ -485,7 +485,7 @@ const lt = J.forwardRef(
         }
       ),
       M && N.length > 0 && /* @__PURE__ */ l(
-        at,
+        as,
         {
           images: N,
           visible: Fe,
@@ -499,12 +499,12 @@ const lt = J.forwardRef(
     ] });
   }
 );
-lt.displayName = "Carousel";
+ls.displayName = "Carousel";
 const Se = J.forwardRef(({ children: Q, className: A, style: a, ...ee }, I) => /* @__PURE__ */ l("div", { ref: I, className: A, style: a, ...ee, children: Q }));
 Se.displayName = "CarouselSlide";
 export {
-  lt as Carousel,
+  ls as Carousel,
   Se as CarouselSlide,
-  lt as default
+  ls as default
 };
 //# sourceMappingURL=Carousel.js.map