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,149 @@
+component Hero {
+  props {
+    eyebrow = ""
+    title = "Build something remarkable"
+    highlight = ""
+    description = ""
+    align = "left"
+    size = "default"
+    color = "primary"
+    variant = "default"
+    primaryLabel = ""
+    primaryHref = ""
+    primaryIcon = ""
+    secondaryLabel = ""
+    secondaryHref = ""
+    secondaryIcon = ""
+    tertiaryLabel = ""
+    tertiaryHref = ""
+    badges = []
+    trustItems = []
+    maxWidth = "xl"
+    class = ""
+  }
+
+  view {
+    <Section
+      spacing='{size === "compact" ? "md" : (size === "large" ? "xl" : "lg")}'
+      maxWidth='{maxWidth}'
+      variant='{variant === "solid" ? "solid" : (variant === "soft" ? "soft" : "default")}'
+      color='{color}'
+      class='overflow-hidden {class}'
+    >
+      <div
+        data-ui-component="Hero"
+        class="relative isolate"
+        class:text-center='align === "center"'
+      >
+        {#if variant === "gradient"}
+          <div
+            class="pointer-events-none absolute inset-0 -z-10 rounded-[2rem] opacity-80"
+            style="background: radial-gradient(circle at 15% 20%, var(--wire-color-primary-muted), transparent 35%), radial-gradient(circle at 85% 75%, var(--wire-color-secondary-muted), transparent 36%);"
+            aria-hidden="true"
+          ></div>
+        {/if}
+
+        <div
+          class="max-w-4xl"
+          class:mx-auto='align === "center"'
+          class:ml-auto='align === "right"'
+        >
+          <slot name="eyebrow"></slot>
+
+          {#if eyebrow}
+            <div
+              class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--wire-color-primary-muted)] bg-[var(--wire-color-primary-soft)] px-4 py-2 text-sm font-semibold text-[var(--wire-color-primary)]"
+            >
+              <span class="size-2 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
+              <span>{eyebrow}</span>
+            </div>
+          {/if}
+
+          <h1
+            class="font-bold leading-[1.06] tracking-[-0.04em]"
+            class:text-4xl='size === "compact"'
+            class:sm:text-5xl='size === "compact"'
+            class:text-5xl='size === "default"'
+            class:sm:text-6xl='size === "default"'
+            class:lg:text-7xl='size === "default" || size === "large"'
+            class:text-[var(--wire-color-text)]='variant !== "solid"'
+          >
+            <span>{title}</span>
+            {#if highlight}
+              <span class="block bg-gradient-to-r from-[var(--wire-color-primary)] to-[var(--wire-color-secondary)] bg-clip-text text-transparent">
+                {highlight}
+              </span>
+            {/if}
+          </h1>
+
+          {#if description}
+            <p
+              class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-text-muted)] sm:text-lg"
+              class:mx-auto='align === "center"'
+              class:ml-auto='align === "right"'
+              class:text-[var(--wire-color-on-primary)]='variant === "solid"'
+              class:opacity-85='variant === "solid"'
+            >
+              {description}
+            </p>
+          {/if}
+
+          {#if badges.length > 0}
+            <div class="mt-6 flex flex-wrap gap-2" class:justify-center='align === "center"' class:justify-end='align === "right"'>
+              {#each badges as badge}
+                <Badge
+                  label='{badge.label || badge.title || badge}'
+                  icon='{badge.icon || ""}'
+                  color='{badge.color || color}'
+                  variant='{badge.variant || "soft"}'
+                  size='{badge.size || "sm"}'
+                />
+              {/each}
+            </div>
+          {/if}
+
+          <div class="mt-8">
+            <HeroActions
+              actions='{[
+                { label: primaryLabel, href: primaryHref, icon: primaryIcon, variant: "default", color: color },
+                { label: secondaryLabel, href: secondaryHref, icon: secondaryIcon, variant: "outline", color: color },
+                { label: tertiaryLabel, href: tertiaryHref, variant: "ghost", color: color }
+              ]}'
+              align='{align}'
+              stackOnMobile="true"
+              fullWidthMobile="true"
+              size='{size === "compact" ? "default" : "lg"}'
+              color='{color}'
+            >
+              <slot name="actions"></slot>
+            </HeroActions>
+          </div>
+
+          {#if trustItems.length > 0}
+            <div
+              class="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-[var(--wire-color-text-muted)]"
+              class:justify-center='align === "center"'
+              class:justify-end='align === "right"'
+            >
+              {#each trustItems as item}
+                <span class="inline-flex items-center gap-2">
+                  <span class='{(item.icon || "icon-[lucide--check-circle-2]") + " size-4 text-[var(--wire-color-primary)]"}' aria-hidden="true"></span>
+                  <span>{item.label || item.title || item}</span>
+                </span>
+              {/each}
+            </div>
+          {/if}
+
+          <slot name="trust"></slot>
+          <slot></slot>
+        </div>
+
+        <div class="mt-10">
+          <slot name="visual"></slot>
+        </div>
+
+        <slot name="footer"></slot>
+      </div>
+    </Section>
+  }
+}