@mantine/carousel/cjs/CarouselVariables/CarouselVariables.cjs

Embla based carousel

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var core = require('@mantine/core');

function CarouselVariables({ slideGap, slideSize, selector }) {
  const theme = core.useMantineTheme();
  const baseStyles = core.filterProps({
    "--carousel-slide-gap": core.getSpacing(core.getBaseValue(slideGap)),
    "--carousel-slide-size": core.rem(core.getBaseValue(slideSize))
  });
  const queries = 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"] = core.getSpacing(slideGap[breakpoint]);
      }
      if (typeof slideSize === "object" && slideSize[breakpoint] !== void 0) {
        acc[breakpoint]["--carousel-slide-size"] = core.getSpacing(slideSize[breakpoint]);
      }
      return acc;
    },
    {}
  );
  const sortedBreakpoints = core.getSortedBreakpoints(core.keys(queries), theme.breakpoints).filter(
    (breakpoint) => core.keys(queries[breakpoint.value]).length > 0
  );
  const media = sortedBreakpoints.map((breakpoint) => ({
    query: `(min-width: ${theme.breakpoints[breakpoint.value]})`,
    styles: queries[breakpoint.value]
  }));
  return /* @__PURE__ */ jsxRuntime.jsx(core.InlineStyles, { styles: baseStyles, media, selector });
}
function getBreakpoints(values) {
  if (typeof values === "object" && values !== null) {
    return core.keys(values);
  }
  return [];
}
function sortBreakpoints(breakpoints) {
  return breakpoints.sort((a, b) => core.px(a) - core.px(b));
}
function getUniqueBreakpoints({ slideGap, slideSize }) {
  const breakpoints = Array.from(
    /* @__PURE__ */ new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])
  );
  return sortBreakpoints(breakpoints);
}
function CarouselContainerVariables({
  slideGap,
  slideSize,
  selector
}) {
  const baseStyles = core.filterProps({
    "--carousel-slide-gap": core.getSpacing(core.getBaseValue(slideGap)),
    "--carousel-slide-size": core.rem(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"] = core.getSpacing(slideGap[breakpoint]);
    }
    if (typeof slideSize === "object" && slideSize[breakpoint] !== void 0) {
      acc[breakpoint]["--carousel-slide-size"] = core.getSpacing(slideSize[breakpoint]);
    }
    return acc;
  }, {});
  const media = Object.keys(queries).map((breakpoint) => ({
    query: `carousel (min-width: ${breakpoint})`,
    styles: queries[breakpoint]
  }));
  return /* @__PURE__ */ jsxRuntime.jsx(core.InlineStyles, { styles: baseStyles, container: media, selector });
}

exports.CarouselContainerVariables = CarouselContainerVariables;
exports.CarouselVariables = CarouselVariables;
//# sourceMappingURL=CarouselVariables.cjs.map