@yamada-ui/carousel 0.1.0

package/dist/use-carousel.js

@@ -0,0 +1,279 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-carousel.ts
+var use_carousel_exports = {};
+__export(use_carousel_exports, {
+  CarouselProvider: () => CarouselProvider,
+  useCarousel: () => useCarousel,
+  useCarouselContext: () => useCarouselContext,
+  useCarouselControl: () => useCarouselControl,
+  useCarouselIndicators: () => useCarouselIndicators,
+  useCarouselSlide: () => useCarouselSlide
+});
+module.exports = __toCommonJS(use_carousel_exports);
+var import_core = require("@yamada-ui/core");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils = require("@yamada-ui/utils");
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_react = require("react");
+var [CarouselProvider, useCarouselContext] = (0, import_utils.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 = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
+  const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
+    value: index,
+    defaultValue: defaultIndex,
+    onChange
+  });
+  const isVertical = orientation === "vertical";
+  const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
+    axis: isVertical ? "y" : "x",
+    startIndex: defaultIndex,
+    loop,
+    align,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    speed,
+    inViewThreshold,
+    skipSnaps,
+    containScroll
+  });
+  const [indexes, setIndexes] = (0, import_react.useState)([]);
+  const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
+  const timeoutId = (0, import_react.useRef)(void 0);
+  const onScroll = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    const index2 = carousel.selectedScrollSnap();
+    setSelectedIndex(index2);
+  }, [carousel, setSelectedIndex]);
+  (0, import_react.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]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel)
+      return;
+    carousel.reInit();
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [
+    import_react.Children.toArray(children).length,
+    align,
+    orientation,
+    loop,
+    speed,
+    gap,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    inViewThreshold,
+    skipSnaps,
+    containScroll,
+    slideSize,
+    includeGapInSize
+  ]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel)
+      return;
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [carousel]);
+  (0, import_utils.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 = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ...computedProps[0],
+      ...props,
+      ref,
+      onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
+        setIsMouseEnter(true);
+      }),
+      onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
+        setIsMouseEnter(false);
+      })
+    }),
+    [computedProps]
+  );
+  const getSlidesProps = (0, import_react.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 = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...props,
+      role: "carousel-slide",
+      "data-index": index,
+      "data-selected": (0, import_utils.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 = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    if (isPrev) {
+      carousel.scrollPrev();
+    } else {
+      carousel.scrollNext();
+    }
+  }, [carousel, isPrev]);
+  const getControlProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ...props,
+      ref,
+      disabled,
+      role: "carousel-control",
+      onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
+    }),
+    [disabled, onClick]
+  );
+  return { getControlProps };
+};
+var useCarouselIndicators = () => {
+  const { selectedIndex, carousel, indexes } = useCarouselContext();
+  const onClick = (0, import_react.useCallback)(
+    (ev, index) => {
+      if (!carousel)
+        return;
+      ev.stopPropagation();
+      carousel.scrollTo(index);
+    },
+    [carousel]
+  );
+  const getIndicatorProps = (0, import_react.useCallback)(
+    ({ index, ...props } = {}) => {
+      const isSelected = index === selectedIndex;
+      return {
+        ...props,
+        key: index,
+        role: "carousel-indicator",
+        "data-index": index,
+        "data-selected": (0, import_utils.dataAttr)(isSelected),
+        onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
+      };
+    },
+    [onClick, selectedIndex]
+  );
+  return { indexes, getIndicatorProps };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselProvider,
+  useCarousel,
+  useCarouselContext,
+  useCarouselControl,
+  useCarouselIndicators,
+  useCarouselSlide
+});

package/dist/use-carousel.mjs

@@ -0,0 +1,16 @@
+import {
+  CarouselProvider,
+  useCarousel,
+  useCarouselContext,
+  useCarouselControl,
+  useCarouselIndicators,
+  useCarouselSlide
+} from "./chunk-4P3A5PTO.mjs";
+export {
+  CarouselProvider,
+  useCarousel,
+  useCarouselContext,
+  useCarouselControl,
+  useCarouselIndicators,
+  useCarouselSlide
+};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@yamada-ui/carousel",
+  "version": "0.1.0",
+  "description": "Yamada UI carousel component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "carousel",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/carousel"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "embla-carousel-react": "^7.0.0",
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/icon": "0.1.0",
+    "@yamada-ui/button": "0.1.0",
+    "@yamada-ui/use-controllable-state": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/use-token": "0.1.0",
+    "@yamada-ui/use-value": "0.1.0"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}