@yamada-ui/carousel 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/carousel
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/carousel
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/carousel
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/carousel
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/carousel-control.d.ts

@@ -0,0 +1,8 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { IconButtonProps } from '@yamada-ui/button';
+
+type CarouselControlProps = IconButtonProps;
+declare const CarouselControlPrev: _yamada_ui_core.Component<"button", IconButtonProps>;
+declare const CarouselControlNext: _yamada_ui_core.Component<"button", IconButtonProps>;
+
+export { CarouselControlNext, CarouselControlPrev, CarouselControlProps };

package/dist/carousel-control.js

@@ -0,0 +1,154 @@
+"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/carousel-control.tsx
+var carousel_control_exports = {};
+__export(carousel_control_exports, {
+  CarouselControlNext: () => CarouselControlNext,
+  CarouselControlPrev: () => CarouselControlPrev
+});
+module.exports = __toCommonJS(carousel_control_exports);
+var import_button = require("@yamada-ui/button");
+var import_core2 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/use-carousel.ts
+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 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 };
+};
+
+// src/carousel-control.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CarouselControlPrev = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "prev" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CarouselControl,
+      {
+        operation: "prev",
+        className: (0, import_utils2.cx)("ui-carousel-control-prev", className),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControlNext = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "next" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CarouselControl,
+      {
+        operation: "next",
+        className: (0, import_utils2.cx)("ui-carousel-control-next", className),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControl = (0, import_core2.forwardRef)(
+  ({ className, operation, ...rest }, ref) => {
+    const { styles } = useCarouselContext();
+    const colorScheme = (0, import_core2.useColorModetValue)("whiteAlpha", "blackAlpha");
+    const css = {
+      position: "absolute",
+      zIndex: "kurillin",
+      ...styles.control,
+      ...styles[operation]
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.IconButton,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-carousel-control", className),
+        colorScheme,
+        isRound: true,
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselControlNext,
+  CarouselControlPrev
+});

package/dist/carousel-control.mjs

@@ -0,0 +1,9 @@
+import {
+  CarouselControlNext,
+  CarouselControlPrev
+} from "./chunk-FDF2QUCY.mjs";
+import "./chunk-4P3A5PTO.mjs";
+export {
+  CarouselControlNext,
+  CarouselControlPrev
+};

package/dist/carousel-indicators.d.ts

@@ -0,0 +1,14 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type CarouselIndicatorsOptions = {
+    component?: FC<{
+        index: number;
+        isSelected: boolean;
+    }>;
+};
+type CarouselIndicatorsProps = Omit<HTMLUIProps<'div'>, 'children'> & CarouselIndicatorsOptions;
+declare const CarouselIndicators: _yamada_ui_core.Component<"div", CarouselIndicatorsProps>;
+
+export { CarouselIndicators, CarouselIndicatorsProps };

package/dist/carousel-indicators.js

@@ -0,0 +1,120 @@
+"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/carousel-indicators.tsx
+var carousel_indicators_exports = {};
+__export(carousel_indicators_exports, {
+  CarouselIndicators: () => CarouselIndicators
+});
+module.exports = __toCommonJS(carousel_indicators_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/use-carousel.ts
+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 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 };
+};
+
+// src/carousel-indicators.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CarouselIndicators = (0, import_core2.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 (0, import_react2.cloneElement)(child, props);
+    });
+    const css = {
+      position: "absolute",
+      zIndex: "kurillin",
+      display: "flex",
+      justifyContent: "center",
+      ...styles.indicators,
+      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+  }
+);
+var CarouselIndicator = ({ className, ...rest }) => {
+  const { styles } = useCarouselContext();
+  const css = { ...styles.indicator };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core2.ui.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      className: (0, import_utils2.cx)("ui-carousel-indicator", className),
+      __css: css,
+      ...rest
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselIndicators
+});

package/dist/carousel-indicators.mjs

@@ -0,0 +1,7 @@
+import {
+  CarouselIndicators
+} from "./chunk-UMRTZXZW.mjs";
+import "./chunk-4P3A5PTO.mjs";
+export {
+  CarouselIndicators
+};

package/dist/carousel-slide.d.ts

@@ -0,0 +1,15 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, UIProps } from '@yamada-ui/core';
+import { UseCarouselSlideProps } from './use-carousel.js';
+import '@yamada-ui/utils';
+import 'react';
+import '@yamada-ui/button';
+import 'embla-carousel-react';
+
+type CarouselSlideOptions = {
+    size?: UIProps['width'];
+};
+type CarouselSlideProps = HTMLUIProps<'div'> & UseCarouselSlideProps & CarouselSlideOptions;
+declare const CarouselSlide: _yamada_ui_core.Component<"div", CarouselSlideProps>;
+
+export { CarouselSlide, CarouselSlideProps };

package/dist/carousel-slide.js

@@ -0,0 +1,86 @@
+"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/carousel-slide.tsx
+var carousel_slide_exports = {};
+__export(carousel_slide_exports, {
+  CarouselSlide: () => CarouselSlide
+});
+module.exports = __toCommonJS(carousel_slide_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/use-carousel.ts
+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 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 };
+};
+
+// src/carousel-slide.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CarouselSlide = (0, import_core2.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__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { className: (0, import_utils2.cx)("ui-carousel-slide", className), __css: css, ...getSlideProps({}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlideInner, { ref, ...rest }) });
+  }
+);
+var CarouselSlideInner = (0, import_core2.forwardRef)(({ ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: "ui-carousel-slide-inner", w: "100%", h: "100%", ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselSlide
+});

package/dist/carousel-slide.mjs

@@ -0,0 +1,7 @@
+import {
+  CarouselSlide
+} from "./chunk-BWFAE3UJ.mjs";
+import "./chunk-4P3A5PTO.mjs";
+export {
+  CarouselSlide
+};

package/dist/carousel.d.ts

@@ -0,0 +1,38 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps, Token, UIProps } from '@yamada-ui/core';
+import { UseCarouselProps, Orientation, Align, ContainScroll } from './use-carousel.js';
+import { CarouselControlProps } from './carousel-control.js';
+import { CarouselIndicatorsProps } from './carousel-indicators.js';
+import '@yamada-ui/utils';
+import 'react';
+import '@yamada-ui/button';
+import 'embla-carousel-react';
+
+type CarouselOptions = {
+    orientation?: Token<Orientation>;
+    align?: Token<Align>;
+    containScroll?: Token<ContainScroll>;
+    slidesToScroll?: Token<number>;
+    dragFree?: Token<boolean>;
+    draggable?: Token<boolean>;
+    inViewThreshold?: Token<number>;
+    loop?: Token<boolean>;
+    skipSnaps?: Token<boolean>;
+    speed?: Token<number>;
+    delay?: Token<number>;
+    autoplay?: Token<boolean>;
+    stopMouseEnterAutoplay?: Token<boolean>;
+    includeGapInSize?: Token<boolean>;
+    slideSize?: UIProps['width'];
+    inner?: HTMLUIProps<'div'>;
+    withControls?: Token<boolean>;
+    controlProps?: CarouselControlProps;
+    controlPrevProps?: CarouselControlProps;
+    controlNextProps?: CarouselControlProps;
+    withIndicators?: Token<boolean>;
+    indicatorsProps?: CarouselIndicatorsProps;
+};
+type CarouselProps = ThemeProps<'Carousel'> & Omit<HTMLUIProps<'div'>, 'onChange' | 'draggable'> & Pick<UseCarouselProps, 'index' | 'defaultIndex' | 'onChange' | 'onScrollProgress'> & CarouselOptions;
+declare const Carousel: _yamada_ui_core.Component<"div", CarouselProps>;
+
+export { Carousel, CarouselProps };