"use client";
import { Image as e } from "../Image.js";
import { FrameWrapper as t } from "./FrameWrapper.js";
import { Carousel as n } from "../carousel/Carousel.js";
import { CarouselBody as r } from "../carousel/CarouselBody.js";
import { CarouselItem as i } from "../carousel/CarouselItem.js";
import { CarouselNext as a } from "../carousel/CarouselNext.js";
import { CarouselPrevious as o } from "../carousel/CarouselPrevious.js";
import { useMemo as s } from "react";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region lib/ui/frame/SliderFrame.tsx
var u = ({ children: u, describedby: d, items: f, labels: p, ...m }) => {
	let h = f.length > 1, g = s(() => f.map((t) => /* @__PURE__ */ c(e, {
		...t,
		className: "pointer-events-none size-full object-cover"
	}, t.src)), [f]);
	return /* @__PURE__ */ l(t, {
		...m,
		children: [h ? /* @__PURE__ */ l(n, {
			className: "rounded-16 h-full select-none",
			children: [/* @__PURE__ */ c(r, {
				className: "h-full",
				scrollClassName: "h-full auto-cols-full",
				children: g.map((e, t) => /* @__PURE__ */ c(i, {
					index: t,
					children: /* @__PURE__ */ c("div", {
						className: "h-full overflow-hidden",
						children: e
					})
				}, t))
			}), /* @__PURE__ */ l("div", {
				className: "pointer-events-none absolute inset-0 z-1 -mx-70 flex items-center justify-between gap-x-20 px-12 opacity-0 transition-all group-hover:mx-0 group-hover:opacity-100",
				children: [/* @__PURE__ */ c(o, {
					"aria-describedby": d,
					label: p.previous
				}), /* @__PURE__ */ c(a, {
					"aria-describedby": d,
					label: p.next
				})]
			})]
		}) : /* @__PURE__ */ c(e, {
			...f[0],
			className: "size-full object-cover"
		}), u]
	});
};
//#endregion
export { u as SliderFrame };

//# sourceMappingURL=SliderFrame.js.map