@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Email/EmailList.stx

@@ -0,0 +1,117 @@
+<script>
+interface EmailListProps {
+  emails?: any[]
+  activeFolder?: string
+  searchQuery?: string
+}
+
+const { emails = [], activeFolder = 'inbox', searchQuery = '' } = defineProps<EmailListProps>()
+
+// Helper function to format date
+  function formatDate(dateString) {
+    const date = new Date(dateString)
+    const now = new Date()
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const yesterday = new Date(today)
+    yesterday.setDate(yesterday.getDate() - 1)
+
+    if (date >= today) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    } else if (date >= yesterday) {
+      return 'Yesterday'
+    } else {
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' })
+    }
+  }
+
+  // Filter and sort emails
+  function getFilteredEmails() {
+    let filtered = emails.filter(email => {
+      if (activeFolder === 'starred') {
+        return email.starred
+      } else {
+        return email.folder === activeFolder
+      }
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      filtered = filtered.filter(email =>
+        email.subject.toLowerCase().includes(query) ||
+        email.from.toLowerCase().includes(query) ||
+        email.preview.toLowerCase().includes(query)
+      )
+    }
+
+    return filtered.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+  }
+
+  const filteredEmails = getFilteredEmails()
+  const folderTitle = activeFolder.charAt(0).toUpperCase() + activeFolder.slice(1)
+</script>
+<div class="flex flex-col w-full md:w-1/3 lg:w-2/5 border-gray-200 border-r dark:border-neutral-600">
+    <div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
+      <div class="flex items-center justify-between">
+        <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">
+          {{ folderTitle }}
+        </h2>
+        <div class="flex ml-4 space-x-2">
+          <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+            <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-refresh"></i>
+          </button>
+          <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+            <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-more-vertical-circle-01"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="overflow-y-auto flex-1">
+      <ul class="divide-gray-200 divide-y dark:divide-neutral-600">
+        @foreach(filteredEmails as email)
+          <li
+            class="hover:bg-gray-100 dark:hover:bg-neutral-600 cursor-pointer {{ !email.read ? 'bg-blue-50 dark:bg-neutral-800' : 'bg-white dark:bg-neutral-700' }}"
+            data-action="open-email"
+            data-email-id="{{ email.id }}"
+          >
+            <div class="px-4 py-3">
+              <div class="flex items-center justify-between">
+                <p class="text-sm font-medium {{ !email.read ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-neutral-300' }}">
+                  {{ email.from }}
+                </p>
+                <p class="text-gray-500 text-xs dark:text-neutral-400">
+                  {{ formatDate(email.date) }}
+                </p>
+              </div>
+              <div class="flex items-center justify-between mt-1">
+                <p class="text-sm {{ !email.read ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-600 dark:text-neutral-300' }}">
+                  {{ email.subject }}
+                </p>
+                <div class="flex items-center space-x-1">
+                  <button class="text-gray-400 hover:text-yellow-400" data-action="toggle-star" data-email-id="{{ email.id }}">
+                    @if(email.starred)
+                      <span class="text-lg text-yellow-400">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                          <path d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z"/>
+                        </svg>
+                      </span>
+                    @else
+                      <i class="text-lg i-hugeicons-star"></i>
+                    @endif
+                  </button>
+                  @if(email.attachment)
+                    <span class="text-gray-400">
+                      <i class="text-lg i-hugeicons-attachment-01"></i>
+                    </span>
+                  @endif
+                </div>
+              </div>
+              <p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">
+                {{ email.preview }}
+              </p>
+            </div>
+          </li>
+        @endforeach
+      </ul>
+    </div>
+  </div>

package/resources/components/Dashboard/Email/EmailSearch.stx

@@ -0,0 +1,40 @@
+<script>
+interface EmailSearchProps {
+  modelValue?: string
+  timeRange?: 'day' | 'week' | 'month' | 'year'
+}
+
+const { modelValue = '', timeRange = 'day' } = defineProps<EmailSearchProps>()
+</script>
+<div class="px-4 py-2 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
+    <div class="flex items-center">
+      <!-- Search bar -->
+      <div class="flex-1 max-w-2xl">
+        <div class="relative">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <i class="text-gray-400 text-lg i-hugeicons-search"></i>
+          </div>
+          <input
+            type="text"
+            name="search"
+            value="{{ modelValue }}"
+            placeholder="Search emails..."
+            class="block placeholder-gray-500 dark:placeholder-gray-400 pl-10 pr-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          >
+        </div>
+      </div>
+
+      <!-- Activity chart toggle -->
+      <div class="ml-4">
+        <select
+          name="timeRange"
+          class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600"
+        >
+          <option value="day" {{ timeRange == 'day' ? 'selected' : '' }}>Last 24 Hours</option>
+          <option value="week" {{ timeRange == 'week' ? 'selected' : '' }}>Last 7 Days</option>
+          <option value="month" {{ timeRange == 'month' ? 'selected' : '' }}>Last 30 Days</option>
+          <option value="year" {{ timeRange == 'year' ? 'selected' : '' }}>Last Year</option>
+        </select>
+      </div>
+    </div>
+  </div>

package/resources/components/Dashboard/Email/EmailSidebar.stx

@@ -0,0 +1,133 @@
+<script>
+interface EmailSidebarProps {
+  activeFolder?: string
+  folders?: any[]
+  unreadCounts?: Record<string, any>
+}
+
+const { activeFolder = 'inbox', folders = [], unreadCounts = {} } = defineProps<EmailSidebarProps>()
+
+// User info
+  const userInfo = {
+    name: 'Alicia Koch',
+    email: 'alicia@example.com',
+    initial: 'A'
+  }
+
+  function getUnreadCount(folderId) {
+    return unreadCounts[folderId] || 0
+  }
+</script>
+<div class="flex flex-col w-64 bg-white dark:bg-neutral-800 border-gray-200 border-r dark:border-neutral-600">
+    <!-- User dropdown -->
+    <div class="p-3 border-b border-gray-200 dark:border-neutral-600">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+          <div class="flex items-center justify-center h-8 w-8 text-gray-700 dark:text-white bg-gray-200 dark:bg-neutral-700 rounded">
+            <i class="text-sm i-hugeicons-alert-02"></i>
+          </div>
+          <span class="font-medium text-gray-900 text-sm dark:text-white">{{ userInfo.name }}</span>
+        </div>
+        <button class="text-gray-500 dark:text-neutral-400">
+          <i class="text-sm i-hugeicons-arrow-down-02"></i>
+        </button>
+      </div>
+    </div>
+
+    <!-- Folders -->
+    <div class="overflow-y-auto flex-1">
+      <nav class="mt-1">
+        <ul>
+          @foreach(folders as folder)
+            <li class="mb-1">
+              <button
+                class="w-full flex items-center justify-between px-4 py-2 text-sm {{ activeFolder == folder.id ? 'bg-gray-100 dark:bg-neutral-700 text-gray-900 dark:text-white font-medium' : 'text-gray-700 dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700' }}"
+                data-action="set-folder"
+                data-folder-id="{{ folder.id }}"
+              >
+                <div class="flex items-center">
+                  @if(folder.id == 'inbox')
+                    <i class="mr-3 text-lg i-hugeicons-inbox"></i>
+                  @elseif(folder.id == 'drafts')
+                    <i class="mr-3 text-lg i-hugeicons-edit-01"></i>
+                  @elseif(folder.id == 'sent')
+                    <i class="mr-3 text-lg i-hugeicons-sent"></i>
+                  @elseif(folder.id == 'trash')
+                    <i class="mr-3 text-lg i-hugeicons-waste"></i>
+                  @elseif(folder.id == 'archive')
+                    <i class="mr-3 text-lg i-hugeicons-archive"></i>
+                  @elseif(folder.id == 'spam')
+                    <i class="mr-3 text-lg i-hugeicons-spam"></i>
+                  @elseif(folder.id == 'starred')
+                    <i class="mr-3 text-lg i-hugeicons-star"></i>
+                  @endif
+                  <span>{{ folder.name }}</span>
+                </div>
+                @if(getUnreadCount(folder.id) > 0)
+                  <span class="px-2 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-200 dark:bg-neutral-600 rounded-full">
+                    {{ getUnreadCount(folder.id) }}
+                  </span>
+                @endif
+              </button>
+            </li>
+          @endforeach
+        </ul>
+      </nav>
+
+      <!-- Categories -->
+      <div class="mt-6 px-4">
+        <h3 class="font-semibold text-gray-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+          Categories
+        </h3>
+        <nav class="mt-2">
+          <ul>
+            <li class="mb-1">
+              <button class="flex items-center px-2 py-2 w-full text-gray-700 text-sm dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700 rounded">
+                <i class="mr-3 text-lg i-hugeicons-user"></i>
+                <span>Social</span>
+                <span class="ml-auto px-2 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-200 dark:bg-neutral-600 rounded-full">
+                  972
+                </span>
+              </button>
+            </li>
+            <li class="mb-1">
+              <button class="flex items-center px-2 py-2 w-full text-gray-700 text-sm dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700 rounded">
+                <i class="mr-3 text-lg i-hugeicons-notification-03"></i>
+                <span>Updates</span>
+                <span class="ml-auto px-2 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-200 dark:bg-neutral-600 rounded-full">
+                  342
+                </span>
+              </button>
+            </li>
+            <li class="mb-1">
+              <button class="flex items-center px-2 py-2 w-full text-gray-700 text-sm dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700 rounded">
+                <i class="mr-3 text-lg i-hugeicons-chatting-01"></i>
+                <span>Forums</span>
+                <span class="ml-auto px-2 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-200 dark:bg-neutral-600 rounded-full">
+                  128
+                </span>
+              </button>
+            </li>
+            <li class="mb-1">
+              <button class="flex items-center px-2 py-2 w-full text-gray-700 text-sm dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700 rounded">
+                <i class="mr-3 text-lg i-hugeicons-shopping-cart-02"></i>
+                <span>Shopping</span>
+                <span class="ml-auto px-2 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-200 dark:bg-neutral-600 rounded-full">
+                  8
+                </span>
+              </button>
+            </li>
+            <li class="mb-1">
+              <button class="flex items-center px-2 py-2 w-full text-gray-700 text-sm dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700 rounded">
+                <i class="mr-3 text-lg i-hugeicons-tag-01"></i>
+                <span>Promotions</span>
+                <span class="ml-auto px-2 font-medium text-gray-800 text-xs dark:text-neutral-200 bg-gray-200 dark:bg-neutral-600 rounded-full">
+                  21
+                </span>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>

package/resources/components/Dashboard/GlobalSearch.stx

@@ -0,0 +1,124 @@
+<script server>
+import { useGlobalSearch } from '../../../functions/search'
+
+const { query, results, isSearching, isOpen, selectedIndex, modelIcons, search, open, close, moveUp, moveDown, selectCurrent, flatResults } = useGlobalSearch()
+
+function handleKeydown(event) {
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    moveUp()
+  } else if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    moveDown()
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    const href = selectCurrent()
+    if (href) window.location.href = href
+  } else if (event.key === 'Escape') {
+    close()
+  }
+}
+
+function handleInput(event) {
+  search(event.target.value)
+}
+
+function navigateTo(href) {
+  close()
+  window.location.href = href
+}
+</script>
+
+<!-- Search Modal Overlay -->
+@if(isOpen)
+  <div class="fixed inset-0 overflow-y-auto z-50" @keydown="handleKeydown">
+    <!-- Backdrop -->
+    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" @click="close"></div>
+
+    <!-- Modal -->
+    <div class="relative mt-[15vh] mx-auto max-w-lg">
+      <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-2xl">
+        <!-- Search Input -->
+        <div class="flex items-center px-4 border-b border-neutral-200 dark:border-neutral-700">
+          <svg class="shrink-0 h-5 w-5 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+          </svg>
+          <input
+            type="text"
+            placeholder="Search across all models..."
+            class="px-3 py-4 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-transparent border-none focus:outline-none focus:ring-0"
+            :value="query"
+            @input="handleInput"
+            autofocus
+          />
+          @if(isSearching)
+            <div class="shrink-0 h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+          @else
+            <kbd class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
+              ESC
+            </kbd>
+          @endif
+        </div>
+
+        <!-- Results -->
+        <div class="overflow-y-auto max-h-80">
+          @if(Object.keys(results).length > 0)
+            @for(modelType in results)
+              <div class="pb-1 pt-3 px-3">
+                <h3 class="px-1 font-semibold text-neutral-400 text-xs tracking-wider uppercase">
+                  {{ modelType }}
+                </h3>
+              </div>
+              @for(item, itemIndex in results[modelType])
+                <button
+                  class="flex gap-3 items-center px-4 py-2.5 w-full text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+                  @click="navigateTo(item.href)"
+                >
+                  <div :class="'i-hugeicons-file-02' || modelIcons[modelType]" class="shrink-0 h-5 w-5 text-neutral-400"></div>
+                  <div class="flex-1 min-w-0">
+                    <p class="font-medium text-neutral-900 text-sm truncate dark:text-white">
+                      {{ item.title }}
+                    </p>
+                    @if(item.subtitle)
+                      <p class="text-neutral-500 text-xs truncate dark:text-neutral-400">
+                        {{ item.subtitle }}
+                      </p>
+                    @endif
+                  </div>
+                  <svg class="shrink-0 h-4 w-4 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                  </svg>
+                </button>
+              @endfor
+            @endfor
+          @elseif(query && !isSearching)
+            <div class="px-4 py-8 text-center">
+              <div class="mb-2 mx-auto h-8 w-8 text-neutral-300 dark:text-neutral-600 i-hugeicons-search-02"></div>
+              <p class="text-neutral-500 text-sm dark:text-neutral-400">No results found for "{{ query }}"</p>
+            </div>
+          @else
+            <div class="px-4 py-8 text-center">
+              <p class="text-neutral-400 text-sm">Start typing to search...</p>
+            </div>
+          @endif
+        </div>
+
+        <!-- Footer -->
+        <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-400 text-xs border-neutral-200 border-t dark:border-neutral-700">
+          <span class="flex gap-1 items-center">
+            <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↑↓</kbd>
+            Navigate
+          </span>
+          <span class="flex gap-1 items-center">
+            <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↵</kbd>
+            Open
+          </span>
+          <span class="flex gap-1 items-center">
+            <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">esc</kbd>
+            Close
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+@endif

package/resources/components/Dashboard/MobileSidebar.stx

@@ -0,0 +1,47 @@
+<script>
+interface MobileSidebarProps {
+  isOpen?: boolean
+  companyLogo?: string
+  companyName?: string
+}
+
+const { isOpen = false, companyLogo = 'https:, companyName = 'Your Company' } = defineProps<MobileSidebarProps>()
+</script>
+@if(isOpen)
+  <div
+    class="lg:hidden relative z-50"
+    role="dialog"
+    aria-modal="true"
+  >
+    <!-- Off-canvas menu backdrop -->
+    <div class="fixed inset-0 bg-gray-900/80"></div>
+
+    <div class="flex fixed inset-0">
+      <!-- Off-canvas menu panel -->
+      <div class="flex relative flex-1 mr-16 max-w-xs w-full">
+        <!-- Close button -->
+        <div class="flex absolute left-full top-0 justify-center pt-5 w-16">
+          <button
+            type="button"
+            class="-m-2.5 p-2.5"
+            data-close-sidebar
+          >
+            <span class="sr-only">Close sidebar</span>
+            <div class="h-6 w-6 text-white i-hugeicons-cancel-01"></div>
+          </button>
+        </div>
+
+        <!-- Sidebar component -->
+        <div class="flex overflow-y-auto flex-col gap-y-5 grow pb-4 px-6 bg-white dark:bg-neutral-900">
+          <div class="flex items-center shrink-0 h-16">
+            <img
+              class="h-8 w-auto"
+              src="{{ companyLogo }}"
+              alt="{{ companyName }}"
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  @endif

package/resources/components/Dashboard/Modals/BaseModal.stx

@@ -0,0 +1,50 @@
+<script>
+interface BaseModalProps {
+  id?: string
+  show?: boolean
+}
+
+const { id = 'modal-' + Math.random().toString(36).slice(2, 11), show = true } = defineProps<BaseModalProps>()
+</script>
+<div
+  class="fixed inset-x-0 bottom-0 px-4 pb-6 sm:inset-0 sm:flex sm:items-center sm:justify-center sm:p-0 {{ show ? 'z-20' : 'z-[-1]' }}"
+  data-modal="{{ id }}"
+>
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 transition-opacity {{ show ? 'opacity-100' : 'opacity-0' }}"
+    data-backdrop
+  >
+    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+  </div>
+
+  <span class="hidden sm:inline-block sm:h-screen sm:align-middle"></span>&#8203;
+
+  <!-- Modal content -->
+  <div
+    class="max-h-[32rem] max-w-md transform overflow-hidden overflow-y-auto rounded-lg bg-white px-4 pb-4 pt-5 shadow-xl transition-all md:max-w-xl sm:w-full dark:bg-neutral-700 sm:p-6 {{ show ? 'opacity-100 translate-y-0 sm:scale-100' : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95' }}"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modal-headline"
+  >
+    <div class="absolute right-0 top-0 pr-4 pt-4">
+      <button
+        type="button"
+        class="text-gray-400 focus:text-gray-500 hover:text-neutral-500 focus:outline-none duration-150 ease-in-out transition"
+        aria-label="Close"
+        data-action="close"
+      >
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+    <div class="flex flex-col">
+      <slot name="body" />
+    </div>
+
+    <div class="sm:flex sm:flex-row-reverse mt-5 space-y-4 sm:mt-4 md:space-y-0">
+      <slot name="actions" />
+    </div>
+  </div>
+</div>

package/resources/components/Dashboard/Modals/Popups/Alert.stx

@@ -0,0 +1,112 @@
+<script>
+interface AlertProps {
+  title?: string
+  description?: string
+  type?: 'info' | 'warning' | 'danger' | 'success' | 'error'
+  confirmationText?: string
+  abortText?: string
+  show?: boolean
+}
+
+const { title = '', description = '', type = 'info', confirmationText = 'Confirm', abortText = 'Cancel', show = true } = defineProps<AlertProps>()
+
+function getButtonBackground() {
+    if (type === 'info') return 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
+    if (type === 'warning') return 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500'
+    if (type === 'danger') return 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
+    if (type === 'success') return 'bg-green-600 hover:bg-green-700 focus:ring-green-500'
+    return 'bg-white-600 hover:bg-gray-50'
+  }
+
+  const buttonBackground = getButtonBackground()
+</script>
+@if(show)
+<div class="sm:flex bottom-0 fixed inset-x-0 z-20 sm:inset-0 sm:items-center sm:justify-center pb-6 px-4 sm:p-0" data-alert-modal>
+  <!-- Backdrop -->
+  <div class="fixed inset-0 transition-opacity">
+    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+  </div>
+
+  <span class="hidden sm:inline-block sm:h-screen sm:align-middle"></span>&#8203;
+
+  <!-- Modal content -->
+  <div
+    class="overflow-hidden overflow-y-auto pb-4 pt-5 px-4 sm:p-6 max-h-[32rem] max-w-md sm:w-full md:max-w-xl bg-white dark:bg-neutral-700 rounded-lg shadow-xl transition-all transform"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modal-title"
+  >
+    <div class="hidden sm:block absolute right-0 top-0 pr-4 pt-4">
+      <button
+        type="button"
+        class="text-gray-400 dark:text-neutral-200 hover:text-gray-500 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+        data-action="close"
+      >
+        <span class="sr-only">Close</span>
+        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <div class="sm:flex sm:items-start">
+      @if(type == 'warning')
+        <div class="flex flex-shrink-0 items-center justify-center mx-auto sm:mx-0 h-12 w-12 sm:h-10 sm:w-10 bg-yellow-100 rounded-full">
+          <svg class="h-6 w-6 text-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
+          </svg>
+        </div>
+      @elseif(type == 'success')
+        <div class="flex flex-shrink-0 items-center justify-center mx-auto sm:mx-0 h-12 w-12 sm:h-10 sm:w-10 bg-green-100 rounded-full">
+          <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        </div>
+      @elseif(type == 'error')
+        <div class="flex flex-shrink-0 items-center justify-center mx-auto sm:mx-0 h-12 w-12 sm:h-10 sm:w-10 bg-red-100 rounded-full">
+          <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        </div>
+      @elseif(type == 'info')
+        <div class="flex flex-shrink-0 items-center justify-center mx-auto sm:mx-0 h-12 w-12 sm:h-10 sm:w-10 bg-blue-100 rounded-full">
+          <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"></path>
+          </svg>
+        </div>
+      @endif
+
+      <div class="mt-3 sm:ml-4 sm:mt-0 text-center sm:text-left">
+        <h3 id="modal-title" class="font-medium leading-6 text-gray-900 text-lg dark:text-neutral-100">
+          {{ title }}
+        </h3>
+        <div class="mt-2">
+          <p class="text-gray-500 text-sm dark:text-neutral-400">
+            {{ description }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm:flex sm:flex-row-reverse mt-5 space-y-4 sm:mt-4 md:space-y-0">
+      <button
+        type="button"
+        class="flex items-center primary-button {{ buttonBackground }} disabled:opacity-50 disabled:cursor-not-allowed"
+        data-action="confirm"
+      >
+        <span>{{ confirmationText }}</span>
+      </button>
+
+      @if(abortText)
+        <button
+          type="button"
+          class="mr-4 secondary-button"
+          data-action="cancel"
+        >
+          {{ abortText }}
+        </button>
+      @endif
+    </div>
+  </div>
+</div>
+@endif