@versini/ui-dialog 8.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# @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, 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
+
+```bash
+npm install @versini/ui-panel
+```
+
+> **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
+
+```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>
+    </>
+  );
+}
+```
+
+## 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
+        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>
+        }
+      >
+        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"`.                                                                                   |
+| `initialFocus`  | `number \| React.RefObject<HTMLElement \| null>` | `0`        | Which element to initially focus when the Panel opens. Can be a tabbable index (0 = close button), a ref to an element, or -1 to disable. |
+
+> Also inherits any valid props for the underlying modal primitives where relevant.

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare const ANIMATION_FADE = "fade";
+
+export declare const ANIMATION_SLIDE = "slide";
+
+export declare const LARGE = "large";
+
+export declare const MEDIUM = "medium";
+
+export declare const MESSAGEBOX_CLASSNAME = "av-messagebox";
+
+export declare const NONE = "none";
+
+export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, blurEffect, initialFocus, }: PanelProps) => JSX.Element;
+
+export declare const PANEL_CLASSNAME = "av-panel";
+
+declare type PanelProps = {
+    /**
+     * Class name to apply to the Panel - this will ONLY override the default width styles.
+     */
+    className?: string;
+    /**
+     * The children to render.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback fired when the component is opened or closed.
+     * @param open whether or not the menu is open
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Whether or not to open the component..
+     * @default false
+     */
+    open: boolean;
+    /**
+     * The title to use for the panel.
+     */
+    title: string;
+    /**
+     * The type of Panel border.
+     */
+    borderMode?: "dark" | "light";
+    /**
+     * The content to render in the footer.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The type of Panel. This will change the layout of the Panel.
+     */
+    kind?: "panel" | "messagebox";
+    /**
+     * Whether or not to animate the opening and closing of the Panel.
+     */
+    animation?: boolean;
+    /**
+     * The type of animation to use when opening and closing the Panel.
+     * NOTE: This is only used when `animation` is set to `true`.
+     * @default "slide"
+     */
+    animationType?: "slide" | "fade";
+    /**
+     * The maximum width of the Panel when kind is "panel".
+     * NOTE: This does not affect messageboxes, which have a fixed width.
+     * @default "medium"
+     */
+    maxWidth?: "small" | "medium" | "large";
+    /**
+     * The maximum height of the Panel or Messagebox.
+     * @default large for Panel, small for Messagebox
+     */
+    maxHeight?: "small" | "medium" | "large";
+    /**
+     * The blur effect to apply to the header and footer backgrounds.
+     * @default "none"
+     */
+    blurEffect?: "none" | "small" | "medium" | "large";
+    /**
+     * Which element to initially focus when the Panel opens.
+     * Can be a number (tabbable index, 0 = first tabbable element which is
+     * the close button), a ref to an element, or -1 to disable initial focus.
+     * @default 0
+     */
+    initialFocus?: number | React.RefObject<HTMLElement | null>;
+};
+
+export declare const SMALL = "small";
+
+export declare const TYPE_MESSAGEBOX = "messagebox";
+
+export declare const TYPE_PANEL = "panel";
+
+export { }

package/dist/index.js

@@ -0,0 +1,705 @@
+/*!
+  @versini/ui-dialog v8.0.6
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_DIALOG__) {
+    window.__VERSINI_UI_DIALOG__ = {
+      version: "8.0.6",
+      buildTime: "12/18/2025 07:24 PM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-dialog",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import clsx from "clsx";
+import { createPortal } from "react-dom";
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const MESSAGEBOX_CLASSNAME = "av-messagebox";
+const PANEL_CLASSNAME = "av-panel";
+const TYPE_PANEL = "panel";
+const TYPE_MESSAGEBOX = "messagebox";
+const ANIMATION_SLIDE = "slide";
+const ANIMATION_FADE = "fade";
+const SMALL = "small";
+const MEDIUM = "medium";
+const LARGE = "large";
+const NONE = "none";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "react-dom"
+
+;// CONCATENATED MODULE: ./src/components/Panel/dialogStackManager.ts
+/**
+ * Dialog Stack Manager
+ *
+ * Implements the W3C WAI-ARIA APG pattern for managing nested modal dialogs.
+ * This module maintains a stack of open dialogs and coordinates focus event
+ * listeners between them.
+ *
+ * Key features:
+ * - Only the topmost dialog has active focus listeners
+ * - When a nested dialog opens, parent listeners are suspended
+ * - When a dialog closes, parent listeners are restored
+ * - Programmatic focus changes are flagged to prevent event interference
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
+ */ /**
+ * Stack of currently open dialogs. The last item is the topmost dialog.
+ */ const openDialogStack = [];
+/**
+ * Flag to ignore focus changes during programmatic focus operations.
+ * When true, focus event handlers should return early to prevent interference.
+ *
+ * This is critical for nested dialogs: when a child dialog closes and
+ * programmatically returns focus to its trigger element inside the parent,
+ * we don't want the parent's focusin handler to interfere.
+ */ let ignoreFocusChanges = false;
+/**
+ * Get whether focus changes should be ignored.
+ * Focus event handlers should check this and return early if true.
+ */ function shouldIgnoreFocusChanges() {
+    return ignoreFocusChanges;
+}
+/**
+ * Execute a function while ignoring focus change events.
+ * Use this when programmatically moving focus to prevent event handlers
+ * from interfering.
+ *
+ * @param fn - Function to execute (typically contains focus() calls)
+ */ function withIgnoredFocusChanges(fn) {
+    ignoreFocusChanges = true;
+    try {
+        fn();
+    } finally{
+        // Use setTimeout to ensure the flag stays true through any
+        // microtasks that might fire focus events
+        setTimeout(()=>{
+            ignoreFocusChanges = false;
+        }, 0);
+    }
+}
+/**
+ * Register a dialog in the stack when it opens.
+ * If there's a parent dialog, its listeners are suspended.
+ *
+ * @param entry - The dialog entry to register
+ */ function registerDialog(entry) {
+    // If there's already a dialog open, suspend its listeners
+    if (openDialogStack.length > 0) {
+        const currentTop = openDialogStack[openDialogStack.length - 1];
+        currentTop.removeListeners();
+    }
+    // Add the new dialog to the stack and activate its listeners
+    openDialogStack.push(entry);
+    entry.addListeners();
+}
+/**
+ * Unregister a dialog from the stack when it closes.
+ * If there's a parent dialog, its listeners are restored.
+ *
+ * @param dialogRef - Reference to the dialog element being closed
+ */ function unregisterDialog(dialogRef) {
+    const index = openDialogStack.findIndex((entry)=>entry.dialogRef === dialogRef);
+    /* c8 ignore next 3 - defensive check */ if (index === -1) {
+        return;
+    }
+    // Remove listeners from the dialog being closed
+    const [removedEntry] = openDialogStack.splice(index, 1);
+    removedEntry.removeListeners();
+    // If there's a parent dialog, restore its listeners
+    if (openDialogStack.length > 0) {
+        const newTop = openDialogStack[openDialogStack.length - 1];
+        newTop.addListeners();
+    }
+}
+/**
+ * Get the current number of open dialogs.
+ * Useful for debugging and testing.
+ */ function getOpenDialogCount() {
+    return openDialogStack.length;
+}
+/**
+ * Check if a given dialog is the topmost (current) dialog.
+ *
+ * @param dialogRef - Reference to the dialog element to check
+ */ function isTopmostDialog(dialogRef) {
+    if (openDialogStack.length === 0) {
+        return false;
+    }
+    return openDialogStack[openDialogStack.length - 1].dialogRef === dialogRef;
+}
+/**
+ * Reset the stack (for testing purposes only).
+ * @internal
+ */ function _resetStackForTesting() {
+    while(openDialogStack.length > 0){
+        openDialogStack.pop();
+    }
+    ignoreFocusChanges = false;
+}
+
+;// CONCATENATED MODULE: ./src/components/Panel/PanelPortal.tsx
+
+
+
+
+
+
+/**
+ * Selector for all focusable elements within a container. Based on W3C WAI-ARIA
+ * practices for dialog focus management.
+ */ const FOCUSABLE_SELECTOR = [
+    'a[href]:not([disabled]):not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"]):not([disabled])',
+    'audio[controls]:not([tabindex="-1"])',
+    'video[controls]:not([tabindex="-1"])',
+    'details:not([tabindex="-1"])'
+].join(", ");
+/**
+ * Portal component for rendering the Panel as a modal dialog using the native
+ * HTML <dialog> element with showModal(). This provides:
+ * - Native focus trapping (works correctly on iPad with physical keyboard)
+ * - Native ESC key handling via cancel event
+ * - Native backdrop via ::backdrop pseudo-element
+ * - Native inert background (no need for manual scroll lock)
+ * - Top layer rendering (no need for createPortal)
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ *
+ */ function PanelPortal({ open, onClose, children, className, style, title, initialFocus = 0, kind = /* inlined export .TYPE_PANEL */ ("panel") }) {
+    const labelId = useId();
+    const descriptionId = useId();
+    const dialogRef = useRef(null);
+    const previouslyFocusedRef = useRef(null);
+    /**
+	 * Get all focusable elements within the dialog. Excludes focus sentinel
+	 * elements used for circular focus trapping.
+	 */ const getFocusableElements = useCallback(()=>{
+        /* c8 ignore next 3 - defensive check, dialogRef is always set when open */ if (!dialogRef.current) {
+            return [];
+        }
+        const elements = dialogRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
+        return Array.from(elements).filter((el)=>el.offsetParent !== null && // Filter out hidden elements
+            !el.hasAttribute("data-focus-sentinel"));
+    }, []);
+    /**
+	 * Focus a specific element by index, or the element referenced by a ref.
+	 */ const focusElement = useCallback((target)=>{
+        if (typeof target === "number") {
+            if (target === -1) {
+                // -1 means don't focus anything.
+                return;
+            }
+            const focusableElements = getFocusableElements();
+            if (focusableElements.length > 0) {
+                const index = Math.min(target, focusableElements.length - 1);
+                focusableElements[index]?.focus();
+            }
+        } else if (target?.current) {
+            target.current.focus();
+        }
+    }, [
+        getFocusableElements
+    ]);
+    /**
+	 * Handle the native cancel event (fired when ESC is pressed). This replaces
+	 * the custom keydown handler since the native dialog handles ESC
+	 * automatically.
+	 */ const handleCancel = useCallback((event)=>{
+        // Prevent the default close behavior so we can control it via onClose.
+        event.preventDefault();
+        onClose();
+    }, [
+        onClose
+    ]);
+    /**
+	 * Handle Tab key to implement circular focus trapping. Native dialog focus
+	 * trapping may not be circular in all browsers, so we manually wrap focus from
+	 * last to first element (and vice versa). Uses document-level event listener
+	 * for better iPad physical keyboard support.
+	 *
+	 * IMPORTANT: On iPad Safari with a physical keyboard, the Tab key does not
+	 * automatically navigate between focusable elements. We must manually handle
+	 * ALL Tab key presses, not just wrapping cases.
+	 *
+	 */ const handleKeyDown = useCallback((event)=>{
+        if (event.key !== "Tab" || !dialogRef.current) {
+            return;
+        }
+        const focusableElements = getFocusableElements();
+        /* c8 ignore next 4 - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const activeElement = document.activeElement;
+        // Find the current index of the focused element.
+        const currentIndex = focusableElements.indexOf(activeElement);
+        /**
+			 * Always prevent default and manually handle focus navigation. This is
+			 * required for iPad Safari with physical keyboard, where Tab key doesn't
+			 * automatically navigate between focusable elements.
+			 */ event.preventDefault();
+        if (event.shiftKey) {
+            // Shift+Tab: move to previous element, wrap to last if on first.
+            if (activeElement === firstElement || currentIndex <= 0) {
+                lastElement?.focus();
+            } else {
+                focusableElements[currentIndex - 1]?.focus();
+            }
+        } else {
+            // Tab: move to next element, wrap to first if on last.
+            if (activeElement === lastElement || currentIndex >= focusableElements.length - 1) {
+                firstElement?.focus();
+            } else {
+                focusableElements[currentIndex + 1]?.focus();
+            }
+        }
+    }, [
+        getFocusableElements
+    ]);
+    /**
+	 * Handle focus events to ensure focus stays within the dialog. This catches
+	 * focus that escapes via Tab key on iPad Safari or other means.
+	 *
+	 * Uses the dialog stack manager's ignore flag to prevent interference during
+	 * programmatic focus operations (e.g., when a nested dialog closes and returns
+	 * focus to its trigger element).
+	 *
+	 */ /* v8 ignore next 20 - focus escape handling for iPad Safari, hard to test in jsdom */ const handleFocusIn = useCallback((event)=>{
+        // Ignore focus changes triggered by programmatic focus operations.
+        if (shouldIgnoreFocusChanges()) {
+            return;
+        }
+        if (!dialogRef.current || dialogRef.current.contains(event.target)) {
+            return;
+        }
+        // Focus escaped the dialog, bring it back.
+        const focusableElements = getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0]?.focus();
+        }
+    }, [
+        getFocusableElements
+    ]);
+    /**
+	 * Handle clicks on the backdrop (the area outside the dialog content). Native
+	 * dialog doesn't provide backdrop click handling, so we use the dialog
+	 * element's click event and check if the click target is the dialog itself
+	 * (not a child element).
+	 */ /* v8 ignore next 9 - backdrop clicks are disabled by design in current implementation */ const handleDialogClick = useCallback((_event)=>{
+    /**
+			 * If the click is directly on the dialog element (the backdrop area), not on
+			 * any child element, then close the dialog. Currently disabled -
+			 * outsidePress is false by design. if (_event.target === dialogRef.current)
+			 * { onClose(); }
+			 */ }, []);
+    /**
+	 * Focus sentinel handler - when a sentinel element receives focus, redirect
+	 * focus to the appropriate element inside the dialog. This handles iPad
+	 * Safari's Tab key behavior which can bypass event listeners.
+	 */ const handleSentinelFocus = useCallback((position)=>{
+        const focusableElements = getFocusableElements();
+        /* c8 ignore next 3 - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
+            return;
+        }
+        if (position === "start") {
+            // Focus came from the end, wrap to last element.
+            focusableElements[focusableElements.length - 1]?.focus();
+        } else {
+            // Focus came from the start, wrap to first element.
+            focusableElements[0]?.focus();
+        }
+    }, [
+        getFocusableElements
+    ]);
+    /**
+	 * Effect to show/hide the dialog and manage focus. Uses the dialog stack
+	 * manager to coordinate listeners between nested dialogs.
+	 */ useEffect(()=>{
+        const dialog = dialogRef.current;
+        /* c8 ignore next 3 - defensive check */ if (!dialog) {
+            return;
+        }
+        // Store the currently focused element to restore later.
+        previouslyFocusedRef.current = document.activeElement;
+        // Show the dialog as a modal.
+        if (!dialog.open) {
+            dialog.showModal();
+        }
+        /**
+		 * Add cancel event listener for ESC key (always needed, not managed by
+		 * stack).
+		 */ dialog.addEventListener("cancel", handleCancel);
+        /**
+		 * Define listener management functions for the stack manager. These will be
+		 * called when this dialog becomes/stops being the topmost dialog.
+		 */ const addListeners = ()=>{
+            document.addEventListener("keydown", handleKeyDown);
+            document.addEventListener("focusin", handleFocusIn);
+        };
+        const removeListeners = ()=>{
+            document.removeEventListener("keydown", handleKeyDown);
+            document.removeEventListener("focusin", handleFocusIn);
+        };
+        /**
+		 * Register this dialog with the stack manager. This will suspend parent
+		 * dialog listeners if any exist.
+		 */ registerDialog({
+            dialogRef: dialog,
+            addListeners,
+            removeListeners
+        });
+        /**
+		 * Set initial focus after a small delay to ensure the DOM is ready. This
+		 * works around React's autoFocus prop not working with native dialog.
+		 */ const focusTimer = setTimeout(()=>{
+            focusElement(initialFocus);
+        }, 0);
+        // Capture the previously focused element for restoration in cleanup.
+        const previouslyFocused = previouslyFocusedRef.current;
+        return ()=>{
+            clearTimeout(focusTimer);
+            dialog.removeEventListener("cancel", handleCancel);
+            /**
+			 * Unregister from the stack manager. This will restore parent dialog
+			 * listeners if any exist.
+			 */ unregisterDialog(dialog);
+            // Close the dialog if it's still open.
+            if (dialog.open) {
+                dialog.close();
+            }
+            /**
+			 * Restore focus to the previously focused element if it's still in the DOM.
+			 * Use withIgnoredFocusChanges to prevent parent dialog's handleFocusIn from
+			 * interfering with focus restoration.
+			 */ if (previouslyFocused?.isConnected) {
+                withIgnoredFocusChanges(()=>{
+                    if (previouslyFocused.isConnected) {
+                        previouslyFocused.focus();
+                    }
+                });
+            }
+        };
+    }, [
+        handleCancel,
+        handleKeyDown,
+        handleFocusIn,
+        initialFocus,
+        focusElement
+    ]);
+    /* c8 ignore next 3 - early return when panel is closed */ if (!open) {
+        return null;
+    }
+    const isMessageBox = kind === TYPE_MESSAGEBOX;
+    const dialogClass = clsx(/**
+		 * Center the dialog on screen with fixed positioning. Native dialog uses
+		 * position: fixed by default.
+		 * - Panel on mobile: inset-0 + no margin for full screen.
+		 * - Panel on desktop: inset-x-0 + top/bottom auto for vertical centering.
+		 * - MessageBox: Always centered (both mobile and desktop) since it doesn't
+		 *   take full screen.
+		 */ "fixed max-h-none max-w-none p-0", {
+        // Panel: full screen on mobile, centered on desktop
+        "inset-0 m-0 sm:inset-auto sm:inset-x-0 sm:top-1/2 sm:-translate-y-1/2 sm:mx-auto": !isMessageBox,
+        // MessageBox: always centered at all breakpoints
+        "inset-auto inset-x-0 top-1/2 -translate-y-1/2 mx-auto z-100": isMessageBox
+    }, /**
+		 * Backdrop styling via Tailwind's backdrop: variant for ::backdrop
+		 * pseudo-element. Full black on mobile, 80% opacity on desktop (matches
+		 * original overlay).
+		 */ "backdrop:bg-black sm:backdrop:bg-black/80", className);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs("dialog", {
+        ref: dialogRef,
+        "aria-labelledby": labelId,
+        "aria-describedby": descriptionId,
+        className: dialogClass,
+        style: style,
+        onClick: handleDialogClick,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                tabIndex: 0,
+                onFocus: ()=>handleSentinelFocus("start"),
+                "data-focus-sentinel": "start",
+                style: {
+                    position: "absolute",
+                    width: 1,
+                    height: 1,
+                    padding: 0,
+                    margin: -1,
+                    overflow: "hidden",
+                    clip: "rect(0, 0, 0, 0)",
+                    whiteSpace: "nowrap",
+                    border: 0
+                },
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                id: labelId,
+                className: "sr-only",
+                children: title
+            }),
+            children,
+            /*#__PURE__*/ jsx("span", {
+                tabIndex: 0,
+                onFocus: ()=>handleSentinelFocus("end"),
+                "data-focus-sentinel": "end",
+                style: {
+                    position: "absolute",
+                    width: 1,
+                    height: 1,
+                    padding: 0,
+                    margin: -1,
+                    overflow: "hidden",
+                    clip: "rect(0, 0, 0, 0)",
+                    whiteSpace: "nowrap",
+                    border: 0
+                },
+                "aria-hidden": "true"
+            })
+        ]
+    }), document.body);
+}
+
+;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
+
+
+const getFooterAndHeaderCommonClasses = ({ blurEffect })=>{
+    return clsx("absolute left-0 right-0 z-20 backdrop-brightness-50", {
+        "backdrop-blur-sm": blurEffect === /* inlined export .SMALL */ ("small"),
+        "backdrop-blur-md": blurEffect === /* inlined export .MEDIUM */ ("medium"),
+        "backdrop-blur-lg": blurEffect === /* inlined export .LARGE */ ("large"),
+        "bg-surface-darker": blurEffect === /* inlined export .NONE */ ("none")
+    });
+};
+const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), hasFooter })=>{
+    const effectiveMaxHeight = maxHeight ?? (kind === /* inlined export .TYPE_PANEL */ ("panel") ? /* inlined export .LARGE */ ("large") : /* inlined export .SMALL */ ("small"));
+    return {
+        outerWrapper: clsx("prose prose-lighter flex flex-col bg-surface-dark overflow-hidden", {
+            "duration-200 ease-out": animation,
+            /**
+				 * Panel styles
+				 */ [`${PANEL_CLASSNAME} sm:rounded-3xl sm:border`]: kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            /**
+				 * Widths and max widths for Panel when no className is provided
+				 */ ["w-full sm:w-[95%] md:max-w-2xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .SMALL */ ("small"),
+            ["w-full sm:w-[95%] md:max-w-3xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .MEDIUM */ ("medium"),
+            ["w-full sm:w-[95%] md:max-w-4xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .LARGE */ ("large"),
+            /**
+				 * Heights and max heights for Panel
+				 * Mobile: full height (h-full works with inset-0), Desktop: shrink-to-fit with max-height constraint
+				 */ "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[40vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
+            "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[60vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
+            "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[95vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
+            /**
+				 * Panel border colors
+				 */ "sm:border-border-dark": borderMode === "dark" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            "sm:border-border-accent": borderMode === "light" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            /**
+				 * Messagebox styles
+				 */ [`${MESSAGEBOX_CLASSNAME} rounded-3xl border`]: kind === TYPE_MESSAGEBOX,
+            /**
+				 * Widths and max widths for Messagebox when no className is provided
+				 */ ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX && !className,
+            /**
+				 * Heights and max heights for Messagebox
+				 */ "h-64": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
+            "h-80": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
+            "h-96": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
+            /**
+				 * Messagebox border colors
+				 */ "border-border-dark": borderMode === "dark" && kind === TYPE_MESSAGEBOX,
+            "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
+            [`${className}`]: !!className
+        }),
+        innerWrapper: "content flex flex-col rounded-[inherit] relative min-h-full isolate",
+        scrollableContent: clsx("flex-1 overflow-y-auto overflow-x-hidden", "pt-12", {
+            "pb-12": hasFooter
+        }),
+        footer: clsx(getFooterAndHeaderCommonClasses({
+            blurEffect
+        }), "p-2 bottom-0", "sm:min-h-auto h-12", {
+            "min-h-20": hasFooter && kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            "sm:rounded-b-3xl": kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            "rounded-b-3xl": kind === TYPE_MESSAGEBOX
+        }),
+        header: clsx("flex flex-row-reverse items-center justify-between h-12", getFooterAndHeaderCommonClasses({
+            blurEffect
+        }), "top-0", {
+            "sm:rounded-t-3xl": kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            "rounded-t-3xl": kind === TYPE_MESSAGEBOX
+        }),
+        title: "mb-0 pt-2 pl-4 pr-2 pb-2",
+        closeWrapper: "pr-[18px]",
+        closeButton: clsx("flex items-center justify-center", "size-3", "p-1", "rounded-full", "border", "border-transparent", "text-[rgba(255,96,92,1)]", "bg-[rgba(255,96,92,1)]", "shadow-[0_0_0_0.5px_red]", "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-light", "hover:text-copy-dark", "focus:text-copy-dark", "active:bg-[#ba504a]", // Extended touch target using pseudo-element
+        "relative", "before:content-['']", "before:absolute", "before:-top-4", "before:-right-4", "before:-bottom-4", "before:-left-4"),
+        content: "p-4 rounded-3xl"
+    };
+};
+
+;// CONCATENATED MODULE: ./src/components/Panel/Panel.tsx
+
+
+
+
+
+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 })=>{
+    const originalTitleRef = useRef("");
+    /* v8 ignore next 9 */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
+        opacity: 0
+    } : {
+        transform: "translateY(-100vh)"
+    });
+    const panelClassName = getPanelClassName({
+        className,
+        kind,
+        borderMode,
+        animation,
+        maxWidth,
+        maxHeight,
+        blurEffect,
+        hasFooter: Boolean(footer)
+    });
+    /**
+	 * Handle close button click.
+	 */ const handleClose = useCallback(()=>{
+        onOpenChange(false);
+    }, [
+        onOpenChange
+    ]);
+    /**
+	 * If the panel is opened, set the document title to the panel's title. If it's
+	 * closed, restore the original document.title.
+	 */ useEffect(()=>{
+        if (open) {
+            originalTitleRef.current = document.title;
+            document.title = `${title} | ${originalTitleRef.current}`;
+        }
+        return ()=>{
+            if (open) {
+                document.title = originalTitleRef.current;
+            }
+        };
+    }, [
+        title,
+        open
+    ]);
+    /**
+	 * Effect to handle the opening and closing animations.
+	 */ /* v8 ignore next 31 */ useEffect(()=>{
+        if (!animation) {
+            return;
+        }
+        if (open) {
+            setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
+                opacity: 0
+            } : {
+                transform: "translateY(-666vh)"
+            });
+            /**
+			 * Small delay to ensure the opening state is applied after the component is
+			 * rendered.
+			 */ const timer = setTimeout(()=>{
+                setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
+                    opacity: 1
+                } : {
+                    transform: "translateY(0)"
+                });
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        open,
+        animation,
+        animationType
+    ]);
+    return /*#__PURE__*/ jsx(PanelPortal, {
+        open: open,
+        onClose: handleClose,
+        className: panelClassName.outerWrapper,
+        style: animationStyles,
+        title: title,
+        initialFocus: initialFocus,
+        kind: kind,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: panelClassName.innerWrapper,
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: panelClassName.header,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: panelClassName.closeWrapper,
+                            children: /*#__PURE__*/ jsx("button", {
+                                className: panelClassName.closeButton,
+                                type: "button",
+                                "aria-label": "Close",
+                                onClick: handleClose,
+                                children: /*#__PURE__*/ jsx("span", {
+                                    children: /*#__PURE__*/ jsx("svg", {
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        className: "size-3",
+                                        viewBox: "0 0 384 512",
+                                        fill: "currentColor",
+                                        role: "img",
+                                        "aria-hidden": "true",
+                                        focusable: "false",
+                                        children: /*#__PURE__*/ jsx("path", {
+                                            d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
+                                            opacity: "1"
+                                        })
+                                    })
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("h1", {
+                            className: panelClassName.title,
+                            children: title
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: panelClassName.scrollableContent,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: panelClassName.content,
+                        children: children
+                    })
+                }),
+                footer && /*#__PURE__*/ jsx("div", {
+                    className: panelClassName.footer,
+                    children: footer
+                })
+            ]
+        })
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+var __webpack_exports__ANIMATION_FADE = /* inlined export .ANIMATION_FADE */ ("fade");
+var __webpack_exports__ANIMATION_SLIDE = /* inlined export .ANIMATION_SLIDE */ ("slide");
+var __webpack_exports__LARGE = /* inlined export .LARGE */ ("large");
+var __webpack_exports__MEDIUM = /* inlined export .MEDIUM */ ("medium");
+var __webpack_exports__NONE = /* inlined export .NONE */ ("none");
+var __webpack_exports__SMALL = /* inlined export .SMALL */ ("small");
+var __webpack_exports__TYPE_PANEL = /* inlined export .TYPE_PANEL */ ("panel");
+export { MESSAGEBOX_CLASSNAME, PANEL_CLASSNAME, Panel, TYPE_MESSAGEBOX, __webpack_exports__ANIMATION_FADE as ANIMATION_FADE, __webpack_exports__ANIMATION_SLIDE as ANIMATION_SLIDE, __webpack_exports__LARGE as LARGE, __webpack_exports__MEDIUM as MEDIUM, __webpack_exports__NONE as NONE, __webpack_exports__SMALL as SMALL, __webpack_exports__TYPE_PANEL as TYPE_PANEL };

package/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@versini/ui-dialog",
+	"version": "8.0.6",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://www.npmjs.com/package/@versini/ui-dialog",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
+		"clean": "rimraf dist tmp",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
+		"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",
+		"test:coverage": "vitest run --coverage",
+		"test:update": "vitest run --update",
+		"test:visual": "playwright test -c playwright-ct.config.ts",
+		"test:visual:report": "playwright show-report playwright-report",
+		"test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+		"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "6.9.1"
+	},
+	"dependencies": {
+		"@tailwindcss/typography": "0.5.19",
+		"clsx": "2.1.1",
+		"tailwindcss": "4.1.18"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"gitHead": "3582aaec11fa1d50f3d6ef280d4f06adaf4746e4"
+}