@dreamtree-org/twreact-ui 1.0.98 → 1.0.99

package/dist/index.esm.js

@@ -17366,6 +17366,97 @@ var FileUpload = function FileUpload(_ref) {
   })));
 };
 
+var Condition = function Condition(_ref) {
+  var condition = _ref.condition,
+    children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback;
+  return condition ? children : fallback;
+};
+
+function Carousel(props) {
+  var children = props.children,
+    _props$autoPlay = props.autoPlay,
+    autoPlay = _props$autoPlay === void 0 ? false : _props$autoPlay,
+    _props$interval = props.interval,
+    interval = _props$interval === void 0 ? 5000 : _props$interval,
+    _props$showDots = props.showDots,
+    showDots = _props$showDots === void 0 ? true : _props$showDots,
+    className = props.className,
+    itemClassName = props.itemClassName;
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentIndex = _React$useState2[0],
+    setCurrentIndex = _React$useState2[1];
+  var _React$useState3 = React__default.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isPaused = _React$useState4[0],
+    setIsPaused = _React$useState4[1];
+  var timerRef = React__default.useRef(null);
+  var next = React__default.useCallback(function () {
+    setCurrentIndex(function (prevIndex) {
+      return (prevIndex + 1) % React__default.Children.count(children);
+    });
+  }, [children]);
+  var prev = React__default.useCallback(function () {
+    var count = React__default.Children.count(children);
+    setCurrentIndex(function (prevIndex) {
+      return (prevIndex - 1 + count) % count;
+    });
+  }, [children]);
+  React__default.useEffect(function () {
+    if (autoPlay && !isPaused) {
+      timerRef.current = setInterval(next, interval);
+    }
+    return function () {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [autoPlay, isPaused, next, interval]);
+  var childrenArray = React__default.Children.toArray(children);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn$1("relative group overflow-hidden rounded-xl bg-card border border-border/50 shadow-sm", className),
+    onMouseEnter: function onMouseEnter() {
+      return setIsPaused(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsPaused(false);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex transition-transform duration-500 ease-out",
+    style: {
+      transform: "translateX(-".concat(currentIndex * 100, "%)")
+    }
+  }, childrenArray.map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: cn$1("w-full flex-shrink-0 min-w-full", itemClassName)
+    }, child);
+  })), /*#__PURE__*/React__default.createElement("button", {
+    onClick: prev,
+    className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+    "aria-label": "Previous slide"
+  }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
+    className: "w-5 h-5 text-white"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    onClick: next,
+    className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+    "aria-label": "Next slide"
+  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
+    className: "w-5 h-5 text-white"
+  })), showDots && /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10"
+  }, childrenArray.map(function (_, index) {
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: index,
+      onClick: function onClick() {
+        return setCurrentIndex(index);
+      },
+      className: cn$1("w-2 h-2 rounded-full transition-all duration-300", currentIndex === index ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"),
+      "aria-label": "Go to slide ".concat(index + 1)
+    });
+  })));
+}
+
 var ThemeContext = /*#__PURE__*/createContext();
 var useTheme = function useTheme() {
   var context = useContext(ThemeContext);
@@ -26309,4 +26400,4 @@ var StoreProvider = function StoreProvider(_ref) {
   }, children));
 };
 
-export { Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dialog, EmitterClass as Emitter, FileUpload, FootNav, Form, Helpers, Input, Loader, LocationPicker, Navbar, Pagination, PriceRangePicker, ProgressBar, Radio, Rate, RoundedTag, Select, Sidebar, Skeleton, Stepper, StoreProvider, Switch, Table, Tabs, ThemeProvider, ThreeDotPopoverSimple as ThreeDotPopover, Toast, ToastContainer, Tooltip, cn$1 as cn, useApi, useMixins, useTheme, useToast };
+export { Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Carousel, Checkbox, ColorPicker, Condition, DatePicker, DateRangePicker, Dialog, EmitterClass as Emitter, FileUpload, FootNav, Form, Helpers, Input, Loader, LocationPicker, Navbar, Pagination, PriceRangePicker, ProgressBar, Radio, Rate, RoundedTag, Select, Sidebar, Skeleton, Stepper, StoreProvider, Switch, Table, Tabs, ThemeProvider, ThreeDotPopoverSimple as ThreeDotPopover, Toast, ToastContainer, Tooltip, cn$1 as cn, useApi, useMixins, useTheme, useToast };

package/dist/index.js

@@ -17386,6 +17386,97 @@ var FileUpload = function FileUpload(_ref) {
   })));
 };
 
+var Condition = function Condition(_ref) {
+  var condition = _ref.condition,
+    children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback;
+  return condition ? children : fallback;
+};
+
+function Carousel(props) {
+  var children = props.children,
+    _props$autoPlay = props.autoPlay,
+    autoPlay = _props$autoPlay === void 0 ? false : _props$autoPlay,
+    _props$interval = props.interval,
+    interval = _props$interval === void 0 ? 5000 : _props$interval,
+    _props$showDots = props.showDots,
+    showDots = _props$showDots === void 0 ? true : _props$showDots,
+    className = props.className,
+    itemClassName = props.itemClassName;
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentIndex = _React$useState2[0],
+    setCurrentIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isPaused = _React$useState4[0],
+    setIsPaused = _React$useState4[1];
+  var timerRef = React.useRef(null);
+  var next = React.useCallback(function () {
+    setCurrentIndex(function (prevIndex) {
+      return (prevIndex + 1) % React.Children.count(children);
+    });
+  }, [children]);
+  var prev = React.useCallback(function () {
+    var count = React.Children.count(children);
+    setCurrentIndex(function (prevIndex) {
+      return (prevIndex - 1 + count) % count;
+    });
+  }, [children]);
+  React.useEffect(function () {
+    if (autoPlay && !isPaused) {
+      timerRef.current = setInterval(next, interval);
+    }
+    return function () {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [autoPlay, isPaused, next, interval]);
+  var childrenArray = React.Children.toArray(children);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn$1("relative group overflow-hidden rounded-xl bg-card border border-border/50 shadow-sm", className),
+    onMouseEnter: function onMouseEnter() {
+      return setIsPaused(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsPaused(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex transition-transform duration-500 ease-out",
+    style: {
+      transform: "translateX(-".concat(currentIndex * 100, "%)")
+    }
+  }, childrenArray.map(function (child, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: cn$1("w-full flex-shrink-0 min-w-full", itemClassName)
+    }, child);
+  })), /*#__PURE__*/React.createElement("button", {
+    onClick: prev,
+    className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+    "aria-label": "Previous slide"
+  }, /*#__PURE__*/React.createElement(ChevronLeft, {
+    className: "w-5 h-5 text-white"
+  })), /*#__PURE__*/React.createElement("button", {
+    onClick: next,
+    className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+    "aria-label": "Next slide"
+  }, /*#__PURE__*/React.createElement(ChevronRight, {
+    className: "w-5 h-5 text-white"
+  })), showDots && /*#__PURE__*/React.createElement("div", {
+    className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10"
+  }, childrenArray.map(function (_, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      key: index,
+      onClick: function onClick() {
+        return setCurrentIndex(index);
+      },
+      className: cn$1("w-2 h-2 rounded-full transition-all duration-300", currentIndex === index ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"),
+      "aria-label": "Go to slide ".concat(index + 1)
+    });
+  })));
+}
+
 var ThemeContext = /*#__PURE__*/React.createContext();
 var useTheme = function useTheme() {
   var context = React.useContext(ThemeContext);
@@ -26336,8 +26427,10 @@ exports.Badge = Badge;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.Card = Card;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.ColorPicker = ColorPicker;
+exports.Condition = Condition;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.Dialog = Dialog;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.0.98",
+  "version": "1.0.99",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",