@mantine/carousel/esm/CarouselVariables/CarouselVariables.mjs

Embla based carousel

'use client';
import { jsx } from 'react/jsx-runtime';
import { filterProps, rem, getSpacing, getBaseValue, InlineStyles, useMantineTheme, keys, getSortedBreakpoints, px } from '@mantine/core';

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

export { CarouselContainerVariables, CarouselVariables };
//# sourceMappingURL=CarouselVariables.mjs.map