release: WRNexusJS 0.3.3

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>
   }
 }