{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Alert` component displays a short, important message that attracts the user's attention without interrupting their workflow. Use it for warnings, errors, success confirmations, or informational updates. The `object` text supports Markdown formatting.\n",
    "\n",
    "## Parameters\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`object`** (`str`): The text content to display in the alert body (supports Markdown).\n",
    "* **`title`** (`str`): An optional bold title displayed above the body text.\n",
    "* **`severity`** (`Literal[\"error\", \"warning\", \"info\", \"success\"]`): The severity level, which determines the icon and default color.\n",
    "* **`closed`** (`boolean`): Whether the alert is currently closed (hidden).\n",
    "* **`closeable`** (`boolean`): Whether to show a close button that lets users dismiss the alert.\n",
    "\n",
    "### Style\n",
    "\n",
    "* **`variant`** (`Literal[\"filled\", \"outlined\"]`): The visual style of the alert.\n",
    "* **`sx`** (`dict`): Component-level styling API for advanced customization.\n",
    "* **`theme_config`** (`dict`): Theming API for consistent design system integration.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Create a simple alert with a title and body text:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alert = pmui.Alert(title=\"Note\", object=\"This is an informational alert.\", severity=\"info\")\n",
    "alert"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Severity Levels\n",
    "\n",
    "The `severity` parameter controls the color scheme and icon. There are four built-in levels:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    pmui.Alert(title=\"Success\", object=\"The operation completed successfully.\", severity=\"success\", margin=5),\n",
    "    pmui.Alert(title=\"Info\", object=\"Here is some useful information.\", severity=\"info\", margin=5),\n",
    "    pmui.Alert(title=\"Warning\", object=\"Be careful with this action.\", severity=\"warning\", margin=5),\n",
    "    pmui.Alert(title=\"Error\", object=\"Something went wrong.\", severity=\"error\", margin=5),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Variants\n",
    "\n",
    "The `variant` parameter controls the visual style. The default is `\"outlined\"`, which shows a border. Use `\"filled\"` for a more prominent, solid background:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    pmui.Alert(\n",
    "        title=\"Outlined\", object=\"This is the default outlined variant.\",\n",
    "        severity=\"info\", variant=\"outlined\", margin=5\n",
    "    ),\n",
    "    pmui.Alert(\n",
    "        title=\"Filled\", object=\"This is the filled variant.\",\n",
    "        severity=\"info\", variant=\"filled\", margin=5\n",
    "    ),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The filled variant works well with all severity levels:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    pmui.Alert(title=\"Success\", object=\"Operation completed.\", severity=\"success\", variant=\"filled\", margin=5),\n",
    "    pmui.Alert(title=\"Info\", object=\"Something to know.\", severity=\"info\", variant=\"filled\", margin=5),\n",
    "    pmui.Alert(title=\"Warning\", object=\"Proceed with caution.\", severity=\"warning\", variant=\"filled\", margin=5),\n",
    "    pmui.Alert(title=\"Error\", object=\"An error occurred.\", severity=\"error\", variant=\"filled\", margin=5),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Markdown Support\n",
    "\n",
    "The `object` text is rendered as Markdown, so you can use bold, italic, links, and other formatting:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Alert(\n",
    "    title=\"Formatting Example\",\n",
    "    object=\"This alert has **bold text**, *italic text*, and a [link](https://panel.holoviz.org).\",\n",
    "    severity=\"info\",\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Closeable Alerts\n",
    "\n",
    "Set `closeable=True` to display a close button. When the user clicks it, the alert collapses with a smooth animation and the `closed` parameter becomes `True`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "closeable_alert = pmui.Alert(\n",
    "    title=\"Dismissable\",\n",
    "    object=\"Click the X to close this alert.\",\n",
    "    severity=\"warning\",\n",
    "    closeable=True,\n",
    ")\n",
    "closeable_alert"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can programmatically reopen a closed alert by setting `closed = False`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "closeable_alert.closed = False"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Alert with Child Objects\n",
    "\n",
    "Since `Alert` is a layout component, it can contain other Panel objects as children in addition to the `object` text:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Alert(\n",
    "    pmui.Typography(\"Check the **documentation** for more details.\"),\n",
    "    title=\"Tip\",\n",
    "    severity=\"info\",\n",
    "    variant=\"outlined\",\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controlling Visibility\n",
    "\n",
    "The `closed` parameter can be used to show or hide the alert dynamically. Here we wire a button to toggle the alert:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle_button = pmui.Toggle(label=\"Show Alert\")\n",
    "\n",
    "toggle_alert = pmui.Alert(\n",
    "    title=\"Toggle Me\",\n",
    "    object=\"This alert can be shown and hidden with a button.\",\n",
    "    severity=\"success\",\n",
    "    closed=toggle_button,\n",
    ")\n",
    "\n",
    "pmui.Column(toggle_button, toggle_alert)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Alert(title=\"API Example\", object=\"Explore the parameters below.\", severity=\"info\").api(jslink=True)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.14.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}