@achs/webkit/dist/components/organisms/Slider/index.mjs

Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las

import { jsxs as y, jsx as c, Fragment as D } from "react/jsx-runtime";
import x, { useRef as j, useEffect as P } from "react";
import n from "./Slider.module.scss.mjs";
import { SelectNavigation as z } from "../../atoms/SelectNavigation/index.mjs";
const G = ({
  slides: e,
  rounded: u = !1,
  options: r = {},
  onSlideChange: i,
  className: f,
  ...s
}) => {
  const [m, l] = x.useState(0), [v, N] = x.useState(
    typeof window < "u" ? window.innerWidth : 1200
  ), h = j(null), b = () => {
    h.current && (clearInterval(h.current), h.current = null);
  }, d = () => {
    b(), r.changeWithTimer && r.changeWithTimer > 0 && e.length > 1 && (h.current = setInterval(() => {
      l((t) => {
        const a = (t + 1) % e.length;
        return i == null || i(a, t), a;
      });
    }, r.changeWithTimer));
  }, w = () => {
    d();
  };
  P(() => (d(), () => b()), [r.changeWithTimer, e.length]);
  const $ = (t) => {
    l((a) => {
      const o = (t % e.length + e.length) % e.length;
      return o !== a && (i == null || i(o, a)), o;
    }), w();
  }, T = () => $(m + 1), A = () => $(m - 1);
  P(() => {
    if (typeof window > "u") return;
    const t = () => N(window.innerWidth);
    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
  }, []);
  const E = (t) => v < 640 ? t.mobileImage ?? t.image : v < 1024 ? t.tabletImage ?? t.image : t.image;
  if (!e || e.length === 0) return null;
  const R = !!r.showIndicators && e.length > 1, I = r.indicatorType ?? "dots", S = r.indicatorVariant ?? "light";
  return /* @__PURE__ */ y(
    "div",
    {
      className: `${n.slider} ${u ? n.rounded : ""} ${f ?? ""}`.trim(),
      ...s,
      children: [
        /* @__PURE__ */ c("div", { className: n.slides, children: e.map((t, a) => {
          const o = a === m;
          return /* @__PURE__ */ c(
            O,
            {
              index: a,
              title: t.title,
              description: t.description,
              image: E(t),
              slideLink: t.slideLink,
              target: t.target,
              onClick: t.onClick,
              customContent: t.customContent,
              isActive: o,
              showOverlay: !(r != null && r.disableOverlay)
            },
            a
          );
        }) }),
        !r.disableControls && e.length > 1 && /* @__PURE__ */ y(D, { children: [
          /* @__PURE__ */ c("div", { className: n.prevControl, children: /* @__PURE__ */ c(
            z,
            {
              direction: "left",
              onClick: A,
              variant: (r == null ? void 0 : r.variantControls) ?? "default"
            }
          ) }),
          /* @__PURE__ */ c("div", { className: n.nextControl, children: /* @__PURE__ */ c(
            z,
            {
              direction: "right",
              onClick: T,
              variant: (r == null ? void 0 : r.variantControls) ?? "default"
            }
          ) })
        ] }),
        R && /* @__PURE__ */ c(
          "div",
          {
            className: `${n.indicators} ${n[`indicators-${S}`]}`,
            role: "tablist",
            "aria-label": "Slide navigation",
            children: e.map((t, a) => {
              const o = a === m;
              return /* @__PURE__ */ c(
                "button",
                {
                  type: "button",
                  className: I === "dots" ? `${n.indicatorDot} ${o ? n.indicatorActive : ""}` : `${n.indicatorNumber} ${o ? n.indicatorActive : ""}`,
                  "aria-label": `Go to slide ${a + 1}`,
                  "aria-selected": o,
                  role: "tab",
                  onClick: () => $(a),
                  onKeyDown: (W) => {
                    W.key === "ArrowLeft" && A(), W.key === "ArrowRight" && T();
                  },
                  children: I === "numbers" ? a + 1 : /* @__PURE__ */ c("span", { "aria-hidden": "true" })
                },
                a
              );
            })
          }
        )
      ]
    }
  );
}, g = (e) => !!(e && e.trim().length > 0), O = ({
  title: e,
  description: u,
  image: r,
  slideLink: i,
  target: f,
  customContent: s,
  isActive: m,
  onClick: l,
  index: v,
  showOverlay: N
}) => {
  const h = (d) => {
    l == null || l({
      event: d,
      slide: { title: e, description: u, image: r, slideLink: i, target: f, customContent: s, onClick: l },
      index: v
    }), !d.defaultPrevented && i && window.open(i, f || "_self");
  }, b = g(e) || g(u) || !!s;
  return /* @__PURE__ */ y(
    "div",
    {
      className: m ? `${n.slide} ${n.slideActive}` : n.slide,
      onClick: h,
      role: "button",
      tabIndex: 0,
      onKeyDown: (d) => {
        if (d.key === "Enter" || d.key === " ") {
          d.preventDefault();
          const w = {
            ...d,
            defaultPrevented: !1,
            preventDefault: () => Object.defineProperty(w, "defaultPrevented", { value: !0 })
          };
          l == null || l({
            event: w,
            slide: { title: e, description: u, image: r, slideLink: i, target: f, customContent: s, onClick: l },
            index: v
          }), !w.defaultPrevented && i && window.open(i, f || "_self");
        }
      },
      children: [
        /* @__PURE__ */ c("img", { src: r, alt: g(e) ? e : "slide image" }),
        m && b && /* @__PURE__ */ y(D, { children: [
          N && /* @__PURE__ */ c("div", { className: n.overlay }),
          /* @__PURE__ */ c("div", { className: n.slideContent, children: /* @__PURE__ */ y("div", { className: n.slideText, children: [
            g(e) && /* @__PURE__ */ c("h2", { children: e.trim() }),
            g(u) && /* @__PURE__ */ c("p", { children: u.trim() }),
            s && /* @__PURE__ */ c("div", { className: n.customContent, children: s() })
          ] }) })
        ] })
      ]
    }
  );
};
export {
  G as Slider,
  G as default
};