@mantine/carousel
Version:
Embla based carousel
64 lines (63 loc) • 3.25 kB
JavaScript
"use client";
require("../_virtual/_rolldown/runtime.cjs");
let _mantine_core = require("@mantine/core");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/carousel/src/CarouselVariables/CarouselVariables.tsx
function CarouselVariables({ slideGap, slideSize, selector }) {
const theme = (0, _mantine_core.useMantineTheme)();
const baseStyles = (0, _mantine_core.filterProps)({
"--carousel-slide-gap": (0, _mantine_core.getSpacing)((0, _mantine_core.getBaseValue)(slideGap)),
"--carousel-slide-size": (0, _mantine_core.rem)((0, _mantine_core.getBaseValue)(slideSize))
});
const queries = (0, _mantine_core.keys)(theme.breakpoints).reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof slideGap === "object" && slideGap[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-gap"] = (0, _mantine_core.getSpacing)(slideGap[breakpoint]);
if (typeof slideSize === "object" && slideSize[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-size"] = (0, _mantine_core.getSpacing)(slideSize[breakpoint]);
return acc;
}, {});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.InlineStyles, {
styles: baseStyles,
media: (0, _mantine_core.getSortedBreakpoints)((0, _mantine_core.keys)(queries), theme.breakpoints).filter((breakpoint) => (0, _mantine_core.keys)(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
query: `(min-width: ${theme.breakpoints[breakpoint.value]})`,
styles: queries[breakpoint.value]
})),
selector
});
}
function getBreakpoints(values) {
if (typeof values === "object" && values !== null) return (0, _mantine_core.keys)(values);
return [];
}
function sortBreakpoints(breakpoints) {
return breakpoints.sort((a, b) => (0, _mantine_core.px)(a) - (0, _mantine_core.px)(b));
}
function getUniqueBreakpoints({ slideGap, slideSize }) {
return sortBreakpoints(Array.from(new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])));
}
function CarouselContainerVariables({ slideGap, slideSize, selector }) {
const baseStyles = (0, _mantine_core.filterProps)({
"--carousel-slide-gap": (0, _mantine_core.getSpacing)((0, _mantine_core.getBaseValue)(slideGap)),
"--carousel-slide-size": (0, _mantine_core.rem)((0, _mantine_core.getBaseValue)(slideSize))
});
const queries = getUniqueBreakpoints({
slideGap,
slideSize
}).reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof slideGap === "object" && slideGap[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-gap"] = (0, _mantine_core.getSpacing)(slideGap[breakpoint]);
if (typeof slideSize === "object" && slideSize[breakpoint] !== void 0) acc[breakpoint]["--carousel-slide-size"] = (0, _mantine_core.getSpacing)(slideSize[breakpoint]);
return acc;
}, {});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.InlineStyles, {
styles: baseStyles,
container: Object.keys(queries).map((breakpoint) => ({
query: `carousel (min-width: ${breakpoint})`,
styles: queries[breakpoint]
})),
selector
});
}
//#endregion
exports.CarouselContainerVariables = CarouselContainerVariables;
exports.CarouselVariables = CarouselVariables;
//# sourceMappingURL=CarouselVariables.cjs.map