release: WRNexusJS 0.2.52

2026-07-19 14:23:10 +05:30
parent 646d16f83d
commit 3bb096057e
64 changed files with 929 additions and 88 deletions
@@ -0,0 +1,88 @@
+component AnnouncementBar {
+    props {
+        badge = "New"
+        message = "WrNexus Organizations is now available."
+        description = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
+        href = "/organizations"
+        actionLabel = "Explore organizations"
+        ariaLabel = "Announcement"
+    }
+
+    state visible = true
+
+    view {
+        <aside
+            role="region"
+            aria-label="{ariaLabel}"
+            class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white"
+            class:hidden="!visible"
+        >
+            <!-- Decorative background -->
+            <div
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 overflow-hidden"
+            >
+                <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10"></div>
+
+                <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10"></div>
+            </div>
+
+            <div
+                class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
+            >
+                <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
+                    <!-- Badge -->
+                    <span
+                        class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
+                    >
+                        <span class="icon-[lucide--sparkles] h-3 w-3" aria-hidden="true" ></span>
+
+                        {badge}
+                    </span>
+
+                    <!-- Message -->
+                    <p
+                        class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
+                    >
+                        <span class="font-semibold text-slate-950 dark:text-white">
+                            {message}
+                        </span>
+
+                        <span class="hidden md:inline">
+                            {description}
+                        </span>
+                    </p>
+
+                    <!-- CTA -->
+                    <a
+                        href="{href}"
+                        class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
+                    >
+                        {actionLabel}
+
+                        <span class="icon-[lucide--arrow-right] h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+
+                <!-- Mobile CTA -->
+                <a
+                    href="{href}"
+                    aria-label="{actionLabel}"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
+                >
+                    <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" ></span>
+                </a>
+
+                <!-- Close -->
+                <button
+                    type="button"
+                    @click="visible = false"
+                    aria-label="Dismiss announcement"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
+                >
+                    <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                </button>
+            </div>
+        </aside>
+    }
+}