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 FeatureCard {
+  props {
+    icon = ""
+    title = "Feature"
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    actionIcon = ""
+    badge = ""
+    badgeColor = "primary"
+    size = "default"
+    color = "primary"
+    variant = "default"
+    hover = "lift"
+    align = "left"
+    disabled = false
+    class = ""
+  }
+
+  view {
+    <article
+      data-ui-component="FeatureCard"
+      aria-disabled='{disabled}'
+      class='group relative flex h-full min-w-0 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] shadow-sm transition duration-200 {class}'
+      class:p-4='size === "sm"'
+      class:p-6='size === "default" || size === "md"'
+      class:p-8='size === "lg"'
+      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
+      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
+      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
+      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
+      class:bg-transparent='variant === "ghost"'
+      class:border-transparent='variant === "ghost"'
+      class:shadow-none='variant === "ghost" || variant === "outline"'
+      class:hover:-translate-y-1='hover === "lift" && !disabled'
+      class:hover:shadow-xl='(hover === "lift" || hover === "shadow") && !disabled'
+      class:hover:border-[var(--wire-color-primary)]='(hover === "lift" || hover === "border") && !disabled'
+      class:text-center='align === "center"'
+      class:items-center='align === "center"'
+      class:text-right='align === "right"'
+      class:items-end='align === "right"'
+      class:opacity-60='disabled'
+      class:pointer-events-none='disabled'
+    >
+      <div class="flex w-full items-start justify-between gap-4">
+        <div
+          class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
+          class:bg-[var(--wire-color-success-soft)]='color === "success"'
+          class:text-[var(--wire-color-success)]='color === "success"'
+          class:bg-[var(--wire-color-warning-soft)]='color === "warning"'
+          class:text-[var(--wire-color-warning-text)]='color === "warning"'
+          class:bg-[var(--wire-color-danger-soft)]='color === "danger"'
+          class:text-[var(--wire-color-danger)]='color === "danger"'
+          class:bg-[var(--wire-color-info-soft)]='color === "info"'
+          class:text-[var(--wire-color-info)]='color === "info"'
+          class:size-10='size === "sm"'
+          class:size-14='size === "lg"'
+        >
+          <slot name="icon"></slot>
+          {#if icon}
+            <span class='{icon + " size-6"}' aria-hidden="true"></span>
+          {/if}
+        </div>
+
+        {#if badge}
+          <Badge
+            label='{badge}'
+            size="sm"
+            color='{badgeColor}'
+            variant="soft"
+          />
+        {/if}
+      </div>
+
+      <h3 class="mt-5 text-lg font-bold leading-tight text-[var(--wire-color-text)]" class:text-xl='size === "lg"'>
+        {title}
+      </h3>
+
+      {#if description}
+        <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted)]" class:text-base='size === "lg"'>
+          {description}
+        </p>
+      {/if}
+
+      <slot></slot>
+
+      <div class="mt-6 flex w-full items-center justify-between gap-3">
+        <slot name="footer"></slot>
+
+        {#if href && actionLabel}
+          <TextLink
+            label='{actionLabel}'
+            href='{href}'
+            icon='{actionIcon}'
+            iconPosition="start"
+            showArrow="true"
+            size="sm"
+            color='{color}'
+            class="ml-auto"
+          />
+        {/if}
+      </div>
+
+      {#if href}
+        <a
+          href='{href}'
+          aria-label='{title}'
+          class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--wire-color-focus)]"
+        ></a>
+      {/if}
+    </article>
+  }
+}