@versini/ui-panel 3.4.2 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.d.ts +11 -1
  2. package/dist/index.js +62 -47
  3. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
2
2
 
3
3
  export declare const MESSAGEBOX_CLASSNAME = "av-messagebox";
4
4
 
5
- export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, }: PanelProps) => JSX.Element;
5
+ export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, headerBlurEffect, footerBlurEffect, }: PanelProps) => JSX.Element;
6
6
 
7
7
  export declare const PANEL_CLASSNAME = "av-panel";
8
8
 
@@ -64,6 +64,16 @@ declare type PanelProps = {
64
64
  * @default "large" (for panels only)
65
65
  */
66
66
  maxHeight?: "small" | "medium" | "large";
67
+ /**
68
+ * The blur effect to apply to the header background.
69
+ * @default "none"
70
+ */
71
+ headerBlurEffect?: "none" | "light" | "heavy";
72
+ /**
73
+ * The blur effect to apply to the footer background.
74
+ * @default "none"
75
+ */
76
+ footerBlurEffect?: "none" | "light" | "heavy";
67
77
  };
68
78
 
69
79
  export { }
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-panel v3.4.2
2
+ @versini/ui-panel v3.5.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_PANEL__) {
7
7
  window.__VERSINI_UI_PANEL__ = {
8
- version: "3.4.2",
9
- buildTime: "11/16/2025 05:48 PM EST",
8
+ version: "3.5.0",
9
+ buildTime: "11/28/2025 11:17 AM EST",
10
10
  homepage: "https://github.com/aversini/ui-components",
11
11
  license: "MIT",
12
12
  };
@@ -46,7 +46,7 @@ const PANEL_CLASSNAME = "av-panel";
46
46
  if (!window.__VERSINI_UI_MODAL__) {
47
47
  window.__VERSINI_UI_MODAL__ = {
48
48
  version: "3.1.0",
49
- buildTime: "11/16/2025 05:48 PM EST",
49
+ buildTime: "11/28/2025 11:17 AM EST",
50
50
  homepage: "https://github.com/aversini/ui-components",
51
51
  license: "MIT"
52
52
  };
@@ -206,15 +206,15 @@ const Modal_ModalClose = /*#__PURE__*/ forwardRef(function ModalClose(props, ref
206
206
 
207
207
  const TYPE_PANEL = "panel";
208
208
  const TYPE_MESSAGEBOX = "messagebox";
209
- const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = "medium", maxHeight })=>{
209
+ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = "medium", maxHeight, headerBlurEffect = "none", footerBlurEffect = "none" })=>{
210
210
  // Apply default maxHeight only for TYPE_PANEL to maintain backward compatibility
211
211
  const effectiveMaxHeight = maxHeight ?? (kind === TYPE_PANEL ? "large" : undefined);
212
212
  return {
213
- main: clsx("prose prose-lighter flex flex-col bg-surface-dark", {
213
+ outerWrapper: clsx("main prose prose-lighter flex flex-col bg-surface-dark", {
214
214
  "duration-200 ease-out": animation,
215
215
  /**
216
- * Panel styles
217
- */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: kind === TYPE_PANEL,
216
+ * Panel styles
217
+ */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: kind === TYPE_PANEL,
218
218
  ["w-full sm:w-[95%] md:max-w-2xl"]: kind === TYPE_PANEL && !className && maxWidth === "small",
219
219
  ["w-full sm:w-[95%] md:max-w-3xl"]: kind === TYPE_PANEL && !className && maxWidth === "medium",
220
220
  ["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 =
224
224
  "sm:border-border-dark": borderMode === "dark" && kind === TYPE_PANEL,
225
225
  "sm:border-border-accent": borderMode === "light" && kind === TYPE_PANEL,
226
226
  /**
227
- * Messagebox styles
228
- */ [`${MESSAGEBOX_CLASSNAME} rounded-lg border-2`]: kind === TYPE_MESSAGEBOX,
227
+ * Messagebox styles
228
+ */ [`${MESSAGEBOX_CLASSNAME} rounded-lg border-2`]: kind === TYPE_MESSAGEBOX,
229
229
  ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX && !className,
230
230
  "max-h-[20%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "small",
231
231
  "max-h-[50%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "medium",
@@ -234,10 +234,20 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
234
234
  "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
235
235
  [`${className}`]: !!className
236
236
  }),
237
- content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
238
- footer: "flex grow flex-col sm:p-4 p-2",
239
- header: "sm:p-4 mb-0 p-2",
240
- close: "sm:p-4 p-2"
237
+ innerWrapper: "content flex flex-col overflow-y-auto",
238
+ footer: clsx("p-2 sticky bottom-0 z-10 rounded-b-md", {
239
+ "backdrop-blur-sm": footerBlurEffect === "light",
240
+ "backdrop-blur-lg": footerBlurEffect === "heavy",
241
+ "bg-surface-dark": footerBlurEffect === "none"
242
+ }),
243
+ header: clsx("flex flex-row-reverse items-center justify-between", "sticky top-0 z-10 rounded-t-md", {
244
+ "backdrop-blur-sm": headerBlurEffect === "light",
245
+ "backdrop-blur-lg": headerBlurEffect === "heavy",
246
+ "bg-surface-dark": headerBlurEffect === "none"
247
+ }),
248
+ title: "mb-0 p-2",
249
+ close: "p-2",
250
+ content: "py-2 px-2"
241
251
  };
242
252
  };
243
253
 
@@ -250,7 +260,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
250
260
 
251
261
  const ANIMATION_SLIDE = "slide";
252
262
  const ANIMATION_FADE = "fade";
253
- const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = TYPE_PANEL, className, animation = false, animationType = ANIMATION_SLIDE, maxWidth = "medium", maxHeight })=>{
263
+ 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" })=>{
254
264
  const originalTitleRef = useRef("");
255
265
  /* v8 ignore next 9 */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === ANIMATION_FADE ? {
256
266
  opacity: 0
@@ -263,7 +273,9 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
263
273
  borderMode,
264
274
  animation,
265
275
  maxWidth,
266
- maxHeight
276
+ maxHeight,
277
+ headerBlurEffect,
278
+ footerBlurEffect
267
279
  });
268
280
  /**
269
281
  * If the panel is opened, set the document
@@ -315,40 +327,43 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
315
327
  children: open && /*#__PURE__*/ jsx(Modal, {
316
328
  open: open,
317
329
  onOpenChange: onOpenChange,
318
- children: /*#__PURE__*/ jsxs(Modal_ModalContent, {
319
- className: panelClassName.main,
330
+ children: /*#__PURE__*/ jsx(Modal_ModalContent, {
331
+ className: panelClassName.outerWrapper,
320
332
  style: animationStyles,
321
- children: [
322
- /*#__PURE__*/ jsxs("div", {
323
- className: "flex flex-row-reverse items-center justify-between",
324
- children: [
325
- /*#__PURE__*/ jsx(Modal_ModalClose, {
326
- className: panelClassName.close,
327
- trigger: /*#__PURE__*/ jsx(ButtonIcon, {
328
- mode: "dark",
329
- focusMode: "light",
330
- noBorder: true,
331
- label: "Close",
332
- children: /*#__PURE__*/ jsx(IconClose, {
333
- monotone: true
333
+ children: /*#__PURE__*/ jsxs(Modal_ModalDescription, {
334
+ className: panelClassName.innerWrapper,
335
+ children: [
336
+ /*#__PURE__*/ jsxs("div", {
337
+ className: panelClassName.header,
338
+ children: [
339
+ /*#__PURE__*/ jsx(Modal_ModalClose, {
340
+ className: panelClassName.close,
341
+ trigger: /*#__PURE__*/ jsx(ButtonIcon, {
342
+ mode: "dark",
343
+ focusMode: "light",
344
+ noBorder: true,
345
+ label: "Close",
346
+ children: /*#__PURE__*/ jsx(IconClose, {
347
+ monotone: true
348
+ })
334
349
  })
350
+ }),
351
+ /*#__PURE__*/ jsx(Modal_ModalHeading, {
352
+ className: panelClassName.title,
353
+ children: title
335
354
  })
336
- }),
337
- /*#__PURE__*/ jsx(Modal_ModalHeading, {
338
- className: panelClassName.header,
339
- children: title
340
- })
341
- ]
342
- }),
343
- /*#__PURE__*/ jsx(Modal_ModalDescription, {
344
- className: panelClassName.content,
345
- children: children
346
- }),
347
- footer && /*#__PURE__*/ jsx("div", {
348
- className: panelClassName.footer,
349
- children: footer
350
- })
351
- ]
355
+ ]
356
+ }),
357
+ /*#__PURE__*/ jsx("div", {
358
+ className: panelClassName.content,
359
+ children: children
360
+ }),
361
+ footer && /*#__PURE__*/ jsx("div", {
362
+ className: panelClassName.footer,
363
+ children: footer
364
+ })
365
+ ]
366
+ })
352
367
  })
353
368
  })
354
369
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-panel",
3
- "version": "3.4.2",
3
+ "version": "3.5.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -50,5 +50,5 @@
50
50
  "sideEffects": [
51
51
  "**/*.css"
52
52
  ],
53
- "gitHead": "1d0bedfa3a84ea7f2f41d347a59de518f92e4cea"
53
+ "gitHead": "98a9f0ceb3137413647fcc722ed8d30f6a279a80"
54
54
  }