release: WRNexusJS 0.3.3
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -969,6 +969,14 @@ const MIGRATIONS: Migration[] = [
|
||||
// Compiler-only fix. Existing WRN source files require no migration.
|
||||
},
|
||||
},
|
||||
{
|
||||
version: "0.3.3",
|
||||
id: "component-fix",
|
||||
description: "UI component fixes.",
|
||||
apply() {
|
||||
// Compiler-only fix. Existing WRN source files require no migration.
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** Release tooling uses this to require an explicit migration entry per version. */
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-toolbar",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/plugin",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/syntax",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1819,3 +1819,368 @@
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Theme-safe pricing, action, badge, table and channel refinements ------ */
|
||||
:where([data-wrn-component]) {
|
||||
color: var(--wire-color-text);
|
||||
font-family: var(--wire-font-sans);
|
||||
}
|
||||
|
||||
.wire-page-shell {
|
||||
min-height: 100%;
|
||||
background: var(--wire-color-bg);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-section {
|
||||
padding-block: var(--wire-space-section-sm, 3.5rem);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.wire-section {
|
||||
padding-block: var(--wire-space-section, 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.wire-container {
|
||||
max-width: var(--wire-container-max, 80rem);
|
||||
padding-inline: clamp(1rem, 2.5vw, 2rem);
|
||||
}
|
||||
|
||||
.wire-btn {
|
||||
min-height: 2.75rem;
|
||||
border-radius: 0.75rem;
|
||||
padding-inline: 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.01em;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-btn--primary {
|
||||
border-color: var(--wire-color-primary);
|
||||
background: var(--wire-color-primary);
|
||||
color: var(--wire-color-primary-contrast);
|
||||
box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
|
||||
}
|
||||
|
||||
.wire-btn--primary:hover:not(:disabled) {
|
||||
border-color: var(--wire-color-primary-hover);
|
||||
background: var(--wire-color-primary-hover);
|
||||
color: var(--wire-color-primary-contrast);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--wire-shadow-md, var(--wire-shadow-1));
|
||||
}
|
||||
|
||||
.wire-btn--secondary,
|
||||
.wire-btn--default {
|
||||
border-color: var(--wire-color-border-strong, var(--wire-color-border));
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
|
||||
}
|
||||
|
||||
.wire-btn--secondary:hover:not(:disabled),
|
||||
.wire-btn--default:hover:not(:disabled) {
|
||||
border-color: var(--wire-color-primary);
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wire-btn--ghost {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-btn--ghost:hover:not(:disabled) {
|
||||
border-color: var(--wire-color-border);
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-btn--danger {
|
||||
border-color: var(--wire-color-danger);
|
||||
background: var(--wire-color-danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wire-btn--danger:hover:not(:disabled) {
|
||||
filter: brightness(0.94);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wire-btn--sm {
|
||||
min-height: 2.25rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.wire-btn--md {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
|
||||
.wire-btn--lg {
|
||||
min-height: 3rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.wire-badge {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 9999px;
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-text-muted, var(--wire-color-muted));
|
||||
font-weight: 650;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-badge--sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.wire-badge--md {
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-badge--lg {
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.wire-badge--neutral {
|
||||
border-color: var(--wire-color-border);
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-text-muted, var(--wire-color-muted));
|
||||
}
|
||||
|
||||
.wire-badge--brand {
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 30%, transparent);
|
||||
background: var(--wire-color-primary-soft);
|
||||
color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-badge--success {
|
||||
border-color: color-mix(in srgb, var(--wire-color-success) 30%, transparent);
|
||||
background: var(
|
||||
--wire-color-success-soft,
|
||||
color-mix(in srgb, var(--wire-color-success) 12%, transparent)
|
||||
);
|
||||
color: var(--wire-color-success);
|
||||
}
|
||||
|
||||
.wire-badge--warning {
|
||||
border-color: color-mix(in srgb, var(--wire-color-warning) 30%, transparent);
|
||||
background: var(
|
||||
--wire-color-warning-soft,
|
||||
color-mix(in srgb, var(--wire-color-warning) 12%, transparent)
|
||||
);
|
||||
color: var(--wire-color-warning);
|
||||
}
|
||||
|
||||
.wire-badge--danger {
|
||||
border-color: color-mix(in srgb, var(--wire-color-danger) 30%, transparent);
|
||||
background: var(
|
||||
--wire-color-danger-soft,
|
||||
color-mix(in srgb, var(--wire-color-danger) 12%, transparent)
|
||||
);
|
||||
color: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-table-wrap {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-gutter: stable;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius, 1rem);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.wire-table th,
|
||||
.wire-table td {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--wire-color-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wire-table thead th {
|
||||
background: var(--wire-color-surface-2);
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-table tbody th {
|
||||
color: var(--wire-color-text);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wire-table tbody td {
|
||||
color: var(--wire-color-text-muted, var(--wire-color-muted));
|
||||
}
|
||||
|
||||
.wire-table tbody tr:last-child > * {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.wire-table--hoverable tbody tr:hover > *,
|
||||
.wire-comparison-table tbody tr:hover > * {
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-table--striped tbody tr:nth-child(even) > * {
|
||||
background: color-mix(in srgb, var(--wire-color-surface-2) 72%, transparent);
|
||||
}
|
||||
|
||||
.wire-table--compact th,
|
||||
.wire-table--compact td {
|
||||
padding: 0.7rem 0.9rem;
|
||||
}
|
||||
|
||||
.wire-comparison-table th:not(:first-child),
|
||||
.wire-comparison-table td:not(:first-child) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-comparison-table thead th:first-child,
|
||||
.wire-comparison-table tbody th {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
|
||||
.wire-comparison-table thead th:first-child {
|
||||
z-index: 2;
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
|
||||
.wire-channel-card {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.wire-channel-card__icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
|
||||
}
|
||||
|
||||
.wire-channel-card__icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -0.5rem -0.75rem auto;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 14%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wire-channel-card__icon > span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.wire-channel-card__icon > span::before {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- Channel card --------------------------------------------------------- */
|
||||
|
||||
.wire-channel-card__icon {
|
||||
display: grid;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
flex: 0 0 3rem;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
color: color-mix(in srgb, var(--wire-color-primary) 72%, var(--wire-color-text));
|
||||
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 38%, var(--wire-color-border));
|
||||
|
||||
border-radius: 0.875rem;
|
||||
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
color-mix(in srgb, var(--wire-color-primary) 18%, var(--wire-color-surface)),
|
||||
color-mix(in srgb, var(--wire-color-primary) 8%, var(--wire-color-surface-2))
|
||||
);
|
||||
|
||||
box-shadow:
|
||||
inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 8%, transparent),
|
||||
0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
.wire-channel-card__icon-glyph {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: inherit;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wire-channel-card__icon-glyph::before {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Improve contrast when the current theme uses a dark primary color. */
|
||||
[data-theme="dark"] .wire-channel-card__icon,
|
||||
.dark .wire-channel-card__icon {
|
||||
color: color-mix(in srgb, var(--wire-color-primary) 48%, white);
|
||||
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 42%, var(--wire-color-border));
|
||||
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
color-mix(in srgb, var(--wire-color-primary) 24%, var(--wire-color-surface)),
|
||||
color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface-2))
|
||||
);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.wire-channel-card:hover .wire-channel-card__icon {
|
||||
color: color-mix(in srgb, var(--wire-color-primary) 82%, var(--wire-color-text));
|
||||
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 62%, var(--wire-color-border));
|
||||
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .wire-channel-card:hover .wire-channel-card__icon,
|
||||
.dark .wire-channel-card:hover .wire-channel-card__icon {
|
||||
color: color-mix(in srgb, var(--wire-color-primary) 58%, white);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
Reference in New Issue
Block a user