@plusui/library 0.1.15 → 0.1.16

package/public/react/index.d.ts

@@ -939,42 +939,72 @@ declare class PlusRadioGroup$1 extends Tailwind$1 {
     render(): lit_html.TemplateResult<1>;
 }
 
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+type ModalPlacement = 'center' | 'top';
 /**
  * @tag plus-modal
- * @summary Modal dialog component that appears on top of the page content.
+ * @summary Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
  *
+ * @slot - Main content area (same as body slot)
  * @slot header - The header content of the modal
- * @slot body - The main content of the modal
+ * @slot body - The main content of the modal (alternative to default slot)
  * @slot footer - The footer content of the modal
  * @slot close - Custom close button (defaults to an X icon)
  *
- * @csspart container - The main container element
- * @csspart overlay - The overlay element
- * @csspart modal - The modal element
- * @csspart header - The header element
- * @csspart body - The body element
- * @csspart footer - The footer element
+ * @csspart dialog - The native dialog element
+ * @csspart container - The container wrapper for centering and scrolling
+ * @csspart modal - The main modal box
+ * @csspart header - The header section
+ * @csspart header-content - The content wrapper inside header
+ * @csspart body - The main content area
+ * @csspart footer - The footer section
  * @csspart close-button - The close button element
  *
+ * @event plus-modal-open - Emitted after the modal has opened
+ * @event plus-modal-close - Emitted after the modal has closed
+ * @event plus-modal-before-open - Emitted before the modal opens (cancelable)
+ * @event plus-modal-before-close - Emitted before the modal closes (cancelable)
+ *
  * @example
  * ```html
- * <plus-modal>
+ * <!-- Basic usage -->
+ * <plus-modal is-open>
  *   <div slot="header">Modal Title</div>
  *   <div slot="body">Modal Content</div>
  *   <div slot="footer">
- *     <button>Save</button>
+ *     <button data-dismiss>Close</button>
  *   </div>
  * </plus-modal>
+ *
+ * <!-- Full screen modal -->
+ * <plus-modal full-screen>
+ *   <div slot="header">Full Screen</div>
+ *   <p>Content here</p>
+ * </plus-modal>
+ *
+ * <!-- Static backdrop (shake on outside click) -->
+ * <plus-modal backdrop="static">
+ *   <div slot="header">Can't Close Outside</div>
+ *   <p>Must use close button</p>
+ * </plus-modal>
  * ```
  */
 declare class PlusModal$1 extends Tailwind$1 {
+    private dialogRef?;
     /**
      * The size of the modal
      * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
      * @default 'md'
      * @attr size
      */
-    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    size: ModalSize;
+    /**
+     * The placement of the modal on the screen
+     * @type {'center' | 'top'}
+     * @default 'center'
+     * @attr placement
+     */
+    placement: ModalPlacement;
     /**
      * Whether the modal is open
      * @type {boolean}
@@ -989,6 +1019,23 @@ declare class PlusModal$1 extends Tailwind$1 {
      * @attr full-width
      */
     fullWidth: boolean;
+    /**
+     * Makes the modal take the full screen (100vw x 100vh, no border radius)
+     * @type {boolean}
+     * @default false
+     * @attr full-screen
+     */
+    fullScreen: boolean;
+    /**
+     * Controls backdrop behavior
+     * - true: Shows backdrop, modal can be closed by clicking outside
+     * - false: No backdrop
+     * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+     * @type {boolean | 'static'}
+     * @default true
+     * @attr backdrop
+     */
+    backdrop: boolean | 'static';
     /**
      * Whether the modal should close when clicking the backdrop
      * @type {boolean}
@@ -1003,6 +1050,20 @@ declare class PlusModal$1 extends Tailwind$1 {
      * @attr close-on-esc
      */
     closeOnEsc: boolean;
+    /**
+     * Hides the header section completely
+     * @type {boolean}
+     * @default false
+     * @attr no-header
+     */
+    noHeader: boolean;
+    /**
+     * Hides the footer section completely
+     * @type {boolean}
+     * @default false
+     * @attr no-footer
+     */
+    noFooter: boolean;
     /**
      * The duration of the animation in milliseconds
      * @type {number}
@@ -1011,24 +1072,36 @@ declare class PlusModal$1 extends Tailwind$1 {
      */
     animationDuration: number;
     private isAnimating;
-    private keydownHandler;
-    constructor();
+    private shake;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Shows the modal with animation
+     * @returns {Promise<void>}
+     */
+    show(): Promise<void>;
     /**
      * Hides the modal with animation
-     * @returns {void}
+     * @returns {Promise<void>}
      */
-    hide(): void;
-    private handleBeforeHide;
+    hide(): Promise<void>;
     /**
-     * Shows the modal with animation
-     * @returns {void}
+     * Toggles the modal open/closed state
+     * @returns {Promise<void>}
      */
-    show(): void;
-    private handleBeforeShow;
-    disconnectedCallback(): void;
-    private handleKeydown;
+    toggle(): Promise<void>;
+    private handleOpenChange;
+    private handleCloseChange;
+    private handleBeforeOpen;
+    private handleBeforeClose;
     private handleBackdropClick;
+    private handleDialogCancel;
+    private handleKeydown;
+    private handleClick;
+    private shakeModal;
+    private getModalStyle;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -4437,15 +4510,33 @@ interface PlusModalProps
   /** Whether the modal should take full width */
   fullWidth?: boolean;
 
+  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
+  fullScreen?: boolean;
+
+  /** Controls backdrop behavior
+- true: Shows backdrop, modal can be closed by clicking outside
+- false: No backdrop
+- 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation) */
+  backdrop?: boolean | "static";
+
   /** Whether the modal should close when clicking the backdrop */
   closeOnBackdrop?: boolean;
 
   /** Whether the modal should close when pressing the Escape key */
   closeOnEsc?: boolean;
 
+  /** Hides the header section completely */
+  noHeader?: boolean;
+
+  /** Hides the footer section completely */
+  noFooter?: boolean;
+
   /** The size of the modal */
   size?: PlusModal$1["size"];
 
+  /** The placement of the modal on the screen */
+  placement?: PlusModal$1["placement"];
+
   /** The duration of the animation in milliseconds */
   animationDuration?: PlusModal$1["animationDuration"];
 
@@ -4469,30 +4560,51 @@ interface PlusModalProps
 
   /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
   tabIndex?: number;
+
+  /** Emitted after the modal has opened */
+  onPlusModalOpen?: (event: CustomEvent) => void;
+
+  /** Emitted after the modal has closed */
+  onPlusModalClose?: (event: CustomEvent) => void;
+
+  /** Emitted before the modal opens (cancelable) */
+  onPlusModalBeforeOpen?: (event: CustomEvent) => void;
+
+  /** Emitted before the modal closes (cancelable) */
+  onPlusModalBeforeClose?: (event: CustomEvent) => void;
 }
 
 /**
- * Modal dialog component that appears on top of the page content.
+ * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
  * ---
  *
  *
+ * ### **Events:**
+ *  - **plus-modal-open** - Emitted after the modal has opened
+ * - **plus-modal-close** - Emitted after the modal has closed
+ * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
+ * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
+ *
  * ### **Methods:**
- *  - **hide(): _void_** - Hides the modal with animation
- * - **show(): _void_** - Shows the modal with animation
+ *  - **show(): _Promise<void>_** - Shows the modal with animation
+ * - **hide(): _Promise<void>_** - Hides the modal with animation
+ * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
  *
  * ### **Slots:**
- *  - **header** - The header content of the modal
- * - **body** - The main content of the modal
+ *  - _default_ - Main content area (same as body slot)
+ * - **header** - The header content of the modal
+ * - **body** - The main content of the modal (alternative to default slot)
  * - **footer** - The footer content of the modal
  * - **close** - Custom close button (defaults to an X icon)
  *
  * ### **CSS Parts:**
- *  - **container** - The main container element
- * - **overlay** - The overlay element
- * - **modal** - The modal element
- * - **header** - The header element
- * - **body** - The body element
- * - **footer** - The footer element
+ *  - **dialog** - The native dialog element
+ * - **container** - The container wrapper for centering and scrolling
+ * - **modal** - The main modal box
+ * - **header** - The header section
+ * - **header-content** - The content wrapper inside header
+ * - **body** - The main content area
+ * - **footer** - The footer section
  * - **close-button** - The close button element
  */
 declare const PlusModal: React.ForwardRefExoticComponent<PlusModalProps>;