@versini/ui-panel 10.2.0 → 11.0.1

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 (2) hide show
  1. package/dist/index.js +36 -36
  2. package/package.json +4 -6
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- @versini/ui-panel v10.2.0
2
+ @versini/ui-panel v11.0.1
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
@@ -211,36 +211,36 @@ function ModalClose({ ref, trigger, className, ...rest }) {
211
211
 
212
212
  const getFooterAndHeaderCommonClasses = ({ blurEffect })=>{
213
213
  return clsx("absolute left-0 right-0 z-20 backdrop-brightness-50", {
214
- "backdrop-blur-sm": blurEffect === /* inlined export .SMALL */ ("small"),
215
- "backdrop-blur-md": blurEffect === /* inlined export .MEDIUM */ ("medium"),
216
- "backdrop-blur-lg": blurEffect === /* inlined export .LARGE */ ("large"),
217
- "bg-surface-darker": blurEffect === /* inlined export .NONE */ ("none")
214
+ "backdrop-blur-sm": blurEffect === (/* inlined export .SMALL */"small"),
215
+ "backdrop-blur-md": blurEffect === (/* inlined export .MEDIUM */"medium"),
216
+ "backdrop-blur-lg": blurEffect === (/* inlined export .LARGE */"large"),
217
+ "bg-surface-darker": blurEffect === (/* inlined export .NONE */"none")
218
218
  });
219
219
  };
220
- const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), hasFooter })=>{
221
- const effectiveMaxHeight = maxHeight ?? (kind === /* inlined export .TYPE_PANEL */ ("panel") ? /* inlined export .LARGE */ ("large") : /* inlined export .SMALL */ ("small"));
220
+ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = (/* inlined export .MEDIUM */"medium"), maxHeight, blurEffect = (/* inlined export .NONE */"none"), hasFooter })=>{
221
+ const effectiveMaxHeight = maxHeight ?? (kind === (/* inlined export .TYPE_PANEL */"panel") ? (/* inlined export .LARGE */"large") : (/* inlined export .SMALL */"small"));
222
222
  return {
223
- outerWrapper: clsx("prose prose-lighter flex flex-col bg-surface-dark overflow-hidden", {
223
+ outerWrapper: clsx("plume plume-lighter flex flex-col bg-surface-dark overflow-hidden", {
224
224
  "duration-200 ease-out": animation,
225
225
  /**
226
226
  * Panel styles
227
- */ [`${PANEL_CLASSNAME} sm:rounded-3xl sm:border`]: kind === /* inlined export .TYPE_PANEL */ ("panel"),
227
+ */ [`${PANEL_CLASSNAME} sm:rounded-3xl sm:border`]: kind === (/* inlined export .TYPE_PANEL */"panel"),
228
228
  /**
229
229
  * Widths and max widths for Panel
230
- */ ["w-full sm:w-[95%] md:max-w-2xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && maxWidth === /* inlined export .SMALL */ ("small"),
231
- ["w-full sm:w-[95%] md:max-w-3xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && maxWidth === /* inlined export .MEDIUM */ ("medium"),
232
- ["w-full sm:w-[95%] md:max-w-4xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && maxWidth === /* inlined export .LARGE */ ("large"),
230
+ */ ["w-full sm:w-[95%] md:max-w-2xl"]: kind === (/* inlined export .TYPE_PANEL */"panel") && maxWidth === (/* inlined export .SMALL */"small"),
231
+ ["w-full sm:w-[95%] md:max-w-3xl"]: kind === (/* inlined export .TYPE_PANEL */"panel") && maxWidth === (/* inlined export .MEDIUM */"medium"),
232
+ ["w-full sm:w-[95%] md:max-w-4xl"]: kind === (/* inlined export .TYPE_PANEL */"panel") && maxWidth === (/* inlined export .LARGE */"large"),
233
233
  /**
234
234
  * Heights and max heights for Panel
235
235
  * Mobile: full viewport height, Desktop: clamp between min and max to allow flexible sizing
236
- */ "h-dvh sm:h-auto min-h-40 sm:max-h-[40dvh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
237
- "h-dvh sm:h-auto min-h-40 sm:max-h-[60dvh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
238
- "h-dvh sm:h-auto min-h-40 sm:max-h-[95dvh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
236
+ */ "h-dvh sm:h-auto min-h-40 sm:max-h-[40dvh]": kind === (/* inlined export .TYPE_PANEL */"panel") && effectiveMaxHeight === (/* inlined export .SMALL */"small"),
237
+ "h-dvh sm:h-auto min-h-40 sm:max-h-[60dvh]": kind === (/* inlined export .TYPE_PANEL */"panel") && effectiveMaxHeight === (/* inlined export .MEDIUM */"medium"),
238
+ "h-dvh sm:h-auto min-h-40 sm:max-h-[95dvh]": kind === (/* inlined export .TYPE_PANEL */"panel") && effectiveMaxHeight === (/* inlined export .LARGE */"large"),
239
239
  /**
240
240
  * Panel border colors
241
- */ "sm:border-border-dark": borderMode === "dark" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
242
- "sm:border-border-accent": borderMode === "light" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
243
- "sm:border-border-medium": borderMode === "medium" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
241
+ */ "sm:border-border-dark": borderMode === "dark" && kind === (/* inlined export .TYPE_PANEL */"panel"),
242
+ "sm:border-border-accent": borderMode === "light" && kind === (/* inlined export .TYPE_PANEL */"panel"),
243
+ "sm:border-border-medium": borderMode === "medium" && kind === (/* inlined export .TYPE_PANEL */"panel"),
244
244
  /**
245
245
  * Messagebox styles
246
246
  */ [`${MESSAGEBOX_CLASSNAME} rounded-3xl border`]: kind === TYPE_MESSAGEBOX,
@@ -249,9 +249,9 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
249
249
  */ ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX,
250
250
  /**
251
251
  * Heights and max heights for Messagebox
252
- */ "h-64": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
253
- "h-80": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
254
- "h-96": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
252
+ */ "h-64": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === (/* inlined export .SMALL */"small"),
253
+ "h-80": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === (/* inlined export .MEDIUM */"medium"),
254
+ "h-96": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === (/* inlined export .LARGE */"large"),
255
255
  /**
256
256
  * Messagebox border colors
257
257
  */ "border-border-dark": borderMode === "dark" && kind === TYPE_MESSAGEBOX,
@@ -265,16 +265,16 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
265
265
  footer: clsx(getFooterAndHeaderCommonClasses({
266
266
  blurEffect
267
267
  }), "bottom-0", "sm:min-h-auto h-12", {
268
- "px-2 pt-4 pb-8 sm:pt-2 sm:pb-2": kind === /* inlined export .TYPE_PANEL */ ("panel"),
268
+ "px-2 pt-4 pb-8 sm:pt-2 sm:pb-2": kind === (/* inlined export .TYPE_PANEL */"panel"),
269
269
  "p-2": kind === TYPE_MESSAGEBOX,
270
- "min-h-20": hasFooter && kind === /* inlined export .TYPE_PANEL */ ("panel"),
271
- "sm:rounded-b-3xl": kind === /* inlined export .TYPE_PANEL */ ("panel"),
270
+ "min-h-20": hasFooter && kind === (/* inlined export .TYPE_PANEL */"panel"),
271
+ "sm:rounded-b-3xl": kind === (/* inlined export .TYPE_PANEL */"panel"),
272
272
  "rounded-b-3xl": kind === TYPE_MESSAGEBOX
273
273
  }),
274
274
  header: clsx("flex flex-row-reverse items-center justify-between h-12", getFooterAndHeaderCommonClasses({
275
275
  blurEffect
276
276
  }), "top-0", {
277
- "sm:rounded-t-3xl": kind === /* inlined export .TYPE_PANEL */ ("panel"),
277
+ "sm:rounded-t-3xl": kind === (/* inlined export .TYPE_PANEL */"panel"),
278
278
  "rounded-t-3xl": kind === TYPE_MESSAGEBOX
279
279
  }),
280
280
  title: "mb-0 pt-2 pl-4 pr-2 pb-2",
@@ -290,9 +290,9 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
290
290
 
291
291
 
292
292
 
293
- const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = /* inlined export .TYPE_PANEL */ ("panel"), className, animation = false, animationType = /* inlined export .ANIMATION_SLIDE */ ("slide"), maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), initialFocus })=>{
293
+ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = (/* inlined export .TYPE_PANEL */"panel"), className, animation = false, animationType = (/* inlined export .ANIMATION_SLIDE */"slide"), maxWidth = (/* inlined export .MEDIUM */"medium"), maxHeight, blurEffect = (/* inlined export .NONE */"none"), initialFocus })=>{
294
294
  const originalTitleRef = useRef("");
295
- /* v8 ignore start */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
295
+ /* v8 ignore start */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === (/* inlined export .ANIMATION_FADE */"fade") ? {
296
296
  opacity: 0
297
297
  } : {
298
298
  transform: "translateY(-100vh)"
@@ -331,7 +331,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
331
331
  return;
332
332
  }
333
333
  if (open) {
334
- setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
334
+ setAnimationStyles(!animation ? {} : animationType === (/* inlined export .ANIMATION_FADE */"fade") ? {
335
335
  opacity: 0
336
336
  } : {
337
337
  transform: "translateY(-666vh)"
@@ -340,7 +340,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
340
340
  * Small delay to ensure the opening state is applied after the component is
341
341
  * rendered.
342
342
  */ const timer = setTimeout(()=>{
343
- setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
343
+ setAnimationStyles(!animation ? {} : animationType === (/* inlined export .ANIMATION_FADE */"fade") ? {
344
344
  opacity: 1
345
345
  } : {
346
346
  transform: "translateY(0)"
@@ -420,11 +420,11 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
420
420
 
421
421
 
422
422
 
423
- var components_ANIMATION_FADE = /* inlined export .ANIMATION_FADE */ ("fade");
424
- var components_ANIMATION_SLIDE = /* inlined export .ANIMATION_SLIDE */ ("slide");
425
- var components_LARGE = /* inlined export .LARGE */ ("large");
426
- var components_MEDIUM = /* inlined export .MEDIUM */ ("medium");
427
- var components_NONE = /* inlined export .NONE */ ("none");
428
- var components_SMALL = /* inlined export .SMALL */ ("small");
429
- var components_TYPE_PANEL = /* inlined export .TYPE_PANEL */ ("panel");
423
+ var components_ANIMATION_FADE = (/* inlined export .ANIMATION_FADE */"fade");
424
+ var components_ANIMATION_SLIDE = (/* inlined export .ANIMATION_SLIDE */"slide");
425
+ var components_LARGE = (/* inlined export .LARGE */"large");
426
+ var components_MEDIUM = (/* inlined export .MEDIUM */"medium");
427
+ var components_NONE = (/* inlined export .NONE */"none");
428
+ var components_SMALL = (/* inlined export .SMALL */"small");
429
+ var components_TYPE_PANEL = (/* inlined export .TYPE_PANEL */"panel");
430
430
  export { MESSAGEBOX_CLASSNAME, PANEL_CLASSNAME, Panel, TYPE_MESSAGEBOX, components_ANIMATION_FADE as ANIMATION_FADE, components_ANIMATION_SLIDE as ANIMATION_SLIDE, components_LARGE as LARGE, components_MEDIUM as MEDIUM, components_NONE as NONE, components_SMALL as SMALL, components_TYPE_PANEL as TYPE_PANEL };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-panel",
3
- "version": "10.2.0",
3
+ "version": "11.0.1",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -43,19 +43,17 @@
43
43
  },
44
44
  "devDependencies": {
45
45
  "@testing-library/jest-dom": "6.9.1",
46
- "@versini/ui-button": "11.4.0",
46
+ "@versini/ui-button": "12.0.0",
47
47
  "@versini/ui-system": "6.0.2",
48
48
  "@versini/ui-types": "8.3.0"
49
49
  },
50
50
  "dependencies": {
51
+ "@floating-ui/react": "^0.27.17",
51
52
  "clsx": "2.1.1",
52
53
  "tailwindcss": "4.1.18"
53
54
  },
54
- "peerDependencies": {
55
- "@floating-ui/react": "0.27.16"
56
- },
57
55
  "sideEffects": [
58
56
  "**/*.css"
59
57
  ],
60
- "gitHead": "6f0ba5933ab114566dc2065b20ca9ffb14c5aba4"
58
+ "gitHead": "5824810ee9b8114a24412d9610b52e142a1e975a"
61
59
  }