@stacksjs/defaults 0.70.229 → 0.70.230

package/resources/components/Dashboard/UI/Button.stx

@@ -1,16 +1,35 @@
 <script server>
 interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success'
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning'
   size?: 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   loading?: boolean
+  pressed?: boolean
+  interaction?: 'action' | 'toggle'
   fullWidth?: boolean
   iconOnly?: boolean
+  tag?: 'button' | 'a'
   href?: string
+  download?: string
+  target?: string
+  rel?: string
+  ariaLabel?: string
   type?: string
+  class?: string
 }
 
-const { variant = 'primary', size = 'md', disabled = false, loading = false, fullWidth = false, iconOnly = false, href = '', type = 'button' } = defineProps<ButtonProps>()
+const {
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  interaction = 'action',
+  fullWidth = false,
+  iconOnly = false,
+  class: customClass = '',
+  tag = 'button',
+  href = '',
+} = defineProps<ButtonProps>()
 
 // Variant classes
 const variantClasses = {
@@ -19,7 +38,8 @@ const variantClasses = {
   outline: 'bg-transparent text-neutral-700 dark:text-neutral-200 border border-black/15 dark:border-white/15 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/10',
   ghost: 'bg-transparent text-neutral-600 dark:text-neutral-300 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/12',
   danger: 'bg-gradient-to-b from-red-500 to-red-600 text-white shadow-sm shadow-red-600/25 hover:from-red-400 hover:to-red-500 active:from-red-600 active:to-red-700',
-  success: 'bg-gradient-to-b from-green-500 to-green-600 text-white shadow-sm shadow-green-600/25 hover:from-green-400 hover:to-green-500 active:from-green-600 active:to-green-700'
+  success: 'bg-gradient-to-b from-green-500 to-green-600 text-white shadow-sm shadow-green-600/25 hover:from-green-400 hover:to-green-500 active:from-green-600 active:to-green-700',
+  warning: 'bg-gradient-to-b from-orange-500 to-orange-600 text-white shadow-sm shadow-orange-600/25 hover:from-orange-400 hover:to-orange-500 active:from-orange-600 active:to-orange-700'
 }
 
 // Size classes
@@ -43,31 +63,72 @@ const buttonClass = [
   'transition-all duration-150',
   'select-none',
   'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-0',
-  'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none',
+  'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none aria-disabled:opacity-40 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none',
   'active:scale-[0.98]',
+  interaction === 'toggle'
+    ? 'aria-pressed:text-blue-700 dark:aria-pressed:text-blue-300 aria-pressed:bg-blue-50 dark:aria-pressed:bg-blue-950/40 aria-pressed:border-blue-200 dark:aria-pressed:border-blue-900'
+    : '',
+  customClass,
   fullWidth ? 'w-full' : '',
   iconOnly ? iconOnlySizes[size] : sizeClasses[size],
   variantClasses[variant]
-].join(' ')
+].filter(Boolean).join(' ')
 </script>
-@if(href && href.length > 0)
-    <a href="{{ href }}" class="{{ buttonClass }}" aria-disabled="{{ disabled ? 'true' : 'false' }}">
-      @if(loading)
-        <svg class="animate-spin h-3.5 w-3.5 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-      @endif
+<script client>
+const liveDisabled = useReactiveProp('disabled', false)
+const liveLoading = useReactiveProp('loading', false)
+const livePressed = useReactiveProp('pressed', false)
+const liveHref = useReactiveProp('href', '')
+const liveDownload = useReactiveProp('download', '')
+const liveTarget = useReactiveProp('target', '')
+const liveRel = useReactiveProp('rel', '')
+const liveType = useReactiveProp('type', 'button')
+const liveAriaLabel = useReactiveProp('ariaLabel', '')
+</script>
+@if(tag === 'a' || (href && href.length > 0))
+    <a
+      :href="liveDisabled() || liveLoading() ? undefined : liveHref()"
+      :download="liveDownload() || undefined"
+      :aria-label="liveAriaLabel() || undefined"
+      class="{{ buttonClass }}"
+      :target="liveTarget() || undefined"
+      :rel="liveRel() || undefined"
+      :aria-busy="liveLoading() ? 'true' : 'false'"
+      :aria-disabled="liveDisabled() || liveLoading() ? 'true' : 'false'"
+      :tabindex="liveDisabled() || liveLoading() ? -1 : undefined"
+    >
+      <template :if="liveLoading()">
+        <span aria-hidden="true" class="animate-spin h-3.5 w-3.5 i-hugeicons-loading-03 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}"></span>
+      </template>
       <slot />
     </a>
   @else
-    <button type="{{ type }}" class="{{ buttonClass }}" {{ (disabled || loading) ? 'disabled' : '' }}>
-      @if(loading)
-        <svg class="animate-spin h-3.5 w-3.5 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-      @endif
-      <slot />
-    </button>
+    @if(interaction === 'toggle')
+      <button
+        :type="liveType()"
+        class="{{ buttonClass }}"
+        :aria-label="liveAriaLabel() || undefined"
+        :aria-busy="liveLoading() ? 'true' : 'false'"
+        :aria-pressed="String(livePressed())"
+        :disabled="liveDisabled() || liveLoading()"
+      >
+        <template :if="liveLoading()">
+          <span aria-hidden="true" class="animate-spin h-3.5 w-3.5 i-hugeicons-loading-03 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}"></span>
+        </template>
+        <slot />
+      </button>
+    @else
+      <button
+        :type="liveType()"
+        class="{{ buttonClass }}"
+        :aria-label="liveAriaLabel() || undefined"
+        :aria-busy="liveLoading() ? 'true' : 'false'"
+        :disabled="liveDisabled() || liveLoading()"
+      >
+        <template :if="liveLoading()">
+          <span aria-hidden="true" class="animate-spin h-3.5 w-3.5 i-hugeicons-loading-03 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}"></span>
+        </template>
+        <slot />
+      </button>
+    @endif
   @endif

package/resources/components/Dashboard/UI/Card.stx

@@ -1,5 +1,7 @@
 <script server>
 interface CardProps {
+  title?: string
+  subtitle?: string
   variant?: 'default' | 'elevated' | 'outline' | 'ghost' | 'vibrancy'
   padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
   rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
@@ -7,14 +9,22 @@ interface CardProps {
   clickable?: boolean
 }
 
-const { variant = 'default', padding = 'md', rounded = 'lg', hoverable = false, clickable = false } = defineProps<CardProps>()
+const {
+  title = '',
+  subtitle = '',
+  variant = 'default',
+  padding = 'md',
+  rounded = 'lg',
+  hoverable = false,
+  clickable = false,
+} = defineProps<CardProps>()
 
 const variantClasses = {
   default: 'bg-white dark:bg-neutral-800/90 border border-stone-200/80 dark:border-white/5 shadow-sm shadow-stone-200/50 dark:shadow-black/20',
-  elevated: 'bg-white dark:bg-neutral-800 shadow-lg shadow-stone-200/60 dark:shadow-black/30 border border-stone-200/60 dark:border-white/10',
+  elevated: 'bg-white dark:bg-neutral-800 border border-stone-200/60 dark:border-white/10 shadow-lg shadow-stone-200/60 dark:shadow-black/30',
   outline: 'bg-transparent border border-stone-200/80 dark:border-white/10',
   ghost: 'bg-stone-50/50 dark:bg-white/[0.05] border border-transparent',
-  vibrancy: 'bg-white/60 dark:bg-neutral-800/60 backdrop-blur-xl backdrop-saturate-150 border border-stone-200/60 dark:border-white/10 shadow-sm shadow-stone-200/50'
+  vibrancy: 'bg-white/60 dark:bg-neutral-800/60 border border-stone-200/60 dark:border-white/10 backdrop-blur-xl backdrop-saturate-150 shadow-sm shadow-stone-200/50',
 }
 
 const paddingClasses = {
@@ -22,7 +32,7 @@ const paddingClasses = {
   sm: 'p-2.5',
   md: 'p-4',
   lg: 'p-5',
-  xl: 'p-6'
+  xl: 'p-6',
 }
 
 const roundedClasses = {
@@ -31,21 +41,52 @@ const roundedClasses = {
   lg: 'rounded-xl',
   xl: 'rounded-2xl',
   '2xl': 'rounded-[20px]',
-  '3xl': 'rounded-[24px]'
+  '3xl': 'rounded-[24px]',
 }
 
-const hoverClass = (hoverable || clickable) ? 'hover:shadow-md hover:shadow-stone-300/60 dark:hover:shadow-black/25 hover:border-stone-300/80 dark:hover:border-white/15' : ''
+const hoverClass = hoverable || clickable
+  ? 'hover:border-stone-300/80 dark:hover:border-white/15 hover:shadow-md hover:shadow-stone-300/60 dark:hover:shadow-black/25'
+  : ''
 const clickableClass = clickable ? 'cursor-pointer active:scale-[0.98] active:shadow-sm' : ''
-
 const cardClass = [
-  'transition-all duration-150',
+  'overflow-hidden transition-all duration-150',
   variantClasses[variant],
-  paddingClasses[padding],
   roundedClasses[rounded],
   hoverClass,
-  clickableClass
+  clickableClass,
 ].join(' ')
 </script>
-<div class="{{ cardClass }}">
-  <slot />
-</div>
+
+<article class="{{ cardClass }}" @if(clickable) role="button" tabindex="0" @endif>
+  @if($slots.header)
+    <header class="px-5 py-4 border-b border-stone-200/80 dark:border-white/5">
+      <slot name="header" />
+    </header>
+  @elseif(title || subtitle || $slots.actions)
+    <header class="flex gap-4 items-start justify-between px-5 py-4 border-b border-stone-200/80 dark:border-white/5">
+      <div>
+        @if(title)
+          <h3 class="font-semibold text-base text-neutral-900 dark:text-white">{{ title }}</h3>
+        @endif
+        @if(subtitle)
+          <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ subtitle }}</p>
+        @endif
+      </div>
+      @if($slots.actions)
+        <div class="flex gap-2 items-center">
+          <slot name="actions" />
+        </div>
+      @endif
+    </header>
+  @endif
+
+  <div class="{{ paddingClasses[padding] }}">
+    <slot />
+  </div>
+
+  @if($slots.footer)
+    <footer class="px-4 py-3 bg-neutral-50/50 dark:bg-white/[0.025] border-stone-200/80 border-t dark:border-white/5">
+      <slot name="footer" />
+    </footer>
+  @endif
+</article>

package/resources/components/Dashboard/UI/ChartCard.stx

@@ -25,10 +25,7 @@ const { title = '', subtitle = '', height = '300px', loading = false } = defineP
   <div class="relative p-5" style="height: {{ height }}">
     @if(loading)
       <div class="flex absolute inset-0 z-10 items-center justify-center bg-white/80 dark:bg-neutral-800/80 rounded-b-xl">
-        <svg class="h-6 w-6 text-blue-500 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
+        <span aria-hidden="true" class="h-6 w-6 text-blue-500 animate-spin i-hugeicons-loading-03"></span>
       </div>
     @endif
     <slot />

package/resources/components/Dashboard/UI/Checkbox.stx

@@ -1,74 +1,90 @@
-<script server>
-interface CheckboxProps {
-  checked?: boolean
-  label?: string
-  description?: string
-  disabled?: boolean
-  indeterminate?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  error?: string
-  name?: string
-  id?: string
-}
+<script client>
+type CheckboxSize = 'sm' | 'md' | 'lg'
 
-const { checked = false, label = '', description = '', disabled = false, indeterminate = false, size = 'md', error = '', name = '', id = '' } = defineProps<CheckboxProps>()
+const liveChecked = useReactiveProp('checked', false)
+const liveLabel = useReactiveProp('label', '')
+const liveDescription = useReactiveProp('description', '')
+const liveDisabled = useReactiveProp('disabled', false)
+const liveIndeterminate = useReactiveProp('indeterminate', false)
+const liveSize = useReactiveProp('size', 'md' as CheckboxSize)
+const liveError = useReactiveProp('error', '')
+const liveName = useReactiveProp('name', '')
+const liveId = useReactiveProp('id', '')
+const liveAriaLabel = useReactiveProp('ariaLabel', '')
+const emit = defineEmits()
+const generatedId = useId('checkbox')
 
-const sizeClasses = {
-  sm: { checkbox: 'h-4 w-4', text: 'text-sm', desc: 'text-xs' },
-  md: { checkbox: 'h-5 w-5', text: 'text-sm', desc: 'text-sm' },
-  lg: { checkbox: 'h-6 w-6', text: 'text-base', desc: 'text-sm' }
+const sizeClasses: Record<CheckboxSize, { control: string, icon: string, label: string, description: string }> = {
+  sm: { control: 'h-4 w-4', icon: 'h-3 w-3', label: 'text-sm', description: 'text-xs' },
+  md: { control: 'h-5 w-5', icon: 'h-3.5 w-3.5', label: 'text-sm', description: 'text-sm' },
+  lg: { control: 'h-6 w-6', icon: 'h-4 w-4', label: 'text-base', description: 'text-sm' },
 }
 
-const checkboxId = id || 'checkbox-' + Math.random().toString(36).slice(2, 11)
+const checkboxId = derived(() => liveId() || generatedId)
+const hasCopy = derived(() => Boolean(liveLabel() || liveDescription()))
+const wrapperClass = derived(() => [
+  'relative flex items-start',
+  hasCopy() ? 'gap-3' : '',
+  liveDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+].join(' '))
+const controlClass = derived(() => [
+  sizeClasses[liveSize()]?.control || sizeClasses.md.control,
+  'relative mt-0.5 flex shrink-0 items-center justify-center rounded border-2 transition-all duration-150',
+  liveChecked() || liveIndeterminate()
+    ? 'border-blue-600 bg-blue-600'
+    : 'border-neutral-300 bg-white hover:border-blue-400 dark:border-neutral-600 dark:bg-neutral-900 dark:hover:border-blue-500',
+  liveError() ? 'border-red-500' : '',
+  liveDisabled() ? 'opacity-60' : '',
+].join(' '))
+const iconClass = derived(() => [
+  sizeClasses[liveSize()]?.icon || sizeClasses.md.icon,
+  liveIndeterminate() ? 'i-hugeicons-minus-sign' : 'i-hugeicons-tick-02',
+  'text-white',
+].join(' '))
+const labelClass = derived(() => [
+  sizeClasses[liveSize()]?.label || sizeClasses.md.label,
+  'font-medium',
+  liveDisabled() ? 'text-neutral-400 dark:text-neutral-500' : 'text-neutral-700 dark:text-neutral-200',
+].join(' '))
+const descriptionClass = derived(() => [
+  sizeClasses[liveSize()]?.description || sizeClasses.md.description,
+  'mt-0.5',
+  liveDisabled() ? 'text-neutral-300 dark:text-neutral-600' : 'text-neutral-500 dark:text-neutral-400',
+].join(' '))
+
+function handleChange(event: Event): void {
+  const target = event.target as HTMLInputElement
+  liveIndeterminate.set(target.indeterminate)
+  emit('update:checked', target.checked)
+  emit('update:indeterminate', target.indeterminate)
+  emit('change', target.checked)
+}
 </script>
-<div class="relative flex {{ label || description ? 'gap-3' : '' }} {{ disabled ? 'opacity-60 cursor-not-allowed' : '' }}">
-    <div class="flex items-start pt-0.5">
-      <input
-        type="checkbox"
-        id="{{ checkboxId }}"
-        name="{{ name }}"
-        class="sr-only peer"
-        @if(checked) checked @endif
-        @if(disabled) disabled @endif
-      >
-      <label
-        for="{{ checkboxId }}"
-        class="{{ sizeClasses[size].checkbox }} relative rounded transition-all duration-150 flex items-center justify-center border-2 {{ disabled ? '' : 'cursor-pointer' }} peer-checked:bg-blue-600 peer-checked:border-blue-600 bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-500 {{ error ? 'border-red-500' : '' }}"
-      >
-        <svg class="{{ sizeClasses[size].checkbox }} text-white hidden peer-checked:block" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-        </svg>
-      </label>
-    </div>
 
-    @if(label || description)
-      <div class="flex-1 min-w-0">
-        @if(label)
-          <label
-            for="{{ checkboxId }}"
-            class="{{ sizeClasses[size].text }} font-medium {{ disabled ? 'text-neutral-400 dark:text-neutral-500 cursor-not-allowed' : 'text-neutral-700 dark:text-neutral-200 cursor-pointer' }}"
-          >
-            {{ label }}
-          </label>
-        @endif
-        @if(description)
-          <p class="{{ sizeClasses[size].desc }} mt-0.5 {{ disabled ? 'text-neutral-300 dark:text-neutral-600' : 'text-neutral-500 dark:text-neutral-400' }}">
-            {{ description }}
-          </p>
-        @endif
-      </div>
-    @endif
-  </div>
+<div>
+  <label :class="wrapperClass()">
+    <input
+      :id="checkboxId()"
+      type="checkbox"
+      :name="liveName() || null"
+      :aria-label="liveAriaLabel() || liveLabel() || 'Checkbox'"
+      :aria-invalid="liveError() ? 'true' : null"
+      class="sr-only"
+      x-model="liveChecked"
+      :indeterminate="liveIndeterminate()"
+      :disabled="liveDisabled()"
+      @change="handleChange"
+    >
 
-  @if(error)
-    <p class="mt-1.5 text-red-600 text-sm dark:text-red-400">{{ error }}</p>
-  @endif
-<style>
-input:checked + label {
-  background-color: rgb(37 99 235);
-  border-color: rgb(37 99 235);
-}
-input:checked + label svg {
-  display: block;
-}
-</style>
+    <span aria-hidden="true" :class="controlClass()">
+      <span :if="liveChecked() || liveIndeterminate()" :class="iconClass()"></span>
+    </span>
+
+    <span :if="hasCopy()" class="flex-1 min-w-0">
+      <span :if="liveLabel()" class="block" :class="labelClass()" :text="liveLabel()"></span>
+      <span :if="liveDescription()" class="block" :class="descriptionClass()" :text="liveDescription()"></span>
+    </span>
+  </label>
+
+  <p :if="liveError()" class="mt-1.5 text-red-600 text-sm dark:text-red-400" :text="liveError()"></p>
+</div>

package/resources/components/Dashboard/UI/ConfirmDialog.stx

@@ -1,74 +1,88 @@
-<script server>
-interface ConfirmDialogProps {
-  isOpen?: boolean
-  title?: string
-  description?: string
-  confirmLabel?: string
-  cancelLabel?: string
-  variant?: 'danger' | 'warning'
+<script client>
+type ConfirmVariant = 'danger' | 'warning'
+
+const open = useReactiveProp('isOpen', false)
+const title = useReactiveProp('title', 'Are you sure?')
+const description = useReactiveProp('description', 'This action cannot be undone.')
+const confirmLabel = useReactiveProp('confirmLabel', 'Delete')
+const cancelLabel = useReactiveProp('cancelLabel', 'Cancel')
+const variant = useReactiveProp('variant', 'danger' as ConfirmVariant)
+const busy = useReactiveProp('busy', false)
+const emit = defineEmits()
+
+function close(): void {
+  if (!busy())
+    emit('close')
 }
 
-const { isOpen = false, title = 'Are you sure?', description = 'This action cannot be undone.', confirmLabel = 'Delete', cancelLabel = 'Cancel', variant = 'danger' } = defineProps<ConfirmDialogProps>()
+function confirm(): void {
+  if (!busy())
+    emit('confirm')
+}
 
-const iconClasses = {
-  danger: 'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
-  warning: 'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400'
+function iconClass(): string {
+  return variant() === 'warning'
+    ? 'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400'
+    : 'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400'
 }
 
-const iconNames = {
-  danger: 'i-hugeicons-alert-02',
-  warning: 'i-hugeicons-alert-circle'
+function iconName(): string {
+  return variant() === 'warning' ? 'i-hugeicons-alert-circle' : 'i-hugeicons-alert-02'
 }
+
 </script>
-@if(isOpen)
-  <div ref="pageRoot" class="fixed inset-0 overflow-y-auto z-50">
-    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" data-modal-overlay></div>
 
-    <div class="flex items-center justify-center p-4 min-h-full">
-      <div class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl">
+<template :if="open()">
+  <div class="fixed inset-0 overflow-y-auto z-[55] dashboard-modal-layer" @keydown.escape="close">
+    <button type="button" class="fixed inset-0 w-full bg-black/50 backdrop-blur-sm cursor-default" aria-label="Close confirmation dialog" @click="close"></button>
+
+    <div class="flex relative items-center justify-center p-4 min-h-full">
+      <section
+        role="alertdialog"
+        aria-modal="true"
+        :aria-label="title()"
+        class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
+      >
         <div class="flex gap-4 items-start">
-          <div class="p-2.5 rounded-lg flex-shrink-0 {{ iconClasses[variant] }}">
-            <div class="{{ iconNames[variant] }} w-5 h-5"></div>
+          <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
+            <span class="block h-5 w-5" :class="iconName()"></span>
           </div>
           <div class="flex-1 min-w-0">
             <h3 class="font-semibold text-lg text-neutral-900 dark:text-white">
-              {{ title }}
+              {{ title() }}
             </h3>
             <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
-              {{ description }}
+              {{ description() }}
             </p>
           </div>
         </div>
 
         <div class="flex gap-2 items-center justify-end mt-6">
-          <button
-            type="button"
-            class="inline-flex items-center justify-center px-3 py-1.5 font-medium text-[13px] text-neutral-800 tracking-tight dark:text-neutral-100 bg-white/80 dark:bg-white/10 hover:bg-white dark:hover:bg-white/15 border border-black/10 rounded-lg dark:border-white/10 shadow-sm duration-150 transition-all"
-            data-modal-close
+          <Button
+            variant="secondary"
+            :disabled="busy()"
+            @click="close"
+          >
+            {{ cancelLabel() }}
+          </Button>
+          <Button
+            :if="variant() === 'warning'"
+            variant="warning"
+            :loading="busy()"
+            @click="confirm"
           >
-            {{ cancelLabel }}
-          </button>
-          <button
-            type="button"
-            class="inline-flex items-center justify-center px-3 py-1.5 font-medium text-[13px] text-white tracking-tight bg-gradient-to-b from-red-500 to-red-600 hover:from-red-400 hover:to-red-500 rounded-lg shadow-red-600/25 shadow-sm duration-150 transition-all"
-            data-confirm-action
+            {{ confirmLabel() }}
+          </Button>
+          <Button
+            :if="variant() !== 'warning'"
+            variant="danger"
+            :loading="busy()"
+            @click="confirm"
           >
-            {{ confirmLabel }}
-          </button>
+            {{ confirmLabel() }}
+          </Button>
         </div>
-      </div>
+      </section>
     </div>
   </div>
-@endif
-<script client>
-var _root = useRef('pageRoot')
-onMount(function() {
-  var el = _root.current
-  if (!el) return
-  el.querySelectorAll('[data-modal-overlay], [data-modal-close]').forEach(function(item) {
-    item.addEventListener('click', function() {
-      item.closest('.fixed.inset-0')?.remove()
-    })
-  })
-})
-</script>
+</template>