Pre Release New Changes

2026-07-31 16:30:13 +05:30
parent 358a520bc5
commit 3e565e8d03
189 changed files with 36727 additions and 17249 deletions
@@ -0,0 +1,121 @@
+component Modal {
+    props {
+        @event onConfirmed = function
+    }
+
+    state isOpen = false
+
+    functions {
+        function confirmed() {
+            isOpen = false; 
+            if(onConfirmed) {
+                onConfirmed()
+            }
+        }
+    }
+
+    view {
+        <main
+            class="flex min-h-screen items-center justify-center bg-[var(--wire-color-background)] p-6"
+        >
+            <button
+                type="button"
+                class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-3 font-semibold text-white shadow-lg transition hover:opacity-90"
+                @click="isOpen = true"
+            >
+                Open Transparent Modal
+            </button>
+
+            <div
+                class:hidden="isOpen == false"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 p-4 backdrop-blur-sm"
+            >
+                <div
+                    class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20"
+                >
+                    <div
+                        class="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-[var(--wire-color-primary)]/30 blur-3xl"
+                    >
+                    </div>
+
+                    <div
+                        class="pointer-events-none absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-cyan-500/20 blur-3xl"
+                    >
+                    </div>
+
+                    <div
+                        class="relative z-10"
+                    >
+                        <div
+                            class="mb-6 flex items-start justify-between gap-4"
+                        >
+                            <div>
+                                <p
+                                    class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--wire-color-primary)]"
+                                >
+                                    Transparent Modal
+                                </p>
+
+                                <h2
+                                    class="text-2xl font-bold text-[var(--wire-color-text)]"
+                                >
+                                    Welcome to WRNexusJS
+                                </h2>
+
+                                <p
+                                    class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted)]"
+                                >
+                                    This modal uses a transparent glass background with blur,
+                                    soft borders, and theme-aware colors.
+                                </p>
+                            </div>
+
+                            <button
+                                type="button"
+                                aria-label="Close modal"
+                                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xl text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
+                                @click="isOpen = false"
+                            >
+                                ×
+                            </button>
+                        </div>
+
+                        <div
+                            class="rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur-lg dark:border-white/10 dark:bg-black/10"
+                        >
+                            <p
+                                class="text-sm text-[var(--wire-color-text-muted)]"
+                            >
+                                You can place forms, confirmation messages, account details,
+                                images, or any other component inside this modal.
+                            </p>
+                        </div>
+
+                        <div
+                            class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+                        >
+                            <button
+                                type="button"
+                                class="rounded-xl border border-white/20 bg-white/10 px-5 py-2.5 font-medium text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
+                                @click="isOpen = false"
+                            >
+                                Cancel
+                            </button>
+
+                            <button
+                                type="button"
+                                class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 font-semibold text-white shadow-lg transition hover:opacity-90"
+                                @click="confirmed()"
+                            >
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    }
+
+    style {
+    }
+}