release: WRNexusJS 0.3.3

packages/ui/components/ChannelCard.wrn

@@ -4,31 +4,50 @@ component ChannelCard {
     description = ""
     href = ""
     icon = ""
+    actionLabel = ""
     class = ""
   }
 
   view {
     <article
-      class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}"
+      class="wire-channel-card group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm,var(--wire-shadow-1))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary)] hover:shadow-[var(--wire-shadow-md,var(--wire-shadow-1))] sm:p-7 {class}"
     >
       <div class="flex min-h-12 items-start justify-between gap-4">
         {#if icon}
-        <span class="inline-grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-xl text-[var(--wire-color-primary,#059669)] {icon}" aria-hidden="true"></span>
+          <span
+            class="wire-channel-card__icon grid size-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border)]"
+            aria-hidden="true"
+          >
+            <span class="{icon} block size-5"></span>
+          </span>
         {/if}
-        <div class="flex min-w-0 justify-end"><slot /></div>
+
+        <div class="flex min-w-0 flex-1 justify-end">
+          <slot />
+        </div>
       </div>
 
-      {#if title}<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
+      {#if title}
+        <h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
+          {title}
+        </h3>
+      {/if}
+
+      {#if description}
+        <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted,var(--wire-color-muted))]">
+          {description}
+        </p>
+      {/if}
 
       {#if href}
-      <a
-        href="{href}"
-        class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]"
-        aria-label="Explore {title}"
-      >
-        <span>Explore {title}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
-      </a>
+        <a
+          href="{href}"
+          class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border)] pt-5 text-sm font-semibold text-[var(--wire-color-primary)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
+          aria-label="Explore {title}"
+        >
+          <span>{actionLabel || "Explore " + title}</span>
+          <span class="transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">→</span>
+        </a>
       {/if}
     </article>
   }

packages/ui/components/PricingComparisonTable.wrn

@@ -3,7 +3,33 @@ component PricingComparisonTable {
     caption = "Plan comparison"
     plans = []
     features = []
+    featuredPlan = ""
     class = ""
   }
-  view { <div class="wire-table-wrap {class}" tabindex="0" role="region" aria-label="{caption}"><table class="wire-table wire-comparison-table"><caption class="wire-visually-hidden">{caption}</caption><thead><tr><th scope="col">Feature</th>{#each plans as plan}<th scope="col">{plan.name}</th>{/each}</tr></thead><tbody>{#each features as feature}<tr><th scope="row">{feature.label}</th>{#each feature.values as value}<td>{value}</td>{/each}</tr>{/each}</tbody></table></div> }
+
+  view {
+    <div class="wire-table-wrap rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] {class}" tabindex="0" role="region" aria-label="{caption}">
+      <table class="wire-table wire-comparison-table min-w-[56rem]">
+        <caption class="wire-visually-hidden">{caption}</caption>
+        <thead>
+          <tr>
+            <th scope="col">Feature</th>
+            {#each plans as plan}
+              <th scope="col">{plan.name}</th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody>
+          {#each features as feature}
+            <tr>
+              <th scope="row">{feature.label}</th>
+              {#each feature.values as value}
+                <td>{value}</td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  }
 }

packages/ui/components/PricingHero.wrn

@@ -6,5 +6,61 @@ component PricingHero {
     align = "start"
     class = ""
   }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+
+  view {
+    <section
+      class="relative overflow-hidden border-b border-[var(--wire-color-border)] bg-[var(--wire-color-background)] px-4 py-16 text-[var(--wire-color-text)] sm:px-6 sm:py-20 lg:px-8 lg:py-24 {class}"
+    >
+      <div
+        class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,var(--wire-color-primary-soft),transparent_68%)] opacity-70"
+        aria-hidden="true"
+      ></div>
+
+      <div class="relative mx-auto w-full max-w-7xl">
+        {#if align === "center"}
+          <header class="mx-auto max-w-4xl text-center">
+            {#if eyebrow}
+              <p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]">
+                {eyebrow}
+              </p>
+            {/if}
+
+            {#if title}
+              <h1 class="mt-5 text-4xl font-semibold tracking-[-0.045em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
+                {title}
+              </h1>
+            {/if}
+
+            {#if description}
+              <p class="mx-auto mt-6 max-w-3xl text-lg leading-8 text-[var(--wire-color-text-muted)] sm:text-xl">
+                {description}
+              </p>
+            {/if}
+          </header>
+        {:else}
+          <header class="max-w-4xl">
+            {#if eyebrow}
+              <p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]">
+                {eyebrow}
+              </p>
+            {/if}
+
+            {#if title}
+              <h1 class="mt-5 text-4xl font-semibold tracking-[-0.045em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
+                {title}
+              </h1>
+            {/if}
+
+            {#if description}
+              <p class="mt-6 max-w-3xl text-lg leading-8 text-[var(--wire-color-text-muted)] sm:text-xl">
+                {description}
+              </p>
+            {/if}
+          </header>
+        {/if}
+
+        <slot />
+      </div>
+    </section>
+  }
 }

packages/ui/components/PricingPlanCard.wrn

@@ -6,10 +6,59 @@ component PricingPlanCard {
     price = "₹0"
     period = "/month"
     featured = false
+    badgeLabel = "Most popular"
     ctaLabel = "Choose plan"
     ctaHref = "#"
   }
+
   view {
-    <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'} {class}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article>
+    <article class="relative flex h-full min-w-0 flex-col rounded-3xl border bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm)] transition duration-200 sm:p-7 {class}">
+      {#if featured}
+        <div class="mb-5">
+          <Badge label="{badgeLabel}" variant="brand" />
+        </div>
+      {/if}
+
+      <h3 class="text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
+        {name}
+      </h3>
+
+      {#if description}
+        <p class="mt-2 min-h-14 text-sm leading-6 text-[var(--wire-color-text-muted)]">
+          {description}
+        </p>
+      {/if}
+
+      <div class="mt-6 flex flex-wrap items-end gap-x-1.5 gap-y-1">
+        <span class="text-4xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text)]">
+          {price}
+        </span>
+        {#if period}
+          <span class="pb-1 text-sm text-[var(--wire-color-text-muted)]">
+            {period}
+          </span>
+        {/if}
+      </div>
+
+      <div class="mt-6 flex-1 border-t border-[var(--wire-color-border)] pt-6">
+        <slot />
+      </div>
+
+      {#if featured}
+        <a
+          href="{ctaHref}"
+          class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast)] no-underline shadow-[var(--wire-shadow-sm)] transition duration-200 hover:bg-[var(--wire-color-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
+        >
+          {ctaLabel}
+        </a>
+      {:else}
+        <a
+          href="{ctaHref}"
+          class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-[var(--wire-color-border-strong)] bg-[var(--wire-color-surface)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text)] no-underline transition duration-200 hover:border-[var(--wire-color-primary)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--wire-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
+        >
+          {ctaLabel}
+        </a>
+      {/if}
+    </article>
   }
 }

packages/ui/components/badge.wrn

@@ -3,8 +3,25 @@ component Badge {
     class = ""
     label = ""
     variant = "neutral"
+    size = "md"
   }
+
   view {
-    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot /></span>
+    <span class="wire-badge wire-badge--{variant} wire-badge--{size} {class}">
+      {#if variant === "success"}
+        <span class="size-1.5 rounded-full bg-[var(--wire-color-success)]" aria-hidden="true"></span>
+      {/if}
+      {#if variant === "warning"}
+        <span class="size-1.5 rounded-full bg-[var(--wire-color-warning)]" aria-hidden="true"></span>
+      {/if}
+      {#if variant === "danger"}
+        <span class="size-1.5 rounded-full bg-[var(--wire-color-danger)]" aria-hidden="true"></span>
+      {/if}
+      {#if variant === "brand"}
+        <span class="size-1.5 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
+      {/if}
+      <span>{label}</span>
+      <slot />
+    </span>
   }
 }

packages/ui/components/button.wrn

@@ -7,6 +7,8 @@ component Button {
     disabled = false
     loading = false
     icon = ""
+    iconPosition = "start"
+    fullWidth = false
     className = ""
   }
 
@@ -16,16 +18,23 @@ component Button {
       disabled="{disabled || loading}"
       aria-busy="{loading}"
       class="wire-btn wire-btn--{variant} wire-btn--{size} {className}"
+      class:w-full='{fullWidth}'
     >
       {#if loading}
         <span class="wire-spinner" aria-hidden="true"></span>
       {/if}
 
-      {#if icon && !loading}
-        <span class="{icon} size-4" aria-hidden="true"></span>
+      {#if icon && !loading && iconPosition === "start"}
+        <span class="{icon} size-4 shrink-0" aria-hidden="true"></span>
       {/if}
 
       <span>{label}</span>
+
+      {#if icon && !loading && iconPosition === "end"}
+        <span class="{icon} size-4 shrink-0" aria-hidden="true"></span>
+      {/if}
+
+      <slot />
     </button>
   }
-}
+}

packages/ui/components/table.wrn

@@ -3,8 +3,22 @@ component Table {
     class = ""
     caption = "Data table"
     responsive = true
+    striped = false
+    hoverable = true
+    compact = false
   }
+
   view {
-    <div class="w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800 {class}"><table class="w-full min-w-[640px] border-collapse text-left text-sm"><caption class="sr-only">{caption}</caption><slot /></table></div>
+    <div class="wire-table-wrap rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] {class}">
+      <table
+        class="wire-table min-w-[640px]"
+        class:wire-table--striped='{striped}'
+        class:wire-table--compact='{compact}'
+        class:wire-table--hoverable='{hoverable}'
+      >
+        <caption class="wire-visually-hidden">{caption}</caption>
+        <slot />
+      </table>
+    </div>
   }
 }