@yamada-ui/carousel 0.1.0

package/dist/chunk-4P3A5PTO.mjs

@@ -0,0 +1,246 @@
+// src/use-carousel.ts
+import { layoutStylesProperties } from "@yamada-ui/core";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import {
+  createContext,
+  dataAttr,
+  handlerAll,
+  splitObject,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import useEmblaCarousel from "embla-carousel-react";
+import { Children, useCallback, useEffect, useRef, useState } from "react";
+var [CarouselProvider, useCarouselContext] = createContext({
+  name: "CarouselContext",
+  errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
+});
+var useCarousel = ({
+  index,
+  defaultIndex = 0,
+  onChange,
+  align = "center",
+  orientation = "horizontal",
+  autoplay = false,
+  stopMouseEnterAutoplay = true,
+  loop = true,
+  speed = 10,
+  delay = 4e3,
+  gap = "md",
+  slidesToScroll = 1,
+  draggable = true,
+  dragFree = false,
+  inViewThreshold = 0,
+  skipSnaps = false,
+  containScroll = "",
+  slideSize = "100%",
+  includeGapInSize = true,
+  onScrollProgress,
+  children,
+  ...rest
+}) => {
+  const computedProps = splitObject(rest, layoutStylesProperties);
+  const [selectedIndex, setSelectedIndex] = useControllableState({
+    value: index,
+    defaultValue: defaultIndex,
+    onChange
+  });
+  const isVertical = orientation === "vertical";
+  const [carouselRef, carousel] = useEmblaCarousel({
+    axis: isVertical ? "y" : "x",
+    startIndex: defaultIndex,
+    loop,
+    align,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    speed,
+    inViewThreshold,
+    skipSnaps,
+    containScroll
+  });
+  const [indexes, setIndexes] = useState([]);
+  const [isMouseEnter, setIsMouseEnter] = useState(false);
+  const timeoutId = useRef(void 0);
+  const onScroll = useCallback(() => {
+    if (!carousel)
+      return;
+    const progress = Math.round(Math.max(0, Math.min(1, carousel.scrollProgress())) * 100);
+    onScrollProgress == null ? void 0 : onScrollProgress(progress);
+  }, [carousel, onScrollProgress]);
+  const onSelect = useCallback(() => {
+    if (!carousel)
+      return;
+    const index2 = carousel.selectedScrollSnap();
+    setSelectedIndex(index2);
+  }, [carousel, setSelectedIndex]);
+  useEffect(() => {
+    const isStop = isMouseEnter && stopMouseEnterAutoplay;
+    const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
+    if (carousel && autoplay && !isStop && !isLast) {
+      timeoutId.current = setInterval(() => {
+        carousel.scrollNext();
+      }, delay);
+    } else {
+      if (timeoutId.current)
+        clearInterval(timeoutId.current);
+      timeoutId.current = void 0;
+    }
+    return () => {
+      if (timeoutId.current)
+        clearInterval(timeoutId.current);
+    };
+  }, [autoplay, delay, stopMouseEnterAutoplay, carousel, isMouseEnter, loop, selectedIndex]);
+  useUpdateEffect(() => {
+    if (!carousel)
+      return;
+    carousel.reInit();
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [
+    Children.toArray(children).length,
+    align,
+    orientation,
+    loop,
+    speed,
+    gap,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    inViewThreshold,
+    skipSnaps,
+    containScroll,
+    slideSize,
+    includeGapInSize
+  ]);
+  useUpdateEffect(() => {
+    if (!carousel)
+      return;
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [carousel]);
+  useUpdateEffect(() => {
+    if (carousel) {
+      carousel.on("select", onSelect);
+      carousel.on("scroll", onScroll);
+      onScroll();
+      return () => {
+        carousel.off("select", onSelect);
+        carousel.off("scroll", onScroll);
+      };
+    }
+  }, [carousel, onScroll]);
+  const getContainerProps = useCallback(
+    (props = {}, ref = null) => ({
+      ...computedProps[0],
+      ...props,
+      ref,
+      onMouseEnter: handlerAll(props.onMouseEnter, () => {
+        setIsMouseEnter(true);
+      }),
+      onMouseLeave: handlerAll(props.onMouseLeave, () => {
+        setIsMouseEnter(false);
+      })
+    }),
+    [computedProps]
+  );
+  const getSlidesProps = useCallback(
+    (props = {}) => ({
+      ...computedProps[1],
+      ...props,
+      ref: carouselRef
+    }),
+    [computedProps, carouselRef]
+  );
+  return {
+    carousel,
+    children,
+    indexes,
+    selectedIndex,
+    orientation,
+    slideSize,
+    gap,
+    slidesToScroll,
+    includeGapInSize,
+    getContainerProps,
+    getSlidesProps
+  };
+};
+var useCarouselSlide = ({ index }) => {
+  const { selectedIndex, slidesToScroll } = useCarouselContext();
+  index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
+  const isSelected = index === selectedIndex;
+  const getSlideProps = useCallback(
+    (props = {}) => ({
+      ...props,
+      role: "carousel-slide",
+      "data-index": index,
+      "data-selected": dataAttr(isSelected)
+    }),
+    [isSelected, index]
+  );
+  return { getSlideProps };
+};
+var useCarouselControl = ({ operation, ...rest }) => {
+  var _a, _b;
+  const { carousel } = useCarouselContext();
+  const isPrev = operation === "prev";
+  const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
+  const onClick = useCallback(() => {
+    if (!carousel)
+      return;
+    if (isPrev) {
+      carousel.scrollPrev();
+    } else {
+      carousel.scrollNext();
+    }
+  }, [carousel, isPrev]);
+  const getControlProps = useCallback(
+    (props = {}, ref = null) => ({
+      ...props,
+      ref,
+      disabled,
+      role: "carousel-control",
+      onClick: handlerAll(props.onClick, onClick)
+    }),
+    [disabled, onClick]
+  );
+  return { getControlProps };
+};
+var useCarouselIndicators = () => {
+  const { selectedIndex, carousel, indexes } = useCarouselContext();
+  const onClick = useCallback(
+    (ev, index) => {
+      if (!carousel)
+        return;
+      ev.stopPropagation();
+      carousel.scrollTo(index);
+    },
+    [carousel]
+  );
+  const getIndicatorProps = useCallback(
+    ({ index, ...props } = {}) => {
+      const isSelected = index === selectedIndex;
+      return {
+        ...props,
+        key: index,
+        role: "carousel-indicator",
+        "data-index": index,
+        "data-selected": dataAttr(isSelected),
+        onClick: handlerAll(props.onClick, (ev) => onClick(ev, index))
+      };
+    },
+    [onClick, selectedIndex]
+  );
+  return { indexes, getIndicatorProps };
+};
+
+export {
+  CarouselProvider,
+  useCarouselContext,
+  useCarousel,
+  useCarouselSlide,
+  useCarouselControl,
+  useCarouselIndicators
+};

package/dist/chunk-BWFAE3UJ.mjs

@@ -0,0 +1,29 @@
+import {
+  useCarouselContext,
+  useCarouselSlide
+} from "./chunk-4P3A5PTO.mjs";
+
+// src/carousel-slide.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var CarouselSlide = forwardRef(
+  ({ className, size, ...rest }, ref) => {
+    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
+    const { getSlideProps } = useCarouselSlide(rest);
+    size != null ? size : size = slideSize;
+    const css = {
+      position: "relative",
+      flex: `0 0 ${size}`,
+      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
+    };
+    return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-carousel-slide", className), __css: css, ...getSlideProps({}), children: /* @__PURE__ */ jsx(CarouselSlideInner, { ref, ...rest }) });
+  }
+);
+var CarouselSlideInner = forwardRef(({ ...rest }, ref) => {
+  return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel-slide-inner", w: "100%", h: "100%", ...rest });
+});
+
+export {
+  CarouselSlide
+};

package/dist/chunk-FDF2QUCY.mjs

@@ -0,0 +1,85 @@
+import {
+  useCarouselContext,
+  useCarouselControl
+} from "./chunk-4P3A5PTO.mjs";
+
+// src/carousel-control.tsx
+import { IconButton } from "@yamada-ui/button";
+import { forwardRef, useColorModetValue } from "@yamada-ui/core";
+import { ChevronIcon } from "@yamada-ui/icon";
+import { cx } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var CarouselControlPrev = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "prev" });
+    return /* @__PURE__ */ jsx(
+      CarouselControl,
+      {
+        operation: "prev",
+        className: cx("ui-carousel-control-prev", className),
+        icon: /* @__PURE__ */ jsx(
+          ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControlNext = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "next" });
+    return /* @__PURE__ */ jsx(
+      CarouselControl,
+      {
+        operation: "next",
+        className: cx("ui-carousel-control-next", className),
+        icon: /* @__PURE__ */ jsx(
+          ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControl = forwardRef(
+  ({ className, operation, ...rest }, ref) => {
+    const { styles } = useCarouselContext();
+    const colorScheme = useColorModetValue("whiteAlpha", "blackAlpha");
+    const css = {
+      position: "absolute",
+      zIndex: "kurillin",
+      ...styles.control,
+      ...styles[operation]
+    };
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        className: cx("ui-carousel-control", className),
+        colorScheme,
+        isRound: true,
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+
+export {
+  CarouselControlPrev,
+  CarouselControlNext
+};

package/dist/chunk-PQ3S6YEB.mjs

@@ -0,0 +1,139 @@
+import {
+  CarouselControlNext,
+  CarouselControlPrev
+} from "./chunk-FDF2QUCY.mjs";
+import {
+  CarouselIndicators
+} from "./chunk-UMRTZXZW.mjs";
+import {
+  CarouselSlide
+} from "./chunk-BWFAE3UJ.mjs";
+import {
+  CarouselProvider,
+  useCarousel,
+  useCarouselContext
+} from "./chunk-4P3A5PTO.mjs";
+
+// src/carousel.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { useToken } from "@yamada-ui/use-token";
+import { useValue } from "@yamada-ui/use-value";
+import {
+  cx,
+  filterUndefined,
+  findChildren,
+  getValidChildren,
+  omitChildren,
+  pickChildren
+} from "@yamada-ui/utils";
+import { cloneElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Carousel = forwardRef(
+  ({ h, height, minH, minHeight, ...props }, ref) => {
+    var _a, _b;
+    const orientation = useValue(props.orientation);
+    const align = useValue(props.align);
+    const autoplay = useValue(props.autoplay);
+    const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay);
+    const loop = useValue(props.loop);
+    const speed = useValue(props.speed);
+    const delay = useValue(props.delay);
+    const slidesToScroll = useValue(props.slidesToScroll);
+    const draggable = useValue(props.draggable);
+    const dragFree = useValue(props.dragFree);
+    const inViewThreshold = useValue(props.inViewThreshold);
+    const skipSnaps = useValue(props.skipSnaps);
+    const containScroll = useValue(props.containScroll);
+    const includeGapInSize = useValue(props.includeGapInSize);
+    const gap = (_a = useToken("spaces", useValue(props.gap))) != null ? _a : useValue(props.gap);
+    const slideSize = (_b = useToken("sizes", useValue(props.slideSize))) != null ? _b : useValue(props.slideSize);
+    const [styles, mergedProps] = useMultiComponentStyle("Carousel", {
+      ...props,
+      orientation,
+      align,
+      autoplay,
+      stopMouseEnterAutoplay,
+      loop,
+      speed,
+      delay,
+      slidesToScroll,
+      draggable,
+      dragFree,
+      inViewThreshold,
+      skipSnaps,
+      containScroll,
+      includeGapInSize,
+      gap,
+      slideSize
+    });
+    const {
+      className,
+      inner,
+      withControls = true,
+      controlProps,
+      controlPrevProps,
+      controlNextProps,
+      withIndicators = true,
+      indicatorsProps,
+      ...computedProps
+    } = omitThemeProps(mergedProps);
+    const computedWithControls = useValue(withControls);
+    const computedWithIndicators = useValue(withIndicators);
+    const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
+      ...computedProps
+    });
+    const validChildren = getValidChildren(children);
+    const [customCarouselControlPrev] = findChildren(validChildren, CarouselControlPrev);
+    const [customCarouselControlNext] = findChildren(validChildren, CarouselControlNext);
+    const [customCarouselIndicators] = findChildren(validChildren, CarouselIndicators);
+    const slideChildren = pickChildren(validChildren, CarouselSlide);
+    const otherChildren = omitChildren(
+      validChildren,
+      CarouselControlPrev,
+      CarouselControlNext,
+      CarouselIndicators,
+      CarouselSlide
+    );
+    const cloneSlideChildren = slideChildren.map((child, index) => cloneElement(child, { index }));
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    return /* @__PURE__ */ jsx(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        className: cx("ui-carousel", className),
+        __css: { position: "relative", h: "fit-content", ...styles.container },
+        ...getContainerProps({}, ref),
+        children: [
+          customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
+          customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
+          /* @__PURE__ */ jsx(CarouselSlides, { ...getSlidesProps({ ...filterUndefined({ h, minH }), ...inner }), children: cloneSlideChildren }),
+          customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ jsx(CarouselIndicators, { ...indicatorsProps }) : null,
+          otherChildren
+        ]
+      }
+    ) });
+  }
+);
+var CarouselSlides = forwardRef(({ ...rest }, ref) => {
+  const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+  return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel-sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
+});
+var CarouselSlidesInner = ({ ...rest }) => {
+  const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    ...styles.inner,
+    ...includeGapInSize ? { [orientation === "vertical" ? "mb" : "mr"]: `-${gap}` } : {}
+  };
+  return /* @__PURE__ */ jsx(ui.div, { className: "ui-carousel-sliders-inner", __css: css, ...rest });
+};
+
+export {
+  Carousel
+};

package/dist/chunk-UMRTZXZW.mjs

@@ -0,0 +1,51 @@
+import {
+  useCarouselContext,
+  useCarouselIndicators
+} from "./chunk-4P3A5PTO.mjs";
+
+// src/carousel-indicators.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { cloneElement } from "react";
+import { jsx } from "react/jsx-runtime";
+var CarouselIndicators = forwardRef(
+  ({ className, component = CarouselIndicator, ...rest }, ref) => {
+    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { indexes, getIndicatorProps } = useCarouselIndicators();
+    const cloneChildren = indexes.map((index) => {
+      const isSelected = index === selectedIndex;
+      const child = component({ index, isSelected });
+      if (!child)
+        return null;
+      const props = getIndicatorProps({ ...child.props, index });
+      return cloneElement(child, props);
+    });
+    const css = {
+      position: "absolute",
+      zIndex: "kurillin",
+      display: "flex",
+      justifyContent: "center",
+      ...styles.indicators,
+      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
+    };
+    return /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+  }
+);
+var CarouselIndicator = ({ className, ...rest }) => {
+  const { styles } = useCarouselContext();
+  const css = { ...styles.indicator };
+  return /* @__PURE__ */ jsx(
+    ui.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      className: cx("ui-carousel-indicator", className),
+      __css: css,
+      ...rest
+    }
+  );
+};
+
+export {
+  CarouselIndicators
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Carousel, CarouselProps } from './carousel.js';
+export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
+export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.js';
+export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.js';
+import '@yamada-ui/core';
+import './use-carousel.js';
+import '@yamada-ui/utils';
+import 'react';
+import '@yamada-ui/button';
+import 'embla-carousel-react';