@makeswift/runtime 0.0.0-e0c0445 → 0.0.0-e5fb3bd

package/dist/esm/components/builtin/Carousel/Carousel.js

@@ -0,0 +1,385 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  forwardRef
+} from "react";
+import { motion, useAnimation } from "framer-motion";
+import { useGesture } from "@use-gesture/react";
+import { wrap } from "@popmotion/popcorn";
+import { colorToString } from "../../utils/colorToString";
+import { useMediaQuery } from "../../hooks";
+import Image from "../Image";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { cx } from "@emotion/css";
+import { useResponsiveStyle } from "../../utils/responsive-style";
+import { getBaseBreakpoint } from "../../../state/modules/breakpoints";
+import { useBreakpoints } from "../../../runtimes/react";
+const LeftChevron = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", viewBox: "0 0 10 14", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M7,13,1,7,7,1",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2"
+  }
+) });
+const RightChevron = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", viewBox: "0 0 10 14", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M3,1,9,7,3,13",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2"
+  }
+) });
+const SWIPE_THRESHOLD = 20;
+const swipePower = (dx, velocity) => dx * (1 + velocity);
+const Carousel = forwardRef(function Carousel2({
+  images = [],
+  width,
+  margin,
+  pageSize: responsivePageSize,
+  step: responsiveStep,
+  gap,
+  slideAlignment,
+  showDots,
+  showArrows,
+  arrowPosition,
+  arrowColor,
+  arrowBackground,
+  dotColor,
+  autoplay = false,
+  delay = 5,
+  slideBorder,
+  slideBorderRadius
+}, ref) {
+  const breakpoints = useBreakpoints();
+  const [index, setIndex] = useState(0);
+  const swipe = useRef(0);
+  const startIndex = wrap(0, images.length, index);
+  const pageSize = useMediaQuery(responsivePageSize) || 1;
+  const step = useMediaQuery(responsiveStep) || 1;
+  const endIndex = startIndex + pageSize;
+  const pageCount = Math.ceil((images.length - pageSize) / step + 1);
+  const pageIndex = Math.ceil(startIndex / step);
+  const isFirstPage = pageIndex === 0;
+  const isLastPage = pageIndex === pageCount - 1;
+  const paginate = useCallback(
+    (pageDistance) => {
+      if (pageDistance === 0)
+        return;
+      const direction = pageDistance / Math.abs(pageDistance);
+      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex);
+      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance));
+      setIndex(index + distance);
+    },
+    [images, index, startIndex, endIndex, step]
+  );
+  const animation = useAnimation({ x: 0, transition: { type: "spring", stiffness: 100 } });
+  const bindPage = useGesture(
+    {
+      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {
+        animation.start({ x: mx });
+        swipe.current = swipePower(dx, vx);
+      },
+      onDragEnd: () => {
+        animation.start({ x: 0 });
+        if (swipe.current > SWIPE_THRESHOLD)
+          paginate(1);
+        else if (swipe.current < -SWIPE_THRESHOLD)
+          paginate(-1);
+      }
+    },
+    {
+      drag: {
+        axis: "x",
+        bounds: { left: 0, right: 0 },
+        rubberband: true
+      }
+    }
+  );
+  useEffect(() => {
+    if (!autoplay || pageSize !== 0)
+      setIndex(0);
+  }, [autoplay, pageSize]);
+  useEffect(() => {
+    if (!autoplay)
+      return () => {
+      };
+    const intervalId = setInterval(() => isLastPage ? setIndex(0) : paginate(1), delay * 1e3);
+    return () => clearInterval(intervalId);
+  }, [autoplay, delay, paginate, isLastPage]);
+  const clipMaskClassName = useStyle({ overflow: "hidden" });
+  const pageClassName = useStyle({ position: "relative", width: "100%" });
+  const slideClassName = cx(
+    useStyle({ display: "flex" }),
+    useStyle(
+      useResponsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
+        flexBasis: `${100 / pageSize2}%`,
+        maxWidth: `${100 / pageSize2}%`,
+        minWidth: `${100 / pageSize2}%`
+      }))
+    ),
+    useStyle(
+      useResponsiveStyle([slideAlignment], ([alignItems = "center"]) => ({ alignItems }))
+    )
+  );
+  const reelClassName = cx(
+    useStyle({ display: "flex", position: "relative", flexWrap: "nowrap" }),
+    useStyle(
+      useResponsiveStyle([gap], ([gap2 = { value: 0, unit: "px" }]) => ({
+        margin: `0 ${`${-gap2.value / 2}${gap2.unit}`}`,
+        [`& > .${slideClassName}`]: {
+          padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
+        }
+      }))
+    )
+  );
+  const arrowClassName = cx(
+    useStyle({
+      padding: 10,
+      borderRadius: "50%",
+      outline: 0,
+      border: 0,
+      width: 40,
+      height: 40,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      userSelect: "none"
+    }),
+    useStyle(
+      useResponsiveStyle(
+        [arrowBackground],
+        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({
+          background: colorToString(background)
+        })
+      )
+    ),
+    useStyle({ svg: { transition: "transform 0.15s", stroke: "currentcolor" } })
+  );
+  const slopClassName = cx(
+    useStyle({
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      display: "flex",
+      "&[hidden]": {
+        display: "none"
+      },
+      alignItems: "center",
+      cursor: "pointer",
+      zIndex: 2
+    }),
+    useStyle(
+      useResponsiveStyle(
+        [arrowColor],
+        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+          color: colorToString(color)
+        })
+      )
+    )
+  );
+  const leftSlopClassName = cx(
+    slopClassName,
+    useStyle(
+      useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
+        switch (position) {
+          case "inside":
+            return { transform: "translateX(8px)" };
+          case "outside":
+            return { transform: "translateX(calc(-100% - 8px))" };
+          default:
+            return { transform: "translateX(calc(-50%))" };
+        }
+      })
+    ),
+    useStyle({
+      left: 0,
+      [`&:hover > .${arrowClassName}`]: {
+        "& > svg": {
+          transform: "translateX(-2px)"
+        }
+      }
+    })
+  );
+  const rightSlopClassName = cx(
+    slopClassName,
+    useStyle(
+      useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
+        switch (position) {
+          case "inside":
+            return { transform: "translateX(-8px)" };
+          case "outside":
+            return { transform: "translateX(calc(100% + 8px))" };
+          default:
+            return { transform: "translateX(calc(50%))" };
+        }
+      })
+    ),
+    useStyle({
+      right: 0,
+      [`&:hover > .${arrowClassName}`]: {
+        "& > svg": {
+          transform: "translateX(2px)"
+        }
+      }
+    })
+  );
+  const dotsClassName = cx(
+    useStyle({ display: showDots ? "flex" : "none", justifyContent: "center", marginTop: 20 }),
+    useStyle(
+      useResponsiveStyle(
+        [dotColor],
+        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+          color: colorToString(color)
+        })
+      )
+    )
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        useStyle({ position: "relative", display: "flex", flexDirection: "column" }),
+        width,
+        margin,
+        useStyle({ "&:focus": { outline: 0 } })
+      ),
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        switch (e.key) {
+          case "ArrowRight":
+            paginate(1);
+            break;
+          case "ArrowLeft":
+            paginate(-1);
+            break;
+          default:
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: useStyle({ position: "relative", height: "100%" }), children: [
+          /* @__PURE__ */ jsx("div", { className: clipMaskClassName, children: /* @__PURE__ */ jsx(motion.div, { ...bindPage(), className: pageClassName, animate: animation, children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: reelClassName,
+              animate: { x: `${-(100 / pageSize) * startIndex}%` },
+              transition: {
+                x: {
+                  type: "tween",
+                  ease: [0.165, 0.84, 0.44, 1],
+                  duration: 0.5
+                }
+              },
+              children: images.map(({ props: imageProps, key }) => /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  id: key,
+                  className: slideClassName,
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: (e) => {
+                    if (swipe.current !== 0)
+                      e.preventDefault();
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      width: [
+                        {
+                          deviceId: getBaseBreakpoint(breakpoints).id,
+                          value: { value: 100, unit: "%" }
+                        }
+                      ],
+                      file: imageProps.file,
+                      altText: imageProps.altText,
+                      link: imageProps.link,
+                      border: slideBorder,
+                      borderRadius: slideBorderRadius
+                    }
+                  )
+                },
+                key
+              ))
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => paginate(-1),
+              className: leftSlopClassName,
+              hidden: !showArrows || isFirstPage,
+              children: /* @__PURE__ */ jsx("div", { className: arrowClassName, children: /* @__PURE__ */ jsx(LeftChevron, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => paginate(1),
+              className: rightSlopClassName,
+              hidden: !showArrows || isLastPage,
+              children: /* @__PURE__ */ jsx("div", { className: arrowClassName, children: /* @__PURE__ */ jsx(RightChevron, {}) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: dotsClassName, children: Array.from({ length: pageCount }).map((_, i) => /* @__PURE__ */ jsx(Dot, { active: i === pageIndex, onClick: () => paginate(i - pageIndex) }, i)) })
+      ]
+    }
+  );
+});
+var Carousel_default = Carousel;
+function Dot({ className, active, ...restOfProps }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({
+          position: "relative",
+          margin: "0 6px",
+          borderRadius: "50%",
+          cursor: "pointer",
+          width: 16,
+          height: 16,
+          "&::before, &::after": {
+            content: '""',
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            display: "block",
+            borderRadius: "50%",
+            transition: "all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+          },
+          "&::before": {
+            boxShadow: "0 0 0 2px currentColor",
+            transform: "translate3d(-50%, -50%, 0)",
+            width: active ? 16 : 10,
+            height: active ? 16 : 10
+          },
+          "&::after": {
+            background: "currentColor",
+            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,
+            width: 10,
+            height: 10
+          },
+          "&:hover::after": {
+            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`
+          }
+        }),
+        className
+      )
+    }
+  );
+}
+export {
+  Carousel_default as default
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/esm/components/builtin/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["Carousel","pageSize","gap"]}

package/dist/esm/components/builtin/Carousel/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Carousel";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/index.tsx"],"sourcesContent":["export { default } from './Carousel'\n"],"mappings":"AAAA,SAAS,WAAAA,gBAAe;","names":["default"]}

package/dist/esm/components/builtin/Carousel/register.js

@@ -0,0 +1,109 @@
+import { v4 as uuid } from "uuid";
+import { Props } from "../../../prop-controllers";
+import { findBreakpointOverride } from "../../../state/modules/breakpoints";
+import { MakeswiftComponentType } from "../constants";
+import { ComponentIcon } from "../../../state/modules/components-meta";
+import { lazy } from "react";
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    lazy(() => import("./Carousel")),
+    {
+      type: MakeswiftComponentType.Carousel,
+      label: "Carousel",
+      icon: ComponentIcon.Carousel,
+      props: {
+        id: Props.ElementID(),
+        images: Props.Images({
+          preset: [
+            { key: uuid(), props: {} },
+            { key: uuid(), props: {} },
+            { key: uuid(), props: {} }
+          ]
+        }),
+        width: Props.Width({
+          format: Props.Width.Format.ClassName,
+          defaultValue: { value: 400, unit: "px" }
+        }),
+        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),
+        pageSize: Props.ResponsiveNumber((props) => {
+          const images = props.images;
+          const imagesLength = images?.length ?? 0;
+          return {
+            label: "Images shown",
+            defaultValue: 1,
+            min: 1,
+            max: imagesLength,
+            step: 1
+          };
+        }),
+        step: Props.ResponsiveNumber((props, device) => {
+          const pageSize = props.pageSize;
+          const pageSizeValue = findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)?.value ?? 1;
+          return {
+            label: "Step",
+            defaultValue: 1,
+            min: 1,
+            max: pageSizeValue,
+            step: 1
+          };
+        }),
+        slideAlignment: Props.ResponsiveIconRadioGroup({
+          label: "Alignment",
+          options: [
+            { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
+            { label: "Middle", value: "center", icon: "VerticalAlignMiddle16" },
+            { label: "Bottom", value: "flex-end", icon: "VerticalAlignEnd16" }
+          ],
+          defaultValue: "center"
+        }),
+        gap: Props.GapX({
+          label: "Gap",
+          step: 5,
+          defaultValue: { value: 0, unit: "px" }
+        }),
+        autoplay: Props.Checkbox({ label: "Autoplay" }),
+        delay: Props.Number((props) => ({
+          label: "Delay",
+          preset: 5,
+          min: 1,
+          step: 0.1,
+          suffix: "seconds",
+          hidden: !props.autoplay
+        })),
+        showArrows: Props.Checkbox({ preset: true, label: "Show arrows" }),
+        arrowPosition: Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Arrow position",
+          options: [
+            { label: "Inside", value: "inside", icon: "ArrowInside16" },
+            { label: "Center", value: "center", icon: "ArrowCenter16" },
+            { label: "Outside", value: "outside", icon: "ArrowOutside16" }
+          ],
+          defaultValue: "inside",
+          hidden: props.showArrows === false
+        })),
+        arrowColor: Props.ResponsiveColor((props) => ({
+          label: "Arrow color",
+          placeholder: "black",
+          hidden: props.showArrows === false
+        })),
+        arrowBackground: Props.ResponsiveColor((props) => ({
+          label: "Arrow background",
+          placeholder: "white",
+          hidden: props.showArrows === false
+        })),
+        showDots: Props.Checkbox({ preset: true, label: "Show dots" }),
+        dotColor: Props.ResponsiveColor((props) => ({
+          label: "Dot color",
+          placeholder: "black",
+          hidden: props.showDots === false
+        })),
+        slideBorder: Props.Border({ format: Props.Border.Format.ClassName }),
+        slideBorderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName })
+      }
+    }
+  );
+}
+export {
+  registerComponent
+};
+//# sourceMappingURL=register.js.map

package/dist/esm/components/builtin/Carousel/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\n\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Carousel')),\n    {\n      type: MakeswiftComponentType.Carousel,\n      label: 'Carousel',\n      icon: ComponentIcon.Carousel,\n      props: {\n        id: Props.ElementID(),\n        images: Props.Images({\n          preset: [\n            { key: uuid(), props: {} },\n            { key: uuid(), props: {} },\n            { key: uuid(), props: {} },\n          ],\n        }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 400, unit: 'px' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n        pageSize: Props.ResponsiveNumber(props => {\n          const images = props.images as unknown[]\n          const imagesLength = images?.length ?? 0\n\n          return {\n            label: 'Images shown',\n            defaultValue: 1,\n            min: 1,\n            max: imagesLength,\n            step: 1,\n          }\n        }),\n        step: Props.ResponsiveNumber((props, device) => {\n          const pageSize = props.pageSize as ResponsiveValue<number>\n          const pageSizeValue =\n            findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)?.value ?? 1\n\n          return {\n            label: 'Step',\n            defaultValue: 1,\n            min: 1,\n            max: pageSizeValue,\n            step: 1,\n          }\n        }),\n        slideAlignment: Props.ResponsiveIconRadioGroup({\n          label: 'Alignment',\n          options: [\n            { label: 'Top', value: 'flex-start', icon: 'VerticalAlignStart16' },\n            { label: 'Middle', value: 'center', icon: 'VerticalAlignMiddle16' },\n            { label: 'Bottom', value: 'flex-end', icon: 'VerticalAlignEnd16' },\n          ],\n          defaultValue: 'center',\n        }),\n        gap: Props.GapX({\n          label: 'Gap',\n          step: 5,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        autoplay: Props.Checkbox({ label: 'Autoplay' }),\n        delay: Props.Number(props => ({\n          label: 'Delay',\n          preset: 5,\n          min: 1,\n          step: 0.1,\n          suffix: 'seconds',\n          hidden: !props.autoplay,\n        })),\n        showArrows: Props.Checkbox({ preset: true, label: 'Show arrows' }),\n        arrowPosition: Props.ResponsiveIconRadioGroup(props => ({\n          label: 'Arrow position',\n          options: [\n            { label: 'Inside', value: 'inside', icon: 'ArrowInside16' },\n            { label: 'Center', value: 'center', icon: 'ArrowCenter16' },\n            { label: 'Outside', value: 'outside', icon: 'ArrowOutside16' },\n          ],\n          defaultValue: 'inside',\n          hidden: props.showArrows === false,\n        })),\n        arrowColor: Props.ResponsiveColor(props => ({\n          label: 'Arrow color',\n          placeholder: 'black',\n          hidden: props.showArrows === false,\n        })),\n        arrowBackground: Props.ResponsiveColor(props => ({\n          label: 'Arrow background',\n          placeholder: 'white',\n          hidden: props.showArrows === false,\n        })),\n        showDots: Props.Checkbox({ preset: true, label: 'Show dots' }),\n        dotColor: Props.ResponsiveColor(props => ({\n          label: 'Dot color',\n          placeholder: 'black',\n          hidden: props.showDots === false,\n        })),\n        slideBorder: Props.Border({ format: Props.Border.Format.ClassName }),\n        slideBorderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":[]}