fix(ui): render polished SSR-safe component variants

2026-07-20 15:55:38 +05:30
parent 944f83d3f4
commit 54f5309fca
260 changed files with 917 additions and 348 deletions
@@ -1,43 +1,23 @@
 component Alert {
-    props {
-        class = ""
-        title = "Notice"
-        description = ""
-        variant = "info"
-        dismissible = false
-    }
+  props {
+    class = ""
+    title = "Notice"
+    description = ""
+    variant = "info"
+    dismissible = false
+  }

-    state visible = true
+  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'} {class}"
-        >
-            <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>
+  view {
+      <aside data-show="visible" role="alert" class="wire-alert wire-alert--{variant} wire-alert--rich {class}">
+        <span class="wire-alert__icon" aria-hidden="true"></span>
+        <div class="wire-alert__content">
+          {#if title}<h3 class="wire-alert__title">{title}</h3>{/if}
+          {#if description}<p class="wire-alert__body">{description}</p>{/if}
+          <slot />
        </div>
-    }
+        {#if dismissible}<button type="button" aria-label="Dismiss" @click="visible = false" class="wire-alert__dismiss">×</button>{/if}
+      </aside>
+  }
 }