@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

package/dist/esm/components/utility/Badge.js

@@ -0,0 +1,47 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["children", "variant", "size", "rounded", "className"];
+var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var variants = {
+    "default": 'bg-gray-100 text-primary-800',
+    primary: 'bg-primary-100 text-primary-800',
+    secondary: 'bg-secondary-100 text-secondary-800',
+    success: 'bg-success-100 text-success-800',
+    warning: 'bg-warning-100 text-warning-800',
+    error: 'bg-error-100 text-error-800',
+    outline: 'border border-gray-300'
+  };
+  var sizes = {
+    xs: 'px-1.5 py-px text-xs',
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-0.5 text-sm',
+    lg: 'px-3 py-1 text-base',
+    xl: 'px-3.5 py-1 text-lg',
+    '2xl': 'px-4 py-1.5 text-xl'
+  };
+  return jsx("span", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('inline-flex items-center font-medium', variants[variant], sizes[size] || sizes.md, {
+      'rounded-full': rounded,
+      'rounded-md': !rounded
+    }, className)
+  }, props), {}, {
+    children: children
+  }));
+});
+Badge.displayName = 'Badge';
+
+export { Badge as default };

package/dist/esm/components/utility/Card.js

@@ -0,0 +1,85 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["children", "className", "hover"],
+  _excluded2 = ["children", "className"],
+  _excluded3 = ["children", "className"],
+  _excluded4 = ["children", "className"],
+  _excluded5 = ["children", "className"],
+  _excluded6 = ["children", "className"];
+var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === void 0 ? false : _ref$hover,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('rounded-lg border border-gray-200 bg-white shadow-sm', {
+      'hover:shadow-md transition-shadow': hover
+    }, className)
+  }, props), {}, {
+    children: children
+  }));
+});
+Card.displayName = 'Card';
+var CardHeader = function CardHeader(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn('px-6 py-4 border-b border-gray-200', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardTitle = function CardTitle(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return jsx("h3", _objectSpread2(_objectSpread2({
+    className: cn('text-lg font-semibold text-primary-900', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardDescription = function CardDescription(_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return jsx("p", _objectSpread2(_objectSpread2({
+    className: cn('text-sm text-primary-600', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardContent = function CardContent(_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn('px-6 py-4', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardFooter = function CardFooter(_ref6) {
+  var children = _ref6.children,
+    className = _ref6.className,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn('px-6 py-4 border-t border-gray-200', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+
+export { Card as default };

package/dist/esm/components/utility/Carousel.js

@@ -0,0 +1,97 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
+  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 jsxs("div", {
+    ref: ref,
+    className: cn("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);
+    },
+    children: [jsx("div", {
+      className: "flex transition-transform duration-500 ease-out",
+      style: {
+        transform: "translateX(-".concat(currentIndex * 100, "%)")
+      },
+      children: childrenArray.map(function (child, index) {
+        return jsx("div", {
+          className: cn("w-full flex-shrink-0 min-w-full", itemClassName),
+          children: child
+        }, index);
+      })
+    }), jsx("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",
+      children: jsx(ChevronLeft, {
+        className: "w-5 h-5 text-white"
+      })
+    }), jsx("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",
+      children: jsx(ChevronRight, {
+        className: "w-5 h-5 text-white"
+      })
+    }), showDots && jsx("div", {
+      className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10",
+      children: childrenArray.map(function (_, index) {
+        return jsx("button", {
+          onClick: function onClick() {
+            return setCurrentIndex(index);
+          },
+          className: cn("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)
+        }, index);
+      })
+    })]
+  });
+});
+Carousel.displayName = "Carousel";
+
+export { Carousel, Carousel as default };

package/dist/esm/components/utility/Condition.js

@@ -0,0 +1,9 @@
+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;
+};
+
+export { Condition, Condition as default };

package/dist/esm/components/utility/FileUpload.js

@@ -0,0 +1,177 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useCallback } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Upload, X, Image, FileText, File } from 'lucide-react';
+
+var _excluded = ["accept", "multiple", "maxSize", "onFileSelect", "onFileRemove", "files", "disabled", "className"];
+function formatFileSize(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  var k = 1024;
+  var sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  var i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var accept = _ref.accept,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    maxSize = _ref.maxSize,
+    onFileSelect = _ref.onFileSelect,
+    onFileRemove = _ref.onFileRemove,
+    _ref$files = _ref.files,
+    files = _ref$files === void 0 ? [] : _ref$files,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragOver = _useState2[0],
+    setIsDragOver = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var fileInputRef = useRef(null);
+  var validateFile = useCallback(function (file) {
+    if (maxSize && file.size > maxSize) {
+      setError("File size must be less than ".concat(formatFileSize(maxSize)));
+      return false;
+    }
+    setError('');
+    return true;
+  }, [maxSize]);
+  var getFileIcon = function getFileIcon(file) {
+    if (file.type.startsWith('image/')) {
+      return jsx(Image, {
+        className: "h-8 w-8 text-primary-500"
+      });
+    }
+    if (file.type.includes('text') || file.type.includes('document')) {
+      return jsx(FileText, {
+        className: "h-8 w-8 text-success-500"
+      });
+    }
+    return jsx(File, {
+      className: "h-8 w-8 text-primary-500"
+    });
+  };
+  var handleFiles = useCallback(function (newFiles) {
+    var fileArray = Array.from(newFiles);
+    var validFiles = fileArray.filter(validateFile);
+    if (validFiles.length > 0) {
+      onFileSelect === null || onFileSelect === void 0 || onFileSelect(validFiles);
+    }
+  }, [onFileSelect, validateFile]);
+  var handleDrop = useCallback(function (e) {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (disabled) return;
+    var droppedFiles = e.dataTransfer.files;
+    handleFiles(droppedFiles);
+  }, [handleFiles, disabled]);
+  var handleDragOver = useCallback(function (e) {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragOver(true);
+    }
+  }, [disabled]);
+  var handleDragLeave = useCallback(function (e) {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+  var handleFileInputChange = function handleFileInputChange(e) {
+    var selectedFiles = e.target.files;
+    if (selectedFiles.length > 0) {
+      handleFiles(selectedFiles);
+    }
+  };
+  var handleRemoveFile = function handleRemoveFile(fileIndex) {
+    onFileRemove === null || onFileRemove === void 0 || onFileRemove(fileIndex);
+  };
+  var openFileDialog = function openFileDialog() {
+    if (!disabled) {
+      var _fileInputRef$current;
+      (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+    }
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('w-full', className)
+  }, props), {}, {
+    children: [jsxs("div", {
+      className: cn('relative border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer', {
+        'border-primary-500 bg-primary-50': isDragOver && !disabled,
+        'border-gray-300 hover:border-gray-400': !isDragOver && !disabled,
+        'border-gray-200 bg-gray-50 cursor-not-allowed': disabled
+      }),
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: openFileDialog,
+      children: [jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: accept,
+        multiple: multiple,
+        onChange: handleFileInputChange,
+        className: "hidden",
+        disabled: disabled
+      }), jsx(Upload, {
+        className: cn('mx-auto h-12 w-12', {
+          'text-primary-500': !disabled,
+          'text-primary-400': disabled
+        })
+      }), jsxs("div", {
+        className: "mt-4",
+        children: [jsx("p", {
+          className: cn('text-sm font-medium', {
+            'text-primary-900': !disabled,
+            'text-primary-500': disabled
+          }),
+          children: isDragOver ? 'Drop files here' : 'Click to upload or drag and drop'
+        }), jsxs("p", {
+          className: "text-xs text-primary-500 mt-1",
+          children: [accept && "Accepted formats: ".concat(accept), maxSize && " \u2022 Max size: ".concat(formatFileSize(maxSize))]
+        })]
+      })]
+    }), error && jsx("p", {
+      className: "mt-2 text-sm text-error-500",
+      children: error
+    }), files.length > 0 && jsx("div", {
+      className: "mt-4 space-y-2",
+      children: files.map(function (file, index) {
+        return jsxs("div", {
+          className: "flex items-center justify-between rounded-md border border-gray-200 bg-white p-3",
+          children: [jsxs("div", {
+            className: "flex items-center space-x-3",
+            children: [getFileIcon(file), jsxs("div", {
+              children: [jsx("p", {
+                className: "text-sm font-medium text-primary-900",
+                children: file.name
+              }), jsx("p", {
+                className: "text-xs text-primary-500",
+                children: formatFileSize(file.size)
+              })]
+            })]
+          }), jsx("button", {
+            type: "button",
+            className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+            onClick: function onClick() {
+              return handleRemoveFile(index);
+            },
+            disabled: disabled,
+            children: jsx(X, {
+              className: "h-4 w-4"
+            })
+          })]
+        }, index);
+      })
+    })]
+  }));
+});
+FileUpload.displayName = 'FileUpload';
+
+export { FileUpload as default };

package/dist/esm/components/utility/Pagination.js

@@ -0,0 +1,111 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+var _excluded = ["currentPage", "totalPages", "onPageChange", "showFirstLast", "showPrevNext", "maxVisiblePages", "className"];
+var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    _ref$totalPages = _ref.totalPages,
+    totalPages = _ref$totalPages === void 0 ? 1 : _ref$totalPages,
+    onPageChange = _ref.onPageChange,
+    _ref$showFirstLast = _ref.showFirstLast,
+    showFirstLast = _ref$showFirstLast === void 0 ? true : _ref$showFirstLast,
+    _ref$showPrevNext = _ref.showPrevNext,
+    showPrevNext = _ref$showPrevNext === void 0 ? true : _ref$showPrevNext,
+    _ref$maxVisiblePages = _ref.maxVisiblePages,
+    maxVisiblePages = _ref$maxVisiblePages === void 0 ? 5 : _ref$maxVisiblePages,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var getVisiblePages = function getVisiblePages() {
+    var pages = [];
+    var halfVisible = Math.floor(maxVisiblePages / 2);
+    var startPage = Math.max(1, currentPage - halfVisible);
+    var endPage = Math.min(totalPages, currentPage + halfVisible);
+    // Adjust if we're near the beginning or end
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      if (startPage === 1) {
+        endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+      } else {
+        startPage = Math.max(1, endPage - maxVisiblePages + 1);
+      }
+    }
+    for (var i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+  var visiblePages = getVisiblePages();
+  var handlePageClick = function handlePageClick(page) {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange === null || onPageChange === void 0 || onPageChange(page);
+    }
+  };
+  if (totalPages <= 1) return null;
+  return jsxs("nav", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex items-center justify-center space-x-1', className),
+    "aria-label": "Pagination"
+  }, props), {}, {
+    children: [showFirstLast && currentPage > 1 && jsx("button", {
+      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      onClick: function onClick() {
+        return handlePageClick(1);
+      },
+      "aria-label": "Go to first page",
+      children: "1"
+    }), showPrevNext && jsx("button", {
+      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      onClick: function onClick() {
+        return handlePageClick(currentPage - 1);
+      },
+      disabled: currentPage === 1,
+      "aria-label": "Go to previous page",
+      children: jsx(ChevronLeft, {
+        className: "h-4 w-4"
+      })
+    }), showFirstLast && visiblePages[0] > 2 && jsx("span", {
+      className: "px-3 py-2 text-sm text-primary-500",
+      children: "..."
+    }), visiblePages.map(function (page) {
+      return jsx("button", {
+        className: cn('rounded-md border px-3 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2', {
+          'border-primary-500 bg-primary-50 text-primary-600': page === currentPage,
+          'border-gray-300 bg-white hover:bg-gray-50': page !== currentPage
+        }),
+        onClick: function onClick() {
+          return handlePageClick(page);
+        },
+        "aria-label": "Go to page ".concat(page),
+        "aria-current": page === currentPage ? 'page' : undefined,
+        children: page
+      }, page);
+    }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages - 1 && jsx("span", {
+      className: "px-3 py-2 text-sm text-primary-500",
+      children: "..."
+    }), showPrevNext && jsx("button", {
+      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      onClick: function onClick() {
+        return handlePageClick(currentPage + 1);
+      },
+      disabled: currentPage === totalPages,
+      "aria-label": "Go to next page",
+      children: jsx(ChevronRight, {
+        className: "h-4 w-4"
+      })
+    }), showFirstLast && currentPage < totalPages && jsx("button", {
+      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      onClick: function onClick() {
+        return handlePageClick(totalPages);
+      },
+      "aria-label": "Go to last page",
+      children: totalPages
+    })]
+  }));
+});
+Pagination.displayName = 'Pagination';
+
+export { Pagination as default };