@yamada-ui/carousel 2.0.7-next-20241005220055 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/carousel-control.js +2 -2
  2. package/dist/carousel-control.js.map +1 -1
  3. package/dist/carousel-control.mjs +2 -2
  4. package/dist/carousel-indicators.js +5 -5
  5. package/dist/carousel-indicators.js.map +1 -1
  6. package/dist/carousel-indicators.mjs +2 -2
  7. package/dist/carousel-slide.js +6 -7
  8. package/dist/carousel-slide.js.map +1 -1
  9. package/dist/carousel-slide.mjs +2 -2
  10. package/dist/carousel.d.mts +47 -47
  11. package/dist/carousel.d.ts +47 -47
  12. package/dist/carousel.js +71 -70
  13. package/dist/carousel.js.map +1 -1
  14. package/dist/carousel.mjs +5 -5
  15. package/dist/{chunk-OQNU22B2.mjs → chunk-CXXL47SC.mjs} +8 -9
  16. package/dist/chunk-CXXL47SC.mjs.map +1 -0
  17. package/dist/{chunk-T3LMURPY.mjs → chunk-PEXGWNKB.mjs} +4 -4
  18. package/dist/chunk-PEXGWNKB.mjs.map +1 -0
  19. package/dist/{chunk-LRO4RIBJ.mjs → chunk-SYCPZC2C.mjs} +41 -31
  20. package/dist/chunk-SYCPZC2C.mjs.map +1 -0
  21. package/dist/{chunk-W6XPFRNI.mjs → chunk-UTOIPGGP.mjs} +7 -7
  22. package/dist/chunk-UTOIPGGP.mjs.map +1 -0
  23. package/dist/{chunk-LV5JHVV6.mjs → chunk-WSTWB7CV.mjs} +29 -37
  24. package/dist/chunk-WSTWB7CV.mjs.map +1 -0
  25. package/dist/index.d.mts +1 -1
  26. package/dist/index.d.ts +1 -1
  27. package/dist/index.js +71 -70
  28. package/dist/index.js.map +1 -1
  29. package/dist/index.mjs +5 -5
  30. package/dist/use-carousel.d.mts +71 -99
  31. package/dist/use-carousel.d.ts +71 -99
  32. package/dist/use-carousel.js +39 -29
  33. package/dist/use-carousel.js.map +1 -1
  34. package/dist/use-carousel.mjs +1 -1
  35. package/package.json +7 -8
  36. package/dist/chunk-LRO4RIBJ.mjs.map +0 -1
  37. package/dist/chunk-LV5JHVV6.mjs.map +0 -1
  38. package/dist/chunk-OQNU22B2.mjs.map +0 -1
  39. package/dist/chunk-T3LMURPY.mjs.map +0 -1
  40. package/dist/chunk-W6XPFRNI.mjs.map +0 -1
@@ -2,27 +2,26 @@
2
2
  import {
3
3
  CarouselControlNext,
4
4
  CarouselControlPrev
5
- } from "./chunk-T3LMURPY.mjs";
5
+ } from "./chunk-PEXGWNKB.mjs";
6
6
  import {
7
7
  CarouselIndicators
8
- } from "./chunk-W6XPFRNI.mjs";
8
+ } from "./chunk-UTOIPGGP.mjs";
9
9
  import {
10
10
  CarouselSlide
11
- } from "./chunk-OQNU22B2.mjs";
11
+ } from "./chunk-CXXL47SC.mjs";
12
12
  import {
13
13
  CarouselProvider,
14
14
  useCarousel,
15
15
  useCarouselContext
16
- } from "./chunk-LRO4RIBJ.mjs";
16
+ } from "./chunk-SYCPZC2C.mjs";
17
17
 
18
18
  // src/carousel.tsx
19
19
  import {
20
- ui,
21
20
  forwardRef,
22
- useComponentMultiStyle,
23
- omitThemeProps
21
+ omitThemeProps,
22
+ ui,
23
+ useComponentMultiStyle
24
24
  } from "@yamada-ui/core";
25
- import { useToken } from "@yamada-ui/use-token";
26
25
  import { useValue } from "@yamada-ui/use-value";
27
26
  import {
28
27
  cx,
@@ -36,7 +35,6 @@ import { cloneElement } from "react";
36
35
  import { jsx, jsxs } from "react/jsx-runtime";
37
36
  var Carousel = forwardRef(
38
37
  ({ h, height, minH, minHeight, ...props }, ref) => {
39
- var _a, _b;
40
38
  const orientation = useValue(props.orientation);
41
39
  const align = useValue(props.align);
42
40
  const autoplay = useValue(props.autoplay);
@@ -51,43 +49,37 @@ var Carousel = forwardRef(
51
49
  const skipSnaps = useValue(props.skipSnaps);
52
50
  const containScroll = useValue(props.containScroll);
53
51
  const includeGapInSize = useValue(props.includeGapInSize);
54
- const _gap = useValue(props.gap);
55
- const gap = (_a = useToken("spaces", _gap)) != null ? _a : _gap;
56
- const _slideSize = useValue(props.slideSize);
57
- const slideSize = (_b = useToken("sizes", _slideSize)) != null ? _b : _slideSize;
58
52
  const [styles, mergedProps] = useComponentMultiStyle("Carousel", {
59
53
  ...props,
60
- orientation,
61
54
  align,
62
55
  autoplay,
63
- stopMouseEnterAutoplay,
64
- loop,
65
- duration,
56
+ containScroll,
66
57
  delay,
67
- slidesToScroll,
68
- draggable,
69
58
  dragFree,
59
+ draggable,
60
+ duration,
61
+ includeGapInSize,
70
62
  inViewThreshold,
63
+ loop,
64
+ orientation,
71
65
  skipSnaps,
72
- containScroll,
73
- includeGapInSize,
74
- gap,
75
- slideSize
66
+ slidesToScroll,
67
+ stopMouseEnterAutoplay
76
68
  });
77
69
  const {
78
70
  className,
79
- innerProps,
80
71
  withControls = true,
81
- controlProps,
82
- controlPrevProps,
83
- controlNextProps,
84
72
  withIndicators = true,
73
+ controlNextProps,
74
+ controlPrevProps,
75
+ controlProps,
85
76
  indicatorsProps,
77
+ innerProps,
86
78
  ...computedProps
87
79
  } = omitThemeProps(mergedProps);
88
80
  const computedWithControls = useValue(withControls);
89
81
  const computedWithIndicators = useValue(withIndicators);
90
- const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
82
+ const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
91
83
  ...computedProps
92
84
  });
93
85
  const validChildren = getValidChildren(children);
@@ -114,17 +106,18 @@ var Carousel = forwardRef(
114
106
  const cloneSlideChildren = slideChildren.map(
115
107
  (child, index) => cloneElement(child, { index })
116
108
  );
109
+ const css = {
110
+ h: "fit-content",
111
+ position: "relative",
112
+ ...styles.container
113
+ };
117
114
  h != null ? h : h = height;
118
115
  minH != null ? minH : minH = minHeight;
119
116
  return /* @__PURE__ */ jsx(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsxs(
120
117
  ui.div,
121
118
  {
122
119
  className: cx("ui-carousel", className),
123
- __css: {
124
- position: "relative",
125
- h: "fit-content",
126
- ...styles.container
127
- },
120
+ __css: css,
128
121
  ...getContainerProps({}, ref),
129
122
  children: [
130
123
  customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
@@ -150,20 +143,19 @@ Carousel.displayName = "Carousel";
150
143
  Carousel.__ui__ = "Carousel";
151
144
  var CarouselSlides = forwardRef(
152
145
  ({ ...rest }, ref) => {
153
- const css = { w: "100%", h: "fit-content", overflow: "hidden" };
146
+ const css = { h: "fit-content", overflow: "hidden", w: "100%" };
154
147
  return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
155
148
  }
156
149
  );
157
150
  CarouselSlides.displayName = "CarouselSlides";
158
151
  CarouselSlides.__ui__ = "CarouselSlides";
159
152
  var CarouselSlidesInner = ({ ...rest }) => {
160
- const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
153
+ const { includeGapInSize, orientation, styles } = useCarouselContext();
161
154
  const css = {
162
155
  display: "flex",
163
156
  flexDirection: orientation === "vertical" ? "column" : "row",
164
157
  ...styles.inner,
165
158
  ...includeGapInSize ? {
166
- vars: [{ name: "gap", token: "spaces", value: gap }],
167
159
  [orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
168
160
  } : {}
169
161
  };
@@ -175,4 +167,4 @@ CarouselSlidesInner.__ui__ = "CarouselSlidesInner";
175
167
  export {
176
168
  Carousel
177
169
  };
178
- //# sourceMappingURL=chunk-LV5JHVV6.mjs.map
170
+ //# sourceMappingURL=chunk-WSTWB7CV.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { CarouselControlProps } from \"./carousel-control\"\nimport type { CarouselIndicatorsProps } from \"./carousel-indicators\"\nimport type {\n AlignmentOptionType,\n ScrollContainOptionType,\n SlidesInViewOptionsType,\n UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n filterUndefined,\n findChild,\n getValidChildren,\n omitChildren,\n pickChildren,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { CarouselControlNext, CarouselControlPrev } from \"./carousel-control\"\nimport { CarouselIndicators } from \"./carousel-indicators\"\nimport { CarouselSlide } from \"./carousel-slide\"\nimport {\n CarouselProvider,\n useCarousel,\n useCarouselContext,\n} from \"./use-carousel\"\n\ninterface CarouselOptions {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: Token<AlignmentOptionType>\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: Token<boolean>\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: Token<ScrollContainOptionType>\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: Token<number>\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: Token<boolean>\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: Token<boolean>\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: Token<number>\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: Token<boolean>\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: Token<SlidesInViewOptionsType>\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: Token<boolean>\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Token<\"horizontal\" | \"vertical\">\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: Token<boolean>\n /**\n * The CSS `width` property.\n */\n slideSize?: CSSUIProps[\"width\"]\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: Token<number>\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: Token<boolean>\n /**\n * If `true`, display the carousel control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the carousel indicator buttons.\n *\n * @default true\n */\n withIndicators?: Token<boolean>\n /**\n * Props for next of the carousel control element.\n */\n controlNextProps?: CarouselControlProps\n /**\n * Props for previous of the carousel control element.\n */\n controlPrevProps?: CarouselControlProps\n /**\n * Props for carousel control element.\n */\n controlProps?: CarouselControlProps\n /**\n * Props for carousel indicators element.\n */\n indicatorsProps?: CarouselIndicatorsProps\n /**\n * Props for carousel inner element.\n */\n innerProps?: HTMLUIProps\n}\n\nexport interface CarouselProps\n extends ThemeProps<\"Carousel\">,\n Omit<HTMLUIProps, \"draggable\" | \"onChange\">,\n Pick<\n UseCarouselProps,\n | \"controlRef\"\n | \"defaultIndex\"\n | \"index\"\n | \"onChange\"\n | \"onScrollProgress\"\n | \"watchDrag\"\n | \"watchResize\"\n | \"watchSlides\"\n >,\n CarouselOptions {}\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n ({ h, height, minH, minHeight, ...props }, ref) => {\n const orientation = useValue(props.orientation)\n const align = useValue(props.align)\n const autoplay = useValue(props.autoplay)\n const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n const loop = useValue(props.loop)\n const duration = useValue(props.duration)\n const delay = useValue(props.delay)\n const slidesToScroll = useValue(props.slidesToScroll)\n const draggable = useValue(props.draggable)\n const dragFree = useValue(props.dragFree)\n const inViewThreshold = useValue(props.inViewThreshold)\n const skipSnaps = useValue(props.skipSnaps)\n const containScroll = useValue(props.containScroll)\n const includeGapInSize = useValue(props.includeGapInSize)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Carousel\", {\n ...props,\n align,\n autoplay,\n containScroll,\n delay,\n dragFree,\n draggable,\n duration,\n includeGapInSize,\n inViewThreshold,\n loop,\n orientation,\n skipSnaps,\n slidesToScroll,\n stopMouseEnterAutoplay,\n })\n const {\n className,\n withControls = true,\n withIndicators = true,\n controlNextProps,\n controlPrevProps,\n controlProps,\n indicatorsProps,\n innerProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const computedWithControls = useValue(withControls)\n const computedWithIndicators = useValue(withIndicators)\n\n const { children, getContainerProps, getSlidesProps, ...rest } =\n useCarousel({\n ...computedProps,\n })\n\n const validChildren = getValidChildren(children)\n\n const customCarouselControlPrev = findChild(\n validChildren,\n CarouselControlPrev,\n )\n const customCarouselControlNext = findChild(\n validChildren,\n CarouselControlNext,\n )\n const customCarouselIndicators = findChild(\n validChildren,\n CarouselIndicators,\n )\n const slideChildren = pickChildren(validChildren, CarouselSlide)\n const otherChildren = omitChildren(\n validChildren,\n CarouselControlPrev,\n CarouselControlNext,\n CarouselIndicators,\n CarouselSlide,\n )\n\n const cloneSlideChildren = slideChildren.map((child, index) =>\n cloneElement(child, { index }),\n )\n\n const css: CSSUIObject = {\n h: \"fit-content\",\n position: \"relative\",\n ...styles.container,\n }\n\n h ??= height\n minH ??= minHeight\n\n return (\n <CarouselProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-carousel\", className)}\n __css={css}\n {...getContainerProps({}, ref)}\n >\n {customCarouselControlPrev ??\n (computedWithControls ? (\n <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n ) : null)}\n {customCarouselControlNext ??\n (computedWithControls ? (\n <CarouselControlNext {...controlProps} {...controlNextProps} />\n ) : null)}\n\n <CarouselSlides\n {...getSlidesProps({\n ...filterUndefined({ h, minH }),\n ...innerProps,\n })}\n >\n {cloneSlideChildren}\n </CarouselSlides>\n\n {customCarouselIndicators ??\n (computedWithIndicators ? (\n <CarouselIndicators {...indicatorsProps} />\n ) : null)}\n\n {otherChildren}\n </ui.div>\n </CarouselProvider>\n )\n },\n)\n\nCarousel.displayName = \"Carousel\"\nCarousel.__ui__ = \"Carousel\"\n\ninterface CarouselSlidesProps extends HTMLUIProps {}\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n ({ ...rest }, ref) => {\n const css: CSSUIObject = { h: \"fit-content\", overflow: \"hidden\", w: \"100%\" }\n\n return (\n <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n <CarouselSlidesInner {...rest} />\n </ui.div>\n )\n },\n)\n\nCarouselSlides.displayName = \"CarouselSlides\"\nCarouselSlides.__ui__ = \"CarouselSlides\"\n\ninterface CarouselSlidesInnerProps extends HTMLUIProps {}\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n const { includeGapInSize, orientation, styles } = useCarouselContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n ...styles.inner,\n ...(includeGapInSize\n ? {\n [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n }\n : {}),\n }\n\n return (\n <ui.div className=\"ui-carousel__sliders__inner\" __css={css} {...rest} />\n )\n}\n\nCarouselSlidesInner.displayName = \"CarouselSlidesInner\"\nCarouselSlidesInner.__ui__ = \"CarouselSlidesInner\"\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AA2PrB,SAOM,KAPN;AA5FD,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,GAAG,QAAQ,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjD,UAAM,cAAc,SAAS,MAAM,WAAW;AAC9C,UAAM,QAAQ,SAAS,MAAM,KAAK;AAClC,UAAM,WAAW,SAAS,MAAM,QAAQ;AACxC,UAAM,yBAAyB,SAAS,MAAM,sBAAsB;AACpE,UAAM,OAAO,SAAS,MAAM,IAAI;AAChC,UAAM,WAAW,SAAS,MAAM,QAAQ;AACxC,UAAM,QAAQ,SAAS,MAAM,KAAK;AAClC,UAAM,iBAAiB,SAAS,MAAM,cAAc;AACpD,UAAM,YAAY,SAAS,MAAM,SAAS;AAC1C,UAAM,WAAW,SAAS,MAAM,QAAQ;AACxC,UAAM,kBAAkB,SAAS,MAAM,eAAe;AACtD,UAAM,YAAY,SAAS,MAAM,SAAS;AAC1C,UAAM,gBAAgB,SAAS,MAAM,aAAa;AAClD,UAAM,mBAAmB,SAAS,MAAM,gBAAgB;AAExD,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,YAAY;AAAA,MAC/D,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,UAAM,uBAAuB,SAAS,YAAY;AAClD,UAAM,yBAAyB,SAAS,cAAc;AAEtD,UAAM,EAAE,UAAU,mBAAmB,gBAAgB,GAAG,KAAK,IAC3D,YAAY;AAAA,MACV,GAAG;AAAA,IACL,CAAC;AAEH,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,4BAA4B;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,4BAA4B;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,2BAA2B;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,UAAM,gBAAgB,aAAa,eAAe,aAAa;AAC/D,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,qBAAqB,cAAc;AAAA,MAAI,CAAC,OAAO,UACnD,aAAa,OAAO,EAAE,MAAM,CAAC;AAAA,IAC/B;AAEA,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,MACH,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,wBAAM;AACN,iCAAS;AAET,WACE,oBAAC,oBAAiB,OAAO,EAAE,QAAQ,GAAG,KAAK,GACzC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,QAE5B;AAAA,0EACE,uBACC,oBAAC,uBAAqB,GAAG,cAAe,GAAG,kBAAkB,IAC3D;AAAA,UACL,gEACE,uBACC,oBAAC,uBAAqB,GAAG,cAAe,GAAG,kBAAkB,IAC3D;AAAA,UAEN;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,eAAe;AAAA,gBACjB,GAAG,gBAAgB,EAAE,GAAG,KAAK,CAAC;AAAA,gBAC9B,GAAG;AAAA,cACL,CAAC;AAAA,cAEA;AAAA;AAAA,UACH;AAAA,UAEC,8DACE,yBACC,oBAAC,sBAAoB,GAAG,iBAAiB,IACvC;AAAA,UAEL;AAAA;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIlB,IAAM,iBAAiB;AAAA,EACrB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,UAAM,MAAmB,EAAE,GAAG,eAAe,UAAU,UAAU,GAAG,OAAO;AAE3E,WACE,oBAAC,GAAG,KAAH,EAAO,KAAU,WAAU,wBAAuB,OAAO,KACxD,8BAAC,uBAAqB,GAAG,MAAM,GACjC;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAIxB,IAAM,sBAAoD,CAAC,EAAE,GAAG,KAAK,MAAM;AACzE,QAAM,EAAE,kBAAkB,aAAa,OAAO,IAAI,mBAAmB;AAErE,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,IACvD,GAAG,OAAO;AAAA,IACV,GAAI,mBACA;AAAA,MACE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG;AAAA,IAC9C,IACA,CAAC;AAAA,EACP;AAEA,SACE,oBAAC,GAAG,KAAH,EAAO,WAAU,+BAA8B,OAAO,KAAM,GAAG,MAAM;AAE1E;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;","names":[]}
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  export { Carousel, CarouselProps } from './carousel.mjs';
2
- export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
3
2
  export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.mjs';
4
3
  export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.mjs';
4
+ export { CarouselSlide, CarouselSlideProps } from './carousel-slide.mjs';
5
5
  export { CarouselControl } from './use-carousel.mjs';
6
6
  import '@yamada-ui/core';
7
7
  import '@yamada-ui/button';
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export { Carousel, CarouselProps } from './carousel.js';
2
- export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
3
2
  export { CarouselControlNext, CarouselControlPrev, CarouselControlProps } from './carousel-control.js';
4
3
  export { CarouselIndicators, CarouselIndicatorsProps } from './carousel-indicators.js';
4
+ export { CarouselSlide, CarouselSlideProps } from './carousel-slide.js';
5
5
  export { CarouselControl } from './use-carousel.js';
6
6
  import '@yamada-ui/core';
7
7
  import '@yamada-ui/button';
package/dist/index.js CHANGED
@@ -41,7 +41,6 @@ module.exports = __toCommonJS(src_exports);
41
41
 
42
42
  // src/carousel.tsx
43
43
  var import_core5 = require("@yamada-ui/core");
44
- var import_use_token = require("@yamada-ui/use-token");
45
44
  var import_use_value = require("@yamada-ui/use-value");
46
45
  var import_utils5 = require("@yamada-ui/utils");
47
46
  var import_react3 = require("react");
@@ -63,51 +62,54 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
63
62
  errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
64
63
  });
65
64
  var useCarousel = ({
66
- index,
67
- defaultIndex = 0,
68
- onChange,
69
65
  align = "center",
70
- orientation = "horizontal",
71
66
  autoplay = false,
72
- stopMouseEnterAutoplay = true,
73
- loop = true,
74
- duration = 25,
67
+ children,
68
+ containScroll = false,
69
+ controlRef,
70
+ defaultIndex = 0,
75
71
  delay = 4e3,
76
- slidesToScroll = 1,
77
- draggable = true,
78
72
  dragFree = false,
73
+ draggable = true,
74
+ duration = 25,
75
+ includeGapInSize = true,
76
+ index,
79
77
  inViewThreshold = 0,
78
+ loop = true,
79
+ orientation = "horizontal",
80
80
  skipSnaps = false,
81
- containScroll = false,
82
81
  slideSize = "100%",
83
- includeGapInSize = true,
84
- onScrollProgress,
82
+ slidesToScroll = 1,
83
+ stopMouseEnterAutoplay = true,
85
84
  watchDrag = draggable,
86
85
  watchResize = true,
87
86
  watchSlides = true,
88
- controlRef,
89
- children,
87
+ onChange,
88
+ onScrollProgress,
90
89
  ...rest
91
90
  }) => {
92
- const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
91
+ const [
92
+ { gap = "fallback(4, 1rem)", ...containerProps },
93
+ { vars, ...slidesProps }
94
+ ] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
93
95
  const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
94
- value: index,
95
96
  defaultValue: defaultIndex,
97
+ value: index,
96
98
  onChange
97
99
  });
98
100
  const isVertical = orientation === "vertical";
99
101
  const [carouselRef, carousel] = (0, import_embla_carousel_react.default)(
100
102
  {
101
- axis: isVertical ? "y" : "x",
102
- startIndex: defaultIndex,
103
- loop,
104
103
  align,
105
- slidesToScroll,
106
- duration,
104
+ axis: isVertical ? "y" : "x",
105
+ containScroll,
107
106
  dragFree,
107
+ duration,
108
108
  inViewThreshold,
109
+ loop,
109
110
  skipSnaps,
110
- containScroll,
111
+ slidesToScroll,
112
+ startIndex: defaultIndex,
111
113
  watchDrag,
112
114
  watchResize,
113
115
  watchSlides
@@ -192,11 +194,20 @@ var useCarousel = ({
192
194
  };
193
195
  }
194
196
  }, [carousel, onScroll]);
197
+ (0, import_utils.useUpdateEffect)(() => {
198
+ if (!carousel) return;
199
+ if (index === void 0) return;
200
+ carousel.scrollTo(index);
201
+ }, [index]);
195
202
  const getContainerProps = (0, import_react.useCallback)(
196
203
  (props = {}, ref = null) => ({
197
204
  ...containerProps,
198
205
  ...props,
199
206
  ref,
207
+ vars: (0, import_core.mergeVars)(vars, [
208
+ { name: "gap", token: "spaces", value: gap },
209
+ { name: "slideSize", token: "sizes", value: slideSize }
210
+ ]),
200
211
  onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
201
212
  setIsMouseEnter(true);
202
213
  }),
@@ -204,7 +215,7 @@ var useCarousel = ({
204
215
  setIsMouseEnter(false);
205
216
  })
206
217
  }),
207
- [containerProps]
218
+ [containerProps, gap, slideSize, vars]
208
219
  );
209
220
  const getSlidesProps = (0, import_react.useCallback)(
210
221
  (props = {}) => ({
@@ -217,20 +228,18 @@ var useCarousel = ({
217
228
  return {
218
229
  carousel,
219
230
  children,
231
+ includeGapInSize,
220
232
  indexes,
221
- selectedIndex,
222
233
  orientation,
223
- slideSize,
224
- gap,
234
+ selectedIndex,
225
235
  slidesToScroll,
226
- includeGapInSize,
227
236
  getContainerProps,
228
237
  getSlidesProps
229
238
  };
230
239
  };
231
240
  var useCarouselSlide = ({ index }) => {
232
241
  const { selectedIndex, slidesToScroll } = useCarouselContext();
233
- index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
242
+ index = Math.floor((index != null ? index : 0) / slidesToScroll);
234
243
  const isSelected = index === selectedIndex;
235
244
  const getSlideProps = (0, import_react.useCallback)(
236
245
  (props = {}) => ({
@@ -270,7 +279,7 @@ var useCarouselControl = ({
270
279
  return { getControlProps };
271
280
  };
272
281
  var useCarouselIndicators = () => {
273
- const { selectedIndex, carousel, indexes } = useCarouselContext();
282
+ const { carousel, indexes, selectedIndex } = useCarouselContext();
274
283
  const onClick = (0, import_react.useCallback)(
275
284
  (ev, index) => {
276
285
  if (!carousel) return;
@@ -305,7 +314,6 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
305
314
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
306
315
  CarouselControl,
307
316
  {
308
- operation: "prev",
309
317
  className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
310
318
  "aria-label": "Go to previous slide",
311
319
  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -317,6 +325,7 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
317
325
  }
318
326
  }
319
327
  ),
328
+ operation: "prev",
320
329
  ...getControlProps(rest, ref)
321
330
  }
322
331
  );
@@ -331,7 +340,6 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
331
340
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
332
341
  CarouselControl,
333
342
  {
334
- operation: "next",
335
343
  className: (0, import_utils2.cx)("ui-carousel__control--next", className),
336
344
  "aria-label": "Go to next slide",
337
345
  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -343,6 +351,7 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
343
351
  }
344
352
  }
345
353
  ),
354
+ operation: "next",
346
355
  ...getControlProps(rest, ref)
347
356
  }
348
357
  );
@@ -380,13 +389,13 @@ var import_react2 = require("react");
380
389
  var import_jsx_runtime2 = require("react/jsx-runtime");
381
390
  var CarouselIndicators = (0, import_core3.forwardRef)(
382
391
  ({ className, component, ...rest }, ref) => {
383
- const { selectedIndex, orientation, styles } = useCarouselContext();
392
+ const { orientation, selectedIndex, styles } = useCarouselContext();
384
393
  const { indexes, getIndicatorProps } = useCarouselIndicators();
385
394
  const css = {
386
- position: "absolute",
387
- zIndex: "fallback(kurillin, 9)",
388
395
  display: "flex",
389
396
  justifyContent: "center",
397
+ position: "absolute",
398
+ zIndex: "fallback(kurillin, 9)",
390
399
  ...styles.indicators,
391
400
  ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
392
401
  };
@@ -428,8 +437,8 @@ var CarouselIndicator = ({
428
437
  import_core3.ui.button,
429
438
  {
430
439
  type: "button",
431
- tabIndex: -1,
432
440
  className: (0, import_utils3.cx)("ui-carousel__indicators__indicator", className),
441
+ tabIndex: -1,
433
442
  __css: css,
434
443
  ...rest
435
444
  }
@@ -444,13 +453,13 @@ var import_utils4 = require("@yamada-ui/utils");
444
453
  var import_jsx_runtime3 = require("react/jsx-runtime");
445
454
  var CarouselSlide = (0, import_core4.forwardRef)(
446
455
  ({ className, size, ...rest }, ref) => {
447
- const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
456
+ const { includeGapInSize, orientation } = useCarouselContext();
448
457
  const { getSlideProps } = useCarouselSlide(rest);
449
- size != null ? size : size = slideSize;
458
+ size != null ? size : size = "$slideSize";
450
459
  const css = {
451
- position: "relative",
452
460
  flex: `0 0 ${size}`,
453
- ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
461
+ position: "relative",
462
+ ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: "$gap" } : { [orientation === "vertical" ? "mb" : "mr"]: "$gap" }
454
463
  };
455
464
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
456
465
  import_core4.ui.div,
@@ -472,8 +481,7 @@ var CarouselSlideInner = (0, import_core4.forwardRef)(
472
481
  {
473
482
  ref,
474
483
  className: "ui-carousel__slide__inner",
475
- w: "100%",
476
- h: "100%",
484
+ boxSize: "100%",
477
485
  ...rest
478
486
  }
479
487
  );
@@ -486,7 +494,6 @@ CarouselSlideInner.__ui__ = "CarouselSlideInner";
486
494
  var import_jsx_runtime4 = require("react/jsx-runtime");
487
495
  var Carousel = (0, import_core5.forwardRef)(
488
496
  ({ h, height, minH, minHeight, ...props }, ref) => {
489
- var _a, _b;
490
497
  const orientation = (0, import_use_value.useValue)(props.orientation);
491
498
  const align = (0, import_use_value.useValue)(props.align);
492
499
  const autoplay = (0, import_use_value.useValue)(props.autoplay);
@@ -501,43 +508,37 @@ var Carousel = (0, import_core5.forwardRef)(
501
508
  const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
502
509
  const containScroll = (0, import_use_value.useValue)(props.containScroll);
503
510
  const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
504
- const _gap = (0, import_use_value.useValue)(props.gap);
505
- const gap = (_a = (0, import_use_token.useToken)("spaces", _gap)) != null ? _a : _gap;
506
- const _slideSize = (0, import_use_value.useValue)(props.slideSize);
507
- const slideSize = (_b = (0, import_use_token.useToken)("sizes", _slideSize)) != null ? _b : _slideSize;
508
511
  const [styles, mergedProps] = (0, import_core5.useComponentMultiStyle)("Carousel", {
509
512
  ...props,
510
- orientation,
511
513
  align,
512
514
  autoplay,
513
- stopMouseEnterAutoplay,
514
- loop,
515
- duration,
515
+ containScroll,
516
516
  delay,
517
- slidesToScroll,
518
- draggable,
519
517
  dragFree,
518
+ draggable,
519
+ duration,
520
+ includeGapInSize,
520
521
  inViewThreshold,
522
+ loop,
523
+ orientation,
521
524
  skipSnaps,
522
- containScroll,
523
- includeGapInSize,
524
- gap,
525
- slideSize
525
+ slidesToScroll,
526
+ stopMouseEnterAutoplay
526
527
  });
527
528
  const {
528
529
  className,
529
- innerProps,
530
530
  withControls = true,
531
- controlProps,
532
- controlPrevProps,
533
- controlNextProps,
534
531
  withIndicators = true,
532
+ controlNextProps,
533
+ controlPrevProps,
534
+ controlProps,
535
535
  indicatorsProps,
536
+ innerProps,
536
537
  ...computedProps
537
538
  } = (0, import_core5.omitThemeProps)(mergedProps);
538
539
  const computedWithControls = (0, import_use_value.useValue)(withControls);
539
540
  const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
540
- const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
541
+ const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
541
542
  ...computedProps
542
543
  });
543
544
  const validChildren = (0, import_utils5.getValidChildren)(children);
@@ -564,17 +565,18 @@ var Carousel = (0, import_core5.forwardRef)(
564
565
  const cloneSlideChildren = slideChildren.map(
565
566
  (child, index) => (0, import_react3.cloneElement)(child, { index })
566
567
  );
568
+ const css = {
569
+ h: "fit-content",
570
+ position: "relative",
571
+ ...styles.container
572
+ };
567
573
  h != null ? h : h = height;
568
574
  minH != null ? minH : minH = minHeight;
569
575
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
570
576
  import_core5.ui.div,
571
577
  {
572
578
  className: (0, import_utils5.cx)("ui-carousel", className),
573
- __css: {
574
- position: "relative",
575
- h: "fit-content",
576
- ...styles.container
577
- },
579
+ __css: css,
578
580
  ...getContainerProps({}, ref),
579
581
  children: [
580
582
  customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
@@ -600,20 +602,19 @@ Carousel.displayName = "Carousel";
600
602
  Carousel.__ui__ = "Carousel";
601
603
  var CarouselSlides = (0, import_core5.forwardRef)(
602
604
  ({ ...rest }, ref) => {
603
- const css = { w: "100%", h: "fit-content", overflow: "hidden" };
605
+ const css = { h: "fit-content", overflow: "hidden", w: "100%" };
604
606
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlidesInner, { ...rest }) });
605
607
  }
606
608
  );
607
609
  CarouselSlides.displayName = "CarouselSlides";
608
610
  CarouselSlides.__ui__ = "CarouselSlides";
609
611
  var CarouselSlidesInner = ({ ...rest }) => {
610
- const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
612
+ const { includeGapInSize, orientation, styles } = useCarouselContext();
611
613
  const css = {
612
614
  display: "flex",
613
615
  flexDirection: orientation === "vertical" ? "column" : "row",
614
616
  ...styles.inner,
615
617
  ...includeGapInSize ? {
616
- vars: [{ name: "gap", token: "spaces", value: gap }],
617
618
  [orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
618
619
  } : {}
619
620
  };