docs: update portal for WRNexusJS 0.2.63

This commit is contained in:
Clintchiz committed 2026-07-19 21:35:58 +05:30
1 parent 5c665ed9d2
commit 517dd5ca03
77 files changed
+535 -519

No files matched your search

+4 -4
View File
@@ -10,12 +10,12 @@ page wrnexusui {
<header class="topbar">
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.62</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.63</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
</header>
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
<main class="page package-page">
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/ui</h2><p>Themeable server-rendered UI components and CSS.</p><span class="status status-beta">Private preview · 0.2.62</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
<article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/ui</h1><p>Themeable server-rendered UI components and CSS.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ui@0.2.62</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>First-party Wire UI component library — a set of themeable <code>.wrn</code> components plus a single tokenized stylesheet.</blockquote>
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/ui</h2><p>Themeable server-rendered UI components and CSS.</p><span class="status status-beta">Private preview · 0.2.63</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
<article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/ui</h1><p>Themeable server-rendered UI components and CSS.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ui@0.2.63</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>First-party Wire UI component library — a set of themeable <code>.wrn</code> components plus a single tokenized stylesheet.</blockquote>
<p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
<h3 id="overview">Overview</h3>
<p><code>@wrnexus/ui</code> ships a library of server-rendered <code>.wrn</code> components (layout, form controls, and feedback UI) together with one themeable stylesheet, <code>ui.css</code>. The components are <strong>auto-discovered</strong> by the framework router — you don't import them in code. Once the package's component directory is on the router's scan path, you mount any component in a page with <code>data-component=&quot;&lt;name&gt;&quot;</code>. Every visual is driven by <code>var(--wire-*)</code> theme tokens, so components restyle instantly when the theme changes. The tiny JS surface (<code>src/index.ts</code>) exists only so the toolchain (CLI build + dev server) can locate the component directory and stylesheet.</p>
@@ -132,7 +132,7 @@ const router = buildRouter(appDir, &#123; componentDirs: [uiComponentsDir()] &#1
&lt;/div&gt;</code></pre></article></div></section><section id="components" class="prose ui-component-reference"><h2>All 901 UI components and props</h2><p>This reference is generated from the exact installed <code>.wrn</code> sources. Required props have no default; optional props show their default value.</p><h3>Actions</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AcceptAllCookiesButton</strong><br><code>data-component=&quot;AcceptAllCookiesButton&quot;</code><br><small>Reusable accept all cookies button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticleNewsletterCTA</strong><br><code>data-component=&quot;ArticleNewsletterCTA&quot;</code><br><small>Reusable article newsletter c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticleShareActions</strong><br><code>data-component=&quot;ArticleShareActions&quot;</code><br><small>Reusable article share actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BackButton</strong><br><code>data-component=&quot;BackButton&quot;</code><br><small>Reusable back button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Button</strong><br><code>data-component=&quot;Button&quot;</code><br><small>Reusable button component.</small></td><td><code>label: string = &quot;Button&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>size: string = &quot;md&quot;</code><br><code>disabled: boolean = false</code><br><code>loading: boolean = false</code><br><code>icon: string = &quot;&quot;</code><br><code>className: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>CenteredCTA</strong><br><code>data-component=&quot;CenteredCTA&quot;</code><br><small>Reusable centered c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ClearFiltersButton</strong><br><code>data-component=&quot;ClearFiltersButton&quot;</code><br><small>Reusable clear filters button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CloseButton</strong><br><code>data-component=&quot;CloseButton&quot;</code><br><small>Reusable close button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeCopyButton</strong><br><code>data-component=&quot;CodeCopyButton&quot;</code><br><small>Reusable code copy button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactCTA</strong><br><code>data-component=&quot;ContactCTA&quot;</code><br><small>Reusable contact c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><bLine truncated
<aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#components">Components</a><a class="toc-level-4" href="#layout">Layout</a><a class="toc-level-4" href="#core-feedback">Core / feedback</a><a class="toc-level-4" href="#additional-controls-data-display">Additional controls &amp; data display</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#ui-css-asset-export">./ui.css asset export</a><a class="toc-level-4" href="#tailwind-and-motion">Tailwind and motion</a><a class="toc-level-4" href="#using-the-selected-theme-in-application-ui">Using the selected theme in application UI</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#auto-discovery">Auto-discovery</a><a class="toc-level-4" href="#mounting-components-in-a-page">Mounting components in a page</a><a class="toc-level-3" href="#overrides">Overrides</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a><a class="toc-level-2" href="#components">All UI components</a></nav></aside>
</main>
<footer>WRNexusJS 0.2.62 · Private Developer Preview · Bun-native · Documentation generated from installed package APIs.</footer>
<footer>WRNexusJS 0.2.63 · Private Developer Preview · Bun-native · Documentation generated from installed package APIs.</footer>
</div>
}
}