@payfit/unity-components
Version:
54 lines (53 loc) • 2.13 kB
JavaScript
import { useCarousel as e } from "../Carousel.context.js";
import { useResponsiveValue as t } from "../../../hooks/use-responsive-value.js";
import { useEffect as n, useState as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a } from "react/jsx-runtime";
//#region src/components/carousel/parts/CarouselContent.tsx
var o = i({ slots: {
root: ["uy:overflow-hidden ", "uy:-mx-(--uy-carousel-track-offset)"],
track: [
"uy:flex uy:touch-pan-y uy:touch-pinch-zoom",
"uy:gap-(--uy-carousel-slide-gap)",
"uy:*:first:ms-(--uy-carousel-track-margin-start)",
"uy:*:last:me-(--uy-carousel-track-margin-end)",
"uy:data-[grab-state=grab]:cursor-grab",
"uy:data-[grab-state=grabbing]:cursor-grabbing"
]
} });
function s({ className: i, children: s, itemsPerPage: c, gap: l, trackPadding: u, trackOffset: d = 0 }) {
let { carouselRef: f, a11yIds: p, api: m } = e(), { root: h, track: g } = o(), [_, v] = r(!1), y = t(c), b = t(l), x = t(d), S = t(u?.start), C = t(u?.end);
return n(() => {
if (!m) return;
let e = () => {
v(!0);
}, t = () => {
v(!1);
};
return m.on("pointerdown", e), m.on("pointerup", t), () => {
m.off("pointerdown", e), m.off("pointerup", t);
};
}, [m]), /* @__PURE__ */ a("div", {
ref: f,
className: h({ className: i }),
"data-slot": "carousel-content",
"data-items-per-page": typeof y == "number" ? y : void 0,
style: {
"--uy-carousel-slide-width": `calc((1 / ${y ?? 1}) * 100%)`,
"--uy-carousel-track-offset": typeof x == "number" ? `${x}px` : `var(--uy-spacing-${x.replace("$", "")})`,
"--uy-carousel-slide-gap": `var(--uy-spacing-${b ? b.replace("$", "") : 0})`,
"--uy-carousel-track-margin-start": `var(--uy-spacing-${S ? S.replace("$", "") : 0})`,
"--uy-carousel-track-margin-end": `var(--uy-spacing-${C ? C.replace("$", "") : 0})`
},
children: /* @__PURE__ */ a("div", {
className: g(),
"data-slot": "carousel-track",
"data-grab-state": _ ? "grabbing" : "grab",
id: p.track,
children: s
})
});
}
s.displayName = "CarouselContent";
//#endregion
export { s as CarouselContent, o as carouselContent };