release: WRNexusJS 0.2.79
This commit is contained in:
@@ -11,37 +11,57 @@ component AnalyticsDashboardPreview {
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="px-4 sm:px-6 lg:px-8 {class}">
|
||||
<div class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[1.25fr_0.75fr] lg:items-center lg:p-8">
|
||||
<section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
|
||||
<div
|
||||
class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
|
||||
>
|
||||
<div>
|
||||
{#if image}
|
||||
<img src="{image}" alt="{alt}" class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover" />
|
||||
<img
|
||||
src="{image}"
|
||||
alt="{alt}"
|
||||
class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] p-4 sm:p-5" role="img" aria-label="Delivery trend rising over seven days">
|
||||
<div class="flex items-center justify-between gap-4 text-sm">
|
||||
<strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
|
||||
<span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
|
||||
</div>
|
||||
<svg class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]" viewBox="0 0 700 250" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
|
||||
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
|
||||
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
|
||||
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
|
||||
</svg>
|
||||
<div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-text-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
|
||||
<div
|
||||
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
|
||||
role="img"
|
||||
aria-label="Delivery trend rising over seven days"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4 text-sm">
|
||||
<strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
|
||||
<span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
|
||||
</div>
|
||||
<svg
|
||||
class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
|
||||
viewBox="0 0 700 250"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="wire-analytics-area"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
|
||||
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
|
||||
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
|
||||
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
|
||||
</svg>
|
||||
<div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
|
||||
{#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
|
||||
{#if description}<p class="mt-4 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
||||
<div class="mt-5"><slot /></div>
|
||||
{#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
|
||||
</div>
|
||||
|
||||
@@ -8,21 +8,27 @@ component ChannelCard {
|
||||
}
|
||||
|
||||
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-sm,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-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
|
||||
<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}"
|
||||
>
|
||||
<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="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>
|
||||
{/if}
|
||||
<div class="flex min-w-0 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-text-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{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,#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>
|
||||
{/if}
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -4,22 +4,32 @@ component ChannelFlow {
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}" role="img" aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks">
|
||||
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
|
||||
<div
|
||||
class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}"
|
||||
role="img"
|
||||
aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks"
|
||||
>
|
||||
<div
|
||||
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
|
||||
>
|
||||
<span class="icon-[lucide--webhook] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
|
||||
<strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Customer event</strong>
|
||||
<small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">order.shipped</small>
|
||||
<small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">order.shipped</small>
|
||||
</div>
|
||||
<span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
|
||||
|
||||
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
|
||||
<div
|
||||
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
|
||||
>
|
||||
<span class="icon-[lucide--shield-check] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
|
||||
<strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Profile + consent</strong>
|
||||
<small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Eligibility checked</small>
|
||||
<small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Eligibility checked</small>
|
||||
</div>
|
||||
<span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3">
|
||||
<div
|
||||
class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3"
|
||||
>
|
||||
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">WhatsApp</span>
|
||||
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">SMS</span>
|
||||
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Email</span>
|
||||
@@ -27,10 +37,12 @@ component ChannelFlow {
|
||||
</div>
|
||||
<span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
|
||||
|
||||
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
|
||||
<div
|
||||
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
|
||||
>
|
||||
<span class="icon-[lucide--chart-no-axes-combined] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
|
||||
<strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Delivery + analytics</strong>
|
||||
<small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Webhook emitted</small>
|
||||
<small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Webhook emitted</small>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
component CodeBlock {
|
||||
props {
|
||||
language = "text"
|
||||
title = ""
|
||||
code = ""
|
||||
copyable = true
|
||||
class = ""
|
||||
}
|
||||
props {
|
||||
language = "text"
|
||||
title = ""
|
||||
code = ""
|
||||
copyable = true
|
||||
class = ""
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="overflow-hidden bg-[var(--wire-color-code-background,#020617)] text-[var(--wire-color-code-text,#e2e8f0)] {class}">
|
||||
|
||||
@@ -4,7 +4,9 @@ component CodeTabs {
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] {class}">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] {class}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ component FeatureTabs {
|
||||
}
|
||||
|
||||
view {
|
||||
<article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-sm,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-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
|
||||
<article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] 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}">
|
||||
{#if image}
|
||||
<img src="{image}" alt="{alt}" class="aspect-[16/9] w-full border-b border-[var(--wire-color-border,#e2e8f0)] object-cover" />
|
||||
{/if}
|
||||
@@ -19,7 +19,7 @@ component FeatureTabs {
|
||||
<div class="flex flex-1 flex-col p-6">
|
||||
{#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
|
||||
{#if title}<h3 class="mt-4 text-xl font-semibold leading-snug 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-text-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
||||
<div class="mt-5"><slot /></div>
|
||||
{#if href}
|
||||
<a href="{href}" class="mt-6 inline-flex items-center gap-2 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)]">
|
||||
|
||||
@@ -11,25 +11,58 @@ component FinalCTA {
|
||||
view {
|
||||
<span class="contents {class}">
|
||||
{#if href}
|
||||
{#if variant === "primary"}
|
||||
<a
|
||||
href="{href}"
|
||||
class=' group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background,#ffffff)] {variant === "primary" ? "bg-[var(--wire-color-primary,#059669)] text-[var(--wire-color-primary-contrast,#ffffff)] hover:bg-[var(--wire-color-primary-hover,#047857)]" : "border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] text-[var(--wire-color-text,#0f172a)] hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)]"} '
|
||||
class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] no-underline transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
|
||||
aria-disabled="{disabled}"
|
||||
>
|
||||
<span>{label}</span>
|
||||
<span class="transition-transform duration-200 group-hover:translate-x-0.5" aria-hidden="true">→</span>
|
||||
<span
|
||||
class="transition-transform duration-200 group-hover:translate-x-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href="{href}"
|
||||
class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] no-underline transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
|
||||
aria-disabled="{disabled}"
|
||||
>
|
||||
<span>{label}</span>
|
||||
<span
|
||||
class="transition-transform duration-200 group-hover:translate-x-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
<slot />
|
||||
</a>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if variant === "primary"}
|
||||
<button
|
||||
type="{type}"
|
||||
disabled="{disabled}"
|
||||
class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
|
||||
>
|
||||
<span>{label}</span>
|
||||
<slot />
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="{type}"
|
||||
disabled="{disabled}"
|
||||
class=' group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition duration-200 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background,#ffffff)] {variant === "primary" ? "bg-[var(--wire-color-primary,#059669)] text-[var(--wire-color-primary-contrast,#ffffff)] hover:bg-[var(--wire-color-primary-hover,#047857)]" : "border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] text-[var(--wire-color-text,#0f172a)] hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)]"} '
|
||||
class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
|
||||
>
|
||||
<span>{label}</span>
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ component MarketingSectionHeader {
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="px-4 py-16 sm:px-6 sm:py-20 lg:px-8 {class}">
|
||||
<section class="px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20 {class}">
|
||||
<div class="mx-auto w-full max-w-7xl">
|
||||
<header
|
||||
class="max-w-3xl"
|
||||
@@ -22,11 +22,11 @@ component MarketingSectionHeader {
|
||||
<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{title}</h2>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p class="mt-5 text-base leading-8 text-[var(--wire-color-text-muted,#64748b)] sm:text-lg">{description}</p>
|
||||
<p class="mt-5 text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg">{description}</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="mt-10">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,17 +9,17 @@ component MetricGrid {
|
||||
<section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
|
||||
<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{#each metrics as metric}
|
||||
<article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))]">
|
||||
<article class="flex min-h-40 flex-col justify-center 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))]">
|
||||
<strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
|
||||
{metric.value}
|
||||
</strong>
|
||||
<span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
|
||||
{#if metric.description}
|
||||
<p class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted,#64748b)]">{metric.description}</p>
|
||||
<p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
|
||||
{/if}
|
||||
</article>
|
||||
{:empty}
|
||||
<p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-text-muted,#64748b)]">
|
||||
<p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
|
||||
No metrics available.
|
||||
</p>
|
||||
{/each}
|
||||
|
||||
@@ -9,26 +9,26 @@ component ProductArchitectureDiagram {
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
|
||||
<section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
|
||||
<header class="flex flex-col gap-4 border-b border-[var(--wire-color-border,#e2e8f0)] p-6 sm:flex-row sm:items-start sm:justify-between lg:p-8">
|
||||
<div>
|
||||
{#if title}<p class="m-0 font-semibold text-[var(--wire-color-text,#0f172a)]">{title}</p>{/if}
|
||||
{#if value}<strong class="mt-3 block text-3xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{value}</strong>{/if}
|
||||
{#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
||||
</div>
|
||||
{#if loading}
|
||||
<span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-muted,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-text-muted,#64748b)]">
|
||||
<span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-muted,#64748b)]">
|
||||
<span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]"></span>Loading
|
||||
</span>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<div class="bg-[var(--wire-color-surface-muted,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
|
||||
<div class="bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
{#if summary}
|
||||
<p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-text-muted,#64748b)] lg:px-8">{summary}</p>
|
||||
<p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-muted,#64748b)] lg:px-8">{summary}</p>
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
|
||||
@@ -10,13 +10,13 @@ component ProductCard {
|
||||
}
|
||||
|
||||
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-sm,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-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
|
||||
<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}">
|
||||
<div class="flex min-h-7 items-start justify-between gap-4">
|
||||
{#if eyebrow}<span class="text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</span>{/if}
|
||||
{#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-muted,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-text-muted,#64748b)]">{status}</span>{/if}
|
||||
{#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-muted,#64748b)]">{status}</span>{/if}
|
||||
</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-text-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if href}
|
||||
<a href="{href}" class="mt-6 inline-flex items-center gap-2 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)]">
|
||||
<span>{actionLabel}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
|
||||
|
||||
@@ -8,17 +8,17 @@ component ProductGrid {
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="px-4 sm:px-6 lg:px-8 {class}">
|
||||
<section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
|
||||
<div class="mx-auto w-full max-w-7xl">
|
||||
{#if title}<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
|
||||
{#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
|
||||
{#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
||||
|
||||
{#if empty}
|
||||
<div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] p-10 text-center text-[var(--wire-color-text-muted,#64748b)]">
|
||||
<div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-10 text-center text-[var(--wire-color-muted,#64748b)]">
|
||||
{emptyText}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-8 grid grid-cols-1 items-stretch gap-5 md:grid-cols-2 xl:grid-cols-3 [&>*]:min-w-0 [&>*]:h-full">
|
||||
<div class="mt-8 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-7 [&>*]:min-w-0 [&>*]:h-full">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -9,17 +9,9 @@ component ProductHero {
|
||||
|
||||
view {
|
||||
<section
|
||||
class="
|
||||
relative isolate overflow-hidden border-b border-[var(--wire-color-border,#e2e8f0)]
|
||||
bg-[var(--wire-color-background,#ffffff)] px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24
|
||||
{class}
|
||||
"
|
||||
class=" relative isolate overflow-hidden border-b border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-bg,#ffffff)] px-4 py-14 sm:px-6 sm:py-18 lg:px-8 lg:py-20 {class} "
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-0 -z-10 opacity-80"
|
||||
style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div class="pointer-events-none absolute inset-0 -z-10 opacity-80" style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);" aria-hidden="true" ></div>
|
||||
|
||||
<div class="mx-auto w-full max-w-7xl">
|
||||
<div
|
||||
@@ -28,25 +20,33 @@ component ProductHero {
|
||||
class:text-center='{align === "center"}'
|
||||
>
|
||||
{#if eyebrow}
|
||||
<p class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm">
|
||||
{eyebrow}
|
||||
</p>
|
||||
<p
|
||||
class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm"
|
||||
>
|
||||
{eyebrow}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if title}
|
||||
<h1 class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl" class:mx-auto='{align === "center"}'>
|
||||
{title}
|
||||
</h1>
|
||||
<h1
|
||||
class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl"
|
||||
class:mx-auto='{align === "center"}'
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
{/if}
|
||||
|
||||
{#if description}
|
||||
<p class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-text-muted,#64748b)] sm:text-lg" class:mx-auto='{align === "center"}'>
|
||||
{description}
|
||||
</p>
|
||||
<p
|
||||
class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg"
|
||||
class:mx-auto='{align === "center"}'
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="mt-10 space-y-10">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
component ProductPageShell {
|
||||
props { class = "" }
|
||||
props {
|
||||
class = ""
|
||||
}
|
||||
|
||||
view {
|
||||
<main
|
||||
class="
|
||||
min-h-screen w-full overflow-x-clip
|
||||
bg-[var(--wire-color-background,#ffffff)]
|
||||
font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)]
|
||||
text-[var(--wire-color-text,#0f172a)]
|
||||
antialiased
|
||||
{class}
|
||||
"
|
||||
class=" min-h-screen w-full overflow-x-clip bg-[var(--wire-color-bg,#ffffff)] font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)] text-[var(--wire-color-text,#0f172a)] antialiased {class} "
|
||||
>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
@@ -7,7 +7,7 @@ component ProductStatusBadge {
|
||||
|
||||
view {
|
||||
<span
|
||||
class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] text-[var(--wire-color-text-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
|
||||
class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] text-[var(--wire-color-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true"></span>
|
||||
{label}
|
||||
|
||||
Reference in New Issue
Block a user