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,113 @@
+component SectionHeader {
+  props {
+    id = ""
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "left"
+    size = "default"
+    color = "primary"
+    headingLevel = 2
+    maxWidth = "3xl"
+    class = ""
+  }
+
+  view {
+    <header
+      data-ui-component="SectionHeader"
+      class='flex min-w-0 flex-col gap-5 {class}'
+      class:items-center='align === "center"'
+      class:text-center='align === "center"'
+      class:items-end='align === "right"'
+      class:text-right='align === "right"'
+      class:lg:flex-row='align === "split"'
+      class:lg:items-end='align === "split"'
+      class:lg:justify-between='align === "split"'
+    >
+      <div
+        class="min-w-0"
+        class:max-w-xl='maxWidth === "xl"'
+        class:max-w-2xl='maxWidth === "2xl"'
+        class:max-w-3xl='maxWidth === "3xl"'
+        class:max-w-4xl='maxWidth === "4xl"'
+        class:mx-auto='align === "center"'
+      >
+        <div class="mb-3 flex items-center gap-3" class:justify-center='align === "center"' class:justify-end='align === "right"'>
+          <slot name="icon"></slot>
+
+          {#if eyebrow}
+            <p
+              class="text-xs font-bold uppercase tracking-[0.18em]"
+              class:text-sm='size === "lg"'
+              class:text-[var(--wire-color-primary)]='color === "primary"'
+              class:text-[var(--wire-color-secondary)]='color === "secondary"'
+              class:text-[var(--wire-color-success)]='color === "success"'
+              class:text-[var(--wire-color-warning-text)]='color === "warning"'
+              class:text-[var(--wire-color-danger)]='color === "danger"'
+              class:text-[var(--wire-color-info)]='color === "info"'
+            >
+              {eyebrow}
+            </p>
+          {/if}
+        </div>
+
+        {#if headingLevel === 1}
+          <h1
+            id='{id}'
+            class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
+            class:text-3xl='size === "sm"'
+            class:text-4xl='size === "default" || size === "md"'
+            class:sm:text-5xl='size === "default" || size === "md"'
+            class:text-5xl='size === "lg"'
+            class:sm:text-6xl='size === "lg"'
+          >
+            {title}
+          </h1>
+        {:else if headingLevel === 3}
+          <h3
+            id='{id}'
+            class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
+            class:text-xl='size === "sm"'
+            class:text-2xl='size === "default" || size === "md"'
+            class:text-3xl='size === "lg"'
+          >
+            {title}
+          </h3>
+        {:else}
+          <h2
+            id='{id}'
+            class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
+            class:text-2xl='size === "sm"'
+            class:text-3xl='size === "default" || size === "md"'
+            class:sm:text-4xl='size === "default" || size === "md"'
+            class:text-4xl='size === "lg"'
+            class:sm:text-5xl='size === "lg"'
+          >
+            {title}
+          </h2>
+        {/if}
+
+        {#if description}
+          <p
+            class="mt-4 leading-7 text-[var(--wire-color-text-muted)]"
+            class:text-sm='size === "sm"'
+            class:text-base='size === "default" || size === "md"'
+            class:text-lg='size === "lg"'
+          >
+            {description}
+          </p>
+        {/if}
+
+        <slot></slot>
+      </div>
+
+      <div
+        class="flex shrink-0 flex-wrap items-center gap-3"
+        class:justify-center='align === "center"'
+        class:justify-end='align === "right" || align === "split"'
+      >
+        <slot name="actions"></slot>
+      </div>
+    </header>
+  }
+}