@tiny-design/react 1.0.4

package/lib/carousel/carousel-item.js

@@ -0,0 +1,16 @@
+require("../_virtual/_rolldown/runtime.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/carousel/carousel-item.tsx
+const CarouselItem = (props) => {
+	const { children, style, className } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style,
+		className,
+		children
+	});
+};
+CarouselItem.displayName = "CarouselItem";
+//#endregion
+exports.default = CarouselItem;
+
+//# sourceMappingURL=carousel-item.js.map

package/lib/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,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAY;EAAkB;EAC3B;EACG,CAAA;;AAIV,aAAa,cAAc"}

package/lib/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/lib/carousel/carousel.js

@@ -0,0 +1,229 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/carousel/carousel.tsx
+const Carousel = (0, react.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 = require_general.getPrefixCls("carousel", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const slideCount = react.default.Children.count(children);
+	const slides = react.default.Children.toArray(children);
+	const trackRef = (0, react.useRef)(null);
+	const outerRef = (0, react.useRef)(null);
+	const [current, setCurrent] = (0, react.useState)(0);
+	const [isAnimating, setIsAnimating] = (0, react.useState)(false);
+	const animatingRef = (0, react.useRef)(false);
+	const dragStartX = (0, react.useRef)(0);
+	const dragDelta = (0, react.useRef)(0);
+	const isDragging = (0, react.useRef)(false);
+	const isFade = effect === "fade";
+	const goTo = (0, react.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 = (0, react.useCallback)(() => {
+		if (!infinite && current >= slideCount - 1) return;
+		goTo(current + 1);
+	}, [
+		current,
+		slideCount,
+		infinite,
+		goTo
+	]);
+	const prev = (0, react.useCallback)(() => {
+		if (!infinite && current <= 0) return;
+		goTo(current - 1);
+	}, [
+		current,
+		infinite,
+		goTo
+	]);
+	(0, react.useImperativeHandle)(ref, () => ({
+		goTo,
+		next,
+		prev
+	}), [
+		goTo,
+		next,
+		prev
+	]);
+	const handleTransitionEnd = (0, react.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] = (0, react.useState)(false);
+	(0, react.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 = (0, classnames.default)(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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `${prefixCls}__track`,
+			ref: trackRef,
+			style: trackStyle,
+			onTransitionEnd: handleTransitionEnd,
+			children: slides.map((child, idx) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${prefixCls}__track ${prefixCls}__track_fade`,
+		children: slides.map((child, idx) => {
+			const isActive = idx === current;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)(`${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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__viewport`,
+				children: isFade ? renderFadeTrack() : renderScrollxTrack()
+			}),
+			arrows && slideCount > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: `${prefixCls}__arrow ${prefixCls}__arrow_prev`,
+				onClick: prev,
+				type: "button",
+				"aria-label": "Previous slide",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					viewBox: "0 0 24 24",
+					width: "20",
+					height: "20",
+					fill: "currentColor",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: `${prefixCls}__arrow ${prefixCls}__arrow_next`,
+				onClick: next,
+				type: "button",
+				"aria-label": "Next slide",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					viewBox: "0 0 24 24",
+					width: "20",
+					height: "20",
+					fill: "currentColor",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" })
+				})
+			})] }),
+			showDots && slideCount > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: (0, classnames.default)(`${prefixCls}__dots`, `${prefixCls}__dots_${dotPlacement}`, dotsClassName),
+				children: slides.map((_, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: (0, classnames.default)(`${prefixCls}__dot`, { [`${prefixCls}__dot_active`]: idx === current }),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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
+exports.default = Carousel;
+
+//# sourceMappingURL=carousel.js.map

package/lib/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":["getPrefixCls","ConfigContext","React"],"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/lib/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/lib/carousel/index.js

@@ -0,0 +1,11 @@
+require('../style/base.css');
+require('./style/index.css');
+const require_carousel = require("./carousel.js");
+const require_carousel_item = require("./carousel-item.js");
+//#region src/carousel/index.tsx
+const DefaultCarousel = require_carousel.default;
+DefaultCarousel.Item = require_carousel_item.default;
+//#endregion
+exports.default = DefaultCarousel;
+
+//# sourceMappingURL=index.js.map

package/lib/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Carousel","CarouselItem"],"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,kBAAkBA,iBAAAA;AACxB,gBAAgB,OAAOC,sBAAAA"}

package/lib/carousel/style/_index.scss

@@ -0,0 +1,158 @@
+@use '../../style/variables' as *;
+
+$carousel-prefix: #{$prefix}-carousel;
+
+.#{$carousel-prefix} {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  // ---- Viewport ----
+  &__viewport {
+    position: relative;
+    overflow: hidden;
+  }
+
+  // ---- Track (scrollx) ----
+  &__track {
+    display: flex;
+    position: relative;
+
+    &_fade {
+      position: relative;
+    }
+  }
+
+  // ---- Slide ----
+  &__slide {
+    flex-shrink: 0;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &_fade &__slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+
+    &_active {
+      position: relative;
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  // ---- Arrows ----
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 50%;
+    background: var(--ty-carousel-arrow-bg);
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.3s;
+    outline: none;
+
+    &:hover {
+      background: var(--ty-carousel-arrow-hover-bg);
+    }
+
+    &_prev {
+      left: 12px;
+    }
+
+    &_next {
+      right: 12px;
+    }
+  }
+
+  // ---- Dots ----
+  &__dots {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    z-index: 1;
+
+    &_bottom {
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: row;
+    }
+
+    &_top {
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: row;
+    }
+
+    &_left {
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      flex-direction: column;
+    }
+
+    &_right {
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      flex-direction: column;
+    }
+  }
+
+  &__dot {
+    width: 16px;
+    height: 3px;
+    margin: 0 4px;
+    border-radius: 1px;
+    background: var(--ty-carousel-dot-bg);
+    cursor: pointer;
+    transition: all 0.3s;
+
+    button {
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    &:hover {
+      background: var(--ty-carousel-dot-hover-bg);
+    }
+
+    &_active {
+      width: 24px;
+      background: var(--ty-carousel-dot-active-bg);
+    }
+  }
+
+  &_vertical-dots &__dot {
+    width: 3px;
+    height: 16px;
+    margin: 4px 0;
+
+    &_active {
+      width: 3px;
+      height: 24px;
+    }
+  }
+}

package/lib/carousel/style/index.css

@@ -0,0 +1,128 @@
+.ty-carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+.ty-carousel__viewport {
+  position: relative;
+  overflow: hidden;
+}
+.ty-carousel__track {
+  display: flex;
+  position: relative;
+}
+.ty-carousel__track_fade {
+  position: relative;
+}
+.ty-carousel__slide {
+  flex-shrink: 0;
+  width: 100%;
+  overflow: hidden;
+}
+.ty-carousel_fade .ty-carousel__slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.ty-carousel_fade .ty-carousel__slide_active {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}
+.ty-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 50%;
+  background: var(--ty-carousel-arrow-bg);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.3s;
+  outline: none;
+}
+.ty-carousel__arrow:hover {
+  background: var(--ty-carousel-arrow-hover-bg);
+}
+.ty-carousel__arrow_prev {
+  left: 12px;
+}
+.ty-carousel__arrow_next {
+  right: 12px;
+}
+.ty-carousel__dots {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  z-index: 1;
+}
+.ty-carousel__dots_bottom {
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: row;
+}
+.ty-carousel__dots_top {
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: row;
+}
+.ty-carousel__dots_left {
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+.ty-carousel__dots_right {
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+.ty-carousel__dot {
+  width: 16px;
+  height: 3px;
+  margin: 0 4px;
+  border-radius: 1px;
+  background: var(--ty-carousel-dot-bg);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.ty-carousel__dot button {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+.ty-carousel__dot:hover {
+  background: var(--ty-carousel-dot-hover-bg);
+}
+.ty-carousel__dot_active {
+  width: 24px;
+  background: var(--ty-carousel-dot-active-bg);
+}
+.ty-carousel_vertical-dots .ty-carousel__dot {
+  width: 3px;
+  height: 16px;
+  margin: 4px 0;
+}
+.ty-carousel_vertical-dots .ty-carousel__dot_active {
+  width: 3px;
+  height: 24px;
+}

package/lib/carousel/style/index.d.ts

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

package/lib/carousel/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/carousel/types.d.ts

@@ -0,0 +1,47 @@
+import { BaseProps } from "../_utils/props.js";
+
+//#region src/carousel/types.d.ts
+type DotPlacement = 'top' | 'bottom' | 'left' | 'right';
+type CarouselEffect = 'scrollx' | 'fade';
+interface CarouselProps extends BaseProps {
+  /** Whether to show arrow buttons */
+  arrows?: boolean;
+  /** Whether to auto-scroll */
+  autoplay?: boolean;
+  /** Delay between auto-scroll in ms */
+  autoplaySpeed?: number;
+  /** Dot indicator placement */
+  dotPlacement?: DotPlacement;
+  /** Whether to show dot indicators */
+  dots?: boolean | {
+    className?: string;
+  };
+  /** Enable drag-to-scroll */
+  draggable?: boolean;
+  /** Transition effect */
+  effect?: CarouselEffect;
+  /** CSS transition easing function */
+  easing?: string;
+  /** Infinite loop */
+  infinite?: boolean;
+  /** Animation speed in ms */
+  speed?: number;
+  /** Wait for animation to complete before switching */
+  waitForAnimate?: boolean;
+  /** Fires after slide changes */
+  afterChange?: (current: number) => void;
+  /** Fires before slide changes */
+  beforeChange?: (current: number, next: number) => void;
+  children: React.ReactElement[];
+}
+interface CarouselRef {
+  /** Go to a specific slide */
+  goTo: (slideNumber: number, dontAnimate?: boolean) => void;
+  /** Go to the next slide */
+  next: () => void;
+  /** Go to the previous slide */
+  prev: () => void;
+}
+//#endregion
+export { CarouselEffect, CarouselProps, CarouselRef, DotPlacement };
+//# sourceMappingURL=types.d.ts.map

package/lib/cascader/cascader.d.ts

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