@versini/ui-panel 3.4.2 → 3.5.1

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, }: PanelProps) => JSX.Element;
+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_CLASSNAME = "av-panel";
 
@@ -64,6 +64,16 @@ declare type PanelProps = {
      * @default "large" (for panels only)
      */
     maxHeight?: "small" | "medium" | "large";
+    /**
+     * The blur effect to apply to the header background.
+     * @default "none"
+     */
+    headerBlurEffect?: "none" | "light" | "heavy";
+    /**
+     * The blur effect to apply to the footer background.
+     * @default "none"
+     */
+    footerBlurEffect?: "none" | "light" | "heavy";
 };
 
 export { }

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v3.4.2
+  @versini/ui-panel v3.5.1
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PANEL__) {
     window.__VERSINI_UI_PANEL__ = {
-      version: "3.4.2",
-      buildTime: "11/16/2025 05:48 PM EST",
+      version: "3.5.1",
+      buildTime: "11/28/2025 12:47 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/16/2025 05:48 PM EST",
+            buildTime: "11/28/2025 12:47 PM EST",
             homepage: "https://github.com/aversini/ui-components",
             license: "MIT"
         };
@@ -206,15 +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 })=>{
+const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = "medium", maxHeight, headerBlurEffect = "none", footerBlurEffect = "none" })=>{
     // Apply default maxHeight only for TYPE_PANEL to maintain backward compatibility
     const effectiveMaxHeight = maxHeight ?? (kind === TYPE_PANEL ? "large" : undefined);
     return {
-        main: clsx("prose prose-lighter flex flex-col bg-surface-dark", {
+        outerWrapper: clsx("main prose prose-lighter flex flex-col bg-surface-dark", {
             "duration-200 ease-out": animation,
             /**
-			 * Panel styles
-			 */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: kind === TYPE_PANEL,
+				 * Panel styles
+				 */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: kind === TYPE_PANEL,
             ["w-full sm:w-[95%] md:max-w-2xl"]: kind === TYPE_PANEL && !className && maxWidth === "small",
             ["w-full sm:w-[95%] md:max-w-3xl"]: kind === TYPE_PANEL && !className && maxWidth === "medium",
             ["w-full sm:w-[95%] md:max-w-4xl"]: kind === TYPE_PANEL && !className && maxWidth === "large",
@@ -224,8 +224,8 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
             "sm:border-border-dark": borderMode === "dark" && kind === TYPE_PANEL,
             "sm:border-border-accent": borderMode === "light" && kind === TYPE_PANEL,
             /**
-			 * Messagebox styles
-			 */ [`${MESSAGEBOX_CLASSNAME} rounded-lg border-2`]: kind === TYPE_MESSAGEBOX,
+				 * Messagebox styles
+				 */ [`${MESSAGEBOX_CLASSNAME} rounded-lg border-2`]: kind === TYPE_MESSAGEBOX,
             ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX && !className,
             "max-h-[20%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "small",
             "max-h-[50%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "medium",
@@ -234,10 +234,20 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
             "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
             [`${className}`]: !!className
         }),
-        content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
-        footer: "flex grow flex-col sm:p-4 p-2",
-        header: "sm:p-4 mb-0 p-2",
-        close: "sm:p-4 p-2"
+        innerWrapper: "content flex flex-col overflow-y-auto",
+        footer: clsx("p-2 sticky bottom-0 z-10 sm:rounded-b-md", "backdrop-brightness-50", {
+            "backdrop-blur-sm": footerBlurEffect === "light",
+            "backdrop-blur-lg": footerBlurEffect === "heavy",
+            "bg-surface-dark": footerBlurEffect === "none"
+        }),
+        header: clsx("flex flex-row-reverse items-center justify-between", "sticky top-0 z-10 sm:rounded-t-md", "backdrop-brightness-50", {
+            "backdrop-blur-sm": headerBlurEffect === "light",
+            "backdrop-blur-lg": headerBlurEffect === "heavy",
+            "bg-surface-dark": headerBlurEffect === "none"
+        }),
+        title: "mb-0 p-2",
+        close: "p-2",
+        content: "py-2 px-2"
     };
 };
 
@@ -250,7 +260,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 })=>{
+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 originalTitleRef = useRef("");
     /* v8 ignore next 9 */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === ANIMATION_FADE ? {
         opacity: 0
@@ -263,7 +273,9 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         borderMode,
         animation,
         maxWidth,
-        maxHeight
+        maxHeight,
+        headerBlurEffect,
+        footerBlurEffect
     });
     /**
 	 * If the panel is opened, set the document
@@ -315,40 +327,43 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         children: open && /*#__PURE__*/ jsx(Modal, {
             open: open,
             onOpenChange: onOpenChange,
-            children: /*#__PURE__*/ jsxs(Modal_ModalContent, {
-                className: panelClassName.main,
+            children: /*#__PURE__*/ jsx(Modal_ModalContent, {
+                className: panelClassName.outerWrapper,
                 style: animationStyles,
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex flex-row-reverse items-center justify-between",
-                        children: [
-                            /*#__PURE__*/ jsx(Modal_ModalClose, {
-                                className: panelClassName.close,
-                                trigger: /*#__PURE__*/ jsx(ButtonIcon, {
-                                    mode: "dark",
-                                    focusMode: "light",
-                                    noBorder: true,
-                                    label: "Close",
-                                    children: /*#__PURE__*/ jsx(IconClose, {
-                                        monotone: true
+                children: /*#__PURE__*/ jsxs(Modal_ModalDescription, {
+                    className: panelClassName.innerWrapper,
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: panelClassName.header,
+                            children: [
+                                /*#__PURE__*/ jsx(Modal_ModalClose, {
+                                    className: panelClassName.close,
+                                    trigger: /*#__PURE__*/ jsx(ButtonIcon, {
+                                        mode: "dark",
+                                        focusMode: "light",
+                                        noBorder: true,
+                                        label: "Close",
+                                        children: /*#__PURE__*/ jsx(IconClose, {
+                                            monotone: true
+                                        })
                                     })
+                                }),
+                                /*#__PURE__*/ jsx(Modal_ModalHeading, {
+                                    className: panelClassName.title,
+                                    children: title
                                 })
-                            }),
-                            /*#__PURE__*/ jsx(Modal_ModalHeading, {
-                                className: panelClassName.header,
-                                children: title
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Modal_ModalDescription, {
-                        className: panelClassName.content,
-                        children: children
-                    }),
-                    footer && /*#__PURE__*/ jsx("div", {
-                        className: panelClassName.footer,
-                        children: footer
-                    })
-                ]
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: panelClassName.content,
+                            children: children
+                        }),
+                        footer && /*#__PURE__*/ jsx("div", {
+                            className: panelClassName.footer,
+                            children: footer
+                        })
+                    ]
+                })
             })
         })
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "3.4.2",
+	"version": "3.5.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -50,5 +50,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1d0bedfa3a84ea7f2f41d347a59de518f92e4cea"
+	"gitHead": "ca6d7648786a5ed9f6f4880b0edb36beca9439a5"
 }