@versini/ui-panel 2.0.8 → 2.1.0

package/README.md

@@ -1,3 +1,46 @@
 # @versini/ui-panel
 
-A simple panel component for React.
+[![npm version](https://img.shields.io/npm/v/@versini/ui-panel?style=flat-square)](https://www.npmjs.com/package/@versini/ui-panel)
+
+> An accessible React slide-out panel component built with TypeScript and TailwindCSS.
+
+The Panel component provides slide-out panels and drawers with focus management, keyboard navigation, and customizable positioning.
+
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+
+## Installation
+
+```bash
+npm install @versini/ui-panel
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
+
+## Usage
+
+```tsx
+import { Panel } from "@versini/ui-panel";
+import { useState } from "react";
+
+function App() {
+  const [open, setOpen] = useState(false);
+  
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Panel</button>
+      <Panel
+        title="Panel Title"
+        open={open}
+        onOpenChange={setOpen}
+      >
+        Panel content goes here.
+      </Panel>
+    </>
+  );
+}
+```

package/dist/components/Panel/Panel.js

@@ -1,9 +1,9 @@
 import { jsx as l, jsxs as T, Fragment as J } from "react/jsx-runtime";
 import * as f from "react";
-import z, { useRef as I, useLayoutEffect as G, useEffect as B, useState as K, useMemo as Q, useCallback as ue, useId as Z } from "react";
+import $, { useRef as I, useLayoutEffect as G, useEffect as B, useState as K, useMemo as Q, useCallback as ue, useId as Z } from "react";
 import n from "clsx";
 import { useFloating as me, useClick as ge, useDismiss as he, useRole as fe, useInteractions as be, useMergeRefs as ve, FloatingPortal as ye, FloatingOverlay as pe, FloatingFocusManager as ke } from "@floating-ui/react";
-const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "button", $ = "link", xe = ({
+const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "button", z = "link", xe = ({
   type: e,
   size: t,
   labelRight: r,
@@ -14,7 +14,7 @@ const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "bu
   const c = "max-h-8 py-0 px-2", u = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
   switch (e) {
     case ee:
-    case $:
+    case z:
       return n({
         [c]: t === "small",
         [u]: t === "medium",
@@ -48,9 +48,9 @@ const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "bu
   const o = "text-sm font-medium", i = "text-base font-medium", c = "text-lg font-medium";
   switch (e) {
     case ee:
-    case $:
+    case z:
       return n({
-        "text-center": e === $,
+        "text-center": e === z,
         [o]: t === "small",
         [i]: t === "medium",
         [c]: t === "large"
@@ -297,9 +297,8 @@ const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "bu
   }),
   t
 )), Le = (e, t, r) => {
-  var a;
-  !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
-}, re = z.forwardRef((e, t) => {
+  !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
+}, re = $.forwardRef((e, t) => {
   const { onClick: r, noInternalClick: a = !1, ...o } = e;
   return /* @__PURE__ */ l(
     "button",
@@ -313,13 +312,13 @@ const Y = "av-messagebox", H = "av-panel", W = "av-button", F = "icon", ee = "bu
   );
 });
 re.displayName = "BaseButton";
-function Oe() {
+function Ae() {
   const e = I(!1);
   return B(() => (e.current = !0, () => {
     e.current = !1;
   }), []), ue(() => e.current, []);
 }
-function Ae(e) {
+function Oe(e) {
   return Q(() => e.every((t) => t == null) ? () => {
   } : (t) => {
     e.forEach((r) => {
@@ -327,7 +326,7 @@ function Ae(e) {
     });
   }, [...e]);
 }
-const Pe = {
+const De = {
   x: 0,
   y: 0,
   width: 0,
@@ -337,15 +336,15 @@ const Pe = {
   bottom: 0,
   right: 0
 };
-function D(e) {
-  const t = Oe(), r = I(0), a = I(null), [o, i] = K(Pe), c = Q(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
+function P(e) {
+  const t = Ae(), r = I(0), a = I(null), [o, i] = K(De), c = Q(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
     const s = u[0];
     s && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
       a.current && t() && i(s.contentRect);
     }));
   }), [t]);
-  return B(() => (a.current && (c == null || c.observe(a.current, e)), () => {
-    c == null || c.disconnect(), r.current && cancelAnimationFrame(r.current);
+  return B(() => (a.current && c?.observe(a.current, e), () => {
+    c?.disconnect(), r.current && cancelAnimationFrame(r.current);
   }), [c, e]), [a, o];
 }
 const R = {
@@ -355,14 +354,14 @@ const R = {
   // w-8
   large: 48
   // w-12
-}, De = {
-  small: 8 * 2,
+}, Pe = {
+  small: 16,
   // px-2 x 2
-  medium: 12 * 2,
+  medium: 24,
   // px-3 x 2
-  large: 16 * 2
+  large: 32
   // px-4 x 2
-}, $e = 2, ze = 300, V = z.forwardRef(
+}, ze = 2, $e = 300, V = $.forwardRef(
   ({
     children: e,
     disabled: t = !1,
@@ -403,21 +402,21 @@ const R = {
       radius: w,
       variant: ae,
       animated: p
-    }), ce = Re({ mode: r, raw: u, iconClassName: ie }), U = Me({ animated: p }), se = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, O] = D(), [y, A] = D(), [S, j] = D(), P = I(0), k = I(null), _ = I(null), de = Ae([ne, k]);
+    }), ce = Re({ mode: r, raw: u, iconClassName: ie }), U = Me({ animated: p }), se = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, A] = P(), [y, O] = P(), [S, j] = P(), D = I(0), k = I(null), _ = I(null), de = Oe([ne, k]);
     return G(() => {
-      S && S.current && p && (P.current = j.width + De[m] + (s ? 0 : $e), k.current && !k.current.style.width && (k.current.style.width = `${R[m]}px`));
+      S && S.current && p && (D.current = j.width + Pe[m] + (s ? 0 : ze), k.current && !k.current.style.width && (k.current.style.width = `${R[m]}px`));
     }, [j, S, m, s, p]), G(() => {
       if (k && k.current && p) {
         let N = R[m];
-        d && v && O.width > 0 ? N = O.width + P.current : h && y && A.width > 0 && (N = A.width + P.current), _.current && clearTimeout(_.current), N !== parseInt(k.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${N}px`, N > R[m] && (_.current = setTimeout(() => {
+        d && v && A.width > 0 ? N = A.width + D.current : h && y && O.width > 0 && (N = O.width + D.current), _.current && clearTimeout(_.current), N !== parseInt(k.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${N}px`, N > R[m] && (_.current = setTimeout(() => {
           v.current && d && (v.current.style.opacity = "1"), y.current && h && (y.current.style.opacity = "1"), _.current = null;
-        }, ze * 0.8))), N === R[m] && (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"));
+        }, $e * 0.8))), N === R[m] && (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"));
       }
     }, [
-      O,
+      A,
       d,
       v,
-      A,
+      O,
       h,
       y,
       m,
@@ -476,19 +475,19 @@ const R = {
 );
 V.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v6.0.8
+  @versini/ui-button v6.0.9
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "6.0.8",
-    buildTime: "06/28/2025 08:58 PM EDT",
+    version: "6.0.9",
+    buildTime: "08/04/2025 04:16 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Fe = z.forwardRef(
+const Fe = $.forwardRef(
   ({
     children: e,
     mode: t = "system",
@@ -688,7 +687,7 @@ const Ye = f.forwardRef(function(e, t) {
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
     version: "2.0.5",
-    buildTime: "06/28/2025 08:58 PM EDT",
+    buildTime: "08/04/2025 04:16 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -703,7 +702,7 @@ const C = "panel", M = "messagebox", Xe = ({
   main: n("prose prose-lighter flex flex-col bg-surface-medium", {
     "duration-200 ease-out": a,
     [`${H} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === C,
-    [`${H} w-full sm:w-[95%] md:max-w-2xl`]: t === C && !e,
+    [`${H} w-full sm:w-[95%] md:max-w-4xl`]: t === C && !e,
     [`${Y} rounded-lg border-2`]: t === M,
     [`${Y} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === M && !e,
     [`${e}`]: !!e,

package/dist/index.js

@@ -1,12 +1,12 @@
-import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as n } from "./components/Panel/Panel.js";
+import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as A } from "./components/Panel/Panel.js";
 /*!
-  @versini/ui-panel v2.0.8
+  @versini/ui-panel v2.1.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "2.0.8",
-    buildTime: "06/28/2025 08:58 PM EDT",
+    version: "2.1.0",
+    buildTime: "08/04/2025 04:16 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -15,5 +15,5 @@ try {
 export {
   o as MESSAGEBOX_CLASSNAME,
   E as PANEL_CLASSNAME,
-  n as Panel
+  A as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "2.0.8",
+	"version": "2.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -27,6 +27,7 @@
 		"dev:types": "tsup --watch src",
 		"dev": "npm-run-all clean --parallel dev:js dev:types",
 		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
@@ -38,9 +39,12 @@
 		"react": "^18.3.1 || ^19.0.0",
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "6.6.3"
+	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "6.0.8",
+		"@versini/ui-button": "6.0.9",
 		"@versini/ui-icons": "4.10.0",
 		"@versini/ui-modal": "2.0.5",
 		"clsx": "2.1.1",
@@ -49,5 +53,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1b9a792d10e1f67fc7af7cfdff718ef1e1c78633"
+	"gitHead": "01e4f01a0a5bc280c14a3dfa5728db1012792c6f"
 }