@versini/ui-panel 5.0.0 → 5.2.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 (2) hide show
  1. package/dist/index.js +37 -30
  2. package/package.json +2 -4
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-panel v5.0.0
2
+ @versini/ui-panel v5.2.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: "5.0.0",
9
- buildTime: "12/04/2025 04:01 PM EST",
8
+ version: "5.2.0",
9
+ buildTime: "12/07/2025 05:46 PM EST",
10
10
  homepage: "https://github.com/aversini/ui-components",
11
11
  license: "MIT",
12
12
  };
@@ -16,8 +16,6 @@ try {
16
16
  }
17
17
 
18
18
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
19
- import { ButtonIcon } from "@versini/ui-button/button-icon";
20
- import { IconClose } from "@versini/ui-icons";
21
19
  import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
22
20
  import clsx from "clsx";
23
21
  import { cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -28,10 +26,6 @@ const PANEL_CLASSNAME = "av-panel";
28
26
 
29
27
  ;// CONCATENATED MODULE: external "react/jsx-runtime"
30
28
 
31
- ;// CONCATENATED MODULE: external "@versini/ui-button/button-icon"
32
-
33
- ;// CONCATENATED MODULE: external "@versini/ui-icons"
34
-
35
29
  ;// CONCATENATED MODULE: external "@floating-ui/react"
36
30
 
37
31
  ;// CONCATENATED MODULE: external "clsx"
@@ -46,7 +40,7 @@ const PANEL_CLASSNAME = "av-panel";
46
40
  if (!window.__VERSINI_UI_MODAL__) {
47
41
  window.__VERSINI_UI_MODAL__ = {
48
42
  version: "3.1.1",
49
- buildTime: "12/04/2025 04:01 PM EST",
43
+ buildTime: "12/07/2025 05:46 PM EST",
50
44
  homepage: "https://github.com/aversini/ui-components",
51
45
  license: "MIT"
52
46
  };
@@ -222,7 +216,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
222
216
  "duration-200 ease-out": animation,
223
217
  /**
224
218
  * Panel styles
225
- */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: kind === TYPE_PANEL,
219
+ */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-3xl sm:border`]: kind === TYPE_PANEL,
226
220
  ["w-full sm:w-[95%] md:max-w-2xl"]: kind === TYPE_PANEL && !className && maxWidth === "small",
227
221
  ["w-full sm:w-[95%] md:max-w-3xl"]: kind === TYPE_PANEL && !className && maxWidth === "medium",
228
222
  ["w-full sm:w-[95%] md:max-w-4xl"]: kind === TYPE_PANEL && !className && maxWidth === "large",
@@ -233,7 +227,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
233
227
  "sm:border-border-accent": borderMode === "light" && kind === TYPE_PANEL,
234
228
  /**
235
229
  * Messagebox styles
236
- */ [`${MESSAGEBOX_CLASSNAME} rounded-lg border-2`]: kind === TYPE_MESSAGEBOX,
230
+ */ [`${MESSAGEBOX_CLASSNAME} rounded-3xl border`]: kind === TYPE_MESSAGEBOX,
237
231
  ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX && !className,
238
232
  "max-h-[20%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "small",
239
233
  "max-h-[50%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "medium",
@@ -242,22 +236,22 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
242
236
  "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
243
237
  [`${className}`]: !!className
244
238
  }),
245
- innerWrapper: "content flex flex-col overflow-y-auto",
239
+ innerWrapper: "content flex flex-col overflow-y-auto rounded-[inherit]",
246
240
  footer: clsx(getFooterAndHeaderCommonClasses({
247
241
  blurEffect
248
- }), "p-2 bottom-0", {
249
- "sm:rounded-b-md": kind === TYPE_PANEL,
250
- "rounded-b-md": kind === TYPE_MESSAGEBOX
242
+ }), "p-2 bottom-0 h-12", {
243
+ "sm:rounded-b-3xl": kind === TYPE_PANEL,
244
+ "rounded-b-3xl": kind === TYPE_MESSAGEBOX
251
245
  }),
252
- header: clsx("flex flex-row-reverse items-center justify-between", getFooterAndHeaderCommonClasses({
246
+ header: clsx("flex flex-row-reverse items-center justify-between h-12", getFooterAndHeaderCommonClasses({
253
247
  blurEffect
254
248
  }), "top-0", {
255
- "sm:rounded-t-md": kind === TYPE_PANEL,
256
- "rounded-t-md": kind === TYPE_MESSAGEBOX
249
+ "sm:rounded-t-3xl": kind === TYPE_PANEL,
250
+ "rounded-t-3xl": kind === TYPE_MESSAGEBOX
257
251
  }),
258
- title: "mb-0 p-2",
259
- close: "p-2",
260
- content: "py-2 px-2"
252
+ title: "mb-0 pt-2 pl-4 pr-2 pb-2",
253
+ close: "py-2 pr-4",
254
+ content: "p-4 rounded-3xl"
261
255
  };
262
256
  };
263
257
 
@@ -267,7 +261,6 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
267
261
 
268
262
 
269
263
 
270
-
271
264
  const ANIMATION_SLIDE = "slide";
272
265
  const ANIMATION_FADE = "fade";
273
266
  const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = TYPE_PANEL, className, animation = false, animationType = ANIMATION_SLIDE, maxWidth = "medium", maxHeight, blurEffect = "none" })=>{
@@ -347,13 +340,27 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
347
340
  children: [
348
341
  /*#__PURE__*/ jsx(Modal_ModalClose, {
349
342
  className: panelClassName.close,
350
- trigger: /*#__PURE__*/ jsx(ButtonIcon, {
351
- mode: "dark",
352
- focusMode: "light",
353
- noBorder: true,
354
- label: "Close",
355
- children: /*#__PURE__*/ jsx(IconClose, {
356
- monotone: true
343
+ trigger: /*#__PURE__*/ jsx("button", {
344
+ className: clsx("text-[#e06159]", "bg-[#e06159]", "rounded-full", "flex", "items-center", "justify-center", "size-4", "p-1", "border", "border-transparent", "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-light", "hover:text-copy-dark", "focus:text-copy-dark", "active:bg-[#ba504a]"),
345
+ type: "button",
346
+ "aria-label": "Close",
347
+ children: /*#__PURE__*/ jsx("div", {
348
+ className: "flex items-center justify-center relative size-full overflow-hidden",
349
+ children: /*#__PURE__*/ jsx("span", {
350
+ children: /*#__PURE__*/ jsx("svg", {
351
+ xmlns: "http://www.w3.org/2000/svg",
352
+ className: "size-5",
353
+ viewBox: "0 0 384 512",
354
+ fill: "currentColor",
355
+ role: "img",
356
+ "aria-hidden": "true",
357
+ focusable: "false",
358
+ children: /*#__PURE__*/ jsx("path", {
359
+ d: "M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256l132.5-132.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6z",
360
+ opacity: "1"
361
+ })
362
+ })
363
+ })
357
364
  })
358
365
  })
359
366
  }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-panel",
3
- "version": "5.0.0",
3
+ "version": "5.2.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -42,13 +42,11 @@
42
42
  },
43
43
  "dependencies": {
44
44
  "@tailwindcss/typography": "0.5.19",
45
- "@versini/ui-button": "9.0.0",
46
- "@versini/ui-icons": "4.15.1",
47
45
  "clsx": "2.1.1",
48
46
  "tailwindcss": "4.1.17"
49
47
  },
50
48
  "sideEffects": [
51
49
  "**/*.css"
52
50
  ],
53
- "gitHead": "bcc3eca77d4db14fb4b68356571588dcc209ea07"
51
+ "gitHead": "c84aecc27c66e86075640d46a100e8c5d798337d"
54
52
  }