@versini/ui-panel 2.2.7 → 2.2.8

package/README.md

@@ -4,14 +4,29 @@
 
 > 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 +34,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 +44,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

@@ -506,13 +506,13 @@ const M = {
 );
 U.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v7.1.3
+  @versini/ui-button v7.1.4
   © 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.4",
+    buildTime: "08/23/2025 10:05 AM 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.8
   © 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.8",
+    buildTime: "08/23/2025 10:06 AM 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";
 /*!
-  @versini/ui-panel v2.2.7
+  @versini/ui-panel v2.2.8
   © 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.8",
+    buildTime: "08/23/2025 10:06 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

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