@versini/ui-panel 3.5.0 → 4.0.0

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 
 export declare const MESSAGEBOX_CLASSNAME = "av-messagebox";
 
-export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, headerBlurEffect, footerBlurEffect, }: PanelProps) => JSX.Element;
+export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, blurEffect, }: PanelProps) => JSX.Element;
 
 export declare const PANEL_CLASSNAME = "av-panel";
 
@@ -65,15 +65,10 @@ declare type PanelProps = {
      */
     maxHeight?: "small" | "medium" | "large";
     /**
-     * The blur effect to apply to the header background.
+     * The blur effect to apply to the header and footer backgrounds.
      * @default "none"
      */
-    headerBlurEffect?: "none" | "light" | "heavy";
-    /**
-     * The blur effect to apply to the footer background.
-     * @default "none"
-     */
-    footerBlurEffect?: "none" | "light" | "heavy";
+    blurEffect?: "none" | "small" | "medium" | "large";
 };
 
 export { }

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v3.5.0
+  @versini/ui-panel v4.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PANEL__) {
     window.__VERSINI_UI_PANEL__ = {
-      version: "3.5.0",
-      buildTime: "11/28/2025 11:17 AM EST",
+      version: "4.0.0",
+      buildTime: "11/28/2025 01:51 PM EST",
       homepage: "https://github.com/aversini/ui-components",
       license: "MIT",
     };
@@ -46,7 +46,7 @@ const PANEL_CLASSNAME = "av-panel";
     if (!window.__VERSINI_UI_MODAL__) {
         window.__VERSINI_UI_MODAL__ = {
             version: "3.1.0",
-            buildTime: "11/28/2025 11:17 AM EST",
+            buildTime: "11/28/2025 01:51 PM EST",
             homepage: "https://github.com/aversini/ui-components",
             license: "MIT"
         };
@@ -206,7 +206,15 @@ const Modal_ModalClose = /*#__PURE__*/ forwardRef(function ModalClose(props, ref
 
 const TYPE_PANEL = "panel";
 const TYPE_MESSAGEBOX = "messagebox";
-const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = "medium", maxHeight, headerBlurEffect = "none", footerBlurEffect = "none" })=>{
+const getFooterAndHeaderCommonClasses = ({ blurEffect })=>{
+    return clsx("sticky z-10 backdrop-brightness-50", {
+        "backdrop-blur-sm": blurEffect === "small",
+        "backdrop-blur-md": blurEffect === "medium",
+        "backdrop-blur-lg": blurEffect === "large",
+        "bg-surface-darker": blurEffect === "none"
+    });
+};
+const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = "medium", maxHeight, blurEffect = "none" })=>{
     // Apply default maxHeight only for TYPE_PANEL to maintain backward compatibility
     const effectiveMaxHeight = maxHeight ?? (kind === TYPE_PANEL ? "large" : undefined);
     return {
@@ -235,15 +243,17 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
             [`${className}`]: !!className
         }),
         innerWrapper: "content flex flex-col overflow-y-auto",
-        footer: clsx("p-2 sticky bottom-0 z-10 rounded-b-md", {
-            "backdrop-blur-sm": footerBlurEffect === "light",
-            "backdrop-blur-lg": footerBlurEffect === "heavy",
-            "bg-surface-dark": footerBlurEffect === "none"
+        footer: clsx(getFooterAndHeaderCommonClasses({
+            blurEffect
+        }), "p-2 bottom-0", {
+            "sm:rounded-b-md": kind === TYPE_PANEL,
+            "rounded-b-md": kind === TYPE_MESSAGEBOX
         }),
-        header: clsx("flex flex-row-reverse items-center justify-between", "sticky top-0 z-10 rounded-t-md", {
-            "backdrop-blur-sm": headerBlurEffect === "light",
-            "backdrop-blur-lg": headerBlurEffect === "heavy",
-            "bg-surface-dark": headerBlurEffect === "none"
+        header: clsx("flex flex-row-reverse items-center justify-between", getFooterAndHeaderCommonClasses({
+            blurEffect
+        }), "top-0", {
+            "sm:rounded-t-md": kind === TYPE_PANEL,
+            "rounded-t-md": kind === TYPE_MESSAGEBOX
         }),
         title: "mb-0 p-2",
         close: "p-2",
@@ -260,7 +270,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
 
 const ANIMATION_SLIDE = "slide";
 const ANIMATION_FADE = "fade";
-const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = TYPE_PANEL, className, animation = false, animationType = ANIMATION_SLIDE, maxWidth = "medium", maxHeight, headerBlurEffect = "none", footerBlurEffect = "none" })=>{
+const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = TYPE_PANEL, className, animation = false, animationType = ANIMATION_SLIDE, maxWidth = "medium", maxHeight, blurEffect = "none" })=>{
     const originalTitleRef = useRef("");
     /* v8 ignore next 9 */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === ANIMATION_FADE ? {
         opacity: 0
@@ -274,8 +284,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         animation,
         maxWidth,
         maxHeight,
-        headerBlurEffect,
-        footerBlurEffect
+        blurEffect
     });
     /**
 	 * If the panel is opened, set the document

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "3.5.0",
+	"version": "4.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -50,5 +50,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "98a9f0ceb3137413647fcc722ed8d30f6a279a80"
+	"gitHead": "278b6a2454814292c7b6b61ddaeb1c769630082e"
 }