@tiny-design/react 1.0.4

package/es/card/card.js

@@ -0,0 +1,60 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/card/card.tsx
+const Card = React.forwardRef((props, ref) => {
+	const { bordered = true, active = false, hoverable = false, prefixCls: customisedCls, title, extra, header, headerStyle, actions, footer, footerStyle, className, style, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("card", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_bordered`]: bordered,
+		[`${prefixCls}_active`]: active,
+		[`${prefixCls}_hoverable`]: hoverable
+	});
+	const renderHeader = () => {
+		if (header) return header;
+		else if (title || extra) return /* @__PURE__ */ jsxs("div", {
+			className: `${prefixCls}__header`,
+			style: headerStyle,
+			children: [title, extra]
+		});
+		else return null;
+	};
+	const renderFooter = () => {
+		if (footer) return footer;
+		else if (actions) return /* @__PURE__ */ jsx("div", {
+			className: `${prefixCls}__footer`,
+			style: footerStyle,
+			children: actions
+		});
+		else return null;
+	};
+	const renderChildren = () => {
+		if (children) return React.Children.map(children, (child) => {
+			if (!React.isValidElement(child)) return child;
+			const childElement = child;
+			if (childElement.type.displayName === "CardContent") {
+				const childProps = { prefixCls };
+				return React.cloneElement(childElement, childProps);
+			} else return child;
+		});
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		style,
+		children: [
+			renderHeader(),
+			renderChildren(),
+			renderFooter()
+		]
+	});
+});
+Card.displayName = "Card";
+//#endregion
+export { Card as default };
+
+//# sourceMappingURL=card.js.map

package/es/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CardContentProps, CardProps } from './types';\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const {\n    bordered = true,\n    active = false,\n    hoverable = false,\n    prefixCls: customisedCls,\n    title,\n    extra,\n    header,\n    headerStyle,\n    actions,\n    footer,\n    footerStyle,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('card', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_bordered`]: bordered,\n    [`${prefixCls}_active`]: active,\n    [`${prefixCls}_hoverable`]: hoverable,\n  });\n\n  const renderHeader = (): ReactNode => {\n    if (header) {\n      return header;\n    } else if (title || extra) {\n      return (\n        <div className={`${prefixCls}__header`} style={headerStyle}>\n          {title}\n          {extra}\n        </div>\n      );\n    } else {\n      return null;\n    }\n  };\n\n  const renderFooter = (): ReactNode => {\n    if (footer) {\n      return footer;\n    } else if (actions) {\n      return (\n        <div className={`${prefixCls}__footer`} style={footerStyle}>\n          {actions}\n        </div>\n      );\n    } else {\n      return null;\n    }\n  };\n\n  const renderChildren = (): ReactNode => {\n    if (children) {\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n\n        // Pass prefixCls attribute to child if it is a CardContent instance\n        const childElement = child as React.FunctionComponentElement<CardContentProps>;\n        if (childElement.type.displayName === 'CardContent') {\n          const childProps: Partial<CardContentProps> = {\n            prefixCls,\n          };\n          return React.cloneElement(childElement, childProps);\n        } else {\n          return child;\n        }\n      });\n    }\n    return null;\n  };\n\n  return (\n    <div ref={ref} {...otherProps} className={cls} style={style}>\n      {renderHeader()}\n      {renderChildren()}\n      {renderFooter()}\n    </div>\n  );\n});\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"mappings":";;;;;;AAMA,MAAM,OAAO,MAAM,YAAuC,OAAO,QAAQ;CACvE,MAAM,EACJ,WAAW,MACX,SAAS,OACT,YAAY,OACZ,WAAW,eACX,OACA,OACA,QACA,aACA,SACA,QACA,aACA,WACA,OACA,UACA,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,QADT,WAAW,cAAc,CACM,WAAW,cAAc;CAC9E,MAAM,MAAM,WAAW,WAAW,WAAW;GAC1C,GAAG,UAAU,aAAa;GAC1B,GAAG,UAAU,WAAW;GACxB,GAAG,UAAU,cAAc;EAC7B,CAAC;CAEF,MAAM,qBAAgC;AACpC,MAAI,OACF,QAAO;WACE,SAAS,MAClB,QACE,qBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;GAAW,OAAO;aAA/C,CACG,OACA,MACG;;MAGR,QAAO;;CAIX,MAAM,qBAAgC;AACpC,MAAI,OACF,QAAO;WACE,QACT,QACE,oBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;GAAW,OAAO;aAC5C;GACG,CAAA;MAGR,QAAO;;CAIX,MAAM,uBAAkC;AACtC,MAAI,SACF,QAAO,MAAM,SAAS,IAAI,WAAW,UAAU;AAC7C,OAAI,CAAC,MAAM,eAAe,MAAM,CAC9B,QAAO;GAIT,MAAM,eAAe;AACrB,OAAI,aAAa,KAAK,gBAAgB,eAAe;IACnD,MAAM,aAAwC,EAC5C,WACD;AACD,WAAO,MAAM,aAAa,cAAc,WAAW;SAEnD,QAAO;IAET;AAEJ,SAAO;;AAGT,QACE,qBAAC,OAAD;EAAU;EAAK,GAAI;EAAY,WAAW;EAAY;YAAtD;GACG,cAAc;GACd,gBAAgB;GAChB,cAAc;GACX;;EAER;AAEF,KAAK,cAAc"}

package/es/card/index.d.ts

@@ -0,0 +1,11 @@
+import { Card } from "./card.js";
+import { CardContent } from "./card-content.js";
+
+//#region src/card/index.d.ts
+type ICard = typeof Card & {
+  Content: typeof CardContent;
+};
+declare const DefaultCard: ICard;
+//#endregion
+export { DefaultCard };
+//# sourceMappingURL=index.d.ts.map

package/es/card/index.js

@@ -0,0 +1,11 @@
+import '../style/base.css';
+import './style/index.css';
+import Card from "./card.js";
+import CardContent from "./card-content.js";
+//#region src/card/index.tsx
+const DefaultCard = Card;
+DefaultCard.Content = CardContent;
+//#endregion
+export { DefaultCard as default };
+
+//# sourceMappingURL=index.js.map

package/es/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/card/index.tsx"],"sourcesContent":["import Card from './card';\nimport CardContent from './card-content';\n\ntype ICard = typeof Card & {\n  Content: typeof CardContent;\n};\n\nconst DefaultCard = Card as ICard;\nDefaultCard.Content = CardContent;\n\nexport default DefaultCard;\n"],"mappings":";;;AAOA,MAAM,cAAc;AACpB,YAAY,UAAU"}

package/es/card/style/_index.scss

@@ -0,0 +1,57 @@
+@use '../../style/variables' as *;
+@use './mixin' as *;
+
+.#{$prefix}-card {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border-radius: $card-border-radius;
+  transition: all 0.3s;
+  background-color: var(--ty-card-bg);
+
+  & + & {
+    margin-top: 15px;
+  }
+
+  & > img:first-child {
+    border-radius: $card-border-radius $card-border-radius 0 0;
+  }
+
+  &_bordered {
+    border: 1px solid var(--ty-card-border);
+  }
+
+  &_hoverable {
+    cursor: pointer;
+    &:hover {
+      @include card_elevation();
+    }
+  }
+
+  &_active {
+    @include card_elevation();
+  }
+
+  &__header {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    padding: $card-header-padding;
+    color: var(--ty-card-header-color);
+    font-weight: 500;
+    font-size: 16px;
+    background: transparent;
+    border-bottom: 1px solid var(--ty-card-border);
+    border-radius: $card-border-radius $card-border-radius 0 0;
+  }
+
+  &__body {
+    box-sizing: border-box;
+    padding: $card-body-padding;
+  }
+
+  &__footer {
+    box-sizing: border-box;
+    padding: $card-footer-padding;
+  }
+}

package/es/card/style/_mixin.scss

@@ -0,0 +1,4 @@
+@mixin card_elevation() {
+  box-shadow: var(--ty-shadow-card);
+  border-color: var(--ty-card-shadow-border);
+}

package/es/card/style/index.css

@@ -0,0 +1,48 @@
+.ty-card {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border-radius: 2px;
+  transition: all 0.3s;
+  background-color: var(--ty-card-bg);
+}
+.ty-card + .ty-card {
+  margin-top: 15px;
+}
+.ty-card > img:first-child {
+  border-radius: 2px 2px 0 0;
+}
+.ty-card_bordered {
+  border: 1px solid var(--ty-card-border);
+}
+.ty-card_hoverable {
+  cursor: pointer;
+}
+.ty-card_hoverable:hover {
+  box-shadow: var(--ty-shadow-card);
+  border-color: var(--ty-card-shadow-border);
+}
+.ty-card_active {
+  box-shadow: var(--ty-shadow-card);
+  border-color: var(--ty-card-shadow-border);
+}
+.ty-card__header {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: 13px 16px;
+  color: var(--ty-card-header-color);
+  font-weight: 500;
+  font-size: 16px;
+  background: transparent;
+  border-bottom: 1px solid var(--ty-card-border);
+  border-radius: 2px 2px 0 0;
+}
+.ty-card__body {
+  box-sizing: border-box;
+  padding: 16px;
+}
+.ty-card__footer {
+  box-sizing: border-box;
+  padding: 5px 16px 16px;
+}

package/es/card/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/card/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/card/types.d.ts

@@ -0,0 +1,25 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/card/types.d.ts
+interface CardContentProps extends React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+  prefixCls?: string;
+  children: string;
+}
+interface CardProps extends BaseProps, Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'title'> {
+  title?: ReactNode;
+  extra?: ReactNode;
+  hoverable?: boolean;
+  active?: boolean;
+  bordered?: boolean;
+  actions?: ReactNode[];
+  header?: ReactNode;
+  footer?: ReactNode;
+  headerStyle?: CSSProperties;
+  bodyStyle?: CSSProperties;
+  footerStyle?: CSSProperties;
+  children?: ReactNode | React.ReactElement<CardContentProps>;
+}
+//#endregion
+export { CardContentProps, CardProps };
+//# sourceMappingURL=types.d.ts.map

package/es/carousel/carousel-item.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps } from "../_utils/props.js";
+
+//#region src/carousel/carousel-item.d.ts
+interface CarouselItemProps extends BaseProps {
+  children?: React.ReactNode;
+}
+declare const CarouselItem: {
+  (props: CarouselItemProps): React.ReactElement;
+  displayName: string;
+};
+//#endregion
+export { CarouselItem, CarouselItemProps };
+//# sourceMappingURL=carousel-item.d.ts.map

package/es/carousel/carousel-item.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/carousel/carousel-item.tsx
+const CarouselItem = (props) => {
+	const { children, style, className } = props;
+	return /* @__PURE__ */ jsx("div", {
+		style,
+		className,
+		children
+	});
+};
+CarouselItem.displayName = "CarouselItem";
+//#endregion
+export { CarouselItem as default };
+
+//# sourceMappingURL=carousel-item.js.map

package/es/carousel/carousel-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-item.js","names":[],"sources":["../../src/carousel/carousel-item.tsx"],"sourcesContent":["import { BaseProps } from '../_utils/props';\n\nexport interface CarouselItemProps extends BaseProps {\n  children?: React.ReactNode;\n}\n\nconst CarouselItem = (props: CarouselItemProps): React.ReactElement => {\n  const { children, style, className } = props;\n  return (\n    <div style={style} className={className}>\n      {children}\n    </div>\n  );\n};\n\nCarouselItem.displayName = 'CarouselItem';\n\nexport default CarouselItem;\n"],"mappings":";;AAMA,MAAM,gBAAgB,UAAiD;CACrE,MAAM,EAAE,UAAU,OAAO,cAAc;AACvC,QACE,oBAAC,OAAD;EAAY;EAAkB;EAC3B;EACG,CAAA;;AAIV,aAAa,cAAc"}

package/es/carousel/carousel.d.ts

@@ -0,0 +1,8 @@
+import { CarouselProps, CarouselRef } from "./types.js";
+import React from "react";
+
+//#region src/carousel/carousel.d.ts
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
+//#endregion
+export { Carousel };
+//# sourceMappingURL=carousel.d.ts.map

package/es/carousel/carousel.js

@@ -0,0 +1,226 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/carousel/carousel.tsx
+const Carousel = forwardRef((props, ref) => {
+	const { dots = true, arrows = false, autoplay = false, autoplaySpeed = 3e3, dotPlacement = "bottom", effect = "scrollx", easing = "ease", speed = 500, infinite = true, draggable = false, waitForAnimate = false, beforeChange, afterChange, className, style, children, prefixCls: customisedCls } = props;
+	const prefixCls = getPrefixCls("carousel", useContext(ConfigContext).prefixCls, customisedCls);
+	const slideCount = React.Children.count(children);
+	const slides = React.Children.toArray(children);
+	const trackRef = useRef(null);
+	const outerRef = useRef(null);
+	const [current, setCurrent] = useState(0);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const animatingRef = useRef(false);
+	const dragStartX = useRef(0);
+	const dragDelta = useRef(0);
+	const isDragging = useRef(false);
+	const isFade = effect === "fade";
+	const goTo = useCallback((index, dontAnimate = false) => {
+		if (waitForAnimate && animatingRef.current) return;
+		if (index === current) return;
+		const next = (index % slideCount + slideCount) % slideCount;
+		beforeChange?.(current, next);
+		if (dontAnimate || isFade) {
+			setCurrent(next);
+			afterChange?.(next);
+		} else {
+			setIsAnimating(true);
+			animatingRef.current = true;
+			setCurrent(next);
+		}
+	}, [
+		current,
+		slideCount,
+		beforeChange,
+		afterChange,
+		isFade,
+		waitForAnimate
+	]);
+	const next = useCallback(() => {
+		if (!infinite && current >= slideCount - 1) return;
+		goTo(current + 1);
+	}, [
+		current,
+		slideCount,
+		infinite,
+		goTo
+	]);
+	const prev = useCallback(() => {
+		if (!infinite && current <= 0) return;
+		goTo(current - 1);
+	}, [
+		current,
+		infinite,
+		goTo
+	]);
+	useImperativeHandle(ref, () => ({
+		goTo,
+		next,
+		prev
+	}), [
+		goTo,
+		next,
+		prev
+	]);
+	const handleTransitionEnd = useCallback(() => {
+		setIsAnimating(false);
+		animatingRef.current = false;
+		afterChange?.(current);
+	}, [afterChange, current]);
+	const handleDragStart = (e) => {
+		if (!draggable) return;
+		isDragging.current = true;
+		dragDelta.current = 0;
+		dragStartX.current = "touches" in e ? e.touches[0].clientX : e.clientX;
+	};
+	const handleDragMove = (e) => {
+		if (!isDragging.current) return;
+		dragDelta.current = ("touches" in e ? e.touches[0].clientX : e.clientX) - dragStartX.current;
+	};
+	const handleDragEnd = () => {
+		if (!isDragging.current) return;
+		isDragging.current = false;
+		const threshold = (outerRef.current?.clientWidth ?? 300) / 4;
+		if (dragDelta.current < -threshold) next();
+		else if (dragDelta.current > threshold) prev();
+		dragDelta.current = 0;
+	};
+	const [paused, setPaused] = useState(false);
+	useEffect(() => {
+		if (!autoplay || slideCount <= 1 || paused) return;
+		const timer = window.setInterval(next, autoplaySpeed);
+		return () => window.clearInterval(timer);
+	}, [
+		autoplay,
+		autoplaySpeed,
+		next,
+		slideCount,
+		paused
+	]);
+	const showDots = dots !== false;
+	const dotsClassName = typeof dots === "object" ? dots.className : void 0;
+	const isVerticalDot = dotPlacement === "left" || dotPlacement === "right";
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_${effect}`]: true,
+		[`${prefixCls}_vertical-dots`]: isVerticalDot
+	});
+	const renderScrollxTrack = () => {
+		const pct = 100 / slideCount;
+		const trackStyle = {
+			width: `${slideCount * 100}%`,
+			transform: `translate3d(${-current * pct}%, 0, 0)`,
+			transition: isAnimating ? `transform ${speed}ms ${easing}` : "none"
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: `${prefixCls}__track`,
+			ref: trackRef,
+			style: trackStyle,
+			onTransitionEnd: handleTransitionEnd,
+			children: slides.map((child, idx) => /* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__slide`,
+				style: { width: `${pct}%` },
+				role: "group",
+				"aria-roledescription": "slide",
+				"aria-label": `Slide ${idx + 1} of ${slideCount}`,
+				"aria-hidden": idx !== current,
+				children: child
+			}, idx))
+		});
+	};
+	const renderFadeTrack = () => /* @__PURE__ */ jsx("div", {
+		className: `${prefixCls}__track ${prefixCls}__track_fade`,
+		children: slides.map((child, idx) => {
+			const isActive = idx === current;
+			return /* @__PURE__ */ jsx("div", {
+				className: classNames(`${prefixCls}__slide`, { [`${prefixCls}__slide_active`]: isActive }),
+				style: {
+					opacity: isActive ? 1 : 0,
+					transition: `opacity ${speed}ms ${easing}`
+				},
+				role: "group",
+				"aria-roledescription": "slide",
+				"aria-label": `Slide ${idx + 1} of ${slideCount}`,
+				"aria-hidden": !isActive,
+				children: child
+			}, idx);
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: outerRef,
+		className: cls,
+		style,
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": "Carousel",
+		onKeyDown: (e) => {
+			if (e.key === "ArrowLeft") {
+				e.preventDefault();
+				prev();
+			}
+			if (e.key === "ArrowRight") {
+				e.preventDefault();
+				next();
+			}
+		},
+		tabIndex: 0,
+		onMouseEnter: () => autoplay && setPaused(true),
+		onMouseLeave: () => autoplay && setPaused(false),
+		onMouseDown: handleDragStart,
+		onMouseMove: handleDragMove,
+		onMouseUp: handleDragEnd,
+		onTouchStart: handleDragStart,
+		onTouchMove: handleDragMove,
+		onTouchEnd: handleDragEnd,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__viewport`,
+				children: isFade ? renderFadeTrack() : renderScrollxTrack()
+			}),
+			arrows && slideCount > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				className: `${prefixCls}__arrow ${prefixCls}__arrow_prev`,
+				onClick: prev,
+				type: "button",
+				"aria-label": "Previous slide",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					width: "20",
+					height: "20",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
+				})
+			}), /* @__PURE__ */ jsx("button", {
+				className: `${prefixCls}__arrow ${prefixCls}__arrow_next`,
+				onClick: next,
+				type: "button",
+				"aria-label": "Next slide",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					width: "20",
+					height: "20",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" })
+				})
+			})] }),
+			showDots && slideCount > 1 && /* @__PURE__ */ jsx("ul", {
+				className: classNames(`${prefixCls}__dots`, `${prefixCls}__dots_${dotPlacement}`, dotsClassName),
+				children: slides.map((_, idx) => /* @__PURE__ */ jsx("li", {
+					className: classNames(`${prefixCls}__dot`, { [`${prefixCls}__dot_active`]: idx === current }),
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Go to slide ${idx + 1}`,
+						"aria-current": idx === current ? true : void 0,
+						onClick: () => goTo(idx)
+					})
+				}, idx))
+			})
+		]
+	});
+});
+Carousel.displayName = "Carousel";
+//#endregion
+export { Carousel as default };
+
+//# sourceMappingURL=carousel.js.map

package/es/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../src/carousel/carousel.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  useImperativeHandle,\n  forwardRef,\n  useContext,\n} from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CarouselProps, CarouselRef } from './types';\n\nconst Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {\n  const {\n    dots = true,\n    arrows = false,\n    autoplay = false,\n    autoplaySpeed = 3000,\n    dotPlacement = 'bottom',\n    effect = 'scrollx',\n    easing = 'ease',\n    speed = 500,\n    infinite = true,\n    draggable = false,\n    waitForAnimate = false,\n    beforeChange,\n    afterChange,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('carousel', configContext.prefixCls, customisedCls);\n\n  const slideCount = React.Children.count(children);\n  const slides = React.Children.toArray(children) as React.ReactElement[];\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useState(0);\n  const [isAnimating, setIsAnimating] = useState(false);\n  const animatingRef = useRef(false);\n\n  // Drag state\n  const dragStartX = useRef(0);\n  const dragDelta = useRef(0);\n  const isDragging = useRef(false);\n\n  const isFade = effect === 'fade';\n\n  // ---- Navigate ----\n  const goTo = useCallback(\n    (index: number, dontAnimate = false) => {\n      if (waitForAnimate && animatingRef.current) return;\n      if (index === current) return;\n\n      const next = ((index % slideCount) + slideCount) % slideCount;\n      beforeChange?.(current, next);\n\n      if (dontAnimate || isFade) {\n        setCurrent(next);\n        afterChange?.(next);\n      } else {\n        setIsAnimating(true);\n        animatingRef.current = true;\n        setCurrent(next);\n      }\n    },\n    [current, slideCount, beforeChange, afterChange, isFade, waitForAnimate]\n  );\n\n  const next = useCallback(() => {\n    if (!infinite && current >= slideCount - 1) return;\n    goTo(current + 1);\n  }, [current, slideCount, infinite, goTo]);\n\n  const prev = useCallback(() => {\n    if (!infinite && current <= 0) return;\n    goTo(current - 1);\n  }, [current, infinite, goTo]);\n\n  // ---- Imperative handle ----\n  useImperativeHandle(ref, () => ({ goTo, next, prev }), [goTo, next, prev]);\n\n  // ---- Animation end ----\n  const handleTransitionEnd = useCallback(() => {\n    setIsAnimating(false);\n    animatingRef.current = false;\n    afterChange?.(current);\n  }, [afterChange, current]);\n\n  // ---- Drag ----\n  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {\n    if (!draggable) return;\n    isDragging.current = true;\n    dragDelta.current = 0;\n    dragStartX.current = 'touches' in e ? e.touches[0].clientX : e.clientX;\n  };\n\n  const handleDragMove = (e: React.MouseEvent | React.TouchEvent) => {\n    if (!isDragging.current) return;\n    const x = 'touches' in e ? e.touches[0].clientX : e.clientX;\n    dragDelta.current = x - dragStartX.current;\n  };\n\n  const handleDragEnd = () => {\n    if (!isDragging.current) return;\n    isDragging.current = false;\n    const containerWidth = outerRef.current?.clientWidth ?? 300;\n    const threshold = containerWidth / 4;\n    if (dragDelta.current < -threshold) {\n      next();\n    } else if (dragDelta.current > threshold) {\n      prev();\n    }\n    dragDelta.current = 0;\n  };\n\n  // ---- Pause on hover ----\n  const [paused, setPaused] = useState(false);\n\n  // ---- Autoplay ----\n  useEffect(() => {\n    if (!autoplay || slideCount <= 1 || paused) return;\n    const timer = window.setInterval(next, autoplaySpeed);\n    return () => window.clearInterval(timer);\n  }, [autoplay, autoplaySpeed, next, slideCount, paused]);\n\n  // ---- Dots config ----\n  const showDots = dots !== false;\n  const dotsClassName = typeof dots === 'object' ? dots.className : undefined;\n  const isVerticalDot = dotPlacement === 'left' || dotPlacement === 'right';\n\n  // ---- Class names ----\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${effect}`]: true,\n    [`${prefixCls}_vertical-dots`]: isVerticalDot,\n  });\n\n  // ---- Render scrollx track ----\n  const renderScrollxTrack = () => {\n    const pct = 100 / slideCount;\n    const trackStyle: React.CSSProperties = {\n      width: `${slideCount * 100}%`,\n      transform: `translate3d(${-current * pct}%, 0, 0)`,\n      transition: isAnimating ? `transform ${speed}ms ${easing}` : 'none',\n    };\n\n    return (\n      <div\n        className={`${prefixCls}__track`}\n        ref={trackRef}\n        style={trackStyle}\n        onTransitionEnd={handleTransitionEnd}>\n        {slides.map((child, idx) => (\n          <div\n            key={idx}\n            className={`${prefixCls}__slide`}\n            style={{ width: `${pct}%` }}\n            role=\"group\"\n            aria-roledescription=\"slide\"\n            aria-label={`Slide ${idx + 1} of ${slideCount}`}\n            aria-hidden={idx !== current}>\n            {child}\n          </div>\n        ))}\n      </div>\n    );\n  };\n\n  // ---- Render fade ----\n  const renderFadeTrack = () => (\n    <div className={`${prefixCls}__track ${prefixCls}__track_fade`}>\n      {slides.map((child, idx) => {\n        const isActive = idx === current;\n        return (\n          <div\n            key={idx}\n            className={classNames(`${prefixCls}__slide`, {\n              [`${prefixCls}__slide_active`]: isActive,\n            })}\n            style={{\n              opacity: isActive ? 1 : 0,\n              transition: `opacity ${speed}ms ${easing}`,\n            }}\n            role=\"group\"\n            aria-roledescription=\"slide\"\n            aria-label={`Slide ${idx + 1} of ${slideCount}`}\n            aria-hidden={!isActive}>\n            {child}\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <div\n      ref={outerRef}\n      className={cls}\n      style={style}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label=\"Carousel\"\n      onKeyDown={(e) => {\n        if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); }\n        if (e.key === 'ArrowRight') { e.preventDefault(); next(); }\n      }}\n      tabIndex={0}\n      onMouseEnter={() => autoplay && setPaused(true)}\n      onMouseLeave={() => autoplay && setPaused(false)}\n      onMouseDown={handleDragStart}\n      onMouseMove={handleDragMove}\n      onMouseUp={handleDragEnd}\n      onTouchStart={handleDragStart}\n      onTouchMove={handleDragMove}\n      onTouchEnd={handleDragEnd}>\n      <div className={`${prefixCls}__viewport`}>\n        {isFade ? renderFadeTrack() : renderScrollxTrack()}\n      </div>\n\n      {arrows && slideCount > 1 && (\n        <>\n          <button\n            className={`${prefixCls}__arrow ${prefixCls}__arrow_prev`}\n            onClick={prev}\n            type=\"button\"\n            aria-label=\"Previous slide\">\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\">\n              <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n            </svg>\n          </button>\n          <button\n            className={`${prefixCls}__arrow ${prefixCls}__arrow_next`}\n            onClick={next}\n            type=\"button\"\n            aria-label=\"Next slide\">\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\">\n              <path d=\"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z\" />\n            </svg>\n          </button>\n        </>\n      )}\n\n      {showDots && slideCount > 1 && (\n        <ul\n          className={classNames(\n            `${prefixCls}__dots`,\n            `${prefixCls}__dots_${dotPlacement}`,\n            dotsClassName\n          )}>\n          {slides.map((_, idx) => (\n            <li\n              key={idx}\n              className={classNames(`${prefixCls}__dot`, {\n                [`${prefixCls}__dot_active`]: idx === current,\n              })}>\n              <button\n                type=\"button\"\n                aria-label={`Go to slide ${idx + 1}`}\n                aria-current={idx === current ? true : undefined}\n                onClick={() => goTo(idx)}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"mappings":"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"}

package/es/carousel/index.d.ts

@@ -0,0 +1,12 @@
+import { CarouselEffect, CarouselProps, CarouselRef, DotPlacement } from "./types.js";
+import { Carousel } from "./carousel.js";
+import { CarouselItem, CarouselItemProps } from "./carousel-item.js";
+
+//#region src/carousel/index.d.ts
+type ICarousel = typeof Carousel & {
+  Item: typeof CarouselItem;
+};
+declare const DefaultCarousel: ICarousel;
+//#endregion
+export { DefaultCarousel };
+//# sourceMappingURL=index.d.ts.map

package/es/carousel/index.js

@@ -0,0 +1,11 @@
+import '../style/base.css';
+import './style/index.css';
+import Carousel from "./carousel.js";
+import CarouselItem from "./carousel-item.js";
+//#region src/carousel/index.tsx
+const DefaultCarousel = Carousel;
+DefaultCarousel.Item = CarouselItem;
+//#endregion
+export { DefaultCarousel as default };
+
+//# sourceMappingURL=index.js.map

package/es/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/carousel/index.tsx"],"sourcesContent":["import Carousel from './carousel';\nimport CarouselItem from './carousel-item';\n\nexport type { CarouselProps, CarouselRef, DotPlacement, CarouselEffect } from './types';\nexport type { CarouselItemProps } from './carousel-item';\n\ntype ICarousel = typeof Carousel & {\n  Item: typeof CarouselItem;\n};\n\nconst DefaultCarousel = Carousel as unknown as ICarousel;\nDefaultCarousel.Item = CarouselItem;\n\nexport default DefaultCarousel;\n"],"mappings":";;;AAUA,MAAM,kBAAkB;AACxB,gBAAgB,OAAO"}