@versini/ui-panel 2.2.7 → 2.2.9

package/README.md

@@ -1,17 +1,33 @@
 # @versini/ui-panel
 
 [![npm version](https://img.shields.io/npm/v/@versini/ui-panel?style=flat-square)](https://www.npmjs.com/package/@versini/ui-panel)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-panel?style=flat-square&label=size%20(gzip)>)
 
 > 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.
-
+The Panel component provides slide-out panels and drawers with focus management, keyboard navigation, document title management, optional animations, and customizable positioning / sizing.
 
 ## Table of Contents
 
+- [Table of Contents](#table-of-contents)
 - [Features](#features)
 - [Installation](#installation)
 - [Usage](#usage)
+- [Examples](#examples)
+  - [Message Box Variant](#message-box-variant)
+  - [Animated Panel (Fade)](#animated-panel-fade)
+- [API](#api)
+  - [Panel Props](#panel-props)
+
+## Features
+
+- **🪟 Versatile Layouts**: Standard panel and message box variants (`kind` prop)
+- **🎯 Focus Management**: Uses underlying modal primitives for proper focus trapping & return
+- **♿ Accessible**: ARIA compliant structure with heading, description, close control
+- **🎬 Optional Animations**: Slide or fade entrance animations (`animation` / `animationType`)
+- **📐 Responsive Sizing**: Predefined max widths (`small`, `medium`, `large`) above md breakpoint
+- **🧩 Composable**: Footer slot for actions / extra content
+- **🧪 Type Safe**: Fully typed props with inline documentation
 
 ## Installation
 
@@ -19,7 +35,7 @@ The Panel component provides slide-out panels and drawers with focus management,
 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.
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
 
 ## Usage
 
@@ -29,18 +45,87 @@ 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>
+    </>
+  );
+}
+```
+
+## Examples
+
+### Message Box Variant
+
+```tsx
+import { Panel } from "@versini/ui-panel";
+import { useState } from "react";
+
+function MessageBoxExample() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Show Message</button>
       <Panel
-        title="Panel Title"
+        kind="messagebox"
+        title="Session Expired"
         open={open}
         onOpenChange={setOpen}
+        footer={
+          <div className="flex justify-end gap-2">
+            <button
+              className="px-3 py-1 rounded bg-surface-lighter"
+              onClick={() => setOpen(false)}
+            >
+              Dismiss
+            </button>
+            <button className="px-3 py-1 rounded bg-blue-600 text-white">
+              Re‑authenticate
+            </button>
+          </div>
+        }
       >
-        Panel content goes here.
+        Your session has expired. Please sign in again to continue.
       </Panel>
     </>
   );
 }
 ```
+
+### Animated Panel (Fade)
+
+```tsx
+<Panel
+  title="Animated Panel"
+  open={open}
+  onOpenChange={setOpen}
+  animation
+  animationType="fade"
+>
+  Content with fade animation.
+</Panel>
+```
+
+## API
+
+### Panel Props
+
+| Prop            | Type                      | Default       | Description                                                            |
+| --------------- | ------------------------- | ------------- | ---------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| `open`          | `boolean`                 | -             | Whether the panel is open.                                             |
+| `onOpenChange`  | `(open: boolean) => void` | -             | Callback fired when open state changes.                                |
+| `title`         | `string`                  | -             | Title displayed in the header (also used to augment `document.title`). |
+| `children`      | `React.ReactNode`         | -             | Main content of the panel.                                             |
+| `footer`        | `React.ReactNode`         | -             | Optional footer content (actions, etc.).                               |
+| `className`     | `string`                  | -             | Extra classes applied to width wrapper (overrides default width).      |
+| `borderMode`    | `"dark"                   | "light"`      | `"light"`                                                              | Visual style of border / surface.                |
+| `kind`          | `"panel"                  | "messagebox"` | `"panel"`                                                              | Layout variant.                                  |
+| `animation`     | `boolean`                 | `false`       | Enable entrance animation.                                             |
+| `animationType` | `"slide"                  | "fade"`       | `"slide"`                                                              | Animation style (only when `animation` is true). |
+| `maxWidth`      | `"small"                  | "medium"      | "large"`                                                               | `"medium"`                                       | Max width applied (≥ md breakpoint) for `kind="panel"`. |
+
+> Also inherits any valid props for the underlying modal primitives where relevant.

package/dist/components/Panel/Panel.js

@@ -349,7 +349,7 @@ function $e() {
     e.current = !1;
   }), []), me(() => e.current, []);
 }
-function Ae(e) {
+function Oe(e) {
   return Z(() => e.every((r) => r == null) ? () => {
   } : (r) => {
     e.forEach((t) => {
@@ -357,7 +357,7 @@ function Ae(e) {
     });
   }, [...e]);
 }
-const Oe = {
+const Ae = {
   x: 0,
   y: 0,
   width: 0,
@@ -367,8 +367,8 @@ const Oe = {
   bottom: 0,
   right: 0
 };
-function P(e) {
-  const r = $e(), t = N(0), a = N(null), [i, o] = Q(Oe), s = Z(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+function z(e) {
+  const r = $e(), t = N(0), a = N(null), [i, o] = Q(Ae), s = Z(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
     const c = d[0];
     c && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
       a.current && r() && o(c.contentRect);
@@ -385,14 +385,14 @@ const M = {
   // w-8
   large: 48
   // w-12
-}, ze = {
+}, Pe = {
   small: 16,
   // px-2 x 2
   medium: 24,
   // px-3 x 2
   large: 32
   // px-4 x 2
-}, Pe = 2, De = 300, U = F.forwardRef(
+}, ze = 2, De = 300, U = F.forwardRef(
   ({
     children: e,
     disabled: r = !1,
@@ -433,21 +433,21 @@ const M = {
       radius: I,
       variant: j,
       animated: k
-    }), se = Re({ mode: t, raw: d, iconClassName: ie, variant: j }), G = Me({ animated: k }), ce = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, A] = P(), [p, O] = P(), [S, Y] = P(), z = N(0), x = N(null), E = N(null), de = Ae([ne, x]);
+    }), se = Re({ mode: t, raw: d, iconClassName: ie, variant: j }), G = Me({ animated: k }), ce = "flex items-center justify-center relative w-full h-full overflow-hidden", [v, O] = z(), [p, A] = z(), [S, Y] = z(), P = N(0), x = N(null), E = N(null), de = Oe([ne, x]);
     return H(() => {
-      S && S.current && k && (z.current = Y.width + ze[m] + (c ? 0 : Pe), x.current && !x.current.style.width && (x.current.style.width = `${M[m]}px`));
+      S && S.current && k && (P.current = Y.width + Pe[m] + (c ? 0 : ze), x.current && !x.current.style.width && (x.current.style.width = `${M[m]}px`));
     }, [Y, S, m, c, k]), H(() => {
       if (x && x.current && k) {
         let C = M[m];
-        u && v && A.width > 0 ? C = A.width + z.current : f && p && O.width > 0 && (C = O.width + z.current), E.current && clearTimeout(E.current), C !== parseInt(x.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), x.current.style.width = `${C}px`, C > M[m] && (E.current = setTimeout(() => {
+        u && v && O.width > 0 ? C = O.width + P.current : f && p && A.width > 0 && (C = A.width + P.current), E.current && clearTimeout(E.current), C !== parseInt(x.current.style.width || "0", 10) && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), x.current.style.width = `${C}px`, C > M[m] && (E.current = setTimeout(() => {
           v.current && u && (v.current.style.opacity = "1"), p.current && f && (p.current.style.opacity = "1"), E.current = null;
         }, De * 0.8))), C === M[m] && (v.current && (v.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"));
       }
     }, [
-      A,
+      O,
       u,
       v,
-      O,
+      A,
       f,
       p,
       m,
@@ -506,13 +506,13 @@ const M = {
 );
 U.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v7.1.3
+  @versini/ui-button v7.1.5
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "7.1.3",
-    buildTime: "08/23/2025 09:08 AM EDT",
+    version: "7.1.5",
+    buildTime: "08/23/2025 12:21 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -714,13 +714,13 @@ const Ye = h.forwardRef(function(e, r) {
   }) });
 });
 /*!
-  @versini/ui-modal v2.0.7
+  @versini/ui-modal v2.0.9
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
-    version: "2.0.7",
-    buildTime: "08/23/2025 09:08 AM EDT",
+    version: "2.0.9",
+    buildTime: "08/23/2025 12:22 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/dist/index.js

@@ -1,12 +1,12 @@
-import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as A } from "./components/Panel/Panel.js";
+import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as n } from "./components/Panel/Panel.js";
 /*!
-  @versini/ui-panel v2.2.7
+  @versini/ui-panel v2.2.9
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "2.2.7",
-    buildTime: "08/23/2025 09:09 AM EDT",
+    version: "2.2.9",
+    buildTime: "08/23/2025 12:22 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -15,5 +15,5 @@ try {
 export {
   o as MESSAGEBOX_CLASSNAME,
   E as PANEL_CLASSNAME,
-  A as Panel
+  n as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "2.2.7",
+	"version": "2.2.9",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -54,5 +54,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7bbfa99a4441ef5b0828a37d190f694e199b663d"
+	"gitHead": "d568e20474c6c87f836c4cb6548f2cc0143a353c"
 }