framepexls-ui-lib 1.7.0 → 1.8.0

package/dist/Carousel.d.mts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type CarouselSlide = {
+    key?: string;
+    label?: string;
+    content: React__default.ReactNode;
+    background?: {
+        src: string;
+        alt?: string;
+        overlay?: boolean;
+    };
+};
+type CarouselApi = {
+    index: number;
+    len: number;
+    dir: 1 | -1;
+    reduceMotion: boolean;
+    perfLite: boolean;
+    autoplayActive: boolean;
+    goTo: (idx: number) => void;
+    next: () => void;
+    prev: () => void;
+};
+declare function useCarousel(): CarouselApi;
+type CarouselProps = {
+    className?: string;
+    slides: CarouselSlide[];
+    initialIndex?: number;
+    autoAdvanceMs?: number;
+    backgroundMotion?: "auto" | "always" | "never";
+    showControls?: boolean;
+    showDots?: boolean;
+    chrome?: "card" | "plain";
+    showDecor?: boolean;
+    overlayNavTone?: "onDark" | "onLight";
+    frameClassName?: string;
+    contentClassName?: string;
+    contentAlign?: "start" | "center" | "between";
+    overlayNavBottomPx?: number;
+    heightMode?: "max-all" | "max-seen" | "none";
+    minHeightPx?: number;
+    renderOverlay?: (api: CarouselApi) => React__default.ReactNode;
+    labels?: {
+        title?: string;
+        prev?: string;
+        next?: string;
+        goTo?: (n: number) => string;
+    };
+};
+declare function Carousel({ className, slides, initialIndex, autoAdvanceMs, backgroundMotion, showControls, showDots, chrome, showDecor, overlayNavTone, frameClassName, contentClassName, contentAlign, overlayNavBottomPx, heightMode, minHeightPx, renderOverlay, labels, }: CarouselProps): react_jsx_runtime.JSX.Element | null;
+
+export { type CarouselApi, type CarouselProps, type CarouselSlide, Carousel as default, useCarousel };

package/dist/Carousel.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type CarouselSlide = {
+    key?: string;
+    label?: string;
+    content: React__default.ReactNode;
+    background?: {
+        src: string;
+        alt?: string;
+        overlay?: boolean;
+    };
+};
+type CarouselApi = {
+    index: number;
+    len: number;
+    dir: 1 | -1;
+    reduceMotion: boolean;
+    perfLite: boolean;
+    autoplayActive: boolean;
+    goTo: (idx: number) => void;
+    next: () => void;
+    prev: () => void;
+};
+declare function useCarousel(): CarouselApi;
+type CarouselProps = {
+    className?: string;
+    slides: CarouselSlide[];
+    initialIndex?: number;
+    autoAdvanceMs?: number;
+    backgroundMotion?: "auto" | "always" | "never";
+    showControls?: boolean;
+    showDots?: boolean;
+    chrome?: "card" | "plain";
+    showDecor?: boolean;
+    overlayNavTone?: "onDark" | "onLight";
+    frameClassName?: string;
+    contentClassName?: string;
+    contentAlign?: "start" | "center" | "between";
+    overlayNavBottomPx?: number;
+    heightMode?: "max-all" | "max-seen" | "none";
+    minHeightPx?: number;
+    renderOverlay?: (api: CarouselApi) => React__default.ReactNode;
+    labels?: {
+        title?: string;
+        prev?: string;
+        next?: string;
+        goTo?: (n: number) => string;
+    };
+};
+declare function Carousel({ className, slides, initialIndex, autoAdvanceMs, backgroundMotion, showControls, showDots, chrome, showDecor, overlayNavTone, frameClassName, contentClassName, contentAlign, overlayNavBottomPx, heightMode, minHeightPx, renderOverlay, labels, }: CarouselProps): react_jsx_runtime.JSX.Element | null;
+
+export { type CarouselApi, type CarouselProps, type CarouselSlide, Carousel as default, useCarousel };

package/dist/Carousel.js

@@ -0,0 +1,428 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Carousel_exports = {};
+__export(Carousel_exports, {
+  default: () => Carousel,
+  useCarousel: () => useCarousel
+});
+module.exports = __toCommonJS(Carousel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_Button = __toESM(require("./Button"));
+var import_iconos = require("./iconos");
+const CarouselContext = import_react.default.createContext(null);
+function useCarousel() {
+  const ctx = import_react.default.useContext(CarouselContext);
+  if (!ctx) throw new Error("useCarousel debe usarse dentro de <Carousel />");
+  return ctx;
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function readPerfLiteFromDom() {
+  try {
+    return document.documentElement.dataset.perf === "lite";
+  } catch {
+    return false;
+  }
+}
+function Carousel({
+  className,
+  slides,
+  initialIndex = 0,
+  autoAdvanceMs = 8e3,
+  backgroundMotion = "auto",
+  showControls = true,
+  showDots = true,
+  chrome = "card",
+  showDecor = true,
+  overlayNavTone = "onDark",
+  frameClassName,
+  contentClassName,
+  contentAlign = "start",
+  overlayNavBottomPx,
+  heightMode = "max-seen",
+  minHeightPx = 240,
+  renderOverlay,
+  labels
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const safeSlides = (slides != null ? slides : []).filter(Boolean);
+  const len = safeSlides.length;
+  const [index, setIndex] = import_react.default.useState(() => Math.min(Math.max(0, initialIndex), Math.max(0, len - 1)));
+  const [dir, setDir] = import_react.default.useState(1);
+  const rootRef = import_react.default.useRef(null);
+  const activeRef = import_react.default.useRef(null);
+  const measureBoxRef = import_react.default.useRef(null);
+  const measureRefs = import_react.default.useRef([]);
+  const [lockedHeight, setLockedHeight] = import_react.default.useState(minHeightPx);
+  const [effectiveMode, setEffectiveMode] = import_react.default.useState(heightMode);
+  const [isInView, setIsInView] = import_react.default.useState(true);
+  const [isPageVisible, setIsPageVisible] = import_react.default.useState(true);
+  const [perfLite, setPerfLite] = import_react.default.useState(false);
+  const [isAnimating, setIsAnimating] = import_react.default.useState(false);
+  const [hasBackdropBlur, setHasBackdropBlur] = import_react.default.useState(false);
+  import_react.default.useEffect(() => {
+    if (!len) return;
+    setIndex((i) => Math.min(i, len - 1));
+  }, [len]);
+  import_react.default.useEffect(() => {
+    if (!len) return;
+    setIsAnimating(true);
+    const id = window.setTimeout(() => setIsAnimating(false), 480);
+    return () => window.clearTimeout(id);
+  }, [index, len]);
+  import_react.default.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const onVis = () => setIsPageVisible(document.visibilityState !== "hidden");
+    onVis();
+    document.addEventListener("visibilitychange", onVis);
+    return () => document.removeEventListener("visibilitychange", onVis);
+  }, []);
+  import_react.default.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const update = () => setPerfLite(readPerfLiteFromDom());
+    update();
+    const mo = new MutationObserver(() => update());
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["data-perf"] });
+    return () => mo.disconnect();
+  }, []);
+  import_react.default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const node = rootRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(
+      (entries) => setIsInView(entries.some((e) => e.isIntersecting)),
+      { root: null, threshold: 0.25 }
+    );
+    io.observe(node);
+    return () => io.disconnect();
+  }, []);
+  const reduceMotion = prefersReducedMotion() || perfLite;
+  const autoplayActive = isInView && isPageVisible && !reduceMotion;
+  import_react.default.useLayoutEffect(() => {
+    const root = activeRef.current;
+    if (!root) return;
+    setHasBackdropBlur(Boolean(root.querySelector('[class*="backdrop-blur"]')));
+  }, [index]);
+  import_react.default.useEffect(() => {
+    setEffectiveMode(heightMode);
+  }, [heightMode]);
+  import_react.default.useEffect(() => {
+    setLockedHeight((h) => {
+      const base = Math.max(0, minHeightPx);
+      if (h == null) return base || null;
+      return Math.max(h, base) || null;
+    });
+  }, [minHeightPx]);
+  const updateLockedHeight = import_react.default.useCallback(
+    (nextH) => {
+      if (!Number.isFinite(nextH) || nextH <= 0) return;
+      setLockedHeight((prevH) => {
+        const base = Math.max(0, minHeightPx);
+        const prev2 = prevH != null ? prevH : base;
+        const target = Math.max(prev2, base, Math.ceil(nextH));
+        return target || null;
+      });
+    },
+    [minHeightPx]
+  );
+  import_react.default.useLayoutEffect(() => {
+    if (effectiveMode !== "max-all") return;
+    if (!len) return;
+    const box = measureBoxRef.current;
+    if (!box) return;
+    const hasHeavyMedia = Boolean(box.querySelector("video, audio, iframe, img, picture, canvas, svg"));
+    if (hasHeavyMedia) {
+      setEffectiveMode("max-seen");
+      return;
+    }
+    const compute = () => {
+      let maxH = 0;
+      for (let i = 0; i < len; i++) {
+        const el = measureRefs.current[i];
+        if (!el) continue;
+        maxH = Math.max(maxH, el.offsetHeight || 0);
+      }
+      if (maxH > 0) updateLockedHeight(maxH);
+    };
+    compute();
+    const onResize = () => compute();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [effectiveMode, len, updateLockedHeight]);
+  import_react.default.useLayoutEffect(() => {
+    if (effectiveMode !== "max-seen") return;
+    if (!len) return;
+    const target = activeRef.current;
+    if (!target) return;
+    const compute = () => {
+      const h = target.offsetHeight || 0;
+      if (h > 0) updateLockedHeight(h);
+    };
+    compute();
+    if (typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver(() => compute());
+      ro.observe(target);
+      return () => ro.disconnect();
+    }
+  }, [effectiveMode, len, index, updateLockedHeight]);
+  const title = (_a = labels == null ? void 0 : labels.title) != null ? _a : "Carrusel";
+  const prevLabel = (_b = labels == null ? void 0 : labels.prev) != null ? _b : "Anterior";
+  const nextLabel = (_c = labels == null ? void 0 : labels.next) != null ? _c : "Siguiente";
+  const goToLabel = (_d = labels == null ? void 0 : labels.goTo) != null ? _d : ((n) => `Ir a slide ${n}`);
+  const goTo = import_react.default.useCallback(
+    (next2) => {
+      if (!len) return;
+      const clamped = (next2 % len + len) % len;
+      setDir(clamped > index ? 1 : -1);
+      setIndex(clamped);
+    },
+    [index, len]
+  );
+  const next = import_react.default.useCallback(() => goTo(index + 1), [goTo, index]);
+  const prev = import_react.default.useCallback(() => goTo(index - 1), [goTo, index]);
+  import_react.default.useEffect(() => {
+    if (!len || len < 2) return;
+    if (!autoAdvanceMs || autoAdvanceMs < 1500) return;
+    if (!autoplayActive) return;
+    const id = window.setInterval(() => next(), autoAdvanceMs);
+    return () => window.clearInterval(id);
+  }, [autoAdvanceMs, autoplayActive, len, next]);
+  import_react.default.useEffect(() => {
+    if (!len || len < 2) return;
+    if (!isInView) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isInView, len, next, prev]);
+  if (!len) return null;
+  const active = safeSlides[index];
+  const overlayNav = chrome === "plain";
+  const fillHeight = true;
+  const contentPadClassName = contentClassName != null ? contentClassName : chrome === "card" ? "p-5 sm:p-6" : "";
+  const alignClassName = contentAlign === "center" ? "flex h-full flex-col justify-center" : contentAlign === "between" ? "flex h-full flex-col justify-between" : "";
+  const overlayOnDark = overlayNavTone === "onDark";
+  const overlayBtnClassName = overlayOnDark ? "grid h-10 w-10 place-items-center rounded-xl border border-white/15 bg-black/30 text-white shadow-sm backdrop-blur-md hover:bg-black/40" : [
+    "grid h-10 w-10 place-items-center rounded-xl border border-[color-mix(in_oklab,var(--border)_55%,transparent)]",
+    "bg-[color-mix(in_oklab,var(--card)_75%,transparent)] text-foreground shadow-sm backdrop-blur-md",
+    "hover:bg-[color-mix(in_oklab,var(--card)_88%,transparent)]"
+  ].join(" ");
+  const overlayDotActiveClassName = overlayOnDark ? "bg-white/90" : "bg-primary";
+  const overlayDotInactiveClassName = overlayOnDark ? "bg-white/25 hover:bg-white/40" : "bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] hover:bg-[color-mix(in_oklab,var(--muted)_45%,transparent)]";
+  const api = import_react.default.useMemo(
+    () => ({ index, len, dir, reduceMotion, perfLite, autoplayActive, goTo, next, prev }),
+    [index, len, dir, reduceMotion, perfLite, autoplayActive, goTo, next, prev]
+  );
+  const backgroundMotionEnabled = backgroundMotion === "always" ? true : backgroundMotion === "never" ? false : !hasBackdropBlur;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: ["relative flex h-full flex-col", className != null ? className : ""].join(" "),
+      "aria-roledescription": "carousel",
+      "aria-label": title,
+      ref: rootRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: [
+              chrome === "card" ? "relative flex flex-1 flex-col overflow-hidden rounded-2xl border border-border bg-[color-mix(in_oklab,var(--card)_80%,transparent)] shadow-sm" : "relative flex flex-1 flex-col",
+              frameClassName != null ? frameClassName : ""
+            ].join(" "),
+            children: [
+              showDecor && chrome === "card" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pointer-events-none absolute inset-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -left-16 -top-16 h-48 w-48 rounded-full bg-[color-mix(in_oklab,var(--primary)_16%,transparent)] blur-3xl" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -bottom-16 -right-16 h-48 w-48 rounded-full bg-[color-mix(in_oklab,var(--primary)_12%,transparent)] blur-3xl" })
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "relative flex-1",
+                  style: {
+                    minHeight: `${Math.max(0, minHeightPx)}px`,
+                    ...effectiveMode === "none" ? {} : {
+                      minHeight: lockedHeight ? `${lockedHeight}px` : `${Math.max(0, minHeightPx)}px`,
+                      transition: "min-height 220ms ease"
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, custom: dir, mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_framer_motion.motion.div,
+                    {
+                      custom: dir,
+                      initial: reduceMotion ? { opacity: 0 } : { opacity: 0, x: dir * 18, filter: "blur(4px)" },
+                      animate: reduceMotion ? { opacity: 1 } : { opacity: 1, x: 0, filter: "blur(0px)" },
+                      exit: reduceMotion ? { opacity: 0 } : { opacity: 0, x: -dir * 18, filter: "blur(4px)" },
+                      transition: { duration: 0.28, ease: "easeOut" },
+                      className: "relative h-full overflow-hidden",
+                      style: isAnimating ? { willChange: "transform, opacity, filter" } : void 0,
+                      children: [
+                        ((_f = active.background) == null ? void 0 : _f.src) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0", children: [
+                          autoplayActive && backgroundMotionEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_framer_motion.motion.img,
+                            {
+                              src: active.background.src,
+                              alt: (_g = active.background.alt) != null ? _g : "",
+                              className: "absolute inset-0 h-full w-full object-cover opacity-[0.42] filter-[saturate(1.06)_contrast(1.08)] dark:opacity-[0.34]",
+                              draggable: false,
+                              decoding: "async",
+                              initial: false,
+                              animate: { scale: [1.02, 1.06, 1.02], y: [0, -10, 0] },
+                              transition: { duration: 14, ease: "easeInOut", repeat: Infinity }
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "img",
+                            {
+                              src: active.background.src,
+                              alt: (_h = active.background.alt) != null ? _h : "",
+                              className: "absolute inset-0 h-full w-full object-cover opacity-[0.42] filter-[saturate(1.06)_contrast(1.08)] dark:opacity-[0.34]",
+                              draggable: false,
+                              decoding: "async"
+                            }
+                          ),
+                          ((_i = active.background.overlay) != null ? _i : true) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-[linear-gradient(135deg,color-mix(in_oklab,var(--primary)_12%,transparent),transparent_60%)]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,color-mix(in_oklab,var(--card)_78%,transparent),transparent_55%)]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/10 dark:bg-black/25" })
+                          ] }) : null
+                        ] }) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["relative z-10 h-full", contentPadClassName].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: [alignClassName, fillHeight ? "h-full" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: activeRef, className: fillHeight ? "h-full" : void 0, children: active.content }) }) })
+                      ]
+                    },
+                    (_e = active.key) != null ? _e : String(index)
+                  ) })
+                }
+              ),
+              effectiveMode === "max-all" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: measureBoxRef, "aria-hidden": true, className: "pointer-events-none absolute inset-0 -z-10 opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: contentPadClassName, children: safeSlides.map((s, i) => {
+                var _a2;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: (el) => {
+                  measureRefs.current[i] = el;
+                }, children: s.content }, (_a2 = s.key) != null ? _a2 : String(i));
+              }) }) }) : null,
+              renderOverlay ? renderOverlay(api) : null,
+              overlayNav && !renderOverlay && (showControls || showDots) && len > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: [
+                    "pointer-events-none absolute inset-x-0 z-40",
+                    overlayNavBottomPx == null ? "bottom-16 lg:bottom-20" : ""
+                  ].join(" "),
+                  style: overlayNavBottomPx == null ? void 0 : { bottom: overlayNavBottomPx },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto w-full max-w-7xl px-4 lg:pr-[560px] sm:px-6 2xl:max-w-screen-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pointer-events-auto flex items-center justify-between gap-3", children: [
+                    showControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, type: "button", onClick: prev, "aria-label": prevLabel, title: prevLabel, className: overlayBtnClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, type: "button", onClick: next, "aria-label": nextLabel, title: nextLabel, className: overlayBtnClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": true }) })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+                    showDots ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: safeSlides.map((s, i) => {
+                      var _a2, _b2;
+                      const isActive = i === index;
+                      const text = (_a2 = s.label) != null ? _a2 : goToLabel(i + 1);
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => goTo(i),
+                          "aria-label": text,
+                          "aria-current": isActive ? "true" : void 0,
+                          title: text,
+                          className: [
+                            "h-2.5 w-7 rounded-full transition",
+                            isActive ? overlayDotActiveClassName : overlayDotInactiveClassName
+                          ].join(" ")
+                        },
+                        (_b2 = s.key) != null ? _b2 : String(i)
+                      );
+                    }) }) : null
+                  ] }) })
+                }
+              ) : null
+            ]
+          }
+        ),
+        !overlayNav && !renderOverlay && (showControls || showDots) && len > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-center justify-between gap-3", children: [
+          showControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: prev,
+                "aria-label": prevLabel,
+                title: prevLabel,
+                className: "grid h-10 w-10 place-items-center rounded-xl border border-border bg-card text-foreground shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: next,
+                "aria-label": nextLabel,
+                title: nextLabel,
+                className: "grid h-10 w-10 place-items-center rounded-xl border border-border bg-card text-foreground shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": true })
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+          showDots ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: safeSlides.map((s, i) => {
+            var _a2, _b2;
+            const isActive = i === index;
+            const text = (_a2 = s.label) != null ? _a2 : goToLabel(i + 1);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => goTo(i),
+                "aria-label": text,
+                "aria-current": isActive ? "true" : void 0,
+                title: text,
+                className: [
+                  "h-2.5 w-7 rounded-full transition",
+                  isActive ? "bg-primary" : "bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] hover:bg-[color-mix(in_oklab,var(--muted)_45%,transparent)]"
+                ].join(" ")
+              },
+              (_b2 = s.key) != null ? _b2 : String(i)
+            );
+          }) }) : null
+        ] }) : null
+      ]
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCarousel
+});