release: WRNexusJS 0.5.12

2026-07-30 18:59:01 +05:30
parent f37303b22d
commit d64e899993
462 changed files with 75432 additions and 2570 deletions
@@ -0,0 +1,131 @@
+component AnnouncementBar {
+  props {
+    badge = ""
+    badgeIcon = ""
+    message = "Announcement"
+    description = ""
+    icon = "icon-[lucide--megaphone]"
+    actionLabel = ""
+    actionHref = ""
+    actionIcon = ""
+    dismissible = false
+    dismissLabel = "Dismiss announcement"
+    sticky = false
+    compact = false
+    size = "default"
+    color = "primary"
+    variant = "soft"
+    role = "status"
+    live = "polite"
+    class = ""
+  }
+
+  state dismissed = false
+
+  view {
+    <aside
+      data-ui-component="AnnouncementBar"
+      role='{role}'
+      aria-live='{live}'
+      data-show='!dismissed'
+      class='z-40 w-full border-y border-[var(--wire-color-border)] {class}'
+      class:sticky='sticky'
+      class:top-0='sticky'
+      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
+      class:border-[var(--wire-color-primary-muted)]='variant === "soft" && color === "primary"'
+      class:bg-[var(--wire-color-info-soft)]='variant === "soft" && color === "info"'
+      class:border-[var(--wire-color-info-muted)]='variant === "soft" && color === "info"'
+      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
+      class:border-[var(--wire-color-success-muted)]='variant === "soft" && color === "success"'
+      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
+      class:border-[var(--wire-color-warning-muted)]='variant === "soft" && color === "warning"'
+      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
+      class:border-[var(--wire-color-danger-muted)]='variant === "soft" && color === "danger"'
+      class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
+      class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
+      class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
+      class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
+      class:bg-[var(--wire-color-surface-raised)]='variant === "default"'
+    >
+      <Container columns="1" maxWidth="xl" size="default">
+        <div
+          class="flex flex-col gap-4 py-4 sm:flex-row sm:items-center sm:justify-between"
+          class:py-2.5='compact'
+        >
+          <div class="flex min-w-0 items-start gap-3 sm:items-center">
+            {#if icon}
+              <span
+                class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-primary)] shadow-sm"
+                class:size-8='compact'
+                class:text-[var(--wire-color-danger)]='color === "danger"'
+                class:text-[var(--wire-color-warning-text)]='color === "warning"'
+                class:text-[var(--wire-color-success)]='color === "success"'
+                class:text-[var(--wire-color-info)]='color === "info"'
+              >
+                <span class='{icon + " size-5"}' aria-hidden="true"></span>
+              </span>
+            {/if}
+
+            <div class="min-w-0">
+              <div class="flex flex-wrap items-center gap-2">
+                {#if badge}
+                  <Badge
+                    label='{badge}'
+                    icon='{badgeIcon}'
+                    size="sm"
+                    color='{color}'
+                    variant='{variant === "solid" ? "outline" : "solid"}'
+                  />
+                {/if}
+
+                <p
+                  class="font-semibold"
+                  class:text-sm='compact || size === "sm"'
+                  class:text-base='!compact && size !== "sm"'
+                  class:text-[var(--wire-color-text)]='variant !== "solid"'
+                >
+                  {message}
+                </p>
+              </div>
+
+              {#if description && !compact}
+                <p
+                  class="mt-1 text-sm leading-6"
+                  class:text-[var(--wire-color-text-muted)]='variant !== "solid"'
+                  class:opacity-85='variant === "solid"'
+                >
+                  {description}
+                </p>
+              {/if}
+            </div>
+          </div>
+
+          <div class="flex shrink-0 items-center gap-2 sm:justify-end">
+            {#if actionLabel}
+              <TextLink
+                label='{actionLabel}'
+                href='{actionHref}'
+                icon='{actionIcon}'
+                iconPosition="start"
+                showArrow="true"
+                color='{variant === "solid" ? "neutral" : color}'
+                variant='{variant === "solid" ? "button" : "default"}'
+              />
+            {/if}
+
+            {#if dismissible}
+              <button
+                type="button"
+                aria-label='{dismissLabel}'
+                class="inline-flex size-9 items-center justify-center rounded-lg text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-raised)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
+                @click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }))'
+              >
+                <span class="icon-[lucide--x] size-4" aria-hidden="true"></span>
+              </button>
+            {/if}
+          </div>
+        </div>
+      </Container>
+    </aside>
+  }
+}