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
@@ -10,8 +10,9 @@ component Button {
    className = ""
  }
  view {
-    <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
-      <span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+    <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="wire-btn wire-btn--{variant} wire-btn--{size} {className}">
+      {#if loading}<span class="wire-spinner" aria-hidden="true"></span>{/if}
+      {#if icon && !loading}<span class="{icon} size-4" aria-hidden="true"></span>{/if}
      <span>{label}</span>
    </button>
  }