New UI Components

2026-07-18 16:00:13 +05:30
parent d22824fa62
commit 95ca1c0625
75 changed files with 201 additions and 200 deletions
@@ -1,16 +1 @@
-// Callout box. variant: info | success | danger | warning.
-// Optional `title`; body from `message` prop or the slot.
-component Alert {
-  props {
-    variant = "info"
-    title = ""
-    message = ""
-    class = ""
-  }
-  view {
-    <div class="wire-alert wire-alert--{variant} {class}" role="alert">
-      <div class="wire-alert__title">{title}</div>
-      <div class="wire-alert__body"><slot>{message}</slot></div>
-    </div>
-  }
-}
+component Alert { props { title = "Notice" description = "" variant = "info" dismissible = false } state visible = true view { <div data-show="visible" role="alert" class="flex items-start gap-3 rounded-2xl border p-4 {variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'}"><div class="min-w-0 flex-1"><h3 class="font-semibold">{title}</h3><p data-show="description" class="mt-1 text-sm opacity-80">{description}</p><div class="mt-2"><slot /></div></div><button data-show="dismissible" type="button" aria-label="Dismiss" @click="visible = false" class="rounded-lg p-1 hover:bg-black/5">×</button></div> } }