import { jsx as f, Fragment as it } from "react/jsx-runtime";
import { a as x } from "../index-BmAFn37q.mjs";
import { useRef as C, useCallback as S, useEffect as k, useLayoutEffect as R, useState as L, useMemo as ct, useId as lt, createContext as ut, useContext as dt, Children as pt, cloneElement as ft, isValidElement as gt } from "react";
import { ArrowVerticalRight as mt } from "@spark-ui/icons/ArrowVerticalRight";
import { I as G } from "../Icon-D1RueiPY.mjs";
import { I as J } from "../IconButton-BY3gYXtU.mjs";
import { ArrowVerticalLeft as bt } from "@spark-ui/icons/ArrowVerticalLeft";
function ht(t) {
  const e = C(/* @__PURE__ */ new Map()), r = C(null), n = C(/* @__PURE__ */ new Map()), o = S(() => (c) => {
    c.forEach((u) => {
      const g = u.isIntersecting, y = u.target;
      e.current.set(y, g);
      const m = n.current.get(y);
      m && m(g);
    });
  }, []), s = S(() => {
    if (r.current)
      return r.current;
    const c = t.current;
    if (!c) return null;
    const u = new IntersectionObserver(o(), {
      root: c,
      threshold: 0.2
    });
    return r.current = u, u;
  }, [t, o]);
  k(() => {
    const c = s(), u = e.current, g = n.current;
    return () => {
      c && (c.disconnect(), u.clear(), g.clear(), r.current = null);
    };
  }, [s]);
  const a = S(
    (c, u) => {
      if (!c) return;
      const g = s();
      if (!g) {
        setTimeout(() => a(c, u), 0);
        return;
      }
      const y = e.current.get(c) ?? !0;
      e.current.set(c, y), n.current.set(c, u), g.observe(c), u(y);
    },
    [s]
  ), i = S((c) => {
    if (!c) return;
    const u = r.current;
    u && u.unobserve(c), e.current.delete(c), n.current.delete(c);
  }, []), p = S((c) => c ? e.current.get(c) ?? !0 : !0, []);
  return {
    registerSlide: a,
    unregisterSlide: i,
    isSlideVisible: p
  };
}
function vt(t) {
  const e = C(() => {
    throw new Error("Cannot call an event handler while rendering.");
  });
  return R(() => {
    e.current = t;
  }), S((...r) => e.current?.(...r), []);
}
const Ct = () => {
  const t = C(!1);
  return k(() => (t.current = !0, () => {
    t.current = !1;
  }), []), t;
};
function St(t, e) {
  const r = C(0), n = C(null);
  k(() => {
    const o = t.current;
    if (!o) return;
    const s = "onscrollend" in window, a = () => {
      e();
    }, i = () => {
      n.current && clearTimeout(n.current), t.current && (r.current = t.current.scrollLeft, n.current = setTimeout(() => {
        t.current && a();
      }, 150));
    };
    return s ? o.addEventListener("scrollend", a) : o.addEventListener("scroll", i), () => {
      n.current && clearTimeout(n.current), s ? o.removeEventListener("scrollend", a) : o.removeEventListener("scroll", i);
    };
  }, [e, t]);
}
function yt(t, e) {
  R(() => {
    const r = t.current;
    if (!r) return;
    const n = new ResizeObserver((o) => {
      for (const s of o)
        e(s.contentRect.width);
    });
    return n.observe(r), () => n.disconnect();
  }, [t, e]);
}
function wt({
  totalSlides: t,
  slidesPerMove: e,
  slidesPerPage: r
}) {
  const n = e === "auto" ? r : e, o = [], s = Math.floor((t - r) / n) * n;
  for (let a = 0; a <= s; a += n)
    o.push(a);
  return o[o.length - 1] !== t - r && o.push(t - r), o;
}
function W(t) {
  return t ? Array.from(t.querySelectorAll('[data-part="item"]')) : [];
}
function q(t, {
  container: e,
  slidesPerMove: r,
  slidesPerPage: n
}) {
  return wt({
    totalSlides: W(e).length,
    slidesPerPage: n,
    slidesPerMove: r
  }).includes(t);
}
function K({
  container: t,
  slidesPerMove: e,
  slidesPerPage: r
}) {
  return t ? W(t).filter((n, o) => q(o, {
    slidesPerMove: e,
    slidesPerPage: r,
    container: t
  })).map((n) => n.offsetLeft) : [];
}
function Nt({
  dotIndex: t,
  pageState: e,
  totalPages: r,
  maxDots: n = 5
}) {
  if (r <= n)
    return t === e ? "active" : "idle";
  if (e <= Math.floor(n / 2))
    return t > n - 1 ? "hidden" : t === e ? "active" : t === n - 1 ? "edge" : "idle";
  if (e >= r - Math.ceil(n / 2)) {
    const a = r - n;
    return t < a ? "hidden" : t === e ? "active" : t === a ? "edge" : "idle";
  }
  const o = e - Math.floor(n / 2), s = e + Math.floor(n / 2);
  return t < o || t > s ? "hidden" : t === e ? "active" : t === o || t === s ? "edge" : "idle";
}
function Pt(t = [], {
  carouselRef: e,
  slidesPerMove: r,
  slidesPerPage: n
}) {
  const [o, s] = L(t), a = ct(() => o, [o]);
  return yt(e, () => {
    const i = K({
      slidesPerMove: r,
      slidesPerPage: n,
      container: e.current
    });
    JSON.stringify(o) !== JSON.stringify(i) && s(i);
  }), [a, s];
}
const N = "carousel", I = "ltr", xt = ({
  defaultPage: t,
  gap: e = 16,
  snapType: r = "mandatory",
  snapStop: n = "always",
  scrollPadding: o = 0,
  slidesPerPage: s = 1,
  slidesPerMove: a = "auto",
  scrollBehavior: i = "smooth",
  loop: p = !1,
  pagePickerInset: c = !1,
  maxDots: u = 5,
  // state control
  page: g,
  onPageChange: y
}) => {
  const m = lt(), [d, A] = L(t || g || 0), v = C(null), j = C([]), _ = Ct().current, F = vt(y), { registerSlide: rt, unregisterSlide: nt, isSlideVisible: ot } = ht(v), [b] = Pt([], {
    carouselRef: v,
    slidesPerMove: a,
    slidesPerPage: s
  }), z = C(p || d > 0), V = C(p || d < b.length - 1);
  z.current = p || d > 0, V.current = p || d < b.length - 1;
  const M = S(
    (l) => {
      l !== d && (A(l), F?.(l));
    },
    [F, d]
  ), w = S(
    (l, h) => {
      v.current && (v.current.scrollTo({
        left: b[l],
        behavior: h === "instant" ? "auto" : "smooth"
      }), M(l));
    },
    [M, b]
  ), $ = S(
    (l) => {
      if (z) {
        const h = p && d === 0 ? b.length - 1 : Math.max(d - 1, 0);
        w(h, i), l?.(h);
      }
    },
    [p, b, d, i, w]
  ), O = S(
    (l) => {
      if (V) {
        const h = p && d === b.length - 1 ? 0 : Math.min(d + 1, b.length - 1);
        w(h, i), l?.(h);
      }
    },
    [p, b, d, i, w]
  );
  k(() => {
    g != null && w(g, i);
  }, [g, i, w]), R(() => {
    if (t != null && !_ && v.current) {
      const l = K({
        container: v.current,
        slidesPerMove: a,
        slidesPerPage: s
      });
      v.current.scrollTo({
        left: l[t],
        behavior: "instant"
      });
    }
  }, [t, _, a, s]);
  const st = S(() => {
    if (!v.current || b.length === 0) return;
    const { scrollLeft: l } = v.current, h = b.map((T) => Math.abs(l - T)), E = h.indexOf(Math.min(...h));
    E !== -1 && M(E);
  }, [b, M]);
  return St(v, st), {
    ref: v,
    pageIndicatorsRefs: j,
    // props
    gap: e,
    snapType: r,
    snapStop: n,
    scrollPadding: o,
    slidesPerPage: s,
    slidesPerMove: a,
    scrollBehavior: i,
    loop: p,
    pagePickerInset: c,
    maxDots: u,
    // computed state
    page: d,
    pageSnapPoints: b,
    canScrollNext: V.current,
    canScrollPrev: z.current,
    scrollTo: w,
    scrollPrev: $,
    scrollNext: O,
    // visibility management
    registerSlide: rt,
    unregisterSlide: nt,
    isSlideVisible: ot,
    // anatomy
    getRootProps: () => ({
      id: `carousel::${m}:`,
      role: "region",
      "aria-roledescription": "carousel",
      "data-scope": N,
      "data-part": "root",
      "data-orientation": "horizontal",
      dir: I,
      style: {
        "--slides-per-page": s,
        "--slide-spacing": `${e}px`,
        "--slide-item-size": "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
      }
    }),
    getControlProps: () => ({
      "data-scope": N,
      "data-part": "control",
      "data-orientation": "horizontal"
    }),
    getPrevTriggerProps: () => ({
      id: `carousel::${m}::prev-trigger`,
      "aria-controls": `carousel::${m}::item-group`,
      "data-scope": N,
      "data-part": "prev-trigger",
      "data-orientation": "horizontal",
      type: "button",
      dir: I,
      disabled: !z.current,
      onClick: () => $()
    }),
    getNextTriggerProps: () => ({
      id: `carousel::${m}::next-trigger`,
      "aria-controls": `carousel::${m}::item-group`,
      "data-scope": N,
      "data-part": "next-trigger",
      "data-orientation": "horizontal",
      type: "button",
      dir: I,
      disabled: !V.current,
      onClick: () => O()
    }),
    getSlidesContainerProps: () => ({
      id: `carousel::${m}::item-group`,
      /**
       * The carousel pattern was originally designed for a single slide.
       * When there is more than one slide, the aria-live region is set to off to avoid announcing the whole list of slides.
       * This is not ideal but we keep it for backwards compatibility.
       *
       * @see https://www.w3.org/WAI/ARIA/apg/patterns/carousel/#wai-aria-attributes
       */
      "aria-live": s > 1 ? "off" : "polite",
      "data-scope": N,
      "data-part": "item-group",
      "data-orientation": "horizontal",
      dir: I,
      tabIndex: 0,
      style: {
        display: "grid",
        gap: "var(--slide-spacing)",
        scrollSnapType: `x ${r}`,
        gridAutoFlow: "column",
        scrollbarWidth: "none",
        gridAutoColumns: "var(--slide-item-size)",
        overflowX: "auto"
      },
      ref: v
    }),
    getSlideProps: ({ index: l }) => {
      const h = q(l, {
        container: v.current,
        slidesPerMove: a,
        slidesPerPage: s
      });
      return {
        id: `carousel::${m}::item:${l}`,
        role: "group",
        "aria-roledescription": "slide",
        "data-scope": N,
        "data-part": "item",
        "data-index": l,
        "data-orientation": "horizontal",
        dir: I,
        style: {
          ...h && {
            scrollSnapAlign: "start",
            scrollSnapStop: n
          }
        }
      };
    },
    getIndicatorGroupProps: () => ({
      role: "radiogroup",
      id: `carousel::${m}::indicator-group`,
      "data-scope": N,
      "data-part": "indicator-group",
      "data-orientation": "horizontal",
      dir: I
    }),
    getIndicatorProps: ({ index: l }) => {
      const h = Nt({
        dotIndex: l,
        pageState: d,
        totalPages: b.length,
        maxDots: u
      });
      return {
        role: "radio",
        id: `carousel::${m}::indicator:${l}`,
        "aria-checked": l === d,
        "data-scope": N,
        "data-part": "indicator",
        "data-orientation": "horizontal",
        "data-index": l,
        "data-state": h,
        tabIndex: l === d ? 0 : -1,
        onClick: () => {
          w(l, i);
        },
        onKeyDown: (E) => {
          const T = (at) => {
            j.current[at]?.focus();
          };
          E.key === "ArrowRight" && V ? O(T) : E.key === "ArrowLeft" && z && $(T);
        }
      };
    }
  };
}, X = ut(null), B = ({
  className: t,
  snapType: e = "mandatory",
  snapStop: r = "always",
  scrollBehavior: n = "smooth",
  slidesPerMove: o = "auto",
  pagePickerInset: s = !1,
  slidesPerPage: a = 1,
  loop: i = !1,
  children: p,
  gap: c = 16,
  defaultPage: u,
  page: g,
  onPageChange: y,
  maxDots: m = 5,
  ...d
}) => {
  const A = xt({
    defaultPage: u,
    slidesPerPage: a,
    slidesPerMove: o,
    loop: i,
    gap: c,
    scrollBehavior: n,
    snapStop: r,
    snapType: e,
    page: g,
    pagePickerInset: s,
    onPageChange: y,
    maxDots: m
  });
  return /* @__PURE__ */ f(
    X.Provider,
    {
      value: {
        ...A,
        scrollBehavior: n
      },
      children: /* @__PURE__ */ f(
        "div",
        {
          "data-spark-component": "carousel",
          className: x("gap-lg relative box-border flex flex-col", t),
          ...A.getRootProps(),
          ...d,
          children: p
        }
      )
    }
  );
};
B.displayName = "Carousel";
const P = () => {
  const t = dt(X);
  if (!t)
    throw Error("useCarouselContext must be used within a Carousel provider");
  return t;
}, H = ({ children: t, className: e, ...r }) => {
  const n = P();
  return /* @__PURE__ */ f(
    "div",
    {
      "data-spark-component": "carousel-controls",
      className: x(
        "default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",
        e
      ),
      ...n.getControlProps(),
      ...r,
      children: t
    }
  );
};
H.displayName = "Carousel.Controls";
const Q = ({
  "aria-label": t,
  ...e
}) => {
  const r = P();
  return /* @__PURE__ */ f(
    J,
    {
      "data-spark-component": "carousel-next-button",
      ...r.getNextTriggerProps(),
      intent: "surface",
      design: "filled",
      className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
      "aria-label": t,
      ...e,
      children: /* @__PURE__ */ f(G, { children: /* @__PURE__ */ f(mt, {}) })
    }
  );
};
Q.displayName = "Carousel.NextButton";
const U = ({
  children: t,
  unstyled: e = !1,
  index: r,
  "aria-label": n,
  className: o,
  intent: s = "basic"
}) => {
  const a = P(), i = C(null);
  k(() => {
    a.pageIndicatorsRefs.current && (a.pageIndicatorsRefs.current[r] = i.current);
  });
  const p = a.getIndicatorProps({ index: r });
  return /* @__PURE__ */ f(
    "button",
    {
      "data-spark-component": "carousel-page-indicator",
      ref: i,
      ...p,
      "aria-label": n,
      className: x(
        {
          [x(
            "border-outline group relative flex justify-center border-0 hover:cursor-pointer",
            "m-sm rounded-sm transition-all duration-[200ms] ease-linear",
            "w-sz-8 h-sz-8",
            "data-[state=active]:w-sz-32 data-[state=active]:h-sz-8",
            "data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4",
            "data-[state=hidden]:m-0 data-[state=hidden]:size-0",
            s === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-basic bg-on-surface/dim-2"
          )]: !e
          // [dotsStyles]: !unstyled,
        },
        o
      ),
      children: t
    },
    r
  );
};
U.displayName = "Carousel.PageIndicator";
const Y = ({ children: t, className: e }) => {
  const r = P();
  return /* @__PURE__ */ f(it, { children: /* @__PURE__ */ f(
    "div",
    {
      "data-spark-component": "carousel-page-picker",
      ...r.getIndicatorGroupProps(),
      className: x(
        "flex-wrap items-center justify-center",
        "default:min-h-sz-16 flex",
        r.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
        e
      ),
      children: r.pageSnapPoints.length <= 1 ? null : t({
        ...r,
        pages: Array.from({ length: r.pageSnapPoints.length }, (n, o) => o)
      })
    }
  ) });
};
Y.displayName = "Carousel.PagePicker";
const Z = ({
  "aria-label": t,
  ...e
}) => {
  const r = P();
  return /* @__PURE__ */ f(
    J,
    {
      "data-spark-component": "carousel-prev-button",
      ...r.getPrevTriggerProps(),
      intent: "surface",
      design: "filled",
      className: "pointer-events-auto cursor-pointer shadow-sm disabled:invisible",
      "aria-label": t,
      ...e,
      children: /* @__PURE__ */ f(G, { children: /* @__PURE__ */ f(bt, {}) })
    }
  );
};
Z.displayName = "Carousel.PrevButton";
function It(t, e) {
  const [r, n] = L(!0), o = P();
  return k(() => {
    const s = t.current;
    if (!s) return;
    const { registerSlide: a, unregisterSlide: i } = o;
    return a(s, n), () => {
      i(s);
    };
  }, [t]), r;
}
const D = ({
  children: t,
  index: e = 0,
  totalSlides: r,
  className: n = "",
  ...o
}) => {
  const s = C(null), a = P(), i = It(s, a.ref);
  return /* @__PURE__ */ f(
    "div",
    {
      "data-spark-component": "carousel-slide",
      ref: s,
      ...a.getSlideProps({ index: e, totalSlides: r }),
      className: x("default:bg-surface relative overflow-hidden", n),
      "aria-hidden": !i,
      inert: !i,
      ...o,
      children: t
    }
  );
};
D.displayName = "Carousel.Slide";
const tt = ({ children: t, className: e = "" }) => {
  const r = P(), n = pt.toArray(t);
  return /* @__PURE__ */ f(
    "div",
    {
      "data-spark-component": "carousel-slides",
      ...r.getSlidesContainerProps(),
      className: x(
        "focus-visible:u-outline relative w-full",
        "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        e
      ),
      children: n.map(
        (o, s) => gt(o) ? ft(o, {
          index: s,
          totalSlides: n.length
        }) : o
      )
    }
  );
};
tt.displayName = "Carousel.Slides";
const et = ({ children: t }) => /* @__PURE__ */ f("div", { className: "relative flex items-center justify-around p-0", children: t });
et.displayName = "Carousel.Viewport";
const kt = Object.assign(B, {
  Controls: H,
  NextButton: Q,
  PrevButton: Z,
  Slide: D,
  Slides: tt,
  Viewport: et,
  PagePicker: Y,
  PageIndicator: U
});
kt.displayName = "Carousel";
export {
  kt as Carousel
};
//# sourceMappingURL=index.mjs.map
