funuicss 2.5.0 → 2.5.1

package/ui/snackbar/SnackBar.tsx

@@ -1,40 +1,56 @@
+'use client';
 import * as React from 'react';
 
 interface SnackbarProps {
   message: string;
-  close: React.ReactNode;
+  close?: React.ReactNode;
   open: boolean;
+  setOpen: (val: boolean) => void;
   position: string;
   funcss?: string;
   animation?: string;
-  duration?: number;
-  flat?:boolean
+  duration?: number; // animation duration (in seconds)
+  autoHide?: boolean; // 👈 NEW
+  autoHideDuration?: number; // 👈 NEW in milliseconds
+  flat?: boolean;
 }
 
-const SnackBar: React.FC<SnackbarProps> = ({ message, close, open, position, funcss, animation, duration , flat}) => {
-  if (open) {
-    return (
-      <div>
-        <div className={`snackbar ${position} ${funcss} ${flat ? "flat" : ""}`} style={{ animation: ` ${duration}s ${animation}` }}>
-          <div className="snackbar-content">
-            <div className="snackbar-body">
-              {message}
-            </div>
-            {
-              close && 
-              <div>
-              <span className="close-snackbar">
-                <span>{close}</span>
-              </span>
-            </div>
-            }
+const SnackBar: React.FC<SnackbarProps> = ({
+  message,
+  close,
+  open,
+  setOpen,
+  position,
+  funcss,
+  animation,
+  duration = 0.3,
+  autoHide = false,
+  autoHideDuration = 3000,
+  flat,
+}) => {
+  React.useEffect(() => {
+    if (open && autoHide) {
+      const timer = setTimeout(() => {
+        setOpen(false);
+      }, autoHideDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, autoHide, autoHideDuration, setOpen]);
+
+  if (!open) return null;
+
+  return (
+    <div className={`snackbar ${position} ${funcss || ''} ${flat ? 'flat' : ''}`} style={{ animation: `${duration}s ${animation || 'SlideUp'}` }}>
+      <div className="snackbar-content">
+        <div className="snackbar-body">{message}</div>
+        {close && (
+          <div className="close-snackbar pointer" onClick={() =>setOpen ? setOpen(false) : null}>
+            {close}
           </div>
-        </div>
+        )}
       </div>
-    );
-  } else {
-    return <div></div>;
-  }
+    </div>
+  );
 };
 
 export default SnackBar;

package/ui/specials/Circle.js

@@ -48,7 +48,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var size = _a.size, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick"]);
+    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick"]);
     return (React.createElement("div", __assign({ className: "pointer avatar ".concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || '', " ").concat(hoverable ? 'hoverable' : ''), style: {
             width: "".concat(size + "rem" || '2.3rem'),
             height: "".concat(size + "rem" || '2.3rem'),

package/ui/specials/Circle.tsx

@@ -17,7 +17,7 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
   
 
 export default function Circle({
-  size,
+  size = 2,
   funcss,
   bg,
   color,